/*
##########################################################################################################################################
Erster Media-Query bereits in index.php
##########################################################################################################################################
*/

body {
	width: auto;    						/* Standardeinstellung von blockelemten, also volle breite, hier also nicht 100% angeben, kann Verfälschungen verursachen. */
	}
#counter {
	display: none;
	}
main {
	max-width: 100%;
	width: 100%;
	padding: 1rem;
	}
#leist {
	left: 0.5rem;
	}
#content {
	margin-left: 15rem;
	}
#adrbox {
	margin-left: 1rem;
	margin-bottom: 2rem;
	}
#ticker {
	padding-left: 15.8rem;
	}
#topnavi {
	width: 100%;
	}
	
/*
##########################################################################################################################################
Hauptbreakpoint unterhalb 800 aufgrund großer Standard Top-Navi
##########################################################################################################################################
*/
/* Navigation umswitchen auf schwarze Listenform in Abhängigkeit von Breite Topnavigation, individuell für JEDE Homepage */
/* Standard wäre 640px, bei umfangreicher Topnavi - wie hier - jedoch schon bei 800px (zzgl. Scrollbalken 14px) */
@media (max-width: 800px) {

header {
	background: #DFEEF8;
	border-style: solid;
	border-color: #00187A;
	border-width: 2px 0 0 0;
	-moz-box-shadow: 0px -26px 0px 0px #9c9c9c;
	-webkit-box-shadow: 0px -26px 0px 0px #9c9c9c;
	box-shadow: 0px -26px 0px 0px #9c9c9c;
	margin-top: 1.5rem;
	height: 12rem;
	}
#topbild {
	height: 11rem;
	background-position: right center;
	}
#logo {
	top: 1rem;
	left: 1rem;
	width: 15rem;
	}
#content {
	margin: 0;
	}

/* Alle Elemente, die nun eingeblendet werden */
#navclose {
	display: block;
	}
	
/* Alle Elemente, die nun ausgeblendet geblendet werden */
#xxxxxxxx {
	display: none;
	}
	
/* Alle Parameter der gesamtzen Navigation resetten (muß ständig erweitert werden) */
header nav, header nav ul, header nav li a, header nav li a:hover, header nav li a.topact, #leist a:hover, #leist a.leistact, header #topnavi li ul, #leist #innernav, #leist #innernav li, #leist ul li {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	font-size: 1.2rem;
	line-height: 1.9rem;
	border: none;
	text-decoration: none;
	background: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	color: #222;
	float: none;
	}
	
/* Ab hier Neuformatierung der SWmartphone-Navi */
header nav {
	position: absolute;
	font-size: 1.2rem;
	color: #fff;
	text-shadow: 1px -1px 0px #555;
	top: -1rem;
	left: 1rem;
	width: 3rem;						/* in der normalize wurde es bereits als block deklariert */
	height: 2rem;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;					/* pointer ist Linkcursor und muß gesetzt werden, da Button ja eigentlich nur ausd schrift hergestellt wurde */
	z-index: 102;						/* Wert muß so hoch sein wegen Diashow Panel */
	background: -webkit-linear-gradient(#eee, #999);
	background: -moz-linear-gradient(#eee, #999);
	background: linear-gradient(#eee, #999);
	-moz-box-shadow: 20px 8px 7px -1px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 20px 8px 7px -1px rgba(0, 0, 0, 0.5);
	box-shadow: 20px 8px 7px -1px rgba(0, 0, 0, 0.5);
    }
header nav:before {						/* erstellung des Nav-Buttons ohne Grafik */
	content: "\2261";   				/* Unicodezeichen für 3 Linien */
	color: inherit;
	text-align: center;
	font-size: 2rem;
	line-height: 1em;
	width: inherit;						/* um Breite des Buttons (der nav) anzunehmen */
	display: block;
	}
	
header nav #topnavi {					/* hier NICHT ul, sonder #topnavi, da genauere Einschränkung notwendig */
	display: block;
	width: auto;
	position: absolute;
	top: 100%;							/* 100% von oben des übergeordneten elemtes bedeutet unterkante und passt sich automatisch buttongröße an */
	left: 0;
	opacity: 0;
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
	max-height: 0;
	-webkit-transition: max-height 0.5s linear;
	-moz-transition: max-height 0.5s linear;
	transition: max-height 0.5s linear;
	overflow: hidden;
	}
header nav:hover #topnavi {
	opacity: 0.95;							/* Einblenden der nav bei hover des navbuttons */
	max-height: 90rem;
	}
header nav li {
	display: block;
	white-space: nowrap;
	text-align: left;
	}
header nav li a, header nav li a:hover, header nav li a.topact {
	padding: 0.3rem 1rem !important;
	height: 1.7rem;
	}
header nav li a {
	display: block;
	}
header nav li a:hover, header nav li a.topact, #leist a:hover, #leist a.leistact {
	color: #9c0101 !important;
	font-weight: bold;
	}
header nav li a span {
	background: none;
	padding: 0;
	}

/* Unternavigation nicht mehr absolut pos */
#leist {
	position: static;
	height: 100%;		/* bei absoluter Höhe auf dyn zurücksetzen */
	}
