@charset "utf-8";

body{
  font: 16px/1.5 Verdana, Arial, Helvetica,sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

/* Global */
.container{
  width:95%;
  margin:auto;
  overflow:hidden;
}

ul{
  margin:0;
  padding:0;
}

.button_1{
  height:38px;
  background:#e8491d;
  border:0;
  padding-left: 20px;
  padding-right:20px;
  color:#ffffff;
}

.dark{
  padding:15px;
  background:#35424a;
  color:#ffffff;
  margin-top:10px;
  margin-bottom:10px;
}

.absatzlisteBox{
display:none;
line-height: 1.66em;
padding: 16px 16px 16px 20px;
border-radius: 8px;
box-shadow: 2px 2px 2px #888888;
background-color:#ffff00;
font-size:16px;
width: 270px;
height: auto;
border: 1px solid #AFAFAF;
position:fixed; right:0; bottom:10%;
}

.elastic-video {
  position: relative;
  padding-bottom: 55%;
  padding-top: 15px;
  height: 0;
  overflow: hidden;
}

.elastic-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.animateBoxROuter {
width: 300px;
position: absolute; top: 200px;
left:50%; margin-left:-150px;
z-index: 5000;
}

.animateBoxR {
width: 300px;
position: relative; right: -3000px;
font-size: 85%;
padding: 24px 12px 24px 12px;
background: #fff;
border: 2px solid #006600;
border-radius: 14px;
}

.pic{
  width:200px;
  height:auto;
  transition-duration:1s;
}

.pic:hover{
  -webkit-transform:scale(3);
  transition-duration:1s;
  z-index:99999;
  position:flex;
}

/* Header **/
header{
  position:fixed;
  width:100%;
  background:#35424a;
  list-style:none;
  color:#ffffff;
  padding-top:10px;
  height:70px;
  border-bottom:#e8491d 3px solid;
}

header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:20px;
}

header #branding{
  float:right;
  display:inline;
  color:#ffffff;
  font-weight:bold;
}

header nav{
  float:right;
  margin-top:8px;
}

header .current a{
  color:#e8491d;
  font-weight:bold;
}

header a:hover{
  color:#ffff00;
}



input[type="checkbox"]#togglebox {
  /* Checkbox, Men? Zustand umschalten */
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

#slide-out {
    z-index:20000;
    position: fixed;
    top: 10px;
    left: 0;
    width: 45px;
    padding: 6px 6px;
    text-align: center;
    transition-duration: 0.3s;
    border-radius: 0 5px 5px 0;
}
#slide-out_inner {
    font-size:20px;
    font-color:#000;
    padding:5px;
    text-align: center;
    position: fixed;
    list-style:none;
    top: 10px;
    left: -55%;
    background: #bcbcbc;
    width: 50%;
    border-width:1px 1px 1px 0;
    border-style:solid;
    border-color:#999;
    border-radius: 0 10px 10px 0;
    transition-duration: 0.3s;
    border-radius: 0 10px 10px 0;
}
#slide-out:hover {
    left: 265px;
}
#slide-out:hover #slide-out_inner {
    left: 0;
}
}

/* Titelfoto */
#titelfoto{
  padding-top:75px;
}

/* Laufschrift */
#laufschrift{
  padding:15px;
  color:#ffffff;
  background:#35424a
}

#laufschrift h1{
  float:left;
}

/* Sidebar */
#sidebar{
  float:right;
  width:25%;
  margin-top:0px;
  text-align:center;
  height:auto;
}

/* Main */
article#main-col{
  float:left;
  width:70%;
  text-align: justify;
}

#main a{
  color:#00008b;
  text-decoration:none;
}

#main .current a{
  color:#ffff00;
  font-weight:bold;
}

#main a:hover{
  color:#0000ff;
  text-decoration:none;
}

#main h1{
  font-size:30px;
}

/* Sidebar */
#sidebar li{
  list-style: none;
  padding:10px;
  border: #cccccc solid 1px;
  margin-bottom:5px;
  background:#808080;
}

#sidebar h1{
  font-size:30px;
}

#sidebar a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:20px;
}

#sidebar .current {
  color:#ffff00;
  font-weight:bold;
}

#sidebar a:hover{
  color:#ff0000;
}

/* Footer */
footer{
  background:#35424a;
  color:#ffffff;
  text-align: center;
  padding-top:10px;
  min-height:70px;
}

footer a{
  color:#ffffff;
  text-decoration:none;
  font-size:16px;
}

footer li{
  display:inline;
  padding: 10px 10px 10px 10px;
}

footer a:hover{
  color:#cccccc;
}

#bottom {
    width: 100%;
    position:fixed;
    bottom: 0px;
    height: 25px;
    background-color: #FFFF00;
    padding:2px 0px 4px 0px;
    text-align:center;
}

/********************* ANZEIGE beim Laden DESKTOP-Ansicht *********************/
        /** definiert das Fenster **/
