/* css zu meldung_abschliessen */

/* meldungFooterCSS  */
footer{
  background-color:#6e6e6e;
  line-height: 25px;
}
footer > div{
  max-width:1302px;
  width:100% !important;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
}
footer > div a:not(.footer_kontakt){
  text-decoration: none;

}
footer > div > div.dottedLines:first-of-type{padding-left: 10px;}
footer > div > div.dottedLines{vertical-align: top;}
footer > div > div.dottedLines:not(:last-of-type){
  width: 23%;
  margin-right:2%;
  border-right: 1px dotted #b1b1b1
}
@media screen and (max-width: 768px) {
footer > div > div.dottedLines{
  width: 48% !important;
padding: 5px;
border-right:0px solid transparent !important;
}

}
/* --- --- */
/* meldungGlobalCSS  */
/* --- Schriften --- */
@font-face {
	font-family: 'MetaOT Light';
	src: url("/fonts/MetaOT/MetaOT-Light.otf");
	font-style: normal;
	font-weight: 300;
	font-display: fallback;
}

@font-face { 
	font-family: 'MetaOT Normal'; 
	src: url("/fonts/MetaOT/MetaOT-Norm.otf");
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
}

@font-face {
	font-family: 'MetaOT Medium';
	src: url("/fonts/MetaOT/MetaOT-Medi.otf");
	font-style: normal;
	font-weight: 500;
	font-display: fallback;
}

@font-face {
	font-family: 'MetaOT SemiBold';
	src: url("/fonts/MetaOT/MetaOT-Bold.otf");
	font-style: normal;
	font-weight: 600;
	font-display: fallback;
}

@font-face {
	font-family: 'MetaOT Bold';
	src: url("/fonts/MetaOT/MetaOT-Bold.otf");
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
}


* {box-sizing: border-box; scroll-behavior: smooth;}
body {
	background-color: #F8F8F8;
	margin: 0;
	font-family: MetaOT Normal, sans-serif;
	font-weight: normal;
	font-size: 17px;
	color: #474747;
	line-height: 31px;
	-moz-hyphens: auto;
	hyphens: auto;
}
h1, h2, h3, h4 {font-family: MetaOT Medium, sans-serif; font-weight: normal;}
h1.large {font-size: 54px; line-height: 100%; letter-spacing: -1.5px;}
h1 {font-size: 45px; line-height: 100%; margin-top: 25px; margin-bottom: 25px; letter-spacing: -1.5px;}
h2 {}
h3 {font-size: 22px; line-height: 100%;}
h4 {margin: 0}
b, strong {font-family: MetaOT Medium, sans-serif; font-weight: normal;}
.text_vor_ueberschrift {font-family: MetaOT Medium, sans-serif; font-size: 20px; display: inline-block; margin-bottom: 8px; letter-spacing: -1px;}
.regular {font-family: MetaOT Normal, sans-serif;}
.medium {font-family: MetaOT Medium, sans-serif;}
.semibold {font-family: MetaOT SemiBold, sans-serif;}
.bold {font-family: MetaOT Bold, sans-serif;}

a {
	color: #e30513;
	text-decoration: underline;
	font-family: MetaOT Normal, sans-serif;
}

