* {
    margin:0;
    padding:0;}
body {
    font-family: 'Saira Condensed', sans-serif;}
img {
    width:100%;
    height:auto;}
h1, h2, h3, h4, h5, h6 {    
    font-family: 'Maven Pro', sans-serif;}
#wrapper {
    background-color: #209191;
    width:100%;
    position:relative;
    margin:0 auto;}
#topnav ul {
    list-style-type:none;}
#topnav ul li {
    display:block;
    float:right;
    text-align:center;
    line-height:2em;
    width:7em;}
#topnav ul li a {
    text-align:center;
    font-size: 1.2em;
    text-decoration:none; color:#fff;
    display:block;}
#topnav li:hover, #topnav a:hover {
    color: #FFC493;
    font-weight:700;
    text-decoration:underline;}
#topnav:after {
    display:table;
    content:"";
    clear:both;}
#banner, #banner2, #banner3, #banner4, #banner5, #banner6, #banner7, #banner8, #banner9, #banner10 {height:43em;}
#banner {
    background: url(../img/anke_maxi_2000.jpg)no-repeat top center;
    background-size:cover;}
#banner2 {
    background: url(../img/strand_2000.jpg) no-repeat top center;
    background-size:cover;}
#banner3 {
    background: url(../img/stuehle_2000.jpg) no-repeat top center;
    background-size:cover;}
#banner4 {
    background: url(../img/rettung_2000.jpg) no-repeat top center;
    background-size:cover;}
#banner5 {
    background: url(../img/hoffnung_2000.jpg) no-repeat top center;
    background-size:cover;}
#banner6 {
    background: url(../img/eisbrecher_2000.jpg) no-repeat top center;
    background-size:cover;}
#banner7 {
    background: url(../img/zufriedenheit_2000.jpg)no-repeat top center;
    background-size:cover;}
#banner8 {
    background: url(../img/spuren_2000.jpg) no-repeat top center;
    background-size:cover;}
#banner9 {
    background: url(../img/kehrwieder_2000.jpg) no-repeat top center;
    background-size:cover;}
#banner10 {
    background: url(../img/wiese_2000.jpg) no-repeat top center;
    background-size:cover;}
#banner>h2 {    
    font-family: 'Gloria Hallelujah', cursive;
    color:#FFC493;
    font-size:3.1em;
    font-weight:700;
    display:block;
    margin-top:1.6em;
    margin-right:2%;
    float:right;}
#banner2>h2, #banner3>h2,
#banner4>h2  {
    font-family: 'Gloria Hallelujah', cursive;
    color:#FFC493;
    font-size:3.1em;
    font-weight:700;
    display:block;
    /* margin-top:1.6em; */
    margin-right:2%;
    float:right;}
#banner2>h3, #banner3>h3,
#banner4>h3 {
    float:right;}
#banner3>h2, #banner4>h2 {
    color:#FF7400;
    margin-top: 3.5em;
    padding-left:2%;}
#banner3>h3 {
    color:#86E8E8;}

/* Navigation */
#nav {
    clear:both;
    height:auto;
    line-height:2em;
    background-color: rgba( 32,145,145,0.2);}
#nav li {
	display:table;
	float:left;
    list-style:none;
    width:13.7%;
	background-color:rgba( 32,145,145,0.5);
    margin-left:0.1%;    }
#nav li:first-of-type {
    margin-left:0.4%;}
#nav li a {
    display: block;
    height:100%;
	text-decoration:none;
	color:#FFFFFF;
    font-size:1.3em;
    text-align: center;
	padding:0.4em 1em;
    display:block;
	margin:0 0.8%;	 }
#nav>ul:after {
	display:table;
	content:"";
	clear:both;}
#nav li a:hover {
    color:#FFFFFF;
    font-weight:700;text-decoration:underline;}
#nav li.active, #nav li.active a {
    background-color:#FFEACA;color:#231000;
    font-size:1.25em;
    font-weight:700;}
#respnav {display:none;}
#submit>h1 {    
    font-family: 'Gloria Hallelujah', cursive;
    color:#fff;
    text-align: center;
    padding:0.4em 1em;
    font-weight:normal;
    display:block;
    clear:both;
    margin:auto 2% 1% auto;}
#submit h1 a {
    color:#fff;
    text-decoration: none;}
