/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* --------------------------- Variablen --------------------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
:root {
	/* Farben */
	--dunkelblau: #00325a;
	--hellblau: #005aaa;
	--rot: #e6323c;
	--schwarz: #212529;
	--hellgrau: #e5eaef;
	--grau: #EAEAEA;
	--dunkelgrau: #D1D1D1;
	--weiss: #ffffff;
	--gruen: #284623;
	--dunkelrot: #B42D28;
	--gelb: #F5A500;
	--hellgruen: #578E4D;
	
	/* Schriften */
	--regular: 'DIN-Regular', Arial, Helvetica, sans-serif;
	--medium: 'DIN-Medium', Arial, Helvetica, sans-serif;
	--bold: 'DIN-Bold', Arial, Helvetica, sans-serif;
	--icons: 'Material-Icons', Arial, Helvetica, sans-serif;
	--iconsoutlined: 'Material-Icons-Outlined', Arial, Helvetica, sans-serif;
	
	/* Abstände */
	--abstand_6: 7px;
	--abstand_9: 14px;
	--abstand_15: 21px;
	--abstand_18: 30px;
	--abstand_25: 40px;
	--abstand_36: 56px;
}



/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
/* --------------------------- Schriftarten Import --------------------------- */
/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
@font-face {
	font-family: 'DIN-Regular';
	src: url("./fonts/DIN-Regular.woff2");
	font-display: fallback;
}

@font-face {
	font-family: 'DIN-Medium';
	src: url("./fonts/DIN-Medium.woff2");
	font-display: fallback;
}

@font-face {
	font-family: 'DIN-Bold';
	src: url("./fonts/DIN-Bold.woff2");
	font-display: fallback;
}

@font-face {
	font-family: 'Material-Icons';
	src: url("./fonts/MaterialIconsSharp-Regular.otf");
	font-display: fallback;
}

@font-face {
	font-family: 'Material-Icons-Outlined';
	src: url("./fonts/MaterialIcons-Outlined.woff2");
	font-display: fallback;
}



/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* -------------------- Schriftformatierung -------------------- */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
html {
	font-size: 17px;
	line-height: 142%;
	hyphens: auto;
	font-family: var(--regular);
}

h1, h2, h3, h4, strong {
	font-family: var(--bold);
	font-weight: normal;
}

b {
	font-family: var(--medium);
	font-weight: normal;
}

h1, h2, h3, h4 {
	margin-top: 0;
	margin-bottom: var(--abstand_18);
	line-height: 115%;
}

a {
	font-family: var(--medium);
}


/* h1 {font-size: 282%;} 48px */
/* h2 {font-size: 235%;} 40px */
/* h3 {font-size: 189%;} 32px */
/* h4 {font-size: 157%;} 26.66px */

h1 {font-size: 235%;}
h2 {font-size: 189%;}
h3 {font-size: 157%;}
h4 {font-size: 125%;}


ul {padding-left: 15px;}


.fontRegular {font-family: var(--regular) !important;}

.fontMedium {font-family: var(--medium) !important;}

.fontBold {font-family: var(--bold) !important;}

.fontIcons {
	font-family: var(--icons) !important;
	vertical-align: top;
	font-size: 24px;
}

.fontIconsOutlined {
	font-family: var(--iconsoutlined) !important;
	vertical-align: top;
	font-size: 24px;
}

.socialMediaIcons {
	height: 22px;
	display: inline-block;
	vertical-align: top;
	width: 22px;
	object-fit: contain;
}

.fontInherit {
	font-family: inherit;
}


.fontSizeBig {font-size: 120% !important;}
.fontSizeNormal {font-size: 17px !important;}
.fontSizeSmall, small {font-size: 80% !important;}
.fontSizeTiny {font-size: 60% !important;}


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

.breakword {word-break: break-word;}



@media (max-width: 1024px) {
	
}

@media (max-width: 768px) {
	
}

@media (max-width: 600px) {
	html {
		font-size: 16px;
	}
}



/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* ------------------------------ Inputs ------------------------------ */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"]),
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	max-width: 100%;
	outline: none;
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"]),
textarea,
select {
	padding: 10px;
	background-color: var(--weiss);
	border: 2px solid var(--dunkelblau);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="color"] {padding: 0;}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [readonly]):focus,
textarea:focus,
select:focus {
	box-shadow: 0 0 0 0.25rem rgba(0, 50, 90, 0.25);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [readonly]):invalid,
textarea:invalid,
select:invalid {
	border-color: var(--dunkelrot);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [readonly]):invalid:focus,
textarea:invalid:focus,
select:invalid:focus {
	box-shadow: 0 0 0 0.25rem rgba(180, 45, 40, 0.25);
}

/*
input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [readonly]):valid,
textarea:valid,
select:valid {
	border-color: var(--gruen);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [readonly]):valid:focus,
textarea:valid:focus,
select:valid:focus {
	box-shadow: 0 0 0 0.25rem rgba(87, 142, 77, 0.25);
}
*/

input[readonly] {background-color: var(--grau);}