.button_mittelblau {
	display: inline-block;
	border: none;
	text-align: center;
	color: white;
	background-color: #e30513;
	padding: 11px 37px;
	transition: 300ms;
}
.button_mittelblau:hover {background-color: #9f040e}

.line_big {line-height: 42px;}
hr {background-color: #e30513; border: none; height: 2px;}
select {
	font-family: MetaOT Normal, sans-serif;
	font-size: 13px;
	padding: 0 10px;
	border: 1px solid #E6E7E8;
	border-radius: 0;
	background-color: transparent;
	height: 36px;
	color: #9f040e;
}
input[type=text], input[type=text]::placeholder {
	color: #9f040e;
	font-family: MetaOT Normal, sans-serif;
	font-size: 14px;
}

.weiss {color: white} .bg_weiss {background-color: white}
.dunkelblau {color: #9f040e} .bg_dunkelblau {background-color: #9f040e}
.mittelblau {color: #e30513} .bg_mittelblau {background-color: #e30513}
.grau {color: #E6E7E8} .bg_grau {background-color: #E6E7E8}
.gruen {color: #D7DF23} .bg_gruen {background-color: #D7DF23}

.dib {display: inline-block;}
.block {display: block;}
.none, .radio_none {display: none !important;}
.oScroll {overflow: scroll;}
.oHide {overflow: hidden;}
.oVisible {overflow: visible;}
.hr {text-align:right}
.hl {text-align:left}
.hc {text-align:center}
.vt {vertical-align:top}
.vb {vertical-align:bottom}
.vm {vertical-align:middle}
.float_left {float:left;}
.float_right {float:right;}
.float_clear {float:none;}
.absolute {position:absolute;}
.relative {position:relative;}



.lm0 {margin-left: 0} .rm0 {margin-right: 0}
.tm0 {margin-top: 0} .bm0 {margin-bottom: 0}
.hm0 {margin-left: 0; margin-right: 0;}
.vm0 {margin-top: 0; margin-bottom: 0;}

.lm9 {margin-left: 17px} .rm9 {margin-right: 17px}
.tm9 {margin-top: 17px} .bm9 {margin-bottom: 17px}
.hm9 {margin-left: 17px; margin-right: 17px;}
.vm9 {margin-top: 17px; margin-bottom: 17px;}

.lp9 {padding-left: 17px} .rp9 {padding-right: 17px}
.tp9 {padding-top: 17px} .bp9 {padding-bottom: 17px}
.hp9 {padding-left: 17px; padding-right: 17px;}
.vp9 {padding-top: 17px; padding-bottom: 17px;}

.lm18 {margin-left: 34px} .rm18 {margin-right: 34px}
.tm18 {margin-top: 34px} .bm18 {margin-bottom: 34px}
.hm18 {margin-left: 34px; margin-right: 34px}
.vm18 {margin-top: 34px; margin-bottom: 34px}

.lp18 {padding-left: 34px} .rp18 {padding-right: 34px}
.tp18 {padding-top: 34px} .bp18 {padding-bottom: 34px}
.hp18 {padding-left: 34px; padding-right: 34px}
.vp18 {padding-top: 34px; padding-bottom: 34px}

.lm27 {margin-left: 51px} .rm27 {margin-right: 51px}
.tm27 {margin-top: 51px} .bm27 {margin-bottom: 51px}
.hm27 {margin-left: 51px; margin-right: 51px}
.vm27 {margin-top: 51px; margin-bottom: 51px}

.lp27 {padding-left: 51px} .rp27 {padding-right: 51px}
.tp27 {padding-top: 51px} .bp27 {padding-bottom: 51px}
.hp27 {padding-left: 51px; padding-right: 51px}
.vp27 {padding-top: 51px; padding-bottom: 51px}

.lm36 {margin-left: 68px} .rm36 {margin-right: 68px}
.tm36 {margin-top: 68px} .bm36 {margin-bottom: 68px}
.hm36 {margin-left: 68px; margin-right: 68px;}
.vm36 {margin-top: 68px; margin-bottom: 68px;}

.lp36 {padding-left: 68px} .rp36 {padding-right: 68px}
.tp36 {padding-top: 68px} .bp36 {padding-bottom: 68px}
.hp36 {padding-left: 68px; padding-right: 68px;}
.vp36 {padding-top: 68px; padding-bottom: 68px;}

.lm54 {margin-left: 102px} .rm54 {margin-right: 102px}
.tm54 {margin-top: 102px} .bm54 {margin-bottom: 102px}
.hm54 {margin-left: 102px; margin-right: 102px;}
.vm54 {margin-top: 102px; margin-bottom: 102px;}

.lp54 {padding-left: 102px} .rp54 {padding-right: 102px}
.tp54 {padding-top: 102px} .bp54 {padding-bottom: 102px}
.hp54 {padding-left: 102px; padding-right: 102px;}
.vp54 {padding-top: 102px; padding-bottom: 102px;}

.lp36-18-9 {padding-left: 68px} .rp36-18-9 {padding-right: 68px}
.tp36-18-9 {padding-top: 68px} .bp36-18-9 {padding-bottom: 68px}
.hp36-18-9 {padding-left: 68px; padding-right: 68px;}
.vp36-18-9 {padding-top: 68px; padding-bottom: 68px;}

.tp54-36-36 {padding-top: 102px;}
.tp36-36-18 {padding-top: 68px}

.tm18-9 {margin-top: 34px}

.bm54-36 {margin-bottom: 102px}


.wide1, .col14, .col14-2-1, .wide2, .col24,.wide3, .col34,.wide4, .col44,
.col13, .col13-2-1, .col23, .col33, .col15, .col25, .col35, .col45, .col12, .col12-1-1  {display: inline-block; }
.col44, .col33, .wide4 {width: 100%;}
.wide1, .col14 {width: 24.5%;}
.col15 {width: 19.5%;}
.col13, .col13-2-1 {width: 32.5%;}
.col25 {width: 39.5%;}
.wide2, .col24, .col12, .col12-1-1 {width: 49.2%;}
.col35 {width: 59.5%;}
.col45 {width: 79.5%;}
.col23 {width: 66%;}
.wide3, .col34 {width: 74.2%;}

.show360 {display: none !important;}
.show600 {display: none;}
/* ---- Voreinstellungen nach Viewport ---- */
@media screen and (max-width: 1440px) {
	.hide1440 {display: none !important;}
}
@media screen and (max-width: 1240px) {
	.hide1240 {display: none !important;}
	.col13-2-1 {width: 49%;} 
}
@media screen and (max-width: 1024px) {
	.col12-1-1 {width: 100%;}
	.hide1024 {display: none !important;}
	.col25, .col35, .col14-2-1 {width: 49%;} 
	.col15 {width: 24.5%}
	.col45 {width: 74.5%}
	
	.lp36-18-9 {padding-left: 50px} .rp36-18-9 {padding-right: 50px}
	.tp36-18-9 {padding-top: 50px} .bp36-18-9 {padding-bottom: 50px}
	.hp36-18-9 {padding-left: 50px; padding-right: 50px;}
	.vp36-18-9 {padding-top: 50px; padding-bottom: 50px;}
	
	.tp54-36-36 {padding-top: 68px;}
	.bm54-36 {margin-bottom: 68px}
}
@media screen and (max-width: 768px) {
	.hide768 {display: none !important;}

	.wide2, .col24, .col23, .wide3, .col34, .col12, .col13-2-1, .col14-2-1 {width: 100%;}
	.wide1, .col14, .col13  {width: 49%;}
}

@media screen and (max-width: 600px) {
	h1 {font-size: 42px; margin-top: 15px; margin-bottom: 15px;}
	h1.large {font-size: 46px}
	.text_vor_ueberschrift {font-size: 16px; line-height: 100%; letter-spacing: 0;}
	
	.hide600 {display: none !important;}
	.show600 {display: block !important;}
	.wide1, .col14, .col13, .col15, .col25, .col35, .col45 {width: 100%;}
	
	.lp36-18-9 {padding-left: 20px} .rp36-18-9 {padding-right: 20px}
	.tp36-18-9 {padding-top: 20px} .bp36-18-9 {padding-bottom: 20px}
	.hp36-18-9 {padding-left: 20px; padding-right: 20px;}
	.vp36-18-9 {padding-top: 20px; padding-bottom: 20px;}
	
	.tp36-36-18 {padding-top: 30px}
	
	.tm18-9 {margin-top: 20px}
}
@media screen and (max-width: 360px) {
	.hide360 {display: none !important;}
	.show360 {display: inline-block !important;}
}
/* ---- Ende Voreinstellungen nach Viewport ---- */

#main {
	max-width: 1440px;
	margin: 0 auto;
	background-color: #fff;
	overflow: hidden;
}

/* --- Liste mit gruenen Streifen --- */
ul.liste_streifen_gruen {list-style: none;}
ul.liste_streifen_gruen > li {position: relative;}
ul.liste_streifen_gruen > li::before {
	content: '';
	display: inline-block;
	height: 2px;
	width: 17px;
	background-image: url('../bilder/list_gruen.svg');
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	left: -30px;
	top: 12px;
}



/* -------------------- Module -------------------- */

/* --- Menue --- */
header {
	position: relative;
	z-index: 100;
}
header ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
header a {border-bottom: none;}
header input, #main_menue label {display: none;}
#main_menue {
	display: inline-block;
	width: 100%;
	position: relative;
}
#main_menue #jubaconMenuLogo {
	width: 170px;
	height: 72px;
	background-image: url('./bilder/inndata_logo.svg');
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 68px;
	top: 20px;
}
#main_menue #menu_eb_1 {
	display: inline-block;
	background-color: #9f040e;
	position: relative;
	width: calc(52.45% + 207px);
	text-align: center;
	padding-right: 146px;
}
#main_menue #menu_eb_1::before {
	content: '';
	display: inline-block;
	position: absolute;
	border-top: 71px solid #9f040e;
	border-left: 32px solid transparent;
	left: -32px;
}
#main_menue #menu_eb_1 > li {
	display: inline-block;
	text-align: center;
	padding: 0 4%;
}
#main_menue #menu_eb_1 > li > a {
	color: white;
	display: inline-block;
	padding: 20px 0;
	height: 71px;
	font-size: 15px;
}
#main_menue #menu_eb_1 > li > a:hover::after {
	content: "";
	display: block;
	border-radius: 1px;
	border: 1px solid;
	margin: 0 auto;
}