#submit h1 a:hover {
    text-decoration: underline;
    color: #FFC493;}
#content, #content2{
    width:100%;
    background-color:#FFEACA;}
main>h1 {
    background-color:#FFEACA;
    color:#325151;
    font-family: 'Gloria Hallelujah', cursive;
    font-size:2em;
    padding-top:2%;
    padding-left:5.5%;}
#content>h2 {text-align:center;}
#content2>h2 {
    margin-left:5.5%;}

/* Main index */
.teaser {
    display:block;
    margin-bottom:2.6%;
    margin-left:2%;
    margin-top:2%;
    width:30%;
    height:23em;
    float:left;}
.teaser:nth-of-type(4) {
    clear:both;}
.teaser h3, p, a {
    color: #231000;
    text-decoration: none;
    padding:1%;}
.teaser h3 {
    font-family: 'Maven Pro', sans-serif;
    padding:0.2em;}
.teaser:hover>p {
    text-decoration: none;
    border: solid 0.15em #462000;}

/* Main subsites */
#text, #text1 {
    width:90%;
    margin:0 auto;
    border-bottom: 0.1em solid #231000;}
#text>h1, #text1>h1 {
    margin-top:3%;}
#text>ul, #text1>ul {
    margin-left:5.5%;}
#text:last-of-type, #text1:last-of-type {border-bottom:none;}
#text:last-of-type a, #text1:last-of-type a {
    text-decoration:underline;}
#content:after {
    display:table;
    content:"";
    clear:both;}

/* Kontaktformular */
form {
    margin-left:3.5%; margin-top: 2%; margin-right:3.5%;}
fieldset {
    padding-left:3em;
    padding-bottom:2%;}
.required label:before{content:"*" " ";}
#auswahl, .required 
fieldset div{width:90%;margin-bottom:0.2em;}
label{display:table; width:10em; margin:0.3em 0;}
input{width:10em; margin-bottom:0.3em;}
textarea {font-size:1.2em; width: 90%;}
input, textarea, select{
	padding:0.06em 0.06em 0.06em 0.125em;
	box-sizing:content-box;
	color:#325151;  font-size:1.2em;}
input:hover, textarea:hover{
	border:0.06em solid #333;
    box-shadow:0.06em 0.125em #575A9C;}
    
/* Tabelle Impressum */
#tab {
    width:100%;
    font-size: 0.9em;
    border-spacing:0;
    margin-top:2%;
    margin-bottom:2%;}
  #tab tbody th {text-align:left;}
  #tab>caption {
    background-color:#209191;
    color:#fff;
    font-size: 1em;
    border-collapse: collapse;}
  #tab tr:nth-last-of-type(odd){
    background-color: #d9d6db;}
  #tab tbody>:first-child {
    background-color: #efefef;
    font-weight: bold;}
  #tab tbody>:first-child th, #tab tbody>:first-child td {
    border-bottom:2px solid #876A53;}
  #tab tr:nth-last-of-type(even){
    background-color: #86E8E8;}

/* Footer */
#footer {
    background-color: #209191;
    margin-top:1%;
    text-align:center;}
#footer>p, #footer>p>a {
    color:#fff;
    text-decoration: none;}
#footer>p>a:after {
    font:normal 1.8em/1 "Genericons";
	content:"\f410";
    color:#fff; padding-left:0.3em;}