textarea {height: 100px;}


input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"])::placeholder,
textarea::placeholder {
	color: var(--dunkelgrau);
	opacity: 1;
}



/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
/* ------------------------------ Buttons ------------------------------ */
/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
input[type="checkbox"], input[type="radio"],
input[type="submit"], input[type="button"],
button, .button, .button_weiss, .button_rot, .button_hellblau,
label,
select {cursor: pointer;}

input[type="button"], input[type="submit"], button, .button, .button_weiss, .button_rot, .button_hellblau {
	font-family: var(--medium);
	font-size: inherit;
	line-height: 120%;
	max-width: 100%;
	/*padding: 12.25px 58px; da bin ich mir noch nicht sicher*/
	padding: 12.25px 24px;
	transition: background-color 200ms, color 200ms, border-color 200ms;
	display: inline-block;
	text-decoration: none;
	overflow: hidden;
}

input[type="button"], input[type="submit"], button, .button {
	background-color: var(--dunkelblau);
	color: var(--weiss);
	border: 1px solid transparent;
}

.button_weiss {
	background-color: var(--weiss);
	color: var(--dunkelblau);
	border: 1px solid var(--dunkelblau);
}

.button_rot {
	background-color: var(--rot);
	color: var(--weiss);
	border: 1px solid transparent;
}

.button_hellblau {
	background-color: var(--hellblau);
	color: var(--weiss);
	border: 1px solid transparent;
}

input[type="button"]:hover, input[type="submit"]:hover, button:hover, .button:hover {
	background-color: var(--hellblau);
	color: var(--weiss);
}

.button_weiss:hover {
	background-color: var(--hellblau);
	color: var(--weiss);
}

.button_rot:hover {
	background-color: var(--dunkelrot);
	color: var(--weiss);
}

.button_hellblau:hover {
	background-color: var(--dunkelblau);
	color: var(--weiss);
}




/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* ------------------------------ Farben ------------------------------ */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
html {
	background-color: var(--weiss);
	color: var(--schwarz);
}

::selection {
	background-color: var(--hellblau);
	color: var(--weiss);
}


a {
	color: var(--dunkelblau);
	transition: color 200ms;
}

a:hover {color: var(--hellblau);}


hr {color: var(--dunkelblau);}


.dunkelblau {color: var(--dunkelblau);} .bg_dunkelblau {background-color: var(--dunkelblau);}
.hellblau {color: var(--hellblau);} .bg_hellblau {background-color: var(--hellblau);}
.rot {color: var(--rot);} .bg_rot {background-color: var(--rot);}
.schwarz {color: var(--schwarz);} .bg_schwarz {background-color: var(--schwarz);}
.hellgrau {color: var(--hellgrau);} .bg_hellgrau {background-color: var(--hellgrau);}
.grau {color: var(--grau);} .bg_grau {background-color: var(--grau);}
.dunkelgrau {color: var(--dunkelgrau);} .bg_dunkelgrau {background-color: var(--dunkelgrau);}
.weiss {color: var(--weiss);} .bg_weiss {background-color: var(--weiss);}
.gruen {color: var(--gruen);} .bg_gruen {background-color: var(--gruen);}
.dunkelrot {color: var(--dunkelrot);} .bg_dunkelrot {background-color: var(--dunkelrot);}
.gelb {color: var(--gelb);} .bg_gelb {background-color: var(--gelb);}
.hellgruen {color: var(--hellgruen);} .bg_hellgruen {background-color: var(--hellgruen);}

.bg_dunkelblau_trans {background-color: rgba(0, 50, 90, 0.7);}

.color_inherit {color: inherit;}
.color_nohover:hover {color: inherit;}



.border_grau {border: 2px solid var(--grau);}
.border_grau_thin {border: 1px solid var(--grau);}
.border_dunkelgrau {border: 2px solid var(--dunkelgrau);}

.border_bottom_grau {border-bottom: 2px solid var(--grau);}
.border_bottom_dunkelgrau {border-bottom: 2px solid var(--dunkelgrau);}
.border_top_dunkelgrau {border-top: 2px solid var(--dunkelgrau);}



/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* ----------------------------- Breiten ------------------------------ */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
.contentWrapper, .bigIncludeTo.col44 {
	display: block;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--abstand_15);
	padding-right: var(--abstand_15);
}

img, video, iframe {
	max-width: 100%;
	max-height: 100%;
}


.wide, .col14, .col34, .col13, .col23, .col15, .col12, .col12Ab,
.formularColL, .formularColR, .formularCaptchaWrapper > div > * {
	display: inline-block;
	vertical-align: top;
}


.wide {width: 100%;}
.col12 {width: 50%;}
.col14 {width: 25%;}
.col15 {width: 20%;}
.col13 {width: 33.33%;}
.col23 {width: 66.66%;}
.col34 {width: 75%;}

.col12Ab, .col12flexAb > * {width: calc(50% - 14px);}
.col14flexAb > * {width: calc(25% - 15px);}
.col13flexAb > * {width: calc(33.33% - var(--abstand_25) * 2 / 3);}


