/* =========================================================
   SMOOTH SCROLLING
   ========================================================= */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 8rem;
}


@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 10000;
	isolation: isolate;

	width: 100%;

	background: rgba(255, 255, 255, 0.78);

	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

	transition:
		background-color 0.35s ease,
		box-shadow 0.35s ease,
		backdrop-filter 0.35s ease;
}


.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.86);

	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
}


.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 2rem;

	width: 100%;

	padding: 1rem 2rem;

	box-sizing: border-box;

	transition:
		padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


.site-header.is-scrolled .site-header-inner {
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}


/* =========================================================
   LOGO
   ========================================================= */

.site-logo {
	display: block;
	flex: 0 0 auto;
}


.site-logo img {
	display: block;

	width: auto;
	height: 70px;
	max-width: 100%;

	transition:
		height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


.site-header.is-scrolled .site-logo img {
	height: 54px;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

@media (min-width: 901px) {

	.site-header,
	.site-header-inner,
	.main-navigation {
		overflow: visible;
	}


	.main-navigation {
		flex: 1 1 auto;
	}


	.main-navigation-list {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		gap: 1rem;

		margin: 0;
		padding: 0;

		list-style: none;
	}


	.main-navigation-item {
		position: relative;

		margin: 0;
		padding: 0;

		list-style: none;
	}


	.main-navigation-item::before {
		display: none;
	}


	.main-navigation-item > a {
		display: flex;
		align-items: center;

		gap: 0.4rem;

		padding: 0.6rem 0.9rem;

		color: var(--font-color);
		text-decoration: none;

		border-radius: var(--button-border-radius);

		white-space: nowrap;
	}


	.main-navigation-item > a:hover {
		background-color: var(--logo-color-1-dark);
		color: #ffffff;
	}


	.main-navigation-item.active > a,
	.main-navigation-item.current > a {
		background-color: var(--logo-color-1-light);
	}


	.main-navigation-submenu {
		position: absolute;
		z-index: 200;

		display: block;

		width: max-content;
		min-width: 260px;

		margin: 0;
		padding: 0.5rem;

		background-color: #ffffff;

		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

		list-style: none;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transition:
			opacity 0.18s ease,
			visibility 0.18s ease;
	}


	.main-navigation-list
	> .main-navigation-item
	> .main-navigation-submenu {
		top: 100%;
		left: 0;
	}


	.main-navigation-submenu
	.main-navigation-submenu {
		top: 0;
		left: 100%;
	}


	.main-navigation-item:hover > .main-navigation-submenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}


	.main-navigation-submenu li {
		margin: 0;
		padding: 0;
	}


	.main-navigation-submenu li::before {
		display: none;
	}


	.main-navigation-submenu a {
		display: flex;
		align-items: center;
		justify-content: space-between;

		gap: 1rem;

		padding: 0.6rem 0.8rem;

		color: var(--font-color);
		text-decoration: none;

		white-space: nowrap;
	}


	.main-navigation-arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 0.7rem;
		height: 0.7rem;

		flex: 0 0 0.7rem;

		line-height: 0;
	}


	.main-navigation-arrow svg {
		display: block;

		width: 100%;
		height: 100%;
	}


	.main-navigation-list
	> .has-children
	> a
	.main-navigation-arrow {
		transform: rotate(90deg);
	}
}


/* =========================================================
   CONTENT
   ========================================================= */

:root {
	--content-block-padding-y: 4rem;
}


.page-content {
	width: var(--content-width);
	max-width: calc(100% - 4rem);

	margin-inline: auto;
}


/*
 * Einheitlicher Abstand aller normalen
 * TYPO3 Content-Elemente.
 */

.page-content .frame {
	margin-top: 0;
	margin-bottom: 0;

	padding-top: var(--content-block-padding-y);
	padding-bottom: var(--content-block-padding-y);

	box-sizing: border-box;
}


/* =========================================================
   CONTENT / BILDER
   ========================================================= */

main .image-embed-item {
	border-radius: var(--image-border-radius);

	overflow: hidden;
}


main .image-caption {
	margin-top: 0.3rem;

	font-size: 0.65rem;
	line-height: 1.2;
}


/* =========================================================
   TEXT + BILD
   ========================================================= */


/* =========================================================
   GEMEINSAME BILD-INNENSTRUKTUR
   ========================================================= */

.ce-textpic .ce-gallery .ce-row,
.ce-textpic .ce-gallery .ce-column,
.ce-textpic .ce-gallery figure,
.ce-textpic .ce-gallery .image,
.ce-textpic .ce-gallery .ai-generated-media,
.ce-textpic .ce-gallery .ai-generated-media--standard,
.ce-textpic .ce-gallery figure > a,
.ce-textpic .ce-gallery picture {
	display: block;

	width: 100%;
	max-width: 100%;

	margin: 0;
}


/* =========================================================
   BILDER
   ========================================================= */

.ce-textpic .ce-gallery img,
.ce-textpic .ce-gallery .image-embed-item {
	display: block;

	width: 100%;
	height: auto;

	max-width: 100%;
}


/* =========================================================
   MEHRERE BILDER UNTEREINANDER
   ========================================================= */

