/* --- undo --- */
html, body, div, span, a, h1, h2, h3, h4, h5, h6, p, blockquote, img, 
ol, ul, li, input, textarea, label, select, table, tbody, thead, tfoot, tr, th, 
td, footer, header, menu, nav, section, video { padding: 0; margin: 0; box-sizing: border-box; }

html, body, p, form, input, textarea { margin: 0; padding: 0; }
img, a img, :link img, :visited img, fieldset, button { border: none; outline: none; }
a:visited { text-decoration: none; }
img { margin: 0; padding: 0; vertical-align: bottom; }
table { margin: 0; padding: 0; border: none; border-spacing: 0; }
tr { margin: 0; padding: 0; border: none; border-spacing: 0; }
td { margin: 0; padding: 0; border: none; border-spacing: 0; vertical-align: top; }
hr { clear: both; }

ul { list-style-type: disc; list-style-image: none; margin: 0 0 1.0em 0; }
ul li { list-style-type: disc; margin: 0 0 0.5em 1em; padding: 0; }
ol { list-style-type: decimal; list-style-image: none; margin: 0 0 1.0em 0; }
ol li { list-style-type: decimal; margin: 0 0 0.5em 1em; padding: 0; }


html, body { 
height: 100%; /* Vertikalen Scrollbalken immer einblenden */ 
word-wrap:break-word; /* Woerter in die naechste Zeile umbrechen, wenn sie das umschliessende Element verlassen */
min-width: 300px;
}
html { overflow: scroll; overflow-x: auto; }

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

/*  Clearfix, um das Floating innerhalb der Container aufzuheben */ 
.clearfix:after,
.outer_box_inner:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; line-height: 0; }

/* Css-Formatierungen interne Module */ 
.flLeft { float: left; }
.flRight { float: right; }
.flClear { clear: both; }
.center { text-align: center; }
.small { font-size: small; }
.bold { font-weight: bold; }
.hide { display: none; }
.textLeft { text-align: left; }
.textCenter { text-align: center; }
.textRight { text-align: right; }


/* Quelle: htt+++ps://goog+++le-webfonts-help+++er.heroku+++app.com/fonts/pt-sans?sub+++sets=latin */
/* pt-sans-regular - latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/pt-sans-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('PT Sans'), local('PTSans-Regular'),
       url('fonts/pt-sans-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/pt-sans-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/pt-sans-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/pt-sans-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/pt-sans-v11-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-700 - latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/pt-sans-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Bold'), local('PTSans-Bold'),
       url('fonts/pt-sans-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/pt-sans-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/pt-sans-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/pt-sans-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/pt-sans-v11-latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}


html, body {
font-family: 'PT Sans', Arial, Helvetica, sans-serif; font-weight: 400;
font-size: 18px; line-height: 30px;
color: #707070;
/* 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: #f4eedb; }


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

a { text-decoration: none; color: #cb6800; }
a:hover, a:focus { text-decoration: none; color: #606980; }
a:active, a:focus { outline: 0; }

/* Waehlt 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:hover img, a:focus img { opacity: 0.8; }

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

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,
.like_h1, .like_h2, .like_h3, .like_h4, .like_h5, .like_h6 { font-weight: 400; font-style: normal; font-size: 18px; line-height: 30px; margin: 0 0 15px 0; color: #816717; }
h1, .like_h1 { font-size: 40px; line-height: 50px; }
h2, .like_h2 { font-size: 30px; line-height: 40px; }
h3, .like_h3 { font-size: 25px; line-height: 35px; } 
h4, .like_h4 { font-size: 18px; } 
h5, .like_h5 { font-size: 16px; } 
h6, .like_h6 { font-size: 14px; } 

h1 span { display: inline-block; margin: 0 0 0 50px; padding: 0 100px; font-size: 38px; line-height: 40px; color: #5f5f65; background-image: url(headline_subline.png); background-position: left top; background-repeat: repeat-x; }
h1 span span { display: inline-block; margin: 0; padding: 0 15px; background-image: none; background-color: #fbf9f3; }

h1.headline_3_striche,
h2.headline_3_striche,
h2 { display: inline-block; padding: 0 0 20px 0; background-image: url(headline_3_striche.png); background-position: center bottom; background-repeat: no-repeat; }

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: 700; }

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

.outer_box { width: 81.22%; margin: 0 0 20px 9.39%; }

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


.box_gray { background-color: #868686; color: #707070; } .box_gray * { color: #707070; }
.box_orange { background-color: #c77b0d; color: #707070; } .box_orange * { color: #707070; }
.box_brown_light { background-color: #947e3a; 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, .outer_box .image a:focus { 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)
---------------------------------------------------------------------------------- */ 
#page_bg { position: relative; top: 0; left: 0; width: 100%; height: auto; min-height: 100%; margin: 0; padding: 0; z-index: 1; }

