/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/css/fonts/roboto-v47-latin-regular.woff2') format('woff2'); 
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('/assets/css/fonts/roboto-v47-latin-italic.woff2') format('woff2'); 
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/css/fonts/roboto-v47-latin-500.woff2') format('woff2'); 
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('/assets/css/fonts/roboto-v47-latin-500italic.woff2') format('woff2'); 
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/css/fonts/roboto-v47-latin-600.woff2') format('woff2'); 
}
/* roboto-600italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('/assets/css/fonts/roboto-v47-latin-600italic.woff2') format('woff2'); 
}
/* @import /assets/css/cssbox.css */
@import "/assets/css/cssbox.css";
:root {
	font-size: 16px;
	--color-primary: #245883;
	--color-secondary: #009ee0;

	--color-block: #e7e7e8;
	--color-accent: #ff6600;
	--color-text: #000000;
	--color-text: #363636;

	--color-darkblue: #1a171b;	
	--color-background: #F3F3F3;
	--fs-smallest: 0.5rem; /* 8px */
	--fs-small: 0.75rem; /* 12px */
	--fs-nav: 0.9375rem; /*15px */
	--fs-button: 0.9375rem; /*15px */

	/*	--fs-1: 1rem; */ 
	--fs-1:  0.9375rem; /* p 15px */
	--fs-2: 1.3125rem; /* h5 21px */
	--fs-2-2: 1.2rem; /* h5 21px */
	--fs-3: 1.6875rem; /* h4 27px */
	--fs-4: 2.1875rem; /* h3 35px */
	--fs-5: 2.875rem; /* h2 46px */
	--fs-6: 3.5rem; /* h1  56px */
	--fs-hero: 4rem; /* 64px */

	--lh-text: 1.4;
	--max-width-grid: 1290px;
	--max-width-grid: 80.625rem;
	--max-width-grid-split: 645px;
	--max-width-grid-split: 40.3125rem;

	--max-width-inner: 1000px;
	--max-width-inner: 62.5rem;

	--max-width-wide: 1366px;
	--max-width-wide: 85.375rem;
	--column-gap: 24px;
--border-radius: 8px;
}


@media (max-width: 786px) {
	:root {
		--fs-4: 1.6875rem; /* 27px */

		--fs-5: 2.1875rem; /* h2 35px */

	}

}
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}


body {
	margin: 0;
	color: black;
}

h1,
h2,
h3,
h4,
h5,

figure,
blockquote,
dl,
dd  {
	hyphens: auto;

	margin: 0;

	color: var(--color-primary);
}

strong, .strong {
	font-weight: 500;
}


main {
	flex: 1;
}

/* GRID */
/*     1290px     */
/*   | 1000px |   */
/* */ 
h1 {
	font-size: var(--fs-6);
	font-weight: 500;
	margin-bottom: 0.5em;

}


h2, h1.h2 {
	font-size: var(--fs-5);
	font-weight: 400;
	margin-bottom: 0.5em;
}
h1.h2 {
	border-bottom: 1px solid var(--color-block);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	font-weight: 500;
}

h3 {
	font-size: var(--fs-4);
	font-weight: 400;
	margin-bottom: 0.5em;
}


h4 {
	font-size: var(--fs-3);
	font-weight: 400;
	margin-bottom: 0.5em;

}

h5 {
	font-size: var(--fs-2);
	font-weight: 400;
	margin-bottom: 0.5em;
	line-height: 1.4;

}




/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

p {
	color: black;
	font-size: var(--fs-1);
	font-weight: 400;	
	line-height: var(--lh-text);
	margin-top: 0;
	margin-bottom: 1em;
	hyphens: auto;
}

p:last-of-type:not(.margin-bottom) {
	margin-bottom: 0;
}

.headlinecols__column img:first-child {
	margin-top: 0;
}

