@font-face {
	font-family: "Solina-Regular";
	src: url("../fonts/Solina-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Solina-Medium";
	src: url("../fonts/Solina-Medium.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Solina-SemiBold";
	src: url("../fonts/Solina-SemiBold.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Solina-RegularItalic";
	src: url("../fonts/Solina-RegularItalic.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "amatik-icons";
	src: url("../fonts/amatik-icons.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

:root {
	--nav-height: 70px;

	/* --font-big: clamp(2.5rem, 1.8rem + 3.5vw, 6rem); 40 - 96px */
	--font-big: clamp(4.125rem, 2.027rem + 4.1441vw, 7rem); /* 66 - 112px */
	--font-big: clamp(3.125rem, 2.5795rem + 2.7273vw, 6.875rem); /* 50 - 110px */
	--font-h1: clamp(1.3125rem, 1.2625rem + 0.25vw, 1.5625rem); /* 21 - 25 */
	--font-h2: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem); /* 12 - 20 */
	/*--font-hero-big: clamp(2.25rem, 1.7rem + 2.75vw, 5rem); /* 36 - 80px */
    --font-hero-big: clamp(2rem, 1.4rem + 3vw, 5rem); /* 32 - 80px */
	--font-hero: clamp(1.875rem, 1.25rem + 3.125vw, 5rem); /* 30 - 80px */
	/*--font-headline: clamp(1.625rem, 1.45rem + 0.875vw, 2.5rem); /* 26 - 40px */
    --font-headline: clamp(1.5rem, 1.3rem + 1vw, 2.5rem); /* 24 - 40px */
	/*--font-headline-small: clamp(2rem, 1.75rem + 1.25vw, 3.25rem); /* 32 - 52px */
    --font-headline-small: clamp(2.375rem, 2.15rem + 1.125vw, 3.5rem); /* 38 - 56px */
	--font-subline: clamp(1.25rem, 1.175rem + 0.375vw, 1.625rem); /* 20 - 26px */
	/*--font-subline-big :clamp(1.625rem, 1.55rem + 0.375vw, 2rem); /* 26 - 32px */
    --font-subline-big :clamp(1.375rem, 1.25rem + 0.625vw, 2rem); /* 22 - 32px */
	--font-subline-scale:  clamp(0.6875rem, 0.5051rem + 0.3604vw, 0.9375rem); /* 11 -15 */
	--font-button: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); /* 20 - 24px */
	--font-section: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); /* 16 - 20px */ 
	/*--font-text: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); */ /* 16 - 20px */
	/*--font-text: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); /* 20 - 24px */
    --font-text: clamp(0.75rem, 0.625rem + 0.625vw, 1.375rem); /* 12 - 22px */
	--font-text-small: clamp(1rem, 0.975rem + 0.125vw, 1.125rem); /* 16 - 18px */
	--font-text-small-scale: clamp(0.625rem, 0.5338rem + 0.1802vw, 0.75rem); /* 10 - 12 */
	/*--font-dach: clamp(0.875rem, 0.85rem + 0.125vw, 1rem); /* 14 - 16px */
    --font-dach: clamp(0.75rem, 0.7rem + 0.25vw, 1rem); /* 12 - 16px */

	--font-menu: 1rem;  /*16px*/
	--font-logo: 30px;  /*30px*/

	--font-h3: clamp(1.25rem, 0.9955rem + 1.2727vw, 3rem); /*20 - 48px */
	
	--clr-schwarz: #000;
	--clr-weiss: #ffffff;

	--clr-blau-dunkel: #2F3082;
	
	--clr-gruen-dunkel: #006F76;
	--clr-gruen-hell: #76B72E;

	--clr-cyan: #93D5F6;
	--clr-gelb: #FFD900;

	--clr-grau: #D9D9D9;

	--padder: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
    --gapper: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
	--letter-spacer: 0.1em;
    --letter-spacer-neg: -.125em;
    --bs-gutter-x: 3rem;
	--delay: .1s;

	--bar-width: 30px;
	--bar-height: 2px;
	--hamburger-gap: 6px;
	--burger-timing: .3s ease-in-out;
	--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);

	transition-behavior: allow-discrete;
	interpolate-size: allow-keywords;
}

@media (max-width: 810px) {
:root {
	/* --font-big: clamp(2.5rem, 1.4388rem + 5.3061vw, 4.125rem); 40 - 66px */
	--font-big: clamp(1.875rem, 0.4056rem + 7.3469vw, 4.125rem); /* 30 - 66px */
}
}

/* #region Reset */

* {
	margin:0;
	box-sizing: border-box;
	font-weight: normal;
}
  :before,:after {
	box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
  }	

video {
    width: 100%;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}  

/* #endregion Reset */

.com-content-category.category-list {
	padding-top: 6rem;
}

.container.full.dummyblock {
	height: 100vh;
}

/* Body */

body {
	font-family: Solina-Regular;
	font-weight: normal;
	line-height: 1.3;
	background-color: var(--clr-weiss);
	overflow: hidden;
	position: relative;
	/* scroll-behavior: smooth; */
}

.skip {
	text-indent: -9999999px;
	position: absolute;
}

.white-bg {
	background-color: var(--clr-weiss);
}

.black-bg {
	background-color: var(--clr-schwarz);
}

.black-bg * {
	color: var(--clr-weiss);
}

/* #region Standards */

h1, h2, h3, h4 {
	font-family: Solina-Semibold;
	margin-bottom: .5em;
}

h1 {
	font-size: var(--font-h1);
	font-family: Solina-Regular;
	line-height: 1.3;
	padding-top: var(--padder);
}

.heroclaim h1 {
	font-size: var(--font-hero);
	line-height: 1;
}

.startseite h1 {
	font-size: var(--font-hero-big);
}

h2 {
	font-size: var(--font-headline);
}

p + h2 {
	margin-top: var(--padder);
}

.textblock h2 {
	font-size: var(--font-subline-big);
	font-family: Solina-Regular;
	max-width: 34ch;
}

.textblock h3 {
	max-width: 38ch;
}

.softintro h2 {
	font-size: var(--font-section);
	font-family: Solina-Medium;
}

.infobox h2 {
	font-family: Solina-Regular;
}

h3  {
	font-size: var(--font-subline);
	margin-bottom: .25em;
}

p + h3, p + h4 {
	margin-top: calc(.5*var(--padder));
}

h2 + h3 {
	margin-top: var(--padder);
}

h4 {
	font-size: var(--font-text-small);
}

a {
	color: var(--clr-schwarz);
}

p {
	padding-bottom: calc(.5*var(--padder));
	max-width: 75ch;
	font-size: var(--font-text);
}

.textblock.small {
	margin: auto;
	max-width: 1200px;
}

.textblock img {
	height: auto;
	float: right;
	margin-right: -30%;
	padding-block: calc(.5*var(--padder));
	padding-left: var(--padder);
}

@media (max-width: 1080px) {
	.textblock img {
		height: auto;
		float: none;
		margin-right: -30%;
		padding-block: calc(.75*var(--padder));
		padding-left: 0;
	}
}

.textblock p, .textblock p strong {
	max-width: 62ch;
}

.textblock p strong {
	font-family: Solina-SemiBold;
}

main.container {
	overflow: hidden;
	padding-block: 0;
}

main ul, main ol {
	padding: 0;
	font-size: var(--font-text);
	list-style: '—';
	padding-left: 25px;
	padding-bottom: var(--padder);
}

main ol {
	list-style: decimal;
}

main ol li::marker {
	font-family: Solina-Semibold;
}

main ul li, main ol li {
	padding-left: .5rem;
	padding-bottom: .25em;
	padding-top: .25em;
	max-width: 48ch;
}

main ol li ul li::marker {
	font-family: Solina-Regular;
}

main li ul {
	padding-bottom: .5em;
}

ol li:has(ul) {
	padding-bottom: 1em;
}

p:last-child {
	padding-bottom: 0;
}

.introwrapper p {
	font-size: var(--font-text);
	max-width: 35ch;
}

.introwrapper p:last-child {
	padding-bottom: 0;
}

.introwrapper:last-child {
	margin-bottom: var(--padder);
	@media ( width <= 810px ) {
		margin-bottom: 0;
	}
}

strong {
	font-family: Solina-Semibold;
}

em {
	font-family: Solina-RegularItalic;
	font-style: normal;
}

button {
	background: none;
	border: none;
}

.sr-only {
	color: transparent;
	display: block;
	height: 100%;
}

.sr-only::before {
	content: 'P';
	color: var(--clr-schwarz);
	height: 100%;
	display: grid;
	align-content: center;
}

.swiper .sr-only:hover::before {
	color: var(--clr-weiss);
}

.sr-only:hover::before, .video-btn-wrapper:hover .sr-only::before {
	color: var(--clr-weiss);
}

.sr-only.pause::before {
	content: '7';
}

.narrow {
	letter-spacing: -2px;
}

/* #endregion Standards */

/* #region Links und Buttons */

.btn, .btn.inv:hover {
	--clr-btn-bg: var(--clr-schwarz);
	position: relative;
	font-size: var(--font-dach);
	padding: .5em 1em;
	border-radius: 0;
	border: 8px solid var(--clr-btn-bg);
	background-color: var(--clr-btn-bg);
	color: var(--clr-weiss);
	width: fit-content;
	text-decoration: none;
	padding-right: 1.5em;
	border-radius: 44px;
	height: max-content;
}

.btn:hover, .btn.inv {

}

.btn.inv, .btn.inv:hover, .black-bg .btn, .black-bg .btn:hover {
	color: var(--clr-schwarz);
	background-color: var(--clr-weiss);
	border: 8px solid var(--clr-weiss);
	cursor: pointer;
}

.btn.kontakt {
	display: block;
	margin-top: var(--padder);
}

.btn span {
	transition: .3s;
	display: inline-block;
	transform-origin: left;
	padding-right: 1.5rem;
	will-change: transform;
}

.btn .pfeil {
	transform-origin: right;
}

.btn:hover .pfeilschaft {
    transform: scaleX(2.75);
    transform-origin: right;
    transition: .3s;
}

.btn .pfeilspitze, .btn .pfeilschaft {
	background-image: url(../images/pfeil.svg);
	width: 25px;
	height: 20px;
	display: inline-block;
	background-position: center right;
	background-size: contain;
	margin-left: 10px;
	transition: .3s;
	position: absolute;
	inset: calc(50% - 10px) calc(100% - 50px);
	transform-origin: right;
	background-repeat: no-repeat;
}

.btn .pfeilschaft {
	background-image: url(../images/pfeilschaft.svg);
	/* width: 2px;
	height: 20px;
	display: inline-block;
	background-position: center right;
	background-size: 32px 2px;
	margin-left: 35px;
	transition: .3s;
	position: absolute;
	inset: calc(50% - 10px) calc(100% - 75px);
	transform-origin: right;
	background-repeat: no-repeat;
	will-change: transform; */
}

.btn:hover .link {
	transform: scaleX(.5);
	transform-origin: left;
	transition: .3s;
}

.btn:hover .pfeil::after {
	transform: scale(1);
	width: 90px;
	inset: calc(50% - 10px) 42%;
}

.btn a, .btn.inv:hover a {
	color: var(--clr-weiss);
	text-decoration: none;
}

.btn:hover a, .btn.inv a, .black-bg .btn a, .black-bg .btn:hover a, .black-bg .btn span {
	color: var(--clr-btn-bg);
}

.btn.inv, .btn.inv:hover {
	color: var(--clr-schwarz);
	background-color: var(--clr-weiss);
	border: 8px solid var(--clr-weiss);
	cursor: pointer;
}

.btn.inv .pfeilschaft, .btn.inv .pfeilspitze, .black-bg .btn .pfeilschaft, .black-bg .btn .pfeilspitze {
	/* background-color: var(--clr-schwarz); */
	filter: invert(100%);
}

@media (max-width: 810px) {
	.btn .pfeilspitze, .btn .pfeilschaft {
		margin-left: 15px;
	}
}

/* #endregion Links und Buttons */

/* #region Header */

header {
	position: fixed;
	width: 100%;
	z-index: 2;
	height: 0;
	display: grid;
	align-content: center;
	transition: .3s;
}

.logowrapper .logo {
	text-decoration: none;
	color: var(--clr-schwarz);
	font-size: var(--font-logo);
	font-family: Solina-SemiBold;
	max-width: calc(3*var(--padder));
	display: block;
}

/* body:has(.startseite) .logowrapper .logo {
	color: var(--clr-weiss);
} */

.logowrapper {
	transition: .3s;
	position: fixed;
	top: calc(1*var(--padder));
	mix-blend-mode: difference;
	/* width: calc(3*var(--padder));
	left: var(--padder); */
	z-index: 30;
	width: 100%;
}

.logomax {
	max-width: 2520px;
	margin: auto;
	padding-inline: calc(1*var(--padder));
}

.logowrapper .logo img {
	width: 100%;
}

.down .logowrapper  {
	translate: 0 calc(-3*var(--padder));
}

@media (max-width: 810px) {
	.logowrapper {
	width: auto;
	min-width: 200px;
	}
	.logomax {
	max-width: 200px;
	margin: 0;
	}
}

/* Startseite Header animation */

.startseite .container.full.panorama.white-bg.first {
    height: auto;
    animation: none;
    margin-bottom: calc(2*var(--padder));
}

.startseite .container.full.panorama.white-bg.first .top {
	position: sticky;
	top: 0%;
	left: 0%;
	animation:  adjust-image-start linear forwards;
	animation-timeline: view();
	animation-range: cover;
	z-index: -1;
	background-color: var(--clr-weiss);
	padding-inline: var(--padder);
}

.startseite .container.full.panorama.white-bg.first .top img {
	height: 100%;
}

@keyframes adjust-image-start {
	0% {
		height: 65dvh; margin-bottom: 0dvh;
	}
	80% {
		height: 0dvh; margin-bottom: 0dvh;
	}	
	100% {
		height: 0dvh; margin-bottom: 0dvh;
	}
}

.startseite .container.full.white-bg.full-no-gap.startvideo {
	padding-top: 0;
	position: relative;
	top: 0%;
	left: 0%;
	/* animation:  adjust-video-start linear forwards;
	animation-timeline: view();
	animation-range: contain; */
	z-index: -1;
	margin-top: var(--padder);
}

.startseite .container.full.white-bg.full-no-gap.startvideo video {
	object-fit: cover;
	height: 100dvh;
	/* animation:  adjust-video-fit linear forwards;
	animation-timeline: view();
	animation-range: contain; */
}

@keyframes adjust-video-start {
	0% {
		height: 100dvh; margin-top: var(--padder);
		
	}
	50% {
		height: 100dvh;  margin-top: var(--padder);
	}

		100% {
		height: 100dvh;  margin-top: var(--padder);
	}
}


@keyframes adjust-video-fit {
	0% {
		object-fit: cover;
		
	}
	50% {
		object-fit: cover;
	}

	75% {
		object-fit: cover;
	}	

	100% {
		object-fit: cover;
	}
}

@media (max-width: 810px) {

	@keyframes adjust-image-start {
		0% {
			height: 55dvh; margin-bottom: 0;
		}
		80% {
			height: 0dvh; margin-bottom: 0;
		}	
		100% {
			height: 0dvh; margin-bottom: 0;
		}
	}

	@keyframes adjust-video-start {
		0% {
			height: 10dvh; margin-top: 0;
			
		}
			100% {
			height: 100vh;  margin-top: 0;
		}
	}

	/* @keyframes adjust-video-fit {
		0% {
			object-fit: cover;
			
		}
		50% {
			object-fit: cover;
		}

			100% {
			object-fit: cover;
		}
	} */
}

/* #endregion Header */

/* #region Menu */

.container.navbar {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	padding-block: calc(.5*var(--padder));
}

.burgermenu {
    position: fixed;
    right: 0;
    bottom: 0;
    display: grid;
    align-content: center;
    width: 100%;
    background: var(--clr-schwarz);
	scale: 1 0;
    height: 0;
	overflow: hidden;
	
    transition: scale .5s, height .5s;
	transition-timing-function: cubic-bezier(.7,0,.7,1);
    
    transform-origin: bottom;
}

.burgermenu * {
	color: var(--clr-weiss);
}

.active .burgermenu {
	scale: 1 1;
	height: 100dvh;
}

.burgermenu:has(li:focus-within) {
	scale: 1 1;
	height: 100dvh;
}

.down .active .burgermenu {

}

.burgermenu ul {
	display: flex;
	list-style: none;
	gap: 0;
	max-width: fit-content;
	margin: auto;
	padding: 0;
}

.burgermenu ul li {
	transition: .3s;
}

.burgermenu ul li:hover {
	z-index: 1;
}

.burgermenu ul li a {
	font-size: var(--font-h3);
	text-decoration: none;
	font-family: Solina-SemiBold;
	display: inline-block;
	transition: .3s;
	padding-inline: var(--padder);
}

.burgermenu ul:hover li:hover a {
	transform: scale(2);
	padding-inline: 0;
}

.burgermenu ul:hover li:not(:hover) a {
	transform: scaleX(.25);
}

.burgermenu .nav-item.current.active a {
	text-decoration: underline;
	text-decoration-thickness: 10px;
	text-underline-offset: 15px;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(2),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(3),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(4),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(5) {
	transform-origin: left;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(1) {
	transform-origin: right;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(3) {
	transform-origin: center;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(4),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(5) {
	transform-origin: left;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(1),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(2)
 {
	transform-origin: right;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(4),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(5) {
	transform-origin: left;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(1),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(2),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(3) {
	transform-origin: right;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(4) {
	transform-origin: center;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(5) {
	transform-origin: left;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(1),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(2),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(3),
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(4) {
	transform-origin: right;
}

/* Hover about */
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(2) {
	translate: -15%;
}

footer .mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(2) {
	translate: 0;
}

.mod-menu .subnav .mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(2) {
	translate: 0;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(3) {
	translate: -91%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(4) {
	translate: -200%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(5) {
	translate: -218%;
}

/* Hover Projekte */

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(1) {
	translate: 0%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(3) {
	translate: 0%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(4) {
	translate: -85%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(5) {
	translate: -130%;
}

/* Hover Future */

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(1) {
	translate: 105%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(2) {
	translate: 10%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(4) {
	translate: 0%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(5) {
	translate: -68%;
}

/* Hover Jobs */

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(1) {
	translate: 188%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(2) {
	translate: 85%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(3) {
	translate: 15%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(5) {
	translate: -15%;
}

/* Hover Kontakt */

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(4) {
	translate: 0%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(3) {
	translate: 68%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(2) {
	translate: 137%;
}

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(1) {
	translate: 250%;
}

.hamburger-menu, .burger-back {
	display: grid;
	gap: var(--hamburger-gap);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	position: fixed;
	bottom: var(--padder);
	z-index: 2;
	opacity: 1;
	cursor: pointer;
	transition: opacity .3s;
	left: 50%;
	width: 50px;
	height: 50px;
	place-content: center;
	color: var(--clr-weiss);
	padding: 48px;
	border-radius: 50px;
	-webkit-backdrop-filter: blur(10px) brightness(50%);
	backdrop-filter: blur(10px) brightness(50%);
	transition-delay: 0;
	translate: -50%;
}

.burger-back {
	background-color: var(--clr-weiss);
	color: var(--clr-schwarz);
	opacity: 0;
	transition: opacity .75s;
	transition-delay: 0;
}

.burger-cross {
	width: 50px;
	height: 50px;
	position: relative;
}

.cross-horizontal {
	width: 2px;
	height: 50px;
	background: var(--clr-schwarz);
	position: absolute;
	translate: 50% 0%;
	left: 45%;
	rotate: 45deg;
}

.cross-vertical {
	width: 2px;
	height: 50px;
	background: var(--clr-schwarz);
	position: absolute;
	translate: 50% 0px;
	left: 45%;
	rotate: -45deg;
}

.active .burger-back {
	bottom: calc(1*var(--padder));
	opacity: 1;
	transition-delay: .65s;
}

.hamburger-menu:hover {
	color: var(--clr-schwarz);
	backdrop-filter: blur(10px) brightness(50%);
}

.hamburger-menu {
	background-color: hsl(0, 0%, 20%, 0.5);
	background-color: hsl(0, 0%, 100%, 0.5);
	backdrop-filter: blur(5px) brightness(95%);
	color: var(--clr-schwarz);
	transition-delay: .5s;
}

.hamburger-menu:hover {
	background-color: hsl(0, 0%, 100%, 0.5);
	background-color: hsl(0, 0%, 20%, 0.5);
	color: var(--clr-weiss);
}

.active .hamburger-menu {
	opacity: 0;
	transition-delay: 0;
	
}

/* .burger-back {
	text-align: center;
	font-size: var(--font-h3);
	position: absolute;
	cursor: pointer;
	width: fit-content;
	inset: calc(100% - 2*var(--padder)) 50%;
	z-index: 1;
} */

@media (max-width: 810px) {

body:has(.container.navbar.active) {
	overflow: hidden;
	max-height: 100dvh;
}	

.container.navbar {
	height: 0%;
	transition: height .5s;
}

.container.navbar.active {
	position: fixed;
	bottom: 0;
	height: 100%;
	background: transparent;

}

/* .hamburger-menu, .burger-back {
	width: calc(3.5*var(--padder));
	height: calc(3.5*var(--padder));
	border-radius: calc(3*var(--padder));
	left: 50%;
	transform: translate(-50%);
	scale: .75;
	transform-origin: left;
} */

.hamburger-menu, .burger-back {
	width: calc(3.5*var(--padder));
	height: calc(3.5*var(--padder));
	border-radius: calc(3*var(--padder));
	left: auto;
	transform: translate(-50%);
	scale: .55;
	transform-origin: right;
	top: calc(-.5*var(--padder));
	right: calc(-.45*var(--padder));
	translate: 0;
}

.burgermenu {
	align-content: start;
	padding-top: calc(2*var(--padder));
	bottom: 0;
	/* top: calc(3*var(--padder)); */
}

.burgermenu ul {
	display: grid;
	gap: calc(1*var(--padder));
	text-align: left;
	width: 100%;
	max-width: 100%;
	padding-inline: 0;
	padding-top: calc(2*var(--padder));
}

.burgermenu ul li a {
	font-size: var(--font-hero);
	display: block;
}

.burgermenu ul:hover li:hover a {
	transform: scale(1);
	padding-left: calc(1*var(--padder));
}

.burgermenu ul:hover li:not(:hover) {
	translate: 0!important;
}

.burgermenu ul:hover li:not(:hover) a {
	transform: scaleY(1);
	/* line-height: 0; */
}

.burgermenu .socialmenu {
	text-align: right;
}
/*
	.burgermenu {
		display: none;
	}

	.active .burgermenu {
		display: grid;
		position: fixed;
		width: 100svw;
		height: 100dvh;
		z-index: 1;
		left: 0;
		top: 0;
		align-content: center;
	}

	.burgermenu ul {
		display: grid;
		list-style: none;
		gap: calc(2*var(--padder));
		padding-inline: var(--padder);
		text-align: left;
	}

	.burgermenu ul li a {
	font-size: var(--font-h1);
} */

.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(2) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(3) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(4) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(5) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(1) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(3) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(4) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(2):hover) .nav-item:nth-child(5) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(1) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(2) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(4) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(3):hover) .nav-item:nth-child(5) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(1) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(2) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(3) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(4) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(4):hover) .nav-item:nth-child(5)a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(1) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(2) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(3) a,
.mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(5):hover) .nav-item:nth-child(4) a {
	transform-origin: left;
	translate: 0;
}
}

/* Submenü */

.subnav {
	position: absolute;
	bottom: 0;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	bottom: var(--padder);
}

.burgermenu .subnav ul {
	max-width: 100%;
	width: 100%;
	gap: var(--padder);
	padding-left: var(--padder);
}

.burgermenu .subnav .socialmenu {
	flex-direction: row-reverse;
	padding-left: 0;
	padding-right: var(--padder);
}

.burgermenu .subnav ul li a {
    font-size: var(--font-text-small);
    padding: 0;
    font-family: 'Solina-Regular';
}

.burgermenu .subnav ul:hover li:hover a, .burgermenu .subnav ul:hover li:not(:hover) a {
	transform: scale(1);
	padding-inline: 0;
}

.burgermenu .subnav  .mod-menu.mod-list.nav:hover:has(.nav-item:nth-child(1):hover) .nav-item:nth-child(2) {
	translate: 0;
}

/* #endregion Menu */

/* #region Main */



/* body:has(.container.navbar.active) {
	overflow: hidden;
} */

/* main {
transition: .3s;
}

body:has(.container.navbar.active) main {
	transform: scaleY(.25);
	transition: .3s;
	overflow: clip;
	translate: 0 -35%;
	transform-origin: center;
} */

body:has(.active .burgermenu) {
	background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%);
}

main {
	transition: transform .5s;
	transition-timing-function: cubic-bezier(.7,0,.7,1);	
	transform-origin: top;
}

body:has(.container.navbar.active) main {
	transform: scaleY(.25);
	translate: 0;
	height: calc(100% + 250dvh);
}

/* #endregion Main */

/* #region Container */

.container {
	max-width: 2520px;
	padding-inline: calc(1*var(--padder));
	padding-block: calc(2*var(--padder));
	margin-inline: auto;
	overflow-x: clip;
}

.container.full, .container.bottomblock {
	max-width: 100%;
	padding: 0;
}

.container.flat {
	padding-bottom: 0;
}

.panorama .container.grid.g-2, .container.full.newsslider {
	padding-block: calc(2*var(--padder));
	padding-inline: 0;
}

.textblock .container {
	padding-inline: calc(1*var(--padder));
}

.container.medium {
	max-width: 1920px;;
}

.container.small {
	max-width: 810px;
}

.textblock.small .dachzeile {
	font-family: Solina-Semibold;
	margin-bottom: .5em;
	display: block;
}

.container.full.intro.first + .container:has(.textblock) {
	padding-top: 0;
}

.container.full.intro.black-bg.first + .container.white-bg:has(.textblock) {
	padding-top: calc(2*var(--padder));
}

.container.white-bg + .container.black-bg {
	padding-top: calc(2*var(--padder));
}

@media (max-width: 1080px) {
	.container {
		padding-inline: var(--padder);
	}
}

/* #endregion Container */

/* #region Grid-Systeme */

.grid {
	display: grid;
}

.grid.g-2 {
	grid-template-columns: repeat(2, 1fr);
	gap: calc(1*var(--gapper));
}

.panorama .grid.g-2 {
	gap: 0;
}

.grid.g-2.reverse div:first-child {
	order: 2;
}

.grid.g-3 {
	grid-template-columns: repeat(auto-fit, minmax(min(600px, 100%), 1fr));
	gap:calc(.5*var(--gapper));
	padding-inline: var(--padder) !important;
	row-gap: calc(1*var(--gapper));
}

.grid.g-121 {
	grid-template-columns: 1.25fr 2fr 0fr;
	gap: var(--gapper);
	@media (width <= 810px) {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 2fr 0fr;
	}
}

.scroller {
	overflow: scroll;
	display: grid;
	height: 100vh;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */	
  gap: 1rem;
  scroll-snap-type: y mandatory;
  @media (width <= 810px) {
	display: flex;
	scroll-snap-type: x mandatory;
	width: calc(100% + 2*var(--padder));
  	translate: calc(-1*var(--padder));	
  }
}

.scroller::-webkit-scrollbar {
  display: none;
}

.grid.g-4 {
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--gapper);
	row-gap: calc(2*var(--gapper));
}

footer .grid.g-4 {
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

@media (max-width: 1380px) {
	.grid.g-3 {
		grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
	}

	.details__summary .grid.g-2 {
	grid-template-columns: 1fr;
	row-gap: 0;
	}
}

@media (max-width: 810px) {
	.grid.g-2, .grid.g-4 {
		grid-template-columns: 1fr;
	}

	.container.grid.g-2:has(.introwrapper) {
		row-gap: calc(2*var(--padder));
	}

	.grid.g-2.reverse div:first-child {
		order: -1;
	}
}

/* #endregion Grid-Systeme */


/* #region Module */

/* Hero-Modul */

.container.full.panorama.first {
	height: 100dvh;
	overflow: clip;
	background: transparent;
}

.container.full.panorama.black-bg.first {
	background-color: var(--clr-schwarz);
}

.container.full.panorama.first .top {
	position: sticky;
	top: 0%;
	left: 0%;
	animation:  adjust-image linear forwards;
	animation-timeline: view();
	animation-range: cover;
	z-index: 1;
	transform-origin: top;
	width: 100%;
	overflow: clip;
	will-change: transform;
}

.container.full.panorama.first .top img {
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

.container.full.panorama.first .top video {
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

@keyframes adjust-image {
	0% {
		transform: scaleY(1); height: 100dvh;
		
	}
	50% {
		transform: scaleY(1); height: 100dvh;
	}

	100% {
		transform: scaleY(0); height: 0dvh;
	}
}

.container.full.animation-dummyblock {
	margin-top: -10vh;
}

@media (max-width: 810px) {
	.container.full.panorama.first .top {
	height: 100dvh;
}
}



.container.full.panorama {
	width: 100%;
}

.container.full.panorama:has(.container.grid.g-2) {
	min-height: auto;
}

/* Startseiten Animation Start */

.scroll-container {
	view-timeline-name: --scroller;
	view-timeline-inset: 0% 100%;
	min-height: 150svh;
}

.startseite .startvideo {
        position: sticky;
        top: 0;
        height: 65svh;
        transform-origin: top;
        animation: compress linear;
        animation-timeline: --scroller;
        animation-fill-mode: both;
        animation-range: entry 0% exit 100%;
        z-index: 1;
    }

.mobilevideo {
	display: none;
}     

@media (max-width: 810px) {
	.desktopvideo {
		display: none;
	}
	.mobilevideo {
		display: block;
	}        
}

@keyframes compress {
	from {
		height: 65svh;
		transform: scaleY(1);
	}
	to {
		height: 0svh;
		transform: scaleY(0);
	}      
}

.startseite .startvideo video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.startseite .container.intro.claim {
	position: sticky;
	top: 65svh;        
	padding-top: 3rem; 
	/* padding-bottom: 25svh; */
	transform-origin: top;
	isolation: isolate;
	z-index: 1;
	animation: keep-position linear;
	animation-timeline: --scroller;
	animation-fill-mode: both;
	animation-range: entry 0% exit 100%;        
}

@keyframes keep-position {
	from {
		top: 65svh;
		padding-top: 3rem;
	}
	to {
		top: 0svh;
		padding-top: 0;
	}      
} 

.startseite .container.intro.claim h1 {
	display: inline-block;
	transform-origin: top;
	animation: stretch-font linear;
	animation-timeline: --scroller;
	animation-fill-mode: both;
	animation-range: entry 0% exit 100%;    
	text-wrap: balance;      
}

@keyframes stretch-font {
	0% {
		transform: scaleY(1);
	}
		
	100% {
		transform: scaleY(2.5);
	}          
}

.startinhalt {
	/* min-height: 100svh; */
	padding-top: 25svh!important;
	padding-bottom: 25svh!important;
}

/* Startseiten Animation Ende */

.container.full.panorama + .container {
	    /* margin-top: calc(100vh + var(--padder)); */
}

.container.full.panorama img {
	width: 100%;
}

.container.full.hero {
	background-color: var(--clr-cyan);
	min-height: 100svh;
	overflow: auto;
}

.container.big.bigimage {
	padding-inline: var(--padder);
}

.container.lowpadding {
	padding: 0;
	padding-top: calc(.5*var(--padder));
}

.container.full.white-bg + .container.full.black-bg, .container.full.black-bg + .container.full.white-bg {
	padding-top: calc(2*var(--padder));
}

.container.full.full-no-gap + .container.full.full-no-gap {
	padding-top: 0;
}

.container.full.black-bg.full-no-gap + .container.full.white-bg.full-no-gap,
.container.full.white-bg.full-no-gap + .container.full.black-bg.full-no-gap {
	padding-top: calc(2*var(--padder));
}

/* Introtext Modul */

.full.intro .introtext {
	padding-inline: calc(1*var(--padder));
	padding-block: calc(2*var(--padder));
	padding-top: 0;
	max-width: 2520px;
	margin-inline: auto;	
}

.intro .introtext h2 {
	font-family: Solina-Regular;
	font-size: var(--font-hero);
	line-height: 1;
}

.intro .introtext p {
	font-size: var(--font-text);
	padding-bottom: var(--padder);
	max-width: 48ch;
}

.introtext.bigtext {
	margin: auto;
	max-width: 114ch;
}

.introtext.bigtext h2 {
	font-family: Solina-Regular;
	font-size: var(--font-headline-small);
}

.intro .introtext.call2action h2 {
	line-height: 1.3;
	margin-bottom: var(--padder);
	font-size: var(--font-headline);
}

.call2action .btn {
	margin-right: 1rem;
}

.call2action .btn:hover span {
	color: var(--clr-weiss);
}

.black-bg .call2action .btn:hover span, .black-bg .call2action .btn span {
	color: var(--clr-schwarz)!important;
}

.introtext.bigtext .mod-custom.custom {
	padding-inline: 0;
	line-height: 1.5;
}

.intro .introtext.bigtext p, .introtext.textblock.small .moduletable.big p {
	font-size: var(--font-headline);
	font-family: Solina-Regular;
}

.introtext.bigtext.outro {
	margin: unset;
}

.intro .introtext.bigtext.outro p {
	font-size: var(--font-text);
	line-height: 1.5;
}

.introtext.jobs.big p {
	font-size: var(--font-subline-big);
}

.intro .introtext h1 {
	display: inline;
}

.intro .introtext:has(h1+p:last-child) h1::after {
	content: '.';
	padding-right: .15em;
}

.intro .introtext:has(h1) h1+p:last-child {
	padding-bottom: 0;
	display: inline;
	font-size: var(--font-hero);
}

.intro .introtext p:last-child {
	padding-bottom: 0;
}

@media (max-width: 810px) {
	.full.intro .introtext {
		padding-inline: calc(1*var(--padder));
	}
}

/* Introtext Small Standardseite */

.intro .introtext.small h1 {
	font-size: var(--font-hero);
	font-family: Solina-Regular;
	float: none;
	display: grid;
	margin-right: 1rem;
	padding-top: clamp(0.6875rem, 0.3875rem + 1.5vw, 2.1875rem);
	margin-bottom: .5em;
	text-transform: none;
	text-wrap: balance;
}

.intro .introtext.small:has(.dachzeile) h1 {
	padding-top: 0;
}

.intro .introtext.small p {
	font-size: var(--font-text);
	max-width: 32ch;
}

.introtext.textblock.small .big p {
	font-size: var(--font-text);
	max-width: 100ch;
}

.introtext.textblock.small p {
	font-size: var(--font-text);
	max-width: 48ch;
}

/* Image und Video Modul */

.bigimage img {
	width: 100%;
	height: auto;
}

.caption {
	margin-top: 1em;
	max-width: 85ch;
}

.caption h2, .caption h3 {
	font-size: var(--font-subline-big);
	font-family: Solina-Regular;
}

.caption p, .caption h3 {
	font-size: var(--font-text);
	max-width: 46ch;
}

/* .container.bigimage:has(img) .caption {
	padding-top: 0 !important;
} */

/* .container.bigimage:has(img) .caption p {
	font-size: var(--font-text-small);
} */

.container.bigimage:has(:not(img)), .container.bigimage:has(:not(video)) {
	padding-top: 0;
}

/* Image und Video Modul 2er-grid */

.container.full.full-no-gap, .container.full.full-with-gap {
	padding-block: calc(2*var(--padder));
}

.full-no-gap .container.grid, .full-no-gap .container.bigimage, .full.full-with-gap .container.bigimage {
	padding-inline: 0;
	padding-block: 0;
	width: 100%;
}

.container.grid {
	padding: 0;
	row-gap: calc(2*var(--gapper));
}

.full-no-gap .grid.g-2 {
	gap: 0;
}

.container.full.white-bg.full-no-gap + .container.full.white-bg.full-no-gap {
	padding-top: 0;
}

.full-no-gap .grid.g-2 .caption, .full-no-gap .container.bigimage .caption, .full-with-gap .container.bigimage .caption  {
	padding-inline: calc(1*var(--padder));
	padding-top: var(--padder);
}

.full-no-gap .container.bigimage:nth-child(2):has(:not(img)) .caption {
	padding-left: calc(2*var(--padder));
}

.container.full.big-padding .container.bigimage   {
	padding-inline: calc(2*var(--padder));
}

.container.full.full-no-gap .container.intro {
	padding-block: 0;
}

.container.flat-top {
	padding-top: 0;
}

.container.flat-top:has(.btn) {
	margin-bottom: var(--padder);
}

.container.intro {
	padding-top: calc(3*var(--padder));
}

.container.intro:has(.mod-custom) {
	padding-top: calc(1*var(--padder));
}

.animation-dummyblock + .container.intro {
	padding-top: var(--padder);
}

@media (max-width: 810px) {
.full-no-gap .grid.g-2 .caption, .full-no-gap .container.bigimage .caption, .full-with-gap .container.bigimage .caption  {
	padding-top: 0;
}

.full-no-gap .container.bigimage:nth-child(2):has(:not(img)) .caption {
	padding-left: calc(1*var(--padder));
}	

.container.full.big-padding .container.bigimage   {
	padding-inline: calc(1*var(--padder));
}

.full-no-gap .grid.g-2 {
	row-gap: calc(0*var(--padder));
}

.container.grid {
	row-gap: calc(1*var(--gapper));
}

.com-content-category-blog__items.blog-items {
	row-gap: calc(2*var(--gapper));
}

}

/* Slider Modul */

.container.full.newsflash > .container {
	padding-inline: 0;
}
.container.full.newsflash > .container .moduletable > h2,
.container.full.newsflash > .container .moduletable > h3 {
	padding-left: var(--padder);
}

.container.full.newsflash > .container.flat-top {
	padding-left: var(--padder);
	padding-top: 0;
}

.container.full.newsflash {
	margin-top: calc(.5*var(--padder));
}

.container.full.newsslider {
	overflow: hidden;
	padding-block: 0;
	position: relative;
	padding-top: 0;
	margin-bottom: calc(1.5*var(--padder));
	container-type: inline-size;
}

.container.full.newsslider:has(.introwrapper p) {
	margin-bottom: 0;
}

.swiper.g-table {
	margin-inline: var(--padder);
	max-width: 2420px;
	margin: auto;
}

.g-table p {
	font-size: var(--font-text-small);
	max-width: 28ch;
}

.g-table h3 {
	font-family: Solina-Regular;
    line-height: 1.2;
    margin-bottom: .5em;
	max-width: 24ch;
}

.g-table .swiper-wrapper {
	padding-block: calc(2*var(--padder));
	padding-bottom: calc(1*var(--padder));
}

/* .swiper.news.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
	scale: 1.25;
	padding-bottom: calc(1.25*var(--padder));
	transform-origin: top;
} */

.container.full.newsslider .swiper {
	width: 150vw;
	margin-left: -25vw;
}

.swiper-slide {
	transition: .3s;
}

.swiper-slide .introimage {
	margin-bottom: 1.5em;
}

.swiper-slide.swiper-slide-prev, .swiper-slide.swiper-slide-next {
	transform: scaleX(.5);
	transform-origin: left;
}

.swiper-slide.swiper-slide-prev {
	transform-origin: right;
}

.swiper.g-table .swiper-slide.swiper-slide-prev, .swiper.g-table .swiper-slide.swiper-slide-next {
	transform: none;
	transform-origin: top;
}

.swiper-slide.swiper-slide-active {
	transform-origin: top;
}

/* .swiper-slide.swiper-slide-active p, .swiper-slide .introwrapper h3 {
	transform-origin: top;
} */

.swiper.g-table .swiper-slide.swiper-slide-active {
	transform: none;
	transform-origin: top;
}

.swiper-slide img, .swiper-slide video {
	height: 100%;
	object-fit: cover;
	width: 100%;
	aspect-ratio: 4/3;
	pointer-events: none;
}

.swiper-slide img + p, .swiper-slide video + p {
	margin-top: 1rem;
}

.swiper-slide .introwrapper {
	text-decoration: none;
	color: var(--clr-schwarz);
}

.swiper-slide .introwrapper h3 {
	font-size: var(--font-subline);
	margin-top: .5em;
	font-family: Solina-Regular;
}

.swiper-slide a.introwrapper h3 {
	margin-top: 0;
}

.swiper-slide .introwrapper p {
	font-size: var(--font-text-small);
	max-width: 60ch;
}

.swiper-pagination {
	position: absolute;
	margin-bottom: 0;
}

.swiper-pagination-bullet {
	width: 14px;
	height: 14px;
	display: inline-block;
	border-radius: 50%;
	background: var(--clr-schwarz);
	opacity: .8;
}

.black-bg .swiper-pagination-bullet {
	background: var(--clr-weiss);
}

.swiper-button-disabled {
	opacity: 1!important;
}

/* .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: '';
    background-image: url(../images/pfeil.svg);
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50px;
    background-size: 50%;
	-webkit-backdrop-filter: blur(10px) brightness(50%);
    backdrop-filter: blur(10px) brightness(50%);
	background-color: rgba(0,0,0,.5);
	opacity: 1!important;
} */

.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after, .swiper-button-next::after, .swiper-rtl .swiper-button-prev::after {
	content: '';
	background-image: url(../images/pfeil-schwarz.svg);
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50px;
	background-size: 50%;
	-webkit-backdrop-filter: blur(5px) brightness(95%);
	backdrop-filter: blur(5px) brightness(95%);
	background-color: hsl(0, 0%, 100%, 0.5);
	opacity: 1 !important;
	cursor: pointer;
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
	left: calc(.75*var(--padder));
	right: auto;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
	right: calc(.75*var(--padder));
	left: auto;
}

@media (max-width: 810px) {
.swiper-button-prev, .swiper-rtl .swiper-button-next {
	left: calc(.55*var(--padder));
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
	right: calc(.55*var(--padder));
}
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
	rotate: 180deg;
}

.swiper-button-next, .swiper-button-prev {
	position: absolute;
	top: 18cqw;
	width: 50px;
	height: 50px;
	bottom: auto;
	z-index: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--swiper-navigation-color,var(--swiper-theme-color));
	transition: .3s;
	scale: .55;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    scale: .75;
}

.swiper-btn-play, .swiper-btn-pause, .video-btn-play, .video-btn-pause {
	position: absolute;
	bottom: calc(0*var(--padder));
	cursor: pointer;
	z-index: 1;
	font-family: amatik-icons;
}

.swiper-btn-play, .swiper-btn-pause {
	width: 50px;
	height: 47px;
}

.video-button-fixer {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 1;
}

.video-btn-max {
	max-width: 2520px;
	margin: auto;
}

.video-btn-wrapper {
	position: absolute;
	bottom: var(--padder);
	right: var(--padder);
	color: var(--clr-weiss);
	background-color: hsl(0, 0%, 20%, 0.5);
	-webkit-backdrop-filter: blur(10px) brightness(50%);
	backdrop-filter: blur(10px) brightness(50%);
	width: 105px;
	height: 50px;
	place-content: center;
	display: grid;
	border-radius: 50px;
	z-index: 1;
	transition: .3s;
}

.video-btn-wrapper {
	color: var(--clr-schwarz);
	background-color: hsl(0, 0%, 100%, 0.5);
	-webkit-backdrop-filter: blur(5px) brightness(95%);
	backdrop-filter: blur(5px) brightness(95%);
}

.video-btn-wrapper:hover {
	color: var(--clr-weiss);
	background-color: hsl(0, 0%, 20%, 0.5);
	-webkit-backdrop-filter: blur(10px) brightness(50%);
	backdrop-filter: blur(10px) brightness(50%);
}

.video-btn-wrapper {
	display: grid;
	grid-template-columns: auto auto;
	place-content: center;
	scale: .75;
	transform-origin: right;
}

.video-btn-wrapper::before {
	content: 'Videos';
	align-self: center;
	padding-left: 1.5rem;
}

.video-btn-play, .video-btn-pause {
	position: absolute;
	bottom: auto;
	display: block;
	width: 100%;
	height: 50px;
	place-content: center;
	text-align: left;
	padding-left: 1rem;
}

.swiper-btn-play.active, .swiper-btn-pause.active,.video-btn-play.active, .video-btn-pause.active {
	display: none;
}

/* .swiper-slide .introwrapper .dachzeile, a.introwrapper .dachzeile {
	transition: .3s;
}

.swiper-slide:hover .introwrapper .dachzeile, a.introwrapper:hover .dachzeile {
	transform: scaleX(.95);
	transform-origin: right;
}  */

@media (max-width: 810px) {
	.container.full.newsslider {
		padding-block:0;
	}

	/* .video-btn-wrapper {
		bottom: calc(1.25*var(--padder));
		scale: .75;
	} 

	.video-btn-wrapper {
	bottom: calc(1.25*var(--padder));
	scale: .75;
	left: calc(.85* var(--padder) + 50%);
	transform: translate(-100%);
}*/

.video-btn-wrapper {
	bottom: calc(.5*var(--padder));
	scale: .55;
	right: calc(1*var(--padder));
}  

	.container.full.newsslider .swiper {
	width: auto;
	margin-left: 0;
}

	.swiper-pagination {
	margin-bottom: calc(1.5*var(--padder));
}

	.swiper-slide .introwrapper h3 {
	font-size: var(--font-subline);
}

.swiper-slide .introwrapper p {
	font-size: var(--font-text-small);
}

	.swiper-slide.swiper-slide-active {
	transform: scale(1);
}

.swiper-slide.swiper-slide-prev, .swiper-slide.swiper-slide-next {
	transform: scale(1);
	transform-origin: top;
}

.swiper-slide .introwrapper h3, .swiper-slide .introwrapper p, .swiper-slide .introwrapper .dachzeile {
	padding-inline: var(--padder);
    transition: .3s;
}

/* .swiper-slide:hover .introwrapper .dachzeile, a.introwrapper:hover .dachzeile {
	transform: scaleX(.95);
	transform-origin: right;
}   */

/* .swiper.news.swiper-initialized.swiper-horizontal.swiper-backface-hidden:has(.introwrapper p) {
	padding-bottom: 0;
} */

.swiper-button-next, .swiper-button-prev {
	top: 37vw;
	scale: .55;
}

.introimage .btn {
	font-size: 12px;
}

.swiper-button-next {
	left: auto;
}

}

/* #region Akkordeon */

.container.full.accordion + .container.full.small-padding {
	padding-top: calc(2*var(--padder));
}

.container.accordionwrapper {
	margin: auto;
	padding-bottom: 0;
	padding-top: calc(.5*var(--padder));
}

.container.intro.nopad {
	padding-block: 0;
	padding-bottom: calc(2*var(--padder));
}

details {
	position: relative;
	padding-bottom: .5rem;
	margin-inline: auto;
	display: block;
	clear: both;
	border-top: 2px solid;
}

summary {
	/* position: relative; */
	cursor: pointer;
	font-size: var(--font-text);
	padding-block: calc(.5*var(--padder));
	padding-right: calc(1.5*var(--padder));
}

.details__summary.nopad {
	padding-right: 0;
	cursor: default;
}

.summary-short {
	margin-bottom: var(--padder);
}

.summary-short.grid.g-2 {
	grid-template-columns: 1fr auto;
}

.details::details-content {
	display: block;
	margin-inline: 0rem;
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.5s;
	transition-behavior: allow-discrete;
}

.details[open]::details-content {
	/* Fallback for browsers that don't support calc-size() function */
	block-size: auto;
	
	/* calc-size() function allows transition to height: auto; */
	block-size: calc-size(auto, size);
}

summary h2 /*.details__summary.nopad h2:first-line */ {
	font-size: var(--font-big);
	font-family: Solina-Regular;
	line-height: 1;
	padding-right: .5rem;
}

.details__summary.nopad h2 {
	line-height: 1.1;
	margin-top: -.15em;
}

.summary-short {
	margin-bottom: calc(0*var(--padder));
	padding-top: 1.25em;
}

.summary-short:has(h3 + p) {
	margin-bottom: calc(1*var(--padder));
}

summary h3, summary p {
	font-size: var(--font-text);
}

.details__content.grid.g-2 {
	gap: calc(1*var(--padder));
}

.details__content {
	margin-top: .5rem;
	padding-right: calc(1.5*var(--padder));
}

.details__content.grid.g-2 div:last-child {
	padding-left: calc(3*var(--padder));
	padding-bottom: calc(2*var(--padder));
}

.details__content p {
	font-size: var(--font-text-small);
}

.details__content video {
	aspect-ratio: 4/3;
	object-fit: cover;
	margin-bottom: var(--padder);
}

@media (max-width: 1024px) {
	.details__summary.nopad .grid.g-2 {
		grid-template-columns: 1fr;
		row-gap: 1rem;
	}

	.details__summary.nopad h2 {
	margin-bottom: 0;
	}

	.summary-short.grid.g-2 h3 {
	margin-bottom: 1.5em;
	}


	.details__summary.nopad .summary-short {
	display: grid;
	grid-template-rows: 0fr;
	overflow: visible;
	height: auto;
	transition: .3s;
	padding-bottom: 2rem;
	}
}

/* List Item ::marker supports only some CSS properties, so we're using ::before pseudo-element instead */
summary::marker {
	content: '';
	content: none;
}

summary::-webkit-details-marker {
display: none;
}

details > summary:first-of-type {
	list-style-type: none;
}

.pluszeichen {
    width: 52px;
    margin-right: 0;
    flex-shrink: 0;
    transition: 0.3s;
    position: absolute;
    display: grid;
    place-content: baseline;
    padding: 0em;
    right: 0;
    align-content: baseline;
    container-type: inline-size;
}

details[open] .pluszeichen {
  height: calc(100% - var(--padder));
  align-content: baseline;
}

.pluszeichen > * {
	grid-area: 1/1;
}

.pluszeichen .shaft, .pluszeichen .left-arm, .pluszeichen .right-arm {
	background-color: var(--clr-schwarz);
}

.pluszeichen .shaft {
    width: 2px;
    height: 50px;
    padding: 0;
    position: absolute;
    inset: 0 25px;
	transition: .3s;
}

details[open] .pluszeichen .shaft {
	height: 100%;
	inset: 1px 25px;
}

.pluszeichen .left-arm, .pluszeichen .right-arm {
    padding: 0;
    width: 25px;
    height: 2px;
    position: absolute;
    inset: 25px 0px;
    transform: rotate(0);
    transition: 0.3s;
}

.pluszeichen .right-arm {
    inset: 25px 25px;
}

details[open] .pluszeichen .left-arm, details[open] .pluszeichen .right-arm {
	inset: 8px 5px;
	transform: rotate(-45deg);
}

details[open] .pluszeichen .right-arm {
    transform: rotate(45deg);
    inset: 8px 22px;
    width: 25px;
}

@media (max-width: 1024px) {
  .details__content.grid.g-2 div:last-child {
	  padding-left: 0;
  }
}  

@media (max-width: 810px) {

	.container.accordionwrapper {
		padding-left: calc(1*var(--padder));
	}

	.summary-short {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	height: 0;
	transition: .3s;
}

details[open] .summary-short {
	grid-template-rows: 1fr;
	height: auto;
}

.details__content.grid.g-2 div:last-child {
	padding-left: 0;
}

.pluszeichen {
	width: 44px;
	right: 0;
}

.pluszeichen .shaft {
	width: 2px;
	height: 36px;
	padding: 0;
	position: absolute;
	inset: 0 25px;
}

details[open] .pluszeichen .shaft {
	height: 100%;
	inset: 3px 25px;
}

.pluszeichen .left-arm, .pluszeichen .right-arm {
	padding: 0;
	width: 18px;
	height: 2px;
	position: absolute;
	inset: 18px 7px;
	transform: rotate(0);
	transition: 0.3s;
}

.pluszeichen .right-arm {
	inset: 18px 26px;
}

details[open] .pluszeichen .left-arm, details[open] .pluszeichen .right-arm {
	inset: 7px 11px;
	transform: rotate(-45deg);
}

details[open] .pluszeichen .right-arm {
	transform: rotate(45deg);
	inset: 7px 23px;
	width: 19px;
}

}

/* #endregion Akkordeon */

/* #region Tabelle */

.container.full.tablecontent {
	background-color: var(--clr-schwarz);
	color: var(--clr-weiss);
	margin-top: calc(.5*var(--padder));
	padding-inline: var(--padder);
	padding-block: calc(1*var(--padder));
    padding-bottom: calc(2*var(--padder));
}

.tablecontent .container.flat.softintro {
	max-width: 1920px;
	margin-bottom: calc(.5*var(--padder));
}

.grid.g-table {
	grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
	max-width: 1920px;
	padding: var(--padder);
	gap: var(--padder);
	row-gap: calc(2*var(--padder));
	margin: auto;
	padding-bottom: calc(2*var(--padder));
}

.introwrapper h3, .introwrapper p {
	transition: .3s;
	transform-origin: right;
}

/* #endregion Tabelle */

/* Headline Artikel Modul */

.intro.headline h1 {
	font-family: Solina-SemiBold;
	font-size: var(--font-hero);
	line-height: 1;
	margin-bottom: .25em;
}

.full.intro .introtext .dachzeile {
	display: block;
	font-size: var(--font-dach);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacer);
	margin-bottom: 2em;
	padding-top: calc(1*var(--padder));
}

/* Übersichten Modul */

.com-content-category-blog__items.blog-items {
	padding-bottom: calc(2*var(--padder));
}

.introwrapper {
	text-decoration: none;
	color: var(--clr-schwarz);
	transition: .3s;
	min-width: 180px;
	scroll-snap-align: start;
}

a.introwrapper {
	display: flex;
	gap: 1rem;
	align-items: end;
	@media ( width <= 810px ) {
		display: block;
	}
}

.introwrapper .introimg {
	margin-bottom: 0;
	transition: .3s;
	transform-origin: right;
	@media ( width <= 810px ) {
		margin-bottom: .75em;
	}
}

.introwrapper .introimage, .introwrapper .introtext {
	transition: .3s;
	transform-origin: right;
}

/* a.introwrapper:hover .introimg, a.introwrapper:hover .introimage, 
a.introwrapper:hover .introtext {
	transform: scaleX(.95);
} */

.introwrapper .dachzeile {
	font-size: var(--font-dach);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacer);
	margin-bottom: .25em;
	display: block;
}

.introwrapper h2 {
	font-size: var(--font-h2);
	font-family: Solina-Semibold;
	text-transform: uppercase;
	margin-bottom: 0;
}

.introwrapper .introimg img, .introwrapper .introimg video {
	height: auto;
	margin-bottom: 0;
	aspect-ratio: 1/1;
	object-fit: cover;
	width: 100%;
	max-width: 400px;
	@media ( width <= 810px ) {
		margin-bottom: .75em;
	}	
}

.g-1 .blog-item {
	max-width: 1080px;
	margin: auto;
}

.g-1 .introwrapper h2, .g-2.bolder .introwrapper h2 {
	font-size: var(--font-h3);
	text-align: center;
}

.g-2.bolder .introwrapper h2, .g-2.bolder .dachzeile {
	text-align: left;
	padding-inline: var(--padder);
}

.g-1 .introimg img, .g-1 .introimg video {
	aspect-ratio: 4/3;
	max-width: 75%;
	margin: auto;
	margin-bottom: calc(.5*var(--padder));
}


/* Infobox */

.infobox {
	margin-inline: auto;
}

/* Newsbox */

.newsmodule {
	display: grid;
	gap: var(--gapper);
	margin-inline: auto;
}

.sticky .newsmodule {
	position: sticky;
	top: calc(3*var(--padder));
}

.newsmodule .introwrapper {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: var(--padder);
	border-top: 1px solid;
	padding-block: calc(.5*var(--padder));
}

.newsmodule .introwrapper .introimage img {
	aspect-ratio: 1/1;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.introimage {
	position: relative;
}

.introimage .btn {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	font-size: 10px;
	background-color: rgba(0,0,0,.5);
	border: 0px solid rgba(0,0,0,.5);
	z-index: 0;
	transition: scale .3s;
	scale: 0;
	padding-right: 1em;
    display: none;
}

.introwrapper:hover .btn {
	scale:0;
}

.swiper-slide.swiper-slide-prev .introimage .btn, .swiper-slide.swiper-slide-next .introimage .btn {
	scale: 0;
}

@media(max-width: 810px) {
	.newsmodule .introwrapper {
		grid-template-columns: 1fr;
	}

	.introimage .btn {
	scale: 1.5;
}

.introwrapper:hover .btn {
	scale: 1.1;
}
}

/* Kontaktbox */

.contactmodule {
	display: grid;
	min-height: 75svh;
	border: 1px solid;
	padding: var(--padder);
	text-align: center;
	margin-inline: auto;
	max-width: fit-content;
}

.sticky .contactmodule {
	position: sticky;
	top: calc(3*var(--padder));
}

.contactmodule h2 {
	font-size: var(--font-headline);
	font-family: Solina-SemiBold;
	text-transform: uppercase;
	letter-spacing: var(--letter-spacer);
	align-self: start;
}

.contactmodule p {
	font-size: var(--font-menu);
	font-family: Solina-Regular;
}

.contactmodule button {
	align-self: end;
	margin-inline: auto;
}

.contactmodule .introtext .btn, .contactmodule .introtext .btn.inv:hover {
	--clr-btn-bg: var(--clr-gruen-hell);
}


/* #endregion Module */

/* #region  footer */

footer.container {
	position: absolute;
	bottom: 0;
	padding-block: 0;
	color: var(--clr-schwarz);
}

aside .container {
	padding-top: 0;
}

aside .container.intro {
	padding-inline: 0;
}

.videobg.black-bg.footeranimation, .videobg.black-bg.footeranimation #animation {
	height: 50dvh;
}

footer.container.full * {
	font-size: var(--font-text-small);
	color: var(--clr-weiss);
}

footer.container.full {
	background-color: var(--clr-schwarz);
	color: var(--clr-weiss);
	padding-block: var(--padder);
	padding-top: 0;
	display: grid;
	grid-template-rows: 1fr 1fr;
	height: 50dvh;
	padding-bottom: 0;
	position: relative;
}

footer.container.full .videobg {
	padding-bottom: var(--padder);
	height: 50vh;
}

footer.container.full .videobg video {
	object-fit: fill;
	height: 50vh;
}

footer.container.full .videobg #animation-container, footer.container.full .videobg #animation {
	height: 100%;
}

.footerbottom {
	padding-top: var(--padder);
}

footer .container.grid.g-2 {
	padding-inline: var(--padder);
	grid-template-columns: 1fr 1fr;
}

footer .grid.g-4 {
	padding-block: 0;
}

footer .socialmenu {
	padding: 0;
	list-style: none;
}

footer .mod-menu.mod-list.nav {
	padding: 0;
	list-style: none;
	display: flex;
	gap: 1rem;
}

footer .mod-menu.mod-list.nav a, footer .socialmenu a {
	text-decoration: none;
	min-height: 45px;
	display: block;
}

.container.copyright {
	text-align: right;
	padding-top: 0;
	line-height: 1;
}

.container.copyright p {
	padding: 0;
}

@media(max-width: 810px) {
	footer .grid.g-4 {
		grid-template-columns: 1fr;
	}

	.container.copyright {
		text-align: right;
		padding-top: 0;
		line-height: 1;
		padding-left: 0;
		padding-right: 0;
	}
}

/* region Pagination */

.com-content-category-blog__counter.counter.float-md-end.pt-3.pe-2 {
	width: 100%;
	text-align: center;
	max-width: 100%;
	display: none;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: var(--padder);
	list-style: none;
	justify-content: center;
	font-size: var(--font-text-small);
	padding-top: 0;
	padding-bottom: calc(2*var(--padder));
}

.active.page-item a {
	text-decoration: none;
}

.search-pages-counter {
	text-align: center;
	padding: var(--padder);
}

.page-item {
	padding: 0;
	/* backdrop-filter: blur(10px) brightness(50%); */
	padding: 0;
	aspect-ratio: 1/1;
	border-radius: 40px;
	display: grid;
	align-content: center;
	width: 45px;
	height: 45px;
}

.disabled.page-item, .disabled.page-item:hover {
	opacity: .2;
	pointer-events: none;
}

.active.page-item, .page-item:hover {
	color: var(--clr-schwarz);
	/* backdrop-filter: blur(10px) brightness(70%); */
}

.page-link {
	display: block;
	text-align: center;
	text-decoration: none;
	color: var(--clr-schwarz);
}

.page-item:hover .page-link, .active.page-item .page-link {
	color: var(--clr-schwarz);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

.icon-angle-double-left::before {
	content: '«';
}

.icon-angle-left::before {
	content: '‹';
}

.icon-angle-right::before {
	content: '›';
}

.icon-angle-double-right::before {
	content: '»';
}

/* endregion Pagination */

/* #endregion  footer */

@view-transition {
  navigation: auto;
}

/* header {
	view-transition-name: header;
} */

.logowrapper {
	view-transition-name: logowrapper;
}

::view-transition-group(root) {
	animation-duration: .5s;
	animation-timing-function: cubic-bezier(.7,0,.7,1);
} 

::view-transition-old(root) {
	animation-name: scale-out;
}

::view-transition-new(root) {
	animation-name: scale-in;
}

/* @keyframes scale-in {
	from {
		transform: scaleX(4);
		filter:blur(5px);
		transform-origin: center center;
	}
}

@keyframes scale-out {
	to {
		transform: scaleX(4);
		filter:blur(5px);
		transform-origin: center center;
	}
} */

@keyframes scale-in {
	from {
		translate: -50vw 0;
		transform: scaleX(0);
	}
}

@keyframes scale-out {
	to {
		translate: 50vw 0;
		transform: scaleX(0);
	}
}

/* .introwrapper .introimg {
  view-transition-name: introimg;
}

/* Entry transition */
/* ::view-transition-new(introimg) .introimg {
  scale: 5;
} */

/* Exit transition */
/* ::view-transition-old(introimg) .introimg {
  scale: 1;
} */ 


/* #region Popup Video Erweiterung */

/* ========================================
   Startvideo / Play-Cursor
======================================== */

.video-popup-trigger {
    cursor: none;
}

.video-play-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    border-radius: 110px;
    background: white;
    color: black;
    display: grid;
    place-items: center;
    font-size: 1rem;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .2s;
	@media ( width <= 1194px) {
		width: 55px;
		height: 55px;
		border-radius: 55px;
		font-size: .5rem;
	}
}

.video-play-cursor.is-visible {
    opacity: 1;
}

@media (hover: none) {

    .video-popup-trigger {
        position: relative;
        cursor: pointer;
    }

.video-play-cursor {
    position: absolute;
    display: grid;
    opacity: 1;
    transform: none;
    pointer-events: none;
    inset: 0;
    margin: auto;
}

}


/* ========================================
   Video Dialog
======================================== */

.video-dialog {
    position: fixed;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: #000;
    color: white;
    overflow: hidden;
}

.video-dialog[open] {
    display: grid;
    place-items: center;
}

.video-dialog::backdrop {
    background: black;
}

.video-dialog-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.video-dialog video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ========================================
   Schließen
======================================== */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.video-dialog-close {
	position: absolute;
	top: var(--padder);
	right: var(--padder);
	z-index: 10;
	width: 70px;
	height: 70px;
	border: 0px solid var(--clr-weiss);
	border-radius: 70px;
	background: var(--clr-weiss);
	color: var(--clr-schwarz);
	font-size: 25px;
	font-weight: normal;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
	font-family: amatik-icons;
	text-transform: uppercase;
	line-height: 1;
	mix-blend-mode: difference;
	@media ( width <= 1194px ) {
        top: 15px;
        left: 30px;
        width: 50px;
        height: 50px;
		border-radius: 50px;
        font-size: 15px;
	}

}

.video-dialog-close:focus, .video-dialog-close:focus-within {
	outline: 0;
}


/* ========================================
   Playersteuerung
======================================== */

.video-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, .8)
    );
    transition: opacity .3s;
}

.video-controls button {
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    font: inherit;
}

.video-progress {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    accent-color: white;
}

.video-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/* ========================================
   Inaktivität
======================================== */

.video-dialog.is-idle {
    cursor: none;
}

.video-dialog.is-idle .video-controls {
    opacity: 0;
    pointer-events: none;
}

/* Close bleibt immer bedienbar */

.video-dialog.is-idle .video-dialog-close {
    cursor: pointer;
}


/* ========================================
   Mobil
======================================== */

@media (max-width: 810px) {
    .video-controls {
        padding: 20px 15px;
        gap: 12px;
    }

    .video-time {
        font-size: .75rem;
    }
}

/* #endregion Popup Video Erweiterung */

@media (prefers-color-scheme: dark) {

	body {
		background-color: var(--clr-schwarz);
		color: var(--clr-weiss);
	}

	.white-bg {
		background-color: var(--clr-schwarz);
		color: var(--clr-weiss);
	}

	.hamburger-menu {
		background-color: hsl(0, 0%, 50%, 0.5);
		background-color: hsl(0, 0%, 100%, 0.5);
		color: var(--clr-schwarz);
	}

	.hamburger-menu:hover {
		background-color: hsl(0, 0%, 100%, 0.5);
		background-color: hsl(0, 0%, 50%, 0.5);
		backdrop-filter: blur(10px) brightness(50%);
		color: var(--clr-weiss);
	}

	.burger-back {
    background-color: var(--clr-weiss);
    color: var(--clr-weiss);
	}

	.burger-cross {
    background: var(--clr-weiss);
	}

	.cross-horizontal, .cross-vertical {
    background: var(--clr-schwarz);
	}

	.startseite .container.full.panorama.white-bg.first .top {
		filter: invert(100%);
	}

	.btn, .btn.inv:hover {
		--clr-btn-bg: var(--clr-weiss);
		color: var(--clr-schwarz);
		background-color: var(--clr-weiss);
	}

	.btn.inv, .btn.inv:hover, .container.full.tablecontent .btn.inv, .container.full.tablecontent .btn.inv:hover  {
		color: var(--clr-weiss);
		background-color: var(--clr-schwarz);
		border: 8px solid var(--clr-schwarz);
		cursor: pointer;
	}

	.btn span {
		color: var(--clr-schwarz);
		background-color: var(--clr-weiss);
	}

	.call2action .btn:hover span {
		color: var(--clr-schwarz);
	}

	.btn .pfeilschaft, .btn .pfeilspitze {
		background-color: var(--clr-schwarz);
		filter: invert(100%);
	}

	.pluszeichen line {
      stroke: var(--clr-weiss);
    }

	.btn.inv span {
	background-color: var(--clr-schwarz) !important;
	color: var(--clr-weiss) !important;
}

	.btn.inv .link {
	background-color: var(--clr-schwarz);
	color: var(--clr-weiss);
}

.btn.inv .pfeilschaft, .btn.inv .pfeilspitze {
	filter: invert(0%);
	background-color: var(--clr-schwarz) !important;
}

	.pluszeichen .shaft, .pluszeichen .left-arm, .pluszeichen .right-arm {
	background-color: var(--clr-weiss);
}

.swiper-pagination-bullet {
	background: var(--clr-weiss);
}

.swiper-slide .introwrapper h3, .swiper-slide .introwrapper p, a, .textwrapper {
	color: var(--clr-weiss);
}

.container.full.tablecontent, .container.full.tablecontent * {
	background-color: var(--clr-weiss);
	color: var(--clr-schwarz);
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal.swiper-pagination-bullets-dynamic {
	background: transparent;
}

.introimage .btn {
	color: var(--clr-weiss);
}

}

@media screen and (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  @view-transition {
  navigation: none;
}

@keyframes adjust-image {
	0% {
		transform: scaleY(1);
    	height: 100dvh;
	}
	50% {
		transform: scaleY(1);
    	height: 100dvh;
	}	
	100% {
		transform: scaleY(1);
    	height: 100dvh;
	}
}

@keyframes adjust-image-start {
	0% {
		height: 50dvh; margin-bottom: 0;
	}
	80% {
		height: 50dvh; margin-bottom: -0;
	}	
	100% {
		height: 50dvh; margin-bottom: -0;
	}
}

@keyframes adjust-video-start {
	0% {
		height: 100dvh; margin-top: 10dvh;
	}
	100% {
		height: 100dvh; margin-top: 10dvh;
	}
}

.container.full.animation-dummyblock {
    margin-top: 0;
}

}