@import url(http://allfont.de/allfont.css?fonts=balloon-extra-bold-bt);

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

html, body {
font-family: Arial, Helvetica, sans-serif; 
font-size: 15px; line-height: 20px; 
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: #F3F3F3; }


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

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: bold; font-style: normal; font-size: 14px; line-height: 20px; margin: 0 0 10px 0; color: #4B4B4B; font-family: 'Balloon Extra Bold BT', Arial, Helvetica, sans-serif; }
h1, .like_h1 { font-size: 32px; line-height: 40px; } 
h2, .like_h2 { font-size: 21px; line-height: 30px; } 
h3, .like_h3 { font-size: 18px; line-height: 25px; } 
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 15px 0; padding: 0;}
td { padding: 0 8px 6px 0; vertical-align: top; }

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


/* ----------------------------------------------------------------------------------
   CSS-Einstellungen fuer das Addon Modulhelper (bzw. bw_modulhelper)
---------------------------------------------------------------------------------- */ 
.section_full,
.section_1200,
.section_980 { clear: both; display: block; width: 100%; height: auto; margin: 0; padding: 0; }
.section_full,
.section_1200 { width: 1200px; margin: 0 auto; } 
.section_980 { width: 980px; margin: 0 auto; }

.section_bg_none,
.section_bg_gray,
.section_bg_darkgray { clear: both; display: block; width: 100%; height: auto; margin: 0; padding: 30px 0 10px 0; background-color: #FFF; }

.section_bg_none { background-color: #FFF; }
.section_bg_gray { background-color: #E3E3E3; }
.section_bg_darkgray { background-color: #4B4B4B; }
.section_bg_darkgray, .section_bg_darkgray p { color: #FFF; }


@media all and (max-width:1200px) { .section_full, .section_1200 { width: 100%; margin: 0; } }
@media all and (max-width:980px) { .section_980 { width: 100%; margin: 0; } }

/* ------------ Outer Box ------------ */
/* Ausgangswerte: (Seitenbreite: 1200px | Abstand: 50px) */
.outer_box { clear: both; display: block; float: left; width: 91.67%; margin: 0 0 20px 4.17%; padding: 0; }

.box_width_full { width: 100%; margin: 0 0 20px 0; }
.box_width_1_2 { clear: none; width: 43.75%; }
.box_width_1_3 { clear: none; width: 27.78%; }
.box_width_2_3 { clear: none; width: 59.73%; }
.box_width_1_4 { clear: none; width: 19.79%; }

@media all and (max-width:480px) {
.outer_box { clear: both; float: none; width: 91.67%; margin: 0 0 4.17% 4.17%; }
.box_width_full { width: 100%; margin: 0 0 4.17% 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 .image { margin: 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: 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; }


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

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

#page { padding: 0; }

#header { min-height: 240px; }
#header_left { display: block; position: absolute; top: auto; bottom: 0; left: 0; width: 25%; text-align: center; }
#header_right { display: block; width: 75%; margin: 0 0 0 25%; padding: 30px 0 10px 0; text-align: center; }

#logo { text-align: center; }
#logo a:hover { opacity: 0.8; }

#header_info { display: block; margin: 0 0 30px 0; padding: 40px 0 0 0; font-size: 18px; line-height: 24px; font-weight: bold; text-transform: uppercase; }
#header_info_anschrift { margin: 0 0 20px 0; }
#header_info_oeffnungszeiten { color: #ca003c; }
#navigation_not_responsive { width: auto; margin: 0; padding: 0; z-index: 99; }


#wrapper { clear: both; }
#content_headline { background-color: #4b4b4d; padding: 10px 0; text-align: center; font-family: 'Balloon Extra Bold BT', Arial, Helvetica, sans-serif; }
#content_headline h1#single { display: block; font-size: 32px; line-height: 40px; color: #FFF; margin: 0; padding: 30px 0; }
#content_headline h1#double { display: block; font-size: 32px; line-height: 40px; color: #FFF; margin: 0; padding: 15px 0 0 0; }
#content_headline div#double_subline { display: block; font-size: 21px; line-height: 30px; color: #FFF; margin: 0; padding: 0 0 15px 0; }

/* #content { width: 1100px; margin: 0 auto; padding: 40px 0 20px 0; min-height: 400px; overflow: hidden; } */


#footer_bg { clear: both; background-color: #4B4B4B; overflow: hidden; }
#footer { clear: both; width: auto; padding: 10px 3.57%; color: #E3E3E3; font-size: 14px; line-height: 20px; text-align: center; }
#footer a { color: #E3E3E3; text-decoration: none; white-space: nowrap; }
#footer a:hover { color: #FFF; text-decoration: none; }


/* ----------------------------------------------------------------------------------
   Module
---------------------------------------------------------------------------------- */ 
#google_map_iframe iframe { width: 100% !important; border: none !important; margin: 0 0 20px 0; padding: 0; }

#nav_leistungen { clear: both; }
#nav_leistungen .rows_one,
#nav_leistungen .rows_two,
#nav_leistungen .rows_three { display: block; float: left; width: 14.996%; margin: 0 0 4.17% 4.17%; padding: 0; }
#nav_leistungen a { display: block; width: 120px; margin: 0 auto; padding: 30px 0; text-decoration: none; color: #FFF; background-color: #ca003c; border-radius: 20px; font-size: 15px; line-height: 20px; text-transform: uppercase; text-align: center; }
#nav_leistungen a:hover,
#nav_leistungen a.active { text-decoration: none; color: #FFF; background-color: #4b4b4d; }
#nav_leistungen a span { display: block; }
#nav_leistungen .rows_one a { padding: 50px 0; }
#nav_leistungen .rows_two a { padding: 40px 0; }
#nav_leistungen .rows_three a { padding: 30px 0; }

@media all and (max-width:768px) {
#nav_leistungen .rows_one,
#nav_leistungen .rows_two,
#nav_leistungen .rows_three { width: 19.79%; }
#nav_leistungen a { font-size: 14px; }
}
@media all and (max-width:640px) {
#nav_leistungen .rows_one,
#nav_leistungen .rows_two,
#nav_leistungen .rows_three { width: 27.78%; }
}
@media all and (max-width:480px) {
#nav_leistungen .rows_one,
#nav_leistungen .rows_two,
#nav_leistungen .rows_three { width: 43.75%; }
}

.marken_logo { display: block; float: left; width: 14.996%; margin: 0 0 4.17% 4.17%; padding: 0; }
@media all and (max-width:768px) {
.marken_logo { width: 19.79%; }
}
@media all and (max-width:640px) {
.marken_logo { width: 27.78%; }
}
@media all and (max-width:480px) {
.marken_logo { width: 43.75%; }
}

.slick_bilderslider { clear: both; display: block; width: auto; margin: 0 4.17% 20px 4.17%; padding: 0; }
.slick_bilderslider .image { display: block; margin: 0 2.08%; }
.slick-prev, .slick-next { width: 30px; height: 30px; margin: -15px 0 0 0; background-image: url(js/slick/arrows_mobile.png); }

.slick_bilderslider .slick-prev { left: -30px; }
.slick_bilderslider .slick-next { right: -30px; }

@media all and (max-width:768px) {
.slick_bilderslider .slick-prev { left: -10px; }
.slick_bilderslider .slick-next { right: -10px; }
}

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

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

}


@media all and (max-width:1024px) {
#header_right { padding: 0 0 10px 0; }	
}

@media all and (max-width:768px) {
.outer_box { clear: both; float: none; width: 92.86%; margin: 0 0 20px 3.57%; }
.box_width_full { width: 100%; margin: 0 0 20px 0; }
	
#navigation_not_responsive { display: none; }

#header { min-height: 150px; }
#header_right { padding: 40px 0 5px 0; }
#header_info { margin: 0; padding: 0; font-size: 14px; line-height: 20px; }

} 


@media all and (max-width:480px) {
h1, .like_h1,
#content_headline h1#single,
#content_headline h1#double { font-size: 28px; line-height: 36px; } 
	
.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; }


#header { min-height: 120px; }
#header_left { display: block; position: absolute; top: 5px; bottom: auto; left: 50%; width: 80px; margin: 0 0 0 -40px; }
#header_right { width: 100%; margin: 0; padding: 75px 0 10px 0; }
#header_info { margin: 0; padding: 0; font-size: 13px; line-height: 18px; }
#header_info_anschrift { margin: 0 0 10px 0; }
}