.col12Ab {margin-bottom: 28px;}
.col12Ab:nth-of-type(2n+1) {margin-right: 28px;}
.col12Ab:last-of-type {margin-bottom: 0;}

.bigIncludeTo.col44, .col12flexAb, .col14flexAb, .col13flexAb  {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}
.col12flexAb {
	row-gap: 28px;
	column-gap: 28px;
}
.col14flexAb {
	row-gap: 20px;
	column-gap: 20px;
}
.col13flexAb {
	gap: var(--abstand_25);
}


.formularColL, .formularColR {margin-bottom: 14px;}
.formularColL {width: 240px;}
.formularColR {width: calc(100% - 240px);}
.formularCaptchaWrapper > div > aside {margin-right: 14px;}


@media (max-width: 1440px) {
	.col14 {width: 33%;}
}
@media (max-width: 1240px) {
	.col14flexAb > * {width: calc(33.33% - 13.33px);}
}
@media (max-width: 1024px) {
	.col14 {width: 50%;}
	
	.col14flexAb > * {width: calc(50% - 10px);}
	.col13flexAb > * {width: calc(50% - var(--abstand_25) / 2);}
}


@media (max-width: 768px) {
	.col34, .col14, .col12, .col12Ab, .col12flexAb > *, .col23 {width: 100%;}
	.col12Ab:nth-of-type(2n+1) {margin-right: 0;}
}


@media (max-width: 600px) {
	.contentWrapper, .bigIncludeTo.col44 {
		padding-left: var(--abstand_9);
		padding-right: var(--abstand_9);
	}
	
	.col14, .col13, .col15, .col14flexAb > *, .col13flexAb > *, .formularColL, .formularColR {width: 100%;}
	
	.formularColL {margin-bottom: 0;}
}



/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
/* ----------------------------- Abstaende ----------------------------- */
/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
.tm0 {margin-top: 0px;} .bm0 {margin-bottom: 0px;}
.lm0 {margin-left: 0px;} .rm0 {margin-right: 0px;}
.hm0 {margin-left: 0px; margin-right: 0px;}
.vm0 {margin-top: 0px; margin-bottom: 0px;}
.tp0 {padding-top: 0px;} .bp0 {padding-bottom: 0px;}
.lp0 {padding-left: 0px;} .rp0 {padding-right: 0px;}
.hp0 {padding-left: 0px; padding-right: 0px;}
.vp0 {padding-top: 0px; padding-bottom: 0px;}


.tm6 {margin-top: var(--abstand_6);} .bm6 {margin-bottom: var(--abstand_6);}
.lm6 {margin-left: var(--abstand_6);} .rm6 {margin-right: var(--abstand_6);}
.hm6 {margin-left: var(--abstand_6); margin-right: var(--abstand_6);}
.vm6 {margin-top: var(--abstand_6); margin-bottom: var(--abstand_6);}
.tp6 {padding-top: var(--abstand_6);} .bp6 {padding-bottom: var(--abstand_6);}
.lp6 {padding-left: var(--abstand_6);} .rp6 {padding-right: var(--abstand_6);}
.hp6 {padding-left: var(--abstand_6); padding-right: var(--abstand_6);}
.vp6 {padding-top: var(--abstand_6); padding-bottom: var(--abstand_6);}


.tm9 {margin-top: var(--abstand_9);} .bm9 {margin-bottom: var(--abstand_9);}
.lm9 {margin-left: var(--abstand_9);} .rm9 {margin-right: var(--abstand_9);}
.hm9 {margin-left: var(--abstand_9); margin-right: var(--abstand_9);}
.vm9 {margin-top: var(--abstand_9); margin-bottom: var(--abstand_9);}
.tp9 {padding-top: var(--abstand_9);} .bp9 {padding-bottom: var(--abstand_9);}
.lp9 {padding-left: var(--abstand_9);} .rp9 {padding-right: var(--abstand_9);}
.hp9 {padding-left: var(--abstand_9); padding-right: var(--abstand_9);}
.vp9 {padding-top: var(--abstand_9); padding-bottom: var(--abstand_9);}


.tm15 {margin-top: var(--abstand_15);} .bm15 {margin-bottom: var(--abstand_15);}
.lm15 {margin-left: var(--abstand_15);} .rm15 {margin-right: var(--abstand_15);}
.hm15 {margin-left: var(--abstand_15); margin-right: var(--abstand_15);}
.vm15 {margin-top: var(--abstand_15); margin-bottom: var(--abstand_15);}
.tp15 {padding-top: var(--abstand_15);} .bp15 {padding-bottom: var(--abstand_15);}
.lp15 {padding-left: var(--abstand_15);} .rp15 {padding-right: var(--abstand_15);}
.hp15 {padding-left: var(--abstand_15); padding-right: var(--abstand_15);}
.vp15 {padding-top: var(--abstand_15); padding-bottom: var(--abstand_15);}


