/* CI-Farben */
:root {
  --color-std-font: #4b4b4b;

  --color-ci1: #102757; /*Verwendung: var(--color-ci1) */
  --color-ci2: #c51315;

  --color-ci-marketing: #60afc9;
  --color-ci-systemhaus: #4c5893;

  --color-ci-marketing-darkened: #5BABC5;
  --color-ci-systemhaus-darkened: #424F8B;
  
  --color-ci1-hover: #4c5893;
  --color-ci2-hover: #e2292b;
}

html, body, div, p, h1, h2, h3, span, a, table, td, form, input, textarea, select, button	
						{ margin: 0px; padding: 0px; font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 1.49em; font-weight: 400; color: var(--color-std-font); }


h1						{ font-size: 28px; line-height: 1.05em; color: var(--color-ci1); font-weight: 400; margin: 10px 0px 25px 0px; text-transform: uppercase; }
body.folgeseite h1		{ font-size: 28px; line-height: 1.0em; color: var(--color-ci1); font-weight: 400;  text-transform: uppercase;}
h2						{ font-size: 25px; line-height: 1.05em; color: var(--color-ci1); font-weight: 400; margin: 12px 0px 28px 0px; text-transform: uppercase; }
h2.sub					{ font-size: 24px; line-height: 1.05em; color: var(--color-ci1); font-weight: 400; margin: -18px 0px 15px 0px; text-transform: normal; }
h3						{ font-size: 22px; line-height: 1.25em; color: var(--color-ci1); font-weight: 400; margin: 15px 0px 14px 0px; text-transform: normal;}
h4						{ font-size: 19px; line-height: 1.25em; color: var(--color-ci1); font-weight: 400; margin: 10px 0px 10px 0px; text-transform: normal; }

@media only screen and (min-width: 995px) {    
    h1						{ font-size: 40px; font-weight: 400; margin: 15px 0px 35px 0px; }
    body.folgeseite h1		{ font-size: 38px; }
    h2						{ font-size: 34px; margin: 20px 0px 35px 0px; }
    h2.sub					{ font-size: 30px; font-weight: 400; margin: -30px 0px 30px 0px; }
    h3						{ font-size: 28px; font-weight: 400; margin: 25px 0px 20px 0px; }
    h4						{ font-size: 23px; font-weight: 400; margin: 15px 0px 10px 0px; }
}


hr 						{ background-color: none; border: 0; height: 1px; border-bottom: 1px solid rgba(0,0,0,0.15); }		

.centered				{ text-align: center; }						  


body 					{ width: 100%; height: 100%; background-color: #fff; }

img						{ vertical-align: middle; outline: none; }
a 						{ outline: none; }
div, input, select, textarea, a		{ box-sizing: border-box; }

input, textarea, select	{ -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.30s ease-in-out 0s; }
input[type=text], textarea	{ -webkit-appearance: none; } /* verhindert den Schatten-Effekt auf iOS-Geräten und im Safari*/

.clear					{ display: block; clear: both; }
.rounded				{ -moz-border-radius: 10px; border-radius: 10px; -webkit-border-radius: 10px; }
.shadow			        { -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); box-shadow: 0px 0px 10px rgba(0,0,0,0.4); } 

.opacity_25				{ opacity: 0.25; filter(opacity=0.25); }

.strtoupper				{ text-transform: uppercase; }
.lowercase				{ text-transform: none; }

strong 					{ font-weight: 600; } 

