@charset "UTF-8";
@font-face {
	font-family: "NotoSansRegular";
	src: url(../fonts/NotoSans-Regular.ttf);
}
@font-face {
	font-family: "UbuntuBold";
	src: url(../fonts/Ubuntu-Bold.ttf);
}
@font-face {
	font-family: "UbuntuRegular";
	src: url(../fonts/Ubuntu-Regular.ttf);
}
@font-face {
	font-family: "UbuntuMedium";
	src: url(../fonts/Ubuntu-Medium.ttf);
}
/** Variablen **/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	box-sizing: border-box;
	font-weight: 400;
	letter-spacing: 0.004em;
	/* font-size: $baseFontSize; */
	font-size: 20px;
	color: #3a4246;
	background-color: #fff;
	font-family: "NotoSansRegular";
}
@media screen and (max-width: 1200px) {
	html,
	body {
		font-size: 19px;
	}
}
@media screen and (max-width: 1024px) {
	html,
	body {
		font-size: 18px;
	}
}
@media screen and (max-width: 768px) {
	html,
	body {
		font-size: 17px;
	}
}
@media screen and (max-width: 480px) {
	html,
	body {
		font-size: 16px;
	}
}

section {
	margin-top: 2rem;
	padding-bottom: 2rem;
}

main section:first-child {
	margin-top: -3rem;
}
ul{
    list-style-position: outside;
    padding-left: 0px;
	margin-left: 20px; 	
	text-align: left;
}
p {
	font-family: "NotoSansRegular";
	font-size: 1rem;
	margin: 1rem 0;
	line-height: 1.6rem;
}

.lessMargin {
	margin: 1rem 0;
}
.lessMargin p {
	margin-block: 0.25rem;
}

a {
	font-size: 1rem;
	color: #004884;
	font-weight: 600;
}

a.external::before {
	font-size: 0.7rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
	content: "\f08e";
	margin-right: 0.2rem;
	text-decoration: none;
	border-bottom: 0;
}

h1,
h2,
h3,
h4 {
	letter-spacing: 0.05rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "UbuntuRegular";
	color: #004985;
	word-break: normal;
}

h1 {
	font-size: 2.25rem;
	margin-bottom: 2rem;
	/* font-family: "UbuntuMedium"; */
}

h2 {
	font-size: 1.7rem;
	/* font-family: "UbuntuMedium"; */
}

h3 {
	font-size: 1.4rem;
	margin-top: 1rem;	
	margin-bottom: 1rem;		
	font-family: "UbuntuRegular";
}

h4 {
	font-size: 1.2rem;
	font-family: "UbuntuRegular";
}

h5 {
	font-size: 1.2rem;
	font-family: "UbuntuRegular";
	font-weight: 100;
}

h6 {
	font-size: 1.25rem;
}

.missing{
	color:#dd6633;
}
.bold {
	font-weight: 700;
}

.light {
	font-weight: 300;
}

.fontMedium {
	font-family: "UbuntuMedium";
}

.bisschenAbstand {
	padding-bottom: 0.3rem;
}

.mehrAbstand {
	padding-bottom: 0.4rem;
}

.vielAbstand {
	padding-bottom: 0.6rem;
}

small {
	font-size: 0.8rem;
}

/**
 * https://typescale.com/
 * Font-Size: 17px
 * Scale: 1.250 - Major
 * Font: Ubuntu Sans
 * Weight: 400
 * Line-height: 1.6
 * Letter-spacing: 0.004em
 * color: #1A1A1A
 * Background: #FFFFFF
 *
 *
 *
 *
**/
/* HeaderBild mit Titel und DCS Logo 
Überlegen ob das Background Image nicht vielleicht besser in das HTML geschriebwn wird für leichtere Anpassungen */
.headerBanner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-image: url("../img/banner/sauelen.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding-block: 6rem;
	font-family: "UbuntuMedium";
}
.headerBanner p {
	color: #fff;
	font-family: "UbuntuMedium";
	font-size: 3rem;
	line-height: 2.9rem;
	padding-inline: 5rem;
	text-align: center;
	/* font-weight: 600; */
	text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.75);
}
.headerBanner .noShadow {
	text-shadow: none;
}
.headerBanner .light {
	font-weight: 300;
}
.headerBanner .biggerFont {
	font-size: 3.5rem;
	padding-inline: 0;
}
.headerBanner .logo-gross {
	width: 60%;
	display: flex;
	margin: 0 auto;
}
.headerBanner img {
	width: 20%;
}
@media screen and (max-width: 900px) {
	.headerBanner img {
		width: 30%;
	}
}
@media screen and (max-width: 500px) {
	.headerBanner p {
		padding-inline: 2rem;
	}
	.headerBanner img {
		width: 40%;
	}
}

