@charset "utf-8";
/* CSS Document */

html,
html * {
   	padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Gill Sans", "Helvetica", "Arial", "sans-serif";
}

body {
    margin-left: auto;
	margin-right: auto;
	max-width: 1250px;
}

/* ----------------------------------- */
header {
    display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: 85px 150px;
	grid-template-areas:
	"LL"
	"NN";
	margin-bottom: 50px;
	justify-items: center;
	align-items: flex-end;
}

	.style-logo {
	width:100%;
	max-width: 400px;
	}

	.style-nav {
	grid-area: NN;
    justify-self: center;
	}
	
	.style-nav li {
    text-align: center;
    display: block;
	margin-top: 15px;
	}

/* ----------------------------------- */

	.container {
	padding-top: 25px;
	padding-right: 25px;
	padding-left: 25px;
	padding-bottom: 25px;
}
	.container-main-index {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	gap: 6px;
	grid-template-areas:
	"ZZ YY"
	"XX WW"
	"VV UU"
}
	.style-img-start {
	width: 100%;
	opacity: 50%;
	}

	.container-main-komp {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto auto auto auto auto auto;
	gap: 40px;
	grid-template-areas:
	"ZZ"
	"WW"
	"TT"
	"YY"
	"VV"
	"SS"
	"XX"
	"UU"
	"RR"
}
.style-img-komp {
	max-width: 100%;
	opacity: 75%;	
	}

	.container-main-arch {
	width: 100%;
	text-align:center;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto auto auto;
	gap: 40px;
	grid-template-areas:
	"ZZ"
	"WW"
	"YY"
	"VV"
	"XX"
	"UU";
}
	.box-projekt-01 {
	grid-area: ZZ;
	position: relative;
	}
		
	.box-projekt-02 {
	grid-area: YY;
	position: relative;	
	}
	.box-projekt-03 {
	grid-area: XX;
	position: relative;	
	}
	.box-projekt-04 {
	grid-area: WW;
	position: relative;	
	}
	.box-projekt-05 {
	grid-area: VV;
	position: relative;	
	}
	.box-projekt-06 {
	grid-area: UU;
	position: relative;	
	}
	.style-img-proj {
	width: 100%;
	opacity: 75%;	
	}
	.style-img-text {
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translate(-50%, 0%);
	z-inde: 1;
	font-size: 24px;
	font-weight: bold;
    color: #006666;
	letter-spacing: 2px;
	background-color: white;
	opacity: 75%;
	}
	.container-main-eb {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto auto auto;
	gap: 40px;
	grid-template-areas:
	"ZZ ZZ"
	"YY XX"
	"WW WW"
	"TT SS"	
	"VV VV"
}
	.box1 {
	grid-area: ZZ;
	}
	.box2 {
    grid-area: YY;
	}
	.box3 {
    grid-area: XX;
	}
	.box4 {
	grid-area: WW;
	border-style:solid;
	border-width: 5px;
	border-color: #999999;
	padding: 20px;
	}

	.box5 {
    grid-area: VV;
	border-style:solid;
	border-width: 5px;
	border-color: #999999;
	padding: 20px;
	}

	.box6 {
    grid-area: UU;
	border-style:solid;
	border-width: 5px;
	border-color: #999999;
	padding: 20px;
	}
	
	.box7 {
    grid-area: TT;
	}
	.box8 {
    grid-area: SS;
	}
	.box9 {
    grid-area: RR;
	}
	
	.style-logo-ee {
	width: 100%;
	}

	.container-main-kontakt {
	width: 100%;
	display: grid;
	text-align: center;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	gap: 40px;
	grid-template-areas:
	"ZZ"
	"YY"
}

	.box-text-kontakt {
	grid-area: ZZ;
	background-color: lightgray;
	padding:20px;
	}

	.container-main-impressum{
	width: 100%;
	display: grid;
	text-align: center;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	gap: 40px;
	grid-template-areas:
	"ZZ"
	"YY"
	"XX"
}
	.box-text-impressum {
	grid-area: XX;
	background-color: lightgray;
	padding:20px;
	}
/* ----------------------------------- */

footer {
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: 25px 1fr 1fr;
	grid-template-areas:
	"MM"
	"AA"
	"BB";
	background-color: lightgray;
	padding: 10px;
	margin-top: 20px;
	height: auto;
	justify-items: center;
}

/* ----------------------------------- */

a:link {
    font-size: 14px;
    color: #666;
    letter-spacing: 1px;
    text-decoration: none;
	font-weight: normal;
}
a:visited {
    font-size: 14px;
    color: #666;
    letter-spacing: 1px;
    text-decoration: none;
}
a:hover {
    font-size: 14px;
    color: #006666;
	letter-spacing: 2px;
    font-weight: bold;
}


