/**
* Styles fuer die Website Cinster GmbH Germany
* Autor: btb
* September 2019
*/ 


/* vordefinierte Browser-Styles zuruecksetzen
------------------------------------------------------------- */

/* Normalisiert margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
 {margin: 0; padding: 0; border: 0;}

/* Normalisiert font-size fuer Ueberschriften */
h1, h2, h3, h4, h5, h6
 {font-size: 100%;}

/* Entfernt list-style aus Listen */
ul, ol
 {list-style: none;}
 
/* Normalisiert die Zeilenhoehe */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td 
 {line-height: normal;}

/* Normalisiert font-style und font-weight auf normal */
address, caption, cite, code, dfn, em, strong, th, var
 {font-style: normal; font-weight: normal;}

/* Normalisiert Tabellenraender */
table
 {border-collapse: collapse; border-spacing: 0;}

/* Entfernt border aus fieldset und img */
fieldset, img
 {border: 0; }

/* Richtet Text in caption, th und td links aus */
caption, th, td
 {text-align: left;}
 
/* Basiseinstellung fuer Links */
a, a img, a:hover, a:hover img, a:link, a:link img, a:visited, a:visited img, a:active, a:active img
 {outline: none; text-decoration: none;}
 
 

/* allgemeine Elemente 	border: 1px solid #b6b6b6;
------------------------------------------------------------- */
html { /* fuer IE 6 (und 7?)  */
	background-color: #ffffff;
	height: 100%;		
	overflow-y:scroll;  /* ergänzt scrollbalken, um huepfen zu verhindern  */
}	


body { 
	position: relative;
	width:100%;
	background-color: #fff;
	height: 100%;	
    color: #4B4F54;
    font-family: soleil, sans-serif;
    font-weight: 300;
    font-size: 62.5%;  /* entspricht 10px, damit lassen sich weitere Werte leichter umrechnen -> 62.5% = 10px / 16px standardschrift browser  */
    font-style: normal; 
}


div#wrapper {
	position: absolute;
	width:100%;
	z-index: 10;
	}


div#content {
	padding: 0;
	margin: 0;
	background-color: #fff;
	position: relative;
	width:100%;
}


div.box {
	position: relative;
	width: 100%;
 	padding: 0 0 0 32px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other Webkit */
	-moz-box-sizing: border-box; /* Firefox, other Webkit */
	box-sizing: border-box; /* Opera/ IE 8+ */
	*behavior: url(boxsizing.htc);
}

div#box_thanks {
	height: 200px;
}



div.boxContainer {
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	border: solid #F36 0px;
 -webkit-box-sizing: border-box; /* Safari/Chrome, other Webkit */
	-moz-box-sizing: border-box; /* Firefox, other Webkit */
	box-sizing: border-box; /* Opera/ IE 8+ */
	*behavior: url(boxsizing.htc);
}


.anker {
	display: block;
}


div.grau {
 color: #fff;
	background-color: #4B4F54;
	background-image: url(../imgs/kachel-menu-s.png);
 background-repeat: repeat-y;
 background-position:  -228px 0;
}

div.rot {
 color: #fff;
	background-color: #F5333F;
	background-image: url(../imgs/kachel-menu-s.png);
 background-repeat: repeat-y;
 background-position:  -228px 0;
}

h3.rot {
	color: #F5333F;
 font-size: 1.8em;
}


div#box_spacer {
	padding: 800px 0 0 0;
}

div.spacerGrau {
 background-color: #4B4F54;
 height: 3px;
}


div#box_start {
	padding-bottom:5%;
}


h1 {
	padding-top: 5%;
 text-align: center;
	}
 
img.logo {
  width: 50%;
  heigth: auto;
	}
 
 
img.mood {
  width: 100%;
  heigth: auto;
	} 



h2 {
	font-family: soleil, sans-serif;
 font-weight: 500;
	font-size: 2.5em; /* 25 px */
	text-transform: uppercase;
	line-height: 1.250em; /* 100/80 px */
	padding-top: 1.5em;
	}	

	
h2.weiss {
	padding-top: 145px;
	}	

#box_privacy h2,
#box_imprint h2 {
	font-size: 2em; 
	padding: 20px 0 0 0;
	}
	
h3 {
	font-size: 2.0em; /* 20 px */
 line-height: 1.682em;
 padding-top: 2.0em;
	}
 
#box_privacy h3,
#box_imprint h3 {
	font-size: 1.6em; 
	padding: 20px 0 0 0;
	}
 
 h4 {
	font-size: 1.8em; /* 18 px */
 line-height: 1.682em;
 padding-top: 2.0em;
	}
 
#box_privacy h4,
#box_imprint h4 {
	font-size: 1.6em; 
	padding: 20px 0 0 0;
	}
 
ul.datenschutz li {
	list-style: square;
 font-size: 1.3em; /* 15 px */
	line-height: 1.682em; /* 37/22 px */
	padding: 30px 0 0 0;
	}
 
 