/* Mediaqueries */
/* Smartphone Hochformat - 21.875 em*/
@media screen and (max-width:350px) {
    #topnav {position:fixed;
    bottom:0;
    background-color: #209191;
    font-size:0.8em;
    text-align:center;
    width:100%;}
    #banner>h2 {font-size: 1.3em; margin-top:0.5em;}
    #banner2>h2 {font-size: 1.3em; margin-top:9.5em;}
    #banner2>h3 {font-size:0.8em;color:#FFFFFF;}
    #banner, #banner2, #banner3, #banner4, #banner5, #banner6,#banner7, #banner8, #banner9,#banner10 {
        /*width:21.875em; margin-top: -5em;*/height:20em;} /*width:352px; height:448px;*/
    #banner {
        background: url(../img/anke_mini.jpg) no-repeat top center; /*background-size:348px 471px;*/}
    #banner3 {background: url(../img/stuehle_mini.jpg) no-repeat top left;}
    #banner4 {background: url(../img/rettung_mini.jpg) no-repeat bottom left; background-size:348px 471px;}
    #banner5 {background: url(../img/hoffnung_mini.jpg) no-repeat bottom center; /*background-size:348px 471px;*/;}
    #banner6 {background: url(../img/eisbrecher_mini.jpg) no-repeat top left;}
    #banner7 {background: url(../img/zufriedenheit_mini.jpg) no-repeat top center;}
    #banner8 {background: url(../img/spuren_mini.jpg) no-repeat top center;}
    #banner9 {background: url(../img/kehrwieder_mini.jpg) no-repeat top center;}
    #banner10 {background: url(../img/wiese_mini.jpg) no-repeat top center;}
    #submit>h1 {font-size:1.4em;}
    #submit>h1>a {text-decoration:underline; color: #FFC493;}
    #submit>h1>a:hover, #submit>h1>a:focus {color:#fff;}
    #nav ul{display:none;}
    #respnav{
        display:block; position:fixed; top:0; left:0; right:0;}
    #respnav select{
            display:block;
            width:100%;
            /*margin:auto;*/
            color: #FFFFFF; size: 1.2em; font-weight: bold; text-align:center; background-color: rgba(17, 42, 75, 0.8);}
    #respnav option{
            /* display:block;*/
            background: rgb(52, 95, 95, 0.7);
            padding:0.5em;           }
   #content, #content2 {padding-top:2% !important;}
   #text:first-of-type {display:none !important;}
    .teaser {
        float: none; position:relative;
        display:block; height: 15em !important; 
        width:98% !important; /*margin-left:3% !important;*/ margin-top:5% !important; margin-right:3%; margin-bottom:5%; padding-bottom:0 !important; 
        /*transition: all ease 2.5s;*/
        /*border:solid 0.1em #462000;*/}    
    .teaser>h3 {
        display:block; width:95% !important; position:absolute !important;  top:0; padding-right:0; padding-left:0;text-decoration:underline; font-size:1.3em !important;line-height: 1.5em !important; text-align:center;background-color:#FFFFFF; box-shadow: 0.1em 0 0.25em rgb(83, 83, 83) inset;}
    .teaser>a>img {
        /*position:relative; z-index:0;*/ height:14.8em !important; width:94.6% !important; margin-top: 1%;
        box-shadow: 0.375em 0.5em 0.125em 0em darkgray !important;}
    .teaser>a:before {content:""; position:absolute; top:0; bottom:0; left:auto; right:auto; display: block; width: 95%; background-color: rgba(  0,243,243,0.1); display: none;}
    .teaser>p>a {display:none !important;}
    .teaser:hover>a:before {display:block;}
    
        /*display:block; width:94.9%;position:absolute;left:1%;bottom:-0.5%; line-height: 1.5em; text-align:center;text-decoration: underline;background:#FFFFFF;}
    .teaser:hover>p {border:none !important;}*/
    /*.teaser>p {padding: 5% 0; margin-left: 2%;}
    .teaser>p>a {font-size:1em; text-decoration: underline;}
    .teaser>p>a>img {float:left; height: 7em !important; width: 9em !important; margin-top:-5%; margin-right:2%;}
    .teaser:hover {
        border: solid 0.15em #462000;}
    .teaser:hover>p {
            text-decoration: none;
            border: none;}
    .teaser>h3:hover {text-decoration: none;}*/
    #footer {margin-bottom:2.3em; line-height: 1em; font-size: 0.8em;}
}