.text_gradient 			{ background: -webkit-linear-gradient(#4c5893, #102757);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent; }

.align_left				{ display: inline; float: left; }
.align_right			{ display: inline; float: right; }


/* Icons */
i 						{ color: inherit; }

/* ---- Links ---- */
a, a:link,	a:active, a:visited, button	{ text-decoration: none; color: var(--color-ci2); cursor: pointer; font-size: inherit; transition: all 0.30s ease-in-out 0s; }
a:hover						{ text-decoration: none; color: var(--color-ci2-hover); font-size: inherit;  }

.bn, .bn:link, .bn:active, .bn:visited	{ padding: 10px 20px; background-color: transparent; color: var(--color-ci1); border: 1px solid var(--color-ci1); cursor: pointer; -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px;  }
.bn:hover					{ background-color: var(--color-ci1); color: #fff; }

a.bn.rot					{ background-color: transparent; color: var(--color-ci2); border: 1px solid var(--color-ci2); }
a.bn.rot:hover				{ background-color: var(--color-ci2); color: #fff; }

a.bn_small					{ padding: 7px 12px; font-size: 14px; }
a.bn_bg_ci					{ background-color: var(--color-ci1); color: #fff; font-size: 19px; fonts-weight: 900; padding: 12px 20px; text-align: center; text-transform: uppercase; transition: all 0.35s ease-in-out 0s; }
a.bn_bg_ci:hover			{ background-color: var(--color-ci1-hover); text-decoration: none; }
	a.bn_bg_ci i.fa				{ color: #fff; margin-right: 8px;}
a.bn_border_ci				{ background-color: transparent; border: 1px solid #fff; color: #fff; transition: all 0.35s ease-in-out 0s;}
a.bn_border_ci:hover			{ background-color: transparent; border: 1px solid #fff; text-decoration: none; }
	a.bn_border_ci i.fa				{ color: red; margin-right: 8px; }
a.bn_border 				{ display: inline-block; border: 1px solid #d4d4d5; text-transform: uppercase; background-color: #fff; color: #58595b; padding: 8px 16px; text-align: center; box-sizing: border-box; transition: all 0.35s ease-in-out 0s; z-index: 10; }
	a.bn_border:hover 		{ border: 1px solid #58595b; color: #252525; text-decoration: none; }
		a.bn_border i 			{ color: inherit; font-size: 40px; line-height: 26px; font-weight: 100; }

a.bn_border_weiss 			{ display: inline-block; padding: 8px 30px; color: #fff; text-align: center; border: 1px solid rgba(255,255,255,1); }
a.bn_border_weiss:hover			{ background-color: rgba(255,255,255,0.7); }



/* ---- Tabellen, Formulare ---- */
table.width100 				{ width: 100%; margin: 20px 0px; }
table.widthmax 				{ width: 100%; max-width: 320px; margin: 20px 0px; }
th							{ font-weight: 900; text-align: left; }
td							{ font-weight: 400; text-align: left; }
table.border_ci				{ margin: 20px 0px; padding: 0px; border-spacing: 0; border-collapse: collapse; }
	table.border_ci	tr			{ background-color: #eaf1f7; }
	table.border_ci	tr:nth-child(odd)	{ background-color: #f3f8fa;  }
		table.border_ci	th			{ font-weight: 500; color: #000; padding: 10px 20px; }
		table.border_ci	td			{ font-weight: 200; color: #000; padding: 10px 20px; }
	
form 						{ display: inline-block; margin: 0px; padding: 0px; width: 100%; }

input[type=text] 			{ position: relative; width: auto; min-width: 100px; height: 40px; padding: 10px 12px; line-height: 1.0em; background-color: rgba(255,255,255,0.7); color: #000; border: 1px solid rgba(0,0,0,0.15); }
input[type=text]:focus 		{ background-color: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.4); }


input.disabled				{ border: 1px solid #eee; background-color: #fefefe; color: #bbb; font-style: italic; }
.form-validation.alert-danger { margin-bottom: 20px; }
.form-validation.alert-success { margin: 20px 0px; padding: 10px 20px; color: #3FAB3A !important; background-color: rgba(217,249,217,1.00); }



/* --------------- Allgemeine Klassen für DIV-Aufbau ------------- */
.container				{ position: relative; align: center; width: 600px; height: auto; margin: 0px auto; padding: 0px 15px; margin-left: auto; margin-right: auto; box-sizing: border-box; background-color: transparent; }

.container-full			{ position: relative; align: center; width: 100%; height: auto; margin: 0px auto; padding: 0px 15px; margin-left: auto; margin-right: auto; box-sizing: border-box; background-color: transparent; }

.content-center		    { text-align: center; }
.content-right			{ text-align: right; }
.zentriert				{ align: center; margin: 0px auto; padding-top: 40px; width: 600px; height: auto; min-height: 400px; }

.section 				{ position: relative; color: inherit; padding: 30px 0; }

.section-std-padding	{ padding: 30px 0px; }
.section-big-padding	{ padding: 60px 0px; }

.first-section			{ padding-top: 180px; }

.a_sprung 				{ position: absolute; margin-top: -140px; width: 100%; /*height: 2px; border-top: 1px solid red;*/ }


/* Viertel-Box */
.content-col4-1			{ position: relative; display: inline-block; float: left; margin: 0px; width: 24%; margin-right: 0.6665%; margin-left: 0.6665%; height: auto; box-sizing: border-box; padding: 20px 20px; background-color: transparent; }
/* Drittel-Box */
.content-col3-1			{ position: relative; display: inline-block; float: left; margin: 0px; width: 32%; margin-right: 1%; margin-left: 1%; height: auto; box-sizing: border-box; padding: 20px 20px; background-color: transparent; }
/* Zwei-Drittel-Box */
.content-col3-2			{ position: relative; float: left; margin: 0px; width: 66%; margin-right: 1%; margin-left: 1%; height: auto; box-sizing: border-box; padding: 20px 20px; background-color: transparent; }
/* Halb-Box */
.content-col2-1			{ position: relative; float: left; margin: 0px; width: 48%; margin-right: 1%; margin-left: 1%; height: auto; box-sizing: border-box; padding: 20px 0px; background-color: transparent; }
/* Full-Row */
.content-full-row		{ position: relative; display: block; clear: both; width: 100%; height: auto; margin: 35px 0px; }
	.content-full-row img	{ position: relative; width: 100%; height: auto; }

.two-text-columns		{ -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 4rem; -webkit-column-gap: 4rem; column-gap: 4rem; }
	@media only screen and (max-width: 780px) { 
		.two-text-columns		{ -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
			.two-text-columns div { margin-bottom: 25px; }
	}

/* Box mit Bild links und Text rechts */
.box-img-text			{ position: relative; display: block; clear: both; width: 100%; height: auto; margin: 55px 0px; background-color: #fff; }
	.box-img-text .align_left	{ position: absolute; width: 40%; height: 100%; max-height: 360px; background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; overflow: hidden; }	
	.box-img-text .align_right	{ width: 60%; height: auto; min-height: 280px; padding: 0px 60px; box-sizing: border-box; }
	@media only screen and (max-width: 1199px) { 
		.box-img-text .align_right	{ padding: 0px 50px; }
	}
	@media only screen and (max-width: 995px) { 
		.box-img-text .align_left	{ position: relative; display: block; clear: both; width: 100%; height: auto; min-height: 380px; }
		.box-img-text .align_right	{ display: block; clear: both; width: 100%; height: auto; min-height: auto; padding: 0px 40px; }
			.box-img-text .align_right h3	{ font-size: 21px; }
	}
	@media only screen and (max-width: 780px) { 
		.box-img-text .align_left	{ position: relative; display: block; clear: both; width: 100%; height: auto; min-height: 280px; }
		.box-img-text .align_right	{ display: block; clear: both; width: 100%; height: auto; min-height: auto; padding: 30px 25px; }
			.box-img-text .align_right h3	{ font-size: 20px; }
	}

	@media only screen and (min-width: 1200px) { 
		.box-img-text .align_right h2	{ margin-top: 0px; }
	}

/* Margins für Boxen in Zeilen */
.row 					{ width: 100%; height: auto; display: inline-block; padding: 0px; margin: 0px; box-sizing: border-box; }
	.row div.content-col4-1:first-child 	{ margin-left: 0; }
	.row div.content-col3-1:first-child 	{ margin-left: 0; }
	.row div.content-col3-2:first-child 	{ margin-left: 0; }
	.row div.content-col2-1:first-child 	{ margin-left: 0; }
	.row div.content-col4-1:last-child 		{ margin-right: 0; }
	.row div.content-col3-1:last-child 		{ margin-right: 0; }
	.row div.content-col3-2:last-child 		{ margin-right: 0; }
	.row div.content-col2-1:last-child 		{ margin-right: 0; }
	
	.row:after { content: ""; display: table; clear: both; float: none; width: 100%; height: 0px; }
	


/* Datensätze mit einzelnen Elementen (mehrspaltig und -zeilig dargestellt) */
.overview               { width: 100%; height: auto; margin: 20px auto; font-size: 0px;  }
    .element                { display: block; width: 100%; height: auto; padding: 15px 15px; margin: 0px; }

@media only screen and (min-width: 740px) {
    .element                { display: inline-block; clear: none; width: 50%; min-height: 80px; }
}      
@media only screen and (min-width: 1000px) {
    .element                { width: 33.33%; min-height: 90px; }
}

				  
/* --------- Boxmodell ------- */
#head						{ position: absolute; margin: 0px; width: 100%; height: auto; padding: 0px 0px; box-sizing: border-box; background-color: #fff; z-index: 800; }
	
	#top_bar 					{ display: block; clear: both; height: 42px; padding: 20px 0px 0px 0px; width: 100%; background-color: transparent; text-align: right; }
		#top_bar a					{ color: #969696; font-size: 14px; margin-left: 18px; }
		#top_bar a:hover			{ color: #555; }
			#top_bar a i.fa				{ font-size: 18px; margin-right: 3px; margin-top: -4px; vertical-align: middle; }
		#top_bar span					{ color: inherit; font-size: inherit; font-weight: inherit; }

	#jump-to-index 				{ position: absolute; top: 11px; left: -9px; width: 51px; height: 28px; transition: 0.2s ease-in all; z-index: 975; }
	#jump-to-index:hover 				{ left: -4px; }
		#jump-to-index img				{ width: 100%; height: auto; max-height: 100%; }

	#nav_bar					{ position: relative; display: block; clear: both; width: 100%; padding: 0px; box-sizing: border-box; background-color: transparent;  /*transition: all 0.5s ease-in-out 0.5s;*/ }
		#nav_bar .container				{ z-index: 400; }
			#logo						{ display: inline-block; float: none; box-sizing: content-box; margin-top: -7px; padding: 0px 0px 0px 0px; transition: all 0.15s ease-in-out 0.15s; }
				#logo img					{ width: auto; height: 100%; margin: 0px; padding: 0px; }
	
	#navigation					{ /* wird in den MediaQuerys definiert */ }
		#navigation ul li a			{ text-transform: none; }
	
	#toggle_mobile_navigation	{ display: block; float: right; padding: 0px; margin: 0px; font-size: 21px; margin-top: 10px; cursor: pointer; padding: 10px; transition: all 0.25s ease-in-out 0s; }
		#toggle_mobile_navigation  i	{ font-size: 38px; color: #fff; }
	    #toggle_mobile_navigation .menu { cursor: pointer; margin: 0 auto; padding-left: 1.25em; position: relative; width: 30px; height: 30px; }
            #toggle_mobile_navigation .menu-global { backface-visibility: hidden; position: absolute; left: 0; border-top: 4px solid var(--color-ci1); width: 100%; transition: 0.45s; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px;  }
            #toggle_mobile_navigation .menu-top { top: 0; }
            #toggle_mobile_navigation .menu-middle { top: 10px; }
            #toggle_mobile_navigation .menu-bottom { top: 20px; }
            #toggle_mobile_navigation .menu-top-click { backface-visibility: hidden; top: 12px; transform: rotate(50deg); border-top: 4px solid var(--color-ci2); transition: 0.45s 0.5s; }
            #toggle_mobile_navigation .menu-middle-click { opacity: 0; }
            #toggle_mobile_navigation .menu-bottom-click { backface-visibility: hidden; top: 12px; transform: rotate(-410deg); border-top: 4px solid var(--color-ci2); transition: 0.45s 0.5s; }

    
	@media only screen and (max-width: 998px) { 
		#head						{ height: auto; }
		#toggle_mobile_navigation	{ position: absolute; top: 8px; right: 8px; z-index: 9999;  }
			#toggle_mobile_navigation.active i	{ color: #ddd; }
		#navigation					{ position: fixed; display: none; overflow: auto; width: 100%; height: 100%; left: 0px; top: 109px; margin: 0px; right: 0; box-sizing: border-box; padding: 30px 0px 40px 0px; background-color: rgba(16,39,87,0.95); z-index: 890; -webkit-box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.27); -moz-box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.27); box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.27); }
		#top_bar 					{ display: block; height: 38px; padding: 8px 20px 8px 20px; background-color: #f6f6fa; }
			#top_bar a					{ color: rgba(16,39,87,0.75); font-size: 13px; font-weight: 500; margin-left: 9px; }
			#top_bar a:hover			{ color: rgba(16,39,87,0.9); font-size: 13px; font-weight: 500; margin-left: 9px; }
		      #top_bar a i.fa				{ font-size: 16px; margin-right: 1px; vertical-align: top; margin-top: 4px; }
					
		#schnellkontakt 			{ display: none; }
		#nav_bar					{ display: block; clear: both; height: 72px; padding: 10px 20px; z-index: 970; }
			#logo						{ width: auto; height: 44px; padding: 0px; margin: 5px 0px 0px 0px; z-index: 999; }
				#logo img						{ }
			#navigation > ul				{ display: block; clear: both; width: 100%; height: 100%; margin: 0px; padding: 0px; z-index: 900;  }
				#navigation > ul > li			{ display: block; clear: both; float: none; width: 100%; height: auto; margin: 2px 0px; padding: 1px 0px; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.1); }
					#navigation ul li a 		{ display: block; float: none; text-align: left; width: 100%; height: auto; color: rgba(255,255,255,0.8); padding: 12px 10px 12px 20px; box-sizing: border-box; text-transform: none; font-size: 19px; line-height: 19px; font-weight: 500; }
					#navigation ul li a:hover	{ text-decoration: none; color: #fff; }
					#navigation > ul > li.active > a	{ color: var(--color-ci2); }
					#navigation > ul > li > ul > li.active > a	{ color: var(--color-ci2-hover); }
				#navigation > ul > li > ul			{ display: block; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px;  }
				/* Navi - 1te Ebene*/
				#navigation > ul > li 		{ border-bottom: 1px solid rgba(255,255,255,0.2); }
                #navigation > ul > li > a 		{  }   
				/* Navi - 2te Ebene*/
				#navigation > ul > li > ul		{ display: none; clear: both; height: auto; margin: 2px 0px 10px 0px; padding: 0px;list-style-type: none;  }
                #navigation > ul > li > ul > li > a     { font-weight: 400; font-size: 0.95em; padding: 7px 10px 7px 50px; }
				#navigation > ul > li > ul > li > a:before    { position: absolute; content: "\f105"; font-family: 'FontAwesome'; color: #fff; font-size: 15px; margin: 0px 0px 0px -15px; width: 26px; }
                #navigation > ul > li > ul > li.active > a:before    { color: var(--color-ci22); }
                #navigation > ul > li.active > ul       { display: block; }
				/* Navi - 3te Ebene */
                #navigation > ul > li > ul > li > ul	{ display: none; clear: both; height: auto; margin: 3px 0px 15px 0px; padding: 0px; list-style-type: none; }
                #navigation > ul > li > ul > li > ul > li	{ list-style-type: none; }
                #navigation > ul > li > ul > li > ul > li > a     { font-size: 0.92em; padding: 6px 5px 6px 60px; text-transform: none; }
				#navigation > ul > li> ul > li.active  > ul		{ display: block; } 
				
		/* ---- Sticky-Darstellungen ---- */
		#head.sticky				{ position: fixed; height: 64px; padding: 0px 0px; top: 0; box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); background-color: rgba(255,255,255,0.95); opacity: 1; transition-duration: 0.1s, 0.1s, 0.1s, 0.2s; transition-property: width, height, background-color, transform; transition-timing-function: ease, ease, ease, ease; }
			#jump-to-index 				{ top: 5px; }			
			#head.sticky #top_bar	{ display: none; }
			#head.sticky #nav_bar		{ }
				#head.sticky #nav_bar #logo 		{ width: auto; height: 38px; }
					#head.sticky #nav_bar #logo img		{ height: 100%; padding: 0; }
					#head.sticky #nav_bar #logo.logo_marketing,
					#head.sticky #nav_bar #logo.logo_systemhaus	{ margin-left: 25px; height: 34px; margin-top: 6px; }
				#head.sticky #nav_bar .container	{ padding-top: 0px; }		
				#head.sticky #toggle_mobile_navigation	{ margin-top: 4px; }
				#head.sticky #navigation	{ top: 64px; padding-top: 90px; padding: 0px; }
	}
	@media only screen and (min-width: 999px) { 
		#head						{ padding-left: 20px; padding-right: 20px; }
		#toggle_mobile_navigation	{ display: none; }
		#top_bar 					{ display: block; }
        #jump-to-index 				{ top: 7px; left: -8px; width: 70px; height: 42px; }
		#logo						{ width: auto; height: 60px; margin-top: 0px; }
		#logo.logo_marketing		{ height: 38px; margin-top: 26px; }
		#logo.logo_systemhaus		{ height: 38px; margin-top: 26px; }
		#head #nav_bar #logo.logo_marketing,
		#head #nav_bar #logo.logo_systemhaus	{ margin-left: 5px; }
        #navigation					{ display: inline-block !important; float: right; width: auto; height: auto; box-sizing: border-box; margin: 20px 0px 0px 0px; padding: 0px; text-align: right; z-index: 900; }
			#navigation ul				{ display: block; clear: both; float: right; width: 100%; height: 100%; margin: 0px auto 0px auto; align: center; padding: 0px; }
				#navigation ul li				{ display: inline-block; float: none; width: auto; height: 100%; margin: 0px 0px; padding: 0px 0px 0px 0px; }
					#navigation > ul > li > a			{ display: inline-block; float: none; width: auto; height: 100%; color: #000; font-size: 17px; font-weight: 400; text-transform: none; padding: 20px 10px 20px 10px; margin: 0px 0px 0px 16px; box-sizing: border-box; transition: all 0.2s ease-in-out 0s;  }
					#navigation ul li a:hover, 
					#navigation > ul > li.hover > a	{ text-decoration: none; color: var(--color-ci1-hover); }
					#navigation > ul > li.active > a	{ color: var(--color-ci2);  }						
		            #navigation ul li:last-child a		{ padding-right: 0px; }
					/* Navi - 2te Ebene */
					#navigation > ul > li  ul			{ position: absolute; left: auto; display: none; width: auto; width: 270px; height: auto; border: none; margin: 0px; padding: 0px; background-color: rgba(255,255,255,1); list-style: none; list-style-type: none; box-sizing: border-box; z-index: 600; }
					#navigation > ul > li > ul			{ -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.2); box-shadow: 0px 1px 2px rgba(0,0,0,0.2); }
					#navigation > ul > li > ul				{ padding: 0px 0px 5px 0px;  }
					#navigation > ul > li:last-child  ul	{ margin-left: -80px; }
						#navigation > ul > li > ul li			{ display: block; width: 100%; height: auto; text-align: left; list-style: none; list-style-type: none; margin: 0px; padding: 0px; transition: all 0.2s ease-in 0s; }
							#navigation > ul > li > ul li a		{ display: block; clear: both; width: 100%; height: 40px; font-size: 14px; line-height: 1.05em; padding: 14px 22px 6px 26px; margin: 0px; font-weight: 500; color: #555; box-sizing: border-box; text-decoration: none; /*border-bottom: 1px solid rgba(0,0,0,0.05); */ }
							#navigation > ul > li > ul > li > a:hover,
							#navigation > ul > li > ul > li.hover > a	  { text-decoration: none; color: var(--color-ci1); background-color: #f2f2f2; padding-left: 32px !important; padding-right: 8px !important; }
							#navigation > ul > li > ul > li.hover > a:before,
							#navigation > ul > li > ul > li > a:hover:before    { position: absolute; content: "\f105"; font-family: 'FontAwesome'; color: var(--color-ci2); font-size: 15px; margin: 0px 0px 0px -10px; width: 26px; }
							
							#navigation > ul > li > ul li.active > a	{ color: var(--color-ci2);  }
					#navigation > ul > li > ul			{ display: none; }
					/* Navi - 3te Ebene */
					#navigation > ul > li > ul > li > ul { /* Vererbung von 2ter Ebene - und: */ position: relative; display: none; left: auto; margin: 0px; padding: 5px 0px 10px 10px; border-bottom: 1px solid rgba(0,0,0,0.08);  }
					#navigation > ul > li:hover > ul,
					#navigation > ul > li > ul > li.active > ul { display: block; }	
					#navigation > ul > li > ul > li > ul > li > a		{ height: 38px; font-size: 13px; }
					/*#navigation > ul > li > ul li a:hover,
					#navigation > ul > li > ul > ul > li.hover > a	  { text-decoration: none; color: var(--color-ci1); background-color: transparent; padding-left: 32px !important; padding-right: 8px !important; }
					*/	
					#navigation > ul.welt.marketing > li > a		{ font-size: 13px; max-width: 115px; min-height: 51px; line-height: 1.1; padding: 6px 2px 0px 2px; margin-left: 2px; text-align: left; }
		
		/* ---- Sticky-Darstellungen ---- */
		#head.sticky				{ position: fixed; height: 70px; padding: 5px 20px; top: 0; opacity: 1; background-color: rgba(255,255,255,0.99); -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2); box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2); z-index: 810; transition-duration: 0.1s, 0.1s, 0.1s, 0.2s; transition-property: width, height, background-color, transform; transition-timing-function: ease, ease, ease, ease; }
			#head.sticky #top_bar	{ display: none; }
			#head.sticky #nav_bar		{ height: auto; padding: 0px 0px; }
			#head.sticky #jump-to-index 				{ top: 10px; left: -9px; width: 54px; height: 32px; }
				#head.sticky #nav_bar #logo 		{ width: auto; height: 42px; margin-top: 8px; padding-top: 0px; padding-bottom: 0px; }
					#head.sticky #nav_bar #logo img		{ width: auto; height: 42px; padding: 0; }
				#head.sticky #nav_bar #logo.logo_marketing 	{ margin-left: 25px; height: 45px; margin-top: 12px; }
					#head.sticky #nav_bar #logo.logo_marketing img { height: 38px; width: auto; }
				#head.sticky #nav_bar #logo.logo_systemhaus { margin-left: 25px; height: 45px; margin-top: 12px; }
					#head.sticky #nav_bar #logo.logo_systemhaus img { height: 38px; width: auto; }
            #head.sticky #navigation	{ margin-top: 5px; padding: 0px 0px; }
			#head.sticky #navigation ul li a		{ padding-top: 13px; padding-bottom: 22px; text-shadow: none; }
			#head.sticky #navigation ul.welt.marketing li a		{ padding-top: 3px; padding-bottom: 5px; }
            #head.sticky #navigation ul li:last-child a	{ padding-right: 0px; }
            #head.sticky #toggle_mobile_navigation	{ margin-top: 0px; }
	}
	@media only screen and (min-width: 1200px) { 
		#head						{ padding-left: 50px; padding-right: 50px; }
		#navigation > ul > li > a			{ margin: 0px 0px 0px 15px; padding: 20px 20px 25px 20px; }
		#navigation > ul.welt.marketing > li > a		{ font-size: 14px; max-width: 140px; padding: 6px 5px 0px 5px; margin-left: 5px; }
		#logo						{ width: auto; height: 71px; margin-top: -10px; }		
		/* ---- Sticky-Darstellungen ---- */
		#head.sticky				{ padding: 5px 50px; }
		#head.sticky #navigation ul li a		{ text-shadow: none; }
	}
	@media only screen and (min-width: 1600px) { 
		#logo.logo_marketing		{ width: auto; height: 50px; margin-top: 6px; }
		#logo.logo_systemhaus		{ width: auto; height: 50px; margin-top: 6px; }
		#head #nav_bar #logo.logo_marketing,
		#head #nav_bar #logo.logo_systemhaus	{ margin-left: 30px; }
		#navigation > ul.welt.marketing > li > a		{ font-size: 15px; max-width: 180px; padding: 6px 10px 0px 10px; margin-left: 16px; }
	}
	@media only screen and (min-width: 1800px) { 
		#logo.logo_marketing		{ width: auto; height: 60px; margin-top: -2px; }
		#logo.logo_systemhaus		{ width: auto; height: 60px; margin-top: -1px; }
		#head #nav_bar #logo.logo_marketing,
		#head #nav_bar #logo.logo_systemhaus	{ margin-left: 40px; }
		#navigation > ul.welt.marketing > li > a		{ font-size: 16px; max-width: 190px; padding: 6px 10px 0px 10px; }
	}


/* ------ Section-Formatierungen ------ */
#section-intro				{ position: relative; clear: both; width: 100%; min-height: 340px; height: 49vw; padding-top: 100px; padding-bottom: 0px; box-sizing: border-box; margin-bottom: 0px; background-color: transparent; overflow: hidden; z-index: 500; }
	#section-intro .entry 		{ position: absolute; height: 100%; padding: 0px; top: 100px; color: #fff; transition: all 0.35s ease-out 0.05s; transitioN: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;  }
	#section-intro .entry::after { content: ''; position: absolute; width: 155%; height: 155%; left: -25%; top: -25%; transform: rotate(12deg); background-color: var(--color-ci-marketing-darkened); }
	#section-intro #entry-systemhaus::after { left: 0%; border-left: 8px solid #fff; background-color: var(--color-ci-systemhaus-darkened); }
	#section-intro #entry-marketing 	{ left: 0px; width: 50%; z-index: 100;  }
		/*Hintergrundgrafiken*/
		#section-intro #entry-marketing::before 	{ content: ''; position: absolute; width: 60%; right: -10%; height: 100%; background-image: url('../images/entry-bg_marketing.png'); background-repeat: no-repeat; background-size: auto 80%; background-position: 100% 85%; opacity: 0.2; filter(opacity=0.2); z-index: 110; transition: all 0.30s ease-in-out 0s;  }
		#section-intro #entry-marketing:hover::before 	{ right: 5%; opacity: 0.8; filter(opacity=0.8);  }
		#section-intro #entry-systemhaus::before 	{ content: ''; position: absolute; width: 60%; right: -5%; height: 100%; background-image: url('../images/entry-bg_systemhaus.png'); background-repeat: no-repeat; background-size: auto 80%; background-position: 5% 55%; opacity: 0.2; filter(opacity=0.2); z-index: 110; transition: all 0.30s ease-in-out 0s;  }
		#section-intro #entry-systemhaus:hover::before 	{ right: -10%; opacity: 0.8; filter(opacity=0.8);  }	
		#section-intro #entry-systemhaus 	{ right: 0px; width: 50%; z-index: 110; }
	
	#section-intro .entry .wrapper 		{  position: absolute; z-index: 120; width: 80%; height: 40%; left: 50%; top: 28%; transform: translate(-50%,-50%); transition: all 0.35s ease-out 0s; }
		#section-intro #entry-marketing .wrapper 	{ left: 48%; }
		#section-intro #entry-systemhaus .wrapper 	{ left: 60%; }
			#section-intro .entry div 		{ color: #fff; }
			#section-intro .entry img 		{ display: block; width: auto; max-width: 32vw; height: auto; margin-top: 60px; margin-bottom: 0px;  }
			#section-intro .entry h2		{ display: none; color: #fff; font-weight: 600; font-size: 1.8rem; line-height: 2.0rem; transition: all 0.5s ease-out 0s; }
				#section-intro .entry h2 span 	{ display: block; clear: both; margin-bottom: 0.5rem; color: #fff; font-size: 1.1rem; line-height: 1.7rem; text-transform: none; }
			#section-intro .entry span 		{ color: #fff; font-size: 1.1rem; line-height: 1.7rem; text-transform: none; }
			#section-intro .entry .bn  		{ display: inline-block; font-size: 0.8rem; line-height: 1.0em; background-color: rgba(255,255,255,0.3); border: none; color: #fff; }
			#section-intro .entry .bn:hover  	{ background-color: rgba(255,255,255,0.95); border: none; color: var(--color-ci2); }
				#section-intro .entry .bn span 		{ font-size: inherit; line-height: inherit; color: inherit; }
			#section-intro .entry:hover .bn  	{ opacity: 1; filter(opacity=1); }
			#section-intro .entry.inactive h2 	{ opacity: 0; filter(opacity=0);  }
		
@media only screen and (max-width: 998px) {
	#section-intro .entry .bn  		{ margin-top: 9vw; padding-left: 8px; padding-right: 8px; background-color: rgba(76,88,147,0.9); }
	#section-intro #entry-marketing::before 	{ right: -15%; background-size: auto 80%; background-position: 5% 85%; }
	#section-intro #entry-marketing:hover::before 	{ right: -15%; }
		#section-intro #entry-systemhaus::before 	{ right: -10%; background-size: auto 80%; background-position: 2% 55%; }
		#section-intro #entry-systemhaus:hover::before 	{ right: -10%; }
}

@media only screen and (min-width: 999px) {
	#section-intro				{ min-height: 560px; height: 35vw; padding-top: 140px; }
		#section-intro .entry 		{ top: 130px; }
			#section-intro .entry .wrapper 		{ width: 37vw; top: 38%; }
			#section-intro .entry img 		{ height: auto; margin-top: 0px; margin-bottom: 22px; max-width: 20vw; }	
			#section-intro .entry h2		{ display: block; }
			#section-intro .entry .bn  		{ font-size: 1.0rem; line-height: 1.0em; opacity: 0; }
		#section-intro #entry-marketing .wrapper 	{ left: 43%; }
		#section-intro #entry-systemhaus .wrapper 	{ left: 54%; }
		/* Hover-Effekte*/
		#section-intro #entry-marketing.active 		{ width: 66%; }
		#section-intro #entry-systemhaus.active 	{ width: 66%; }
		#section-intro #entry-marketing.inactive 	{ width: 34%; background-image: url(); }
		#section-intro #entry-systemhaus.inactive 	{ width: 34%; background-image: url(); }
		#section-intro #entry-marketing.inactive::before 	{ opacity: 0; }
		#section-intro #entry-systemhaus.inactive::before 	{ opacity: 0; }	
		#section-intro #entry-marketing.active::after 	{ background-color: var(--color-ci-marketing); }
		#section-intro #entry-systemhaus.active::after 	{ background-color: var(--color-ci-systemhaus);  }
		#section-intro .entry.inactive .wrapper 	{ /*top: 52%;*/ opacity: 0.5; }
		#section-intro #entry-marketing.inactive .wrapper 	{ left: 20vw; }
		#section-intro #entry-systemhaus.inactive .wrapper 	{ left: 25vw; }
		#section-intro #entry-marketing.active .wrapper 	{ left: 40%; }
		#section-intro #entry-systemhaus.active .wrapper 	{ left: 50%; }
}
@media only screen and (min-width: 1500px) { 
	#section-intro .entry .wrapper 		{ width: 31vw; height: 40%; top: 38%; }
	#section-intro .entry img 		{ margin-bottom: 40px; max-width: 25vw; }
		#section-intro .entry h2		{ font-size: 2.4rem; line-height: 2.5rem;  }
		#section-intro .entry h2 span 	{ margin-bottom: 0.8rem; font-size: 1.4rem; line-height: 1.9rem; } 
	#section-intro #entry-marketing .wrapper 	{ left: 48%; }
	#section-intro #entry-systemhaus .wrapper 	{ left: 52%; }
	/* Hover-Effekte*/
	#section-intro #entry-marketing.active 		{ width: 66%; }
	#section-intro #entry-systemhaus.active 	{ width: 66%; }
	#section-intro #entry-marketing.inactive 	{ width: 34%; background-image: url(); }
	#section-intro #entry-systemhaus.inactive 	{ width: 34%; background-image: url(); }
}





/* Section Unternehmen */ 
#section-unternehmen 		{ text-align: center; padding-top: 15px; }
	#section-unternehmen h1 	{ background: -webkit-linear-gradient(#4c5893, #102757);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent; }
	#section-unternehmen a.bn 	{ display: inline-block; clear: both; margin: 10px 0px 5px 0px; }



/* Section Aktuelles & Angebote */ 
#section-news 				{ background-color: #fafafa; padding: 35px 20px; }
#section-news.bg_weiss 		{ background-color: #fff; }
	#section-news h2 			{ display: block; text-align: center; }
	.slider_news				{ display: block; clear: both; width: 100%; height: auto; margin: 30px auto 70px auto !important; }
	.news_overview				{ display: block; width: 100%; height: auto; margin: 10px 0px 20px 0px; font-size: 0px; }
		.slider_news .slick-slide   { display: table-cell; vertical-align: middle; width: 100%; height: auto; text-align: center; }
		.news_overview .element		{ display: inline-block; vertical-align: middle; width: 100%; height: auto; text-align: center; }
		  .slider_news .slick-slide a,
		  .news_overview a		{ display: inline-block; width: auto; height: 100%; cursor: pointer; text-align: center; vertical-align: middle; background-color: #fff; -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.15); box-shadow: 0px 1px 2px rgba(0,0,0,0.15); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.20s ease-in-out 0.0s; }
			.slider_news .slick-slide a:hover,
			.news_overview a:hover { opacity: 0.85; -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.35); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.35); box-shadow: 0px 1px 3px rgba(0,0,0,0.35); }
				.slider_news .slick-slide a img,
				.news_overview a img { width: 100%; height: auto; margin: 0px auto; text-align: center; vertical-align: middle;  transition: all 0.15s ease 0.1s; }
				.slider_news .element .pic,
				.news_overview .element .pic { display: block; clear: both; width: 100%; height: 44vw; margin: 0px; overflow: hidden; background-color: #ddd; background-size: cover; background-position: center center; transition: all 0.25s ease 0.1s; }
				.slider_news .element .desc,
				.news_overview .element .desc { display: block; clear: both; width: 100%; min-height: 130px; height: auto; margin: 0px auto 5px auto; box-sizing: border-box; font-size: 0.85em !important; line-height: 1.34em !important; padding: 14px 10px 10px 10px; text-align: center; }
				.slider_news .desc h3,
				.news_overview .desc h3 	{ height: auto; margin: 5px 0px 5px 0px; font-size: 21px; line-height: 1.1em; font-weight: 500; text-align: center; color: #4b4b4b; text-transform: none; }
				.slider_news .desc .datum,
				.news_overview .desc .datum   { display: block; margin: 5px 0px 11px 0px; font-size: 15px; text-align: center; font-weight: 400; color: #969696; }
			.slider_news .slick-slide a:hover h3,
			.news_overview a:hover h3	{ color: var(--color-ci2); }			

	.slider_news .slick-prev 		{ left: 50%; top: auto; width: 30px; height: 30px; bottom: -35px; margin-left: -30px; }
	.slider_news .slick-next 		{ left: 50%; top: auto; width: 30px; height: 30px; bottom: -35px; margin-left: 10px; }
	.slider_news .slick-prev::before, 
	.slider_news .slick-next::before { content: '\f104'; font-family: 'FontAwesome'; font-size: 30px; color: #969696; }
	.slider_news .slick-next::before { content: '\f105'; }

@media only screen and (min-width: 600px) {	
	.slider_news .element .pic	{ height: 25vw; }
	.news_overview .element		{  width: 48%; margin: 1%; }
		.news_overview .element .pic	{ height: 25vw; }
}

@media only screen and (min-width: 995px) {
	#section-news 		{ padding: 60px 0px 30px 30px; }
		#section-news h2 { display: inline-block; float: left; text-align: left; width: 19%; margin-left: 1%; margin-top: 0px; }
		#section-news h2 + div.clear 	{ display: none !important; }
		#section-news .slider_news				{ display: inline-block; float: right; clear: none; width: 77%; margin-top: 0px !important; }
			.slider_news .element	{ padding-top: 0px !important; }
				.slider_news .element .pic	{ height: 13vw; }
				.slider_news .element .desc { min-height: 260px; padding: 17px 10px 8px 10px; }
		/*.news_overview .element		{  width: 24.25%; margin: 0.25%; vertical-align: top; }
			.news_overview .element .pic	{ height: 13vw; }
			.news_overview .element .desc { min-height: 215px; padding: 17px 15px 10px 15px; }*/
		.news_overview .element		{  width: 32.7%; margin: 0.31%; vertical-align: top; }
			.news_overview .element .pic	{ height: 16vw; }
			.news_overview .element .desc { min-height: 295px; padding: 17px 15px 10px 15px; }
}
@media only screen and (min-width: 1400px) {
		#section-news h2 { width: 16%; margin-left: 5%;  }
		#section-news .slider_news				{ width: 77%; }
			.slider_news .element .pic	{ height: 10vw; }	
			.slider_news .element .desc { min-height: 255px; }
		.news_overview .element		{  }
			.news_overview .element .pic	{ height: 10vw; }
			.news_overview .element .desc { min-height: 280px; padding: 17px 15px 5px 15px; }
}


/* News-Details */
.page_navigator 			{ display: block; clear: both; width: 100%; height: auto; margin: 5px 0px 15px 0px; padding: 5px 0px 20px 0px; border-bottom: 1px solid #e9eaf4; }
.page_navigator.bottom		{ border-bottom: none; border-top: 1px solid #e9eaf4; padding: 40px 0px 10px 0px; }
	.page_navigator h2 			{ margin: 0px 0px 5px 0px; }
	.page_navigator a.bn 		{ padding: 8px 15px; font-size: 0.92em; }

.news_detail 				{ display: block; clear: both; width: 100%; height: auto; margin: 0px 0px 15px 0px; padding: 10px 0px 15px 0px; }
	.news_detail .element 		{ display: block; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; }
		.news_detail .element .pic		{ display: block; float: none; width: 100%; height: auto; margin: 10px 0px 30px 0px; }
		.news_detail .element .desc 			{ line-height: 1.6em; }
			.news_detail .element .desc .datum   { display: block; margin: 0px 0px 25px 0px; font-size: 16px; text-align: left; font-weight: 400; color: #969696; }

@media only screen and (min-width: 995px) {
	.news_detail 				{ margin: 0px 0px 35px 0px; padding: 10px 0px 40px 0px; }
		.news_detail .element .pic		{ float: right; width: auto; max-width: 50%; height: auto; margin: 50px 0px 30px 35px; }
		.news_detail .element.ohne-datum .pic		{ margin-top: 0px; }
}


/* Section Jobs */ 
#section-jobs 				{ background-color: #fafafa; }
	#section-jobs h2 			{ text-align: center; font-size: 2.25em; }
		#section-jobs h2 span 		{ display: inline-block; font-size: 1.75rem; line-height: 1.2em; color: inherit; text-transform: none; }

		.job 				{ display: block; clear: both; width: 100%; height: auto; padding: 18px; margin: 0px 0px 20px 0px; min-height: 90px; background-color: #fff; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.25); box-shadow: 0px 0px 2px rgba(0,0,0,0.25); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.20s ease-in-out 0.0s; } 
			.job:hover 		{ -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.45); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.45); box-shadow: 0px 0px 3px rgba(0,0,0,0.45); }
			.job::before    { position: absolute; right: 0px; content: "\f105"; font-family: 'FontAwesome'; color: var(--color-ci2); font-size: 28px; margin: 0px 0px 0px -10px; width: 30px;  transition: all 0.3s ease-in-out 0s; }
			.job:hover::before    { right: -10px; }				
			.job i			{ position: relative; display: block; color: var(--color-ci1); float: none; width: 45px; height: 35px; font-size: 28px;  } 
			.job .desc			{ display: block; float: none; width: 100%; color: var(--color-ci1); line-height: 1.3em; } 			
				.job h3 			{ font-size: 1.45em; font-weight: 500; margin-top: 1px; margin-bottom: 6px; color: var(--color-ci2); text-transform: uppercase; } 

@media only screen and (max-width: 994px) {
	.job h3 			{ font-size: 1.18em; /*word-break: break-all;*/ }
}
@media only screen and (min-width: 995px) {
	#section-jobs .row .content-col2-1:first-child 	{ padding-right: 30px; }
	#section-jobs .row .content-col2-1:last-child 	{ padding-left: 30px; }
		.job i			{ position: relative; display: inline-block; float: left; }
		.job .desc		{ display: inline-block; float: left; width: 87%; }
}


/* Folgeseite Jobs*/
.jobs_overview				{ display: block; width: 100%; height: auto; margin: 10px 0px 20px 0px; font-size: 0px; }
@media only screen and (max-width: 994px) {
	.jobs_overview h3 			{ font-size: 1.18em; /*word-break: break-all;*/ }
}
@media only screen and (min-width: 995px) {
	.jobs_overview .job			{ display: inline-block; width: 48%; margin: 1%; vertical-align: top; min-height: 174px; }	
		.jobs_overview  .job::before    { position: absolute; right: auto; margin-top: 11px; margin-left: 8px; } 
}


/* Folgeseite Kassen Angebote */ 
.box-kasse 					{ display: block; clear: both; width: 100%; height: auto; min-height: 100px; padding: 20px; margin: 15px 0px 12px 0px; background-color: #fff; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.25); box-shadow: 0px 0px 2px rgba(0,0,0,0.25); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.20s ease-in-out 0.0s; } 
	.box-kasse .pic				{ display: block; float: none; width: 100%; height: auto; min-height: 35vw; margin: 10px 0px 20px 0px; background-repeat: no-repeat; background-position: center center; background-size: contain; }
	.box-kasse .desc			{ display: block; float: none; width: 100%; height: auto; }
		.box-kasse .desc h2				{ display: block; margin: 10px 0px 20px 0px !important; font-size: 1.6em; }
		.box-kasse .desc .info			{ display: block; margin: 15px 0px 20px 0px; font-size: 0.95em; color: var(--color-ci1-hover); }
			.box-kasse .desc .info i			{ color: var(--color-ci1-hover); margin-right: 3px;  }
			
	.box-kasse .desc .slide_titel 	{ padding: 8px 0px 8px 25px; border-top: 1px solid #eee; font-size: 1.0em;  -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; }
	.box-kasse .desc .slide_inhalt 	{ background-color: transparent; padding: 5px 0px 10px 0px; }

@media only screen and (min-width: 995px) {
	.box-kasse 	{ /*position: relative; display: inline-block; float: left; clear: none; width: 48.5%; margin: 2% 0%; */ vertical-align: top; }
	/*.box-kasse:nth-child(2n) 	{ margin-left: 0; }*/
		.box-kasse .pic		{ display: inline-block; float: left; width: 25%; height: auto; min-height: 180px; margin: 10px 0px; }
		.box-kasse .desc	{ display: inline-block; float: left; width: 75%; height: auto; padding-left: 40px;  }
}


/* Section Welten-Teaser */
#section-welten-teaser 				{ background-color: #666; background-image: url('../images/section-bg_welten-teaser.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50% 70%; }
	#section-welten-teaser h2 				{ text-align: center; color: #fff; }
		#section-welten-teaser .welt-logo,
		#section-welten-teaser .welt-inhalt 	{ width: 100%; margin: 0px 0px 4px 0px; background-color: #fff; -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.2); box-shadow: 0px 0px 6px rgba(0,0,0,0.2);}
		#section-welten-teaser .welt-logo 		{ padding: 25px 30px; text-align: center; }
			#section-welten-teaser .welt-logo img		{ max-height: 70px; max-width: 100%; }
		#section-welten-teaser .welt-inhalt 	{ padding: 20px 20px 25px 20px; height: auto; min-height: 400px; }
			#section-welten-teaser .content-col2-1:first-child .welt-inhalt { background-image: url('../images/marketing-avatar@2x.png'); background-repeat: no-repeat; background-position: 90% 90%; background-size: 46% auto; }
			#section-welten-teaser .content-col2-1:last-child .welt-inhalt { background-image: url('../images/systemhaus-avatar@2x.png'); background-repeat: no-repeat; background-position: 95% 92%; background-size: 37% auto; }

			ul.pfeile-rot 		{ margin: 10px 0px; padding: 0px; list-style-type: none; }
				ul.pfeile-rot li:before{ content: "\f054"; position: absolute; margin-left: -20px; margin-top: 2px; font-family: "FontAwesome"; color: var(--color-ci2); font-size: 15px; width: 15px; height: 14px;}
				#section-welten-teaser ul.pfeile-rot li		{ margin: 5px 0px; padding: 2px 0px; padding-left: 20px; font-size: 1.02em; line-height: 1.25em; }
					ul.pfeile-rot li a 	{ color: var(--color-var1); }
					ul.pfeile-rot li a:hover 	{ color: var(--color-var1-hover); }


@media only screen and (max-width: 600px) {
	#section-welten-teaser .welt-inhalt 	{ min-height: 350px; padding-bottom: 170px; }
		#section-welten-teaser .content-col2-1:first-child .welt-inhalt { background-position: 95% 95%; background-size: 41% auto; }
		#section-welten-teaser .content-col2-1:last-child .welt-inhalt { background-position: 95% 92%; background-size: 33% auto; }
}
@media only screen and (min-width: 995px) {
	#section-welten-teaser .welt-logo 		{ padding: 35px 30px 35px 30px; }
	#section-welten-teaser .welt-inhalt 	{ min-height: 400px; padding: 30px 40px 40px 40px;  }
	#section-welten-teaser .content-col2-1:first-child .welt-inhalt { background-size: 36% auto; }
	#section-welten-teaser .content-col2-1:last-child .welt-inhalt { background-size: 25% auto; }
		#section-welten-teaser ul.pfeile-rot li		{ font-size: 1.2em; line-height: 1.3em; }
	
}


/* Section Newsletter */
#section-newsletter 			{ margin-top: 80px; padding-top: 0px; padding-bottom: 0px; background-color: #e5e6ef; background-image: url('../images/section-bg_newsletter.png'); background-repeat: no-repeat; background-size: 22% auto; background-position: 3% -2%; }
	#section-newsletter .align_left,
	#section-newsletter .align_right	{ display: block; width: 100%; }
	#section-newsletter h2 			{ text-align: center; margin: 0px 30px 20px 30px; font-size: 1.25em; line-height: 1.4em; text-transform: none; color: var(--color-ci1-hover); }
	#section-newsletter input[type=text] 		{ display: block; width: 100%; text-align: center; }
	#section-newsletter .bn 		{ display: block; width: 100%; height: 38px; padding: 6px 20px; margin-top: 10px; }
		
@media only screen and (min-width: 995px) {
	#section-newsletter 			{ background-size: 100px auto; padding-top: 12px; padding-bottom: 12px; background-position: 15% 20%; }
		#section-newsletter .container 			{ padding-top: 10px; padding-bottom: 10px; }
			#section-newsletter .align_left,
			#section-newsletter .align_right	{ display: inline-block; width: 49%; }
				#section-newsletter .align_right	{ text-align: right; }
			#section-newsletter h2 			{ text-align: left; margin: 7px 0px 0px 0px; font-size: 1.25em; }
			#section-newsletter input[type=text] 		{ display: inline-block; width: auto; }
			#section-newsletter .bn 		{ display: inline-block; width: auto; margin-top: 0px; margin-left: 10px; }
}




/* Section Slideshows */ 
#section-slideshow				{ position: relative; clear: both; width: 100%; min-height: 360px; height: 48vw; padding-top: 0px; padding-bottom: 0px; box-sizing: border-box; margin-bottom: 0px; background-color: transparent; overflow: hidden; z-index: 500;  }
	#section-slideshow .anim-slider 	{ min-height: 360px; height: 48vw; margin-top: 0px; background-color: #aaa; }
	#section-slideshow .anim-slide 		{ opacity: 0; }
	#section-slideshow .anim-slide-this { opacity: 1;}
	#section-slideshow .anim-dots 		{ opacity: 1; bottom: 12px; }
		#section-slideshow .anim-dots span { width: 7px; height: 7px; margin: 1px 3px; background-color: rgba(255,255,255,0.4); border: none; -moz-border-radius: 9px; border-radius: 9px; -webkit-border-radius: 9px; }
		#section-slideshow .anim-dots span.anim-dots-this { background-color: rgba(255,255,255,0.9); border: none; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.4); box-shadow: 0px 0px 3px rgba(0,0,0,0.4); }
		#section-slideshow .anim-dots span.anim-dots-this::after { background: transparent none repeat scroll 0 0; }
		
	#section-slideshow li.anim-slide 	{ background-color: transparent; background-size: cover; background-position: center center; }
		#section-slideshow li.anim-slide .slogan_wrapper	{ width: 90%; height: auto; top: 50%; margin-left: 5%; transform: translateY(-50%); padding: 0px; text-align: left; }
			#section-slideshow li.anim-slide .slogan_wrapper div { color: #fff; }
			#section-slideshow li.anim-slide .slogan_wrapper h1,
            #section-slideshow li.anim-slide .slogan_wrapper h2,
            #section-slideshow li.anim-slide .slogan_wrapper h3,
            #section-slideshow li.anim-slide .slogan_wrapper a,
            #section-slideshow li.anim-slide .slogan_wrapper i,
            #section-slideshow li.anim-slide .slogan_wrapper br,
            #section-slideshow li.anim-slide .slogan_wrapper span,
            #section-slideshow li.anim-slide .slogan_wrapper p 	{ position: relative; display: block; clear: both; text-align: left; color: #fff; font-size: inherit; line-height: inherit; }
            #section-slideshow li.anim-slide .slogan_wrapper h1,
			#section-slideshow li.anim-slide .slogan_wrapper h2 { font-size: 23px; line-height: 1.2em; font-weight: 600; color: #fff; margin-bottom: 5px; text-shadow: 0px 0px 10px rgba(0,0,0,0.2); width: auto; }
            #section-slideshow li.anim-slide .slogan_wrapper h1 span,
			#section-slideshow li.anim-slide .slogan_wrapper h2 span  { display: inline-block; font-size: 16px; line-height: 1.45em; font-weight: 400; color: #fff; text-transform: none; text-shadow: 0px 0px 9px rgba(0,0,0,0.4);  }
                #section-slideshow li.anim-slide .slogan_wrapper h1 span br,
				#section-slideshow li.anim-slide .slogan_wrapper h2 span br { position: relative; display: inline-block; clear: both; text-align: left; }
            /*#section-slideshow li.anim-slide .slogan_wrapper h2 { font-size: 20px; line-height: 34px; margin-bottom: 20px; text-transform: uppercase; font-weight: 800; text-shadow: 0px 0px 10px rgba(0,0,0,0.4);}*/
            #section-slideshow li.anim-slide .slogan_wrapper a 	{ display: inline-block; margin: 0px auto; width: auto; font-size: 12px; color: #fff; margin-top: 2px; margin-bottom: 10px; padding: 0.5em 1.0em; background-color: rgba(255,255,255,0.3); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.3s ease-in-out 0s; }
            #section-slideshow li.anim-slide .slogan_wrapper a:hover 	{ color: var(--color-ci2); background-color: rgba(255,255,255,0.95); }
			#section-slideshow li.anim-slide .slogan_wrapper p 	{ display: none; width: auto; font-size: 20px; margin-top: 10px; margin-bottom: 10px; }
		
		#section-slideshow .anim-arrows-prev { opacity: 0; top: 50%; transform: translateY(-50%); left: 0 !important; text-align: right; margin-left: -9px; padding: 0px 9px 0px 0px !important; background-color: #fff; z-index: 800; }
		#section-slideshow .anim-arrows-next { opacity: 0; top: 50%; transform: translateY(-50%); right: 0 !important; text-align: left; margin-right: -9px; padding: 0px 0px 0px 9px !important; background-color: #fff; z-index: 800; }
			#section-slideshow .anim-arrows-prev i, #section-slideshow .anim-arrows-next i  { color: #003c91; width: 20px; height: 24px; vertical-align: middle; font-size: 22px; padding: 3px 0px 0px 0px; font-weight: 100; transition: all 0.25s ease-in-out 0s; }

        #section-slideshow::before { content: ""; position: absolute; height: 160px; width: 100%; top: 0px; opacity: 0.35; z-index: 710; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,050505+100&0+0,1+96 */ background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 2%, rgba(5,5,5,0) 100%); background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 2%,rgba(5,5,5,0) 100%); background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 2%,rgba(5,5,5,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00050505',GradientType=0 ); }


@media only screen and (min-width: 995px) { 
    #section-slideshow li.anim-slide .slogan_wrapper	{ margin-left: 5%; top: 47%; }
    #section-slideshow li.anim-slide .slogan_wrapper h1,
	#section-slideshow li.anim-slide .slogan_wrapper h2 { font-size: 34px; margin-bottom: 20px; }
    #section-slideshow li.anim-slide .slogan_wrapper h1 span,
	#section-slideshow li.anim-slide .slogan_wrapper h2 span { font-size: 26px; }
	#section-slideshow li.anim-slide .slogan_wrapper p 	{ display: block; }
	#section-slideshow li.anim-slide .slogan_wrapper a 	{  font-size: 18px; margin-top: 6px; }
	#section-slideshow, #section-slideshow .anim-slider { min-height: 480px; height: 50vw; }
    #section-slideshow .anim-dots 		{ bottom: 20px; }
    #section-slideshow .anim-dots span { width: 11px; height: 11px; margin: 2px 6px; }
    #section-slideshow .anim-arrows-prev { margin-left: -12px; padding: 2px 12px 2px 0px !important;  }
    #section-slideshow .anim-arrows-next { margin-right: -12px; padding: 2px 0px 2px 12px !important;  }
    #section-slideshow .anim-arrows-prev i, #section-slideshow .anim-arrows-next i  { width: 30px; height: 36px; font-size: 31px; padding: 4px 0px 0px 0px; }
    #section-slideshow::before { height: 320px; }
		
}
@media only screen and (min-width: 1200px) { 
    #section-slideshow li.anim-slide .slogan_wrapper	{ margin-left: 6%; }
	#section-slideshow, #section-slideshow .anim-slider { min-height: 590px; height: 41vw; }
	#section-slideshow li.anim-slide .slogan_wrapper h1, 
	#section-slideshow li.anim-slide .slogan_wrapper h2 { font-size: 50px; margin-bottom: 30px; }
    #section-slideshow li.anim-slide .slogan_wrapper h1 span,
	#section-slideshow li.anim-slide .slogan_wrapper h2 span { font-size: 32px;  }
	#section-slideshow li.anim-slide .slogan_wrapper a 	{  font-size: 19px; margin-top: 10px; }
}





/* Formatierungen für Folgeseiten */
#section-leistungen 			{ background-color: #fafafa; }
	#section-leistungen .container > h2 			{ display: block; text-align: center; font-size: 26px; }

	.box-grid 					{ display: block; width: 100%; height: auto; margin: 15px 0px 20px 0px; font-size: 0px; }
		.box-grid .element	{  height: auto; text-align: center; margin: 0px 0px 5px 0px; vertical-align: top; }
			  .box-grid .element a	{ display: inline-block; width: 100%; height: 100%; cursor: pointer; text-align: center; vertical-align: middle; background-color: #fff; -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.15); box-shadow: 0px 1px 2px rgba(0,0,0,0.15); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.20s ease-in-out 0.0s; }
			  .box-grid .element a:hover	{ opacity: 0.85; -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.35); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.35); box-shadow: 0px 1px 3px rgba(0,0,0,0.35); }
				.box-grid .element .pic	{ display: block; clear: both; width: 100%; height: 40vw; margin: 0px; overflow: hidden; background-color: #ddd; background-size: cover; background-position: center center; transition: all 0.25s ease 0.1s; }
				.box-grid .element .desc { display: block; clear: both; width: 100%; height: auto; margin: 10px auto 10px auto; box-sizing: border-box; font-size: 0.92em; line-height: 1.38em; padding: 12px 12px 20px 12px; text-align: center; transition: all 0.25s ease 0.1s;  }
					.box-grid .element .desc h2,
					.box-grid .element .desc h3 { display: block; height: auto; margin: 8px 0px 2px 0px; font-size: 20px; font-weight: 500; text-align: center; color: #4b4b4b; text-transform: none; transition: all 0.25s ease 0.1s; }
					.box-grid .element .desc .datum { display: block; margin: 5px 0px 12px 0px; font-size: 16px; text-align: center; font-weight: 400; color: #969696; }
				.box-grid .element a:hover h2,
				.box-grid .element a:hover h3	{ color: var(--color-ci2); }
				.box-grid .element a:hover .desc 	{ color: var(--color-ci1); }
			

@media only screen and (min-width: 740px) {
	#section-leistungen .container > h2 			{ font-size: 34px; }
		.box-grid .element	{ }
			.box-grid .element .pic	{ height: 180px; }
			.box-grid .element .desc { min-height: 210px; padding: 18px 18px 8px 18px; }
				.box-grid .element .desc h2,
				.box-grid .element .desc h3 { min-height: 48px; } 
}
@media only screen and (min-width: 1400px) {
	#section-leistungen .container > h2 			{ font-size: 38px; }
		.box-grid .element	{  }
			.box-grid .element .pic	{  height: 200px; }
			.box-grid .element .desc { min-height: 195px; padding: 18px 22px 10px 22px; }
}



/* Section Zwischen-Claim */
#section-zwischen-claim  					{ padding-top: 20px; padding-bottom: 15px; background-color: #fff; }
	#section-zwischen-claim .content-col3-1			{ text-align: center; }
		#section-zwischen-claim .content-col3-1	h2		{ color: var(--color-ci2); margin: 0px 0px 8px 0px; word-wrap: break-word; }
		#section-zwischen-claim .content-col3-1	h3		{ color: rgba(0,0,0,0.8); margin: 0px 0px 10px 0px; }
	#section-zwischen-claim .content-col3-2			{ text-align: center; }

@media only screen and (min-width: 995px) {
	#section-zwischen-claim .content-col3-1 		{ text-align: right; padding-left: 40px; padding-right: 20px; }
		#section-zwischen-claim .content-col3-1	h2		{ font-size: 38px; line-height: 1.1em;  }
	#section-zwischen-claim .content-col3-2			{ text-align: left; }
}
@media only screen and (min-width: 1400px) {
	#section-zwischen-claim .content-col3-1 		{ padding-left: 80px;  }
}




/* Section Google-Partner */
#section-google-partner 	{ background-color: #666; background-image: url('../images/section-bg_google-partner.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50% 70%; }
	#section-google-partner * 			{ color: #fff; }
	#section-google-partner h2 			{ text-align: center; }	
	#section-google-partner .content-col3-1 { text-align: center; }
	#section-google-partner .content-col3-2 { text-align: center; }
		#section-google-partner .content-col3-1 > img,
		#section-google-partner .content-col3-1 img.icon	{ display: inline; width: 36px; height: auto; margin-right: 5px; vertical-align: middle; margin-top: -4px;  }
		#section-google-partner .content-col3-1 h3 			{ display: inline-block; margin: 0px; font-size: 1.15em; line-height: 1.2em; }

@media only screen and (min-width: 995px) {
	#section-google-partner .content-col3-2 { text-align: left; }
	#section-google-partner .content-col3-1 { text-align: left; }
}
@media only screen and (min-width: 1200px) {
	#section-google-partner .content-col3-1 img.icon	{ width: 40px; margin-right: 10px; }
	#section-google-partner .content-col3-1 h3 			{ font-size: 1.25em; }
}



/* Section Kundenstimmen */ 
#section-kundenstimmen 				{ background-color: #fff; padding: 60px 20px; background-image: url('/upload/mediapool/Inhaltsbilder/section-bg_kundenstimmen.jpg'); background-repeat: no-repeat; background-position: top right; background-size: 42% auto; }
	#section-kundenstimmen h2 			{ display: block; text-align: center; }
	.slider_kundenstimmen				{ display: block; clear: both; width: 100%; height: auto; margin: 40px auto 40px auto; }
		.slider_kundenstimmen .slick-slide	{ display: table-cell; vertical-align: middle; width: 100%; height: auto; text-align: center; }
		  	.slider_kundenstimmen .pic_wrapper	{ display: block; width: 100%; height: auto; margin: 0px auto;  }
				.slider_kundenstimmen .pic	{ display: block; height: 180px; width: 180px; margin: 0px auto; transition: all 0.15s ease 0.1s; background-color: #eee; background-position: center center; background-size: cover;  -moz-border-radius: 999px; border-radius: 999px; -webkit-border-radius: 999px;  }
			.slider_kundenstimmen .desc { display: block; clear: both; width: 100%; min-height: 120px; height: auto; margin: 0px auto 10px auto; box-sizing: border-box; padding: 14px 10px 10px 10px; text-align: center; }
				.slider_kundenstimmen .desc .zitat { font-size: 1.15rem; line-height: 1.35em; margin-bottom: 10px; }
				.slider_kundenstimmen .desc h3 { margin: 20px 0px 10px 0px; font-size: 1.25rem; font-weight: 500; text-align: center; color: var(--color-ci2); text-transform: none; }
				.slider_kundenstimmen .desc h4 { margin: 5px 0px 5px 0px; font-size: 1.05rem; line-height: 1.3em; text-align: center; }
					.slider_kundenstimmen .desc h4 a { font-weight: inherit; }
					
		#section-kundenstimmen ul.slick-dots li {   margin: 0 2px; }
			#section-kundenstimmen ul.slick-dots li button::before 	{ width: 28px; height: 28px; font-size: 12px; color: #666; }

@media only screen and (min-width: 995px) {
	#section-kundenstimmen 		{ padding: 70px 0px 30px 0px; background-size: 20% auto; }
		.slider_kundenstimmen				{ margin: 70px auto 40px auto; }
			.slider_kundenstimmen .element	{ padding-top: 0px !important; }
				.slider_kundenstimmen .pic_wrapper	{ display: inline-block; width: 28%; margin: 0px; padding-right: 30px; }
					.slider_kundenstimmen .pic	{ float: right; height: 180px; width: 180px; margin: 0px; }
				.slider_kundenstimmen .desc { display: inline-block; vertical-align: top; width: 70%; min-height: 150px; padding: 10px 20px 10px 20px; text-align: left; }
					.slider_kundenstimmen .desc .zitat { font-size: 1.27rem; line-height: 1.45em; margin-bottom: 30px; }
					.slider_kundenstimmen .desc h3 { text-align: left; }
					.slider_kundenstimmen .desc h4 { text-align: left; }
}		
@media only screen and (min-width: 1400px) {
	#section-kundenstimmen 				{ padding: 80px 0px; background-size: 25% auto; }
		.slider_kundenstimmen				{ width: 77%; }
			.slider_kundenstimmen .pic_wrapper	{ padding-right: 50px; }
}




/* Section Partner */ 
#section-partner 				{ background-color: #fafafa;  }
	#section-partner h2 				{ text-align: center; color: rgba(0,0,0,0.5); }
	#section-partner h2 + .row 				{ margin-top: 15px; }
		#section-partner .content-col4-1 	{ height: 90px; min-height: 90px; text-align: center; }
			#section-partner .content-col4-1:before { /* create a full-height inline block pseudo=element */ content: ' '; display: inline-block; vertical-align: middle;  /* vertical alignment of the inline element */ height: 100%; }
			#section-partner .content-col4-1 img 	{ display: inline-block; max-width: 50%; height: auto; vertical-align: middle; margin: 5px auto; }

@media only screen and (min-width: 995px) {
	#section-partner h2 + .row 				{ margin-top: 10px; }
		#section-partner .content-col4-1 	{ height: 160px; }
			#section-partner .content-col4-1 img 	{ max-width: 70%; margin: auto; }
}




/* Section Call-to-Action */ 
#section-cta 				{ background: #4c5893; padding-top: 0px; padding-bottom: 0px; background: -moz-linear-gradient(left, #4c5893 0%, #102757 100%); background: -webkit-linear-gradient(left, #4c5893 0%,#102757 100%); background: linear-gradient(to right, #4c5893 0%,#102757 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c5893', endColorstr='#102757',GradientType=1 ); }
	#section-cta .container 	{ padding-top: 40px; padding-bottom: 30px; background-repeat: no-repeat; z-index: 10; background-size: auto 130%; background-position: center center; }
	#section-cta.marketing .container 	{ background-image: url(../images/wasserzeichen_marketing.png);  }
	#section-cta.systemhaus .container 	{ background-image: url(../images/wasserzeichen_systemhaus.png);  }
	#section-cta * 				{ color: #fff; text-align: center; }
	#section-cta .row 			{ margin-top: 30px;  }
	#section-cta .bn 			{ color: #fff; border: 1px solid #fff; }
	#section-cta .bn:hover 		{ color: var(--color-ci2); background-color: #fff; border: 1px solid #fff; }
		#section-cta .bn i			{ font-size: 20px; margin-right: 6px; vertical-align: middle; margin-top: -2px; }
		#section-cta .bn:hover i		{ color: var(--color-ci2); }

@media only screen and (min-width: 995px) {
	#section-cta .container 	{ padding-top: 40px; padding-bottom: 50px; }
}




/* Section Kontakt */
#section-kontakt 			{ background-color: #fafafa; margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px; font-size: 0px;  }
	#section-kontakt #gmap 			{ display: block; clear: both; width: 100%; height: 50vw; }
	.io-kontakt .inhalt 		{ display: block; clear: both; width: 100%; height: auto; }
		.io-kontakt .inhalt .pic 		{ display: block; clear: both; width: 100%; height: 40vw; background-repeat: no-repeat; background-size: cover; background-position: center center; }
		.io-kontakt .inhalt .desc		{ display: block; clear: both; width: 100%; height: auto; padding: 20px 30px;  }
			.io-kontakt .inhalt .desc h2		{ text-transform: none; margin-bottom: 25px; }
				.io-kontakt .inhalt .desc h2 i		{ font-size: 26px; margin-right: 5px; vertical-align: middle; margin-top: -5px; }
	#section-kontakt .inhalt.ohne-gmap .pic 	{ height: 58vw; }

@media only screen and (min-width: 995px) {
	.io-kontakt #gmap 			{ display: inline-block; width: 100%; height: 42vw; }
	.io-kontakt .inhalt 		{ display: inline-block; width: 100%; height: 40vw; font-size: 0px; }
		.io-kontakt .inhalt .pic 		{ display: inline-block; clear: none; width: 60%; height: 40vw; }
		.io-kontakt .inhalt .desc		{ display: inline-block; clear: none; width: 40%; height: auto; padding: 30px 50px; vertical-align: top;  }
	.io-kontakt .inhalt.ohne-gmap 	{ display: block; width: 100%; height: auto; }
		.io-kontakt .inhalt.ohne-gmap .pic 		{ display: inline-block; clear: both; width: 56%; height: 34vw; }
		.io-kontakt .inhalt.ohne-gmap .desc		{ display: inline-block; clear: both; width: 44%; height: auto; padding: 0px 20px 10px 50px; } 
	#section-kontakt .inhalt.ohne-gmap .pic 	{ width: 50%; height: 30vw; }
	#section-kontakt .inhalt.ohne-gmap .desc	{ width: 50%; padding: 25px 50px; }
}
@media only screen and (min-width: 1400px) {
	.io-kontakt #gmap 			{ display: inline-block; float: left; width: 65%; height: 41vw; }
	.io-kontakt .inhalt 		{ display: inline-block; width: 35%; height: 41vw; }
		.io-kontakt .inhalt .pic 		{ display: block; clear: both; width: 100%; height: 21vw; }
		.io-kontakt .inhalt .desc		{ display: block; clear: both; width: 100%; height: auto; padding: 25px 50px;  }
	.io-kontakt .inhalt.ohne-gmap 	{ display: block; width: 100%; height: auto; }
		.io-kontakt .inhalt.ohne-gmap .pic 		{ display: inline-block; clear: both; width: 58%; height: 25vw; }
		.io-kontakt .inhalt.ohne-gmap .desc		{ display: inline-block; clear: both; width: 42%; height: auto; padding: 5px 30px 10px 50px;  }
	#section-kontakt .inhalt.ohne-gmap .pic 	{ width: 50%; height: 30vw; }
	#section-kontakt .inhalt.ohne-gmap .desc	{ width: 50%; padding: 25px 50px; }
}
	
	


/* Ansprechpartner Übersicht */
.overview.ansprechpartner 				{ display: block; width: 100%; height: auto; margin: 15px 0px 20px 0px; font-size: 0px; }
	.overview.ansprechpartner .element		{ display: block; width: 100%; height: auto; text-align: left; font-size: 0px; margin: 0px 0px 10px 0px; padding: 0px; vertical-align: top;  background-color: #fff; -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.15); box-shadow: 0px 1px 2px rgba(0,0,0,0.15); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.20s ease-in-out 0.0s; }
	.overview.ansprechpartner .element:hover	{ -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.35); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.35); box-shadow: 0px 1px 3px rgba(0,0,0,0.35); }
		.overview.ansprechpartner .element .pic	{ display: inline-block; width: 32%; height: 38vw; margin: 0px; overflow: hidden; background-color: #ddd; background-size: cover; background-position: center center; transition: all 0.25s ease 0.1s; }
		.overview.ansprechpartner .element .desc { display: inline-block; width: 68%; height: auto; margin: 0px; box-sizing: border-box; vertical-align: top; font-size: 0.95rem; line-height: 1.6em; padding: 20px 10px 20px 20px; text-align: left; transition: all 0.25s ease 0.1s;  }
			.overview.ansprechpartner .element .desc h2 { display: block; height: auto; margin: 10px 0px 10px 0px; font-size: 22px; font-weight: 500; text-align: left; text-transform: none;  }
			.overview.ansprechpartner .element .desc h3 { display: block; height: auto; margin: 6px 0px 18px 0px; font-size: 15px; font-weight: 500; text-align: left; color: #4b4b4b; text-transform: none; }
			.overview.ansprechpartner .element .desc a:hover 	{ color: var(--color-ci2); }
		.overview.ansprechpartner .element.ohne-pic .desc { display: block; width: 100% !important; }

@media only screen and (min-width: 995px) {
	.overview.ansprechpartner .element	{ display: inline-block; width: 48%; margin: 1%; min-height: 210px; }
		.overview.ansprechpartner .element .pic	{ width: 30%; height: 210px; margin: 0px; }
		.overview.ansprechpartner .element .desc { width: 70%; padding: 20px 10px 10px 35px; }
}
@media only screen and (min-width: 1400px) {
	.overview.ansprechpartner .element	{ width: 49%; margin: 1%; min-height: 260px;  }
	.overview.ansprechpartner .element:nth-child(2n+1)	{ margin-left: 0px; }
	.overview.ansprechpartner .element:nth-child(2n)	{ margin-right: 0px; }
		.overview.ansprechpartner .element .pic	{ width: 32%; height: 260px; }
		.overview.ansprechpartner .element .desc { width: 68%; padding: 20px 15px 10px 40px; }
	
}



/* Ausklapp-Listen */
.slide_titel { display: block; clear: both; font-size: 22px; font-weight: 400; text-transform: none; margin: 3px 0px !important; padding: 12px 30px 12px 40px; cursor: pointer; background-color: #fff; -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.15); box-shadow: 0px 1px 2px rgba(0,0,0,0.15); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.1s ease-in-out 0.05s; }
.slide_titel:before{ content: "\f067"; position: absolute; margin-left: -25px; margin-top: 1px; font-family: "FontAwesome"; color: var(--color-ci2); font-size: 16px; width: 16px; height: 16px; }
.slide_titel:hover { color: var(--color-ci2);  }
.slide_titel.active { color: var(--color-ci2); }
	
.slide_inhalt { display: block; clear: both; font-size: 16px; font-weight: 300; margin: 0px; padding: 25px 30px 30px 30px; background-color: #f5f5f5; }
	#section-inhalt .slide_inhalt ul li:before{ color: var(--color-ci1); } 
	

/* Bildergalerien */
#section-inhalt .produktgalerie         { display: block; clear: both; width: 100%; margin: 35px 0px 15px 0px; padding: 0px; font-size: 0px; }
    #section-inhalt .produktgalerie a    { display: inline-block; width: 23.5%; height: 26vw; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden; background-color: #fff; -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.15); box-shadow: 0px 1px 2px rgba(0,0,0,0.15); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.1s ease-in-out 0.05s;}
    #section-inhalt .produktgalerie a:nth-child(4n+1)   { margin-left: 0; }
    #section-inhalt .produktgalerie a:nth-child(4n)   { margin-right: 0; }
        #section-inhalt .produktgalerie a img    { position: relative; width: auto; height: auto; max-width: 100%; max-height: 100%;  }

@media only screen and (min-width: 995px) {
    #section-inhalt .produktgalerie a    { height: 260px; }
}
@media only screen and (min-width: 1500px) {
    #section-inhalt .produktgalerie a    { height: 300px; }
}


/* Slider für Content-Slider (z.B. bei Büromöbel) */
.slider_content				{ display: block; clear: both; width: 100%; height: auto; margin: 40px auto 40px auto; }
	.slider_content::before			{ position: absolute; content: ''; width: 100%; height: 1px; border-top: 1px solid #e6e6e6; margin-top: 60px; z-index: 299;  }
	.slider_content .slick-slide	{ display: table-cell; vertical-align: top; width: 100%; height: auto; min-height: 200px; background-color: #fff; border: 1px solid #e6e6e6; -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.1s ease-in-out 0.05s; }
		.slider_content .inhalt 		{ display: block; clear: both; width: 100%; min-height: 300px; height: auto; margin: 10px auto 5px auto; padding: 55px 5px 15px 5px; box-sizing: border-box; } 
			.slider_content .inhalt img 	{display: inline-block; }
			.slider_content .inhalt h2 + h4 	{ margin-top: -20px; margin-bottom: 20px; }

	.slider_content ul.slick-dots { top: 6px; width: 50%; left: 25%;  bottom: auto; }
		.slider_content ul.slick-dots li button::before { font-size: 10px; }
		.slider_content ul.slick-dots li { padding-left: 0px !important; }
		.slider_content ul.slick-dots li::before { content: '' !important; }
	.slider_content ul.slick-dots.bottom { top: auto; bottom: 0px; width: 50%; left: 25%; }
	.slider_content .slick-prev 		{ left: 15px; top: 25px; right: auto; width: 30px; height: 30px; }
	.slider_content .slick-next 		{ right: 15px; top: 25px; left: auto; width: 30px; height: 30px;}
	.slider_content .slick-prev::before,
	.slider_content .slick-next::before	{ color: var(--color-ci1); font-family: 'FontAwesome'; font-size: 30px; width: 30px; height: 30px; }
	.slider_content .slick-prev::before { content: '\f104'; }
	.slider_content .slick-next::before { content: '\f105'; }
	.slider_content .slick-prev.bottom 		{ position: relative; float: left; top: auto; left: 0px; bottom: 5px; margin-top: 25px; }
	.slider_content .slick-next.bottom 		{ position: relative; float: right; top: auto; right: 0px; bottom: 5px; margin-top: 25px; }

   #section-inhalt .slider_content .produktgalerie a    { height: 15vw; }

@media only screen and (min-width: 995px) {
	.slider_content .inhalt { padding: 60px 30px 20px 30px; }
	.slider_content .slick-prev 		{ left: 40px; top: 25px; }
	.slider_content .slick-next 		{ right: 40px; top: 25px; }
    #section-inhalt .produktgalerie a    { height: 190px; }
	.slider_content .slick-prev.bottom 		{ left: 20px; }
	.slider_content .slick-next.bottom 		{ right: 20px; }
}
@media only screen and (min-width: 1500px) {
    #section-inhalt .slider_content .produktgalerie a    { height: 220px; }
}



#abstand_folgeseiten { display: block; clear: both; width: 100%; height: 140px; padding: 0px 0px 0px 0px; background-size: cover; background-position: center center; background-color: #fff; }
@media only screen and (max-width: 994px) { 
	#abstand_folgeseiten { height: 200px; }
	#abstand_folgeseiten:after { height: 10px; margin-top: 190px; }
}



#section-intro-folgeseiten			{ position: relative; clear: both; width: 100%; height: 270px; padding-top: 0px; padding-bottom: 0px; box-sizing: border-box; margin-bottom: 0px; background-position: center center; background-size: cover; overflow: hidden; z-index: 700; }
    #section-intro-folgeseiten .container     {  padding-top: 200px; }
        #section-intro-folgeseiten	h1           { margin-left: 10px; font-size: 24px; color: #fff; font-weight: 400; text-transform: uppercase; word-break: break-all; }

@media only screen and (min-width: 995px) { 
    #section-intro-folgeseiten			{ height: 26.5vw; }
    	#section-intro-folgeseiten .container  { padding-top: 19vw; }
    		#section-intro-folgeseiten	h1          { margin-left: 0px; font-size: 38px; word-break: normal; }
} 
@media only screen and (min-width: 1400px) { 
    #section-intro-folgeseiten			{ height: 22.5vw; }
    	#section-intro-folgeseiten .container  { padding-top: 16.5vw; }
			#section-intro-folgeseiten	h1          { font-size: 44px; }
} 



.brotkruemel 		{ display: block; clear: both; width: 100%; height: auto; padding: 10px 0px 6px 0px; background-color: #edeff6; border-bottom: 1px solid #e9eaf4; }
	.brotkruemel .container	{ font-size: 13px; font-weight: 100; padding-left: 20px; }	
		.brotkruemel .container span	{ font-size: inherit; color: inherit; }
		.brotkruemel .container i	{ margin: 0px 8px; color: #999; }
		.brotkruemel .container a 	{ color: #6775bb; font-size: inherit; }	

@media only screen and (min-width: 995px) { 
	.brotkruemel 		{ padding: 13px 0px 10px 0px;  }
		.brotkruemel .container	{ padding-left: 2px; }	
}
	
	

#section-inhalt		{ margin-top: 0px; margin-bottom: 40px; min-height: 360px; }
body.folgeseite		{ background-color: #fafafa; }
body.folgeseite #section-inhalt		{ background-color: #fafafa; }
	#section-inhalt	div	{ line-height: 1.6em; }
	#section-inhalt h1 	{ background: -webkit-linear-gradient(#4c5893, #102757);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent; }
	#section-inhalt h2 	{ margin-top: 30px;  }
	
	#section-inhalt p 	{ margin: 10px 0px 15px 0px; }

	#section-inhalt .container img 		{ max-width: 100%; }

	#section-inhalt ul 		{ margin: 10px 0px; padding: 0px; list-style-type: none; }
		#section-inhalt ul li:before{ content: "\f054"; position: absolute; margin-left: -24px; margin-top: -1px; font-family: "FontAwesome"; color: var(--color-ci2); font-size: 13px; width: 13px; height: 13px; }
			#section-inhalt ul li		{ margin: 5px 0px; padding: 2px 0px; padding-left: 25px; font-size: 1.02em; line-height: 1.25em; }

	#section-cta + #foot 	{ margin-top: 40px; }


/* Cookie-Hinweis */
.cc-banner .cc-message { color: rgba(255,255,255,0.8); }
	.cc-link, .cc-link:link { color: #fff; text-decoration: underline; }
	
	.cc-btn, .cc-btn:hover 			{ font-size: 1.0em !important; font-weight: 600 !important; }



					
/* ---- ENDE Section-Formatierungen ---- */
#foot					{ position: relative; width: 100%; min-height: 150px; height: auto; color: rgba(255,255,255,0.4); padding: 25px 0px 0px 0px; box-sizing: border-box; z-index: 500;
						  background: #102757; background: -webkit-linear-gradient(left, #102757 0%, #4c5893 100%); background: -o-linear-gradient(left, #102757 0%, #4c5893 100%); background: linear-gradient(to right, #102757 0%, #4c5893 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#102757', endColorstr='#4c5893',GradientType=1 ); }
	#foot .container		{ padding: 0px 20px; }    
	#foot div 				{ color: rgba(255,255,255,0.4); font-size: 0.85rem; line-height: 1.5rem; }
	#foot h4 				{ margin-top: 0px; font-size: 1.25rem; line-height: 1.4rem; }
	#foot h4.active > a     { color: rgba(255,255,255,0.95); }
	#foot a 				{ color: rgba(255,255,255,0.7); }
    #foot a:hover		 	{ color: rgba(255,255,255,1); text-decoration: none; }
        #foot li.active > a    { color: var(--color-ci2); }


#foot .row .content-col4-1 ul               { margin: 0px auto; padding: 0px; list-style-type: none; }
    #foot .row .content-col4-1 ul li 		{ display: block; clear: both; text-align: left; margin: 2px 0px; }
        #foot .row .content-col4-1 ul li a		{ list-style-type: none; float: none; display: inline-block; }

/* 1te Spalte - Logos*/
#foot .row .content-col4-1:first-child ul li       { display: block; clear: none; float: none; width: 48%; margin: 0px 0px 5px 0px; padding: 0px; text-align: left; }
	#foot .row .content-col4-1:first-child ul li img       { width: 140px; height: auto; margin: 0px 0px 20px 0px; opacity: 0.6; transition: all 0.30s ease-in-out 0s;}
	#foot .row .content-col4-1:first-child ul li a:hover > img      { opacity: 0.9; }
	#foot .row .content-col4-1:first-child ul li.active img       { opacity: 1; }

/* 2te Spalte - Logo*/
	#foot .row .content-col4-1:nth-child(2) ul li img       { width: 140px; height: auto; margin: 0px 0px 25px 0px; opacity: 0.6; transition: all 0.30s ease-in-out 0s;}
	#foot .row .content-col4-1:nth-child(2) ul li a:hover > img       { opacity: 0.9; }
	#foot .row .content-col4-1:nth-child(2) ul li.active img       { opacity: 1; }


#foot .foot_copyright 		{ display: block; clear: both; width: 100%; height: auto; margin: 0px; padding: 16px 0px 15px 0px; line-height: 1.0em; background-color: rgba(16,39,87,0.3); }
	#foot .foot_copyright .container 		{ padding-top: 0px; padding-bottom: 0px; }
	#foot .foot_copyright .align_left		{ display: inline-block !important; width: 75% !important; line-height: 1.0em; }
		#foot .foot_copyright .align_left img 	{ display: block; vertical-align: middle; margin-right: 18px; margin-top: -2px; opacity: 0.5; width: auto; height: auto; max-height: 18px; }
	#foot .foot_copyright .align_right		{ display: inline-block !important; width: 24% !important; }
		#foot .foot_copyright .align_right ul		{ float: right; }
		
	#foot .foot_copyright ul		{ margin: 0px; padding: 0px; list-style-type: none; }
		#foot .foot_copyright ul li 		{ display: inline-block; clear: none; float: left; text-align: right; margin: 6px 0px 0px 24px; }
			#foot .foot_copyright ul li a i 		{ font-size: 22px;  }

@media only screen and (max-width: 360px) {
	#foot .row .content-col4-1:first-child 			{ width: 100%; max-width: 100%; }
		#foot .row .content-col4-1:first-child ul        { width: 100%; display: block; clear: both; margin: 0px auto; padding: 0px; list-style-type: none; }
			#foot .row .content-col4-1:first-child ul li        { display: block; clear: both; }
				#foot .row .content-col4-1:first-child ul li img 		{ margin: 10px 0px 10px 0px; }
	#foot .row .content-col4-1 ul.in-ausweichspalte      { display: none; }
	#foot .row .content-col4-1:first-child > ul > li > ul 	{ display: none; }
	#foot .row .content-col4-1::last-child 			{ width: 100%; max-width: 100%; }
}
@media only screen and (min-width: 361px) and (max-width: 994px) {
	#foot .row .content-col4-1:first-child 			{ width: 100%; max-width: 100%; }
		#foot .row .content-col4-1:first-child ul        { width: 100%; display: block; clear: both; margin: 0px auto; padding: 0px; list-style-type: none; }
			#foot .row .content-col4-1:first-child ul li        { display: inline-block; }
				#foot .row .content-col4-1:first-child ul li img 		{ margin: 10px 0px 10px 0px; }
	#foot .row .content-col4-1 ul.in-ausweichspalte      { display: none; }
	#foot .row .content-col4-1:first-child > ul > li > ul 	{ display: none; }
	#foot .foot_copyright .align_left img 	{ margin-bottom: 15px; }
	#foot .row .content-col4-1:last-child 			{ width: 100%; max-width: 100%; }
}
@media only screen and (min-width: 995px) { 
	#foot .container		{ padding: 5px 0px 15px 0px; }  
		#foot .row .content-col4-1:first-child 			{ width: 24%; max-width: 24%; padding: 20px 0px; }
			#foot .row .content-col4-1:first-child ul li       { display: block; clear: both; width: 100%; text-align: left; margin: 0px 0px 5px 0px; }
			#foot .row .content-col4-1:first-child > ul > li       { display: none; }
			#foot .row .content-col4-1:first-child > ul > li.show  { display: block; }
			#foot .row .content-col4-1:first-child ul li img 		{ width: 200px; }
	
	#foot .row .content-col4-1 ul li 		{ display: block; }
	#foot .foot_copyright .align_left a.smoothscroll { display: inline-block; width: 130px; }
    #foot .foot_copyright .align_left img 	{ display: inline-block; }
	
}



/* --------------- Mobile-Darstellung bis zu 994px, aber einspaltige Inhaltsdarstellung bereits ab 780px nach unten --------------- */
@media only screen and (max-width: 994px) { 
	.hide4mobile 		{ display: none !important; }
	
	.container			{ width: 740px; }
	.content-col4-1				{ display: inline-block; height: auto; float: left; max-width: 48%; width: 480%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px; }
	.content-col3-1				{ display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px; }
	.content-col3-2				{ display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px; }	
	.content-col2-1				{ display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px;  }	
	
	a.a_sprung 					{ margin-top: -60px; }
	a.bn_bg_ci					{ width: 100%; padding: 12px 40px; box-sizing: border-box; } 
	
	table.border_ci	th			{ padding: 10px 10px; }
	table.border_ci	td			{ padding: 10px 10px; }
	
	img.img_full_width			{ float: none; display: block; clear: both; width: 100% !important; max-width: 100%; height: auto; margin: 15px 0px 25px 0px !important; }
	img.img_responsiv_full		{ float: none; display: block; clear: both; width: 100% !important; max-width: 100%; height: auto; margin: 15px 0px 25px 0px !important; }
	img.img_responsiv_half		{ width: 50% !important; max-width: 100%; height: auto; }
}

@media only screen and (max-width: 780px) { 
	.container			{ width: 100%; box-sizing: border-box; padding-left: 10px; padding-right: 10px; }
	.content-col3-1			{ display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; padding: 0px; margin-bottom: 30px; }	
	.content-col3-2			{ display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; padding: 0px; margin-bottom: 30px; }	
	.content-col2-1			{ display: block; clear: both; width: 100%; height: auto; padding: 0px 0px; margin-bottom: 30px; }
}

@media only screen and (max-width: 390px) { 
	.hide4smartmobiles 		{ display: none !important; }
	.content-col4-1			{ display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; padding: 0px; margin-bottom: 30px; }	
}

@media only screen and (min-width: 995px) { 
	.container			{ width: 980px; }
	#top_bar .container	{ padding-left: 0px; padding-right: 0px; }
	#nav_bar .container	{ padding-left: 0px; padding-right: 0px; }
	.content-col4-1			{ position: relative; float: left; width: 24%; height: auto; padding: 20px 0px; }
	.content-col3-1			{ position: relative; float: left; width: 32%; height: auto; padding: 20px 0px; }
	.content-col3-2			{ position: relative; float: left; width: 66%; height: auto; padding: 20px 0px; }	
	.content-col2-1			{ position: relative; float: left; width: 49%; height: auto; padding: 20px 0px; }
	
	img.img_full_width		{ float: none; display: block; clear: both; width: 100% !important; max-width: 100%; height: auto; margin: 15px 0px 25px 0px !important; }
	img.img_responsiv_full	{ width: auto; max-width: 40%; height: auto; }
	img.img_responsiv_full.left	{ display: inline; float: left; margin: 0px 40px 50px 0px; }
	img.img_responsiv_full.right	{ display: inline; float: right; margin: 0px 0px 50px 40px; }
	
}

@media only screen and (min-width: 1200px) { 
	.container					{ /*margin: 0px 10px;*/ width: 1170px; }
}

.verlauf_hellblau-dunkelblau 	{ background: -moz-linear-gradient(left, #4c5893 0%, #102757 100%); background: -webkit-linear-gradient(left, #4c5893 0%,#102757 100%); background: linear-gradient(to right, #4c5893 0%,#102757 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c5893', endColorstr='#102757',GradientType=1 ); }
