@charset "utf-8";
/* CSS Document */

@media screen {

    #head img.logo{
        max-width:102px;
        width:100%;
        height:auto;
        margin-top:15px;
        float:left;
    }
    
    /* Logo: bündig über der Inhaltsspalte, leicht transparent (85 %)
       – gilt für Logo und Zeile darunter */
    #logo_con{
        float:left;
        margin-top:45px;
        margin-left:10px;
        margin-bottom:10px;
        width:463px;
        filter:alpha(opacity=85);
        -moz-opacity: 0.85;
        opacity: 0.85;
        position:relative;
        z-index:2;
    }
    #logo_con img{
        display:block;
        width:100%;
        height:auto;
    }
    /* Zeile unter dem Logo: auf Computer und Tablet 2/3 der Logobreite,
       auf dem Handy volle Logobreite; jeweils links und rechts bündig.
       Schriftgröße passt zur Breite, den Rest gleichen die Wortabstände aus. */
    #logo_con .logo_zeile{
        display:block;
        width:309px;
        margin-top:6px;
        font-family:'Oswald', sans-serif;
        font-weight:700;
        font-size:17.2px;
        line-height:1.1;
        color:#fff;
        text-shadow:0 1px 4px rgba(0,0,0,0.6);
        text-align:justify;
        -moz-text-align-last:justify;
        text-align-last:justify;
    }
    #head #logo_erweiterung{
        position: absolute;
        margin-top: -15px;
        margin-left: -120px;
        z-index:1;
    }

    #head .imp_header_nav{
        position: absolute;
        right: 0;
        top: 0;
        padding-bottom: 5px;
        padding-right: 10px;
        /*background: rgba(0,0,0,.2);
        border-radius: 0 0 20px 20px;*/
        background-image:url('../img/imp_nav_bg.svg');
        max-width:326px;
        width:100%;
        text-align: center;
        z-index:2;

    }
    
    #head h2 a{
    text-decoration:none;
    color:#103555;
    font-size:2.91em;
    font-family:Anton, Arial Black, Arial;
    font-weight:bold;
    text-shadow: 0 0 10px #fff;
    }

    #head h3 a{
    text-decoration:none;
    color:#993333;
    font-size:1.07em;
    font-family:Anton, Arial black, Arial;
    font-weight:bold;
    text-shadow: 0 0 10px #fff; 
    }
    #nav{
        width: 1001px;
        margin: auto;
        position:relative;
    }
    #nav ul > li{
        list-style-type: none;
        display: inline-block;
        margin-right:1.500em;
        margin-top:10px;
      
    }
    /* Altes Abblenden beim Überfahren aufheben (falls Besucher noch die
       alte navigation.css im Zwischenspeicher haben) */
    #head ul > li:hover{
        -khtml-opacity: 1;
        -moz-opacity: 1;
        filter: none;
        opacity: 1;
    }
    /* Menüknöpfe: schlichte Rechtecke, gleiche Transparenz wie die Kacheln (30 %),
       beim Überfahren dunkler (50 %) statt blasser */
    #nav ul > li .bb{
        color:white;
        text-decoration:none;
        font-size:1.375em;
        font-family: 'Oswald', sans-serif;
        height:36px;
        background:rgba(0,0,0,0.3);
        float:left;
        padding-left:15px;
        padding-right:15px;
        transition: background .3s ease;
    }
    #nav ul > li .bb:hover{
        background:rgba(0,0,0,0.5);
    }
    #nav ul > li .ls,
    #nav ul > li .rs,
    #nav ul > li .brush_ls,
    #nav ul > li .brush_rs{
        display:none;
    }
    /* "Spenden" hervorgehoben: helles Rechteck, gleiche Transparenz */
    #nav ul > li .brush_ms{
        color:white;
        text-decoration:none;
        font-size:1.375em;
        font-family: 'Oswald', sans-serif;
        height:36px;
        background:rgba(255,255,255,0.3);
        transition: background .3s ease;
        float:left;
        padding-left:15px;
        padding-right:15px;
    }
    #nav ul > li .brush_ms:hover{
        background:rgba(255,255,255,0.5);
    }
    
    /*--------------------------------*/
      /* Menu Active Btns  */
    /*--------------------------------*/

    .da .hnv_da,
    .imp .hnv_imp,
    .af .hnv_af,
    .ko .hnv_ko,
    .li .hnv_li,
    .ti .hnv_ti,
    .uu .hnv_uu,
    .va .hnv_va,
    .ne .hnv_ne,
    .ku .hnv_ku,
    .vm .hnv_vm,
    .as .hnv_as,
    .sp .hnv_sp,
    .ti .hnv_ti{
        -khtml-opacity: .4;
        -moz-opacity: .4;
        -ms-filter: alpha(opacity=40);
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
        filter: alpha(opacity=40); 
        opacity: 0.4; 
    }   
        
    /* Aktiver Punkt im Hauptmenü: nicht abblenden, sondern blau hinterlegen
       (Blau des Logos, leicht transparent) */
    .ne #nav .hnv_ne,
    .va #nav .hnv_va,
    .ku #nav .hnv_ku,
    .vm #nav .hnv_vm,
    .uu #nav .hnv_uu,
    .as #nav .hnv_as,
    .sp #nav .hnv_sp{
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-filter: none;
        filter: none;
        opacity: 1;
    }
    .ne #nav .hnv_ne .bb,
    .va #nav .hnv_va .bb,
    .ku #nav .hnv_ku .bb,
    .vm #nav .hnv_vm .bb,
    .uu #nav .hnv_uu .bb,
    .as #nav .hnv_as .bb,
    .sp #nav .hnv_sp .brush_ms{
        background: rgba(0,106,181,0.75);
        color: white;
    }

    /*--------------------------------*/
      /* Menu Active Btns ENDS  */
    /*--------------------------------*/
    
    #head #btnSpndn{
        font-family:'Covered By Your Grace', cursive; 
        font-size:2.5em;
        color:#103143;
        transform: rotate(10deg);
        text-align: center;
        margin-top:-120px;
        margin-left:-50px;
        position:absolute;
        background-image:none;
    }
    #head #btnSpndn:hover{
        color:#103143;
    }
    
    #navspace{
        width:100%;
        max-width:1001px;
        height:2.9375em;
        margin:0.5em auto 0 auto;
    }
