/* 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; font-size: 0; line-height: 0; 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; }



@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/roboto-v30-latin-regular.woff2') format('woff2'),
       url('fonts/roboto-v30-latin-regular.woff') format('woff');
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/roboto-v30-latin-700.woff2') format('woff2'),
       url('fonts/roboto-v30-latin-700.woff') format('woff');
}


html, body {
font-family: 'Roboto', Arial, sans-serif; 
font-size: 20px; line-height: 1.33em; 
color: #656767;
/* 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, a:focus { text-decoration: none; color: #999; }
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 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-weight: 400; font-style: normal; font-size: 1.11em; line-height: 1.1em; margin: 0 0 10px 0; color: #656767; }
h1, .like_h1 { font-size: 1.56em; line-height: 1.1em; } 
h2, .like_h2 { font-size: 1.56em; line-height: 1.1em; } 
h3, .like_h3 { font-size: 1.11em; line-height: 1.1em; }
h4, .like_h4 { font-size: 18px; } 
h5, .like_h5 { font-size: 14px; } 
h6, .like_h6 { font-size: 12px; } 


em { font-style: italic; font-weight: 400; }
strong { font-weight: 700; }
p { margin: 0 0 20px 0; padding: 0;}
table { margin: 0 0 20px 0; }
th { background: #e1c504; }
tr:nth-child(odd) { background: #efe17f; }
tr:nth-child(even) { background: #f5edb0; }
th, td { padding: 10px 20px; vertical-align: top; text-align: left; }
td.no_break { white-space: nowrap; }
table h1, table h2, table h3, table p { margin: 0; padding: 0; }

hr { clear: both; height: 1px; width: 100%; margin: 0 0 20px 0; border: none; background-color: #3d454c; } 
.small  { display: block; font-size: 0.5em; line-height: 1.2em; 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: 1560px | Abstand: 30px) */
.outer_box { clear: both; display: block; float: left; width: 96.15%; margin: 0 0 40px 1.92%; padding: 0; }
.box_width_1_2 { clear: none; width: 47.12%; }
.box_width_1_3 { clear: none; width: 30.77%; }
.box_width_2_3 { clear: none; width: 63.46%; }
.box_width_1_4 { clear: none; width: 22.60%; } 



/* ----------------------------------------------------------------------------------
 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 20px 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_braun { background-color: #645b4e; color: #FFF; }
.box_bg_mittelbraun { background-color: #ac5e00; color: #FFF; }
.box_bg_gelb { background-color: #e1c504; color: #645b4e; }

.outer_box_inner .text { padding: 30px 30px 10px 30px; color: #FFF; }
.outer_box_inner .text h1, .outer_box_inner .text h2, .outer_box_inner .text h3 { color: #FFF; }
.box_bg_gelb .outer_box_inner .text { color: #645b4e; }
.box_bg_gelb .outer_box_inner .text h1, .box_bg_gelb .outer_box_inner .text h2, .box_bg_gelb .outer_box_inner .text h3 { color: #645b4e; }


/* ----------------------------------------------------------------------------------
   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, #header_image, #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: block; position: absolute; top: 1.11em; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 10; background-color: #e1c504; background-color: rgba(225,197,4,0.8); }

#logo { display: block; position: absolute; top: 0; left: 60px; width: 190px; height: auto; margin: 0; padding: 40px 0 60px 0; z-index: 20; background-color: #705e4d; }
#logo a:hover, #logo a:focus { opacity: 0.8; }


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

#content { width: 1560px; margin: 0 auto; padding: 100px 0 80px 0; }

#footer_bg { clear: both; padding: 0; background-color: #645b4e; color: #FFF; overflow: hidden; }
#footer { clear: both; width: 1200px; margin: 0 auto; padding: 30px 0 10px 0; color: #FFF; font-size: 0.8em; line-height: 1.2em; text-align: center; }
#footer_left, #footer_right { display: block; float: left; width: 40%; margin: 0 5% 30px 5%; padding: 0 0 10px 0; border-bottom: 5px solid #e1c504; }
.footer_headline { display: block; margin: 0 0 10px 0; padding: 0; font-size: 1.07em; line-height: 1.2em; }
#footer_bottom { clear: both; display: block; width: 96.15%; margin: 0 0 20px 1.92%; padding: 0; }
#footer_bottom a { display: inline-block; margin: 0 30px 0 0; color: #FFF; text-decoration: none; white-space: nowrap; font-weight: 700; }
#footer_bottom a:hover, #footer_bottom a:focus { color: #FFF; text-decoration: none; }

/* ---  Cookie-Hinweis ohne OK-Button - Datenschutzinfo --- */ 
#datenschutzinfo { clear: both; display: block; width: auto; height: auto; margin: 0; padding: 15px 10px; 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; }


