/************ Beratungsstelle 06.06.2016 - 06.01.2025 ************/

html {
	height: 100%;
}

body {
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 14px;
	font-size: 1.4vw;
	font-size: calc(0.7vw + 6px);
	line-height: 2.1vw;
	line-height: calc(1vw + 10px);
	font-weight: 300;
	letter-spacing: 0.01em;
	color: #111; 
	margin: 0px;
	padding: 0px;
	height: auto;
	behavior:url("../csshover.htc");
	text-decoration: none;
}

body a {
	text-decoration: none;
	color: #111; 
}
  
body a:hover {
	text-decoration: none;
	color: #0C0; 
}

#top-green {
	position: fixed;
	top: -300px;
	width: 100%;
	height: 301px;
	left: 0;
	right: 0;
	background-color: #7bb956;
	z-index: 1;
}

#green {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	height: 5.5em;
	width: 100%;
	background-color: #7bb956;
	z-index: 85;
}

#bottom-grey {
	position: fixed;
	bottom: -270px;
	width: 100%;
	height: 300px;
	left: 0;
	right: 0;
	background-color: #EEE;
	z-index: 1;
}


#name {
	position: relative;
	float: left;
	margin-top: -0.5em;
	margin-left: 10vw;
	margin-left: calc(22.3vw - 100px);
	width: 75%;
	height: 6.5em;
	font-family: Raleway, Lato, Open Sans, Roboto, Helvetica, Verdana, sans-serif;
	z-index: 95;
}

#logo {
	position: absolute;
	top: 1.25vw;
	right: 5vw;
	right: calc(14.5vw - 100px);
	width: 15vw;
	width: calc(13vw + 65px);
	z-index: 98;
}

#mobile-logo {
	display: none;
}

#header {
	position: relative;
	margin: 0;
	height: 2.5em;
	background-color: #EEE;
	z-index: 85;
}





/************ menue ************/


#menue {
	position: relative;
	float: left;
	width: 73%;
	margin-top: -1.9em;
	margin-left: 10vw;
	margin-left: calc(22.5vw - 100px);
	z-index: 95;
}

#mobile-menue {
	display: none;
}

#menue-link-1, #menue-link-2, #menue-link-3, #menue-link-4, #menue-link-5 {
    position: relative;
    float: left;
    padding: 0;
    margin: 0;
    height: 2.5em;
	vertical-align: centre;
	letter-spacing: 1px;
    z-index: 99;
}

#menue-link-1 {
    text-align: left;
    width: 19%;
	}

#menue-link-2 {
    text-align: center;
    width: 21%;
	}

#menue-link-3 {
    text-align: center;
    width: 23%;
	}

#menue-link-4 {
    text-align: center;
    width: 8%;
	}



#menue ul {
    position: absolute;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

#menue ul li a {
    display: block;
    color: #666;
    text-decoration: none;
    display: block;
	margin: 0;
    height: 2em;
}

#menue ul li a.active {
    text-decoration: none;
	font-weight: 400;
}

#menue ul li a:hover {
    text-decoration: none;
    list-style: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


#menue ul ul {
    position: absolute;
    top: -9999px;
    padding: 0;
}

#menue ul li:hover ul {
    top:1.9em;
}

#menue-link-1 ul ul li , #menue-link-2 ul ul li , #menue-link-3 ul ul li , #menue-link-4 ul ul li {
	margin: 0;
    width: 12em;
}


#menue ul ul a {
    text-align: left;
    background-color: #EEE;
    text-decoration: none;
    color: #333;
    font-size: 90%;
    line-height: 100%;
    height: 0.7em;
    padding: 1vw;
	border-top: 0.2em solid #FFF;
}

#menue ul ul li a:hover {
    background: #dff3da;
    color: #000;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}        





/************ SIDE ************/


#termin {
	position: fixed;
	left: 0;
    margin-top: 10em;
	height: 5vw;
	height: calc(3vw + 20px);
    width: 10vw;
	width: calc(6vw + 40px);
    background-image: url("../00-pics/button-termin.svg");
    background-repeat: no-repeat;
    background-size: contain;
	text-decoration: none;
    z-index: 99;
}

#mail {
	position: fixed;
	left: 0;
    margin-top: 10em;
	width: 5vw;
	width: calc(3vw + 20px);
	background-size: contain;
	text-decoration: none;
	z-index: 85;
}