.blueOverlay {
	background-color: rgba(63, 107, 162, 0.6);
	background-blend-mode: darken;
}

.abstandsDiv.gross {
	padding-top: 5rem;
}

.abstandsDiv.medium {
	padding-top: 3rem;
}

.abstandsDiv.mediumBottom {
	padding-bottom: 3rem;
}

.abstandsDiv.klein {
	padding-top: 2.2rem;
}

/**
* WRAPPER
**/
div.contentWrapper {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}
@media screen and (max-width: 1200px) {
	div.contentWrapper {
		max-width: 860px;
	}
}
@media screen and (max-width: 1024px) {
	div.contentWrapper {
		max-width: 780px;
	}
}
@media screen and (max-width: 768px) {
	div.contentWrapper {
		max-width: 90vw;
	}
}

/* Für die grauen Hintergrundelemente
am besten in die Section vor div.contentWrapper */
.greyBackground {
	color: #004985;
	background-color: #e8ecf3;
}

.noBottomPadding {
	padding-bottom: 0;
}

.noTopMargin {
	margin-top: 0;
}

main {
	background-color: #fff;
}
main.scrolled {
	margin-top: 73px;
}

.blauerWrapper {
	width: 100%;
	background-color: #6e92c4;
	color: #fff;
	/* padding: 0.5rem; */
	margin-block: 0.5rem;
	transition:
		transform 0.5s ease,
		box-shadow 0.3s ease;
	will-change: transform;
	padding-left: 1rem;
}
.blauerWrapper a {
	color: #fff;
	text-decoration: none;
}
.blauerWrapper h2,
.blauerWrapper h3 {
	color: #fff;
	font-family: "UbuntuRegular";
	font-weight: 300;
}

.blauerVeranstaltungsWrapper {
	display: grid;
	grid-template-columns: 1fr;
	background-color: #6e92c4;
	position: relative;
	transition:
		transform 0.5s ease,
		box-shadow 0.3s ease;
	will-change: transform;
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		height 0.5s ease,
		opacity 0.5s ease;
}
.blauerVeranstaltungsWrapper a {
	text-decoration: none;
}
.blauerVeranstaltungsWrapper h2,
.blauerVeranstaltungsWrapper h3 {
	color: #fff;
}
.blauerVeranstaltungsWrapper h3 {
	font-weight: 300;
}
.blauerVeranstaltungsWrapper .veranstaltungsInnenWrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	height: 100%;
}
.blauerVeranstaltungsWrapper .veranstaltungsInnenWrapper img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	display: block;
}
.blauerVeranstaltungsWrapper .veranstaltungsInnenWrapper h2,
.blauerVeranstaltungsWrapper p {
	padding: 0.5rem;
}
.blauerVeranstaltungsWrapper .text {
	color: #fff;
}

.blauerVeranstaltungsWrapper.expanded {
	height: 10rem;
	opacity: 1;
	/* padding: 0.5rem; */
	margin-block: 0.3rem;
}

.blauerVeranstaltungsWrapper:hover {
	transform: scale(1.07);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
	z-index: 2;
}

.blauerWrapper:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.centered {
	text-align: center;
}