.tm18 {margin-top: var(--abstand_18);} .bm18 {margin-bottom: var(--abstand_18);}
.lm18 {margin-left: var(--abstand_18);} .rm18 {margin-right: var(--abstand_18);}
.hm18 {margin-left: var(--abstand_18); margin-right: var(--abstand_18);}
.vm18 {margin-top: var(--abstand_18); margin-bottom: var(--abstand_18);}
.tp18 {padding-top: var(--abstand_18);} .bp18 {padding-bottom: var(--abstand_18);}
.lp18 {padding-left: var(--abstand_18);} .rp18 {padding-right: var(--abstand_18);}
.hp18 {padding-left: var(--abstand_18); padding-right: var(--abstand_18);}
.vp18 {padding-top: var(--abstand_18); padding-bottom: var(--abstand_18);}


.tm25 {margin-top: var(--abstand_25);} .bm25 {margin-bottom: var(--abstand_25);}
.lm25 {margin-left: var(--abstand_25);} .rm25 {margin-right: var(--abstand_25);}
.hm25 {margin-left: var(--abstand_25); margin-right: var(--abstand_25);}
.vm25 {margin-top: var(--abstand_25); margin-bottom: var(--abstand_25);}
.tp25 {padding-top: var(--abstand_25);} .bp25 {padding-bottom: var(--abstand_25);}
.lp25 {padding-left: var(--abstand_25);} .rp25 {padding-right: var(--abstand_25);}
.hp25 {padding-left: var(--abstand_25); padding-right: var(--abstand_25);}
.vp25 {padding-top: var(--abstand_25); padding-bottom: var(--abstand_25);}


.tm36 {margin-top: var(--abstand_36);} .bm36 {margin-bottom: var(--abstand_36);}
.lm36 {margin-left: var(--abstand_36);} .rm36 {margin-right: var(--abstand_36);}
.hm36 {margin-left: var(--abstand_36); margin-right: var(--abstand_36);}
.vm36 {margin-top: var(--abstand_36); margin-bottom: var(--abstand_36);}
.tp36 {padding-top: var(--abstand_36);} .bp36 {padding-bottom: var(--abstand_36);}
.lp36 {padding-left: var(--abstand_36);} .rp36 {padding-right: var(--abstand_36);}
.hp36 {padding-left: var(--abstand_36); padding-right: var(--abstand_36);}
.vp36 {padding-top: var(--abstand_36); padding-bottom: var(--abstand_36);}



@media (max-width: 1440px) {

}