#tel {
	position: fixed;
	left: 0;
    margin-top: 15em;
	width: 5vw;
	width: calc(3vw + 20px);
	background-size: contain;
	text-decoration: none;
	z-index: 85;
}

#info {
	position: fixed;
	left: 0;
    margin-top: 20em;
	width: 5vw;
	width: calc(3vw + 20px);
	background-size: contain;
	text-decoration: none;
	z-index: 85;
}





/************ TEXT-STILE ************/


h1 {
	font-size: 3.5em;
	font-weight: 400;
	color: #FFF;
	letter-spacing: 0;
}

h2 {
	font-family: Roboto, sans-serif;
	font-size: 2.5em;
	line-height: 1.1em;
	font-weight: 100;
	letter-spacing: 0.05em;
	color: #0C0;
	text-align: left;
}

h3, .h3 {
	font-size: 1.1em;
	color: #444;
	font-weight: 400;
	letter-spacing: 0.05em;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	-hyphens: none;
}

h3 a:hover, .h3 a:hover {
	color: #0C0;
}

h4, .h4 {
	font-size: 2em;
	line-height: 1.2em;
	color: #666;
	font-weight: 100;
	letter-spacing: 0.05em;
	text-align: left;
	margin-top: 2vw;
	margin-bottom:1.5vw;
}

h5, .h5 {
	font-size: 1.1em;
	color: #444;
	font-weight: 600;
	text-align: left;
	letter-spacing: 0.05em;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	-hyphens: none;
}

h3 a:hover, .h3 a:hover {
	color: #0C0;
}

.hl-A {
	font-size: 80%;
	font-weight: 100;
}

.hl-B {
	font-size: 130%;
	color: #55bfcf;
	font-weight: 300;
}

.hl-C {
	font-size: 70%;
	font-weight: 100;
	line-height: 1vw;
}

.hl-T {
	font-weight: 400;
	line-height: 2vw;
}

.link a {
	text-decoration: none;
	font-weight: 400;
	color: #0C0; 
}

.link a:hover {
	text-decoration: none;
	color: #000; 
}

.anmerkung {
	font-size: 0.85em;
	line-height: 1.5em;
	color: #666;
    font-style: italic;
}


#text-links li, #text-box li {
	list-style-type: none;
	text-align: left;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	-hyphens: none;
	margin-top: 0.25vw;
}


#text-links li::before, #text-box li::before  {
  content: "‣ ";    
  font-size: 1em;
  margin-left: -1.6em;
  margin-right: 0.8em;
}


.Absatz-Abstand {
	font-size: 0.5em;
	line-height: 0.5em;
}





/************ CONTENT ************/


#content {
    position: relative;
    float: left;
	width: 80%;
	width: calc(55% + 200px);
	min-height: 100%;
	height: auto;
    margin: 0;
    margin-top: -1vw;
    padding-top: 1vw;
	padding-left: 15%;
	padding-left: calc(22.5% - 100px);
	padding-right: 5%;
	padding-right: calc(22.5% - 100px);
	padding-bottom: 1vw;
	bottom: 0;
	background-color: #FFF;
}

#headline {
	position: relative;
	float: left;
	width: 100%;
	margin: 2vw 0 0 0;
	z-index: 80;
}

#text-links {
	position: relative;
	float: left;
	width: 47%;
	float: left;
	margin-top: 0%;
	text-align: justify;  
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
	-webkit-text-size-adjust: none;
	z-index: 80;
}

#text-rechts {
	position: relative;
	float: left;
	margin-top: 0%;
	margin-left: 5%;
	width: 47%;
	float: right;
	text-align: justify;  
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
	-webkit-text-size-adjust: none;
	z-index: 80;
}

#text-schmal {
	position: relative;
	float: left;
	width: 47%;
	float: left;
	margin-top: 1%;
	text-align: justify;  
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
	-webkit-text-size-adjust: none;
	z-index: 80;
}

#text {
	position: relative;
	float: left;
	width: 100%;
	float: left;
	margin-top: -2vw;
	text-align: justify;  
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
	-webkit-text-size-adjust: none;
	z-index: 80;
}

#text-box {
	position: relative;
	float: left;
	width: 75%;
	width: calc(55% + 200px);
	padding: 2.5vw;
	padding-left: calc(22.5% - 100px);
	padding-right: calc(22.5% - 100px);
	margin: 0;
	bottom: 0;
	text-align: justify;  
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
	-webkit-text-size-adjust: none;
	z-index: 80;
}