#main_menue_icons {
	background-color: #9f040e;
	width: 146px;
	float: right;
	padding-right: 68px;
	position: absolute;
	top: 0;
	right: 0;
}
#main_menue_icons > ul > li {
	display: inline-block;
	vertical-align: top;
	text-align: left;
}
#header_icons_kontakt {padding-left: 10px; padding-right: 5px;}
#header_icons_kontakt > label {
	display: inline-block;
	height: 71px;
}
#header_icons_kontakt > label > div {
	width: 24px;
	height: 24px;
	background-image: url('./bilder/telefon_weiss.svg');
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	margin-top: 23px;
}
#header_icons_kontakt:hover > label > div {
    background-image: url('./bilder/telefon_mittelblau.svg');
}
#header_icons_kontakt > ul {
    display: block;
    position: absolute;
    z-index: 100;
    margin: 0;
    width: 300px;
    background-color: white;
    padding: 30px 10px;
    right: 0;
    box-shadow: 0px 3px 3px 0px rgba(59, 48, 48, 0.24);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms;
}
#header_icons_kontakt:hover > ul {
    opacity: 1;
    pointer-events: auto;
}
#header_icons_kontaktformular > a {
	display: inline-block;
	vertical-align: top;
	width: 32px;
	height: 24px;
	background-image: url('./bilder/mail_weiss.svg');
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 23px;
}
#header_icons_kontaktformular > a:hover {
	background-image: url('./bilder/mail_mittelblau.svg');
}
#header_icons_kontakt > ul > li > div:first-of-type {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 6px;
}
#header_icon_tel {background-image: url('./bilder/dropdown_telefon.svg')}
#header_icon_mail {background-image: url('./bilder/dropdown_mail.svg')}
#header_icon_adress {background-image: url('./bilder/dropdown_standort.svg')}
#header_icons_kontakt > ul > li > div:nth-of-type(2) {
	display: inline-block;
	vertical-align: top;
}
#header_icons_kontakt > ul > li {display: inline-block; margin-bottom: 5px;}