.ce-textpic .ce-gallery .ce-column + .ce-column {
	margin-top: 1.25rem;
}


.ce-textpic .ce-gallery .ce-row + .ce-row {
	margin-top: 1.25rem;
}


/* =========================================================
   BILD NEBEN TEXT – OHNE UMFLIESSEN
   ========================================================= */

.ce-textpic.ce-intext.ce-nowrap {
	display: flex;

	align-items: center;

	gap: 3rem;
}


.ce-textpic.ce-left.ce-intext.ce-nowrap {
	flex-direction: row;
}


.ce-textpic.ce-right.ce-intext.ce-nowrap {
	flex-direction: row-reverse;
}


.ce-textpic.ce-intext.ce-nowrap .ce-gallery {
	float: none;

	width: 40%;
	max-width: 40%;

	margin: 0;

	flex: 0 0 40%;
}

/*
 * Medien innerhalb ihrer Spalte zentrieren.
 * Besonders wichtig bei schmalen Hochkant-Videos.
 */

.ce-textpic.ce-intext.ce-nowrap:has(video) .ce-gallery {
	display: flex;
	flex-direction: column;
	align-items: center;
}


.ce-textpic.ce-intext.ce-nowrap:has(video) .ce-gallery .ce-row,
.ce-textpic.ce-intext.ce-nowrap:has(video) .ce-gallery .ce-column,
.ce-textpic.ce-intext.ce-nowrap:has(video) .ce-gallery figure {
	margin-left: auto;
	margin-right: auto;
}


.ce-textpic.ce-intext.ce-nowrap .ce-bodytext {
	flex: 1 1 auto;

	min-width: 0;
}


/* =========================================================
   BILD IM TEXT – MIT UMFLIESSEN
   ========================================================= */

.ce-textpic.ce-intext:not(.ce-nowrap)::after {
	content: "";

	display: table;

	clear: both;
}


.ce-textpic.ce-intext:not(.ce-nowrap) .ce-gallery {
	width: 40%;
	max-width: 40%;
}


.ce-textpic.ce-left.ce-intext:not(.ce-nowrap) .ce-gallery {
	float: left;

	margin:
		0
		3rem
		1.5rem
		0;
}


.ce-textpic.ce-right.ce-intext:not(.ce-nowrap) .ce-gallery {
	float: right;

	margin:
		0
		0
		1.5rem
		3rem;
}


/* =========================================================
   BILD OBERHALB / UNTERHALB
   ========================================================= */

.ce-textpic.ce-above .ce-gallery,
.ce-textpic.ce-below .ce-gallery {
	float: none;

	width: 100%;
	max-width: 100%;
}


.ce-textpic.ce-left.ce-above .ce-gallery,
.ce-textpic.ce-left.ce-below .ce-gallery {
	margin-left: 0;
	margin-right: auto;
}


.ce-textpic.ce-center.ce-above .ce-gallery,
.ce-textpic.ce-center.ce-below .ce-gallery {
	margin-left: auto;
	margin-right: auto;
}


.ce-textpic.ce-right.ce-above .ce-gallery,
.ce-textpic.ce-right.ce-below .ce-gallery {
	margin-left: auto;
	margin-right: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

	.ce-textpic.ce-intext.ce-nowrap,
	.ce-textpic.ce-left.ce-intext.ce-nowrap,
	.ce-textpic.ce-right.ce-intext.ce-nowrap {
		flex-direction: column;

		align-items: stretch;

		gap: 1.5rem;
	}


	.ce-textpic.ce-intext.ce-nowrap .ce-gallery,
	.ce-textpic.ce-intext:not(.ce-nowrap) .ce-gallery,
	.ce-textpic.ce-above .ce-gallery,
	.ce-textpic.ce-below .ce-gallery {
		float: none;

		width: 100%;
		max-width: 100%;

		margin:
			0
			0
			1.5rem;

		flex: 0 0 100%;
	}

}


/* =========================================================
   CONTENT BACKGROUND COLORS / VERLÄUFE
   ========================================================= */

.frame-bg-logo-color-1,
.frame-bg-logo-color-1-light,
.frame-bg-logo-color-1-dark,
.frame-bg-logo-color-2,
.frame-bg-accent-color-1,
.frame-bg-accent-color-2,
.frame-bg-neutral-color-light,
.frame-bg-neutral-color-dark,
.frame-bg-white,
.frame-bg-gradient-focus-left-top,
.frame-bg-gradient-focus-right-bottom,
.frame-bg-gradient-diagonal-soft,
.frame-bg-gradient-diagonal-reverse,
.frame-bg-gradient-light-center,
.frame-bg-gradient-light-band,
.frame-bg-gradient-accent-soft,
.frame-bg-gradient-logo-light-accent-1,
.frame-bg-gradient-logo-accent-1,
.frame-bg-gradient-logo-dark-accent-1,
.frame-bg-gradient-logo-light-accent-2,
.frame-bg-gradient-logo-accent-2,
.frame-bg-gradient-logo-dark-accent-2,
.frame-bg-gradient-brand-accent-flow,
.frame-bg-gradient-logo2-white-corner {
	position: relative;

	background: transparent;

	color: var(--frame-text);

	isolation: isolate;
}


