@import url('https://fonts.googleapis.com/css?family=Ubuntu');

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

html, body {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px; line-height: 24px;
color: #FFF;
/* 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: #a6a6a6; }



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

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

ul li { list-style-type: disc; margin: 0 0 5px 17px; padding: 0; }

h1, h2, h3, h4, h5, h6,
.like_h1, .like_h2, .like_h3, .like_h4, .like_h5, .like_h6 { font-weight: normal; font-style: normal; font-size: 14px; line-height: 20px; margin: 0 0 15px 0; color: #FFF; }
h1, .like_h1 { font-size: 24px; line-height: 34px; } 
h2, .like_h2 { font-size: 18px; line-height: 28px; } 
h3, .like_h3 { font-size: 18px; line-height: 28px; } 
h4, .like_h4 { font-size: 13px;  } 
h5, .like_h5 { font-size: 11px; } 
h6, .like_h6 { font-size: 9px; } 

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
.like_h1 strong, .like_h2 strong, .like_h3 strong, .like_h4 strong, .like_h5 strong, .like_h6 strong { color: #476175; font-weight: normal; }

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: #AAA; } 
.small  { display: block; font-size: 13px; line-height: 16px; color: #333; font-style: italic; padding-top: 5px; } /* Bildunterschriften */

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

.box_width_1_2 { clear: none; width: 46.64%; }
.box_width_1_3 { clear: none; width: 30.35%; }
.box_width_2_3 { clear: none; width: 62.94%; }
.box_width_1_4 { clear: none; width: 22.2%; } 

.box_bg_black .outer_box_inner { display: block; padding: 20px 20px 5px 20px; background-color: #000; background-color: rgba(0,0,0,0.33); }


/* ----------------------------------------------------------------------------------
 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 15px 0; text-align: center; }
.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)
---------------------------------------------------------------------------------- */ 
#page_bg { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }

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

#header, #header_image, #wrapper, #footer { clear: both; width: 1072px; margin: 0 auto; }

#header_bg { height: auto; background-color: #4C4C4C; border-bottom: 2px solid #b2b2b2; z-index: 100; }

#logo { position: absolute; top: 5px; left: auto; right: 0; width: 338px; height: 127px; z-index: 10; }

#navigation_not_responsive { width: auto; padding: 105px 340px 0 2.24%; }

#header_image_bg { background-color: #4C4C4C; background-image: url(bg_header_image.jpg); background-repeat: repeat-x; background-position: center top; background-size: contain; }
#header_image { padding: 25px 0 5px 0; }

#header_image_shadow { display: block; width: auto; margin: 0 2.24%; padding: 0 0 60px 0; background-image: url(bg_header_image_shadow.png); background-repeat: no-repeat; background-position: center bottom; }


#wrapper_bg { background-color: #4C4C4C; background-image: url(bg_wrapper_dark.jpg); background-position: center top; background-repeat: repeat; }
#wrapper_bg.dark { background-image: url(bg_wrapper_dark.jpg); }
#wrapper_bg.light { background-image: url(bg_wrapper_light.jpg); }
#wrapper { padding: 40px 0 20px 0; }

#content { float: left; width: 68.10%; margin: 0 0 0 2.24%; }
#sidebar { float: right; width: 25.19%; margin: 0 2.24% 0 0; }

#content .outer_box,
#sidebar .outer_box { clear: both; display: block; float: none; width: 100%; margin: 0 0 20px 0; padding: 0; }


#footer_bg { clear: both; padding: 0; background-color: #a6a6a6; background-image: url(bg_footer.png); background-repeat: repeat-x; background-position: center top; }
#footer { padding: 20px 0 10px 0; color: #222; font-size: 15px; line-height: 24px; }

#footer_left { display: block; float: left; width: 62.64%; margin: 0 0 0 2.24%; }
#footer_right { display: block; float: right; width: 30.64%; margin: 0 2.24% 0 0; }

#footer_left a { display: inline-block; margin: 0 10px 10px 0; padding: 0 0 0 37px; color: #FFF; text-decoration: none; font-size: 14px; line-height: 30px; font-weight: bold; text-transform: uppercase; background-position: left center; background-repeat: no-repeat; }
#footer_left a#footer_home { background-image: url(footer_home.png); }
#footer_left a#footer_team { background-image: url(footer_team.png); }
#footer_left a#footer_kontakt { background-image: url(footer_kontakt.png); }
#footer_left a#footer_impressum { background-image: url(footer_impressum.png); }
#footer_left a#footer_datenschutz { background-image: url(footer_impressum.png); }
#footer_left a:hover { color: #e2001a; text-decoration: none; }

#footer_right { font-size: 10px; line-height: 15px; text-align: right; color: #FFF; }
#footer_right a { color: #FFF; text-decoration: none; }
#footer_right a:hover { color: #e2001a; text-decoration: none; }




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

.linkbalken .outer_box_inner { padding: 5px 20px !important; }
.linkbalken a { display: block; margin: 0; padding: 0 0 0 20px; font-size: 18px; line-height: 22px; color: #FFF; text-decoration: none; text-transform: uppercase; background-image: url(pfeil-gelb.png); background-repeat: no-repeat; background-position: left center; }
.linkbalken a:hover { background-image: url(pfeil-rot.png); color: #FFF; text-decoration: none; }

.team { display: block; margin: 0; padding: 20px 10px 5px 20px; background-color: #000; background-color: rgba(0,0,0,0.33); }
.team_bild { display: block; float: left; width: 200px; padding: 0 0 15px 0; }
.team_text { display: block; padding: 20px 0 15px 215px; }
.team_text h2 { margin: 0 0 10px 0; padding: 0; }
.team_text p { margin: 0; padding: 0; }


.bildergalerie { clear: both; display: block; margin: 0 0 20px 0; padding: 20px 0 1px 0; }
.bildergalerie.bg_black { margin: 0; background-color: #000; background-color: rgba(0,0,0,0.33); }
.bildergalerie a { display: block; float: left; width: 46.64%; margin: 0 0 0 2.24%; padding: 0; }
.bildergalerie.anzahl_3 a { width: 30.35%; }
.bildergalerie.anzahl_4 a { width: 22.2%; }
.bildergalerie.anzahl_5 a { width: 17.31%; }
.bildergalerie.anzahl_6 a { width: 14.05%; }


.sonderfall_text_1_3 { display: block; float: left; width: 30.35%; margin: 0 0 0 2.24%; padding: 0; }

#sonderfall_farbkleckse { clear: both; display: block; clear: both; margin: 0; }
#sonderfall_farbkleckse span { display: block; float: left; width: 11.72%; margin: 0 0 20px 2.24%; padding: 0; text-align: center; }

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

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

#header, #header_image, #wrapper, #footer { width: 100%; margin: 0; }

#header_image_shadow { padding: 0 0 45px 0; background-size: contain; }

#logo { right: 5px; }
#navigation_not_responsive { width: auto; padding: 137px 0 0 2.24%; }

}


@media all and (max-width:980px) {
/* 1/4 auf 1/2 umstellen */
.box_width_1_4 { clear: none; float: left; display: block; width: 46.92%; margin: 0 0 20px 2.05%; padding: 0; }
.box_width_1_4_breakpoint { clear: both; }


.team_bild { width: 150px; }
.team_text { padding: 20px 0 15px 165px; }
}

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

#header_bg { height: auto; padding: 0; }

#logo { position: relative; top: 0; left: 0; right: auto; width: auto; height: auto; margin: 0 80px 0 0; text-align: left; }

#navigation_not_responsive { display: none; }

#header_image_shadow { padding: 0; margin: 0 2.24% 20px 2.24%; background-image: none; }

#content { clear: both; float: none; width: auto; margin: 0 2.24% 20px 2.24%; }
#sidebar { clear: both; float: none; width: auto; margin: 0 2.24% 0 2.24%; }


#footer_left { float: none; width: auto; margin: 0 2.24% 10px 2.24%; }
#footer_right { float: none; width: auto; margin: 0 2.24% 10px 2.24%; text-align: left; }



.team { padding: 20px 20px 5px 20px; }
.team_bild { float: none; width: 200px; padding: 0 0 15px 0; }
.team_text { padding: 0 0 15px 0; }


.bildergalerie a { width: 46.64% !important; margin: 0 0 2.24% 2.24%; padding: 0; }

a.bildergalerie_3,
a.bildergalerie_5,
a.bildergalerie_7 { clear: both; }

.sonderfall_text_1_3 { display: block; float: none; width: auto; margin: 0 2.24% 20px 2.24%; padding: 0; }

#sonderfall_farbkleckse { clear: both; display: block; clear: both; margin: 0; }
#sonderfall_farbkleckse span { display: block; float: left; width: 11.72%; margin: 0 0 20px 2.24%; padding: 0; text-align: center; }
}



@media all and (max-width:480px) {
.outer_box { float: none !important; width: auto !important; margin: 0 10px 15px 10px !important; }

.box_bg_black .outer_box_inner { padding: 20px 10px 5px 10px; }

#content .outer_box,
#sidebar .outer_box { float: none; width: 100% !important; margin: 0 0 20px 0 !important; }

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

.bildergalerie a { float: none; width: auto !important; margin: 0 10px 15px 10px; }

}