/* @___imp___ort url(https___://___fonts.googleapis.com/css?family=Kaushan+Script); */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: url('kaushan-script-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Kaushan Script'), local('KaushanScript-Regular'),
       url('kaushan-script-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('kaushan-script-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('kaushan-script-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('kaushan-script-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('kaushan-script-v6-latin-regular.svg#KaushanScript') format('svg'); /* Legacy iOS */
}


/* undo */
* { padding: 0; margin: 0; }
link, :visited { text-decoration: none; }
ul, ol { list-style-type: none; list-style-image: none }
h1, h2, h3, h4, h5, h6, pre, code { font-weight: normal; margin: 0; padding: 0; }
ul, ol, li, form, body, html, p, blockquote, fieldset, input, dl, dt, dd { margin: 0; padding: 0; }
img, a img, :link img, :visited img, fieldset { border: none; }
img { margin: 0; padding: 0; vertical-align: bottom; }
address { font-style: normal; }
table { margin: 0; padding: 0; border: none; border-spacing: 0; }
tr { margin: 0; padding: 0; border: none; }
td { margin: 0; padding: 0; vertical-align: top; border: none; border-spacing: 0; }
legend { display: none; }

a { outline: none; }

hr { clear: both; }


/* LISTS */
ul { list-style-type: none; margin: 0 0 1.0em 0; }
ul li { list-style-type: none; margin: 0; padding: 0; }
ol { margin: 0 0 1.0em 0; }
ol li { list-style-type: decimal; margin: 0; padding: 0; }


/* ----------------------------------------------------------------------------------
 Schriftgroesse fuers iPhone quer nicht vergroessern (Betrifft Absaetze, Listen, usw. aber keine Ueberschriften
---------------------------------------------------------------------------------- */ 
html, body { -webkit-text-size-adjust: none; }

/* ----------------------------------------------------------------------------------
 Vertikalen Scrollbalken immer einblenden
---------------------------------------------------------------------------------- */ 
html, body { height: 100%; }
html { overflow: scroll; overflow-x: auto; }


/* ----------------------------------------------------------------------------------
 Fuer responsive Webseiten
---------------------------------------------------------------------------------- */ 
img, object { max-width: 100%; height: auto; }


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


/* ----------------------------------------------------------------------------------
 Css-Formatierungen fuer Redaxo interne Module
---------------------------------------------------------------------------------- */ 
.flLeft { float: left; }
.flRight { float: right; }
.flClear { clear: both; }

.textLeft { text-align: left; }
.textCenter { text-align: center; }
.textRight { text-align: right; }

.small { font-size: small; }
.bold { font-weight: bold; }
.hide { display: none; }





html, body {
font-family: Tahoma, Arial, sans-serif; 
font-size: 18px; line-height: 30px; 
color: #5d5b5b;
/* 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: #F9F9F9;
}


/* ----------------------------------------------------------------------------------
   Schriften + Generelle CSS-Anpassungen fuer diese Webseite
---------------------------------------------------------------------------------- */ 
a { text-decoration: underline; color: #992908; }
a:hover { text-decoration: none; color: #999; }
a:active, a:focus { outline: 0; }
a:hover img, a:focus img { opacity: 0.8; }

/* Wählt nur Links aus, die ein Bild enthalten, damit der focus um das Bild liegt und nicht nur der line-height */
a:has(img) { display: inline-block; }

a:focus-visible,
button:focus-visible { outline: 2px solid blue; outline-offset: 3px; }

a.link_as_button { display: inline-block; padding: 5px 20px;
    text-decoration: none; color: #fff; background-color: #992908; }
a.link_as_button:hover,
a.link_as_button:focus { text-decoration: none; color: #fff; background-color: #999; }

ul { margin: 0 0 10px 0; }
ul li { list-style-type: disc; list-style-position: outside; margin: 0 0 10px 15px; padding: 0; }

h1, h2, h3, h4, h5, h6,
.like_h1, .like_h2, .like_h3, .like_h4, .like_h5, .like_h6 { font-family: 'Kaushan Script', Tahoma, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 14px; line-height: 20px; margin: 0 0 30px 0; color: #F39100; }
h1, .like_h1 { font-size: 42px; line-height: 50px; } 
h2, .like_h2 { font-size: 32px; line-height: 40px; } 
h3, .like_h3 { font-size: 24px; line-height: 30px; } 
h4, .like_h4 { font-size: 18px; } 
h5, .like_h5 { font-size: 14px; } 
h6, .like_h6 { font-size: 12px; } 

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { color: #fce1c1; font-weight: normal; }


em { font-style: italic; font-weight: 400; }
strong { font-weight: 700; }
p { margin: 0 0 20px 0; padding: 0;}
td { padding: 0 8px 6px 0; vertical-align: top; }

hr { clear: both; height: 1px; width: 100%; margin: 0 0 20px 0; border: none; background-color: #3d454c; } 
.small  { display: block; font-size: 13px; line-height: 16px; color: #333; font-style: italic; padding-top: 5px; } /* Bildunterschriften */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ----------------------------------------------------------------------------------
   CSS-Einstellungen fuer das Addon Modulhelper (bzw. bw_modulhelper)
---------------------------------------------------------------------------------- */ 
/* ------------ Outer Box ------------ */
/* Ausgangswerte: (Seitenbreite: 1920px | Abstand: 0px) */
.outer_box { clear: both; display: block; float: left; width: 100%; margin: 0; padding: 0; }
.box_width_1_2 { clear: none; width: 50%; }
.box_width_1_3 { clear: none; width: 33.333%; }
.box_width_2_3 { clear: none; width: 66.666%; }
.box_width_1_4 { clear: none; width: 25%; }

.outer_box_right { float: right; } 

@media all and (max-width:480px) {
.outer_box { clear: both; float: none; width: 100%; margin: 0; }
.box_width_full { width: 100%; margin: 0; }
} 

/* ----------------------------------------------------------------------------------
 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 .text { display: block; width: auto; max-width: 1200px; margin: 0 auto; padding: 60px 30px 30px 30px; }

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



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


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



.box_bg_red { background-color: #992908; color: #FFF; }
.box_bg_organge { background-color: #F39100; color: #FFF; }
.box_bg_blue { background-color: #075d9a; color: #FFF; }
.box_bg_green { background-color: #b1bc00; color: #FFF; }

.box_bg_red h1, .box_bg_red h2, .box_bg_red h3, .box_bg_red h4, .box_bg_red h5, .box_bg_red h6 { color: #F39100; }

.box_bg_organge h1, .box_bg_organge h2, .box_bg_organge h3, .box_bg_organge h4, .box_bg_organge h5, .box_bg_organge h6,
.box_bg_blue h1, .box_bg_blue h2, .box_bg_blue h3, .box_bg_blue h4, .box_bg_blue h5, .box_bg_blue h6,
.box_bg_green h1, .box_bg_green h2, .box_bg_green h3, .box_bg_green h4, .box_bg_green h5, .box_bg_green h6 
{ display: inline-block; width: auto; height: auto; margin: 0 0 20px 0; padding: 5px 10px; background-color: #FFF; background-color: rgba(255,255,255,0.8); color: #5d5b5b; font-weight: bold; }


.outer_box_inner .text { padding: 60px 45px 30px 45px; color: #FFF; font-size: 20px; line-height: 35px; }

.box_bg_red .outer_box_inner .image { margin: 0; }
.box_bg_red .outer_box_inner .text a { color: #FFF; }
.box_bg_red .outer_box_inner .text a:hover,
.box_bg_red .outer_box_inner .text a:focus { color: #FFF; text-decoration: underline; }



.outer_box.headline { text-align: center; }



#navigation_button { display: block; position: absolute; top: 50px; right: 30px; width: 53px; height: 53px; text-decoration: none; padding: 0; color: #FFF; background-image: url(mobile_menue.png); background-repeat: no-repeat; background-position: center center; z-index: 99; overflow: hidden; text-indent: -99999px; }
#navigation_button:hover, 
#navigation_button:focus { opacity: 0.8; }


#navigation > ul ul { overflow: hidden; max-height: 0; }
#navigation.active, #navigation > ul ul.active { max-height: 99999em; } 

#navigation { clear: both; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; max-height: 0; overflow: hidden; background-color: #992908; text-align: center; z-index: 100; }
#navigation ul { display: block; margin: 0; padding: 0; }
#navigation li { display: block; float: none; height: auto; margin: 0; padding: 0; border-left: none; }
#navigation li a { display: block; float: none; width: auto; margin: 0; padding: 10px 5px; font-size: 18px; line-height: 24px; border-bottom: 1px solid #FFF; color: #FFF; 
 text-align: center; text-decoration: none; }
#navigation li a:hover,
#navigation li a:focus { background-color: #f39100; color: #000; }
#navigation li a.rex-current,
#navigation li a.rex-active { background-color: #f39100; padding: 10px 10px 10px 15px; color: #000; }

/* Zweite Ebene */
#navigation ul.rex-navi2 { display: inherit; position: relative; top:auto; left: auto; }
#navigation ul.rex-navi2 li a { padding: 10px 5px; font-size: 15px; line-height: 18px; color: #FFF; background-color: #992908; }
#navigation ul.rex-navi2 li a:hover,
#navigation ul.rex-navi2 li a:focus { background-color: #f39100; }
#navigation ul.rex-navi2 li a.rex-current,
#navigation ul.rex-navi2 li a.rex-active { background-color: #f39100; }

 
/* 1.) Zum Anklicken bei Menuepunkten mit Submenue */
#navigation li.has-submenu > a:after { content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 10px 10px; }
#navigation li.has-submenu > a.active:after { content: "-"; }


/* CSS Animationen */
#navigation a { transition: all 0.125s ease-in; }
#navigation a:hover,
#navigation a:focus { transition: all 0.125s ease-out; }

@media all and (max-width:768px) {
#navigation_button { top: 20px; right: 10px; }
}

@media all and (max-width:480px) {
#navigation li a { font-size: 15px; line-height: 24px; }
}


/* ----------------------------------------------------------------------------------
   Ausrichtung der Seite und der <div>-Container (Reihenfolge von oben nach unten)
---------------------------------------------------------------------------------- */ 
#page_bg { display: block; position: relative; top: 0; left: 0; width: 1920px; height: auto; min-height: 100%; margin: 0 auto; padding: 0; z-index: 10; background-color: #FFF; }


/* Relative Bloecke innerhalb von "page" */
#page, #header_bg, #header, #navigation_bg, #navigation_not_responsive, #wrapper, #content, #footer_bg, #footer {
display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }

#page { }

#navigation_bg { z-index: 99; }
#navigation_not_responsive { display: none; }


#logo { padding: 40px 0; text-align: center; }
#logo a:hover, #logo a:focus { opacity: 0.8; }


#wrapper { width: 100%; min-height: 200px; margin: 0 auto; padding: 0; }

#content { padding: 0; }

#footer_bg { clear: both; padding: 0; background-color: #992908; background-image: url(kreis-footer.png); background-position: center bottom; background-repeat: no-repeat;  color: #FFF; overflow: hidden; }
#footer { clear: both; width: auto; padding: 30px 30px 60px 30px; color: #FFF; font-size: 15px; line-height: 30px; text-align: right; }
#footer a { display: inline-block; margin: 0 30px 0 0; color: #FFF; text-decoration: none; white-space: nowrap; font-weight: bold; }
#footer a:hover, #footer a:focus { color: #FFF; text-decoration: none; }



/* --- Cookie-Hinweis ohne OK-Button - Datenschutzinfo --- */ 
#datenschutzinfo { box-sizing: border-box; clear: both; display: block; width: 100%; height: auto; margin: 0; padding: 15px 10px; background-color: #333; font-size: 14px; line-height: 20px; color: #fff; text-align: center; }
#datenschutzinfo a { color: #fff; text-decoration: underline; }
#datenschutzinfo a:hover, #datenschutzinfo a:focus { color: #fff; text-decoration: none; }


/* ----------------------------------------------------------------------------------
   Module
---------------------------------------------------------------------------------- */ 
a.button,
.bild_hover_box a .button { display: block; width: 120px; height: auto; margin: 0 auto 30px auto; padding: 5px 0; text-align: center; text-decoration: none; color: #992908; background-color: #FFF; border: 1px solid #992908; }
a.button:hover,
a.button:focus,
.bild_hover_box a:hover .button,
.bild_hover_box a:focus .button { text-decoration: none; background-color: #992908; color: #FFF; border: 1px solid #FFF; }


.bild_hover_box { overflow: hidden; }
.bild_hover_box a { display: block; position: relative; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 10; }
.bild_hover_box a .button { display: none; }

/* .bild_hover_box_text { position: absolute; top: 0; left: 0; width: 100%; height: 75%; min-height: 20px; margin: 0; padding: 20% 0 5% 0; */
.bild_hover_box_text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 20px; margin: 0; padding: 0; z-index: 10; background-color: rgba(120,4,0,0.0); color: #FFF;  
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.bild_hover_box_text h3 { color: #FFF; }
.bild_hover_box a:hover .bild_hover_box_text,
.bild_hover_box a:focus .bild_hover_box_text { background-color: rgba(120,4,0,0.8); }
.bild_hover_box a:hover .button,
.bild_hover_box a:focus .button { display: block; }

.bild_hover_box a .text_1 { display: block; width: auto; height: auto; margin: 120px 30px 30px 30px; padding: 0; }
.bild_hover_box a .text_1 span { display: inline-block; width: auto; height: auto; margin: 0; padding: 5px 10px; background-color: #FFF; background-color: rgba(255,255,255,0.8); color: #5d5b5b; font-size: 24px; line-height: 30px; font-weight: bold; }
.bild_hover_box a .text_2 { display: block; width: auto; height: auto; margin: 0 30px 30px 30px; padding: 0; }
.bild_hover_box a .text_2 span { display: inline-block; width: auto; height: auto; margin: 0; padding: 5px 10px; background-color: #F39100; background-color: rgba(243,145,0,0.8); color: #FFF; }



.artikel_link_box { padding: 0 15px; padding: 60px 15px 30px 15px; text-align: center; }
.artikel_link_box h2 { margin: 0 0 5px 0; }
.artikel_link_box h3 { margin: 0 0 15px 0; }


.text_bild .image { text-align: center; }

.download_box { margin: 0 0 20px 0; padding: 20px 0 0 0; text-align: center; }
.download_box a { font-size: 15px; }


#article_nav { clear: both; width: auto; margin: 0 30px 20px 30px; text-align: center; }
#article_nav a { display: block; width: 120px; height: auto; margin: 0 auto 30px auto; padding: 5px 0; text-align: center; text-decoration: none; color: #992908; background-color: #FFF; border: 1px solid #992908; }
#article_nav a:hover,
#article_nav a:focus { text-decoration: none; background-color: #992908; color: #FFF; border: 1px solid #FFF; }


#article_nav_back, #article_nav_next, #article_nav_home { display: block; margin: 0; padding: 0; }
#article_nav_back { float: left; width: 120px; }
#article_nav_next { float: right; width: 120px; }
#article_nav_home { display: block; width: 120px; margin: 0 auto; }

.modul_13 { display: block; clear: both; background-color: #992908; }


.impressum_bild {  box-sizing: border-box; clear: both; display: table; width: 100%; max-width: 768px; margin: 0 auto 20px auto; padding: 0 20px; }    

.impressum_bild .impressum_bild_left,
.impressum_bild .impressum_bild_right { display: table-cell; vertical-align: bottom; }

.impressum_bild .impressum_bild_left { width: 100px; height: auto; }
    
.impressum_bild span.impressum_bild_title { display: block; margin: 0; }
.impressum_bild span.impressum_bild_copyright { display: block; margin: 0; color: #999; }


#page_1_headline { margin: 0; text-align: center; font-size: 52px; line-height: 60px; }


/* ----------------------------------------------------------------------------------
   Responsive Webdesign
---------------------------------------------------------------------------------- */ 
.breakpoint_over_1200 { clear: both; }
.breakpoint_under_1200 { clear: none; }

.image_sonderfall_2_3 { display: block; }
.image_sonderfall_1_2 { display: none; }

@media all and (min-width:1px) {
#page_bg { width: 100%; max-width: 1920px; min-width: 300px; overflow: hidden; }
}

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


}

@media all and (max-width:1200px) {
.breakpoint_over_1200 { clear: none; }
.breakpoint_under_1200 { clear: both; }

.image_sonderfall_2_3 { display: none; }
.image_sonderfall_1_2 { display: block; }

.box_width_1_3 { width: 50%; }
.box_width_2_3 { width: 50%; }
.box_width_1_4 { width: 50%; }

.bild_hover_box a .text_1 { margin: 60px 30px 30px 30px; }


html, body { font-size: 16px; line-height: 24px; }
	
h1, .like_h1 { font-size: 36px; line-height: 44px; } 
h2, .like_h2 { font-size: 28px; line-height: 34px; } 
h3, .like_h3 { font-size: 22px; line-height: 28px; } 
	
#page_1_headline { font-size: 46px; line-height: 54px; }


.outer_box .text { padding: 45px 20px 5px 20px; }
.outer_box_inner .text { padding: 45px 20px 5px 20px; }

}

@media all and (max-width:980px) {

html, body { font-size: 15px; line-height: 24px; }
	
h1, .like_h1 { font-size: 30px; line-height: 36px; } 
h2, .like_h2 { font-size: 24px; line-height: 30px; } 
h3, .like_h3 { font-size: 18px; line-height: 24px; } 
	
#page_1_headline { font-size: 40px; line-height: 46px; }

.bild_hover_box a .text_1 { margin: 45px 25px 20px 25px; }
.bild_hover_box a .text_1 span { font-size: 21px; line-height: 27px; }
.bild_hover_box a .text_2 { margin: 0 25px 20px 25px; }

}

@media all and (max-width:768px) {
.outer_box { clear: both; float: none; width: auto; margin: 0; }

.outer_box .text { padding: 30px 15px 1px 15px; }
.outer_box_inner .text { padding: 30px 15px 1px 15px; }


#logo { padding: 20px 80px 20px 10px; text-align: center; }

#footer { padding: 15px 30px 90px 30px; text-align: center; }
#footer a { margin: 0 15px; }

.bild_hover_box a .text_1 { margin: 30px 20px 15px 20px; }
.bild_hover_box a .text_1 span { font-size: 18px; line-height: 24px; }
.bild_hover_box a .text_2 { margin: 0 20px 15px 20px; }

} 


@media all and (max-width:480px) {
	

#page_1_headline { font-size: 30px; line-height: 36px; } 

.outer_box .text { padding: 20px 10px 1px 10px; }
.outer_box_inner .text { padding: 20px 10px 1px 10px; font-size: 16px; line-height: 25px; }

.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; }

#article_nav { margin: 0 10px 20px 10px; }
#article_nav_home { clear: both; display: block; width: 120px; margin: 0 auto; }


.bild_hover_box a .text_1 { margin: 20px 10px 10px 10px; }
.bild_hover_box a .text_1 span { font-size: 18px; line-height: 24px; }
.bild_hover_box a .text_2 { margin: 0 10px 10px 10px; }

}