@media (max-width: 1024px) {
	.ttm0 {margin-top: 0px;} .tbm0 {margin-bottom: 0px;}
	.tlm0 {margin-left: 0px;} .trm0 {margin-right: 0px;}
	.thm0 {margin-left: 0px; margin-right: 0px;}
	.tvm0 {margin-top: 0px; margin-bottom: 0px;}
	.ttp0 {padding-top: 0px;} .tbp0 {padding-bottom: 0px;}
	.tlp0 {padding-left: 0px;} .trp0 {padding-right: 0px;}
	.thp0 {padding-left: 0px; padding-right: 0px;}
	.tvp0 {padding-top: 0px; padding-bottom: 0px;}


	.ttm6 {margin-top: var(--abstand_6);} .tbm6 {margin-bottom: var(--abstand_6);}
	.tlm6 {margin-left: var(--abstand_6);} .trm6 {margin-right: var(--abstand_6);}
	.thm6 {margin-left: var(--abstand_6); margin-right: var(--abstand_6);}
	.tvm6 {margin-top: var(--abstand_6); margin-bottom: var(--abstand_6);}
	.ttp6 {padding-top: var(--abstand_6);} .tbp6 {padding-bottom: var(--abstand_6);}
	.tlp6 {padding-left: var(--abstand_6);} .trp6 {padding-right: var(--abstand_6);}
	.thp6 {padding-left: var(--abstand_6); padding-right: var(--abstand_6);}
	.tvp6 {padding-top: var(--abstand_6); padding-bottom: var(--abstand_6);}


	.ttm9 {margin-top: var(--abstand_9);} .tbm9 {margin-bottom: var(--abstand_9);}
	.tlm9 {margin-left: var(--abstand_9);} .trm9 {margin-right: var(--abstand_9);}
	.thm9 {margin-left: var(--abstand_9); margin-right: var(--abstand_9);}
	.tvm9 {margin-top: var(--abstand_9); margin-bottom: var(--abstand_9);}
	.ttp9 {padding-top: var(--abstand_9);} .tbp9 {padding-bottom: var(--abstand_9);}
	.tlp9 {padding-left: var(--abstand_9);} .trp9 {padding-right: var(--abstand_9);}
	.thp9 {padding-left: var(--abstand_9); padding-right: var(--abstand_9);}
	.tvp9 {padding-top: var(--abstand_9); padding-bottom: var(--abstand_9);}


	.ttm15 {margin-top: var(--abstand_15);} .tbm15 {margin-bottom: var(--abstand_15);}
	.tlm15 {margin-left: var(--abstand_15);} .trm15 {margin-right: var(--abstand_15);}
	.thm15 {margin-left: var(--abstand_15); margin-right: var(--abstand_15);}
	.tvm15 {margin-top: var(--abstand_15); margin-bottom: var(--abstand_15);}
	.ttp15 {padding-top: var(--abstand_15);} .tbp15 {padding-bottom: var(--abstand_15);}
	.tlp15 {padding-left: var(--abstand_15);} .trp15 {padding-right: var(--abstand_15);}
	.thp15 {padding-left: var(--abstand_15); padding-right: var(--abstand_15);}
	.tvp15 {padding-top: var(--abstand_15); padding-bottom: var(--abstand_15);}


	.ttm18 {margin-top: var(--abstand_18);} .tbm18 {margin-bottom: var(--abstand_18);}
	.tlm18 {margin-left: var(--abstand_18);} .trm18 {margin-right: var(--abstand_18);}
	.thm18 {margin-left: var(--abstand_18); margin-right: var(--abstand_18);}
	.tvm18 {margin-top: var(--abstand_18); margin-bottom: var(--abstand_18);}
	.ttp18 {padding-top: var(--abstand_18);} .tbp18 {padding-bottom: var(--abstand_18);}
	.tlp18 {padding-left: var(--abstand_18);} .trp18 {padding-right: var(--abstand_18);}
	.thp18 {padding-left: var(--abstand_18); padding-right: var(--abstand_18);}
	.tvp18 {padding-top: var(--abstand_18); padding-bottom: var(--abstand_18);}


	.ttm25 {margin-top: var(--abstand_25);} .tbm25 {margin-bottom: var(--abstand_25);}
	.tlm25 {margin-left: var(--abstand_25);} .trm25 {margin-right: var(--abstand_25);}
	.thm25 {margin-left: var(--abstand_25); margin-right: var(--abstand_25);}
	.tvm25 {margin-top: var(--abstand_25); margin-bottom: var(--abstand_25);}
	.ttp25 {padding-top: var(--abstand_25);} .tbp25 {padding-bottom: var(--abstand_25);}
	.tlp25 {padding-left: var(--abstand_25);} .trp25 {padding-right: var(--abstand_25);}
	.thp25 {padding-left: var(--abstand_25); padding-right: var(--abstand_25);}
	.tvp25 {padding-top: var(--abstand_25); padding-bottom: var(--abstand_25);}


	.ttm36 {margin-top: var(--abstand_36);} .tbm36 {margin-bottom: var(--abstand_36);}
	.tlm36 {margin-left: var(--abstand_36);} .trm36 {margin-right: var(--abstand_36);}
	.thm36 {margin-left: var(--abstand_36); margin-right: var(--abstand_36);}
	.tvm36 {margin-top: var(--abstand_36); margin-bottom: var(--abstand_36);}
	.ttp36 {padding-top: var(--abstand_36);} .tbp36 {padding-bottom: var(--abstand_36);}
	.tlp36 {padding-left: var(--abstand_36);} .trp36 {padding-right: var(--abstand_36);}
	.thp36 {padding-left: var(--abstand_36); padding-right: var(--abstand_36);}
	.tvp36 {padding-top: var(--abstand_36); padding-bottom: var(--abstand_36);}
}


@media (max-width: 768px) {
	
}