p:first-of-type:not(.margin-top) {
	margin-top: 0;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark p,
.dark figure,
.dark blockquote,
.dark dl,
.dark dd {
	color: white;
}
.roboto-regular {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.roboto-medium {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.roboto-regular-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.roboto-medium-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-style: italic;
}


.roboto-bold {
	font-family: "Roboto", sans-serif;
	font-weight: 600;
	font-style: normal;
}

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

html, body{ 
	font-family: "Roboto",sans-serif !important;
	color: var(--primary-text-color);

}


a {
	text-decoration: none;
	color: var(--color-primary);
}
a:hover {
	text-decoration: underline;
}
img {
	/*	width:100%; */
	max-width: 100%;
	height: auto;
}


.wrapper {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
}
.wrapper > div {
	max-width: calc( 1000px + 4rem);
	padding-inline: 2rem;
	margin-inline: auto;

}





.wrapper-wide > div {
	max-width: calc(var(--max-width-wide) - 2rem);
	max-width: calc(var(--max-width-wide) - 40px + 2rem);
	padding-inline: 2rem;
	margin-inline: auto;

}


.center {
	text-align: center;
}
.dark {
	color: white;
}

.gradient {
	background: rgb(0,79,125);
	background: linear-gradient(180deg, rgba(0,79,125,1) 0%, rgba(0,31,65,1) 100%);
}

header {
	display: flex;
	width: 100%;
	height: 104px;
	background-color: white;
	border-top: 19px solid var(--color-primary);
	align-items: center;
	justify-content: space-between;
}
.breadcrumb {
	width: 100%;
	width: calc(100% - 40px);
	max-width: calc(var(--max-width-grid) - 40px);
	margin-inline: auto;
	height: 40px;
	border-top: 1px solid var(--color-block);
	display: flex;
	align-items: center;
	padding: 0;
	/*padding-left: 20px; */
}
.breadcrumb__path {
	width: calc(100% - 40px);
	max-width: calc(var(--max-width-grid) - 40px);
	margin-inline: auto;

	font-size: var(--fs-small);
}

.breadcrumb__path svg {
	padding-top: 3px;
	margin-bottom: -1px;
}

.breadcrumb__path a {
	text-decoration: none; 
	color: var(--color-primary)
}

footer {
	width: 100%;
	background-color: var(--color-block);
}

footer.primary-footer {	

	/* border-bottom: 1px solid white; */
	/*NEW 2025-03-12*/
    display: flex;
    width: 100%;
    height: 104px;
    background-color: white;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--color-block);	
}

/*footer.primary-footer a:hover,*/

 footer.secondary-footer a:hover {
	text-decoration: underline;
}

.container-inline {
	width: calc(100% - 40px);
	max-width: var(--max-width-inner);
	margin-inline: auto;
	padding-block: 1rem;
}



/* 	padding: 20px 0 40px 0;
*/

.hero {
	background-image: url(headerbild.png);
	background-repeat: no-repeat;
	background-size: cover;
	padding-block: 7rem;
	min-height: 440px;
	display: flex;
	align-items: center;
}

.hero h2 {
	text-transform: uppercase;
	margin-bottom: 2rem;
}
.hero h3 {
	font-weight: 400;
}

.wrapper-content {
	width: 100%;
	background-color: var(--color-background);
	/*	background: var(--color-background) linear-gradient(rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 8px); */

}

.content-grid {
	width: calc(100% - 40px);
	max-width: calc(var(--max-width-grid) - 40px);
	/*	display: grid; */

	/*	grid-template-columns: 1fr; */
	display: flex;
	flex-wrap: wrap;
	margin-inline: auto;
	padding-block: 60px;
	gap: 24px;
}

.content-fullwidth, .content-main, .content-side {
	flex: 1 0 100%;

}

.content-grid > div {
	background-color: white;
	border-radius: var(--border-radius);
	padding:20px;
	/* height: fit-content; */
}




.content-grid .content-side {
	height: fit-content;
}
@media (min-width: 980px) {

	.content-main {
		flex: 0 1 calc(75% - 24px);
	}

	.content-side {
		flex: 0 1 25%;

	}
}


.content-main__text {
	max-width: 600px;
	margin-inline: auto;
}

.content-side__block {
	border-bottom: 1px solid var(--color-block);
	margin-bottom: 1rem;
	padding-bottom: 1.3rem;
}

.content-side__block:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: .3rem;
}

.content-side__block p, .content-side__block li {
	color: var(--color-primary);
}

.content-side__block img {
	margin-bottom: .75em;
}



.content-side-boxes {
	text-align: center !important;
}

.content-side-boxes__box { 
	position: relative;
	text-align: center;
	aspect-ratio: 1;
	border-radius: var(--border-radius);

	color: white;
	padding: 1.5rem 0.5rem;
	background-color: var(--color-primary);
	z-index: 1;
	transition: all 0.3s ease-in-out;
	max-width: 12rem;
	margin-inline: auto;
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
}


.content-side-boxes__box img { 
	position: absolute;
	left: 20%;
	top: 22%;
	z-index: -2;
	width: 60%;
	height: 60%;
}
.content-side-boxes__box > a  { 
	text-decoration: none !important;
}

.content-side-boxes__box > a > span { 
	position:absolute; 
	width:100%;
	height:100%;
	top:0;
	left: 0;

	z-index: 1;
	cursor:pointer;
}

/* Navbar Styles */

nav ul, footer ul, 
nav ul li,footer ul li,
nav ul ul li,footer ul ul li
{
	margin:0;
	padding: 0;
	text-indent: 0;
	list-style-type: none;
}


.navbar-main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*padding: 0 20px;*/
	margin-inline: auto;
	width: calc(100% - 40px);
	max-width: calc(var(--max-width-grid) - 40px);
}

.logo-img {
	width: 260px;
}