/*--------------------------------*/
    /* mobile Navigation  */
/*--------------------------------*/
    #sm_nav{
        overflow:hidden;
        -webkit-transition: max-height 0.8s;
        -moz-transition: max-height 0.8s;
        transition: max-height 0.8s;
        max-height:0px;
    
    }
        
    #sm_nav ul > li{
        list-style-type: none;
        display:block;
        width:560px;
        margin-left:10px;
        float:left;      
    }
    #sm_nav a{
        color:white;
        text-decoration:none;
        font-size:18px;
        height:auto;
        display:block;
        background:rgba(0,0,0,0.2);
        margin-top:2px;
        padding:5px 10px 5px 10px;
    }
    
    #closenav_btn{display:none;}
    #opennav_btn{display:none;}
    
/*--------------------------------*/    
    /* SM NAVigaition Aktion */
/*--------------------------------*/
    
    #open_nav:target nav#sm_nav{
        max-height:320px;
    }
    #open_nav:target a#opennav_btn{
        display:none;
    }
    #open_nav:target a#closenav_btn{
        display:block;
    }
    
/*--------------------------------*/
    /* small Navigation END  */
/*--------------------------------*/
    
    footer{
        margin-top:40px;
        width:100%;
        height:40px;
        background-image: url(../img/footer_bckgrnd.png);
        background-repeat: repeat-x;
    }
    .footerCon{width:98.041136%;min-height:40px;margin:0 auto;color:white;}

    .imp_header_nav a{
        display:inline-block;
        height:20px;
        padding-left:25px;
        padding-top:2px;
        margin-left:20px;
        margin-top:5px;
    }

    .footerCon a{
        display:inline-block;
        height:20px;
        padding-left:25px;
        padding-top:2px;
        margin-left:20px;
        margin-top:12px;
    }
    
    .footerCon a:first-of-type{
        margin-left:0px;
    }
    .imp_header_nav a:last-of-type{
        margin-right:0px;
    }

    
    #niTickets{
        background:url(../img/ico_ticket.png);
        background-repeat: no-repeat;
    }
    #niLinks{
        background:url(../img/ico_links.png);
        background-repeat: no-repeat;
    }
    #niKontakt{
        background:url(../img/ico_kontakt.png);
        background-repeat:no-repeat;
    }
    #niAnfahrt{
        background:url(../img/ico_anfahrt.png);
        background-repeat:no-repeat;
    }
    #niSitemap{
        background:url(../img/ico_sitemap.png);
        background-repeat:no-repeat;
    }
    #niImpressum{
        background:url(../img/ico_impressum.png);
        background-repeat: no-repeat;
    }
    #niDatenschutz{
        background:url(../img/ico_datenschutz.png);
        background-repeat: no-repeat;
    }
    .niNewsletter{
        background:url(../img/ico_newsletter.png);
        background-repeat: no-repeat;
    }
    
}
    /*--------------------------------*/