p {
    font-size: 13px;
    color: #525252;
    letter-spacing: 1px;
    text-decoration: none;
	text-align: justify;
	line-height: 150%
	
	}

p2 {
    font-size: 13px;
    color: #525252;
    letter-spacing: 1px;
    text-decoration: none;
    line-height: 30px;
}
p3 {
    font-size: 13px;
    color: #525252;
    letter-spacing: 1px;
    text-decoration: none;
}
p-f {
    font-size: 13px;
    color: #525252;
    letter-spacing: 1px;
    text-decoration: none;
	}

h {
    font-size: 13px;
    color: #525252;
	font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
}

h2 {
    font-size: 13px;
    color: #525252;
	font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
	line-height: 30px;
}
h3 {
    font-size: 14px;
	font-weight: bold;
    color: #006666;
	letter-spacing: 1px;
}


/*Tablet View*/

@media (min-width: 768px){
	
header {
    display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: 2fr 1fr;
	grid-template-areas:
	"LL"
	"NN";
}
	.style-nav ul li {
	margin-left: 25px;
	}
	
	.style-nav li {		
	float: left;
	}
	
/* ----------------------------------- */
	
	.container-main-index {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 6px;
	grid-template-areas:
	"ZZ YY XX"
	"WW VV UU"
	}
	
	.container-main-komp {
	width: 100%;
	display: grid;
	grid-template-columns: 50% 1fr;
	grid-template-rows: auto auto auto auto auto auto;
	gap: 40px;
	grid-template-areas:
	"ZZ TT"
	"WW TT"
	"YY SS"
	"VV SS"
	"XX RR"
	"UU RR"
}
	.box7 {
    grid-area: TT;
	display:grid;
	justify-self: center;
	align-content: end;
	}
	.box8 {
    grid-area: SS;
	display:grid;
	justify-self: center;
	align-content: end;
	}
	.box9 {
    grid-area: RR;
	display:grid;
	justify-self: center;
	align-content: end;
	}
	
	.container-main-arch {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	column-gap: 50px;
	row-gap: 30px;
	grid-template-areas:
	"ZZ YY"
	"XX WW"
	"VV UU"
}	
	
	.container-main-eb {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr  1fr 1fr;
	grid-template-rows: auto auto auto;
	gap: 40px;
	grid-template-areas:
	"ZZ ZZ YY XX"
	"ZZ ZZ TT SS"
	"WW WW VV VV"
	}
	
	.container-main-kontakt {
	width: 100%;
	text-align: start;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	gap: 40px;
	grid-template-areas:
	"ZZ YY"
	}
	
	.box-text-kontakt {
	grid-area: ZZ;
	background-color: white;
	padding-top: 0px;
	padding-left: 0px;
	}
	
	.container-main-impressum {
	width: 100%;
	text-align: start;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 40px;
	grid-template-areas:
	"ZZ YY"
	"XX XX"
	}
/* ----------------------------------- */
	
	footer {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas:
	"MM AA BB";
}

	.footer-m {
	justify-self: start;
}
	.footer-a {
	justify-self: center;
}
		.footer-t {
	justify-self: end;
}
}


/*Desktop View*/

@media (min-width: 1024px){

	body {
	max-width: 1250px;
	}
	
	header {
    display:grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 100px;
	grid-template-areas: "LL NN";
	
	}
	
	.style-logo {
	width: auto;
	justify-self: start;
	}
	
	.style-nav {
	justify-self: end;
	}
	
	.style-nav li {		
	float: left;
	}
	
/* ----------------------------------- */

main {
    height: 600px;
	overflow: scroll;
}
	.container-main-komp {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto auto;
	column-gap: 50px;
	row-gap: 30px;
	grid-template-areas:
	"ZZ YY XX"
	"WW VV UU"
	"TT SS RR"
}
	
	
	.container-main-arch {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	column-gap: 50px;
	row-gap: 30px;
	grid-template-areas:
	"ZZ YY XX"
	"WW VV UU"
}
	
	.container-main-eb {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 80px 1fr 1fr;
	grid-template-rows: auto auto auto;
	gap: 50px;
	grid-template-areas:
	"ZZ ZZ . YY XX"
	"ZZ ZZ . TT SS"	
	"WW WW . VV VV"
	}
	
	.container-main-kontakt {
	width: 100%;
	text-align: start;
	display: grid;
	grid-template-columns: 4fr 6fr;
	grid-template-rows: auto;
	gap: 40px;
	grid-template-areas:
	"ZZ YY"
	}
	
	.container-main-impressum {
	width: 100%;
	text-align: start;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 40px;
	grid-template-areas:
	"ZZ YY"
	"XX XX"
	}
	
}