/* ============= reset ===========*/
*, ul {
    margin: 0;
    padding: 0;
}
/* ========== Printsheet: ganz am Ende ===*/
/* =========== Fonts ==== */
@font-face {
font-family: tangerine;
src: url('Tangerine_Regular.ttf');
}
/* ============ Layout =========== */
body {
    color: #383837;
    font: .8em/1.5 "trebuchet ms", arial;
    margin: 20px 0;
    background: #ccc url(bilder/wangerooge2.jpg);
    background-size: cover;
}
#wrapper {
    max-width: 1280px;
    min-width: 320px;
    margin: auto;
    border: 2px solid #fff;
    background: #333;
    border-radius: 8px;
    box-shadow: 5px 5px 4px 0px #aaa;
}
#content {
    min-height: 65vh;
    padding: 0 6%;
}
#header {
    position: relative;   
    height: 440px;
    color: #FFF;
    border-top-right-radius: 8px; 
    border-top-left-radius: 8px;
    background: #000;
}

#links {
    float: left;
    width: 49%;
    padding: 2%;
    color: #eee;
    min-width: 300px;
    box-sizing: border-box;
}
#rechts {
    float: right;
    width: 49%;
    padding: 2%;
    color: #eee;
    min-width: 300px;
    box-sizing: border-box;
}
/* da in den Archivseiten die Mitte öfters definiert wird, hier kein ID sondern eine Klasse */
#mitte, .mitte {
    width: 80%;
    padding: 2%;
    margin: 2%;
    color: #eee;
    min-width: 300px;
    clear: both;
}
#aktuell {
    float: right;
    width: 40%;
    padding: 2%;
    margin: 2% 2% 2% 2%;
    background: #800000;
    color: #FFF;
    border: 1px solid #fff;
    border-radius: 8px;
    min-width: 300px;
}
#footer {
    clear: both;
    background: #ddd;
    color: #800000;
    padding: 10px;
    text-align: center;
}

/* =============== allg. Elemente ========== */
p, h3 {
    margin: 1em 0;
}
p, ul {
    font-size: 1.1em;
}

ul li {
    list-style: url(bilder/arrow.png);
}
h1 {
    font-size: 2.4em
}
h3 {
    padding-bottom: 1em;
    border-bottom: 1px solid #fff;
    font-size: 1.8em;
}
#content h2 {
    margin: 1em;
}

a {
    text-decoration: none;
    color: #D66737;
}
a:hover {
    color: #fff;
}
.float-right {
    float: right;
    margin: 5px 0 5px 10px;
}
.float-left {
    float: left;
    margin: 5px 10px 5px 0;
}
.clear {
    clear: both;
}
.smartonly {
    display: none;
}
.rund {
    border-radius: 8px;
}
.schatten {
    box-shadow: 6px 6px 60px #666;
}

.grosser-text {
    font-size: 1.2em;
}
.tangerine {
    font-family: tangerine;
    font-size: 2em;
}
img {
    border: 1px solid #fff;
}
.line {
    border-bottom: 2px dotted #fff;
    margin: 2em 0;
}
.box {
    padding: 20px;
    background-color: #ccc;
    color: #800000;
    border: 1px solid #990000;
    border-radius: 8px;
    font-size: 1.2em;
}
/* ============== Header =============== */

/*#headerhalver h1, */#headerschalk h1 {
    padding-top: 270px;
}

#headerschalk {
    display: flex;
    max-width: 600px;
    width: 50%;
    background: #000 url(bilder/logo-neu.jpg) no-repeat;
    background-size: 100%;
    background-position-y: 60px;
}
.headertext h2 {
    font-variant: small-caps; 
}
.headertext {
    padding-left: 25%;
    padding-right: 10px;
    font-size: 1.2em;
    color: #cacbc8;
}
.headertext a h1, .headertext a h2 {
    color: #e3e4e2;
}
/* =================== Content ============*/
#content ul {
    margin-left: 2em;
}
#content p, #content ul {
    font-size: 1.2em;
}
/* ================== Footer ============*/
#footer a {
    color: #A83A0B;
}
/* =============== navigation ============*/
#nav {
    background: #CCD6D8;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}