/* Relative Bloecke innerhalb von "page" */
#page, #header_bg, #header, #logo, #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 { width: 1600px; min-height: 100vh; margin: 0 auto; background-color: #fbf9f3; }

#nav_and_logo_box { display: block; position: absolute; top: 20px; left: auto; right: 20px; width: 220px; height: auto; margin: 0; padding: 0; z-index: 100; text-align: center; }

a#navigation_button { display: block; width: 40px; height: 40px; margin: 20px auto 30px auto; padding: 0; z-index: 10000; background-image: url(mobile_menue.png); background-repeat: no-repeat; background-position: center; text-indent: -99999px; overflow: hidden; }
a#navigation_button:hover, a#navigation_button:focus{ opacity: 0.8; }

#nav_and_logo_box #logo { display: none; }

#header_bg { padding: 20px 0; }
#header { width: auto; margin: 0 20px; }
#header_image { padding: 0 220px 0 0; }

#header_logo_box { display: block; position: absolute; top: 0; left: auto; right: 0; width: 220px; height: 100%; margin: 0; padding: 80px 0 0 0; z-index: 100; background-color: #4a3e2a; text-align: center; }


#wrapper { }
#content { min-height: 400px; padding: 40px 0 20px 0; }


#footer_bg { clear: both; width: 1600px; margin: 0 auto;  padding: 0; background-color: #4a3e2a; background-image: url(footer.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }

#footer { }

.footer_nav { display: block; position: absolute; top: auto; bottom: 0; left: 1.56%; width: 480px; height: auto; margin: 0; padding: 0; z-index: 10; }

.footer_nav a { display: inline-block; margin: 2px -5px 0 0; padding: 5px 20px; background-color: rgba(144,144,16,0.85); color: #FFF; text-decoration: none; text-transform: uppercase; }
.footer_nav a:hover, .footer_nav a:focus { background-color: #909010; color: #fff; text-decoration: none; }

#footer_link { display: block; width: 220px; height: auto; margin: 0 1.56% 0 auto; padding: 20px 20px 40px 20px; z-index: 10; background-color: #4a3e2a; }

#footer_link a { display: block; margin: 0; padding: 5px 20px; color: #a9a8a3; text-decoration: none; border: 1px solid #a9a8a3; }
#footer_link a span { font-size: 0.8em; }
#footer_link a:hover, #footer_link a:focus { color: #FFF; text-decoration: none; background-color: #816717; }

#footer_link a span.footer_orange { color: #c77b0d; }
#footer_link a span.footer_orange:hover, #footer_link a span.footer_orange:focus { color: #c77b0d; }


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


/* Startseite */
#page_1 { background-color: #574831; }

#page_1 #startseite_sidebar { display: block; position: absolute; top: 0; left: auto; right: 0; width: 240px; height: auto; min-height: 100vh; margin: 0; padding: 80px 0 0 0; z-index: 10; background-color: #4a3e2a; text-align: center; border: 20px solid #fbf9f3;
border-left: none; }

#page_1 .startseite_linkbox { display: block; position: absolute; top: auto; left: 0; width: auto; margin: 0; padding: 0; z-index: 10; } 

#page_1 #startseite_linkbox_1 { bottom: 210px; }
#page_1 #startseite_linkbox_2 { bottom: 40px; }


#page_1 .startseite_linkbox a { display: block; position: relative; top: 0; left: auto; left: -220px; width: 360px; height: 146px; margin: 0; padding: 10px; z-index: 10; color: #FFF; text-decoration: none; text-align: right; text-transform: uppercase; }
#page_1 .startseite_linkbox a:hover, #page_1 .startseite_linkbox a:focus { color: #FFF; text-decoration: none; }


#page_1 #startseite_linkbox_1 a { background-color: rgba(102,116,29,0.85); }
#page_1 #startseite_linkbox_1 a:hover , #page_1 #startseite_linkbox_1 a:focus { background-color: #66741d; }
#page_1 #startseite_linkbox_2 a { background-color: rgba(199,123,12,0.85); }
#page_1 #startseite_linkbox_2 a:hover, #page_1 #startseite_linkbox_2 a:focus { background-color: #c77b0c; }

#page_1 .startseite_linkbox a img { display: block; position: absolute; top: 10px; left: 10px; width: 200px; }
#page_1 .startseite_linkbox a:hover img, #page_1 .startseite_linkbox a:hover img1 { opacity: 1; }

#page_1 .startseite_linkbox a span {  display: block; position: absolute; top: auto; bottom: 10px; left: auto; right: 10px; width: 120px; background-image: url(startseite_linkbox_pfeil.png); background-position: center left; background-repeat: no-repeat; }


#page_1 #startseite_footer { left: 20px; bottom: 20px; }


#bwd_website_bg_img { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1; }

#bwd_website_bg_img div { 
display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1;
background-repeat: no-repeat; background-position: center center; background-size: cover; 
border: 20px solid #fbf9f3; 
}






