/*
##########################################################################################################################################
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;
	}
header nav {
	padding-top: 0.4rem;
	}
header nav li a {
	letter-spacing: -0.8px;
	font-size: 0.9em;
	}
#leist ul li a {
	padding: 5px 0.8rem 2px 1.9rem;
	}
#ticker, #adrbox {
	width: 13rem;
	padding: 0 0.6rem !important;
	margin: 2rem 0 0 0;
	font-size: 0.75rem;
	letter-spacing: -0.9px;
	}
#topzusnav {
	top: 0.8rem;
	}


/*
##########################################################################################################################################
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) {

main, aside, #ticker {
	float: none;						/* nicht clear both! none beendet floaten komplett */    
	width: auto;
	padding: 0 1rem 1rem 1rem;
	margin: 0;
	}

/* Alle Elemente, die nun eingeblendet werden */
#navclose {
	display: block;
	}
.ttelsmart, .tmobsmart, .adrtelsmart, .adrmobsmart { display: block; }
.ttel, .tmob, .adrtel, .adrmob { display: none; }

/* Alle Elemente, die nun ausgeblendet geblendet werden */
#topzusnav {
	display: none;
	}
	
#adrbox
{
margin: 2rem 0 4rem 0;
}
	
/* 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: Arial, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, 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;
	}
	
/* Topbereich */
header {
	height: 19rem;
	background-position: 0 6rem;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		background-size: contain;
	}
#logo {
	margin: 0.3rem 0 0 0.3rem;
	}
#logo img {
	height: 4rem;
	width: auto;
	}
	
/* Ab hier Neuformatierung der SWmartphone-Navi */
header nav {
	position: absolute;
	font-size: 1.2rem;
	color: #fff;
	text-shadow: 1px -1px 0px #555;
	top: 2rem;
	right: 2rem;
	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 */
	right: -0.3rem;
	opacity: 0;
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.5s linear;
	-moz-transition: max-height 0.5s linear;
	transition: max-height 0.5s linear;
	}
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;
	}
header nav li a {
	display: block;
	}
header nav li a:hover, header nav li a.topact, #leist a:hover, #leist a.leistact {
	color: #9C0101;
	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 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;
	}
	
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 {
	width: 100%;
	}
#ticker {								/* Platzierung des Tickers nach unten */
	margin: -2rem -1rem 0rem;
	width: auto;
	height: 2rem;
	line-height: 2rem;
	background: rgba(0, 0, 0, 0.5);
	border: none;
	color: #fff;
	font-size: 0.8rem;
	}
#ticker a {
	color: #fff;
	}
#ticker b {
	display: none;
	}
	
/* sonstiges */
xxxxxxxxx {
	margin: -1rem 0 3rem 1rem;
	}
	

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

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

header {
	height: 17rem;
	}

/* 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: 14.5rem;
	}

/* 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 ---*/