.clip-rechts, .clip-text {     /* http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
	position: relative;
	float: right;
	margin: 0.5em 0 2vw 2vw;
	width: 46.75%;
	border-bottom: thin solid #0C0;
	z-index: 80;
}

.clip-rechts-B {     /* http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
	position: relative;
	float: right;
	margin: 0.5em 0 2vw 2vw;
	width: 46.75%;
	z-index: 80;
}

.clip-links {
	position: relative;
	float: left;
	margin-top: 0.5em;
	width: 46.75%;
	height: auto;
	border-bottom: thin solid #0C0;
	z-index: 80;
}

.clip-links:before, .clip-rechts:before, .clip-rechts-B:before, .clip-text:before {
	content: "";
	display: block;
	padding-top: 75%;
}

.clip {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.clip-B {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 75%;
}

#bild-box {
	position: relative;
	float: right;
	margin: 1vw 0 1vw 3vw;
	width: 46.75%;
	z-index: 80;
}

#bild-breit {
	position: relative;
	float: left;
	margin: 1vw 0 0 0;
	width: 100%;
	height: 35vw;
	z-index: 80;
}

#map {
	position: relative;
	float: left;
	margin: 0 0 3vw 0;
	width: 100%;
	height: 40vw;
	z-index: 80;
}

#line {
	position: relative;
	float: left;
	width: 100%;
	float: left;
	border-top: 1px solid #999;
	margin-top: 4em;
	margin-bottom: 3em;
	z-index: 80;
}

#pic-links {
	position: relative;
	float: left;
	margin-top: 2em;
	width: 46.75%;
	z-index: 80;
}






/************ index ************/



#ticker-1, #ticker-2, #ticker-3, #ticker-4 {
	position: relative;
	float: left;
	padding: 2%;
	width: 18.5%;
	height: 15em;
	font-size: 90%;
	line-height: 1.5em;
	text-align: center;
	color: #000000;
	z-index: 80;
}

#ticker-1 {
	margin-left: 0;
	background-color: #daeff5;
}

#ticker-2, #ticker-4 {
	margin-left: 2%;
	background-color: #dff3da;
}

#ticker-3 {
	margin-left: 6%;
	background-color: #daeff5;
}


#sponsoren-linie {
	position: relative;
	float: left;
	width: 100%;
	margin-top: 4vw;
	margin-bottom: 2vw;
	border-top: thin solid  #CCC;
}

#sms {
	position: relative;
	float: left;
	width: 47%;
	height: auto;
	margin-bottom: 50px;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
}

#logo-sms {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin-top: 6.7%;
	background-repeat: no-repeat;
}

#sponsor-sms {
	position: relative;
	float: left;
	width: 100%;
	margin-top: 4%;
	font-size: 0.8em;
	line-height: 1.5em;
}

#weitere {
	position: relative;
	float: right;
	width: 47%;
	height: auto;
	margin-bottom: 50px;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
}

#logo-tlvg {
	position: relative;
	float: right;
	width: 15%;
	height: auto;
	background-repeat: no-repeat;
}

#logo-stadt {
	position: relative;
	float: right;
	margin-left: 3%;
	width: 15%;
	height: auto;
	background-repeat: no-repeat;
}

#logo-land {
	position: relative;
	float: right;
	margin-left: 3%;
	width: 15%;
	height: auto;
	background-repeat: no-repeat;
}

#sponsoren {
	position: relative;
	float: left;
	width: 100%;
	margin-top: 3.7%;
	font-size: 0.8em;
	line-height: 1.5em;
	text-align: right;
}

#pic-index {
	position: relative;
	float: left;
	margin-top: 0.5em;
	width: 46.75%;
	z-index: 80;
}





/************ Team & Dolmetscher ************/



#team {
	position: relative;
	float: left;
	padding: 2vw 0 0 3%;
	margin-top: 0.5vw;
	margin-bottom: 2vw;
	width: 97%;
	line-height: 1.5em;
	text-align: left;
	color: #000000;
	z-index: 80;
}

#team-clip {
	position: relative;
	float: right;
	margin: 0.5vw 2vw 2vw 0;
	width: 32vw;
	height: 24vw;
	z-index: 85;
	background-color: #FFF;
}

#team-space {
	position: relative;
	float: left;
	width: 6%;
	height: 13em;
	background-color: #FFF;
}

#team-klein {
	position: relative;
	float: left;
	padding: 2vw 0 0 3%;
	margin-top: 2vw;
	margin-bottom: 2vw;
	width: 44%;
	line-height: 1.5em;
	text-align: left;
	color: #000000;
	z-index: 80;
}