.nav-links {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item {
	position: relative;
	padding: 10px;

}

.nav-item a {
	text-decoration: none;
	padding: 10px;


}
.nav-item > a {
	text-transform: uppercase;
	color: var(--color-primary);
	font-size: var(--fs-nav);
	font-weight: 500;
	white-space: nowrap;

}


.nav-item:hover {

	/* background-color: #444; */
}

/* Dropdown Styles */
.dropdown {
	font-size: var(--fs-nav);
	/* display: none;  */
	opacity: 0; 

	position: absolute;
	width: max-content;
	min-width: 100%;
	top: calc(100% + 1px);
	left: 10px;
	background-color:white;
	list-style: none;
	padding: 0;
	margin: 0;
	border: 1px solid var(--color-block);

	transition: all .2s ease-in-out;
	transform: scaleY(0);
	transform-origin: top left;
	/*		border-top: 1px solid var(--color-secondary); */
	z-index: 200;
}


.dropdown > li > a {
	color: black;
	padding: 0.5rem 1rem;
	text-decoration: none;
	line-height: 2;
	width: 100%;
	display: inline-block;
}

.dropdown li.nav-subitem {
	line-height: 20px;
	/* padding: 0 10px; */
	padding-bottom: 20px;
	font-weight: 500;
	color: var(--color-primary);
}

.dropdown li.nav-subitem:last-of-type {
	padding-bottom: 0;
}
.dropdown li.nav-subitem span {
	padding: 20px 10px 10px 10px;
	display:block;
}

.border-top {
	border-top: 1px solid var(--color-block);
}


.border-bottom {
	padding-bottom:  2rem;
	border-bottom: 1px solid var(--color-block);
}

.border-bottom-plain {
	border-bottom: 1px solid var(--color-block);
	padding-bottom:  0.5rem;

}

.margin-bottom {
	margin-bottom: 2rem;
}


.dropdown li.nav-subitem a {
	padding: 10px; 
	font-weight: 400;
	color: black;
	width: 100%;
	display:block;
}
@media (min-width: 1001px) {
	.nav-item:hover  > a {
		border-bottom: 1px solid var(--color-secondary); 
	}

	.nav-item:hover .dropdown {
		/* display: block; */
		opacity: 1;
		transform: scaleY(1)

	}
	.nav-item + .nav-item {
		border-left: 2px solid var(--color-block);;
	}

}


.dropdown li a:hover {
	/*	background-color: #444; */
	/*color: var(--color-primary);*/
	background-color: var(--color-block);
}


footer nav {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}



footer nav ul {
	/* gap: 5vw; */
/*		display: flex;

	column-gap: clamp(9px, 6vw, 5rem);
	row-gap: 1rem;
	font-weight: 500; */
}

footer a {
	text-decoration: none;
	color: var(--color-primary);
	color: black;
}
footer nav a {
	font-weight: 500;
}


@media (max-width: 786px) {
	footer nav,footer nav ul  {
		padding: 1rem;
		flex-direction: column;
		align-items: center;
	}

}
/* Search Form */

.search-form  {
	width: 2rem;
}
.search-form form {
	/*	display: flex; */
	display: none;
	align-items: center;
	justify-content: center;
	padding-inline: 1.2rem;
}

.search-form input {
	padding: 5px;
	margin-right: 5px;
	margin-top: 5px;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-primary);

	font-size: 14px;
	background-image: url(/assets/img/search_icon.webp);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 40px;
	background-color: #fff;
	box-shadow: none;
	-webkit-appearance: none;



}

.search-form button {
	display: none;
	padding: 5px 10px;
	background-color: #444;
	color: white;
	border: none;
}


/* Mobile Styles */
.hamburger {
	display: none;
	font-size: 30px;
	color: var(--color-primary);
	cursor: pointer;
}

.nav-links.active {
	display: flex;
	width: 100%;
	position: absolute;
	top: 105px;
	left: 0;
	background-color: white;
	z-index: 1;
}

.hamburger.active {font-size: 0;}
.hamburger.active:before{
	font-size: 30px;


	content:	    "\2715";
	font-weight: 600;
}

.nav-links {
	display: flex;
}

@media (max-width: 1000px) {
	.nav-links {
		display: none;
		flex-direction: column;
		width: 100%;
		text-align: center;
	}

	.nav-links.active {

		border-bottom: 1px solid var(--color-block);
	}
	.hamburger {
		display: block;
	}

	.nav-item {
		width: 100%;
		padding-inline: 0;
	}

	.nav-item a {
		padding: 15px;
		width: 100%;
		text-align: center;
	}

	.dropdown {
		position: relative;
	}

	.dropdown  {
		display: block;
		opacity: 1;
		left: 0;
		transform: scaleY(1);
		background: white;
		padding:0;
		overflow: hidden;
		transition: max-height 0.3s;
		max-height: 0;
		border: 0;
	}

	.nav-item.active .dropdown {
		max-height: 22em;
		padding: 0.8rem 0 1.2rem 0;

	}

	.nav-links .search-form {
		order: 1;
		height: 3rem;
	}

	.search-form form {
		margin: 1rem 0 3rem 0;
		padding: 0 20px;

	}

	.search-form input {
		width: 100%;
		max-width: 30rem



	}


}

