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

header { background:#024170 /* footerblau */ url("../images/background-navi.xpng") repeat-x; padding: 0.5em 0 0.4em 0; }

.bg-dark { background-color: #5F6905 /* Dunkles Olivegrün */ !important; 
            background: rgba(95,105,5,1);
background: rgba(55,61,2,1);
background: -moz-linear-gradient(top, rgba(55,61,2,1) 0%, rgba(71,79,3,1) 41%, rgba(95,105,5,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(55,61,2,1)), color-stop(41%, rgba(71,79,3,1)), color-stop(100%, rgba(95,105,5,1)));
background: -webkit-linear-gradient(top, rgba(55,61,2,1) 0%, rgba(71,79,3,1) 41%, rgba(95,105,5,1) 100%);
background: -o-linear-gradient(top, rgba(55,61,2,1) 0%, rgba(71,79,3,1) 41%, rgba(95,105,5,1) 100%);
background: -ms-linear-gradient(top, rgba(55,61,2,1) 0%, rgba(71,79,3,1) 41%, rgba(95,105,5,1) 100%);
background: linear-gradient(to bottom, rgba(55,61,2,1) 0%, rgba(71,79,3,1) 41%, rgba(95,105,5,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373d02', endColorstr='#5f6905', GradientType=0 );
}

#navileiste { margin: auto; }
#navileiste .nav-item { margin-left: 0.2rem; background-color: transparent;  }
.navbar-dark .navbar-toggler { border-color: rgba(255, 255, 255, 0.5); }

.navbar-brand {
    margin: 0.65rem 0;
 }

body#start #willkommen h2 { color: white; }
body#satz_layout #willkommen h2 { color: white; }


#willkommen { color: white; background-color: #C06B00 /* Dunkles Orange */; }

#willkommen div,
#teaser-in { margin: 0 auto; padding: 2rem 20px 1rem 20px; 
                    background-color: #D87600 /* Orange */;  }

#willkommen div div { border-left: 2px solid white; margin: 0 0; padding: 0 0 0 20px; background-color: transparent; }

/*#willkommen, #willkommen div { 
    -webkit-box-shadow: inset 0px 14px 13px -5px rgba(0,0,0,0.35);
    -moz-box-shadow: inset 0px 14px 13px -5px rgba(0,0,0,0.35);
    box-shadow: inset 0px 14px 13px -5px rgba(0,0,0,0.35);    }
#willkommen div div { 
    -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;  }*/

#willkommen div div :first-child { margin-bottom: 0.15rem;  }
#willkommen div div h2 { margin-bottom: 0.15rem; letter-spacing: 0.1rem;  }
#willkommen div div h2 span { font-weight: 200; letter-spacing: 0.025rem;  }

body#start h1, body#satz_layout h1, body#rechtliches h1 { color: #869600 /* Olivegrün */; }
body#rechtliches h1 {margin-top: 1rem; }

body#start h2, body#start h3 { color: #de5400 /* Orange */; }
body#satz_layout h2, body#satz_layout h3 { color: #de5400 /* Orange */; }

body#rechtliches h2 { color: #1a507b /* Dunkelblau */; font-weight: 700; 
    font-size: 1.2em; letter-spacing: 0.05em; margin-top: 1rem; }

body#rechtliches h3 { color: #5F6905 /* Dunkles Olivegrün */; font-weight: 600; 
    font-size: 1.2em; letter-spacing: 0.05em; margin-top: 1rem;   }


body#start h1, body#start h2, body#start h3, 
body#satz_layout h1, body#satz_layout h2, body#satz_layout h3 { text-transform: uppercase; font-weight: 700; 
    font-size: 1.6em; letter-spacing: 0.05em; margin-left: -0.1rem; }
body#start section.mitteltext h2 { font-size: 1.6em;   } 


#teaser, .content, .mitteltext { color: #444; background-color: lightgray;  }
.container-fluid.content div.row { color: dimgrey; background-color: white; }

#teaser div, .mitteltext div {
    margin: 0 auto; padding: 1.15em 20px 2em 20px; 
    background-color: white; 
    }

#teaser div div, .mitteltext div div {
    border-left: 2px solid #1e5589  /* Hellblau */ !important; 
    margin: 0 0; padding: 0 0 0.5rem 20px; 
    }

/* Nur Firefox */
@-moz-document url-prefix() {
    #teaser div div.firefox-hack {
        border-left: 0 !important;
    }
}


