/**
	CSS-Datei: stint.css
	
	Aufbau mit 3 Breakpoints beim MediaQuery
		Geschachtelte MediaQueries für 500 px bzw. 1.000 px
		(läuft bei alten Browsern nicht!)
	Pfeile für Untermenüs für IOS optimiert
	Burger für IOS optimiert (verkleinert)
**/

/** ----------------------------------------------------------------- **/
/** Container **/

#kopf {
  position: absolute;
  top: 0;
  height: 5em;
  bottom: auto;
  left: 0;
  width: auto;
  right: 0;
  background-color: rgb(208, 208, 225);
  text-align: center;
  letter-spacing: 3px;
}
 
#navigation {
  position: absolute;
  top: 5em;
  height:3.7em;
  bottom: auto;
  left: 0;
  width: auto;
  right: 0;
  background-color:  rgb(131,131,175);
}

#hauptseite {
  position: absolute;
  top: 8.7em;
  height: auto;
  bottom: 4em;
  left:   0;
  width:  auto;
  right:  0;
  background-color: rgb(224, 224, 235);
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background-image: url("images/foerde.jpg"); background-position=center;
  background-size: cover;
  overflow: auto;
  padding: 1em;
}

#unterseite {
  position: absolute;
  top: 8.7em;
  height: auto;
  bottom: 4em;
  left:   0;
  width:  auto;
  right:  0;
  background-color: rgb(224, 224, 235);
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  overflow: auto;
  padding: 1em;
}

#fuss {
  position: absolute;
  text-align: center;
  top: auto;
  height: 2em;
  bottom: 0;
  left: 0;
  width: auto;
  right: 0;
  background-color: rgb(208, 208, 225);
  padding: 1em;
}

/** ----------------------------------------------------------------- **/
/** Format für unsortierte Listen - Standard **/
ul{
	list-style:none;
	padding:0;
	margin:0;
	/** color:rgb(89,89,89); **/
	color:rgb(71, 71, 107);
	font-family:sans-serif;
}
/** Format für Links - Standard **/
a{
	color:rgb(71, 71, 107);
	text-decoration:none;
}

/** Format H1-Überschrift **/
h1 		{color: gray; font-style: italic;}
.stint1	{color: black;}

/** Pfeile im Menü formatieren **/
.arrowinfo, .arrowhtml, .arrowcss {line-height:1;}
.home {font-size:1.3em;}

[type="checkbox"] {display:none;}	/** Alle CheckBoxen deaktivieren **/
#click {display:non;} 				/** CheckBox für Burger deaktivieren **/
.rahmen {display:none;} 			/** Rahmen für Burger deaktivieren **/

/** ----------------------------------------------------------------- **/
/** Design für Displays mit max. 480px **/

@media (max-width:480px){
	nav {display:none;}				/** Menu deaktivieren **/
	.rahmen {display:block;} 		/** Rahmen für Burger aktivieren **/
	h1 {font-size:1.5em;}
	
	/** Grundaufbau Burger **/
	.linie {
		width:30px;
		height:3px;
		background-color:white;
		border-radius:1.5px;
		position:absolute;
	}
	.rahmen {
		width:initial;
		height:59px;
		/** height:3.7em; **/
		padding-left:10px;
		padding-right:10px;
		background-color:rgb(177,177,205);
		cursor:pointer;
		position:relative;	
	}

	.einsham {top:19px;}
	.zweiham {top:28px;}
	.dreiham {top:37px;}
	
	/** Formatierung für Menu-Ebenen **/
	.ebeneeins{
		background-color:rgb(177,177,205);
		font-size:5vw;
	}
	.ebenezwei{
		background-color:rgb(193,193,215);
		font-size:0.8em;
		display:none;
	}
	/** Aktuell keine Verwendung **/
	.ebenedrei{
		background-color:rgb(206,106,107);
		font-size:0.8em;
		display:none;
	}
	
	/** CheckBoxen im Menü: Öffnen der Sub-Menus **/
	#openstatistik:checked + .clickhoverstatistik .ebenezwei{display:block;}
	#openinformatik:checked + .clickhoverinformatik .ebenezwei{display:block;}
	#openteam:checked + .clickhoverteam .ebenezwei{display:block;}
	
	/** Menü: Optische Optimierung mit Trennlinien **/
	.ebeneeins > li {border-bottom:1px solid white;}
	.ebenezwei > li {border-bottom:1px solid white;}
	.ebenedrei > li {border-bottom:1px solid white;}
	.ebenezwei > li:last-child , .ebenedrei > li:last-child {border:none;}
	
	#openstatistik:checked + .clickhoverstatistik li:first-of-type {border-top: 1px solid white}
	#openinformatik:checked + .clickhoverinformatik li:first-of-type {border-top: 1px solid white}
	#openteam:checked + .clickhoverteam li:first-of-type {border-top: 1px solid white}
	
	/** Einrücken der Sub-Menü-Items **/	
	.ebenezwei > li {padding-left:3%;}
	
	/** Aktuell keine Verwendung **/
	.ebenedrei {
		position:relative;
		left:-3%;
		width:103%;
	}
	.ebenedrei > li {padding-left:6%;}

	/** Menu: aktivieren beim Click auf CheckBox **/
	#click:checked ~ nav {display:block;}

	/** Burger -> Kreuz **/
	#click:checked ~ label .einsham {
		transform:rotate(-45deg);
		top:29.5px;
		transition: transform 0.5s;
	}
	#click:checked ~ label .zweiham {
		opacity:0;
	}
	#click:checked ~ label .dreiham {
		transform:rotate(45deg);
		top:29.5px;
		transition: transform 0.5s;
	}
}