/* ----------------------------------------------------------------------------------
   Menue
---------------------------------------------------------------------------------- */ 
#navigation_button { display: none; position: absolute; top: 18px; right: 18px; 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: 999; overflow: hidden; text-indent: -99999px; }
#navigation_button:hover, #navigation_button:focus { opacity: 0.8; }

#navigation { position: relative; top: 0; left: 0; width: auto; height: auto; margin: 0; padding: 0 0 0 270px; z-index: 1000; text-align: left; }

/* erste Ebene */
#navigation ul { position: relative; top: 0; left: 0; list-style: none; margin: 0; padding: 0; }
#navigation li { position: relative; top: 0; left: 0; list-style-type: none; display: inline-block; margin: 0; padding: 0; }

#navigation ul li a { display: block; width: auto; height: auto; margin: 0; padding: 10px 15px; font-size: 0.9em; line-height: 1.10em; font-weight: 700; color: #705e4d; text-decoration: none; transition: all 0.125s ease-in; }
#navigation ul li a:hover, #navigation ul li a:focus { text-decoration: none; color: #645b4e; background-color: #FFF; background-color: rgba(255,255,255,0.8); transition: all 0.125s ease-out; }

#navigation ul li a.rex-current,
#navigation ul li a.rex-active { color: #645b4e; background-color: #FFF; background-color: rgba(255,255,255,0.8); }

#navigation ul li:first-child a { border-left: none; }

#navigation ul li a.rex-current:hover,
#navigation ul li a.rex-active:hover,
#navigation ul li a.rex-current:focus,
#navigation ul li a.rex-active:focus { color: #645b4e; }



/* zweite Ebene */
#navigation ul.rex-navi2 { 
    display: none;
}


/* wird nur ab Mobil benoetigt, deswegen generell erstmal ausblenden */
#navigation li a span { display: none; } 

@media screen and (max-width: 1200px) { #navigation { padding: 0 0 0 250px; } }
@media screen and (max-width: 980px) { #navigation { padding: 0 0 0 230px; } }

@media screen and (max-width: 768px) {  
#navigation_button { display: block; }

	
#navigation { clear: both; position: relative; top: 0; left: 0; width: 100%; height: auto; max-height: 0; margin: 0; padding: 0; overflow: hidden; background-color: #e1c504; }
#navigation > ul ul { overflow: hidden; max-height: 0; }

#navigation.active, #navigation > ul ul.active { max-height: 99999em; } 
#navigation ul { display: block; }
#navigation ul li { display: block; float: none; height: auto; margin: 0; padding: 0; border-left: none; }
#navigation ul li a { display: block; float: none; width: auto; margin: 0; padding: 10px; font-size: 18px; line-height: 20px; font-weight: 400; border-bottom: 1px solid #808080; color: #000; 
background-color: transparent; background-image: none; text-align: left; border-radius: 0; }
#navigation ul li a:hover, #navigation ul li a:focus { background-color: #f8f5d6; color: #000 !important; }
#navigation ul li a.rex-current,
#navigation ul li a.rex-active { background-color: #f8f5d6; color: #000; padding: 10px; color: #000; text-align: left; }


/* Zweite Ebene */
#navigation ul.rex-navi2 { display: inherit; position: relative; top:auto; left: auto; }
#navigation ul.rex-navi2 li a { padding: 10px 10px 10px 20px; font-size: 15px; line-height: 20px; color: #000; background-color: #e1c504; }
#navigation ul.rex-navi2 li a:hover, #navigation ul.rex-navi2 li a:focus { background-color: #f8f5d6; color: #000 !important; }
#navigation ul.rex-navi2 li a.rex-current,
#navigation ul.rex-navi2 li a.rex-active { background-color: #f8f5d6; color: #000; }


/* 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: "-"; }
*/

/* 2.) Alternative mit Hauptpunkten anklickbar lassen (1. dann auskommentieren) */
#navigation li a span { display: none; } 
#navigation li.has-submenu a span  { content: ''; display: block; position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; margin: 0; padding: 0; z-index: 10; 
background-color: #FFF; text-indent: -9999px; overflow: hidden; background-image: url(mobile_menue_arrow_down.png); background-position: center center; background-repeat: no-repeat;
border-radius: 6px; }
#navigation li.has-submenu a span:hover, #navigation li.has-submenu a span:focus  { background-color: #b3b2b2; }
#navigation li.has-submenu a.active span { background-image: url(mobile_menue_arrow_up.png); } 

/* zweite Ebene */
#navigation li.has-submenu ul.rex-navi2 li a span { display: none; } 
#navigation li.has-submenu ul.rex-navi2 li.has-submenu a span { display: block; } 

/* dritte und letzte Ebene */
#navigation li.has-submenu ul.rex-navi3 li a span { display: none !important; } 
 
 
}

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

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