#nav ul {
    margin-left: 85px;
}
#nav ul li {
 float: left;
 list-style: none;
 border-right: 1px solid #fff;
 }
#nav ul li:first-child {
  border-left: 1px solid #fff;  
}

#nav ul a {
 color: #111;
 display: block;
 padding: 10px;
 text-decoration: none;
 -moz-transition: all 0.4s ease;
 -webkit-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 transition: all 0.4s ease;
 }
#nav ul strong {
    font-style: italic;
}

#nav ul a:hover, #nav ul a:focus, #nav ul a:active {
    color: white;
    background: #D66737;
 }
 
#nav ul a.aktuell {
    color: white;
    background: #990000;
}
 
  /* ============== Home =================*/
#aktuell {
      position: relative;
    }
    
#aktuell .hellerbox {
    position: absolute;
    left: 0;
    top: 0;
    height: 30%;
    width: 61%;
    background: hsla(100, 0%, 100%, 0.3);
}
 #aktuell span {
     display: block;
     font-size: 1.3em;
     padding-top: 1em;
 }
 #aktuell h3 {
     border: none;
     font-style: italic;
     font-size: 1.3em;
 }

 /* ================ Events ===================== */
 #events #content h1, #events #content h2, #events #content img {
     margin: 1em 0 0 0.6em;
 }

/* ================= Archiv =================== */
 #archiv h2 {
    font-size: 2em;
 }
 #archiv h3 {
    border-bottom: none;
}
 /* ================ Specials =================== */
 #specials h3 {
     margin-top: 40px;
 }

 /* ============== Ausstellungen ================= */
img[src^="bilder/ausstellung"] {
     margin-top: 15px;
     margin-right: 15px;
 }
 /* ================ Kontakt, Impressum ============== */
 .umbruch {
     display: block;
 }
 address {
     margin-left: 15px;
 }
 /* ================== Print-Sheet =================*/
 @media print {
    #links, #rechts {
        width: 80%;
    }
    #nav {
        display: none;
    }
}
/* ================ Responsive ===================*/
@media (max-width: 1280px) {
    body {
        margin: 0;
    }   
}
@media (max-width: 962px) {
    #header {
        height: 500px;
    }
    /*#headerhalver h1, */#headerschalk h1 {
        padding-top: 230px;
    }
}
@media (max-width: 730px) {
    #links, #rechts, #aktuell {
        float: none;
        width: 80%;
    }
    #header {
        height: 900px;
    }
    #nav {
        /*position: static;*/
        border-top : 1px solid #CCD6D8;
    }
    #nav ul {
        margin-left: 0;
    }
    #nav ul li {
        float: none;
    }
    #nav ul a {
        padding: 5px 0 5px 60px;
    }
    img.aktion-auftanken {
        width: 100%;
        margin-left: 0;
    }
}
@media (max-width: 580px) {
    #header {
      display: block;
    }
    #mitte, #links, #rechts {
        width: 100%;
    }
    /*#headerhalver h1,*/ #headerschalk h1 {
        padding-top: 250px;
    }
    /*#headerhalver, */#headerschalk {
        width: 100%;
        max-width: 600px;
    }
    .smartonly {
        display: block;
    }
    .nosmart {
        display: none;
    }
 }

@media (max-width: 480px) {
    .wrapper {
        min-width: 320px;
    }
    img {
        width: 90%;
        height: auto;
    }
    .headertext {
        padding-left: 0;
        max-width: 80%;
        margin: 0 auto;
    }
    /*#headerhalver h1, */#headerschalk h1 {
        padding-top: 200px;
    }
}
@media (max-width: 350px) {

    /*#headerhalver h1, */#headerschalk h1 {
        padding-top: 200px;
    }
}