@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');

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

* { box-sizing: border-box; }

html, body {
font-family: Lato, Verdana, Geneva, sans-serif; font-weight: 300;
font-size: 16px; line-height: 22px;
color: #818181;
/* 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: #F1F1F1; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#062114+0,818181+100 */
background: #F1F1F1; 
background: -moz-linear-gradient(top,  #CCC 0%, #F1F1F1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #CCC 0%,#F1F1F1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #CCC 0%,#F1F1F1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCC', endColorstr='#F1F1F1',GradientType=0 ); /* IE6-9 */
background-attachment: fixed; }


/* ----------------------------------------------------------------------------------
   Schriften + Generelle CSS-Anpassungen fuer diese Webseite
---------------------------------------------------------------------------------- */ 
/* Farben: 
schwarz #404042 - larcobaleno
gruen #719857 - comzell
orange #ef7d00 - norbertzeller
blau #2b3a7b - chapeaux
rot #ed174b - chapeaux
*/

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

ul li { list-style-type: none; margin: 0 0 10px 0; padding: 0 0 0 22px; background-image: url(listpoint.png); background-position: top left; background-repeat: no-repeat; }
ol li { list-style-type: decimal; list-style-position: outside; margin: 0 0 10px 22px; 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: 24px; margin: 0 0 20px 0; color: #222; }
h1, .like_h1 { font-size: 40px; line-height: 46px; text-transform: uppercase; }
h2, .like_h2 { font-size: 30px; line-height: 36px; }
h3, .like_h3 { font-size: 18px; line-height: 24px; } 
h4, .like_h4 { font-size: 16px; } 
h5, .like_h5 { font-size: 14px; } 
h6, .like_h6 { font-size: 12px; } 

h1 strong, h1 .subline, .like_h1 strong,
h2 strong, h2 .subline, .like_h2 strong { display: inline-block; margin: 0; font-size: 23px; line-height: 29px; color: #818181; font-weight: normal; text-transform: none; }

h2 strong, h2 .subline, .like_h2 strong { font-size: 22px; line-height: 28px; }


p { margin: 0 0 20px 0; padding: 0; }
th, td { padding: 0 8px 6px 0; vertical-align: top; text-align: left; }

hr { clear: both; width: 86px; height: 4px; margin: 0 auto 20px auto; border: none; background-color: #5d5d5e; } 
hr.hr_left { margin:  0 0 20px 0; }

.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: 1460px | Abstand: 60px) */
.outer_box { clear: both; display: block; float: left; width: 91.78%; margin: 0 0 30px 4.11%; padding: 0; }

.box_width_full { width: 100%; margin: 0 0 30px 0; }
.box_width_1_2 { clear: none; width: 43.84%; }
.box_width_1_3 { clear: none; width: 27.85%; }
.box_width_2_3 { clear: none; width: 59.81%; }
.box_width_1_4 { clear: none; width: 19.86%; } 

.box_gray .outer_box_inner,
.box_orange .outer_box_inner
{ background-color: #f2f2f2; padding: 15px 15px 0 15px; }

.box_orange .outer_box_inner { background-color: #eee1d7; }


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

.section_bg_none { background-color: transparent; }
.section_bg_gray { background-color: #f1f2f3; }

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

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

@media all and (max-width:1460px) { .section_full, .section_1460 { width: auto; margin: 0; } }
@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_full,
.section_1460,
.section_1200,
.section_980 { clear: both; display: block; width: 100%; height: auto; margin: 0; padding: 0; }

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




/* ----------------------------------------------------------------------------------
 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: 46.0%; margin: 0; overflow: hidden; }
.zweispalter .flRight { float: right; display: block; width: 46.0%; 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; overflow: hidden; 
background-color: transparent;  }

/* Relative Bloecke innerhalb von "page" */
header, main, footer, nav, aside, article, section,
#page, #header_bg, #header, #logo, #header_image_bg, #header_image, #navigation_not_responsive, #main_bg, #content_bg, #aside_bg, #footer, #footer_inner, #footer_top_bg, #footer_top, #footer_bottom_bg, #footer_bottom {
display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }

#header_bg { background-color: #404042; height: 97px; z-index: 50; }

.comzell #header_bg { background-color: #719857; }
.norbertzeller #header_bg { background-color: #ef7d00; }
.chapeaux #header_bg { background-color: #2b3a7b; }


#navigation_not_responsive { padding: 27px 0 0 0; z-index: 50; }

#logo { position: absolute; top: 97px; left: 0; width: 376px; height: auto; z-index: 20; }


#header, #main_bg, #footer_top, #footer_bottom { width: 1350px; margin: 0 auto; }


#content_bg { float: right; width: 974px; background-color: #FFF; box-shadow: 0 0 3px 0 #818181; }
#aside_bg { float: left; width: 376px; margin: 130px 0 60px 0; background-color: #FFF; box-shadow: 0 0 3px 0 #818181; }
#aside { display: block; width: auto; padding: 40px 40px 20px 40px; }


#footer_top_bg { clear: both; padding: 0; background-color: #404042; }
#footer_top { padding: 50px 0 50px 376px; color: #FFF; font-size: 15px; line-height: 20px; }
#footer_top a { color: #FFF; text-decoration: none; }
#footer_top a:hover { color: #818181; text-decoration: none; }

#footer_top .footer_box { float:left; display: block; width: 22.85%; margin: 0 0 0 4.11%; padding: 0; }

#footer_top #footer_box_1 { width: 37.85%; }

#footer_top .footer_box_headline { display: block; margin: 0 0 20px 0; color: #FFF; font-weight: bold; text-transform: uppercase; }

.footer_social_media_link { display: inline-block; margin: 0 0 10px 0; line-height: 30px; vertical-align: middle; }
.footer_social_media_link span { display: inline-block; width: 30px; height: 30px; margin: 0 10px 0 0; padding: 0; overflow: hidden; background-color: #818181; border-radius: 50%; text-align: center; vertical-align: middle; }
.footer_social_media_link:hover span { background-color: #222; }
.footer_social_media_link span img { width: 24px; margin-bottom: 3px; }

.icon_box { text-align: center; }
.icon_box_icon { display: block; }


#footer_bottom_bg { clear: both; padding: 0; background-color: #000; }
#footer_bottom { padding: 15px 0 15px 376px; color: #FFF; font-size: 14px; line-height: 20px; text-align: center; }
#footer_bottom a { color: #FFF; text-decoration: none; }
#footer_bottom a:hover { color: #818181; text-decoration: none; }

#footer_bottom .footer_bottom_box { float:left; display: block; width: 27.85%; margin: 0 0 0 4.11%; padding: 0; }
#footer_bottom #footer_bottom_box_1 { text-align: left; }
#footer_bottom #footer_bottom_box_2 { text-align: center; }
#footer_bottom #footer_bottom_box_3 { text-align: right; }





/* ----------------------------------------------------------------------------------
   Module
---------------------------------------------------------------------------------- */ 
.header_slider { margin-bottom: 30px; }
.header_slider .slick-prev { left: 10px; }
.header_slider .slick-next { right: 10px; }


a.link_button { display: inline-block; width: auto; height: auto; padding: 10px 50px 10px 20px; background-color: #818181; color: #FFF; font-size: 16px; line-height: 20px; text-decoration: none;
background-image: url('arrow.png'); background-position: center right; background-repeat: no-repeat; }
a.link_button:hover { background-color: #404042; color: #FFF; text-decoration: none; }

.comzell a.link_button { background-color: #719857; }
.comzell a.link_button:hover { background-color: #404042; }



.icon_box { text-align: center; }
.icon_box_icon,
.icon_list_box_icon { display: block; width: 76px; height: 76px; margin: 0 auto 20px auto; padding: 0; overflow: hidden; background-color: #404042; border-radius: 50%; }


.icon_list_box { clear: both; display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0 0 20px 0; }
.icon_list_box_icon { clear: both; float: left; width: 50px; height: 50px; padding: 5px; }
.icon_list_box_text { display: block; margin: 0 0 0 75px; }

.icon_list_timeline {
display: block; position: absolute;
top: 0; left: 23px; width: 2px; height: 100%; z-index: -1;
border-right: 1px dashed #818181;
animation: avia_slide_down 1s 1 cubic-bezier(.175,.885,.32,1.275);
}
.icon_list_box:last-child .icon_list_timeline { display: none; }

.comzell .icon_box_icon { background-color: #719857; }
.comzell .icon_list_box_icon { background-color: #719857; }



.download_box { clear: both; display: block; margin: 0 0 20px 0; }
.download_icon { clear: both; display: block; float: left; width: 50px; margin: 0; padding: 5px 0 0 0; }
.download_text { display: block; width: auto; margin: 0 0 0 55px; padding: 0; }


table, tr, th, td {
	border:1px solid #808285;
	border-collapse: collapse;
	text-align: left;
	font-size: 14px; line-height: 20px;
}

table { width:100%; margin: 0 0 20px 0; padding: 0; }
th { padding: 10px 15px; background:#404042; color: #FaFaFa; font-weight: 400; font-size: 18px; }
td { padding: 10px 15px; }

tr:nth-child(even) { background: #f2f2f2; }
tr:nth-child(odd) { background: #fafafa; }

td span { display: block; }


/*
.bildergalerie { clear: both; }
.bildergalerie a { display: block; float: left; width: 27.85%; margin: 0 0 4.11% 4.11%; padding: 0; }
*/

.bildergalerie_container { clear: both; display: block; width: 91.78%; margin: 0 0 30px 4.11%; padding: 0; }


.bildergalerie { }
.bildergalerie_item { display: block; float: left; width: 33.333%; }
.bildergalerie_item a { display: block; margin: 10px; }
.bildergalerie_item a img { transition: all .5s ease-in-out; }
.bildergalerie_item a:hover img { opacity: 0.75; }


@media only screen and (max-width: 768px) {
    .bildergalerie_item { width: 50%; }
}


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

@media all and (max-width:1350px) {
    
#header, #main_bg, #footer_top, #footer_bottom { width: 100%; margin: 0; }

#logo { width: 27.85%; }    
    
#content_bg { width: 72.15%; }
#aside_bg { width: 27.85%; margin: 110px 0 60px 0; }
#aside { padding: 40px 10% 20px 10%; }    
    
#footer_top { width: auto; padding: 50px 0 50px 27.85%; }
#footer_bottom { width: auto; padding: 15px 0 15px 27.85%; }

    
.box_with_table table { width: 100% !important; height: auto !important; }    
.box_with_table tr, .box_with_table th, .box_with_table td { width: auto !important; height: auto !important; }    
}
    
@media all and (max-width:980px) {
h1, .like_h1 { font-size: 30px; line-height: 36px; }
h2, .like_h2 { font-size: 25px; line-height: 30px; }

h1 strong, h1 .subline, .like_h1 strong { font-size: 25px; line-height: 30px; }
h2 strong, h2 .subline, .like_h2 strong { font-size: 20px; line-height: 25px; }
    
/* 1/4 auf 1/2 umstellen */
.box_width_1_4 { width: 43.84%; margin: 0 0 30px 4.11%; }
.box_width_1_4_breakpoint { clear: both; }

#aside_bg { margin: 80px 0 50px 0; }

#footer_top { width: auto; padding: 30px 0; }
#footer_bottom { width: auto; padding: 15px 0; }

}

@media all and (max-width:768px) {
#navigation_not_responsive { display: none; }

#header_bg { height: auto; background-color: #F9F9F9 !important; border-bottom: 10px solid #404042; }

.comzell #header_bg { border-bottom: 10px solid #719857; }
.norbertzeller #header_bg { border-bottom: 10px solid #ef7d00; }
.chapeaux #header_bg { border-bottom: 10px solid #2b3a7b; }

#logo { position: relative; top: 0; left: 0; width: auto; max-width: 240px; margin: 0 80px 0 4.11%; }
    
#content_bg,
#aside_bg { clear: both; float: none; width: 100%; margin: 0; }

#footer_top { padding: 30px 0 10px 0; }
#footer_top .footer_box { clear: both; float: none; width: auto !important; margin: 0 4.11% 20px 4.11%; }
    
    
}


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

#footer_bottom { padding: 15px 0 5px 0; }
#footer_bottom .footer_bottom_box { clear: both; float: none; width: auto; margin: 0 4.11% 10px 4.11%; text-align: left !important;  }
    
}