#anzeige {
  background-image: url();                /** Hintergrundbild **/
  background-size: cover;                                /** Hintergrundbild Responsive Darstellung **/
  position:fixed;                                                /** Fixiert (scrollt nicht mit) Alternative "position:absolute;" **/
  width:800px;                                                /** Breite des Fensters **/
  left:100px;                                                        /** Position von Links **/
  top:50px;                                                /** Position von Oben **/
  padding:0px;                                        /** Textabstand zum Fensterrand **/
  color:#006600;                                        /** Textfarbe **/
  font-size: 16px;                                        /** Schriftgröße **/
  border-radius:10px;                                        /** Runde Ecken **/
  border-width:2px;                                        /** Rahmenbreite **/
  border-style:solid;                                        /** Positionstil **/
  border-color:#006600;                                /** Rahmenfarbe **/
  z-index:20000;                                         /** Überlagerung **/
}

        /** Überschrift H2 innerhalb des Popups **/
#anzeige h2 {
  color:#006600;                                        /** Schriftfarbe**/
  font-size:22px;                                                /** Schriftgröße **/
  font-weight:bold;                                        /** Schrift Fett **/
}
        /** definiert den Hintergrund der Texte **/
.hintergrund {
  background: rgba(255, 255, 255, 0.8);         /** Hintergrund Weiss, 80% Durchscheinend**/
  padding:12px;                                                /** Textabstand zum Rand**/
  border-radius:5px;                                        /** Runde Ecken **/
  border-width:1px;                                        /** Rahmenstärke**/
  border-style:solid;                                        /**Rahmenstil **/
  border-color:#006600;                                /** Rahmenfarbe **/
  font-weight:bold;                                        /** Schrift Fett **/
  margin:20px;                                                /** Abstand zum Fensterrand **/
}
        /** Definiert den Schließen.Button **/
#end{
  position:absolute;                                        /** Fixiert (scrollt nicht mit) **/
  background:#006600;                                /** Hintergrundfarbe **/
  color:#fff;                                                /** Farbe des Kreuzes **/
  right:-15px;                                                /** Position**/
  top:-15px;                                                /** Position**/
  border-radius:50%;                                        /** Rund**/
  width:30px;                                                /** Größe**/
  height:30px;                                                /** Größe**/
  line-height:30px;                                        /** Größe**/
  text-align:center;                                        /** Zentriert**/
  font-size:15px;                                                /** Größe**/
  font-weight:bold;                                        /** Fett**/
  font-family:'Arial Black', Arial, sans-serif;        /** Schriftart**/
  cursor:pointer;                                                /** Klickbar**/
}
        /** Definiert die Link-Button **/
.button-anzeige {
  width:50px;                                                /** Breite**/
  border-radius: 10px;                                /** Runde Ecken**/
  color: #ffffff;                                                /** Schriftfarbe**/
  font-size: 16px;                                        /** Schriftgröße**/
  background: #006600;                                /** Hintergrundfarbe**/
  padding: 3px 6px 3px 6px;                        /** Abstand zum Rand**/
  text-decoration: none;                                /** Nicht unterstreichen**/
  text-align:center;                                        /** Zentriert**/
}
        /** Definiert die Link-Button Hover **/
.button-anzeige:hover {
  background: #009900;                                /** Hintergrundfarbe**/
  color: #ffffff;                                                /** Schriftfarbe**/
  text-decoration: none;                                /** Nicht unterstreichen**/
}
        /** Definiert wann und wie das Fenster eingeblendet wird **/
.einblenden {
animation-name: einblenden;
animation-duration: 1s;                                /** Gesammte Zeit der Animation **/
animation-iteration-count: 1;                        /** Anzahl der Wiederholungen **/
animation-timing-function: ease-in-out;
}
@keyframes einblenden {
from {transform:translate(0, -500px);}                /** Startposition **/
50% {transform:translate(0, -500px);}                /** Position nach 50% der Zeit (0.5 Sec) **/
85% {transform:translate(0, 50px);}                /** Position nach 80% der Zeit (0.8 Sec) **/
to {transform: translate(0, -0px);}                 /** Endposition **/
}
        /** Definiert wann Fenster ausgeblendet wird (Bildschirmbreite) **/
@media (max-width: 900px) {
#anzeige {
display:none;
}}


/* Media Queries */

@media(max-width: 900px){
  article#main-col,
  aside#sidebar{
    float:none;
    text-align:center;
    width:100%;
  }

header #branding {
  display:none;
}

#main  p{text-align:justify;}

#titelfoto{
  padding-top:82px;
}


#slide-out_inner {
    font-size:20px;
    font-color:#000;
    padding:5px;
    text-align: center;
    position: fixed;
    list-style:none;
    top: 10px;
    left: -105%;
    background: #bcbcbc;
    width: 100%;
    border-width:1px 1px 1px 0;
    border-style:solid;
    border-color:#999;
    border-radius: 0 10px 10px 0;
    transition-duration: 0.3s;
    border-radius: 0 10px 10px 0;
}

}