/* navigation */
a#navigation_close { display: block; position: absolute; top: 20px; left: auto; right: 80px; width: 40px; height: 40px; margin: 0; padding: 0; z-index: 10000; background-image: url(navigation_close.png); background-repeat: no-repeat; background-position: center; z-index: 10000; text-indent: -99999px; overflow: hidden; }

a#navigation_close:hover, a#navigation_close:focus { opacity: 0.8; }

#navigation_box { display: none; position: fixed; top: 0; left: 0; width: 100%; min-width: 300px; height: 100%; margin: 0; padding: 0; z-index: 10000; background-color: #816717; overflow-y: auto; border: 20px solid #FFF; }
	

#navigation { clear: both; position: relative; top: 0; left: 0; width: auto; height: auto; margin: 0 30px; padding: 0; z-index: 9999; text-align: center; }

#navigation ul { display: block; margin: 0; padding: 15% 0 0 0; }
#navigation ul li { display: block; width: auto; height: auto; margin: 0 0 30px 0; padding: 0; }
#navigation ul li a { display: inline-block; width: auto; height: auto; margin: 0 0 10px 0; padding: 5px 20px; font-size: 18px; line-height: 20px; border: 1px solid #fff; color: #fff; text-transform: uppercase; }
#navigation ul li a:hover, #navigation ul li a:focus { color: #000; }
#navigation ul li a.rex-current,
#navigation ul li a.rex-active { color: #000; }

/* Zweite Ebene */
#navigation ul.rex-navi2 { display: block; margin: 0; padding: 0; }
#navigation ul.rex-navi2 li { margin: 0;  }
#navigation ul.rex-navi2 li a { font-size: 15px; line-height: 20px; color: #fff; border: none; }
#navigation ul.rex-navi2 li a:hover, #navigation ul.rex-navi2 li a:focus { color: #000; }
#navigation ul.rex-navi2 li a.rex-current,
#navigation ul.rex-navi2 li a.rex-active { color: #000; }


/* Dritte Ebene */
#navigation ul.rex-navi3 { display: none; }


#navigation a.navigation_telefon { font-size: 18px; line-height: 20px; color: #fff; border: none; }
#navigation a.navigation_telefon:hover, #navigation a.navigation_telefon:focus { color: #000; }




/* ----------------------------------------------------------------------------------
   Module
---------------------------------------------------------------------------------- */ 
/*
#google_map_iframe iframe { width: 100% !important; border: none !important; }

.video { clear: both; display: block; position: relative; top: 0; left: 0; width: 100%; height: 0; margin: 0 0 20px 0; padding: 30px 0 56.25% 0; overflow: hidden; }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none !important; }
*/


