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

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

html, body {
font-family: 'Roboto', Verdana, Geneva, sans-serif; 
font-size: 15px; line-height: 20px;
color: #1e283a;
/* 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; /* background-image: url(bg_html.jpg); background-repeat: repeat; background-position: center center; */ }

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

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

li { list-style-type: none; margin: 0 0 10px 0; padding: 0 0 0 17px; }

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 10px 0; color: #1e283a; }
h1, .like_h1 { font-size: 30px; line-height: 40px; margin-top: 40px; } 
h2, .like_h2 { font-size: 24px; line-height: 34px; } 
h3, .like_h3 { font-size: 20px; line-height: 30px; } 
h4, .like_h4 { font-size: 18px;  } 
h5, .like_h5 { font-size: 14px; } 
h6, .like_h6 { font-size: 12px; } 

h1.no_margin_top { margin-top: 0; } 

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: #004295; font-weight: normal; }

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

.blue { color: #004295; }
.red { color: #ac0d32; }

h1 { display: block; padding: 0 0 10px 0; font-weight: bold; text-align: center; text-transform: uppercase; background-image: url(bg_headline.png); background-position: center bottom; background-repeat: no-repeat; }

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

.box_width_full { width: 100%; margin: 0 0 3.57% 0; }
.box_width_1_2 { clear: none; width: 44.64%; }
.box_width_1_3 { clear: none; width: 28.57%; }
.box_width_2_3 { clear: none; width: 60.71%; }
.box_width_1_4 { clear: none; width: 20.54%; } 

.box_bg_white .outer_box_inner { background-color: #FFF; padding: 15px 15px 0 15px; }

.section_trennlinie { clear: both; display: block; width: 100%; height: 1px; margin: 0; padding: 0; background-color: #dfdfdf; }
.section_trennlinie.white { background-color: #FFF; }

.section_full,
.section_1200,
.section_980 { clear: both; display: block; width: 100%; height: auto; margin: 0; padding: 0; }
.section_1200 { width: 1200px; margin: 0 auto; }
.section_980 { width: 980px; margin: 0 auto; }

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


.section_bg_none,
.section_bg_white,
.section_bg_darkgray,
.section_bg_gray { 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_white { background-color: #FFF; }
.section_bg_gray { background-color: #e1e2e4; }
.section_bg_darkgray { background-color: #1e283a; }

.no_padding_bottom { padding: 30px 0 0 0; }

.section_bg_darkgray, .section_bg_darkgray p, .section_bg_darkgray a, .section_bg_darkgray h1, .section_bg_darkgray h2, .section_bg_darkgray h3, .section_bg_darkgray h4, .section_bg_darkgray h5, .section_bg_darkgray h6 { color: #FFF; }

.section_abstand_1, .section_abstand_2 { clear: both; display: block; width: 100%; height: 20px; margin: 0; padding: 0; }
.section_abstand_2 { height: 40px; }

.section_bg_image,
.section_bg_paroller { display: block; position: static; width: 100%; min-height: 300px; margin: 0; padding: 30px 0 10px 0; z-index: 1; 
background-color: #fff; background-position: center center; background-attachment: scroll; background-repeat: no-repeat; background-size: cover; }

#content li,
#footer li { list-style-type: none; margin: 0 0 10px 0; padding: 0 0 0 17px; background-image: url(listpoint.png); background-position: top left; background-repeat: no-repeat; }
#content .section_bg_darkgray li,
#footer li { background-image: url(listpoint_hell.png); }



/* ----------------------------------------------------------------------------------
 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: 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 { background-image: url(bg_zweispalter.png); background-repeat: repeat-y; background-position: center top;  }
.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: 1400px; height: auto; margin: 0 auto 30px auto; padding: 0; z-index: 2; background-color: #FFF; box-shadow: 0 5px 10px 0 #999; overflow: hidden; }

/* Relative Bloecke innerhalb von "page" */
#page, #header_top_bg, #header_top, #header_bg, #header, #logo, #header_image_bg, #header_image, #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 { }

#header_top_bg { background-color: #004295; }
#header_top { width: auto; margin: 0 0 0 30px; padding: 10px 0; color: #ccc; font-size: 13px; line-height: 20px; text-align: left; }
#header_top span { display: inline-block; margin: 0 60px 0 0; }
#header_top span#header_top_subag { margin: 0 183px 0 0; }
#header_top a { color: #ccc; text-decoration: none; }
#header_top a:hover { color: #aaa; text-decoration: none; }

#header_bg { background-color: #e1e2e4; z-index: 99; }
#header { padding: 20px 0; }

#logo { float: left; width: 206px; margin: 0 0 0 30px; }
#logo_mobile { display: none; }

#navigation_not_responsive { width: auto; margin: 0 0 0 300px; padding: 0; z-index: 50; }

#header_image_bg { }
#header_image { }

#wrapper { min-height: 400px; z-index: 20; }

#content { }

#footer_bg { clear: both; padding: 40px 0 20px 0; background-color: #004295; overflow: hidden; }
#footer { clear: both; width: 980px; margin: 0 auto; padding: 0; color: #DDD; font-size: 14px; line-height: 20px; background-image: url(footer_elektromaschine.png); background-repeat: no-repeat; background-position: right top; }
#footer a { color: #DDD; text-decoration: underline; }
#footer a:hover { color: #FFF; text-decoration: none; }
#footer .footer_headline { display: block; margin: 0 0 20px 0; font-size: 18px; line-height: 20px; color: #DDD; text-transform: uppercase; }
#footer_left { float: left; display: block; width: 40%; margin: 0; padding: 0; text-align: left; font-size: 14px; line-height: 20px; }
#footer_left a { display: block; margin: 0 0 10px 0; padding: 0 0 0 20px; background-image: url(listpoint_footer.png); background-position: left top; background-repeat: no-repeat; }
#footer_copyright { clear: both; display: block; padding: 10px 0 0 0; font-size: 14px; line-height: 36px; }

#footer span { color: #FFF; font-size: 30px; line-height: 36px; }
#footer_right { float: left; display: block; width: 30%; margin: 0; padding: 0; text-align: left; }

#footer_websitemacher { display: block; position: absolute; bottom: 7px; right: 0; width: 200px; height: auto; margin: 0; padding: 0; z-index: 1; font-size: 12px; line-height: 20px; text-align: right; }



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


a.link_button { display: inline-block; width: auto; height: auto; margin: 0; padding: 5px 15px; background-color: #e3000b; color: #FFF; text-decoration: none; }
a.link_button:hover { background-color: #151515; color: #FFF; text-decoration: none; }


.modul_101_box { display: block; float: left; width: 30.59%; height: auto; margin: 0 0 20px 2.05%; padding: 0; z-index: 1; }
.modul_101_box a { display: block; padding: 20px 0 0 0; background-color: #004295; color: #FFF; text-decoration: none; }
.modul_101_box a:hover { background-color: #ac0d32; color: #FFF; text-decoration: none; }
.modul_101_box_text { display: block; padding: 20px 25px 1px 25px; text-align: center; }
.modul_101_box_text h3 { color: #FFF; font-size: 27px; line-height: 37px; text-transform: uppercase; }

@media all and (max-width:768px) {
.modul_101_box { float: none; width: auto; margin: 0 1.56% 20px 1.56%; }
.modul_101_box img { display: block; margin: 10px auto 0 auto; }
.modul_101_box_text h3 { font-size: 24px; line-height: 30px; }
}
@media all and (max-width:480px) {
.modul_101_box { float: none; width: auto; margin: 0 10px 20px 10px; }
.modul_101_box_text h3 { font-size: 21px; line-height: 27px; }
}

.modul_102_box { display: block; float: left; width: 20.54%; height: auto; margin: 0 0 20px 2.05%; padding: 0; z-index: 1; }
.modul_102_box a { display: block; padding: 20px 0 0 0; color: #1e283a; text-decoration: none; text-align: center; }
.modul_102_box a:hover { color: #1e283a; text-decoration: none; }
.modul_102_box a:hover .modul_102_icon::after { background-image: url(icon_dienstleistung_hover.png); }
.modul_102_box a:hover .modul_102_arrow { background-image: url(arrow_blue.png); }

.modul_102_icon { display: block; position: relative; top: 0; left: 0; width: 107px; height: 139px; margin: 0 auto; padding: 0; z-index: 1; }
.modul_102_icon::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 107px; height: 139px; margin: 0; padding: 0; z-index: 10; background-image: url(icon_dienstleistung.png); background-position: center center; background-repeat: no-repeat; }
.modul_102_box_text { display: block; padding: 20px 25px 1px 25px; }
.modul_102_box_text h3 { color: #1e283a; font-size: 18px; line-height: 24px; text-transform: uppercase; }
.modul_102_arrow { display: block; width: 100%; height: 24px; background-image: url(arrow_red.png); background-position: center center; background-repeat: no-repeat; }

@media all and (max-width:1200px) {
.modul_102_box_text { display: block; padding: 20px 15px 1px 15px; }
.modul_102_box_text h3 { white-space: nowrap; }
}
@media all and (max-width:980px) {
.modul_102_box { width: 43.13%; }
}

@media all and (max-width:768px) {
.modul_102_box { float: none; width: auto; margin: 0 1.56% 20px 1.56%; }
}
@media all and (max-width:480px) {
.modul_102_box { float: none; width: auto; margin: 0 10px 20px 10px; }
.modul_102_box_text h3 { white-space: normal; }
}


#subag_logo { display: block; position: absolute; top: 30px; left: 30px; width: 250px; height: 71px; margin: 0; padding: 0; z-index: 999; }
@media all and (max-width:768px) { #subag_logo { top: 10px; left: 10px; } }

/* ----------------------------------------------------------------------------------
   header_single_image
---------------------------------------------------------------------------------- */ 
.header_single_image_box { display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }
.header_single_image_text { display: block; position: absolute; top: 50%; left: auto; right: 40px; width: auto; height: auto; margin: 0; padding: 0; z-index: 10; 
font-size: 30px; line-height: 40px; text-align: right; }
/* .header_single_image_text_1 { display: inline-block; padding: 5px 20px; color: #FFF; background-color: #004295; background-color: rgba(0,66,149,0.8); } */
.header_single_image_text_1 { display: inline-block; padding: 5px 20px; color: #FFF; background-color: #ac0d32; background-color: rgba(172,13,50,0.8); }
.header_single_image_text_2 { display: inline-block; padding: 5px 20px; color: #004295; background-color: #FFF; background-color: rgba(255,255,255,0.8); }

@media all and (max-width:980px) {
.header_single_image_text { right: 30px; margin: -40px 0 0 0; font-size: 20px; line-height: 30px; }
.header_single_image_text_1,
.header_single_image_text_2 { padding: 5px 10px; }
}
@media all and (max-width:768px) {
.header_single_image_text { display: none; }
}

/* ----------------------------------------------------------------------------------
   slick-slider header_image
---------------------------------------------------------------------------------- */ 
.slick-slider .header_image_box { display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }
.slick-slider .header_image_text { display: block; position: absolute; top: auto; bottom: 0; left: 25%; width: 50%; height: auto; margin: 0; padding: 0; z-index: 10; 
font-size: 30px; line-height: 40px; text-align: center; text-transform: uppercase; background-color: #FFF; background-color: rgba(255,255,255,0.8); }
.slick-slider .header_image_text_1 { display: block; padding: 10px 20px 5px 20px; color: #1e283a; }
.slick-slider .header_image_text_2 { display: block; padding: 0 20px 10px 20px; color: #004295; }

@media all and (max-width:980px) {
.slick-slider .header_image_text { bottom: 20px; font-size: 22px; line-height: 30px; }
}
@media all and (max-width:768px) {
.slick-slider .header_image_text { display: none; }
}

/* ----------------------------------------------------------------------------------
   slick-slider
---------------------------------------------------------------------------------- */ 
.slick_2_images { display: block; margin: 0 0 20px 0; }
.slick_2_images .slider_image { display: block; width: auto; margin: 10px 2%; padding: 0; text-align: center; box-shadow: 0 3px 6px 0 #777; }

.slick_2_images .slick-prev { left: -100px; }
.slick_2_images .slick-next { right: -100px; }


@media all and (max-width:1400px) {
.slick_2_images .slick-prev { left: -50px; }
.slick_2_images .slick-next { right: -50px; }
}
@media all and (max-width:1200px) {
.slick_2_images .slick-prev { left: -30px; }
.slick_2_images .slick-next { right: -30px; }
}
@media all and (max-width:1024px) {
.slick_2_images .slick-prev { left: 20px; }
.slick_2_images .slick-next { right: 20px; }
}
@media all and (max-width:980px) {
.slick_2_images .slick-prev { left: 10px; }
.slick_2_images .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; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; overflow: hidden; }
#page { width: 100%; }

#header_top { width: auto; margin: 0 0 0 2.05%; }
#header_top span#header_top_subag { margin: 0 153px 0 0; }

#logo { margin: 0 0 0 2.05%; }
#navigation_not_responsive { margin: 0 0 0 280px; }


}

@media all and (max-width:1200px) {
#header_top span,
#header_top span#header_top_subag { margin: 0 40px 0 0; }
#navigation_not_responsive { margin: 0 0 0 260px; }

}

@media all and (max-width:1024px) {
#footer { width: auto; margin: 0; }
#footer_left { margin: 0 0 0 1.56%; }
#footer_right { }
#footer_copyright { margin: 0 0 0 1.56%; }
#footer_websitemacher { right: 1.56%; }
}

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

#header_top { text-align: center; }
#header_top span { margin: 0 10px; }
#header_top span#header_top_subag { display: block; margin: 0 10px 10px 10px; }

#logo { width: 160px; margin: 0 0 0 2.05%; }

#navigation_not_responsive { margin: 0 0 0 185px; }

}

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

h1, .like_h1 { font-size: 24px; line-height: 30px; } 
h2, .like_h2 { font-size: 20px; line-height: 25px; } 

#navigation_not_responsive { display: none; }

#header_bg { display: none; }
/* #logo { float: none; width: 206px; margin: 0 0 0 1.56%; } */
#logo { display: none; }
#logo_mobile { display: block; width: auto; margin: 0; padding: 10px 80px 10px 10px; background-color: #e1e2e4; }


#header_top { text-align: left; margin: 0 60px 0 1.56%; }
#header_top span,
#header_top span#header_top_subag { display: block; margin: 0 0 5px 0; }

#footer_copyright span { display: none;  }
}


@media all and (max-width:480px) {
.outer_box { float: none !important; width: auto !important; margin: 0 10px 15px 10px !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; }

h1, .like_h1 { font-size: 21px; line-height: 27px; } 
h2, .like_h2 { font-size: 18px; line-height: 24px; } 

#logo { margin: 0 0 0 10px; }

#header_top { margin: 0 60px 0 10px; }

#footer_left { clear: both; width: auto; margin: 0 10px 20px 10px; }
#footer_right { clear: both; width: auto; margin: 0 10px 20px 10px; }
#footer_copyright { padding: 0; margin: 0 10px 20px 10px; }
#footer_websitemacher { display: block; position: relative; top: 0; left: 0; bottom: auto; right: auto; width: auto; height: auto; margin: 0 10px; text-align: left; }

}