@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200&display=swap');

/* Import von weiteren CSS-Dateien */
@import url("default-settings.css");

* { box-sizing: border-box; }


html, body {
font-family: 'Fira Sans', Arial, Helvetica, sans-serif; font-weight: 200;
font-size: 18px; line-height: 25px;
color: #000;
/* Woerter in die naechste Zeile umbrechen, wenn sie ansonsten das umschliessende Element verlassen wuerden. */
word-wrap:break-word;
height: 100%;
}
html { overflow: scroll; overflow-x: auto; background-color: #fffff0; }



/* ----------------------------------------------------------------------------------
   Schriften + Generelle CSS-Anpassungen fuer diese Webseite
---------------------------------------------------------------------------------- */ 

a { text-decoration: underline; color: #816717; }
a:hover { text-decoration: none; color: #000; }
a:active, a:focus { outline: 0; }
a:hover img { opacity: 0.7; }

ul { margin: 0 0 20px 0; }
ul li { list-style-type: disc; margin: 0 0 5px 18px; padding: 0; }
ol li { list-style-type: decimal; margin: 0 0 5px 18px; padding: 0; }

h1, h2, h3, h4, h5, h6{ font-weight: 400; font-style: normal; font-size: 18px; line-height: 30px; margin: 0 0 15px 0; color: #816717; }
h1 { font-size: 40px; line-height: 50px; }
h2 { font-size: 30px; line-height: 40px; }
h3 { font-size: 25px; line-height: 35px; } 
h4 { font-size: 18px; } 
h5 { font-size: 16px; } 
h6 { font-size: 14px; } 

p { margin: 0 0 20px 0; padding: 0; }
td { padding: 0 8px 6px 0; vertical-align: top; }

hr { clear: both; display: block; width: 93.75%; height: 3px; margin: 0 0 20px 3.13%; border: none; background-color: #f6e1cc; } 
.small  { display: block; font-size: 13px; line-height: 20px; color: #FFF; padding-top: 5px; } /* Bildunterschriften */

strong, b { font-weight: bold; }

/* ----------------------------------------------------------------------------------
   CSS-Einstellungen fuer das Addon Modulhelper (bzw. bw_modulhelper)
---------------------------------------------------------------------------------- */ 
/* ------------ Outer Box ------------ */
/* Ausgangswerte: (Seitenbreite: 830px | Abstand: 30px) */
.outer_box { clear: both; display: block; float: left; width: 93.75%; margin: 0 0 20px 3.13%; padding: 0; }

.box_width_full { width: 100%; margin: 0 0 20px 0; }
.box_width_1_2 { clear: none; width: 45.31%; }
.box_width_1_3 { clear: none; width: 29.17%; }
.box_width_2_3 { clear: none; width: 61.47%; }
.box_width_1_4 { clear: none; width: 21.09%; }
.box_width_3_4 { clear: none; width: 69.53%; } 

.box_gray { background-color: #bcc2d1; color: #707070; } .box_gray * { color: #707070; }
.box_orange { background-color: #fdc400; color: #707070; } .box_orange * { color: #707070; }

.outer_box_inner { display: block; padding: 20px 20px 1px 20px; }
.outer_box_inner .image { margin: 0 !important; }

.headline_box { margin-bottom: 0 !important; }



/* ----------------------------------------------------------------------------------
 Clearfix, um das Floating innerhalb der Container aufzuheben fuer Firefox, IE8, Opera, Safari, etc.
---------------------------------------------------------------------------------- */ 
.outer_box_inner:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* + html .outer_box_inner { display: inline-block; } /* fuer IE7 */
* html .outer_box_inner { height: 1%; } /* fuer IE6 */


.outer_box .image { margin: 0 0 5px 0; }
.outer_box .image a { text-decoration: none !important; }
.outer_box .image a:hover { opacity: 0.8; }


/* ------------ Moduleinstellungen ------------ */
.text_bild .flLeft { float: left; display: block; width: auto; max-width: 180px; margin: 0 15px 0 0; overflow: hidden; }
.text_bild .flRight { float: right; display: block; width: auto; max-width: 180px; margin: 0 0 0 15px; overflow: hidden; }
.text_bild .image span.small { display: block; }

.zweispalter { }
.zweispalter .flLeft { float: left; display: block; width: 47.69%; margin: 0; overflow: hidden; }
.zweispalter .flRight { float: right; display: block; width: 47.69%; margin: 0; overflow: hidden; }

/* ----------------------------------------------------------------------------------
   Ausrichtung der Seite und der <div>-Container (Reihenfolge von oben nach unten)
---------------------------------------------------------------------------------- */ 

/* Relative Bloecke */
#page, #header, #galerie_container, #galerie, #content, #footer_bg, #footer {
display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }


#header { position: fixed; height: auto; margin: 0; padding: 15px 20px; z-index: 10000; 
background-color: #fffff0; box-shadow: 0 0 5px 0 #999; } 
#header a { display: inline-block; margin: 0 20px 0 0; color: #000; text-decoration: none; font-size: 26px; line-height: 32px; }
#header a:hover { color: #999; text-decoration: none; }

#header span.header_mobil_break { display: none; }
#header a#logo { }
#header a#email { font-size: 16px; line-height: 32px; }
#header a#aktuell { position: absolute; display: block; top: 15px; left: auto; right: 20px; margin: 0; }


#page { width: 100%; height: auto; min-height: 100vh; margin: 0; }



#footer_bg { clear: both; width: 100%; margin: 0; padding: 15px 0; background-color: transparent; }

#footer { padding: 0 20px; }
#footer a { display: inline-block; margin: 0 15px 0 0; font-size: 14px; line-height: 25px; color: #000; text-decoration: none; }
#footer a:hover { color: #999; text-decoration: none; }



/* Ebene 1 - Startseite */
#page_1 #header { background-color: transparent; box-shadow: none; } 
#page_1 #header a { color: #fffff0; }
#page_1 #header a:hover { color: #000; }

#page_1 #footer_bg { position: absolute; top: auto; bottom: 0; }
#page_1 #footer_bg a { color: #fffff0; }
#page_1 #footer_bg a:hover { color: #000; }

#startseite { display: block; position: relative; top: 0; left: 0; width: 100%; height: 100%; min-height: 100vh; margin: 0; padding: 0; z-index: 10; background-image: url(starseite_hintergrund.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; }

#startseite a { display: block; position: absolute; top: 55%; left: 25%; width: 80px; height: auto; margin: 0; padding: 0; z-index: 10; background-image: url(schluesselloch_hover.png); background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; }

#startseite a:hover img { opacity: 0; }


/* Ebene 2 - Galerie */
#galerie_container { width: 100%; height: 100%; min-height: 100vh; margin: 0;  }
#galerie { width: 100%; height: 100%; min-width: 100vw; min-height: 100vw; margin: 0; padding: 0; z-index: 10; background-color: #fffff0; }  

#galerie_buttons,
#mobile_galerie_buttons { display: block; position: absolute; top: 65px; left: auto; right: 10px; width: 40px; height: auto; margin: 0; padding: 10px 0 1px 0; z-index: 100; text-align: center; 
/* background-color: #f0f0f0; box-shadow: 0 0 5px 0 #999; */ }

#galerie_buttons button,
#mobile_galerie_buttons button { display: block; width: 40px; height: 40px; margin: 0 0 10px 0; padding: 0; background-color: transparent; color: #fff; border: none; white-space: nowrap; background-position: center; background-repeat: no-repeat; background-size: cover; text-indent: -99999px; overflow: hidden; }
#galerie_buttons button:hover,
#mobile_galerie_buttons button:hover { opacity: 0.75; }


#zoom-in,
#mobile_zoom-in { background-image: url(icon_zoom_in.jpg); }
#zoom-out,
#mobile_zoom-out { background-image: url(icon_zoom_out.jpg); }
#reset,
#mobile_reset { background-image: url(icon_reset.jpg); }

#mobile_galerie_buttons { display: none; top: 0; width: 25px; padding: 8px 0 1px 0; }
#mobile_galerie_buttons button { width: 25px; height: 25px; margin: 0 0 5px 0; }




/* Ebene 3 - Detailseite */

#detailseite { padding: 65px 0 0 0; }

#detailseite_image_bg,
#detailseite_video_bg { clear: both; display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 60px 0; }
#detailseite_image { clear: both; display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 60px 0; } 

#detailseite_image img { width: 100%; max-width: none; } 

#detailseite_headline,
#detailseite_text { clear: both; display: block; max-width: 1200px; margin: 0 auto 20px auto; padding: 0; }

#detailseite_text { font-size: 21px; line-height: 30px; } 

#detailseite_headline .outer_box,
#detailseite_text .outer_box { float: none; margin-bottom: 0; } 
#detailseite_text .outer_box { max-width: 768px; }

#detailseite_nav { clear: both; display: block; width: auto; margin: 0 3.13%; padding: 100px 0 40px 0; }
#detailseite_nav_home { margin: 0; text-align: center; }
#detailseite_nav a { display: inline-block; margin: 0; padding: 0; color: #fff; text-decoration: none; }
#detailseite_nav a:hover { opacity: 0.75; color: #fff; text-decoration: none; }




/* Inhaltsseiten */
#content { max-width: 1200px; margin: 120px auto 60px auto; padding: 0; }



/* ----------------------------------------------------------------------------------
   Module
---------------------------------------------------------------------------------- */ 

.galerie_box { display: block; position: absolute; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 10; }

.galerie_box a,
.galerie_box a img { display: block; width: 100%; height: auto; margin: 0; padding: 0; }


.galerie_video_responsive,
.video_responsive {
display: block; position: relative; top: 0; left: 0; width: 100%; height: 0; 
padding: 0 0 56.25% 0; /* Default for 1600x900 videos 16:9 ratio*/
overflow: hidden;
}

.galerie_video iframe,
.video_responsive iframe { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }




/* ----------------------------------------------------------------------------------
   Responsive Webdesign
---------------------------------------------------------------------------------- */
@media all and (min-width:1px) {
#header, #page, #footer_bg { width: 100%; min-width: 300px; overflow: hidden; }

}

@media all and (max-width:1600px) {
/* mit dem Setzen der Breite auf geht das reponsive Webdesign erst richtig los */
#header, #page, #footer_bg  { width: 100%; min-width: 300px; overflow: hidden; }

}


@media all and (max-width:640px) {
html, body { font-size: 18px; line-height: 24px; }
    
h1 { font-size: 32px; line-height: 40px; }
h2 { font-size: 26px; line-height: 35px; }
h3 { font-size: 20px; line-height: 30px; } 
    
#detailseite_text { font-size: 18px; line-height: 24px; } 
    
.outer_box { clear: both; float: none; width: 93.75%; margin: 0 0 20px 3.13%; }
    
.text_bild .flLeft,
.text_bild .flRight { float: none; width: auto; max-width: none; margin: 0 0 15px 0; }

.zweispalter { background-image: none; }
.zweispalter .flLeft { float: none; width: auto; margin: 0 0 15px 0; }
.zweispalter .flRight { float: none; width: auto; margin: 0; }
    
#header { padding: 15px 60px 15px 3.13%; }
#header span.header_mobil_break { display: block; }
#header a#logo { display: inline-block; margin: 0 0 15px 0; font-size: 25px; line-height: 30px; }
#header a#email,
#header a#aktuell { display: inline-block; font-size: 15px; line-height: 25px; }    
#header a#email { margin: 0 10px 0 0; }
#header a#aktuell { position: static; top: 0; left: 0; right: auto; }
    
#footer { padding: 0 3.13%; }
#footer a { font-size: 15px; line-height: 20px; }
    
/* Ebene 1 */
#startseite a { top: 52%; left: 25%; width: 50px; }
    
/* Ebene 2 */
#page_2 #page { padding: 10vh 0 0 0; }
#galerie_container { min-height: 90vh; margin: 0; }    
#galerie_buttons { display: none; }
#mobile_galerie_buttons { display: block; }
    
/* Ebene 3 */
#detailseite { padding: 100px 0 0 0; }
    
    

}