.fortbildungsTabelle {
	text-align: left;
	border-collapse: collapse;
	width: 100%;
	font-weight: 100;
}
.fortbildungsTabelle thead tr {
	color: #fff;
	background-color: #6e92c4;
	font-family: "UbuntuRegular";
}
.fortbildungsTabelle thead tr th {
	padding: 0.5rem;
	padding-left: 1.5rem;
}
.fortbildungsTabelle tbody tr {
	color: #000;
	background-color: #d9dfea;
	border-bottom: 3px solid #fff;
}
.fortbildungsTabelle tbody tr td {
	padding: 1.5rem;
	border: none;
}
.fortbildungsTabelle tbody tr:last-child {
	border-bottom: none;
}

.kontaktFlex {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-block: 2rem;
}
.kontaktFlex ul {
	list-style: none;
}

@media screen and (max-width: 650px) {
	.kontaktFlex {
		flex-direction: column;
		align-items: center;
	}
	.kontaktFlexElement:first-child {
		margin-bottom: 2rem;
	}
}
footer {
	width: 100%;
	height: auto;
	background-color: #e1e5ec;
	padding-bottom: 2rem;
	color: #004985;
}
footer ul {
	list-style: none;
}
footer .footerFlex {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-block: 2rem;
}
footer .copyright {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding-top: 2rem;
}
footer .footerLogo {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
}
footer .footerLogo img {
	max-width: 12rem;
	-o-object-fit: contain;
	object-fit: contain;
}
footer .footerLogo .imcLogoFooter {
	max-width: 8rem;
	padding-top: 2rem;
}
@media screen and (max-width: 650px) {
	footer .footerFlex {
		flex-direction: column;
		align-items: center;
	}
	footer .footerLogo {
		/* flex-direction: row-reverse; */
		flex-direction: column-reverse;
	}
	footer .footerLogo img {
		max-width: 20rem;
		padding-bottom: 1rem;
		padding-inline: 1rem;
	}
	footer .footerLogo .imcLogoFooter {
		max-height: 6rem;
		padding-top: 0.5rem;
	}
}