.dark {
	color: white;
}


.center {
	text-align: center;
}
.dark {
	color: white;
}


.hero {
	background-image: url(/assets/img/headerbild.png);
	background-repeat: no-repeat;
	background-size: cover;
	padding-block: 7rem;
	min-height: 440px;
	display: flex;
	align-items: center;
	/*background-color: rgba(0, 79, 125,0.8);
	background-blend-mode: multiply; */

	background-color: #FFF;
	background-blend-mode: multiply,luminosity;
}

.bgoverlay {
	background-color: #FFF;
	background-blend-mode: multiply,luminosity;

}

.hero h2 {
	text-transform: uppercase;
	margin-bottom: 2rem;
}
.hero h3 {
	font-weight: 400;
}

.secondary-footer {
	position: relative;
}
/*

.secondary-footer__content {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
disclaimer contact metalinks;
gap: 4vw;
}
*/

.secondary-footer__content {
	display: grid;
	grid-template-areas:
		"disclaimer"
		"contact"
		"metalinks"
		;
	gap: 4vw;
}

.area-disclaimer {
	grid-area: disclaimer;
}
.area-contact {
	grid-area: contact;
}
.area-metalinks {
	grid-area: metalinks;
}





@media (min-width: 680px) {

	.secondary-footer__content > div:last-of-type {
		text-align: right;
	}
	.secondary-footer__content {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"disclaimer disclaimer"
			"contact metalinks"
			;
		gap: 4vw;
	}
}



@media (min-width: 980px) {

	.secondary-footer__content > div:last-of-type {
		text-align: right;
	}
	.secondary-footer__content {
		grid-template-columns: 2fr 1fr 1fr;
		grid-template-areas:
			"disclaimer contact metalinks"
			;
		gap: 4vw;
	}
}





.padding-block {
	padding-block: 4rem;
}
.padding-block-small {
	padding-block: 2rem;
}


.padding-bottom {
	padding-bottom: 4rem;
}
.padding-top {
	padding-top: 4rem;
}


.cta p {
	color: var(--color-secondary);
	font-size: var(--fs-3);
}

.button {
	font-size: var(--fs-button);
	display: inline-block;
	text-align: center;
	color: white;
	background-color: var(--color-accent);
	padding: 0.5rem 1rem;
	border-radius: 10px;
	font-size: 1rem;
	margin-top: 2rem;
	cursor: pointer;
	transition: all 0.3s;
	position: relative;
	min-width: 13rem;
	font-weight: 500;
	text-decoration: none;

}

.content-side .button { 
	margin-top: 1rem;
}
.btn__square {
	text-decoration: none;
	min-width: unset;
	width: 6em;
	white-space: pre-wrap;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar-illu-with-button {
	position: relative;
	margin-bottom: 2rem;
	margin-inline: auto;
	max-width: 400px;
	text-align: center;
}
.sidebar-illu-with-button  .btn__square {
	position: absolute;
	bottom: 4rem;
	right: 15%;
}

.content-side p, .content-side label
{
font-size: var(--fs-1);
	color: var(--color-primary);

}


.content-side-boxes__box p { 
	color: white;
	font-weight: 500;
}
@media (min-width: 981px) {

	.content-side .button:not(.btn__square) {
		width: 100%;
	}

}

.button:hover {
	animation: bubble 0.4s ease-out;
	background-color:  var(--color-secondary);;
	/*	opacity: 0.8; */
}


.button img {
	height: 1.5rem;
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);

}
@keyframes bubble {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

.three-cards {
    --min-column-size: 266px;
      --column-size: 256px;
    display: grid
;
    gap: calc(2rem + 1vw);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr));
    text-align: center;
    padding-block: 3rem;
    justify-content: center;

}
.three-cards a:hover {
	text-decoration: none;
}
.three-cards > div {
	max-width: 266px;
}

.withBG {
	background-color: var(--color-background);

}

.three-cards__item {
	position: relative;
	text-align: center;
	aspect-ratio: 1;
	border-radius: var(--border-radius);
	color: white;
	padding: 2rem 1rem;
	transition: all 0.3s;
	background-color: var(--color-primary);
	z-index: 1;
	transition: all 0.3s ease-in-out;

}


.three-cards__item:hover,
.content-side-boxes__box:hover
{
	background-color: var(--color-accent);
}

.content-side-boxes__box:hover p {
	color: var(--color-darkblue);
}
.three-cards__item:before,
.content-side-boxes__box:before {
	background-color: var(--color-primary);

	content: "";
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;  
	opacity: .8; 
	z-index: -1;
	border-radius: var(--border-radius);
	transition: all 0.53s ease-in-out;


}


.three-cards__item:hover:before,
.content-side-boxes__box:hover:before{
	opacity: 0; 
}

.three-cards__details p {
	font-size: var(--fs-3);
	transition: all 0.3s ease-in-out;


}

.three-cards__item:hover .three-cards__details p {
	opacity: 0;
} 


