﻿
#Box {
	width: 100%;
	height:100%;
	display: grid;
	gap: 0.5em;
	grid-template-columns: 50px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 50px;
	/* 1fr x12 ergibt 12 Spalten */

	grid-template-rows: min-content min-content min-content min-content min-content min-content min-content min-content min-content min-content; 
	/* 9xmin-contenet =  9 Zeilen ; minimiert wenn kein Inhalt*/
	/* grid-template-rows: auto 50fr 50fr 50fr 50fr min-content; */
	/* min-content = Höhe auf 0 solange keine Inhalt */
}


.box {
	background-color: #FFFFFF;
}


/*
#TextBox{
	width: 50%;
}
*/

#TextBoxProjekt{
	margin-top:20px;
}
#TextBoxProjektData{
	margin-top:20px;
}


.textbox-ueberschrift{
	font-family: Arial;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 2px;
	text-decoration: none;
	margin-bottom: 0px;
	color: #808080;
	background-color: #FFFFFF;
}

.textbox-text{
	text-decoration: none;
	font-family: Arial;
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 0px;
	color: #000000;
	background-color: #FFFFFF;
}



#PicBox {
	width: 100%;
	margin-top: 10px;
}



.projekt{
	background-color: #FFFFFF;
}


#PositionBESCHREIBUNG {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: inherit;              /*  flex: bricht im Container um; inherit: Überschrift oben  */
	grid-column: 2/span 4;
	grid-row: 3;
}


#PositionDATA {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: inherit;              /*  flex: bricht im Container um; inherit: Überschrift oben  */
	grid-column: 2/span 3;
	grid-row: 4;
}


#Position03 {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: inherit;              /*  flex bricht im Container um  */
	grid-column: 7/span 5;
	grid-row: 3;
}

#Position04 {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: inherit;              /*  flex bricht im Container um  */
	grid-column: 6/span 5;
	grid-row: 4;
}

#Position05 {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: inherit;              /*  flex: bricht im Container um; inherit: Überschrift oben  */
	grid-column: 2/span 5;
	grid-row: 5;
}


#Position06 {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: inherit;              /*  flex bricht im Container um  */
	grid-column: 9/span 3;
	grid-row: 5;
}

#Position07 {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: inherit;              /*  flex bricht im Container um  */
	grid-column: 3/span 8;
	grid-row: 6;
}
#Position08 {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: inherit;              /*  flex: bricht im Container um; inherit: Überschrift oben  */
	grid-column: 2/span 5;
	grid-row: 7;
}






 @media only screen and (max-width: 1100px) {

#PositionBESCHREIBUNG {
	grid-column: 2/span 10;
	grid-row: 1;
}
#PositionDATA {
	grid-column:2/span 10;
	grid-row: 3;
}
#Position03 {
	grid-column: 2/span 10;
	grid-row: 2;
}
#Position04 {
	grid-column:2/span 10;
	grid-row: 4;
}
#Position05 {
	grid-column: 2/span 10;
	grid-row: 5;
}
#Position06 {
	grid-column:2/span 10;
	grid-row: 6;
}
#Position07 {
	grid-column:2/span 10;
	grid-row: 7;
}
#Position08 {
	grid-column:2/span 10;
	grid-row: 8;
}





}
 @media only screen and (max-width: 700px) {

#Box {
	grid-template-columns: 10px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 10px;
	/* 1fr x12 ergibt 12 Spalten */




}