#box-space {
	position: relative;
	float: left;
	width: 6%;
	height: 10em;
}


.blau {
	background-color: #daeff5;
}

.grau {
	background-color: #DDD;
}

.gruen {
	background-color: #dff3da;
}

.d-gruen {
	background-image: url(../00-pics/green.png);
}

.links { 
	width: 30%;
	text-align: right;
	padding-right: 2vw;
}

.rechts { 
	width: 80%;
	text-align: left;
	padding-right: 2vw;
}


#team-text {
	position: relative;
	float: left;
	width: 45%;
	width: calc(18vw + 200px);
}

#spalte-links {
	position: relative;
	float: left;
	width: 27%;
	font-weight: 500;
}

#spalte-rechts {
	position: relative;
	float: left;
	width: 73%;
	margin-bottom: 1em;
}

#separator-team { 
	position: relative;
	float: left;
	height: 0.4em;
	width: 100%;
}





/************ Newsletter ************/



#bestellen {
	position: relative;
	float: left;
	padding: 2%;
	margin: 1em 0 1em 0;
	width: 96%;
	height: 1.5em;
	text-align: center;
	-moz-border-radius: 1em;
	border-radius: 1em;
}

#abbestellen {
	position: relative;
	float: left;
	padding: 2%;
	margin: 0 0 3em 0;
	width: 96%;
	height: 1.5em;
	text-align: center;
	-moz-border-radius: 1em;
	border-radius: 1em;
}

#pic-newsletter {
	position: relative;
	float: left;
	width: 40%;
	height: 20vw;
	margin: 0 6% 5vw 0;
	text-align: left;
	border: 1px solid #999;
}

#iframe {
	position: relative;
	float: left;
	width: 620px;
	height: 60vh;
	margin: 2% 4% 5vw 0;
	text-align: left;
	border: 1px solid #999;
	overflow: hidden;
}

#archiv {
	position: relative;
	float: left;
	margin: 0 0 5vw 0;
	width: calc(95% - 620px);
	z-index: 80;
}


		/************ ARCHIV small ************/
		
		@media (max-width: 1200px)  {
		
		#archiv {
			margin: 0;
			width: 620px;
		}
		
		} 





/************ Downloads & Links ************/


#link-link {
	position: relative;
	float: left;
	width: 20.5%;
	min-height: 18em;
	text-align: left;
	margin-bottom: 2em;
}

#link-formular {
	position: relative;
	float: left;
	width: 20.5%;
	min-height: 26em;
	text-align: left;
	margin-bottom: 2em;
}

#link-space {
	position: relative;
	float: left;
	width: 6%;
	min-height: 17.5em;
}

#last-link img, #link-link img, #link-formular img {
	border: 1px solid #666;
}

#space {
	position: relative;
	float: left;
	width: 100%;
	height: 4em;
}

#link-rechts {
	position: relative;
	float: right;
	height: 100px;
	margin-top: 3em;
	text-align: center;
	font-size: 0.8em;
	line-height: 1.2em;
}

#link-rechts-space {
	position: relative;
	float: right;
	width: 6%;
	min-height: 15em;
}




/************ Impressum ************/


#QR {
	position: relative;
	float: left;
	width: 10em;
	height: 10em;
	margin: 0.5vw 5% 4% 0;
	z-index: 99;
}

#impressum-links {
	position: relative;
	float: left;
	text-align: left;
	margin: -1.5vw 0 0 0;
	width: 65%;
	z-index: 80;
}

#impressum-rechts {
	position: relative;
	float: right;
	text-align: left;
	margin: -2.5% 0 0 0;
	width: 30%;
	z-index: 80;
}




/************ FOOTER ************/


#space {
	position: relative;
	float: left;
	width: 100%;
	height: 3vw;
	z-index: 10;
}


#footer-grey {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 3vw;
	height: calc(2vw + 10px);
	left: 0;
	right: 0;
	background-color: #EEE;
	z-index: 98;
}

#footer {
	position: relative;
	float: left;
	width: 75%;
	width: calc(55% + 200px);
	margin-left: 10vw;
	margin-left: calc(22.5% - 100px);
	margin-top: -0.3em;
	font-size: 0.9em;
	line-height: 1.25em;
	z-index: 98;
}

#map {
	position: relative;
	float: left;
	margin-left: -2.5vw;
	width: 2%;
	z-index: 99;
}