.three-cards__details {
	transition: all 0.3s ease-in-out;
	height: 70%;
	display: flex;
	align-items: center;
}


.three-cards__item img {
	position: absolute;
	left: 20%;
	top: 22%;
	z-index: -2;
	width: 60%;
	height: 60%;
}

.blue-arrow {
	background: url(/assets/img/bg-blue-arrow.png) no-repeat bottom center;
	background-size: cover;
	height: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 1rem;
	padding-inline: 2rem;

	padding-bottom: 3rem;
	text-align: center;
	box-shadow: inset -10px 27px 18px -22px rgba(0,31,65,1);
	min-height: 16vw;
}

@media (max-width: 410px) {

	.blue-arrow {
		min-height: 100vwh;
	}
}
.illu-solo {
	width: 100%;
	max-width: 485px;
}

.cta-on-image {
	padding-block: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	min-height: 16.5rem;
	background-repeat: no-repeat;
	background-size: contain;
}
.cta-on-image h3 { 
	margin-bottom: 0;
}

.cta-on-image .button {
	margin-top: 1rem;
}
.splitscreen-illus {
	width: 100% !important;
	max-width: none !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-inline: 0 !important;
	padding-inline: 0 !important;

}


.split__illu {
	background-color: var(--color-background);
	padding: 2rem;
	display: flex;
	order: 1;
	justify-content: flex-end;

}

.splitscreen-illus:nth-child(odd) .split__illu {
	justify-content: flex-start;
	order: 3;
}


.split__illu img {
	width: 100%;
	max-width: calc(var(--max-width-grid-split) - 1rem);
}

.split > div {
	display: inline-block;
	padding: 3rem;
	min-height: 10rem;
}
.split__text {
	display: flex;
	align-items: center;
	padding-inline: 4rem;
	order: 2;
	justify-content: flex-end;

}

.splitscreen-illus:nth-child(even) .split__text {
	justify-content: flex-start;
}

.split__text *, .boxes-transformiere * {
	color: black;
}
.split__text > div {
    max-width: var(--max-width-grid-split);
}

.split__text .button {
color: white;
display: block;
width: 100px;
margin-inline: auto;
}

@media (max-width: 980px) {
	.splitscreen-illus {
		grid-template-columns: 1fr;
	}

	.splitscreen-illus .split__text {
		padding: 2rem;
		margin-bottom: 1rem;
		text-align: center;
		justify-content: center;
		order: 2;

	}
	/*
	.split__text:nth-child(odd) {
	justify-content: center;
	order: 1;
}
	*/
	.splitscreen-illus:nth-child(odd) .split__illu  {
		order: 1;
	}


	.splitscreen-illus:nth-child(even) .split__text {
		justify-content: center;
		order: 2;

	}
}

.boxes-transformiere {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	gap: 30px;

}



.boxes-transformiere > div {
	background-color: white;
	position: relative;
	margin-top: 40px;
	margin-top: 40px;
	padding: 3rem 0.6rem 2rem 0.6rem;
	border-radius: var(--border-radius);
	max-width: 175px;

}
.boxes-transformiere > div  > * {

	color: var(--color-primary) ;
	color: black ;
}

.boxes-transformiere > div > img {
	width: 60px;
	background-color: var(--color-accent);
	position: absolute;
	top: -30px;
	left: calc(50% - 30px);
	padding: 10px;
	border-radius: 50%;

}

.split__text h4, .boxes-transformiere h5, .boxes-transformiere h5 a {
	color: var(--color-secondary);
	font-weight: 500;
}


.logowall {
	padding-top: 2rem;
	padding-bottom: 4rem;
	display: flex;
	/*	vertical-align: bottom;
	align-items: flex-end; */
	gap: 2rem;
	flex-wrap: wrap;

	justify-content: space-between;

}


.logowall .logos-network {
	/*display: flex;*/
	/*  margin-left: auto; */
	gap: 36px;
	padding-bottom: 36px;
	display: grid;
	grid-template-columns: 300px fit-content(260px) fit-content(196px);
	grid-template-columns: 270px 280px 203px;
}
@media (max-width: 786px) {


	.logowall .logos-network {
		/*		flex-wrap: wrap; */
		grid-template-columns: 1fr;

	}
}


.logowall .logos-network  > div {
	/*	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-height: 180px; */
	min-height: 108px;
	margin-block: auto;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}

.logowall .fbb {
	margin-right: 5rem;
}

.logowall .fbb img {
	max-width: 190px;
}
.logowall .grow {
	flex-grow: 1;
}

.logowall p {
	width: 100%;
	display: flex;
	gap: 36px;
}

@media (max-width: 310px) {
	.logowall p {
		flex-wrap: wrap;
		max-width: calc(100vw - 4rem);
	}
}


.logowall .partner {
	display: flex;
	/* gap: 1.2rem; */
	flex-wrap: wrap;}

.logowall .partner img {
	max-height: 54px;
	width: auto;
}