@media (max-width: 600px) {
	.mtm0 {margin-top: 0px;} .mbm0 {margin-bottom: 0px;}
	.mlm0 {margin-left: 0px;} .mrm0 {margin-right: 0px;}
	.mhm0 {margin-left: 0px; margin-right: 0px;}
	.mvm0 {margin-top: 0px; margin-bottom: 0px;}
	.mtp0 {padding-top: 0px;} .mbp0 {padding-bottom: 0px;}
	.mlp0 {padding-left: 0px;} .mrp0 {padding-right: 0px;}
	.mhp0 {padding-left: 0px; padding-right: 0px;}
	.mvp0 {padding-top: 0px; padding-bottom: 0px;}


	.mtm6 {margin-top: var(--abstand_6);} .mbm6 {margin-bottom: var(--abstand_6);}
	.mlm6 {margin-left: var(--abstand_6);} .mrm6 {margin-right: var(--abstand_6);}
	.mhm6 {margin-left: var(--abstand_6); margin-right: var(--abstand_6);}
	.mvm6 {margin-top: var(--abstand_6); margin-bottom: var(--abstand_6);}
	.mtp6 {padding-top: var(--abstand_6);} .mbp6 {padding-bottom: var(--abstand_6);}
	.mlp6 {padding-left: var(--abstand_6);} .mrp6 {padding-right: var(--abstand_6);}
	.mhp6 {padding-left: var(--abstand_6); padding-right: var(--abstand_6);}
	.mvp6 {padding-top: var(--abstand_6); padding-bottom: var(--abstand_6);}


	.mtm9 {margin-top: var(--abstand_9);} .mbm9 {margin-bottom: var(--abstand_9);}
	.mlm9 {margin-left: var(--abstand_9);} .mrm9 {margin-right: var(--abstand_9);}
	.mhm9 {margin-left: var(--abstand_9); margin-right: var(--abstand_9);}
	.mvm9 {margin-top: var(--abstand_9); margin-bottom: var(--abstand_9);}
	.mtp9 {padding-top: var(--abstand_9);} .mbp9 {padding-bottom: var(--abstand_9);}
	.mlp9 {padding-left: var(--abstand_9);} .mrp9 {padding-right: var(--abstand_9);}
	.mhp9 {padding-left: var(--abstand_9); padding-right: var(--abstand_9);}
	.mvp9 {padding-top: var(--abstand_9); padding-bottom: var(--abstand_9);}


	.mtm15 {margin-top: var(--abstand_15);} .mbm15 {margin-bottom: var(--abstand_15);}
	.mlm15 {margin-left: var(--abstand_15);} .mrm15 {margin-right: var(--abstand_15);}
	.mhm15 {margin-left: var(--abstand_15); margin-right: var(--abstand_15);}
	.mvm15 {margin-top: var(--abstand_15); margin-bottom: var(--abstand_15);}
	.mtp15 {padding-top: var(--abstand_15);} .mbp15 {padding-bottom: var(--abstand_15);}
	.mlp15 {padding-left: var(--abstand_15);} .mrp15 {padding-right: var(--abstand_15);}
	.mhp15 {padding-left: var(--abstand_15); padding-right: var(--abstand_15);}
	.mvp15 {padding-top: var(--abstand_15); padding-bottom: var(--abstand_15);}


	.mtm18 {margin-top: var(--abstand_18);} .mbm18 {margin-bottom: var(--abstand_18);}
	.mlm18 {margin-left: var(--abstand_18);} .mrm18 {margin-right: var(--abstand_18);}
	.mhm18 {margin-left: var(--abstand_18); margin-right: var(--abstand_18);}
	.mvm18 {margin-top: var(--abstand_18); margin-bottom: var(--abstand_18);}
	.mtp18 {padding-top: var(--abstand_18);} .mbp18 {padding-bottom: var(--abstand_18);}
	.mlp18 {padding-left: var(--abstand_18);} .mrp18 {padding-right: var(--abstand_18);}
	.mhp18 {padding-left: var(--abstand_18); padding-right: var(--abstand_18);}
	.mvp18 {padding-top: var(--abstand_18); padding-bottom: var(--abstand_18);}


	.mtm25 {margin-top: var(--abstand_25);} .mbm25 {margin-bottom: var(--abstand_25);}
	.mlm25 {margin-left: var(--abstand_25);} .mrm25 {margin-right: var(--abstand_25);}
	.mhm25 {margin-left: var(--abstand_25); margin-right: var(--abstand_25);}
	.mvm25 {margin-top: var(--abstand_25); margin-bottom: var(--abstand_25);}
	.mtp25 {padding-top: var(--abstand_25);} .mbp25 {padding-bottom: var(--abstand_25);}
	.mlp25 {padding-left: var(--abstand_25);} .mrp25 {padding-right: var(--abstand_25);}
	.mhp25 {padding-left: var(--abstand_25); padding-right: var(--abstand_25);}
	.mvp25 {padding-top: var(--abstand_25); padding-bottom: var(--abstand_25);}


	.mtm36 {margin-top: var(--abstand_36);} .mbm36 {margin-bottom: var(--abstand_36);}
	.mlm36 {margin-left: var(--abstand_36);} .mrm36 {margin-right: var(--abstand_36);}
	.mhm36 {margin-left: var(--abstand_36); margin-right: var(--abstand_36);}
	.mvm36 {margin-top: var(--abstand_36); margin-bottom: var(--abstand_36);}
	.mtp36 {padding-top: var(--abstand_36);} .mbp36 {padding-bottom: var(--abstand_36);}
	.mlp36 {padding-left: var(--abstand_36);} .mrp36 {padding-right: var(--abstand_36);}
	.mhp36 {padding-left: var(--abstand_36); padding-right: var(--abstand_36);}
	.mvp36 {padding-top: var(--abstand_36); padding-bottom: var(--abstand_36);}
}



/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* ---------------------------- Allgemein ----------------------------- */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}


body {
	margin: 0;
}


.dib {display: inline-block;}
.block, noindex {display: block;}
.flex {display: flex;}
.none, .radio_none {display: none;}

.flexWrap {flex-wrap: wrap;}
.flexRow {flex-direction: row;}
.flexCol {flex-direction: column;}


.oScroll {overflow: scroll;}
.oHide {overflow: hidden;}
.oVisible {overflow: visible;}

.noDecoration {text-decoration: none;}
.underline {text-decoration: underline;}

.hr {text-align: right;}
.hl {text-align: left;}
.hc {text-align: center;}
.vt {vertical-align: top;}
.vb {vertical-align: bottom;}
.vm {vertical-align: middle;}

.flexHr {justify-content: center;}

.float_left {float: left;}
.float_right {float: right;}
.float_clear {float: none;}

.absolute {position: absolute;}
.relative {position: relative;}
.fixed {position: fixed;}