/* Farben */

.frame-bg-logo-color-1 {
	--frame-background: var(--logo-color-1);
	--frame-text: var(--font-color-light, #ffffff);
}


.frame-bg-logo-color-1-light {
	--frame-background: var(--logo-color-1-light);
	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-logo-color-1-dark {
	--frame-background: var(--logo-color-1-dark);
	--frame-text: var(--font-color-light, #ffffff);
}


.frame-bg-logo-color-2 {
	--frame-background: var(--logo-color-2);
	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-accent-color-1 {
	--frame-background: var(--accent-color-1);
	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-accent-color-2 {
	--frame-background: var(--accent-color-2);
	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-neutral-color-light {
	--frame-background: var(--neutral-color-light);
	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-neutral-color-dark {
	--frame-background: var(--neutral-color-dark);
	--frame-text: var(--font-color-light, #ffffff);
}


.frame-bg-white {
	--frame-background: #ffffff;
	--frame-text: var(--font-color-dark, #000000);
}


/* Bestehende Verläufe – ausschließlich aus Logo-Farbe 1 */

.frame-bg-gradient-focus-left-top {
	--frame-background: radial-gradient(
		circle at 18% 20%,
		var(--logo-color-1-light) 0%,
		var(--logo-color-1) 42%,
		var(--logo-color-1-dark) 100%
	);
	--frame-text: var(--font-color-light, #ffffff);
}


.frame-bg-gradient-focus-right-bottom {
	--frame-background: radial-gradient(
		ellipse 110% 95% at 86% 78%,
		var(--logo-color-1-light) 0%,
		var(--logo-color-1) 38%,
		var(--logo-color-1-dark) 100%
	);
	--frame-text: var(--font-color-light, #ffffff);
}


.frame-bg-gradient-diagonal-soft {
	--frame-background: linear-gradient(
		135deg,
		var(--logo-color-1-light) 0%,
		var(--logo-color-1) 46%,
		var(--logo-color-1-dark) 100%
	);
	--frame-text: var(--font-color-light, #ffffff);
}


.frame-bg-gradient-diagonal-reverse {
	--frame-background: linear-gradient(
		315deg,
		var(--logo-color-1-dark) 0%,
		var(--logo-color-1) 48%,
		var(--logo-color-1-light) 100%
	);
	--frame-text: var(--font-color-light, #ffffff);
}


.frame-bg-gradient-light-center {
	--frame-background: radial-gradient(
		ellipse 72% 120% at 58% 44%,
		var(--logo-color-1-light) 0%,
		var(--logo-color-1) 34%,
		var(--logo-color-1-dark) 88%
	);
	--frame-text: var(--font-color-light, #ffffff);
}


.frame-bg-gradient-light-band {
	--frame-background: linear-gradient(
		110deg,
		var(--logo-color-1-dark) 0%,
		var(--logo-color-1) 32%,
		var(--logo-color-1-light) 50%,
		var(--logo-color-1) 68%,
		var(--logo-color-1-dark) 100%
	);
	--frame-text: var(--font-color-light, #ffffff);
}


/* =========================================================
   ACCENT-VERLÄUFE
   Accentfarben dominieren oben links,
   Logo-Farbe nur als kleiner Akzent unten rechts
   ========================================================= */

.frame-bg-gradient-accent-soft {
	--frame-background: linear-gradient(
		135deg,
		var(--accent-color-1) 0%,
		var(--accent-color-1) 64%,
		var(--accent-color-2) 100%
	);

	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-gradient-logo-light-accent-1 {
	--frame-background: linear-gradient(
		135deg,
		var(--accent-color-1) 0%,
		var(--accent-color-1) 64%,
		var(--logo-color-1-light) 100%
	);

	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-gradient-logo-accent-1 {
	--frame-background: linear-gradient(
		135deg,
		var(--accent-color-1) 0%,
		var(--accent-color-1) 64%,
		var(--logo-color-1) 100%
	);

	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-gradient-logo-dark-accent-1 {
	--frame-background: linear-gradient(
		135deg,
		var(--accent-color-1) 0%,
		var(--accent-color-1) 64%,
		var(--logo-color-1-dark) 100%
	);

	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-gradient-logo-light-accent-2 {
	--frame-background: linear-gradient(
		135deg,
		var(--accent-color-2) 0%,
		var(--accent-color-2) 64%,
		var(--logo-color-1-light) 100%
	);

	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-gradient-logo-accent-2 {
	--frame-background: linear-gradient(
		135deg,
		var(--accent-color-2) 0%,
		var(--accent-color-2) 64%,
		var(--logo-color-1) 100%
	);

	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-gradient-logo-dark-accent-2 {
	--frame-background: linear-gradient(
		135deg,
		var(--accent-color-2) 0%,
		var(--accent-color-2) 64%,
		var(--logo-color-1-dark) 100%
	);

	--frame-text: var(--font-color-dark, #000000);
}


.frame-bg-gradient-brand-accent-flow {
	--frame-background: linear-gradient(
		135deg,
		var(--accent-color-2) 0%,
		var(--accent-color-1) 34%,
		var(--accent-color-1) 64%,
		var(--logo-color-1-light) 78%,
		var(--logo-color-1) 90%,
		var(--logo-color-1-dark) 100%
	);

	--frame-text: var(--font-color-dark, #000000);
}

/* =========================================================
   VERLAUF: LOGO-FARBE 2 / WEISS UNTEN RECHTS
   ========================================================= */

.frame-bg-gradient-logo2-white-corner {
	--frame-background: radial-gradient(
		circle at 100% 100%,
		#ffffff 0%,
		#ffffff 10%,
		var(--logo-color-2) 40%,
		var(--logo-color-2) 100%
	);

	--frame-text: var(--font-color-dark, #000000);
}

/* Hintergrund bis zum Browserrand */

.frame-bg-logo-color-1::before,
.frame-bg-logo-color-1-light::before,
.frame-bg-logo-color-1-dark::before,
.frame-bg-logo-color-2::before,
.frame-bg-accent-color-1::before,
.frame-bg-accent-color-2::before,
.frame-bg-neutral-color-light::before,
.frame-bg-neutral-color-dark::before,
.frame-bg-white::before,
.frame-bg-gradient-focus-left-top::before,
.frame-bg-gradient-focus-right-bottom::before,
.frame-bg-gradient-diagonal-soft::before,
.frame-bg-gradient-diagonal-reverse::before,
.frame-bg-gradient-light-center::before,
.frame-bg-gradient-light-band::before,
.frame-bg-gradient-accent-soft::before,
.frame-bg-gradient-logo-light-accent-1::before,
.frame-bg-gradient-logo-accent-1::before,
.frame-bg-gradient-logo-dark-accent-1::before,
.frame-bg-gradient-logo-light-accent-2::before,
.frame-bg-gradient-logo-accent-2::before,
.frame-bg-gradient-logo-dark-accent-2::before,
.frame-bg-gradient-brand-accent-flow::before,
.frame-bg-gradient-logo2-white-corner::before {
	content: "";

	position: absolute;

	top: 0;
	bottom: 0;
	left: 50%;

	width: 100vw;

	transform: translateX(-50%);

	background: var(--frame-background);

	z-index: -1;

	pointer-events: none;
}


/* Automatische Schriftfarbe */

.frame-bg-logo-color-1 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-logo-color-1-light :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-logo-color-1-dark :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-logo-color-2 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-accent-color-1 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-accent-color-2 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-neutral-color-light :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-neutral-color-dark :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-white :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-focus-left-top :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-focus-right-bottom :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-diagonal-soft :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-diagonal-reverse :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-light-center :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-light-band :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-accent-soft :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-logo-light-accent-1 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-logo-accent-1 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-logo-dark-accent-1 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-logo-light-accent-2 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-logo-accent-2 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-logo-dark-accent-2 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-brand-accent-flow :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.frame-bg-gradient-logo2-white-corner :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small) {
	color: inherit;
}


/* =========================================================
   MANUELLE SCHRIFTFARBEN
   ========================================================= */

.frame.frame-layout-101 {
	--frame-text: var(--font-color-light, #ffffff);

	color: var(--frame-text);
}


.frame.frame-layout-102 {
	--frame-text: var(--font-color-dark, #000000);

	color: var(--frame-text);
}


.frame.frame-layout-103 {
	--frame-text: var(--logo-color-1);

	color: var(--frame-text);
}


.frame.frame-layout-104 {
	--frame-text: var(--logo-color-1-light);

	color: var(--frame-text);
}


.frame.frame-layout-105 {
	--frame-text: var(--logo-color-1-dark);

	color: var(--frame-text);
}


.frame.frame-layout-106 {
	--frame-text: var(--logo-color-2);

	color: var(--frame-text);
}


.frame.frame-layout-107 {
	--frame-text: var(--neutral-color-light);

	color: var(--frame-text);
}


.frame.frame-layout-108 {
	--frame-text: var(--neutral-color-dark);

	color: var(--frame-text);
}


.frame.frame-layout-109 {
	--frame-text: var(--accent-color-1);

	color: var(--frame-text);
}


.frame.frame-layout-110 {
	--frame-text: var(--accent-color-2);

	color: var(--frame-text);
}


.frame.frame-layout-101 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-102 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-103 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-104 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-105 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-106 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-107 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-108 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-109 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-110 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td) {
	color: inherit;
}


/* =========================================================
   CONTENT BACKGROUND IMAGE
   ========================================================= */

.page-content .frame.has-content-background-image {
	position: relative;

	isolation: isolate;
}


.page-content .frame.has-content-background-image::before,
.page-content .frame:has(.content-background-image)::before {
	display: none;
}


.page-content .frame.has-content-background-image,
.page-content .frame:has(.content-background-image) {
	color: var(--font-color-light, #ffffff);
}


.page-content .frame.has-content-background-image :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small),
.page-content .frame:has(.content-background-image) :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small) {
	color: inherit;
}


.content-background-image {
	position: absolute;

	top: 0;
	bottom: 0;
	left: 50%;

	width: 100vw;

	transform: translateX(-50%);

	overflow: hidden;

	z-index: -1;

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


.content-background-image::after {
	content: "";

	position: absolute;
	inset: 0;

	background: rgba(0, 0, 0, 0.20);

	pointer-events: none;
}


.content-background-image img {
	display: block;

	width: 100%;
	height: 100%;

	max-width: none;

	object-fit: cover;

	filter: blur(5px);

	transform: scale(1.03);
}


.process-section,
.icon-lists {
	position: relative;

	isolation: isolate;
}


.process-section:has(.content-background-image),
.icon-lists:has(.content-background-image) {
	background: transparent;
}


/* =========================================================
   MOTION / ANIMATIONEN
   ========================================================= */

/*
 * Der Frame selbst bleibt immer stehen.
 *
 * Dadurch bleiben:
 * - Hintergrundfarbe
 * - ::before-Hintergrund
 * - content-background-image
 *
 * sofort sichtbar.
 *
 * Nur der eigentliche Inhalt wird animiert.
 */





.has-motion .motion-heading.is-visible
.motion-heading-char {
	animation:
		motion-heading-type-in
		0.24s
		cubic-bezier(0.22, 1, 0.36, 1)
		forwards;

	animation-delay:
		calc(
			var(--char-index, 0) * 32ms
		);
}


@keyframes motion-heading-type-in {

	0% {
		opacity: 0;

		transform:
			translateY(0.18em);

		filter:
			blur(2px);
	}


	100% {
		opacity: 1;

		transform:
			translateY(0);

		filter:
			blur(0);
	}

}


@media (prefers-reduced-motion: reduce) {

	.has-motion .motion-heading-char {
		opacity: 1;

		transform: none;

		filter: none;

		animation: none;

		will-change: auto;
	}

}


/* =========================
   PNG / EINMALIGE DREHUNG
   ========================= */

.has-motion .motion-png-spin {
	rotate: 0deg;

	transform-origin: center;
}


.has-motion .motion-png-spin.is-visible {
	animation:
		motion-png-first-spin
		0.65s
		cubic-bezier(0.22, 1, 0.36, 1)
		1
		both;
}


@keyframes motion-png-first-spin {

	from {
		rotate: 0deg;
	}

	to {
		rotate: 360deg;
	}

}


/* =========================
   CONTENT-BLÖCKE
   ========================= */

.has-motion .motion-reveal
> :not(.content-background-image)
  :not(.ai-generated-overlay--background)
  :not(.content-cta)
  :not(.image-icon-card)
  :not(.image-icon-card__image)
  :not(.image-icon-card__icon)
  :not(.image-icon-card__titlebar) {
	opacity: 0;

	transform: translateY(1.75rem);

	transition:
		opacity 0.65s ease,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);

	will-change: opacity, transform;
}


.has-motion .motion-reveal.is-visible
> :not(.content-background-image)
  :not(.ai-generated-overlay--background)
  :not(.content-cta)
  :not(.image-icon-card)
  :not(.image-icon-card__image)
  :not(.image-icon-card__icon)
  :not(.image-icon-card__titlebar) {
	opacity: 1;

	transform: translateY(0);
}


/* =========================
   BILDER
   ========================= */

.has-motion .motion-image {
	opacity: 0;

	transform: scale(1.025);

	transition:
		opacity 0.75s ease 0.08s,
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;

	will-change: opacity, transform;
}


.has-motion .motion-image.is-visible {
	opacity: 1;

	transform: scale(1);
}


/* =========================
   GESTAFFELTE ELEMENTE
   ========================= */

.has-motion .motion-stagger {
	opacity: 0;

	transform: translateY(1.2rem);

	transition:
		opacity 0.55s ease var(--motion-delay, 0ms),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay, 0ms);

	will-change: opacity, transform;
}


.has-motion .motion-stagger.is-visible {
	opacity: 1;

	transform: translateY(0);
}


/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce) {

	.has-motion .motion-reveal
	> :not(.content-background-image)
	  :not(.ai-generated-overlay--background),
	.has-motion .motion-image,
	.has-motion .motion-stagger,
	.has-motion .motion-png-spin {
		opacity: 1;

		transform: none;

		transition: none;

		will-change: auto;
	}


	.has-motion .motion-heading {
		background: none;

		color: var(--heading-reveal-color, inherit) !important;
		-webkit-text-fill-color: var(--heading-reveal-color, currentColor);
	}


	.has-motion .motion-png-spin.is-visible {
		animation: none;

		rotate: 0deg;
	}

}


/* =========================================================
   STICKY CTA
   ========================================================= */

.sticky-cta {
	position: fixed;

	right: 1.5rem;
	bottom: 1.5rem;

	z-index: 1000;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 0.45rem;

	padding: 0.55rem 0.9rem;

	background-color: var(--logo-color-1-dark);
	color: var(--bg-color);

	border: 0;
	border-radius: var(--button-border-radius);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);

	font: inherit;
	font-size: 0.9rem;
	line-height: 1;

	text-decoration: none;
	white-space: nowrap;

	cursor: pointer;

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}


.sticky-cta:hover,
.sticky-cta:focus-visible {
	color: var(--bg-color);

	text-decoration: none;

	transform: translateY(-2px);

	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}


/* =========================
   ICON
   ========================= */

.sticky-cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 1.1rem;
	height: 1.1rem;

	flex: 0 0 1.1rem;
}


.sticky-cta-icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}


.sticky-cta-text {
	color: inherit;
}


/* =========================================================
   STICKY CTA / KONTAKT
   ========================================================= */

.sticky-cta-contact {
	--sticky-cta-bottom: 1.5rem;

	position: fixed;

	right: 1.5rem;
	bottom: var(--sticky-cta-bottom);

	z-index: 1000;

	width: max-content;
	height: auto;

	margin: 0;
	padding: 0;

	background: transparent;
}


.sticky-cta-contact > .sticky-cta {
	position: relative;

	right: auto;
	bottom: auto;

	margin: 0;

	list-style: none;
}


.sticky-cta-contact > summary::-webkit-details-marker {
	display: none;
}


.sticky-cta-contact > summary::marker {
	content: "";
}


/* =========================
   KONTAKTMENÜ
   ========================= */

.sticky-cta-contact-menu {
	position: absolute;

	right: 0;
	bottom: calc(100% + 0.6rem);

	display: flex;
	flex-direction: column;

	min-width: 250px;
	max-height: 0;

	overflow: hidden;

	background-color: var(--logo-color-1-dark);

	border-radius: var(--border-radius);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform:
		translateY(0.6rem)
		scale(0.98);

	transform-origin:
		right bottom;

	transition:
		max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.25s ease,
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.45s;
}


.sticky-cta-contact[open]
.sticky-cta-contact-menu {
	max-height: 12rem;

	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform:
		translateY(0)
		scale(1);

	transition:
		max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.25s ease,
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s;
}


/* =========================
   AUFMERKSAMKEITS-PULS
   ========================= */

.sticky-cta-contact.is-attention {
	transform-origin:
		right bottom;

	animation:
		sticky-cta-attention
		0.8s
		cubic-bezier(0.22, 1, 0.36, 1);
}


@keyframes sticky-cta-attention {

	0% {
		transform:
			scale(1);
	}


	45% {
		transform:
			scale(1.07);
	}


	100% {
		transform:
			scale(1);
	}

}


@media (prefers-reduced-motion: reduce) {

	.sticky-cta-contact-menu,
	.sticky-cta-contact[open]
	.sticky-cta-contact-menu {
		transition: none;
	}


	.sticky-cta-contact.is-attention {
		animation: none;
	}

}


/* =========================
   TELEFON / E-MAIL
   ========================= */

.sticky-cta-contact-link {
	display: flex;
	align-items: center;

	gap: 0.75rem;

	padding: 0.75rem 1rem;

	color: var(--bg-color);

	text-decoration: none;

	white-space: nowrap;

	transition: background-color 0.2s ease;
}


.sticky-cta-contact-link + .sticky-cta-contact-link {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}


.sticky-cta-contact-link:hover,
.sticky-cta-contact-link:focus-visible {
	color: var(--bg-color);

	background-color: rgba(255, 255, 255, 0.1);

	text-decoration: none;
}


/* =========================
   KONTAKT-ICONS
   ========================= */

.sticky-cta-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 1.1rem;
	height: 1.1rem;

	flex: 0 0 1.1rem;
}


.sticky-cta-contact-icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

	.sticky-cta {
		right: 1rem;
		bottom: 1rem;

		padding: 0.5rem 0.75rem;

		font-size: 0.85rem;
	}


	.sticky-cta-contact {
		--sticky-cta-bottom: 1rem;

		right: 1rem;
	}


	.sticky-cta-contact-menu {
		min-width: 220px;
	}


	.sticky-cta-icon,
	.sticky-cta-contact-icon {
		width: 1rem;
		height: 1rem;

		flex-basis: 1rem;
	}
}



/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
	padding-block: 2rem;

	background:
		radial-gradient(
			circle at 0% 0%,
			var(--logo-color-1) 0%,
			var(--logo-color-1) 8%,
			transparent 32%
		),
		radial-gradient(
			circle at 100% 100%,
			var(--logo-color-1) 0%,
			var(--logo-color-1) 8%,
			var(--logo-color-1-dark) 32%,
			var(--logo-color-1-dark) 100%
		);

	color: var(--font-color-light, #ffffff);

	font-size: 0.78rem;
	line-height: 1.4;
}


.site-footer :is(
	h1, h2, h3, h4, h5, h6,
	p, li, a, strong, em, span, small, figcaption
) {
	color: inherit;
}


.site-footer p,
.site-footer li,
.site-footer a,
.site-footer span,
.site-footer strong,
.site-footer small {
	font-size: 0.78rem;
	line-height: 1.4;
}


.site-footer .frame {
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;

	background: transparent;
	color: inherit;
}


.site-footer .frame::before {
	display: none;
}


.site-footer-columns,
.site-footer-meta {
	width: var(--content-width);
	max-width: calc(100% - 4rem);

	margin-inline: auto;
}


.site-footer-columns {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 2rem;
}


.site-footer-column {
	min-width: 0;
}


.site-footer-column img {
	display: block;

	width: auto;
	height: auto;

	max-width: 140px;
	max-height: 70px;

	object-fit: contain;
}


/* =========================================================
   FOOTER / KONTAKTFORMULAR
   ========================================================= */

.site-footer form {
	width: 100%;

	color:
		var(--font-color-light, #ffffff);
}


/* =========================
   NAME + E-MAIL
   ========================= */

.site-footer form .row {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	column-gap: 0.6rem;
	row-gap: 0;

	width: 100%;

	margin:
		0
		0
		1.1rem;
}


.site-footer form .row > [class*="col-"] {
	width: 100%;
	max-width: 100%;

	min-width: 0;

	margin: 0;
	padding: 0;

	box-sizing: border-box;
}


.site-footer form .row .form-group {
	margin-bottom: 0;
}


/* =========================
   FORMULAR-FELDER
   ========================= */

.site-footer .form-group {
	width: 100%;

	margin-bottom: 1rem;
}


.site-footer .form-label {
	display: block;

	margin-bottom: 0.3rem;

	color:
		var(--font-color-light, #ffffff);

	font-size: 0.64rem;
	line-height: 1.2;

	white-space: nowrap;
}


.site-footer .form-control {
	display: block;

	width: 100%;

	padding:
		0.45rem
		0.5rem;

	box-sizing: border-box;

	background:
		rgba(255, 255, 255, 0.12);

	color:
		var(--font-color-light, #ffffff);

	border:
		1px solid
		rgba(255, 255, 255, 0.35);

	border-radius:
		var(--border-radius-small);

	font: inherit;
	font-size: 0.66rem;
	line-height: 1.25;

	outline: 0;

	transition:
		background-color var(--transition-time),
		border-color var(--transition-time);
}


.site-footer .form-control::placeholder {
	color:
		rgba(255, 255, 255, 0.65);
}


.site-footer .form-control:focus {
	background:
		rgba(255, 255, 255, 0.18);

	border-color:
		var(--font-color-light, #ffffff);
}


/* =========================
   NACHRICHT
   ========================= */

.site-footer textarea.form-control {
	min-height: 80px;

	resize: vertical;
}


/* =========================
   DATENSCHUTZ
   ========================= */

.site-footer .form-check-wrapping-label {
	display: flex;
	align-items: center;

	gap: 0.45rem;

	width: 100%;

	margin:
		0.4rem
		0
		0.4rem;

	padding:
		0.15rem
		0;

	box-sizing: border-box;
}


.site-footer .form-check-wrapping-label input[type="checkbox"] {
	flex: 0 0 auto;

	width: 0.85rem;
	height: 0.85rem;

	margin: 0;
}


.site-footer .form-check-wrapping-label label {
	margin: 0;

	color:
		var(--font-color-light, #ffffff);

	font-size: 0.64rem;
	line-height: 1.3;
}


/* =========================
   SENDEN-BUTTON
   ========================= */

.site-footer form button[type="submit"],
.site-footer form input[type="submit"],
.site-footer form .btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-top: 0.1rem;

	padding:
		0.55rem
		0.85rem;

	background:
		var(--logo-color-1-dark);

	color:
		var(--font-color-light, #ffffff);

	border: 0;

	border-radius:
		var(--button-border-radius);

	font: inherit;
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color var(--transition-time),
		transform var(--transition-time),
		box-shadow var(--transition-time);
}


.site-footer form button[type="submit"]:hover,
.site-footer form button[type="submit"]:focus-visible,
.site-footer form input[type="submit"]:hover,
.site-footer form input[type="submit"]:focus-visible,
.site-footer form .btn-primary:hover,
.site-footer form .btn-primary:focus-visible {
	background:
		var(--logo-color-1-light);

	color:
		var(--font-color-dark);

	transform:
		translateY(-2px);

	box-shadow:
		0 4px 16px
		rgba(0, 0, 0, 0.14);
}


/* =========================
   FEHLERMELDUNGEN
   ========================= */

.site-footer .invalid-feedback,
.site-footer .help-block,
.site-footer .form-error {
	margin-top: 0.25rem;

	color:
		var(--font-color-light, #ffffff);

	font-size: 0.62rem;
	line-height: 1.3;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

	.site-footer form .row {
		grid-template-columns:
			1fr;

		row-gap: 1rem;
	}


	.site-footer .form-label {
		white-space: normal;
	}

}

/* =========================================================
   FOOTER / FRONTEND-LOGIN
   ========================================================= */

.site-footer .frame-type-felogin_login {
	width: 100%;
}


.site-footer .frame-type-felogin_login h2,
.site-footer .frame-type-felogin_login h3 {
	margin:
		0
		0
		0.75rem;

	color:
		var(--font-color-light, #ffffff);

	font-size:
		1.15rem;

	line-height:
		1.2;

	font-weight:
		600;
}


.site-footer .frame-type-felogin_login p {
	margin:
		0
		0
		1rem;

	color:
		var(--font-color-light, #ffffff);

	font-size:
		0.78rem;

	line-height:
		1.45;
}


/* =========================
   FORMULAR
   ========================= */

.site-footer .frame-type-felogin_login form {
	width:
		100%;

	max-width:
		360px;

	margin:
		0;
}


.site-footer .frame-type-felogin_login fieldset {
	display:
		flex;

	flex-direction:
		column;

	gap:
		0.65rem;

	margin:
		0;

	padding:
		0;

	border:
		0;
}


/*
 * "Login" bzw. "Logout" im Fieldset ist redundant,
 * weil darüber bereits die Überschrift steht.
 */

.site-footer .frame-type-felogin_login legend {
	display:
		none;
}


/* =========================
   LABEL
   ========================= */

.site-footer .frame-type-felogin_login label {
	display:
		block;

	margin:
		0
		0
		0.25rem;

	color:
		var(--font-color-light, #ffffff);

	font-size:
		0.68rem;

	line-height:
		1.2;

	font-weight:
		500;
}


/* =========================
   EINGABEFELDER
   ========================= */

.site-footer .frame-type-felogin_login input[type="text"],
.site-footer .frame-type-felogin_login input[type="password"] {
	display:
		block;

	width:
		100%;

	height:
		2.4rem;

	padding:
		0.5rem
		0.65rem;

	box-sizing:
		border-box;

	background:
		rgba(255, 255, 255, 0.12);

	color:
		var(--font-color-light, #ffffff);

	border:
		1px solid
		rgba(255, 255, 255, 0.35);

	border-radius:
		var(--border-radius-small);

	font:
		inherit;

	font-size:
		0.72rem;

	outline:
		0;

	transition:
		background-color var(--transition-time),
		border-color var(--transition-time);
}


.site-footer .frame-type-felogin_login input[type="text"]:focus,
.site-footer .frame-type-felogin_login input[type="password"]:focus {
	background:
		rgba(255, 255, 255, 0.18);

	border-color:
		var(--font-color-light, #ffffff);
}


/* =========================
   BUTTON
   ========================= */

.site-footer .frame-type-felogin_login button,
.site-footer .frame-type-felogin_login input[type="submit"] {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		auto;

	margin-top:
		0.2rem;

	padding:
		0.6rem
		0.9rem;

	background:
		var(--logo-color-1-dark);

	color:
		var(--font-color-light, #ffffff);

	border:
		0;

	border-radius:
		var(--button-border-radius);

	font:
		inherit;

	font-size:
		0.7rem;

	font-weight:
		600;

	line-height:
		1;

	cursor:
		pointer;

	transition:
		background-color var(--transition-time),
		color var(--transition-time),
		transform var(--transition-time),
		box-shadow var(--transition-time);
}


.site-footer .frame-type-felogin_login button:hover,
.site-footer .frame-type-felogin_login button:focus-visible,
.site-footer .frame-type-felogin_login input[type="submit"]:hover,
.site-footer .frame-type-felogin_login input[type="submit"]:focus-visible {
	background:
		var(--logo-color-1-light);

	color:
		var(--font-color-dark);

	transform:
		translateY(-2px);

	box-shadow:
		0 4px 16px
		rgba(0, 0, 0, 0.14);
}


/* =========================
   ANGEMELDETER BENUTZER
   ========================= */

.site-footer .frame-type-felogin_login fieldset > div {
	width:
		100%;
}


.site-footer .frame-type-felogin_login fieldset p:last-of-type {
	margin-bottom:
		0.4rem;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

	.site-footer .frame-type-felogin_login form {
		max-width:
			100%;
	}

}


/* =========================================================
   FOOTER META
   ========================================================= */

.site-footer-meta {
	margin-top: 2rem;

	font-size: 0.7rem;
	line-height: 1.35;

	text-align: center;
}


/* Footer-Meta-Links nebeneinander mit Trennzeichen */

.site-footer-meta .footer-link-list ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	gap: 0;

	margin: 0;
	padding: 0;

	list-style: none;
}


.site-footer-meta .footer-link-list li {
	display: flex;
	align-items: center;

	margin: 0;
	padding: 0;

	position: static;
}


.site-footer-meta .footer-link-list li::before {
	content: none;

	display: none;
}


.site-footer-meta .footer-link-list li:not(:last-child)::after {
	content: "|";

	position: static;

	display: inline-block;

	width: auto;
	height: auto;

	margin-inline: 0.6rem;

	background: none;
	border: 0;

	color: inherit;

	transform: none;
}

.ce-textpic .ce-gallery .ce-row, .ce-textpic .ce-gallery .ce-column, .ce-textpic .ce-gallery figure, .ce-textpic .ce-gallery .image, .ce-textpic .ce-gallery .ai-generated-media, .ce-textpic .ce-gallery .ai-generated-media--standard, .ce-textpic .ce-gallery figure > a, .ce-textpic .ce-gallery picture {
width: auto;
margin-right: 10px;
}

.ce-textpic .ce-gallery .ce-column + .ce-column {
margin-top: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

	.page-content {
		max-width: calc(100% - 3rem);
	}


	.site-footer-columns {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


@media (max-width: 600px) {

	.page-content,
	.site-footer-columns,
	.site-footer-meta {
		max-width: calc(100% - 2rem);
	}


	.site-footer-columns {
		grid-template-columns:
			1fr;
	}


	.site-footer form .row,
	.site-footer form .col-md-6,
	.site-footer form [class*="col-"] {
		width: 100%;
		max-width: 100%;
	}

}