h1, h2 { margin-bottom: 0.15rem; letter-spacing: 0.1rem;  }
h4 { margin-top: 1.2rem; color: #1a507b /* Dunkelblau */; font-weight: 700;  }
h5 { margin-top: 1.2rem; color: #5F6905 /* Dunkles Olivegrün */; font-weight: 700;  }

h4 { font-size: 1.25rem; }
h5 { font-size: 1.2rem; }
p, li { font-size: 1.1rem; }
#navileiste ul li { font-size: 1.1rem; }


#teaser p, .mitteltext p { margin-bottom: 0.5rem; }
#teaser ul, .mitteltext ul { margin-bottom: 0.8rem;    } 
.mitteltext li, #teaser li { margin-bottom: 0.3rem;  }

dl, ol, ul { margin-bottom: 0.5rem; }

/* Galerie */
    .container-fluid.content div.row.galerie { padding: 0; }
    .container-fluid.content div.row.galerie div { border: 1px solid white; background-color: #869600 /* Olivegrün */;  }
    .container-fluid.content div.row.galerie.galerie-breit div { background-color: lightgray; }
    .container-fluid.content div.row.galerie div img { display: block; margin: 0.8rem auto;  }

footer {
padding: 1rem 0 0.4rem 0;
background-color: #5F6905 /* Dunkles Olivegrün */;
color: whitesmoke; padding-bottom: 2rem;
}
footer a {color: yellow}
footer a:hover {color: yellow}
footer div.row { margin: 0 auto; }
footer p { margin-left: 1.7rem; margin-bottom: 0.3em; }
footer span.fa { font-size: 2rem; color: yellow; padding: 0.5rem; }
footer span.fa:hover { transition-duration: 300ms; color: white; }
footer p#topknopf { text-align: right; margin-right: 3.3rem; }

footer div.row div { margin: 0.5rem 0 0.7rem 0; }

body#ladefehler #willkommen a { color: yellow; }
body#ladefehler #willkommen a:hover { color: white; }
body#ladefehler  { background-color: #5F6905 /* Dunkles Olivegrün */; }


.tooltip-inner {
    max-width: 270px;
    padding: .25rem .5rem;
    color: #fff;
    text-align: center;
    background-color: #011727 /* ganz dunkles Blau */;
    border-radius: .25rem;
}
.tooltip.show {
    opacity: 1;
}
.navbar-toggler { margin-top: 0.6rem; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    h4 { font-size: 1.15rem; }
    h5 { font-size: 1.1rem; }
    p, li { font-size: 1.05rem; }
    footer p { font-size: 1.0rem; }
    .navbar { padding-left: 2rem; }
    body#start h1, body#start h2,
    body#satz_layout h1, body#satz_layout h2
    { font-size: 2em;  } 
    #willkommen div div h2 span { white-space: nowrap;  }
    .tooltip-inner { max-width: 360px; }

} /* ENDE @media (min-width:576px) */


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.2rem; }
    p, li { font-size: 1.15rem; }
    footer p { font-size: 1.0rem; }
    ul.navbar-nav { margin-top: 0.8rem; padding-bottom: 0.1rem; height: 2rem; }
    .navbar-nav li.active a { border-bottom: 2px solid white; }
    .navbar-nav li a:hover { border-bottom: 2px solid yellow; }
    .nav-link { padding: 0.2rem 1rem;  }
    footer p { margin-left: 1.8rem; }
    footer p#topknopf { text-align: right; margin-right: 0.3rem; }

} /* ENDE @media (min-width:768px) */


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    h4 { font-size: 1.35rem; }
    h5 { font-size: 1.3rem; }
    p, li { font-size: 1.25rem; }
    footer p { font-size: 1.1rem }

    #start #teaser div  { 
        background-image: url("../images/VolcanoRenderWebsite.jpg"); 
         background-position: bottom 40px right 29px;
/*         background-position: 94% 50%; 
  */      background-repeat: no-repeat 
        }

    #start #teaser div div  { background-image: none; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.85+0,0.81+54,0+100 */
background: -moz-linear-gradient(left,  rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.81) 54%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.81) 54%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.81) 54%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

    #teaser h3, #teaser h4, #teaser p, h1, #teaser ul { width: 75%;  }
    body#satz_layout #teaser h1 { width: 100%;  }

    #navileiste,
    #willkommen div, #teaser div, .mitteltext div,
    .container-fluid.content div.row.galerie, footer div.row { width: 990px;  }

    #willkommen div, #teaser div, .mitteltext div { padding-left: 1.8rem;  }
    #willkommen div div, #teaser div div, .mitteltext div div { width: 80%; padding-left: 20px; }
    .container-fluid.content div.row.galerie { margin: 0 auto; padding: 0 1.75rem;   }
    footer p { margin-left: 2.5rem; }
    footer div.letzteSpalte p { margin-left: 1.0rem; }

    footer p#topknopf { text-align: right; margin-right: 1.3rem; }
} /* ENDE @media (min-width:992px) */

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px){

    h4 { font-size: 1.4rem; }
    h5 { font-size: 1.35rem; }
    p, li { font-size: 1.3rem; }
    footer p { font-size: 1.2rem }
    body { font-size: 1.2rem; }
    #navileiste,
    #willkommen div, #teaser div, .mitteltext div,   
    .container-fluid.content div.row.galerie, footer div.row { width: 1122px;  }
    footer p#topknopf { text-align: right; margin-right: 3.3rem; }

} /* ENDE @media (min-width:1200px) */


#cookiedingsbums a {color:yellow; text-decoration:none;}
#cookiedingsbums a:hover {text-decoration:underline;}
#cookiedingsbums div {padding:10px; padding-right: 125px;}
#cookiedingsbums { 
   text-align: center; 
   border-top:1px solid #fff;
    color: white;
    background-color: rgba(0,29,69,0.80);
    position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:0.9rem; 
   line-height:16px;}

#cookiedingsbumsCloser {
   color: white;
/*   font: 1rem/100% arial, sans-serif;
*/  
    margin: 2px 4px 0 0 ;
    font-size: 1rem; 
    position: absolute;
   right: 5px;
   text-decoration: none;
   top: 5px;
   cursor:pointer; /*
   border-top:1px solid GAINSBORO; 
   border-left:1px solid GAINSBORO; 
   border-bottom:1px solid black; 
   border-right:1px solid black; */ 
   padding: 2px 6px 4px 6px;
   background-color: forestgreen; 
}

#cookiedingsbumsCloser:hover {
   background-color: darkgreen; 
/*    border-bottom:1px solid white; 
    border-right:1px solid white; 
    border-top:1px solid black; 
    border-left:1px solid black;}
*/