@media screen and (max-width: 1240px) {
	#main_menue #menu_eb_1 > li {padding: 0 2.9%;}
}
@media screen and (max-width: 1024px) {
	#main_menue_icons {padding-right: 110px;}
	#main_menue #menu_eb_1 {
		display: block;
		position: fixed;
		right: -300px;
		top: 0;
		background-color: #e30513;
		height: 100%;
		z-index: 200;
		padding: 55px 20px;
		width: 300px;
		max-width: 100%;
		transition: right 600ms;
		font-size: 20px;
	}
	#rad_menuOpen:checked ~ #jubaconMenu > #menu_eb_1 {
		right: 0;
		box-shadow: -5px 10px 18px;
	}
	#main_menue label.toggleMenuButton {
		display: block;
		position: absolute;
		top: 22px;
		right: 45px;
		width: 38px;
		height: 29px;
		background-image: url('./bilder/menue_mobile_icon.gif');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		transition: right 600ms;
		cursor: pointer;
		z-index: 1;
	}
	#jubaconMenu > label.toggleMenuButton#lbl_closeMenu {
		z-index: 300;
		position: fixed;
		visibility: hidden;
	}
	#rad_menuOpen:checked ~ #jubaconMenu > label.toggleMenuButton#lbl_closeMenu {
		right: 20px;
		visibility: visible;
	}
	#main_menue #menu_eb_1::before {display: none;}
	#main_menue #menu_eb_1 > li {
		display: block;
		margin-right: 0 !important;
		width: auto !important;
		text-align: left;
		padding: 10px;
		border-bottom: 2px solid #9f040e;
		position: static;
	}
	#main_menue #menu_eb_1 > li > a {
		height: auto;
		padding: 0;
		font-size: 16px;
	}
	#main_menue #menu_eb_1 > li > a:hover::after {display: none;}
	#main_menue #menu_eb_1 > li > a:hover {text-decoration: underline;}
	header {height: 71px;}
	#main_menue_icons::before {
		content: '';
		display: inline-block;
		position: absolute;
		border-top: 71px solid #9f040e;
		border-left: 32px solid transparent;
		left: -32px;
	}
	#main_menue_icons {width: calc(48% + 207px);}
	#main_menue #jubaconMenuLogo {
		left: 50px;
		width: 11%;
	}
	#main_menue_icons > ul > li > input[type="checkbox"]:checked ~ ul {
		opacity: 1;
		pointer-events: auto;
	}
	#main_menue_icons > ul > li > input[type="checkbox"]:checked ~ label.header_icons_bild > div {background-image: url('./bilder/telefon_mittelblau.svg');}
	#header_icons_kontakt > label {cursor: pointer;}
}
@media screen and (max-width: 768px) {
	#main_menue #jubaconMenuLogo {width: 11%;}
	#main_menue_icons {width: calc(35% + 207px);}
}
@media screen and (max-width: 600px) {
	#main_menue #jubaconMenuLogo {
		left: 20px;
		width: 100px;
	}
	#main_menue_icons {width: calc(13.5% + 162px);}
	header {height: 40px;}
	#header_icons_kontakt > label {height: 40px;}
	#main_menue_icons::before {
		border-top: 40px solid #9f040e;
		border-left: 18px solid transparent;
		left: -18px;
	}
	#header_icons_kontakt > label > div {margin-top: 6px;}
	#header_icons_kontaktformular > a {margin-top: 7px;}
	#main_menue label.toggleMenuButton {
		width: 27px;
		height: 24px;
		top: 8px;
		right: 20px;
	}
	#main_menue #menu_eb_1 {padding: 40px 20px;}
	#main_menue #menu_eb_1 > li {padding: 5px 10px;}
	#main_menue_icons {
		padding-right: 70px;
		height: 40px;
	}
	#main_menue_icons ul {display: none;}
}
@media screen and (max-width: 400px) {
	#main_menue #jubaconMenuLogo {width: 20%;}
}
@media screen and (max-width: 340px) {
	#main_menue #jubaconMenuLogo {display: none;}
}



/* --- Banner --- */
#banner_streifen_blau {
	display: inline-block;
	background-color: #9f040e;
	position: relative;
	height: 410px;
	width: 52.45%;
}
#banner_streifen_blau::before {
	content: '';
	display: inline-block;
	position: absolute;
	border-top: 410px solid #9f040e;
	border-left: 188px solid transparent;
	left: -188px;
}
.banner_abstand {height: 14px;}
#banner_streifen_gruen_liegend {
	display: inline-block;
	background-color: #D7DF23;
	position: relative;
	height: 14px;
	width: calc(52.45% + 215px);
	vertical-align: top;
}
#banner_streifen_gruen_liegend::before {
	content: '';
	display: inline-block;
	position: absolute;
	border-top: 14px solid #D7DF23;
	border-left: 6px solid transparent;
	left: -6px;
}
#banner_streifen_gruen_stehend_container {
	background-color: #D7DF23;
	height: 523px;
	position: absolute;
	top: -71px;
	width: 100%;
}
#banner_streifen_gruen_stehend_1 {
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(100% - 52.45% - 271px);
	background-color: white;
}
#banner_streifen_gruen_stehend_1::after {
	content: '';
	display: inline-block;
	position: absolute;
	border-bottom: 523px solid white;
	border-right: 243px solid transparent;
	right: -243px;
}
#banner_streifen_gruen_stehend_2 {
	display: inline-block;
	position: relative;
	height: 100%;
	width: calc(52.45% + 12px);
	background-color: white;
}
#banner_streifen_gruen_stehend_2::before {
	content: '';
	display: inline-block;
	position: absolute;
	border-top: 523px solid white;
	border-left: 243px solid transparent;
	left: -243px;
}
#banner_text {
	position: absolute;
	right: 0;
	bottom: 34px;
	font-size: 28px;
}	
#bild_banner {
	width: 51%;
	position: absolute;
	left: -256px;
	top: 53px;
}
#banner_text_mobil {display: none;}
@media screen and (max-width: 1024px) {
	#banner_streifen_blau {width: 48%;}
	#banner_streifen_gruen_liegend {width: calc(48% + 215px);}
	#banner_streifen_gruen_stehend_1 {width: calc(100% - 48% - 271px);}
	#banner_streifen_gruen_stehend_2 {width: calc(48% + 12px);}
	#banner_text {font-size: 20px;}
	#bild_banner {width: 62%;}
}
@media screen and (max-width: 768px) {
	#banner_streifen_blau {width: 35%;}
	#banner_streifen_gruen_liegend {width: calc(35% + 215px);}
	#banner_streifen_gruen_stehend_1 {width: calc(100% - 35% - 271px);}
	#banner_streifen_gruen_stehend_2 {width: calc(35% + 12px);}
	#banner_text {font-size: 18px;}
	#bild_banner {width: 100%;}
}
@media screen and (max-width: 600px) {
	#banner_streifen_blau {width: 13.5%; height: 330px;}
	#banner_streifen_gruen_liegend {width: calc(13.5% + 167px);}
	#banner_streifen_gruen_stehend_1 {width: calc(100% - 13.5% - 216px);}
	#banner_streifen_gruen_stehend_2 {width: calc(13.5% + 11px);}
	#banner_streifen_blau::before {
		border-top: 330px solid #9f040e;
		border-left: 150px solid transparent;
		left: -150px;
	}
	#banner_streifen_gruen_liegend_container {height: 9px !important;}
	#banner_streifen_gruen_liegend {height: 9px;}
	.banner_abstand {height: 9px;}
	#banner_streifen_gruen_liegend::before {
		border-top: 9px solid #D7DF23;
		border-left: 4px solid transparent;
		left: -4px;
	}
	#banner_text {display: none;}
	#banner_text_mobil {
		display: block;
		position: absolute;
		border: 0;
		bottom: 0;
		width: 150%;
		z-index: 1;
		font-size: 18px;
		line-height: 150%;
	}
	#banner_streifen_gruen_stehend_container {
		height: calc(330px + 71px + 27px);
	}
	#banner_streifen_gruen_stehend_1::after {
		border-bottom: 428px solid white;
		border-right: 194px solid transparent;
		right: -194px;
	}
	#banner_streifen_gruen_stehend_2::before {
		border-top: 428px solid white;
		border-left: 194px solid transparent;
		left: -194px;
	}
	#bild_banner {width: 400%; top: 20px;}
}
@media screen and (max-width: 480px) {
	#banner_text_mobil {width: 180%;}
	#bild_banner {width: 420%;}
}
@media screen and (max-width: 390px) {
	#banner_text_mobil {width: 220%;}
}
@media screen and (max-width: 350px) {
	#banner_text_mobil {display: none;}
}