/* Smartphone Hochformat & Querformat - 21,94em bis 45em*/
@media screen and (min-width: 351px) and (max-width: 720px) {
    #topnav {position:fixed; bottom:0; background-color: #209191; font-size:0.8em; text-align:center; width:100%;}
    #banner>h2 {font-size: 1.3em; margin-top:1em;}
    #banner2>h2 {font-size: 1.3em; margin-top:14em;}
    #banner2>h3 {font-size:0.8em;color:#FFFFFF;}
    #banner, #banner2, #banner3, #banner4, #banner5, #banner6,#banner7, #banner8, #banner9,#banner10 {
        /*width:100%;*/
        height:23em;}
    #banner {
        /*margin-top: -15em;*/background: url(../img/anke_mini2.jpg) no-repeat top center;}
    #banner3 {background: url(../img/stuehle_mini2.jpg) no-repeat top left;}
    #banner4 {background: url(../img/rettung_mini2.jpg) no-repeat top right; background-size:720px 470px;} 
    #banner5 {background: url(../img/hoffnung_mini2.jpg) no-repeat top center; background-size:720px 470px;}
    #banner6 {background: url(../img/eisbrecher_mini2.jpg) no-repeat top left;}
    #banner7 {background: url(../img/zufriedenheit_mini2.jpg);}
    #banner8 {background: url(../img/spuren_mini2.jpg) no-repeat top center;}
    #banner9 {background: url(../img/kehrwieder_mini2.jpg) no-repeat top right;}
    #banner10 {background: url(../img/wiese_mini2.jpg) no-repeat top left;}
    #submit>h1 {font-size:1.6em;}
    #submit>h1>a {text-decoration:underline; color: #FFC493;}
    #submit>h1>a:hover, #submit>h1>a:focus {color:#fff;}
    #nav ul{display:none;}
    #respnav{
        display:block; position:fixed; top:0;left:0; right:0;}
    #respnav select{
            display:block;
            width:100%;
            color: #FFFFFF; font-size: 1.2em; font-weight: bold; text-align:center; background-color: rgba(17, 42, 75, 0.8);}
    #respnav option{
            /* display:block;*/
            background: rgb(52, 95, 95, 0.7);
            padding:0.5em;}
    #content, #content2 {padding-top:2% !important;}
    #text:first-of-type {display:none !important;}
    .teaser {
        float: none; position:relative; /*z-index:1;*/
        display:block; height: 18em !important; 
        width:98% !important; /*margin-left:3% !important;*/ margin-top:3% !important; /*margin-right:3%;*/ margin-bottom:3%; padding-bottom:0 !important; 
        /*transition: all ease 2.5s;*/
        /*border:solid 0.1em #462000;*/}  
    .teaser>h3 {
        display:block; width:95%; margin-left:0.17em; position:absolute !important; left:0;top:0; /*z-index:2;*/ padding-right:0 !important; padding-left:0 !important; text-decoration:underline; font-size:1.5em !important;line-height: 1.7em !important; text-align:center;background-color:#FFFFFF; box-shadow: 0.1em 0 0.25em rgb(83, 83, 83) inset;}
    .teaser>a>img {
        /*position:relative; z-index:0;*/ height:17.8em !important; width:94.6%; margin-top: 1%;
        box-shadow: 0.375em 0.5em 0.125em 0em darkgray !important;}
    .teaser>a:before {content:""; position:absolute; top:0; bottom:0; left:auto; right:auto; display: block; width: 95%; background-color: rgba(  0,243,243,0.1); display: none;}
    .teaser>p>a {display:none !important;}
    .teaser:hover>a:before {display:block;} 
    
    /*.teaser {
        float: none; position:relative; height: 14.5em !important; width:98% !important; margin:3% 1% !important; padding-bottom:0 !important; 
        /*transition: all ease 2.5s;*/
        /*border:solid 0.1em #462000;}/*
    /*.teaser>p {padding-top:0;}*/
    /*.teaser>p>img {
        height:13em; width:98.6%;
        box-shadow: 0.375em 2em 0.125em 0em gray;
    }
    .teaser>h3 {
        display:block; width:95.8%;position:absolute; left:1%;top:1%;text-decoration:underline; line-height: 1.5em; text-align:center;background:#FFFFFF; box-shadow: 0.31em 0 0.625em grey inset;}
    .teaser>p>a {
        display:block; width:94.9%;position:absolute;left:1%;bottom:-0.5%; line-height: 1.5em; text-align:center;text-decoration: underline;background:#FFFFFF;}
    .teaser:hover>p {border:none !important;}*/
    /*.teaser>p {padding: 5% 0; margin-left: 2%;}
    .teaser>p>a {font-size:1em; text-decoration: underline;}
    .teaser>p>a>img {float:left; height: 7em !important; width: 9em !important; margin-top:-5%; margin-right:2%;}
    .teaser:hover {
        border: solid 0.15em #462000;}
    .teaser:hover>p {
            text-decoration: none;
            border: none;}
    .teaser>h3:hover {text-decoration: none;}*/
    /*.teaser {
        float: none; height: 10em !important; width:98% !important; margin:3% 1% !important;padding-bottom:0 !important;border:solid 0.1em #462000;}
    .teaser>p>a {font-size:1em; text-decoration: underline;}
    .teaser>p>a>img {float:left; height: 7.8em !important; width: 10em; margin-top:-5%; margin-right:5%;}
    .teaser:hover {
        border: solid 0.15em #462000;}
    .teaser:hover>p {
            text-decoration: none;
            border: none;}
    .teaser>h3:hover {text-decoration: none;}
    .teaser>p {padding: 5% 0; margin-left: 2%;}*/
    #footer {margin-bottom:2.3em;
    line-height: 1em; font-size: 0.8em;}
}