#address {
	position: relative;
	float: left;
	margin-top: 1vw;
	width: 50%;
	z-index: 99;
}

#impressum {
	position: relative;
	float: right;
	margin-top: 1vw;
	width: 30%;
	text-align: right;
	z-index: 99;
}


#mobile-footer {
	display: none;
}


#bottom-grey {
	position: fixed;
	bottom: -270px;
	width: 100%;
	height: 300px;
	left: 0;
	right: 0;
	background-color: #EEE;
	z-index: 1;
}






/************ SMARTPHONES LANDSCAPE ************/

@media only screen and (max-device-width: 700px)  and (orientation: landscape) {



body {
	font-size: 1.8vw;
	line-height: 2.4vw;
}

#name {
	margin-left: 10vw;
}

#logo {
	right: 5vw;
	width: 17vw;
}

#menue {
	margin-left: 10vw;
	font-size: 1.0em;
	line-height: 1.2em;
}

#menue-link-1 {
	margin-top: 0.5vw;
    text-align: left;
    width: 26%;
}

#menue-link-2 {
	margin-top: 0.5vw;
    text-align: center;
    width: 29%;
}

#menue-link-3 {
	margin-top: 0.5vw;
    text-align: center;
    width: 31%;
}

#menue-link-4 {
	margin-top: 0.5vw;
    text-align: center;
    width: 10%;
}

#menue ul ul a {
	margin-top: -0.5vw;
    line-height: 100%;
    padding: 1.5vw;
}
 

#termin {
    background-image: url("../00-pics/button-termin-1.svg");
    margin-top: 6vw;
	width: 7.5vw;
}
    
#mail {
    margin-top: 6vw;
	width: 5vw;
}

#tel {
    margin-top: 13vw;
	width: 5vw;
}

#info {
    margin-top: 20vw;
	width: 5vw;
}

#content {
	width: 80vw;
	padding: 0 10vw 5vw 10vw;
	top: -0.5vw;
}

#text, #text-links, #text-rechts, #text-schmal, #text-box {
	font-size: 2vw;
	line-height: 2.5vw;
}

#text-box {
	width: 80vw;
	padding: 5vw 10vw 5vw 10vw;
}

#ticker-1, #ticker-2, #ticker-3, #ticker-4 {
	height: 18em;
	font-size: 80%;
	line-height: 1.5em;
}

h1 {
	font-size: 2.8em;
	line-height: 1em;
}

h3, .h3 {
	font-size: 1em;
}

#team p {
	font-size: 0.8em;
	line-height: 1.5em;
}

#iframe {
	width: 450px;
	height: 53vh;
}

#bestellen, #abbestellen {
	width: 96%;
	height: 1.5em;
}

#abbestellen {
}

#archiv {
	width: 80vw;
}

#footer-grey {
	height: 3vw;
}

#footer {
	width: 80vw;
	margin-left: 10vw;
}


#team-text {
	width: 55%;
}


} 



/************ TABLET ************/

@media (max-width: 900px) and (orientation: portrait) {


body {
	font-size: 2vw;
	line-height: 3vw;
}

#green {
	height: 17vw;
}

#name {
	margin-top: -1.5%;
	margin-left: 14.5%;
	width: 50%;
	height: 23vw;
}

#logo {
	width: 27.5%;
	top: 2vw;
	right: 3vw;
}





/************ menue ************/


#header {
	height: 6vw;
}

#menue {
	margin-left: 15%;
	margin-top: -4.25%;
	z-index: 99;
}

#menue-link-1 {
    text-align: left;
    width: 24%;
}

#menue-link-2 {
    text-align: center;
    width: 28%;
}

#menue-link-3 {
    text-align: center;
    width: 30%;
}

#menue-link-4 {
    text-align: center;
    width: 10%;
	z-index: 99;
}

#menue ul li a {
	height: 2vw;
}

#menue ul li:hover ul {
    top: 1.1em;
	padding-top: 1em;
}

#menue-link-1, #menue-link-2, #menue-link-3, #menue-link-4, #menue-link-5 {
	letter-spacing: 0.5px;
}





/************ SIDE ************/


    
#termin {
    background-image: url("../00-pics/button-termin-1.svg");
	margin-top: 18.25%;
	width: 14.5%;
	height: 9.75vw;
} 

#tel {
	margin-top: 30.25%;
	width: 9%;

}

#info {
	margin-top: 42.25%;
	width: 9%;
}