#leist ul li a {
	height: 1.7rem;
	}
#leist a, #leist a:hover, #leist a.leistact {
	padding: 0.6rem 0 !important;
	margin: -0.6rem 1rem !important;
	font-size: 0.9em;
	line-height: 1.6rem;
	border: none !important;
	}
#leist #innernav li {
	font-size: 0.9em;
	height: 2.6rem;
	}
	
header nav #topnavi, #leist, #leist #innernav {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding: 1rem 0.4rem;
	margin: 0.5rem 0;
	background: -webkit-linear-gradient(#eee, #999, #eee);
	background: -moz-linear-gradient(#eee, #999, #eee);
	background: linear-gradient(#eee, #999, #eee);
	-moz-box-shadow: 2px 2px 9px -3px rgba(0, 0, 0, 0.9);
	-webkit-box-shadow: 2px 2px 9px -3px rgba(0, 0, 0, 0.9);
	box-shadow: 2px 2px 9px -3px rgba(0, 0, 0, 0.9);
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	color: #222;
	text-shadow: none;
	}
header nav #topnavi {
	-webkit-border-radius: 5px 12px 12px 12px;
	-moz-border-radius: 5px 12px 12px 12px;
	border-radius: 5px 12px 12px 12px;
	}

header nav #topnavi, #leist ul, #leist #innernav ul {
	padding:0.5rem 0.4rem;
	}
	
/* Spezialformatierungenen Nav (absolute Ausnahmen) */
xxxxxxx {
	top: 0.5rem;
	}
	
/* Formulare */
.pflichtfelderklaer {
	margin-bottom: 0;
	}
	
/* Neuformatierung des gesamten Bottombereiches */
footer {
	position: fixed;
	bottom: 0;
	}
#ticker {								/* Platzierung des Tickers nach unten */
	padding: 0.1rem 0.5rem;
	white-space: nowrap;
	color: #95A8F3;
	}
#ticker a {
	color: #95A8F3;
	}
#ticker b {
	text-decoration: none;
	font-weight: normal;
	}

	
/* sonstiges */
xxxxxxxxx {
	margin: -1rem 0 3rem 1rem;
	}
	

} /*--- Schlußklammer ---*/

/*
##########################################################################################################################################
Speziallösungen unterhalb 640px
##########################################################################################################################################
*/
@media (max-width: 640px) {

#adrbox {
	display: none;
	}
header {
	height: 9rem;
	}
#topbild {
	height: 8rem;
	}
#logo {
	width: 11rem;
	top: 8px;
	}

/* team */
.team section {
	margin-bottom: 1rem;	/* Abstand der Mitarbeiter */
	}
.team ul {
	margin-left: 10.3rem;
	}
.team img {
	width: 8.5rem;
	margin-top: 0.2rem;
	}
.tname {
	margin: 0;
	}
	
/* Formulare */
.noten {
	margin-right: 3rem;
	}

/*impressum */
#webmasterhidden img {
	width: 99%;
	}
	
/* Klappcontent */
#accordion .icon, #accordion .icon-active {
	background-position: -2.1rem -9.1rem;
	}
	

} /*--- Schlußklammer ---*/

/*
##########################################################################################################################################
Speziallösungen unterhalb 500px
##########################################################################################################################################
*/
@media (max-width: 500px) {

header {
	height: 8rem;
	}
#topbild {
	height: 7rem;
	}
#logo {
	width: 8rem;
	top: 14px;
	}
#ticker {
	paddimng: 0 0.5rem;
	}
#content {
	margin-top: -1rem;
	}

/* Formulare */
#quickdat .senden input {
	margin-top: 1.5rem;
	width: 99%;
	}
input, select, textarea, .weiter, .texarea label {
	display: block;
	width: 99%
	}
.fomail {
	margin: 0;
	}
.radiobut, .checkbut {
	margin: 0;
	}
.noten {
	margin: 2rem 2.8rem 0 0;
	}
.tablerow label, .tablerow ul {
	display: block;
	padding-left: 0;
	}
.tablerow ul {
	text-align: right;
	}
#bewertnoten {
	padding-top: 1rem;
	}
.quickform_show fieldset li {
	line-height: 1rem;
	}

/* Rechner */
.altrechner tr {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	width: 99%;
	padding: 1rem;
	}
.altrechner td {
	display: block;
	width: auto;
	text-align: left;
	padding: 0;
	}
#altrechspec tr:first-child + tr {
	display: inline-block;
	}
.altrechner input, .altrechner select, .altrechner textarea {
	margin: 0.2rem 0 0.1rem 1rem;
	}
	
/* team */
.team img {
	float: none;
	width: 11rem;
	}
.team ul {
	margin: 0.5rem 0 1rem 0.3rem;
	}
	
/* Diashow */
.dia {
	height: 15rem;
	}


} /*--- Schlußklammer ---*/


/*
##########################################################################################################################################
Fallback bei ganz kleinen Screens um die Lesbarkeit der Navi zu garantieren
##########################################################################################################################################
*/
@media (max-width: 200px) {

header nav ul li {
	white-space: normal;        
	}

} /*--- Schlußklammer ---*/