/* --- Stufen --- */
#stufen {
	margin-top: -110px;
	position: relative;
	z-index: 1;
}
#stufen_oben > h1 {width: 39%;}
#stufen_text {width: 47%;}
.stufen_box {
	width: 25%;
	line-height: 150%;
	padding-right: 16px;
}
.stufen_box:nth-of-type(1) .stufen_box_text {min-height: 360px;}
.stufen_box:nth-of-type(2) .stufen_box_text {min-height: 295px;}
.stufen_box:nth-of-type(3) .stufen_box_text {min-height: 230px;}
.stufen_box_header {
	height: 60px;
	margin-bottom: 5px;
}
.stufen_box_header > div {
	height: 100%;
	text-transform: uppercase;
}
.stufen_box_header > div:nth-of-type(1) {
	width: 52px;
	font-size: 31px;
	padding-top: 18.5px;
	padding-left: 12px;
	position: relative;
}
.stufen_box_header > div:nth-of-type(1)::after {
	content: '';
	display: inline-block;
	position: absolute;
	border-bottom: 60px solid #D7DF23;
	border-right: 27px solid transparent;
	right: -27px;
	top: 0;
}
.stufen_box_header > div:nth-of-type(2) {
	width: calc(100% - 52px - 27px - 4px);
	line-height: 120%;
	padding-top: 10px;
	padding-left: 14px;
	position: relative;
	float: right;
}
.stufen_box_header > div:nth-of-type(2)::before {
	content: '';
	display: inline-block;
	position: absolute;
	border-top: 60px solid #9f040e;
	border-left: 27px solid transparent;
	left: -27px;
	top: 0;
}
.stufen_box_text {
	background-color: #F5F6F6;
	padding: 20px 15px;
	font-size: 14px;
}
.stufen_box_text ul {padding-left: 30px;}
.stufen_box_text ul > li {margin-bottom: 15px;}
.stufen_box_text ul > li:last-of-type {margin-bottom: 0;}
@media screen and (max-width: 1240px) {
	.stufen_box {width: calc(33.33% - 16px);}
	.stufen_box:nth-of-type(1) .stufen_box_text {min-height: 425px;}
	.stufen_box:nth-of-type(2) .stufen_box_text {min-height: 360px;}
	.stufen_box:nth-of-type(3) .stufen_box_text {min-height: 295px;}
}
@media screen and (max-width: 1024px) {
	#stufen_text { width: 65%;}
	#stufen {margin-top: 30px;}
	#stufen_oben > h1 { width: 100%;}
}
@media screen and (max-width: 900px) {
	.stufen_box {
		width: calc(50% - 16px);
		vertical-align: top;
	}
	.stufen_box:last-of-type {margin-top: 40px;}
}
@media screen and (max-width: 600px) {
	#stufen_text { width: 100%;}
	.stufen_box {
		display: block;
		width: 100%;
		margin-right: 0;
		margin-bottom: 26px;
	}
	.stufen_box:last-of-type {margin-bottom: 0;}
	.stufen_box_text {min-height: unset !important;}
	.stufen_box:last-of-type {margin-top: 0;}
}


/* --- Nutzen --- */
#nutzen_bild {width: 22.5%;}
#nutzen_text_container {
	width: 77.5%;
	padding-right: 15%;
}
.streifen_von_rechts_gruen {
	display: inline-block;
	width: 47%;
	height: 14px;
	position: relative;
	background-color: #D7DF23;
}
.streifen_von_rechts_gruen::before {
	content: '';
	display: inline-block;
	position: absolute;
	border-left: 6px solid transparent;
	border-bottom: 14px solid #D7DF23;
	left: -6px;
}
@media screen and (max-width: 1024px) {
	#nutzen_text_container {
		width: 68%;
		padding-right: 50px;
		padding-left: 40px;
	}
	#nutzen_bild {width: 32%;}
	.streifen_von_rechts_gruen {width: 49%;}
}
@media screen and (max-width: 600px) {
	#nutzen_bild {
		width: 100%;
		padding-right: 20px;
		margin-bottom: 34px;
	}
	#nutzen_text_container {
		width: 100%;
		padding-left: 0;
		padding-right: 20px;
	}
	.streifen_von_rechts_gruen {width: 83%;}
}