.kachelWrapper {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2px;
}
.kachelWrapper .kachel {
	aspect-ratio: 3/2;
	/* background-color: #3f6ba2; */
	/* background-color: #3a6b9f; */
	/* background-color: #406b99; */
	background-color: #3a608a;
	color: white;
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode: multiply;
	/* Um Schrift sauber zu zentrieren */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* für Hover Animation */
	transition:
		transform 0.5s ease,
		box-shadow 0.3s ease;
	will-change: transform;
}
.kachelWrapper .platzhalter {
	background: linear-gradient(to right, #3c6c9f 0%, #aabbd3 50%, #e9ecf1 100%);
	transition: unset;
	display: none;
}
.kachelWrapper .span3mitSelect {
	grid-column: span 3;
	aspect-ratio: auto;
	height: 10rem;
	background-blend-mode: normal;
	transition: unset;
	position: relative;
}
.kachelWrapper .span3mitSelect .selectWrapper {
	position: absolute;
	right: 3rem;
	max-width: 15rem;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: anchor-center;
}
.kachelWrapper .span3mitSelect .selectWrapper label {
	font-size: 1.2rem;
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
}
.kachelWrapper .span3mitSelect .selectWrapper select {
	cursor: pointer;
	background-color: #2e4e7f;
	color: #fff;
	padding: 0.75rem 1rem;
	border: none;
	font-size: 1rem;
	font-weight: 500;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	transition:
		background-color 0.3s ease,
		transform 0.2s ease,
		box-shadow 0.3s ease;
}
.kachelWrapper .kachelText {
	font-size: 1.3rem;
	/* font-weight: 700; */
	font-family: "UbuntuRegular";
	font-weight: 100;
	letter-spacing: 0.05rem;
	text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
}
.kachelWrapper a {
	text-decoration: none;
}
.kachelWrapper .kachel:hover {
	transform: scale(1.1);
	/* Vergrößern um 10 % */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	/* Optional */
	z-index: 2;
}
.kachelWrapper .kachel.span3mitSelect:hover {
	transform: none;
}
.kachelWrapper .kachel.platzhalter:hover {
	transform: none;
	box-shadow: none;
}

@media screen and (max-width: 800px) {
	/* body {
  	// overflow: hidden !important;
  } */
	/* 	Warum Footer und h1 hier dazu und font-size in pt und important angegeben?
  Hier waren vorher nur die Anpassungen des Kachelwrappers  */
	h1 {
		font-size: 30pt !important;
	}
	.kachelWrapper {
		grid-template-columns: 1fr 1fr;
	}
	.span3mitSelect {
		grid-column: span 2 !important;
	}
	div#footerContent {
		grid-template-columns: repeat(1, 1fr) !important;
		grid-template-rows: repeat(1, 0.2fr) !important;
	}
	.platzhalter {
		display: flex !important;
	}
}
@media screen and (max-width: 500px) {
	.kachelWrapper {
		grid-template-columns: 1fr;
	}
	.span3mitSelect {
		grid-column: span 1 !important;
	}
	.platzhalter {
		display: none !important;
	}
}
.saeulenWrapper {
	background-image: url("../img/banner/sauelen.jpg");
	display: flex;
	flex-direction: column;
	align-items: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding-block: 4rem;
}
.saeulenWrapper h2 {
	color: white;
	padding-block: 1rem;
}
.saeulenWrapper .saeulenInnenWrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	color: #004985;
	font-weight: 800;
	gap: 3px;
	/* padding-inline: 2rem; */
}
.saeulenWrapper .saeuleGridElement {
	padding: 2rem 2.5rem;
	background-color: white;
	background-image: url("../img/Schlange-mit-Saeule.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 3rem;
	text-align: center;
	text-transform: uppercase;
}
@media screen and (max-width: 800px) {
	.saeulenWrapper .saeuleGridElement {
		padding: 2rem 1.5rem;
		background-size: 2.5rem;
	}
}
@media screen and (max-width: 600px) {
	.saeulenWrapper .saeuleGridElement {
		padding: 1.5rem 1rem;
		background-size: 2rem;
		font-size: 0.7rem;
	}
}
.saeulenWrapper .first {
	border-radius: 6rem 0 0 6rem;
}
.saeulenWrapper .last {
	border-radius: 0 6rem 6rem 0;
}

.blaueListe {
	color: #004985;
	margin: 0.5rem 1rem;
	line-height: 1.6rem;
}
.blaueListe .noBullets {
	list-style-type: none;
}

.adressListe {
	list-style: none;
}
.adressListe a {
	font-weight: 700;
	text-decoration: none;
	color: #637fb6;
}

.blauerText {
	color: #004985;
}

.zwischenBalken {
	width: 100%;
	background-color: #6e92c4;
	position: relative;
}
.zwischenBalken .contentWrapper {
	position: relative;
}
.zwischenBalken .contentWrapper h2 {
	color: #fff;
	padding: 1rem 0;
	display: inline-block;
	position: relative;
	font-weight: 100;
}
.zwischenBalken .contentWrapper h2::after {
	content: "";
	position: absolute;
	left: 0;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 0.75rem solid transparent;
	border-right: 0.75rem solid transparent;
	border-top: 0.75rem solid #6e92c4;
}

.floatImgContainer {
	float: right;
}
.floatImgContainer .floatImg {
	margin-bottom: 0;
	padding: 0;
	/* height: 14rem;
  aspect-ratio: 3/4; */
	width: 10rem;
	padding: 1rem;
}
.floatImgContainer .floatImg img {
	width: 100%;
}
.floatImgContainer .floatImgText {
	background-color: #fff;
	color: #3a4246;
	margin-top: -1rem;
	font-size: 0.7rem;
	padding: 0.5rem 0.5rem 1.5rem 0.5rem;
	width: 100%;
}

.pdfDownloads {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pdfDownloads li {
	background-color: #6e92c4;
	margin-bottom: 3px;
}

.pdfDownloads li a {
	display: flex;
	align-items: center;
	padding: 0.25rem 1rem;
	text-decoration: none;
	color: #fff;
	width: 100%;
	font-family: "UbuntuRegular";
	font-weight: 100;
}

.pdfDownloads li a::before {
	content: "";
	display: inline-block;
	background: url("../img/pdf_symbol.svg") no-repeat center center;
	background-size: contain;
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
}

#olliPfeil {
	display: flex;
	justify-content: center;
	transform: translate(0, -60%);
	z-index: 4;
	position: relative;
	cursor: pointer;
}
#olliPfeil i {
	font-size: 2.5rem;
	background-color: #fff;
	border-radius: 2.5rem;
}

.spendenGrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem;
}

.spendenGridElement {
	background-color: #e1e5ec;
	padding: 1.5rem;
	position: relative;
	height: 10rem;
}

.spendenGridElement h3 {
	width: 100%;
	color: #004985;
	font-weight: 500;
}

.spendenGridInhalt {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translate(-1.5rem, -1.5rem);
	font-size: 18px;
}

.paypalButton {
	width: 7rem;
}

.spendenLogo {
	position: absolute;
	bottom: 0;
	left: 0;
	max-height: 4rem;
	transform: translate(1.5rem, -1.5rem);
}

.textNebenBildGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}
.textNebenBildGrid .gridElement {
	padding: 0;
}
.textNebenBildGrid img {
	max-width: 430px;
}

.preistraegerImgContainer img {
	max-height: 17rem;
}

.imgQuerFull img {
	max-width: 100%;
}

.bilderGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.bilderGridElement img {
	max-width: 100%;
	max-height: 100%;
}

.span2 {
	grid-column: span 2;
}

.video_container {
	position: fixed;
	background: rgba(0, 0, 0, 0.85);
	width: 100%;
	left: 0;
	top: 0;
	height: 100%;
	text-align: center;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}
.video_container .close-button {
	position: fixed;
	top: 20px;
	right: 20px;
	color: white;
	font-size: 28px;
	font-weight: bold;
	background: rgba(0, 0, 0, 0.6);
	padding: 4px 10px;
	cursor: pointer;
	z-index: 10000;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.video_container .close-button:hover {
	/* background: rgba(255, 255, 255, 0.7); */
	color: #004782;
}
.video_container video {
	transform: translateY(50%);
	width: min(100%, 45rem);
	/* 
  border-style: solid;
  border-width: 0.25rem;
  border-color: white;
  border-radius: 0.5rem;
  */
}

.vidLinks {
	list-style: none;
	padding: 0;
	margin: 0;
}
.vidLinks li {
	background-color: #6e92c4;
	margin-bottom: 3px;
}
.vidLinks li a {
	display: flex;
	align-items: center;
	padding: 0.25rem 1rem;
	text-decoration: none;
	color: #fff;
	width: 100%;
	font-family: "UbuntuRegular";
	font-weight: 100;
}
.vidLinks li a::before {
	content: "";
	display: inline-block;
	background: url("../img/play-button.svg") no-repeat center center;
	background-size: contain;
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
}

input[type="submit"],
button {
	cursor: pointer;
	background-color: #2e4e7f;
	color: #fff;
	padding: 0.75em 1.5em;
	border: none;
	border-radius: 0.5em;
	font-size: 1rem;
	font-weight: 500;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	transition:
		background-color 0.3s ease,
		transform 0.2s ease,
		box-shadow 0.3s ease;
}

input[type="submit"]:hover,
button:hover {
	background-color: #3a5e9b;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

input[type="submit"]:active,
button:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.checkbox {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 500;
	color: #2e4e7f;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	gap: 0.5em;
}

.checkbox input {
	display: none;
}

.checkbox .checkmark {
	width: 1.2em;
	height: 1.2em;
	border: 2px solid #2e4e7f;
	border-radius: 0.25em;
	position: relative;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease;
}

.checkbox input:checked + .checkmark {
	background-color: #2e4e7f;
	border-color: #2e4e7f;
}

.checkbox .checkmark::after {
	content: "";
	position: absolute;
	left: 0.3em;
	top: 0.05em;
	width: 0.35em;
	height: 0.7em;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.checkbox input:checked + .checkmark::after {
	opacity: 1;
}

input[type="date"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #2e4e7f;
	color: #fff;
	border: none;
	border-radius: 0.5em;
	padding: 0.5em 1em;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease;
}

input[type="date"]:hover {
	background-color: #3a5e9b;
}

input[type="date"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(46, 78, 127, 0.4);
}

input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	cursor: pointer;
}

@-moz-document url-prefix() {
	input[type="date"] {
		padding-right: 0.5em;
	}
}
input[type="text"],
input[type="password"] {
	background-color: #fff;
	color: #000;
	border: 1px solid #ccc;
	border-radius: 0.5em;
	padding: 0.5em 1em;
	font-size: 1rem;
	font-weight: 500;
	width: 100%;
	max-width: 400px;
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}

input[type="text"]::-moz-placeholder,
input[type="password"]::-moz-placeholder {
	color: #888;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
	color: #888;
}

input[type="text"]:hover,
input[type="password"]:hover {
	border-color: #aaa;
}

input[type="text"]:focus,
input[type="password"]:focus {
	outline: none;
	border-color: #2e4e7f;
	box-shadow: 0 0 0 3px rgba(46, 78, 127, 0.2);
}

.fileInput label {
	display: inline-block;
	background-color: #2e4e7f;
	color: #fff;
	padding: 0.6em 1.2em;
	border-radius: 0.5em;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		transform 0.2s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.fileInput label input[type="file"] {
	display: none;
}
.fileInput label:hover {
	background-color: #3a5e9b;
	transform: translateY(-1px);
}
.fileInput label:active {
	transform: translateY(0);
}
.fileInput span {
	display: inline-block;
	margin-left: 1em;
	font-size: 0.95rem;
	color: #333;
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.dropdown-el {
	/* min-width: 12em; */
	width: 90%;
	position: relative;
	display: inline-block;
	margin-right: 1em;
	min-height: 3em;
	max-height: 3em;
	overflow: hidden;
	top: 0.5em;
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
	/* color: white; */
	outline: none;
	border: 0.06em solid transparent;
	border-radius: 1em;
	background-color: #3c6ca0;
	/* 	background-color: mix($schriftfarbeBlau, #fff, 25%); */
	transition: 0.3s all ease-in-out;
}
.dropdown-el input:focus + label {
	background: #def;
}
.dropdown-el input {
	width: 1px;
	height: 1px;
	display: inline-block;
	position: absolute;
	opacity: 0.01;
}
.dropdown-el label {
	border-top: 0.06em solid #d9d9d9;
	display: block;
	height: 3em;
	line-height: 2em;
	padding-left: 1em;
	padding-right: 3em;
	cursor: pointer;
	position: relative;
	transition: 0.3s color ease-in-out;
}
.dropdown-el label:nth-child(2) {
	margin-top: 2em;
	border-top: 0.06em solid #d9d9d9;
}
.dropdown-el input:checked + label {
	display: block;
	border-top: none;
	position: absolute;
	top: 0;
	width: 100%;
	color: white;
}
.dropdown-el input:checked + label:nth-child(2) {
	margin-top: 0;
	position: relative;
}
.dropdown-el::after {
	content: "";
	position: absolute;
	right: 0.8em;
	top: 0.9em;
	border: 0.3em solid #004985;
	border-color: #004985 transparent transparent transparent;
	transition: 0.4s all ease-in-out;
}
.dropdown-el.expanded {
	border: 0.06em solid #004985;
	background: #fff;
	border-radius: 0.25em;
	padding: 0;
	box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
	max-height: 15em;
}
.dropdown-el.expanded label {
	border-top: 0.06em solid #d9d9d9;
}
.dropdown-el.expanded label:hover {
	color: #004985;
}
.dropdown-el.expanded input:checked + label {
	color: #004985;
}
.dropdown-el.expanded::after {
	transform: rotate(-180deg);
	top: 0.55em;
}

.dropdown2 .sec-center {
	position: relative;
	max-width: 100%;
	z-index: 200;
}
.dropdown2 [type="checkbox"]:checked,
.dropdown2 [type="checkbox"]:not(:checked) {
	position: absolute;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}
.dropdown2 .dropdown:checked + label,
.dropdown2 .dropdown:not(:checked) + label {
	position: relative;
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 2;
	height: 50px;
	transition: all 200ms linear;
	border-radius: 4px;
	width: 220px;
	letter-spacing: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: none;
	background-color: #004985;
	cursor: pointer;
	color: white;
	box-shadow: 0 12px 35px 0 rgba(255, 235, 167, 0.15);
}
.dropdown2 .dropdown:checked + label:before,
.dropdown2 .dropdown:not(:checked) + label:before {
	position: fixed;
	top: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 100%;
	z-index: -1;
	cursor: auto;
	pointer-events: none;
}
.dropdown2 .dropdown:checked + label:before {
	pointer-events: auto;
}
.dropdown2 .dropdown:not(:checked) + label .uil {
	font-size: 24px;
	margin-left: 10px;
	transition: transform 200ms linear;
}
.dropdown2 .dropdown:checked + label .uil {
	transform: rotate(180deg);
	font-size: 24px;
	margin-left: 10px;
	transition: transform 200ms linear;
}
.dropdown2 .section-dropdown {
	position: absolute;
	padding: 5px;
	background-color: #111;
	top: 70px;
	left: 0;
	width: 100%;
	border-radius: 4px;
	display: block;
	box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.4);
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
	transition: all 200ms linear;
}
.dropdown2 .dropdown:checked ~ .section-dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.dropdown2 .section-dropdown:before {
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	content: "";
	display: block;
	z-index: 1;
}
.dropdown2 .section-dropdown:after {
	position: absolute;
	top: -7px;
	left: 30px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #111;
	content: "";
	display: block;
	z-index: 2;
	transition: all 200ms linear;
}
.dropdown2 a {
	position: relative;
	color: #fff;
	transition: all 200ms linear;
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 15px;
	border-radius: 2px;
	padding: 5px 0;
	padding-left: 20px;
	padding-right: 15px;
	margin: 2px 0;
	text-align: left;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dropdown2 a:hover {
	color: white;
	background-color: #004985;
}
.dropdown2 a .uil {
	font-size: 22px;
}
.dropdown2 .dropdown-sub:checked + label,
.dropdown2 .dropdown-sub:not(:checked) + label {
	position: relative;
	color: #fff;
	transition: all 200ms linear;
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 15px;
	border-radius: 2px;
	padding: 5px 0;
	padding-left: 20px;
	padding-right: 15px;
	text-align: left;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}
.dropdown2 .dropdown-sub:checked + label .uil,
.dropdown2 .dropdown-sub:not(:checked) + label .uil {
	font-size: 22px;
}
.dropdown2 .dropdown-sub:not(:checked) + label .uil {
	transition: transform 200ms linear;
}
.dropdown2 .dropdown-sub:checked + label .uil {
	transform: rotate(135deg);
	transition: transform 200ms linear;
}
.dropdown2 .dropdown-sub:checked + label:hover,
.dropdown2 .dropdown-sub:not(:checked) + label:hover {
	color: #102770;
	background-color: #ffeba7;
}
.dropdown2 .section-dropdown-sub {
	position: relative;
	display: block;
	width: 100%;
	pointer-events: none;
	opacity: 0;
	max-height: 0;
	padding-left: 10px;
	padding-right: 3px;
	overflow: hidden;
	transition: all 200ms linear;
}
.dropdown2 .dropdown-sub:checked ~ .section-dropdown-sub {
	pointer-events: auto;
	opacity: 1;
	max-height: 999px;
}
.dropdown2 .section-dropdown-sub a {
	font-size: 14px;
}
.dropdown2 .section-dropdown-sub a .uil {
	font-size: 20px;
}
.dropdown2 .logo {
	position: fixed;
	top: 50px;
	left: 40px;
	display: block;
	z-index: 11000000;
	background-color: transparent;
	border-radius: 0;
	padding: 0;
	transition: all 250ms linear;
}
.dropdown2 .logo:hover {
	background-color: transparent;
}
.dropdown2 .logo img {
	height: 26px;
	width: auto;
	display: block;
	transition: all 200ms linear;
}
@media screen and (max-width: 991px) {
	.dropdown2 .logo {
		top: 30px;
		left: 20px;
	}
}

.registrierungContainer .title {
	font-size: 1.6rem;
}
.registrierungContainer .userDetails {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.registrierungContainer .userDetails .inputBox {
	width: 100%;
	margin-block: 0.75rem;
	display: flex;
	flex-direction: column;
}
.registrierungContainer .userDetails .inputBox .details {
	font-weight: 600;
}
.registrierungContainer .userDetails .inputBox input {
	width: 100%;
	height: 3rem;
	margin-top: 0.5rem;
}
.registrierungContainer .adressField {
	display: flex;
	flex-direction: row !important;
}
.registrierungContainer .adressField .adressDiv1 {
	width: 69%;
	margin-right: 1%;
}
.registrierungContainer .adressField .adressDiv2 {
	width: 20%;
}
.registrierungContainer .genderDetails .genderTitle {
	font-size: 1.6rem;
	font-weight: 600;
}
.registrierungContainer .genderDetails .category {
	display: flex;
	justify-content: space-between;
	width: 80%;
}
.registrierungContainer .genderDetails label {
	display: flex;
	align-items: center;
}
.registrierungContainer .genderDetails .dot {
	height: 1rem;
	width: 1rem;
	background: #d9d9d9;
	border-radius: 50%;
	margin-right: 0.75rem;
	border: 5px solid transparent;
	transition: all 0.3s ease;
}
.registrierungContainer .genderDetails #dot-1:checked ~ .category label .one,
.registrierungContainer .genderDetails #dot-2:checked ~ .category label .two,
.registrierungContainer .genderDetails #dot-3:checked ~ .category label .three {
	border-color: #d9d9d9;
	background-color: #3c6ca0;
}
.registrierungContainer .genderDetails input[type="radio"] {
	display: none;
}
.registrierungContainer input[type="submit"] {
	width: 100%;
	margin-top: 1rem;
}
@media screen and (max-width: 620px) {
	.registrierungContainer .userDetails {
		flex-direction: column;
	}
	.registrierungContainer .userDetails .inputBox {
		width: 100%;
	}
}

.logoFlex,
.koopFlex {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
}

.logoFlexElement img {
	max-height: 5rem;
}

.koopFlexElement img {
	max-height: 5rem;
}

.graueTabelle {
	width: 100%;
	border-collapse: collapse;
	color: #333;
}

.graueTabelle td {
	vertical-align: top;
	padding: 0.6rem 0.7rem;
}

.graueTabelle tr:nth-child(odd) {
	background-color: #dadfe7;
}

.graueTabelle td:first-child {
	width: 80px;
	font-weight: 600;
} /*# sourceMappingURL=main.css.map */

/* Collapsible */
button.collapsible::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: #fff;
	content: "\f106";

	transform: rotateZ(90deg);
	-webkit-transition: -webkit-transform 0.25s ease-in-out;
	-ms-transition: -ms-transform 0.25s ease-in-out;
	transition: transform 0.25s ease-in-out;

	/* background: #29639a; */
	background: #5288c6;
	width: 30px;
	height: 30px;
	padding: 10px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

button.collapsible {
	font-family: "UbuntuRegular";
	font-size: 1.9rem;
	/* background: #29639a; */
	background: #004985;
	color: #ffffff;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	border-radius: 0;
	text-align: left;
	outline: none;
	display: block;
	margin-bottom: 0;
	margin-top: 20px;
	font-weight: normal;

	display: flex;
	justify-content: space-between;
	align-items: center;
	word-break: break-word;
}

button.collapsible.active::after {
	transform: rotateZ(180deg);
	-webkit-transition: -webkit-transform 0.25s ease-in-out;
	-ms-transition: -ms-transform 0.25s ease-in-out;
	transition: transform 0.25s ease-in-out;
}

.contentCollapsible.active {
	max-height: inherit;
	padding: 18px;
	transition: max-height 1s ease-in-out;
}

.contentCollapsible {
	font-size: 1rem;
	background-color: #e9ecf0;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}