.logowall .partner img.logo-small {
	max-height: 40px;

}
.shadow {
	box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}

.move-down {
	margin-bottom: -20px;
}



.headlinecols {
	display: flex;
	gap: 20px;
}



.headlinecols__column {
	flex: 1;
	/* display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch; */

}


.headlinecols__column img {
	margin-block: 1rem;
	max-width: 100%;
	height: auto;
}

.headlinecols__column h3 {

	margin-bottom: 10px;
	min-height: 4em; /* Passe die Höhe hier nach Bedarf an */
	display: flex;
	align-items: flex-end; 
}


.headlinecols__column h3.aligntop {
	align-items: flex-end;
	display: block;
	margin-bottom: 1rem;
	min-height: unset;
}

.content-grid ul {
	line-height: var(--lh-text);
	font-size: var(--fs-1);
	padding-inline-start: 1rem;
}

.content-grid ul li::marker {
	font-size: 80%; 
	line-height: 1rem;
}

/*
.imagecols {

display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "a b b"
"a a a"

}

.a {
grid-area: a;
}
.b {
grid-area: b;
}

*/
.imagecols { 
	margin-top: 2rem;
}

.imagecols__img {
	text-align: right;
	line-height: 0;
	padding-bottom: 1rem;
}
.imagecols__text {
	column-count: 3;
	column-gap: 24px;

}
.imagecols__text h3 {
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 900px) {

	.imagecols__text {
		column-count: 2;

	}
}

@media (max-width: 786px) {

	.headlinecols {
		display: block;
	}

	.headlinecols__column h3 {
		min-height: unset;
		margin-top: 1em;
	}
}

.block-oneimage
{
	margin-top: 2rem;
}

.image-w-caption {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: center;
	gap: 24px;
}

.caption-w-image {
	display: grid;
	grid-template-columns: 1fr 2fr;
	align-items: center;
	gap: 24px;
}

.text-w-box {
	margin-top: 2rem;

	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
}
.text-w-box.twoboxes {
		grid-template-columns: 1fr 1fr 1fr;
}

.text-w-box__text {
	column-count: 2;
	column-gap: 24px;
}

.text-w-box.twoboxes  .text-w-box__text {
		column-count: 1;
}

.text-w-box__box {
	display: flex;

}
.text-w-box__box > div {
	color: white;
	background-color: var(--color-primary);
	padding: 1.2rem 1rem;
	height: fit-content;
}



.text-w-box__box p {
	color: white;
	font-size: 1em;
}

.block-two-col-text {
	margin-top: 2rem;
}
.block-two-col-text > * {
	max-width: 66%;
}

@media (max-width: 900px) {
	.text-w-box {
		grid-template-columns: 1fr 1fr;
	}
	.text-w-box.twoboxes {
	grid-template-columns: 1fr;
	}
	.text-w-box__text {
		column-count: 1;
	}

	.block-two-col-text {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.image-w-caption {
		grid-template-columns: 1fr;
	}

	.text-w-box {
		grid-template-columns: 1fr;
	}
}


.contact-slideouts {

	position: fixed;
	top: 25%;
	/*  transform: translateY(-50%); */
	right: 0;
	color: white;
	border-radius: var(--border-radius) 0 0 var(--border-radius) ;
	width: 40px;
}

.contact-slideouts ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border-radius: var(--border-radius) 0 0 var(--border-radius) ;
	box-shadow: -5px 5px 15px 1px rgba(0,0,0,0.27);

}

.contact-slideouts li { 
	background-color: var(--color-accent);

	border-bottom: 1px solid white;
	text-align: center;
	width: 40px;
	padding: 0.5em 5px;
	position: relative;
	display: block;
	transition: all 0.3s ease;
}

.contact-slideouts li:first-of-type { 
	border-top-left-radius: 8px;
}
.contact-slideouts li:last-of-type { 
	border-bottom-left-radius: 8px;
}
.contact-slideouts li img {
	max-width: 1.2rem;
}
.contact-slideouts li:last-of-type { 
	border-bottom:  none;
}

.contact-slideouts li:hover {
	background-color: var(--color-secondary);
}



.contact-slideouts .slideout{
	position:absolute;
	top: 50%;
	transform: translateY(-50%);
	left:0px;
	z-index:-100;
	color:#000;
	background-color: white;
	font-size:16px;
	transition: all 0.3s ease;
	white-space: nowrap
	/*	opacity: 0; */
	height: 23px;
	width: 110px;

}

.contact-slideouts .slideout span {
	color: var(--color-secondary);
}


.contact-slideouts .slideout span img{
	max-height: 14px;
	margin-left: 6px;
	margin-top: 3px;
}

.contact-slideouts li:hover .slideout{
	left:-110px;
	box-shadow: -5px 5px 15px 1px rgba(0,0,0,0.27);

	/* opacity: 1; */
}


.secondary-footer .arrow-up {
	position: absolute;
	top: 1.2rem;
	right: 2rem;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--color-accent);
}