/* --- Anwendungsbereiche --- */
#anwendungsbereiche_oben {
	width: 54%;
	margin-bottom: 50px;
}
#anwendungsbereiche_list {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: grid;
	grid-template-areas:
		'anwendung_1 anwendung_4 anwendung_7'
		'anwendung_2 anwendung_5 anwendung_8'
		'anwendung_3 anwendung_6 none';
	grid-template-columns: 28% 28% 44%;
	row-gap: 20px;
}
#anwendungsbereiche_list > li {
	display: grid;
	grid-template-columns: 68px auto;
	line-height: 140%;
	padding-right: 60px;
}
#anwendungsbereiche_list > li:nth-of-type(1) {grid-area: anwendung_1;}
#anwendungsbereiche_list > li:nth-of-type(2) {grid-area: anwendung_2;}
#anwendungsbereiche_list > li:nth-of-type(3) {grid-area: anwendung_3;}
#anwendungsbereiche_list > li:nth-of-type(4) {grid-area: anwendung_4;}
#anwendungsbereiche_list > li:nth-of-type(5) {grid-area: anwendung_5;}
#anwendungsbereiche_list > li:nth-of-type(6) {grid-area: anwendung_6;}
#anwendungsbereiche_list > li:nth-of-type(7) {grid-area: anwendung_7;}
#anwendungsbereiche_list > li:nth-of-type(8) {grid-area: anwendung_8;}
.anwendungsbereiche_list_nummer, .anwendungsbereiche_list_text {align-self: center;}
.anwendungsbereiche_list_text {margin-left: 14px;}
.anwendungsbereiche_list_nummer > div:first-of-type {
	height: 44px;
	width: 3px;
	position: relative;
	background-color: #9f040e;
	display: inline-block;
	vertical-align: top;
}
.anwendungsbereiche_list_nummer > div:first-of-type::after {
    content: '';
    display: inline-block;
    position: absolute;
    border-right: 20px solid transparent;
    border-bottom: 44px solid #9f040e;
    right: -20px;
}
.anwendungsbereiche_list_nummer > div:last-of-type {
	color: white;
	height: 44px;
	width: 40px;
	position: relative;
	background-color: #D7DF23;
	display: inline-block;
	vertical-align: top;
	margin-left: 19px;
	font-size: 24px;
}
.anwendungsbereiche_list_nummer > div:last-of-type > span {
	margin-top: 10px;
	display: inline-block;
	margin-left: 2px;
}
.anwendungsbereiche_list_nummer > div:last-of-type::before {
    content: '';
    display: inline-block;
    position: absolute;
    border-left: 20px solid transparent;
    border-top: 44px solid #D7DF23;
    left: -20px;
}
.streifen_von_links_gruen {
	width: 58.8%;
	height: 14px;
	position: relative;
	background-color: #D7DF23;
	margin-bottom: 14px;
}
.streifen_von_links_gruen::after {
	content: '';
	display: inline-block;
	position: absolute;
	border-right: 6px solid transparent;
	border-bottom: 14px solid #D7DF23;
	right: -6px;
}
.streifen_von_links_grau {
	width: 59.7%;
	height: 53px;
	position: relative;
	background-color: #E6E7E8;;
}
.streifen_von_links_grau::after {
	content: '';
	display: inline-block;
	position: absolute;
	border-right: 25px solid transparent;
	border-bottom: 53px solid #E6E7E8;
	right: -25px;
}
@media screen and (max-width: 1024px) {
	#anwendungsbereiche_oben {width: 75%;}
	#anwendungsbereiche_list {
		grid-template-areas:
			'anwendung_1 anwendung_5'
			'anwendung_2 anwendung_6'
			'anwendung_3 anwendung_7'
			'anwendung_4 anwendung_8';
		grid-template-columns: 50% 50%;
		row-gap: 30px;
	}
	#anwendungsbereiche_list > li {padding-right: 0;}
	#anwendungsbereiche_container {margin-bottom: 50px;}
	#anwendungsbereiche_list > li:nth-of-type(1),
	#anwendungsbereiche_list > li:nth-of-type(2),
	#anwendungsbereiche_list > li:nth-of-type(3),
	#anwendungsbereiche_list > li:nth-of-type(4) {padding-right: 25px;}
	#anwendungsbereiche_list > li:nth-of-type(5),
	#anwendungsbereiche_list > li:nth-of-type(6),
	#anwendungsbereiche_list > li:nth-of-type(7),
	#anwendungsbereiche_list > li:nth-of-type(8) {padding-left: 25px;}
}
@media screen and (max-width: 600px) {
	#anwendungsbereiche_oben {
		width: 100%;
		margin-bottom: 30px;
	}
	#anwendungsbereiche_list {
		grid-template-areas:
			'anwendung_1'
			'anwendung_2'
			'anwendung_3'
			'anwendung_4'
			'anwendung_5'
			'anwendung_6'
			'anwendung_7'
			'anwendung_8';
		grid-template-columns: 100%;
		row-gap: 20px;
	}
	#anwendungsbereiche_list > li {padding-right: 0 !important; padding-left: 0 !important;}
	.streifen_von_links_gruen {width: 66.2%;}
	.streifen_von_links_grau {width: 70.2%;}
}