/* DESKTOP */
    /*--------------------------------*/
@media screen and (min-width: 1046px){
    .footerCon{max-width:1001px}
    #head img.logo{max-width:102px;}
    #head ul > li a{ padding-top:6px; }
    /* Leiste für den Menü-Knopf wird nur auf Tablet und Handy gebraucht */
    #navspace{display:none;}
    /* Menüknöpfe etwas kleiner, Text mittig */
    #nav ul > li .bb,
    #nav ul > li .brush_ms{
        font-size:19px;
        height:34px;
        padding-top:7px;
    }
    /* Mehr Luft zwischen Menü und Inhalt */
    #nav{padding-bottom:15px;}
    /* Menüknöpfe enger beisammen (10 px), "Spenden" ganz rechts außen */
    #nav ul{display:flex;}
    #nav ul > li{margin-right:10px;}
    #nav ul > li.hnv_sp{margin-left:auto;margin-right:0;}

}
    /*--------------------------------*/
/* TABLET */
    /*--------------------------------*/
@media (min-width: 714px ) and (max-width: 1045px){

    .footerCon{max-width:664px;text-align:center;}
    #head img.logo{max-width:85px;}
    #head ul > li a{ padding-top:9px; }
    #logo_con{margin-top:50px;width:371px;}
    #logo_con .logo_zeile{width:247px;font-size:13.8px;margin-top:5px;}
    #nav{display:none;}
    #sm_nav > ul{margin-left: 45px;}
    #navspace{padding-top:6px;margin-left:10px}
    #opennav_btn{display:block;}
    #navspace{width:664px;}

}
    /*--------------------------------*/
/* PHONE */
    /*--------------------------------*/
@media (min-width: 357px ) and (max-width: 713px){
    .footerCon{max-width:327px;text-align:center;}
    .footerCon .fntxt{display:none;}
    #head img.logo{max-width:55px;}
    #logo_con{margin-top:44px;width:327px;}
    #logo_con .logo_zeile{width:auto;font-size:18px;margin-top:4px;}
    #nav{display:none;}
    #sm_nav ul > li{width:310px;}
    #sm_nav{margin-left: 10px;}
    #navspace{padding-top:4px;margin-left:10px;}
    #opennav_btn{display:block;}
    .imp_header_nav > a > span{font-size:14px;}
    #navspace{width:327px;}


}
/* PHONE OLD */

@media (max-width:356px){
    
    /*#logo_con{clear:both;margin-top:15px;margin-bottom:10px;}*/
    #logo_con{width:300px;margin-left:0;}
    #logo_con .logo_zeile{width:auto;font-size:16.5px;margin-top:4px;}
    #head img.logo{display:none;}
    #nav{display:none;}
    .footerCon{width:300px;text-align:center;}
    .footerCon .fntxt{display:none;}
    #navspace{padding-top:7px;}
    #opennav_btn{display:block;}
    .imp_header_nav{text-align: right!important;}
    .imp_header_nav > a{margin-left:0;}
    .imp_header_nav > a > span{display:none;}
}