/* Tablet Hochformat (Portrait) - 45,1em bis 61,94em*/
@media only screen and (min-width: 721px) and (max-width: 991px) {
    #topnav ul li {
        line-height:1.5em;
        width:5em;}
    #topnav ul li a {
        font-size: 1em;}
    #banner, #banner2, #banner3, #banner4, #banner5, #banner6, #banner7, #banner8, #banner9, #banner10 
        {/*width: 100%;*/ height:30em;} /*height:560px;*/
    #banner {background: url(../img/anke_midi.jpg)  no-repeat top center;  background-size:990px 560px;}  
    #banner3 {background: url(../img/stuehle_midi.jpg) no-repeat top center;}
    #banner4 {background: url(../img/rettung_midi.jpg) no-repeat top right; background-size:990px 560px;} 
    #banner5 {background: url(../img/hoffnung_midi.jpg) no-repeat top center;}
    #banner6 {background: url(../img/eisbrecher_midi.jpg) no-repeat top left;}
    #banner7 {background: url(../img/zufriedenheit_midi.jpg) no-repeat top center;}
    #banner8 {background: url(../img/spuren_midi.jpg) no-repeat top right;}
    #banner9 {background: url(../img/kehrwieder_midi.jpg) no-repeat top center;}
    #banner10 {background: url(../img/wiese_midi.jpg) no-repeat top center;}
    #banner>h2, #banner2>h2 {font-size: 2.5em;}
    #nav li 
    {width:20%; border-left: solid 0.15em #86E8E8; border-top: solid 0.15em #86E8E8; border-right: solid 0.15em #86E8E8;}
    #nav:first-of-type 
    {margin-left:10%;}
    #nav li:nth-of-type(5) 
    {clear:both; width:33%;margin-left:-5%;}
    #nav li:nth-of-type(6) {width:33%;}
    #nav li:last-of-type {width:33%;}
    #nav li a {font-size:1.2em;}
   /*#nav li:active, #nav li a:active {font-size:1.3em;}*/
    #nav li:last-of-type:after {clear:both;} 
    #content, #content2 {padding-top:2% !important;}
    #text:first-of-type {display:none !important;}
   .teaser {
         display:block; position:relative; 
         height:23em !important; width: 48% !important;
         margin-top:3% !important; margin-bottom:3%; padding-bottom:0 !important; }
    /*.teaser {
        /*transition: all ease 2.5s;*/
        /*border:solid 0.1em #462000;}*/
    /*.teaser>p {padding-top:0;}*/
    .teaser>h3 {
        display:block; width:95%; margin-left:0.1em !important;position:absolute; left:0;top:0 !important;padding-left:0; padding-right:0; text-decoration:underline; font-size: 1.3em; line-height: 1.5em; text-align:center;background:#FFFFFF; box-shadow: 0.1em 0 0.25em rgb(83, 83, 83) inset;}
    .teaser>a>img {
        height:22.8em; width:94.6%; margin-top:1%;
        box-shadow: 0.375em 0.5em 0.125em 0em darkgray;}
    .teaser>p>a {
        display:block; width:95%;position:absolute;left:0;bottom:-0.5%; padding-left:0; padding-right:0; font-size: 1.3em; line-height: 1.5em; text-align:center;text-decoration: underline;background:#FFFFFF;}
    .teaser>a:before {content:""; position:absolute; top:0; bottom:0; left:auto; right:auto; display: block; width: 95%; background-color: rgba(  0,243,243,0.1); display: none;}
    .teaser>p>a {display:none !important;}
    .teaser:hover>a:before {display:block;}
    /*.teaser {height:18em !important; width: 48% !important;}
    .teaser>p>a>img {height: 15em; width: 95%;}*/
    .teaser:nth-of-type(3)
    {clear: both; margin-top:5%;margin-bottom:5%;}
    .teaser:nth-of-type(4) 
    {clear:none; float: left; margin-top:5%;margin-bottom:5%;}.teaser:nth-of-type(5) 
    {clear: both; margin-top:5%;margin-bottom:5%;/*padding-bottom:10%;*/}
    .teaser:nth-of-type(6) 
    {clear:none; float: left; margin-top:5%;margin-bottom:5%;}
    main:after {display:block; content: " "; clear:both;}
}
/* Tablet Querformat (Landscape) - PC mit geringer Auflösung - 62em bis 77,5em*/
@media screen and (min-width: 992px) and (max-width: 1240px) {
    #banner>h2 {margin-top:0;}
    #banner, #banner2, #banner3, #banner4, #banner5, #banner6, #banner7, #banner8, #banner9, #banner10 {/*width:100%;*/ height:33em;}
   #banner {
        background: url(../img/anke_maxi.jpg)no-repeat top center;}
    #banner2 {
        background: url(../img/strand_2000.jpg) no-repeat top center;}
    #banner3 {
        background: url(../img/stuehle_2000.jpg) no-repeat top center;}
    #banner2>h3 {clear:both;}
    #banner4 {
        background: url(../img/rettung_maxi.jpg) no-repeat top right;}
    #banner5 {
        background: url(../img/hoffnung_maxi.jpg) no-repeat top center;}
    #banner6 {
        background: url(../img/eisbrecher_maxi.jpg) no-repeat top center;}
    #banner7 {
        background: url(../img/zufriedenheit_maxi.jpg) no-repeat top center;}
    #banner8 {
        background: url(../img/spuren_maxi.jpg) no-repeat top center;}
    #banner9 {
        background: url(../img/kehrwieder_maxi.jpg) no-repeat top center;}
    #banner10 {
        background: url(../img/wiese_2000.jpg) no-repeat top center;}
    #nav li {width:20%; border-left: solid 0.15em #86E8E8; border-top: solid 0.15em #86E8E8; border-right: solid 0.15em #86E8E8;} 
    #nav:first-of-type {margin-left:10%;}
    #nav li:nth-of-type(5) {clear:both; width:33%;margin-left:-5%;}
    #nav li:nth-of-type(6), #nav li:last-of-type {width:33%;}
    #nav li a {font-size:1.3em; }
   /*#nav li:active, #nav li a:active {font-size:1.4em;}*/
    /*#nav li:last-of-type:after {clear:both;*/}
    #content, #content2 {padding-top:2% !important;}
    .teaser {
        display:block; position:relative; 
        height:23em; width: 30%; margin-top:3% !important; margin-bottom:3%; padding-bottom:0 !important;
       /*transition: all ease 2.5s;*/
       /*border:solid 0.1em #462000;*/}
   /*.teaser>p {padding-top:0;}*/
   .teaser>h3 {
    display:block; width:95%; margin-left:0.12em; position:absolute; left:0;top:0 !important;padding-left:0; padding-right:0; text-decoration:underline; font-size: 1.5em; line-height: 1.7em; text-align:center;background:#FFFFFF; box-shadow: 0.1em 0 0.25em rgb(83, 83, 83) inset;}
    .teaser>a>img {
        height:22.8em; width:94.6%; margin-top:1%;
        box-shadow: 0.375em 0.5em 0.125em 0em darkgray;}
    .teaser>p>a {
        width:94.7%;position:absolute;left:0;bottom:-0.5%; margin-left:0.18em; padding-left:0; padding-right:0; font-size: 1.2em; line-height: 1.3em; text-align:center;background:#FFFFFF;}
    .teaser>a:before {content:""; position:absolute; top:0; bottom:0; left:auto; right:auto; display: block; width: 95%; background-color: rgba(  0,243,243,0.1); display: none;}
    .teaser:hover>a:before {display:block;}
    .teaser:hover>p {border:none !important;}
    }