/* --- Richtlinie --- */
#richtlinie_bild_mobil {
	display: none;
	width: 100%;
	padding: 0 30px;
}
#richtlinie_text {
	width: 69%;
	padding-right: 45px;
}
.richtlinie_text_desktop {
	width: 50%;
	padding-right: 40px;
}
#richtlinie_text_mobil {display: none;}
#richtlinie_bild_desktop {
	width: 31%;
	margin-top: -33px;
}
#richtlinie_bild_desktop > img {width: 100%;}
.zwei_streifen_von_rechts_grau, .zwei_streifen_von_rechts_blau {
	display: inline-block;
	height: 62px;
	position: relative;
}
.zwei_streifen_von_rechts_grau {
	width: 32%;
	background-color: #E6E7E8;
	margin-right: 39px;
}
.zwei_streifen_von_rechts_blau {
	width: 14%;
	background-color: #e30513;
}
.zwei_streifen_von_rechts_grau::before, .zwei_streifen_von_rechts_grau::after {
	content: '';
	display: inline-block;
	position: absolute;
	border-bottom: 62px solid #E6E7E8;
}
.zwei_streifen_von_rechts_grau::before {
	border-left: 29px solid transparent;
	left: -29px;
}
.zwei_streifen_von_rechts_grau::after {
	border-right: 29px solid transparent;
	right: -29px;
}
.zwei_streifen_von_rechts_blau::before {
	content: '';
	display: inline-block;
	position: absolute;
	border-top: 62px solid #e30513;
	border-left: 29px solid transparent;
	left: -29px;
}
.zwei_streifein_container:nth-of-type(1) {display: none;}
@media screen and (max-width: 1024px) {
	#richtlinie_text {
		width: 67%;
		padding-right: 75px;
	}
	.richtlinie_text_desktop {display: none;}
	#richtlinie_text_mobil {display: block;}
	#richtlinie_bild_desktop {
		width: 33%;
		position: relative;
	}
	.zwei_streifein_container:nth-of-type(1) {
		display: block;
		position: absolute;
		width: calc(100% + 50px);
		right: -50px;
		margin-top: 90px;
	}
	.zwei_streifein_container:nth-of-type(2) {display: none;}
	.zwei_streifen_von_rechts_grau {width: calc(50% - 19px);}
	.zwei_streifen_von_rechts_blau {width: calc(50% - 20px);}
}
@media screen and (max-width: 600px) {
	#richtlinie_bild_mobil {display: block;}
	#richtlinie_bild_desktop {display: none;}
	#richtlinie_text {
		width: 100%;
		padding-right: 0;
	}
	.zwei_streifein_container:nth-of-type(2) {display: block;}
	.zwei_streifein_container {margin-top: 50px;}
	.zwei_streifen_von_rechts_grau, .zwei_streifen_von_rechts_blau {height: 31px;}
	.zwei_streifen_von_rechts_grau::before {display: none;}
	.zwei_streifen_von_rechts_grau::after {
		border-bottom: 31px solid #E6E7E8;
		border-right: 14px solid transparent;
		right: -14px;
	}
	.zwei_streifen_von_rechts_blau::before {
		content: '';
		display: inline-block;
		position: absolute;
		border-top: 31px solid #e30513;
		border-left: 14px solid transparent;
		left: -14px;
	}
	.zwei_streifen_von_rechts_grau {
		margin-right: 19px;
		width: calc(57% - 10px);
	}
	.zwei_streifen_von_rechts_blau  {width: calc(43% - 9px);}
}