.modul_40 { display: block; clear: both; width: 96.88%; margin: 0 1.56% 30px 1.56%; background-color: #868686; color: #FFF; } .modul_40 * { color: #FFF; }
.modul_40.bg_grau { background-color: #868686; }
.modul_40.bg_orange { background-color: #c77b0d; }
.modul_40.bg_hellbraun { background-color: #947e3a; }


.modul_40_left { float: left; width: 50%; margin: 0; padding: 0; }
.modul_40_right { float: right; width: 46.88%; margin: 0 1.56% 0 0; padding: 0; }
.modul_40_left .text { display: block; padding: 50px 30px 10px 30px; }
.modul_40_right .image { display: block; margin: 0; padding: 0; }

.modul_40_right_bg_image { background-position: center; background-repeat: no-repeat; background-size: cover; }
.modul_40_right_bg_image img { opacity: 0; }

.modul_40_left .text h3 { display: inline-block; padding: 5px 15px; background-color: #4a3e2a; color: #fff; font-size: 40px; line-height: 50px; font-weight: 400; }
.modul_40_left .text h3.color_white { color: #fff; }
.modul_40_left .text h3.color_brown { margin: 0 0 40px 0; color: #816717; }

@media all and (max-width:1200px) 
{ 
.modul_40_left .text h3 { font-size: 35px; line-height: 45px; }    
}
@media all and (max-width:980px) 
{ 
.modul_40_left .text h3 { font-size: 30px; line-height: 40px; }    
}

@media all and (max-width:768px) 
{ 
.modul_40_left,
.modul_40_right { clear: both; float: none; width: 100%; margin: 0; padding: 0; }
    
.modul_40_right_bg_image { background-image: none !important; }
.modul_40_right_bg_image img { opacity: 1; }    

.modul_40_left .text h3 { font-size: 25px; line-height: 35px; }        
}


/*
a.linkbutton { display: inline-block; width: auto; margin: 0 0 20px 0; padding: 5px 15px 5px 50px; font-size: 20px; line-height: 30px; background-color: #c77b0d; color: #ee720e; text-decoration: none; background-image: url(linkbutton.png); background-position: center left; background-repeat: no-repeat; }
a.linkbutton:hover { background-color: #868686; color: #ee720e; text-decoration: none; }
*/

a.linkbutton { display: inline-block; width: auto; margin: 0 0 20px 0; padding: 5px 25px; font-size: 20px; line-height: 30px; background-color: transparent; color: #707070; text-decoration: none; border: 2px solid #4a3e2a; }
a.linkbutton span { color: #816717; margin: 0 0 0 10px; }
a.linkbutton:hover, a.linkbutton:focus { background-color: #f0f0f0; color: #707070; text-decoration: none; }
a.linkbutton:hover span, a.linkbutton:focus span { color: #816717; }


.bildergalerie { clear: both; display: block; }
.bildergalerie a { display: block; float: left; width: 23.05%; margin: 0 0 1.56% 1.56%; padding: 0; }
.bildergalerie a img { display: block; width: 100%; padding: 2%; border: 1px solid #868686; }
.bildergalerie a:hover img , .bildergalerie a:focus img { background-color: #c77b0d; border: 1px solid #868686; }


/* ------ yform ------ */
.yform div.alert { padding: 15px 30px 5px 30px; margin-bottom: 20px; border-radius: 4px; }
.yform div.alert span { margin-right: 15px; }
.yform div.alert-danger { border: 2px solid #a94442; background-color: #f2dede; color: #a94442; }
.yform .alert ul { list-style-type: none; margin: 0; padding: 0; }
.yform .alert li { list-style-type: none; margin: 0 0 10px 0; padding: 0; color: #a94442; }

.has-error label { color: #a94442; }

.yform form { display: block; margin: 0 0 20px 0; padding: 0; }
.yform label { display: block; }
.yform form.hide-label label { display: none; }

.yform .form-control {
    box-sizing: border-box; 
	display: block;	width: 99%; height: auto; margin: 0 0 20px 0; padding: 5px 10px;
    font-family: inherit; font-size: 14px; line-height: 20px; color: #000;
	background-color: #fff; border: solid 1px #dfe6e7; border-radius: 5px; box-shadow: none;
    outline: none;
}
.yform .form-control:hover { border-color: #a8aeb5; }
.yform .form-control:focus { border-color: #37434f; outline: none; box-shadow: none; }



.yform .formcheckbox label { display: block; float: none; width: auto; margin: 0 0 10px 0; padding: 0; }
.yform .formcheckbox label input { display: block; float: left; width: auto; margin: 0 10px 0 0; }
.yform .formcheckbox label span { display: block; float: none; width: auto; margin: 0 0 5px 30px; }

.yform .form-check-group { clear: both; margin: 0 0 20px 0; }
.yform .form-check-group .control-label { clear: both; display: block; margin: 0 0 10px 0; }

.yform .radio { display: block; float: none; width: auto; margin: 0 0 10px 0; padding: 0; }
.yform .radio label input { display: block; float: left; width: auto; margin: 5px 10px 0 0; }

.yform .checkbox { clear: both; margin: 0 0 20px 0; }
.yform .checkbox label input { display: block; float: left; width: auto; margin: 5px 10px 0 0; }


.yform .pflichtfelder { font-size: 0.8em; }

/* Honeypot gegen SPAM */
#yform-contact_formular-email_betreff { display: block; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; }
#yform-contact_formular-email_betreff.has-error { display: block; width: auto; height: auto; margin: 0 0 20px 0; padding: 20px 20px 1px 20px; border: 1px solid #a94442; opacity: 1; background-color: #f0f0f0; color: #a94442; }
#yform-contact_formular-email_betreff.has-error label { display: block !important; margin-bottom: 10px !important; }


/* Button */
.yform .btn-primary {
	clear: both; display: block; width: 140px; height: auto; margin: 0 0 10px 0; padding: 5px;
    border: none; border-radius: 5px;
    text-align: center; font-weight: bold; 
    background-color: #4a3e2a; color: #FFF; 
}
.yform .btn-primary:hover, .yform .btn-primary:focus { opacity: 0.5; }


/* eigene CSS Klassen */
.form_clear { clear: both; }

.form_left,
.form_right { display: block; float: left; width: 49%; margin: 0; padding: 0; }
.form_left { clear: both; }
.form_right { float: right; }

.form_left label,
.form_right label { display: none; }
.form-check-group label { display: inline-block; }



@media all and (max-width:768px) {
.form_left,
.form_right { float: none; width: auto; }
    
}






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

#page_1 #page { width: 100%; margin: 0; }
}

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

}

@media all and (max-width:1200px) {
    
#nav_and_logo_box { width: 18.33%;  }
#header_image { padding: 0 18.33% 0 0; }

#header_logo_box { width: 18.33%; padding: 70px 10px 0 10px; }
    
}

@media all and (max-width:980px) {
html, body { font-size: 16px; line-height: 25px; }

h1, .like_h1,
h2, .like_h2 { font-size: 36px; line-height: 40px; }
h1 strong,
h2 strong { font-size: 30px; line-height: 35px; }	

}

@media all and (max-width:768px) {
.outer_box { clear: both; float: none; width: 93.75%; margin: 0 0 20px 3.13%; }
    
/* navigation */
a#navigation_close { top: 20px; right: 20px; }
#navigation_box { border: 10px solid #FFF; }

    
#nav_and_logo_box { position: relative; top: 0; left: 0; right: auto; width: auto; margin: 0 0 10px 0; padding: 10px 3.13%; text-align: left; background-color: #4a3e2a; }
a#navigation_button { position: absolute; top: 20px; left: auto; right: 20px; width: 40px; height: 40px; margin: 0; }
#nav_and_logo_box #logo { display: block; width: 120px; }

#header_bg { padding: 0; }  
#header { margin: 0 10px; }    
    
#header_logo_box { display: none; }
#header_image { padding: 0; }  
    
    
#footer_link { width: 100%; height: auto; margin: 0; padding: 20px 3.13%; text-align: center; }

.footer_nav { position: relative; top: 0; bottom: auto; left: 0; width: 100%; padding: 30px 0 0 0; text-align: center; }

    
    
    
/* Startseite */
#page_1 { background-color: #f0f0f0; }
    
#page_1 #nav_and_logo_box { position: fixed; width: 100%; }
    
#page_1 #startseite_logo { display: none; }

#page_1 #startseite_sidebar { display: block; position: relative; top: 0; left: 0; right: auto; width: 100%; min-height: 100vh; padding: 250px 0 50px 0; border: none; background-color: transparent; text-align: center; }

#page_1 .startseite_linkbox { display: block; position: relative; top: 0; width: 345px; margin: 0 auto 20px auto; } 
#page_1 #startseite_linkbox_1 { bottom: auto; }
#page_1 #startseite_linkbox_2 { bottom: auto; }

#page_1 .startseite_linkbox a { display: block; position: relative; top: 0; left: auto; left: 0; width: 345px; height: 146px; margin: 0; }

#page_1 #startseite_footer { left: 0; bottom: auto; padding: 30px 0 10px 0; } 
    
#bwd_website_bg_img div { border: 10px solid #FFF; }
    
    
#bwd_website_bg_img div { top: 15%; height: 85%; }
    
    
}


@media all and (max-width:480px) {
h1, .like_h1 { font-size: 32px; line-height: 35px; }
h2, .like_h2 { font-size: 27px; line-height: 35px; }
h3, .like_h3 { font-size: 22px; line-height: 30px; } 

h1 span { font-size: 25px; line-height: 30px; margin: 0 0 0 25px; padding: 0 25px; background-image: url(headline_subline_mobil.png); }
    
    
.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; }

}


@media all and (max-width:400px) {
    
#page_1 .startseite_linkbox { width: auto; max-width: 240px; margin: 0 auto 20px auto; padding: 0 20px; } 

#page_1 .startseite_linkbox a { display: block; position: relative; top: 0; left: auto; left: 0; width: 100%; height: auto; margin: 0; }

#page_1 .startseite_linkbox a img { position: relative; top: 0; left: 0; width: 100%; }
#page_1 .startseite_linkbox a span { position: relative; top: 0; bottom: auto; left: 0; right: auto; width: 100%; }    
    
}