/************ TEXT-STILE ************/


h1 {
	font-size: 6vw;
	line-height: 6.5vw;
}

h2 {
	font-size: 4.5vw;
	line-height: 6vw;
}

.hl-C {
	line-height: 0vw;
}





/************ content ************/


#content {
    position: relative;
    float: left;
	width: 100%;
    margin: -1vw 0 0 0;
	padding: 0;
	padding-bottom: 4vw;
}

#headline {
	margin-top: 3%;
	margin-left: 15%;
	width: 80%;
}
    
.clip-links, .clip-rechts, .clip-rechts-B, #pic-index {
    float: left;
	margin: 2% 0 6vw 15%;
	width: 75%;
}

.clip-text {
    float: left;
	margin: 2% 0 6vw 0;
	width: 100%;
}
    
#text {
	margin: -2% 0 0 15%;
	width: 75%;
}

#text-links, #text-rechts, #text-schmal {
	float: left;
	margin: -2% 0 0 15%;
	width: 75%;
}

#text-schmal {
	margin-left: 0;
}

#ticker-1, #ticker-2, #ticker-3, #ticker-4 {
	margin-top: 3%;
	padding: 3%;
	width: 30%;
	height: 30vw;
}

#ticker-1 {
	margin-left: 15%;
}

#ticker-2 {
	margin-left: 3%;
}

#ticker-3 {
	margin-left: 54%;
}

#ticker-4 {
	margin-left: -75%;
}

#bild-breit {
	position: relative;
	float: left;
	margin: 0 0 1.5vw 15%;
	width: 75%;
	height: 35vw;
	z-index: 80;
}

#text-box {
	margin: 0;
	padding: 5vw 0 5vw 15%;
	width: 75%;
}

#bild-box {
	display: none;
}

#map {
	position: relative;
	float: left;
	margin: 0 0 3vw 0;
	width: 100%;
	height: 40vw;
	z-index: 80;
}

#link-link {
	width: 40%;
	min-height: 40vw;
}
    
#link-formular {
	width: 40%;
	min-height: 60vw;
}
    
#link-space {
	width: 19%;
}

#link-rechts {
	height: 25vw;
	margin: 3em 10vw 10vw -1vw;
}


.zwei {
	display: none;
}

#pic-links {
	margin: 2% 0 4vw 15%;
	width: 75%;
	margin-top: 2em;
}


#archiv-links, #archiv-rechts {
	width: 100%;
}




/************ Team ************/


#team {
	padding: 3vw 10% 0 15%;
	margin-top: 2vw;
	width: 75%;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
}

#team-clip {
	width: 75vw;
	height: 56.25vw;
	margin: 1vw 0 3vw 2vw;
}

#team-klein {
	padding: 3vw 10% 0 15%;
	margin: 2vw 0 2vw 0;
	width: 75%;
}

#team-space {
	display: none;
}

#box-space {
	display: none;
}

#team-text {
	position: relative;
	float: left;
	width: 100%;
}

#spalte-links {
	position: relative;
	float: left;
	width: 23%;
	font-weight: 500;
}

#spalte-rechts {
	position: relative;
	float: left;
	width: 77%;
	margin-bottom: 1em;
}


#separator-team { 
	position: relative;
	float: left;
	height: 0.4em;
	width: 100%;
}






/************ Newsletter ************/



#bestellen {
	width: 95%;
}

#abbestellen {
	width: 95%;
}

#pic-newsletter {
	width: 50%;
	height: 25vw;
	margin: 0 4% 4vw 0;
}

#iframe {
	width: 95%;
}

#archiv {
	position: relative;
	float: left;
	margin: 0 0 5vw 0;
	width: 100%;
	z-index: 80;
}





/************ Sponsoren ************/


#sponsoren-linie {
	margin: 6vw 8% 0 15%;
	width: 75%;
}

#sms {
	margin-left: 15%;
	width: 75%;
}

#logo-sms {
}

#sponsor-sms {
}

#weitere {
	margin: 0 0 5% 15%;
	width: 75%;
	float: left;
}

#sponsoren {
}

#logo-tlvg {
}

#logo-stadt {
}

#logo-land {
}





/************ FOOTER ************/


#space {
	height: 3vw;
}

#footer-grey {
	height: calc(4vw + 10px);
	left: 0;
	right: 0;
	background-color: #EEE;
	z-index: 98;
}

#footer {
	height: 6vw;
	width: 100%;
	margin: 0;
	font-size: 2vw;
	line-height: 2vw;
}