.centerPos {
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
}

.platzhalter_100 {height: 100px;}
.platzhalter_300 {height: 300px;}
.platzhalter_600 {height: 600px;}


.show_1440, .show_1240, .show_1024, .show_768, .show_600, .show_460 {
	display: none;
}



/* ----- Tables ----- */
.tableWrapper {
	overflow-x: auto;
	scrollbar-width: thin;
}

.table1, .table2, .table3 {
	border-collapse: collapse;
	width: 100%;
	text-align: left;
}


.table1 td, .table1 th, .table2 td, .table2 th, .table3 td, .table3 th {
	white-space: nowrap;
}


.table1 tr:nth-of-type(odd) {
	background-color: var(--grau);
}

.table1 tr:nth-of-type(even) {
	background-color: var(--hellgrau);
}

.table1 td, .table1 th {
	padding: 5px 10px;
}


.table2 {
	border: 1px solid var(--grau);
}

.table2 td, .table2 th {
	padding: 16px 8px;
}

.table2 td:not(:last-of-type), .table2 th:not(:last-of-type) {
	border-right: 1px solid var(--grau);
}

.table2 tr:not(:last-of-type) {
	border-bottom: 1px solid var(--grau);
}

.table2 tr:first-of-type {
	background-color: var(--dunkelblau);
	color: var(--weiss);
}




@media (max-width: 1440px) {
	.hide_1440 {display: none;}
	.show_1440 {display: inline-block;}
}

@media (max-width: 1240px) {
	.hide_1240 {display: none;}
	.show_1240 {display: inline-block;}
}

@media (max-width: 1024px) {
	.hide_1024, table td.hide_1024, table th.hide_1024 {display: none;}
	.show_1024 {display: inline-block;}
	.show_1024.block {display: block;}
	
	table td.show_1024, table th.show_1024 {display: table-cell;}
}

@media (max-width: 768px) {
	.hide_768, table td.hide_768, table th.hide_768 {display: none;}
	.show_768 {display: inline-block;}
	
	table td.show_768, table th.show_768 {display: table-cell;}
}

@media (max-width: 600px) {
	.hide_600, table td.hide_600, table th.hide_600 {display: none;}
	.show_600 {display: inline-block;}
	.show_600.block {display: block;}
	table td.show_600, table th.show_600 {display: table-cell;}
}

@media (max-width: 460px) {
	.hide_460 {display: none;}
	.show_460 {display: inline-block;}
}




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

/* -------------------------------------------------------------- */
/* ------------------ Liste mit Pfeilen Anfang ------------------ */
/* -------------------------------------------------------------- */
ul.listArrow {list-style: none;}

ul.listArrow > li::before {
	content: "";
	vertical-align: top;
	display: inline-block;
	margin-top: 7px;
	border-style: solid;
	border-width: 5px 0 5px 9px;
	border-color: transparent transparent transparent var(--dunkelblau);
	position: absolute;
	margin-left: -15px;
}

ul.listCol12 {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	column-gap: 10px;
}

ul.listCol12 > * {
	width: calc(50% - 5px);
}





/* ----------------------------------------------------- */
/* ------------------ Custom Dropdown ------------------ */
/* ----------------------------------------------------- */
.customDropdownChk {display: none;}

.customDropdownWrapper {
	display: inline-block;
	position: relative;
}

.customDropdownLblOpen {
	display: block;
	background-color: var(--grau);
	padding: 11px 27px 11px 10px;
	position: relative;
}

.customDropdownLblOpen::after {
	content: '';
	display: block;
	position: absolute;
	top: 17px;
	right: 10px;
	width: 7px;
	height: 7px;
	border-right: 1px solid var(--schwarz);
	border-bottom: 1px solid var(--schwarz);
	transform: rotate(45deg);
}

.customDropdownDropdown, .customDropdownLblHideArea {
	z-index: 1;
}

.customDropdownDropdown {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	background-color: var(--weiss);
	border: 1px solid var(--grau);
	padding: 0 var(--abstand_9);
	width: 200px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
	overflow-y: auto;
	scrollbar-width: thin;
}

.customDropdownChk:checked ~ .customDropdownDropdown {
	opacity: 1;
	pointer-events: all;
}

.customDropdownOption {
	display: block;
	text-decoration: none;
	padding: var(--abstand_6) 0;
}

.customDropdownOption:not(:last-of-type) {
	border-bottom: 1px solid var(--grau);
}


.customDropdownLblHideArea {
	position: fixed;
	display: block;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	cursor: unset;
	opacity: 0;
	pointer-events: none;
}

.customDropdownChk:checked ~ .customDropdownLblHideArea {
	opacity: 1;
	pointer-events: all;
}