.headline { clear: both; display: block; width: 96.15%; margin: 0 0 20px 1.92%; padding: 0; text-align: center; color: #FFF; background-position: center top; background-repeat: repeat-y; }
.headline h1, .headline h2, .headline h3 { color: #FFF; margin: 0; padding: 0; }
.headline_sub { font-size: 1.11em; line-height: 1.20em; color: #705e4d; text-align: center; }
.headline_braun, .headline_mittelbraun, .headline_gelb { display: block; margin: 0 0 10px 0; padding: 10px 0; }
.headline_braun { background-color: #645b4e; background-image: url(headline_braun.jpg); }
.headline_mittelbraun { background-color: #ac5e00; background-image: url(headline_mittelbraun.jpg); }
.headline_gelb { background-color: #e1c504; color: #645b4e; }


.linkbalken { clear: both; display: block; text-align: center; }
.linkbalken a { display: inline-block; width: auto; height: auto; margin: 0; padding: 10px 40px 10px 10px; font-size: 1.05em; line-height: 1.2em; font-weight: 700; color: #645b4e; text-decoration: none;
background-color: #e1c504; background-image: url(linkbalken.png); background-repeat: no-repeat; background-position: right center; }
.linkbalken a:hover, .linkbalken a:focus { text-decoration: none; color: #FFF; background-color: #ac5e00; }

.bildergalerie { clear: both; display: block; margin: 0 0 20px 0; }
.bildergalerie .image { display: block; float: left; width: 22.60%; margin: 0 0 1.92% 1.92%; padding: 0; border-bottom: 5px solid #e1c504; }



/* Header-Slider */
.header_image_box { display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }
.header_image_text { display: block; position: absolute; top: 50%; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; text-align: center; }
.header_image_text_headline { display: inline-block; width: auto; max-width: 1600px; height: auto; margin: 0 auto; padding: 10px 20px 5px 20px; z-index: 1; background-color: #645b4e; background-color: rgba(100,91,78,0.8); border-bottom: 5px solid #e1c504; color: #FFF; font-size: 2.22em; line-height: 1.2em; text-align: center; }

@media all and (max-width:1200px) {
.header_image_text { top: auto; bottom: 30px; }
.header_image_text_headline { font-size: 2.0em; }		
}

@media all and (max-width:980px) {
.header_image_text_headline { font-size: 1.5em; }	
}

@media all and (max-width:768px) {
.header_image_text { position: relative; top: 0; } 
.header_image_text_headline { display: block; }
	
.header_image_text_headline { font-size: 1.25em; }	
}


/* ----------------------------------------------------------------------------------
   Formular
---------------------------------------------------------------------------------- */ 
/* --- 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 { float: left; width: 150px; margin: 0 0 10px 0; }
.yform form.hide-label label { display: none; }

.form-group { clear: both; display: block; margin: 0; }

.yform .form-control {
    box-sizing: border-box; 
	display: block; width: 60%; max-width: 400px; height: auto; margin: 0 0 20px 155px; padding: 5px 10px;
    font-family: inherit; font-size: 14px; line-height: 20px; color: #001f40;
	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 textarea.form-control { height: 240px; }

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


/* 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: 700; 
    background-color: #970d34; color: #fff; 
}
.yform .btn-primary:hover, .yform .btn-primary:focus { /* background-color: #fff; color: #000; */ opacity: 0.6; }

.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; width: auto; float: none; margin-bottom: 10px !important; }

#yform-contact_formular-email_betreff .form-control { margin: 0 0 20px 0; }


.yform strong { font-weight: 700; }

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

.form-check-group label { display: inline-block; }

#yform-contact_formular-date_anreise select,
#yform-contact_formular-date_abreise select { display: inline-block; width: 55px; margin: 0 5px 20px 5px; }


#yform-contact_formular-date_anreise #yform-contact_formular-field-5_year,
#yform-contact_formular-date_abreise #yform-contact_formular-field-6_year { width: 80px; }


@media all and (max-width:480px) {
.yform label { float: none; display: block; width: auto; margin: 0 0 5px 0; }
.yform .form-control { display: block; width: 100%; max-width: 400px; margin: 0 0 20px 0; }
	
}




/* ----------------------------------------------------------------------------------
   Buchungskalender
---------------------------------------------------------------------------------- */ 
.kalender_link_box { clear: both; display: block; text-align: center; }
.kalender_link { display: inline-block; margin: 0 20px; }

.kalender .kalender_headline { display: block; padding: 0 0 10px 0; text-align: center; font-size: 20px; line-height: 24px; color: #000; font-weight: 700; }
.kalender .kalender_headline .kalender_last_month { position: absolute; top: 0; left: 15px; }
.kalender .kalender_headline .kalender_next_month { position: absolute; top: 0; right: 15px; }
.kalender .kalender_headline .kalender_last_month a,
.kalender .kalender_headline .kalender_next_month a { text-shadow: none; }

.monat { display: block; width: 280px; margin: 0 auto 20px auto; padding: 10px; border: 2px solid #EEE; background-color: #FFF; }

.monat_headline { font-size: 20px; line-height: 30px; }
.monat .th, .monat .td_empty, .monat .td_tag { display: block; float: left; width: 30px; height: 30px; padding: 5px; margin: 0; color: #000; font-size: 15px; line-height: 30px; overflow: hidden; text-align: center; }
.monat .td_empty { color: #DDD; }
.monat .td_clear { clear: both; }
.monat .td_tag { background-color: #eedc8a; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; }
.monat .status_0 { background-color: #eedc8a; }
.monat .status_2 { background-image: url(status_2.png); }
.monat .status_4 { background-image: url(status_4.png); }
.monat .status_6 { background-image: url(status_6.png); }
.monat .status_8 { background-color: #d36500; }
.monat .status_12 { background-color: #000; color: #999; /* Fehler durch Ueberbuchungen */ }

.monat .status_anreise { background-color: #009900 !important; background-image: none !important; }
.monat .status_abreise { background-color: #3193D1 !important; background-image: none !important; }

.monat .today { font-weight: 700; font-size: 20px; }

.monat .td_tag a { display: block; color: #000; }
.monat .td_tag a:hover, .monat .td_tag a:focus { display: block; color: #000; background-color: #FFF; }
 
.month_box { display: block; float: left; width: 33.33%; margin: 0 0 40px 0; padding: 0; }
@media all and (min-width:981px) { .month_1, .month_4, .month_7, .month_10 { clear: both; } }
@media all and (max-width:980px) { .month_box { width: 50%; margin: 0 0 20px 0; } .month_1, .month_3, .month_5, .month_7, .month_9, .month_11 { clear: both; } }
@media all and (max-width:640px) { .month_box { clear: both; float: none; width: 100%; } }

.month_active .monat { border: 2px solid #060; background-color: #EEE; }
.month_old .monat { opacity: 0.33; }


/* ----------------------------------------------------------------------------------
   Responsive Webdesign
---------------------------------------------------------------------------------- */ 

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

@media all and (max-width:1560px) {
#content { width: 100%; margin: 0; }
}


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

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

#logo { left: 40px; padding: 30px 0; }

#footer { width: 100%; margin: 0; }

}

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

h1, .like_h1 { font-size: 1.25em; } 
h2, .like_h2 { font-size: 1.25em; } 
h3, .like_h3 { font-size: 1.10em; }
	
#logo { left: 20px; padding: 20px 0; }
#content { padding: 50px 0 40px 0; }
}

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

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

#logo { display: block; position: relative; top: 0; left: 0; width: auto; height: auto; padding: 0; }
#content { padding: 30px 0 20px 0; }

} 


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

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

#footer_left, #footer_right { float: none; width: 90%; margin: 0 5% 30px 5%; padding: 0 0 10px 0; border-bottom: 5px solid #e1c504; }

}