*, *:before, *:after { box-sizing: border-box; }
img { border: none; height: auto; width: 100%; display: block; }
::selection { background:#aaa; } 
html { -webkit-text-size-adjust: 100%;  scroll-behavior: smooth; } 

/*  F A R B E N
	hell	 	#E9E8E8;
	dunkel	 	#4A4A4A;
	blau 		#1f325a;
	mint 		#91bcc6;
	rot 		#cf9f9f;
	gruen 		#6b9f61; / 80b177
	blau1		#9ba0bf;
	blau2		#365673; / 6889a7
========================= */

@font-face {
	font-family: 'Gilda Display';
	font-style: normal;
	font-weight: 400;
	src: local('Gilda Display'), local('Gilda-Display'),
       url('gilda-display-v8-latin-regular.woff2') format('woff2'), 
       url('gilda-display-v8-latin-regular.woff') format('woff'); 
    font-display: swap;
} 
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Noto Sans Regular'),
       url('noto-sans-v11-latin-regular.woff2') format('woff2'), 
       url('noto-sans-v11-latin-regular.woff') format('woff');
    font-display: swap; 
}
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 700;
	src: local('Noto Sans Bold'),
       url('noto-sans-v11-latin-700.woff2') format('woff2'), 
       url('noto-sans-v11-latin-700.woff') format('woff'); 
    font-display: swap;
}
strong { font-weight: 700;}
sup { font-size: 10px; font-weight: 700;}

body {
	background: #222;
	font: normal 62.5%/1.5 'Noto Sans', Arial, sans-serif; 
	color: #E9E8E8;
	margin: 0;
	padding: 0;
	}	
header 	{ 
	width: 350px;
	height: 100vh;
	overflow: hidden;
    margin: 0; 
    padding: 30px;
    position: fixed;
	}
#start header  { background: #91bcc6; }
#start { background: #91bcc6 url('../img/denken-planen-bauen-L.jpg') no-repeat center center fixed;
		background-size: cover; }
#bestand { background: #cf9f9f; }
#flaeche  { background: #80b177; }
#zukunft  { background: #9ba0bf; }
#buero  { background: #6889a7; }

main { 
	width: calc(100% - 350px);
	height: auto;
	overflow: hidden;
    margin: 0; 
    padding: 0px;
    position: absolute;
    right: 0;
    font-size: 1rem;
	}
footer { 
	position: absolute;
	bottom: 30px;
	font-size: 1.1rem;
    }	
	
h1 {
	font: bold italic 3.5rem/1.1 Georgia, serif;
	}	
h2 {
	font: bold normal 2rem/1.2 'Gilda Display', Times, serif;
	padding: 0;
	margin: 15px 0 20px 0; 
	}
section {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	margin: 0;
	}
.intro img,
.referenz img  {
	z-index: 1;
	}
.text {
	width: 450px;
	background: rgba(255,255,255,0.7);
	color: #333;
	z-index: 2;
	padding: 0 20px 15px 20px;
	font-size: 1rem;
	position: absolute;
	right: 50px;
	bottom: 50px;
	}

#start .intro  { 
	height: 100vh;
	width: 100%;
	}
#start .intro video,
#start .intro img { 
	z-index: 1;
	position: absolute;
  top: 0;
  left: 0;
  min-width: 100%; 
  min-height: 100%;
	}

.up { text-transform: uppercase; }
.datenschutz {
	background: #4A4A4A;
	padding: 150px 20px 10px 20px;
	}
.textwueste {
	max-width: 700px;
	}	
.textwueste a { 	
	color: #91bcc6;
	}	
.textwueste a:hover { 	
	color: #fff;
	}	
	
nav ul { 
	list-style-type: none;
	margin: 80px 0 0 0;
	padding: 0;
	font-size: 1.1rem;
	line-height: 1.8;
	color: #4A4A4A;
	}
nav ul li a {
	display: block;
	}
nav ul li a:active {
	color: #fff;
	}
nav ul li a:focus {
	color: #fff;
	}
nav ul li:last-child  {
	padding-top: 35px;
	}

a {
	color: #E9E8E8;
	text-decoration: none;
	}	
a:hover {
	color: #4A4A4A;
	text-decoration: none;
	}	


.abschluss {
	display: none;
	}
.mob_only {
	display: none;
	}

/* bg-size:cover bug in iOS	 */
#bg {
	position:fixed; 
	top:-50%; 
	left:-50%; 
	width:200%; 
	height:200%;
	z-index: -1; 
	}
#bg img { 
	position:absolute; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	margin:auto; 
	min-width:50%;
	min-height:50%;	
	}




	
/* --- RESPONSIVE ---------------------------------------------- */

@media screen and (min-width: 1600px) {
header 	{ 
	width: 550px;
	height: 100vh;
	overflow: hidden;
    margin: 0; 
    padding: 50px;
    position: fixed;
	}
main { 
	width: calc(100% - 550px);
	height: auto;
	overflow: hidden;
    margin: 0; 
    padding: 0px;
    position: absolute;
    right: 0;
	}

 }


@media screen and (max-width: 830px) {
header 	{ 
	width: 100%;
	height: auto;
	overflow: hidden;
    margin: 0; 
    padding: 20px;
    position: relative;
	}
main { 
	width: 100%;
	height: auto;
	overflow: hidden;
    margin: 0; 
    padding: 0;
    position: relative;
	}
footer { 
	position: relative;
	bottom: initial;
	font-size: 1rem;
    }	
.text, 
.intro .text,
.referenz .text {
	max-width: 90%;
	background: rgba(255,255,255,0.7);
	z-index: 2;
	padding: 5px 20px 15px 20px;
	margin: 0px auto 20px auto;
	position: relative;
	font-size: 1rem;
	top: initial;
	right: initial;
	}

#start  { background: #91bcc6; }
	
#start .intro  { 
	height: auto;
	width: 100%;
	}
#start .intro video,
#start .intro img { 
	z-index: 1;
	position: relative;
	width: 100%;
	height: auto;
	}
	
nav ul { 
	list-style-type: none;
	margin: 20px 0 0 0;
	padding: 0;
	font-size: 1.1rem;
	line-height: 1.8;
	}
nav ul li:last-child  {
	padding-top: initial;
	}
.abschluss {
	display: block;
	margin: 0 auto 40px auto;
	width: 85%
	}
.imprint_mobil {
	float: left;
	}
.top_anker {
	/* float: right; */
	position: fixed;
	z-index: 5;
	right: 50px;
	bottom: 50px;
	width: 35px;
	}

.desktop_only, #bg { display: none;}
.mob_only {
	display: block;
	}


 }