/* ----------------------------------------------------------- */
/* ------------------ Custom Label Checkbox ------------------ */
/* ----------------------------------------------------------- */
.lblCustChk {
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 20px;
	aspect-ratio: 1;
	background-color: var(--weiss);
	border: 2px solid var(--dunkelblau);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.lblCustChk::after {
	display: block;
	content: 'check';
	font-family: var(--icons);
	line-height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	color: var(--weiss); /* Farbe bei checked auf var(--dunkelblau) stellen */
}



/* --------------------------------------------- */
/* ------------------ No Text ------------------ */
/* --------------------------------------------- */
.noText_hide_0, .noText_hide_1 {
	display: none;
}



/* -------------------------------------------------------- */
/* ------------------ Information Pop up ------------------ */
/* -------------------------------------------------------- */
#infoPopupOpenLbl {
	vertical-align: top;
	display: inline-block;
	margin-top: 5px;
	margin-left: 5px;
	width: 24px;
}

.infoTextIcon {
	width: 24px;
}

#infoPopupWrapper {
	display: none;
	position: absolute;
	z-index: 1;
}

#infoPopupWrapper.infoPopupOnload {
	display: flex;
	position: fixed;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	pointer-events: none;
}

#infoPopup {
	width: 800px;
	position: relative;
	border: 3px solid var(--dunkelblau);
	background-color: var(--weiss);
	padding: var(--abstand_25);
	pointer-events: all;
}

#infoPopupClose {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	line-height: 100%;
	padding: 6px;
	border-radius: 15px;
	background-color: var(--schwarz);
	color: var(--weiss);
	font-family: var(--icons);
}

#infoPopupCloseArea {
	position: fixed;
    z-index: 1;
	display: block;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	cursor: unset;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease-in-out;
}

#infoPopupCloseArea.infoPopupOnload {
	background-color: rgba(0, 0, 0, 0.5);
	pointer-events: all;
	opacity: 1;
}

#infoPopupOpenChk:checked ~ #infoPopupWrapper {
	display: block;
}

#infoPopupLinks, #infoPopupRechts {
	display: inline-block;
	vertical-align: top;
}

#infoPopupLinks {
	width: 100px;
}

#infoPopupLinksIcon {
	width: 50px;
}

#infoPopupRechts {
	width: calc(100% - 100px);
}

#infoPopupOpenChk:checked ~ #infoPopupCloseArea {
	opacity: 1;
	pointer-events: all;
}

@media (max-width: 1024px) {
	#infoPopupOpenLbl, #infoPopupWrapper, #infoPopupCloseArea {
		display: none !important;
	}
}




/* ------------------------------------------------ */
/* ------------------ Lightframe ------------------ */
/* ------------------------------------------------ */
.lightFrameIframe {
	border: 3px solid var(--dunkelblau);
}

.lightFrame_darkLayer {
	background-color: rgba(0, 0, 0, 0.5) !important;
	opacity: 1 !important;
}



/* ----------------------------------------------------------- */
/* -------------------- Barrierefreiheit --------------------- */
/* ----------------------------------------------------------- */
#jubaAccessabilityChk:checked ~ #main .socialMediaIcons {
	filter: invert();
}

#jubaAccessabilityChk:checked ~ #main #baurechtTree li.isnode:not(.openleaf) > div {
	border-left-color: #000000 !important;
}

#jubaAccessabilityChk:checked ~ #main #baurechtTree li.isnode.openleaf > div {
	border-top-color: #000000 !important;
}

#accessabilityClosePopup {
	background-color: var(--schwarz) !important;
	top: 10px;
	right: 10px;
	padding: 6px;
	position: absolute;
}

#accessabilityClosePopup i::before {
	content: "close" !important;
	font-family: var(--icons);
	line-height: 100%;
	color: var(--weiss);
	font-size: inherit;
	top: 2px;
}

#accessabilitySwitch {
	width: 40px;
	height: 20px;
	border: 2px solid var(--schwarz);
	border-radius: 50px;
}

#accessabilityPopupBottom::after {
	content: 'Kontrast ein';
	position: absolute;
	left: 90px;
	font-family: var(--regular);
}

#accessabilitySwitchStatus {
	width: 10px;
	top: 3px;
	left: 3px;
	background: var(--schwarz);
}
#jubaAccessabilityChk:checked ~ #accessabilityPopUp .accessabilityPopupBottomElement .accessabilitySwitchElement .accessabilitySwitchStatusElement {
  background-color: var(--schwarz) !important;
  left: calc(100% - 13px) !important;
}

#accessabilityPopupText, #accessabilityPopupHeadline {
	display: none;
}

#accessabilityPopupTop::after {
	content: 'Einstellungen zur Barrierefreiheit';
	font-family: var(--bold);
	font-weight: normal;
	line-height: 115%;
}

@media (max-width: 600px) {
	#accessabilityPopupTop::after {
		content: 'Einstellungen \a zur Barrierefreiheit' !important;
		white-space: pre;
	}
}

@media (max-width: 1440px) {}

@media (max-width: 1024px) {}

@media (max-width: 800px) {
	#accessabilityPopUp {
		width: 400px;
		left: calc(50% - 200px);
	}
}

@media (max-width: 600px) {
	#accessabilityPopUp {
		width: 250px;
		left: calc(50% - 125px);
	}
}

@media (max-width: 360px) {}