/** ----------------------------------------------------------------- **/
/** Design für Displays mit min. 480px und min 960px
	Achtung: Geschachtelte MediaQueries
**/
@media (min-width:480px){
	
	/** Ebene 2, Ebene 3: deaktivieren **/
	.ebenezwei, .ebenedrei {display:none;}
	
	/** Ebene 1: Optische Gestaltung **/
	.ebeneeins {
		display:flex;
		justify-content:center;
		background-color: rgb(177,177,205);
		font-size:1em;
		height:3.7em;
	}
	
	/** Desgin für mehr als 1.000 px - betrifft nur Ebene 1 **/
	@media (min-width:1000px){
		.ebeneeins {
			display:flex;
			justify-content:center;
			background-color:rgb(177,177,205);
			font-size:1em;
			height:3.7em;
		}
	}

	.ebeneeins > li {
		width:16%;
		border-right:1px solid white;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.ebeneeins > li:first-child{border-left:1px solid white;}
	.ebeneeins > li:hover{
		background-color: rgb(193,193,215);
		transition: 0.5s;
	}
	
	/** Ebene 2: Optische Gestaltung
		Anzeigen der 2. Ebene beim Hover-Event
	**/
	.clickhoverstatistik:hover .ebenezwei{display:block;}
	.clickhoverstatistik {position:relative;}
	.clickhoverinformatik:hover .ebenezwei{display:block;}
	.clickhoverinformatik {position:relative;}
	.clickhoverteam:hover .ebenezwei{display:block;}
	.clickhoverteam {position:relative;}
	
	.ebenezwei {
		position:absolute;
		top:3.7em;
		background-color:rgb(177,177,205);
		font-size:0.8em;
		width:calc(100% + 2px);
	}
	.ebenezwei > li {border-top: 1px solid white;}
	.ebenezwei > li:last-child{border-bottom: 1px solid white;}
	.ebenezwei > li:hover {
		background-color: rgb(193,193,215);
		transition: 0.5s;
	} 

/** ----------------------------------------------------------------- **/
	/** Ebene 3: Optische Gestaltung
		Anzeigen der 3. Ebene bei Hover-Event
		Aktuell keine Verwendung, daher ... hinter clickhover
	**/
	.clickhover... :hover .ebenedrei {display:block;}
	.clickhover... :hover .ebenedrei {display:block;}
	
	/** Positionierung der Sub-Menü-Items **/
	.clickhover... {position:relative;}
	.clickhover... {position:relative;}
	.ebenedrei{
		position:absolute;
		left:100%;
		top:-1px;
		background-color:rgb(206,106,107);
		width:70%;
		font-size:0.8em;
	}
	.ebenedrei > li:hover{
		background-color: rgb(235,172,162);
		transition:0.5s;
	}
	.ebenedrei > li {border-top: 1px solid white;}
	.ebenedrei > li:last-child{border-bottom:1px solid white;}
}