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

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

	width: 100%;

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

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

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


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

	gap: 2rem;

	width: 100%;

	padding: 1rem 2rem;

	box-sizing: border-box;
}


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

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


.site-logo img {
	display: block;

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


/* =========================================================
   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(--border-radius-small);

		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(--border-radius);

	overflow: hidden;
}


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

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


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

.ce-textpic.ce-intext.ce-nowrap {
	display: flex;
	align-items: center;

	gap: 3rem;
}


/* Bild links */

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


/* Bild rechts */

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


/*
 * TYPO3-Floats und alte Abstände entfernen.
 */

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

	margin: 0;

	flex: 0 0 auto;
}


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

	min-width: 0;
}


/* =========================================================
   CONTENT BACKGROUND COLORS
   ========================================================= */

.frame-bg-logo-color-1,
.frame-bg-logo-color-1-light,
.frame-bg-logo-color-1-dark,
.frame-bg-logo-color-2,
.frame-bg-neutral-color-light,
.frame-bg-neutral-color-dark,
.frame-bg-white {
	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-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);
}


/* 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-neutral-color-light::before,
.frame-bg-neutral-color-dark::before,
.frame-bg-white::before {
	content: "";

	position: absolute;

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

	width: 100vw;

	transform: translateX(-50%);

	background-color: 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-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) {
	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-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) {
	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.
 */


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

.has-motion .motion-reveal
> :not(.content-background-image)
  :not(.ai-generated-overlay--background) {
	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) {
	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 {
		opacity: 1;

		transform: none;

		transition: none;

		will-change: auto;
	}

}


/* =========================================================
   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(--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: none;
	flex-direction: column;

	min-width: 250px;

	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);
}


.sticky-cta-contact[open] .sticky-cta-contact-menu {
	display: flex;
}


/* =========================
   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;
	}
}


/* =========================
   AUTOMATISCHES AUFKLAPPEN
   ========================= */

.has-motion .sticky-cta--auto-expand {
	gap: 0;

	padding-inline: 0.55rem;

	transition:
		gap 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.9s ease,
		box-shadow 0.8s ease;
}


.has-motion .sticky-cta--auto-expand .sticky-cta-text {
	display: block;

	max-width: 0;

	overflow: hidden;

	opacity: 0;

	white-space: nowrap;

	transform: translateX(0.4rem);

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


.has-motion .sticky-cta--auto-expand.is-expanded {
	gap: 0.45rem;

	padding-inline: 0.9rem;
}


.has-motion .sticky-cta--auto-expand.is-expanded .sticky-cta-text {
	max-width: 12rem;

	opacity: 1;

	transform: translateX(0);
}


@media (max-width: 600px) {

	.has-motion .sticky-cta--auto-expand {
		padding-inline: 0.5rem;
	}


	.has-motion .sticky-cta--auto-expand.is-expanded {
		padding-inline: 0.75rem;
	}
}


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

	.has-motion .sticky-cta--auto-expand {
		gap: 0.45rem;

		padding-inline: 0.9rem;

		transition: none;
	}


	.has-motion .sticky-cta--auto-expand .sticky-cta-text {
		max-width: 12rem;

		opacity: 1;

		transform: none;

		transition: none;
	}
}


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

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

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

	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;
}


.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;
}


/* =========================================================
   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: 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 {
		width: 100%;
	}
}


@media (max-width: 600px) {

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


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