.black, .h-black h3 {
	color: black;
}
.secondary, .h-secondary h3,  .h-secondary h4 {
	color: var(--color-secondary);

}


footer h5 {

	color: black;
	font-size: var(--fs-1);
}

.address-footer img {
	vertical-align: text-top;
	padding-right: 1rem;
	float: left;
}


.secondary-footer ul li, footer p {
	font-size: var(--fs-small);
	margin-bottom: 1rem;
}

ul.with-arrow {
	list-style-image: url(/assets/img/icons/PfeilNachRechtsKleinBlau.svg);
}

.content-main > div {
	margin-block: 2rem;
}

.content-main > div:last-of-type {
	margin-bottom: 0;
}

.content-main > div.border-bottom:last-of-type {
	border-bottom: none;	
}

.multicol-element {
	display: grid;

	gap: var(--column-gap);
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas: 
		"a b c"
		"a d d"
		"a e f"
}

.multicol-element img {
	width: 100%;
}

.area-a {
	grid-area: a;
}
.area-b {
	grid-area: b;
}

.area-c {
	grid-area: c;
}

.area-d {
	grid-area: d;
}

.area-e{
	grid-area: e;
}

.area-f {
	grid-area: f;
}

@media (max-width: 980px) {
	.multicol-element {

		grid-template-columns: 1fr 1fr ;
		grid-template-areas: 
			"a a"
			"b c"
			"d d"		
			"e f"

	}
}

@media (max-width: 768px) {
	.multicol-element {

		grid-template-columns: 1fr;
		grid-template-areas: 
			"a"
			"b"
			"c"
			"d"
			"e"
			"f"
	}
}
.h5__intro {
	max-width: 40rem;
}
.accordeons details {
	transition: all 150ms ease-out;
}
.accordeons summary {
	color: white;
	background-color: var(--color-primary);
	padding: 0.5rem 1rem;
	padding-right: 3rem !important;
	font-size: var(--fs-2);
	padding-inline: var(--column-gap);
	cursor: pointer;
}

.accordeons.accordeons-grey summary {
	color: var(--color-primary);
	background-color: var(--color-block);
}

.accordeons details { 
	margin-bottom: 7px;
	position: relative;
}


.accordeons details summary::-webkit-details-marker,
details summary::marker {
	display: none; 
	content: "";
}


.accordeons details > summary:after {
	content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg"  transform="rotate(90)" version="1.1" viewBox="0 0 40 40"><polygon points="12.5 5 12.5 35 27.5 20 12.5 5" fill="%23FFFFFF"/></svg>');

	position: absolute; 
	right: 0;
	background-color: var(--color-accent);
	top: 0;
	width: 2rem;
	height: 2.55rem;
	text-align: center;
	padding-top: 0.4rem;
	transition: background-color 500ms ease;

}

.accordeons details[open] > summary:after {
	content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1"  transform="rotate(270)" viewBox="0 0 40 40"><polygon points="12.5 5 12.5 35 27.5 20 12.5 5" fill="%23FFFFFF"/></svg>');
	background-color: var(--color-primary);
	padding-top: 0.2rem

}

.accordeons details > div {
	margin-bottom: 0;
	padding: 0;	
	padding-inline: var(--column-gap);
	/*max-height: 0;
	transition: max-height 0.15s ease-out; */
}

.accordeons details > div img {
	width: 100%;
}


.accordeons details[open] > div {
	height: auto;
	padding: var(--column-gap);
	font-size: var(--fs-1);
	-webkit-box-shadow: 2px 5px 15px 5px rgba(0,0,0,0.3); 
	-webkit-box-shadow:2px 20px 15px -5px rgba(0,0,0,0.3);
	box-shadow: 2px 5px 15px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 20px 15px -5px rgba(0,0,0,0.3);
	margin-bottom: 2rem;
	/*	max-height: 500px;
	transition: max-height 0.15s ease-out; */

}


.accordeons details {
	/*max-height: 3rem;*/
	transition: max-height 0.8s ease-out, min-height 0.2s ease-out;
	min-height: 1rem;
}

.accordeons details[open]  {
	max-height: 100vw;
	min-height: 200px;
	height: auto;
}


.accordeon-element {
	display: grid;
	grid-template-columns:1fr;
	gap: var(--column-gap);
}


@media (min-width: 980px) {

	.accordeon-element {
		grid-template-columns: 2fr 1fr;
	}

}
details summary {
	cursor: pointer;
}

summary {
	/*  margin-bottom: 10px; */
}

div.headline-section {
	margin-top: 0;
	display: flex;
	gap: 3rem;
	align-items: baseline;
}

.catFilterTabs {
	display: flex;
	gap: 1rem; 
	align-items: baseline;
	margin-bottom: 2rem;
}

.catFilterTabs > div {
	border: 1px solid var(--color-block);
	border-radius: 5px;
	padding: 3px;
	font-size: var(--fs-1);
}
.catFilterTabs > div img {
	vertical-align: middle;
	margin-left: 1rem;
	width: 14px;
	height: 14px;
	display: inline-block;
}