strong.angaben {
	font-size: 1.2em; 
 line-height: 1.682em;
 padding-top: 2.0em;
	}	


p {
	font-size: 1.5em; /* 15 px */
	line-height: 1.682em; /* 37/22 px */
	padding: 30px 0 0 0;
	}
 
 
#box_privacy p,
#box_imprint p {
	font-size: 1.3em; 
	padding: 15px 0 0 0;
	}

	
a:hover {
	text-decoration: underline;
	}	

	
.nospace {
	padding-top: 0 !important;
}


strong {
  font-family: soleil, sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em
	}


div#box_project h2 {
	padding-top: 100px;
}


p.links {
 width: 100%;
 float:none;
	padding-right: 5%;	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other Webkit */
	-moz-box-sizing: border-box; /* Firefox, other Webkit */
	box-sizing: border-box; /* Opera/ IE 8+ */
	*behavior: url(boxsizing.htc);
}


p.rechts {
width: 100%;
float:none;
 -webkit-box-sizing: border-box; /* Safari/Chrome, other Webkit */
	-moz-box-sizing: border-box; /* Firefox, other Webkit */
	box-sizing: border-box; /* Opera/ IE 8+ */
	*behavior: url(boxsizing.htc);
}


div.box p a {
	color: #4B4F54;
}

div.grau p a {
	color: #fff;
}





/* Menue 	
------------------------------------------------------------- */

div#slide-menu {
	position: fixed;
	top: 0;
	left: -228px;
	z-index: 100;
	display: block;
	float: left;
	width: 228px;
	height: 100%;
	background: rgba(75, 79, 84, 0.95); /* stellt Transparenz her ohne vererbbar zu sein, wichtig fuer die menu-links, die weiss bleiben sollen */
	-moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms;
}


div#slide-menu ul {
	position: fixed;
	left: -228px;
	text-transform: uppercase;
	top: 5%;
	width: 228px;
}

.navImprint,
.navPrivacy  {
	text-transform: none;
}



div#slide-menu ul li {
	padding: 0  0 14px 30px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other Webkit */
	-moz-box-sizing: border-box; /* Firefox, other Webkit */
	box-sizing: border-box; /* Opera/ IE 8+ */
	*behavior: url(boxsizing.htc);
}


div#slide-menu ul li a {
	font-family: soleil, sans-serif; 
 font-weight: 400;
	font-size: 1.8em; /* 18 px */
	color: #fff;
	display: block;
}


div#slide-menu ul li a:hover {
	text-decoration: none;
	color: #F5333F;
}


div.menu-trigger {
	position: fixed;
	top: 0%;
	left: 0px;
	width: 54px;
	height: 54px;
	display: block;
	z-index: 100;
	cursor: pointer;
	-moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms;
	text-indent: -9999px;
}

div.menu-trigger.menuS,
div.menu-trigger.menuW {
	display: block;
	width: 54px;
	height: 54px;		
}

div.menu-trigger.menuS {
	background: url(../imgs/icon-menu-s.png) no-repeat;	
}

div.menu-trigger.menuW {
	background: url(../imgs/icon-menu-w.png) no-repeat;	
}

div.menu-trigger:hover.menuS {
	background: url(../imgs/icon-menu-s-hover.png) no-repeat;
}

div.menu-trigger:hover.menuW {
	background: url(../imgs/icon-menu-w-hover.png) no-repeat;
}
		

body.menu-active div#slide-menu { left: 0px; }
body.menu-active div#slide-menu ul { left: 0px;}
body.menu-active div.menu-trigger { 
   left: 228px; 
   background: url(../imgs/icon-menu-s-hover.png) no-repeat;
   }


body.menu-active div.schwarz { 
	background-position: 0 0;
    -moz-transition:  background-position 300ms;
	-webkit-transition:  background-position 300ms;
	-ms-transition: background-position 300ms;
	-o-transition: background-position 300ms;
	transition:  background-position 300ms;
    }







/* Pfeilnavigation 	
------------------------------------------------------------- */
ul.pfeilnav {
	position: fixed;
	top: 0%;
	right: 0px;
	width: 54px;
	display: block;
	z-index: 100;
	cursor: pointer;
	-moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms;
}


ul.pfeilnav.bottom {
	position: absolute;
	width: 54px;
	margin-top: -55px;
	top: 100%;
	right: 50%;
	margin-right: -27px;
	border-bottom: 1px solid #fff;
}


ul.pfeilnav li {
	width: 54px;
	height: 54px;
}


ul.pfeilnav li a {
	display: block;
	width: 54px;
	height: 54px;
	text-indent: -9999px;
}



ul.pfeilnav li.top a {
	background: url(../imgs/icon-top.png) no-repeat;
}


ul.pfeilnav li.top a:hover {
	background: url(../imgs/icon-top-hover.png) no-repeat;
}


ul.pfeilnav li a.unsichtbar {
	display: none;
}


ul.pfeilnav li a.start {
	margin-top: -55px;
}