#map {
	display: none;
}

#address {
	margin-top: 2vw;
	margin-left: 15vw;
	width: 30%;
}

#address a {
	color: #333;
	text-decoration: none;
}

.visible {
	display: none;
}

#impressum {
	width: 40%;
	margin-top: 2vw;
	margin-right: 10vw;
}





} 



/************ SMARTPHONES ************/

@media (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) and (max-width: 600px),
        (min--moz-device-pixel-ratio: 2) and (orientation: portrait) and (max-width: 600px),     
        (min-resolution: 2dppx) and (orientation: portrait) and (max-width: 600px),      
        (min-resolution: 192dpi) and (orientation: portrait) and (max-width: 600px),
		(max-width: 600px) and (orientation: portrait)
		{


body {
	font-size: 5vw;
	line-height: 7vw;
	color: #000;
}

#green {
	height: 23vw;
}

#mobile-logo {
	display: block;
	position: relative;
	float: left;
	margin-top: 2%;
	margin-left: 30%;
	width: 65%;
	z-index: 95;
}

#name {
	display: none;
}

#logo {
	display: none;
}

#bottom-grey {
	display: none;
}





/************ menue ************/


#header {
	display: block;
	position: relative;
	float: left;
	margin: 0;
	margin-top: -23vw;
	width: 100%;
	height: 23vw;
	z-index: 5;
	background-color: #FFF;
}

#menue {
	display: none;
}





/************ MOBILE MENUE = http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ ************/


#mobile-menue {
	display: block;
	z-index: 100;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	position: absolute;
	top: 7.75vw;
	left: 10vw;
	width: 14vw;
	height: 7vw;
	text-decoration: none;
	display: block;
	z-index: 99;
}

/*Strip the ul of padding and list styling*/
#mobile-menue ul {
	position: static;
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/*Create a horizontal list with spacing*/
#mobile-menue li {
	display: inline-block;
	float: left;
	margin-right: 1px;
	margin-bottom: 1px;
}

/*Style for menu links*/
#mobile-menue li a {
	display: block;
	width: 90%;
	height: 15vw;
	text-align: left;
	font-size: 1.25em;
	line-height: 2.5em;
	color: #333;
	background: #FFF;
	text-decoration: none;
	padding: 0 10%;
	border-bottom: 1px solid #333;
}

/*Hover state for top level links*/
#mobile-menue li:hover a {
	background: #FFF;
}

/*Style for dropdown links*/
#mobile-menue li:hover ul a {
	background: #FFF;
	color: #666;
	height: 13vw;
	line-height: 2.5em;
}

/*Hover state for dropdown links*/
#mobile-menue li:hover ul a:hover {
	background: #FFF;
	color: #333;
}

/*Hide dropdown links until they are needed*/
#mobile-menue li ul {
	display: none;
}

/*Make dropdown links vertical*/
#mobile-menue li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
#mobile-menue li ul li a {
	width: 85%;
	padding: 0 18%;
	font-size: 1.1em;
}

#mobile-menue ul li, #mobile-menue li a {
	width: 100%;
	overflow: hidden;
}

/*Display the dropdown on hover*/
#mobile-menue ul li a:hover + .hidden, #mobile-menue .hidden:hover {
	display: block;
}


/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}





/************ content ************/


#headline {
	margin: 10vw 5vw 0 5vw;
	width: 90%;
}

#bild-links, #bild-rechts, #bild-breit {
	margin-left: 0%;
	width: 100%;
}

#text, #text-rechts, #text-links, #text-box {
	margin-top: 0;
	margin-left: 10%;
	width: 80%;
}

#text-box {
	margin: 0;
	margin-left: 10%;
	padding: 5vw 0 0 0;
	width: 80%;
}

 #text-links li, #text-box li {
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
}

#ticker {
	display: none;
}

#ticker-1, #ticker-2, #ticker-3, #ticker-4 {
	width: 64%;
	height: auto;
	margin-top: 4%;
	margin-left: 10%;
	padding: 5% 8% 1% 8%;
}

#pic-links {
	margin: 1em 0 2em 0;
	width: 100%;
}

#bild-text, #team-clip, #pic-newsletter, #clip-rechts, #clip-rechts-B {
	float: right;
	margin: 0.25vw 0 5vw 0;
	width: 100%;
	height: 66.7vw;
	z-index: 80;
}