.catFilterTabs a {
	font-size: smaller;
	text-decoration: none;
	color: var(--color-primary);

}


.catFilterTabs a:hover, .catFilterTabs a:active {
	text-decoration: underline;

}
#categoryListRows {
	visibility:hidden;
	/*display: none; */
}

.catResults h5, .catResultFile {
	border-bottom: 1px solid var(--color-block);
	padding-block: 0.5rem
}


.catResultFile {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;

}

.contact-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.contact-item {
	padding: 2rem;
	display: grid;
	grid-template-columns: 33% 66%;
	gap: 1.5rem;
}

.contact-item .intro {
	grid-column: 1 / 3;
}

.contact-item div.contact-image img {
	width: 100%;
	height: auto;
}
.contact-item div.contact-info {
	/*padding-top: 1.5rem;*/
}

.contact-item div.contact-info h2 {
	font-size: 1.25rem;
	font-weight: bold;
}

.catFilter label.subcat {
	margin-left: 1rem;
}


.catFilter h5 {
	font-size: var(--fs-2-2);
}

.categoryLocales {
	display: flex;
	flex-wrap: wrap;
	column-gap: 3rem;
}
.categoryLocales fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

.categoryLocales label {
	font-size: var(--fs-1);
	flex: 0 1 19%;
	white-space: nowrap;
	display: inline-block;
	padding-bottom: 0.8rem;

}

.format-icon {
	height: 30px;
}


.cat_rubrik {
	display: flex;
	gap: 1rem;
}
.rubrik-icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	vertical-align: middle;
	width: 50px;
	height: 30px;
	background-color: var(--color-primary);
	z-index: 1;
	border-radius: 5px;
	text-align: center;
	color: white;
	font-size: 11px;
	text-transform: uppercase;
}

.rubrik-icon:before {
	background-color: var(--color-primary);
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .8;
	z-index: -1;
	border-radius: 5px;
}


.rubrik-icon img {
	position: absolute;
	left: 5%;
	top: 4%;
	z-index: -2;
	width: 90%;
	height: 90%;

}


input[type="radio"]  {
	accent-color:  #009ee0;
	border-color: var(--color-block);
	vertical-align: text-top;

}


.accordion {
	display: inline-block;
	position: relative;
	width: 100%;
}
.inlabel.accordion {
	width: calc(100% - 2rem);
}

.content-side__block label {
display: block;
	width: calc(100% - 2rem);
}

.accordion:after {
	content: "\a";
	background-image: url('/assets/img/icons/arrow-right-small.svg');
	position: absolute;
	right: 0;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	transform: rotate(90deg);
	top: 0;
	    white-space: pre;


}


.accordion.active:after {
	transform: rotate(270deg);
	top: -7px;
	right: -2px;

}

.inlabel.accordion:after {
right: -2rem;
}

.panel {
	display: block;
}


#catPreload {

	display: none; 
}
#saveSearchResults {

display: none; 

}

.twocolumns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	--min: 35ch;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
	gap: 2rem;
}


#contactform input[type="text"], #contactform input[type="email"], #contactform input[type="password"], #contactform textarea {
	width: 100%;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-block);
	display: block;
	padding-left: 1rem;
	font-family: "Roboto",sans-serif !important;

}


#contactform textarea {
	padding-top: 1rem;
	max-width: 100%;
	min-height: calc((2.652rem * 3) + (1.625rem * 2));
	field-sizing: content;
}
#contactform input[type="text"], #contactform input[type="email"], #contactform input[type="password"] {
	height: 2.652rem;
	margin-bottom: 1.625rem;
}
#contactform label {
	display: none;
}

#contactform input[type="submit"] {
	border: none;
}


.cssbox a:hover {text-decoration: none;}

.cssbox_container {
	--auto-grid-min-size: 20rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
	grid-gap: 1rem;
}
.userform {
	width: 100%;
	max-width: 33rem;
	margin-inline: auto;
	text-align: center;
}

.userform .button {
	border: none;
	margin-top: initial;
	}

p.notice {
background-color: var(--color-block);
	padding: 1rem;
	margin-bottom: 1rem !important;
	border-radius: var(--border-radius);
  overflow-wrap: anywhere;

}


.button:disabled,
.button[disabled]{ 
background-color: var(--color-block);
}
.margin-top-small {
margin-top: 0.5rem !important;
}

.margin-top {
margin-top: 1rem !important;
}
.margin-bottom-small {
margin-bottom: 0.5rem !important;
}
.a11i button {
color: var(--color-primary);
    padding: 5px 2px;
    font-size: 18px;
    margin-top: -8px;
	border: none;
	background-color: var(--color-block);
	width: 1.5626rem;
}

.a11i {
	margin: 0.5rem 0 0 0.5rem;
}
.a11i button:disabled,
.a11i button[disabled]{
	opacity: 0.5;
	
}