/* --- Footer --- */
footer {
	background-color: #9f040e;
	color: white;
}
/*footer > div {margin-right: 50px;}*/
footer > div:nth-of-type(1) {width: 18%;}
footer > div:nth-of-type(2) {width: 23%;}
footer > div:nth-of-type(3) {width: 33.33%}
footer h3 {font-family: MetaOT Bold, sans-serif}
footer a {
	color: white;
	border: none;
	font-family: MetaOT Normal, sans-serif;
}
footer a:hover {color: #9f040e;}
@media screen and (max-width: 1024px) {
	footer > div {
		margin-right: 0;
		margin-bottom: 50px;
	}
	footer > div:nth-of-type(1), footer > div:nth-of-type(2) {width: 50%;}
	footer > div:nth-of-type(3) {
		width: 75%;
		margin-bottom: 0;
	}
}
@media screen and (max-width: 600px) {
	footer > div:nth-of-type(1), footer > div:nth-of-type(2) {width: 100%;}
	footer > div:nth-of-type(3) {width: 100%;}
	footer {
		padding-top: 52px !important;
		padding-bottom: 60px !important;
	}
}


/* --- Lightframe --- */
.lightFrame_darkLayer {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

@media screen and (max-width: 1440px) {}
@media screen and (max-width: 1240px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 600px) {}
@media screen and (max-width: 360px) {}/* --- Schriften --- */
/* --- --- */
/* MenueCSS  */
/*
================================================================
				CSS fuer Mehr ebenen Menue
================================================================
Menue Text Color: 							#3a3a39
Schriftart Menue							MetaOT Normal, sans-serif
Menue Ebene 1 Hover Color:					#00aeef
Menue Ebene 1 Hover Border-bottom Color:	#00000000
Menue Ebene 2+ Background Color:			#f2f3f3
Menue Ebene 2+ Hover Color					Menue Ebene 1 Hover Color
Menue Ebene 1 Hover background color:		#ffffff
Menue Ebene 2+ Hover background Color:		Menue Ebene 2+ Background Color


*/
/*
=====================================================================
						DESKTOP ANSICHT
=====================================================================
*/
#HeaderMainMenu{
	z-index:2;
	position: relative;
	margin:0;
	width: 75%;
	bottom:-10px;
}
#HeaderMainMenu, #HeaderMainMenu ul{
	list-style: none;
	padding-left:0;
}
#HeaderMainMenu_mobile_chk, #HeaderMainMenu > li > a{display:none;}
#HeaderMainMenu > li > ul > li{
	position:relative;
	margin-right:1%;
	padding:10px 0;
	display:inline-block;
	float:left;
}
#HeaderMainMenu > li > ul > li:not(:first-of-type)::before {
	content: '';
	position: absolute;
	height: 100%;
	border-left: 1px solid #3a3a39;
	left: -8px;
	top: 0;
}
#HeaderMainMenu > li > ul > li.isnode > a{position:relative; padding-right:34px}
#HeaderMainMenu > li > ul > li.isnode > a::after{
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid rgba(0, 0, 0, 0.5);
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	
}
#HeaderMainMenu > li > ul > li ul{
	opacity: 0;
	pointer-events: none;
	position: absolute;
	background-color:#f2f3f3;												/*-- Menue Ebene 2+ Background Color --*/
	padding: 20px;
}
#HeaderMainMenu > li > ul > li > ul{
	min-width: 100%;
	top:100%;
	width: fit-content;
}
#HeaderMainMenu > li > ul > li > a{
	text-decoration: none;
	color:#3a3a39;															/*-- Menue Text Color --*/
	border-bottom: 2px solid transparent;
	padding:10px;
	font-size:21px;
}
#HeaderMainMenu > li > ul > li ul a{
	text-decoration: none;
	color:#3a3a39;															/*-- Menue Text Color --*/
	padding:2px 13px;
	display:inline-block;
	width:100%;
	font-weight: normal;
}
#HeaderMainMenu > li > ul > li ul > li{position: relative;}
#HeaderMainMenu > li > ul > li ul > li:not(:last-of-type)::after {
	position: absolute;
	content: '';
	width: 100%;
	border-bottom: 1px solid #fff;
	left: 0;
	bottom: 4px;
}
#HeaderMainMenu > li > ul > li > ul ul{
	top:-5px;
	left:100%;
	width: fit-content;
}
#HeaderMainMenu > li > ul > li > ul a{
	white-space: nowrap;
	overflow: hidden;
	text-align:left;
	line-height: 1;
}
#HeaderMainMenu > li > ul > li ul li:hover > a,
#HeaderMainMenu > li > ul > li:hover > a {
	color:#e30513;															/*-- Menue Ebene 2+ Hover Color --*/
}
#HeaderMainMenu > li > ul li:hover > ul{opacity: 1; pointer-events: all;}
@media screen and (max-width:1440px){
	#HeaderMainMenu > li > ul > li:not(:first-of-type)::before{left: 0;}
	#HeaderMainMenu > li > ul > li > a{font-size:1.5vw; padding:8px;}
	#HeaderMainMenu > li > ul > li{margin-right:0;}
	#HeaderMainMenu > li > ul > li > ul{top: 100%;}
}
/* --- --- */
/* MenueMobileCSS  */
@media screen and (max-width:1024px){
  #HeaderMainMenu{
    position: fixed;
    top:0;
    height:100%;
    background-color:#333333;
    width: 70%;
    overflow: auto;
    right:100%;
    padding-top: 87px;
  }
  #HeaderMainMenu_mobile_chk:not(:checked) ~ #HeaderMainMenu{
    right:unset;
    left:0;
  }
  #HeaderMainMenu > li > ul li{width: 100%; text-align: left;}
  #HeaderMainMenu > li > ul > li:not(:first-of-type)::before,
  #HeaderMainMenu > li > ul > li ul > li:not(:last-of-type)::after,
  #HeaderMainMenu > li > ul > li.isnode > a::after
  {display:none;}
  #HeaderMainMenu > li > ul > li a{
    font-size:14px !important;;
    color:#ccc !important;
    display:inline-block;
    background-color:transparent !important;
    padding: 12px 30px 12px 0px !important;;
    width: 100%;
    line-height: normal !important;
    text-transform: Uppercase;
    border-top:1px solid #484848;
    text-decoration: none;
    overflow: visible !important;
    border-bottom: none !important;
  }
  #HeaderMainMenu > li > ul > li a:hover{
    background-color: #484848 !important;
    color:#fff !important;
  }
  #HeaderMainMenu > li > ul > li > a{padding-left: 30px !important;}
  #HeaderMainMenu > li > ul > li > ul > li > a{
    padding-left: 50px !important;
  }
  #HeaderMainMenu > li > ul > li > ul > li:last-of-type > a{
     border-bottom: 1px solid #484848 !important;
  }
  #HeaderMainMenu > li > ul li{padding:0 !important;}
  #HeaderMainMenu > li ul{
      position: relative !important;
      opacity: 1 !important;
      background-color: transparent !important;
      padding:0 !important;
  }
  #HeaderMainMenu_kb_show_menu{
    position: absolute;
    height: 31px;
    width: 37px;
    background-image: linear-gradient(0deg,#6a6a6a  0%, #6a6a6a 19%, #fff 20%,#fff  20%, #fff 39%, #6a6a6a 40%, #6a6a6a 59% ,#fff  59%, #fff 79%, #6a6a6a 80% , #6a6a6a 100%);
    left:10px;
    top: 55px;
    cursor: pointer;
  }
  #HeaderMainMenu_kb_hide_menu{
    position: fixed;
    z-index:3;
    background-image:url('../bilder/close-btn.png');
    background-size:contain;
    height: 30px;
    width: 30px;
    left:-70%;
    top:30px;
    opacity: 0.7;
    cursor:pointer;
  }
  #HeaderMainMenu_mobile_chk:not(:checked) ~ #HeaderMainMenu_kb_hide_menu{
    left:20px;
  }
  #HeaderMainMenu_kb_hide_menu:hover{opacity: 1;}
}

@media (max-width: 600px) {
	#HeaderMainMenu_kb_show_menu {top: 25px;}
}

@media screen and (max-width: 360px){#HeaderMainMenu{width:100%;}}
/* --- --- */
.HeaderWappen{width: 25px;}
.HomeButton  > img{width: 160px;}
/* --- --- */