.team-clip, .clip-rechts, .clip-rechts-B, .clip-links, .clip-text, #pic-index {
	float: left;
	margin: 5vw 0 5vw 0;
	width: 100%;
	z-index: 80;
}

#team {
	padding: 0;
	width: 90%;
	margin-top: 5vw;
	margin-bottom: 15vw;
	overflow: hidden;
	padding-left: 10%;
}

#team p, #team .h4, #team .h3 {
	padding: 0vw 10% 0 0;
}

#team p {
	margin-top: -2vw;
	font-size: 0.9em;
}

#team-clip {
	height: 75vw;
	width: 100vw;
	left: 0vw;
}

#pic-newsletter {
	height: 53.3vw;
	width: 80vw;
}

#link-link, #link-formular {
	width: 100%;
	margin-bottom: 15vw;
}

#link-space {
	display: none;
}

#link-rechts {
	height: 40vw;
	margin: 15vw 25vw 20vw -1vw;
}

#team-text {
	position: relative;
	float: left;
	width: 90%;
}

#spalte-links {
	position: relative;
	float: left;
	width: 100%;
	font-weight: 500;
}

#spalte-rechts {
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 1em;
}

#separator-team { 
	position: relative;
	float: left;
	height: 0.4em;
	width: 100%;
}



/************ Impressum ************/



#archiv-links, #archiv-rechts {
	text-align: center;
}

#QR {
	width: 70%;
	height: 10em;
	margin: 0.25vw 15% 15% 15%;
}


#impressum-links {
	width: 100%;
}

#impressum-rechts {
	float: left;
	width: 100%;
}


/************ SIDE ************/


#termin {
    background-image: url("../00-pics/button-termin.svg");
    width: 36vw;
    height: 24vw;
	margin: 0;
    bottom: 10vw;
}
            
#mail {
	display: none;
}

#tel {
	display: none;
}

#info {
	display: none;
}





/************ TEXT-STILE ************/


h1 {
}

h2 {
	font-size: 7.5vw;
	line-height: 8.5vw;
	text-align: center;
}

h3, .h3 {
	font-size: 5vw;
	line-height: 7vw;
	color: #000;
}

h4, .h4 {
	font-size: 7.5vw;
	line-height: 10vw;
	text-align: center;
	color: #000;
	-moz-hyphens: manual;
	-o-hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	-hyphens: manual;
}

.hl-A {
	font-weight: 300;
	line-height: 10vw;
}

.hl-B {
	line-height: 8vw;
}

.hl-C {
	font-weight: 300;
	line-height: 9vw;
}






/************ Sponsoren ************/


#sponsoren-linie {
	margin: 8vw 0 8vw 0%;
	width: 100%;
}

#sms {
	width: 80%;
	margin-left: 10%;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	-hyphens: none;

}

#weitere {
	width: 80%;
	margin-left: 10%;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	-hyphens: none;

}





/************ FOOTER ************/


#space {
	display: none;
}

#footer-grey {
	display: none;
}

#footer {
	display: none;
}

#address {
	display: none;
}

#address a {
	display: none;
}

#impressum {
	display: none;
}


#mobile-footer {
	display: block;
	position: relative;
	float: left;
	width: 100%;
	left: 0;
	right: 0;
	background-color: #FFF;
	z-index: 100;
}

#map {
	display: none;
}

#mobile-mail {
	position: relative;
	float: left;
	margin-top: 3vw;
	margin-left: 0;
	width: 32%;
	height: 22vw;
	z-index: 85;
}

#mobile-sms {
	position: relative;
	float: left;
	margin-top: 3vw;
	margin-left: 2%;
	width: 32%;
	height: 22vw;
}

#mobile-tel {
	position: relative;
	float: left;
	margin-top: 3vw;
	margin-left: 2%;
	width: 32%;
	height: 22vw;
}

#mobile-facebook {
	position: relative;
	float: left;
	margin-top: 3vw;
	margin-left: 0;
	width: 32%;
}

#mobile-maps {
	position: relative;
	float: left;
	margin-top: 3vw;
	margin-left: 2%;
	width: 32%;
}

#mobile-info {
	position: relative;
	float: left;
	margin-top: 3vw;
	margin-left: 2%;
	width: 32%;
}

#mobile-change {
	position: relative;
	float: left;
	margin: 2vw 0 0 0;
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	line-height: 9vw;
	text-align: center;
	color: #FFF;
	background-color: #666;
}
    
#bottom-grey {
	background-color: #666;
}






}