/**
 * Brodkorb – global design system foundations
 * Values from docs/design-system.md + Elementor references (visual fidelity).
 * No Elementor classes or runtime CDN font requests.
 */

/* -------------------------------------------------------------------------- */
/* @font-face – local only (latin + latin-ext for DE/PL)                      */
/* -------------------------------------------------------------------------- */

/* Anton – single cut (400). Do not request 600/800/900 (would synthesize). */
@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton/anton-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton/anton-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 400 */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins/poppins-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins/poppins-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 600 */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins/poppins-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins/poppins-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat 400 / 500 / 600 / 800 */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/montserrat/montserrat-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/montserrat/montserrat-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/montserrat/montserrat-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/montserrat/montserrat-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/montserrat/montserrat-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/montserrat/montserrat-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/montserrat/montserrat-800-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/montserrat/montserrat-800-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------- */
/* Design tokens                                                              */
/* -------------------------------------------------------------------------- */

:root {
	/* Primitives – color */
	--color-cyan-500: #00afd4;
	--color-cyan-400: #00d2ff;
	--color-gray-950: #13202b;
	--color-gray-900: #13202b;
	--color-gray-800: #363636;
	--color-gray-600: #5e5e5e;
	--color-gray-500: #9b9b9b;
	--color-gray-300: #dddddd;
	--color-gray-100: #f3f3f3;
	--color-blue-50: #e3f4fc;
	--color-blue-40: #e9f4f8; /* Activity section bg – Elementor 287f165 literal */
	--color-blue-25: #f7fdff;
	--color-white: #ffffff;
	--color-yellow-400: #fff63c; /* not a brand accent – reserved / unused in UI */

	/* Primitives – space / radius / shadow */
	--space-1: 0.25rem; /* 4px */
	--space-2: 0.5rem; /* 8px */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem; /* 16px */
	--space-5: 1.25rem; /* 20px */
	--space-6: 1.5rem; /* 24px */
	--space-7: 2rem; /* 32px */
	--space-8: 2.5rem; /* 40px */
	--space-9: 3.125rem; /* 50px */
	--space-10: 5rem; /* 80px */
	--space-11: 6.25rem; /* 100px */
	--space-12: 9.375rem; /* 150px */
	--radius-md: 10px;
	--radius-lg: 20px;
	--shadow-button-hover: 0 0 10px 0 rgba(0, 0, 0, 0.44);

	/* Semantic – color */
	--color-primary: var(--color-cyan-500);
	--color-primary-hover: var(--color-cyan-400);
	--color-heading: var(--color-gray-900);
	--color-text: var(--color-gray-800);
	--color-text-muted: var(--color-gray-500);
	--color-background: var(--color-white);
	--color-surface: var(--color-blue-50);
	--color-surface-muted: var(--color-gray-100);
	--color-border: var(--color-gray-300);
	--color-inverse: var(--color-white);
	--color-ink: var(--color-gray-950);

	/* Semantic – typography */
	--font-display: "Anton", sans-serif;
	--font-heading: "Anton", sans-serif;
	--font-body: "Poppins", sans-serif;
	--font-ui: "Montserrat", sans-serif;

	--font-size-display-xl: 5rem;
	--font-size-display-l: 3.5rem;
	--font-size-display-m: 3rem;
	--font-size-h1: 3.5rem;
	--font-size-h2: 3rem;
	--font-size-h3: 1.3rem;
	--font-size-h4: 1.2rem;
	--font-size-h5: 1.1rem;
	--font-size-h6: 1rem;
	--font-size-body: 1rem;
	--font-size-body-lg: 1.0625rem; /* leads / intro copy */
	--font-size-small: 0.9rem;
	--font-size-eyebrow: 0.8rem;

	--line-height-display: 1.15;
	--line-height-heading: 1.15; /* einheitlich für alle Section-H2 */
	--line-height-body: 1.55; /* WP4.9: readable body (was 1.3) */
	--line-height-ui: 1.35;
	--line-height-eyebrow: 1;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-extrabold: 800;

	--letter-spacing-button: 2px;
	--letter-spacing-eyebrow: 4px;

	/* Semantic – layout (content = Hero-Breite 1480px) */
	--container-max-width: 1480px;
	--container-content-width: 1480px;
	--container-narrow: 1140px;
	--container-padding: 50px;
	--section-spacing: 100px;
	--section-spacing-sm: 50px;

	/* Breakpoints (reference; used in media queries below)
	   --bp-md: 768px; --bp-lg: 1025px; */

	/* Buttons (component tokens from Elementor) */
	--button-padding-block: 20px;
	--button-padding-inline: 35px;
	--button-radius: var(--radius-md);
	--button-transition: 0.3s;
	--button-font-size: 1rem;
}

@media (max-width: 1024px) {
	:root {
		--container-padding: 30px;
		--section-spacing: 80px;
		--font-size-h1: 2.7rem;
		--font-size-display-l: 2.7rem;
		--font-size-h2: 2rem;
		--font-size-display-m: 2rem;
	}
}

@media (max-width: 767px) {
	:root {
		--container-padding: 15px;
		--section-spacing: 50px;
		--font-size-h1: 2rem;
		--font-size-display-l: 2rem;
		--font-size-display-xl: 2.7rem;
		--font-size-h2: 1.75rem;
		--font-size-display-m: 1.75rem;
	}
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/* Headings – Anton only ships 400; map Elementor 600/900 to Regular */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	font-synthesis: none;
	color: var(--color-heading);
	line-height: var(--line-height-heading);
	margin: 0 0 0.5em;
}

h1 {
	font-size: var(--font-size-h1);
}

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

h3 {
	font-family: var(--font-ui);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-body);
}

h4 {
	font-family: var(--font-ui);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-medium);
}

h5 {
	font-size: var(--font-size-h5);
}

h6 {
	font-size: var(--font-size-h6);
	letter-spacing: var(--letter-spacing-button);
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--button-transition);
}

a:hover,
a:focus-visible {
	color: var(--color-primary-hover);
}

strong,
b {
	font-weight: var(--font-weight-semibold);
}

/* -------------------------------------------------------------------------- */
/* Layout                                                                     */
/* -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--content {
	max-width: var(--container-content-width);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.container--wide {
	max-width: var(--container-content-width);
}

.section {
	padding-block: var(--section-spacing);
}

/* -------------------------------------------------------------------------- */
/* Buttons – original Elementor values                                        */
/* -------------------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	line-height: 1.2;
	transition-duration: var(--button-transition);
	transition-property: background-color, color, box-shadow, border-color;
}

.button:focus-visible {
	outline: 2px solid var(--color-primary-hover);
	outline-offset: 3px;
}

/* Primary – post-11 / post-92 */
.button--primary {
	font-family: var(--font-display);
	font-size: var(--button-font-size);
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: var(--letter-spacing-button);
	color: var(--color-inverse);
	background-color: var(--color-primary);
	border-radius: var(--button-radius);
	padding: var(--button-padding-block) var(--button-padding-inline);
}

.button--primary:hover,
.button--primary:focus {
	background-color: var(--color-primary);
	color: var(--color-inverse);
	box-shadow: var(--shadow-button-hover);
	text-decoration: none;
}

/* Secondary – white fill, black border/text (post-11) */
.button--secondary {
	font-family: var(--font-display);
	font-size: var(--button-font-size);
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: var(--letter-spacing-button);
	color: var(--color-ink);
	background-color: var(--color-white);
	border: 1px solid var(--color-ink);
	border-radius: var(--button-radius);
	padding: var(--button-padding-block) var(--button-padding-inline);
}

.button--secondary:hover,
.button--secondary:focus {
	color: var(--color-ink);
	background-color: var(--color-white);
	box-shadow: var(--shadow-button-hover);
	text-decoration: none;
}

/* Text / ghost – Montserrat 800 cyan (post-11) */
.button--text {
	font-family: var(--font-ui);
	font-size: var(--button-font-size);
	font-weight: var(--font-weight-extrabold);
	color: var(--color-primary);
	background-color: transparent;
	border-radius: 0;
	padding: 0;
}

.button--text:hover,
.button--text:focus {
	background-color: transparent;
	color: var(--color-primary-hover);
	text-decoration: none;
}

/* Text alternate – Anton label style from kit (weight mapped to 400) */
.button--text-display {
	font-family: var(--font-display);
	font-size: var(--button-font-size);
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: var(--letter-spacing-button);
	color: var(--color-primary);
	background-color: transparent;
	border-radius: 0;
	padding: 0;
}

.button--text-display:hover,
.button--text-display:focus {
	background-color: transparent;
	color: var(--color-primary-hover);
	text-decoration: none;
}

.button:disabled,
.button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
	pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Typography helpers                                                         */
/* -------------------------------------------------------------------------- */

.text-display-xl {
	font-family: var(--font-display);
	font-size: var(--font-size-display-xl);
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-display);
	color: var(--color-heading);
}

.text-eyebrow {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-eyebrow);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* Accessibility utilities                                                    */
/* -------------------------------------------------------------------------- */

.u-visually-hidden,
.u-skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.u-skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	overflow: visible;
	white-space: normal;
}

.u-text-center {
	text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Site header – Premium Floating Header (Referenzdesign)                     */
/* -------------------------------------------------------------------------- */

:root {
	--header-offset-top: 12px;
	--header-topbar-height: 32px;
	--header-topbar-gap: 8px;
	--header-bar-height: 88px;
	--header-bar-radius: 20px;
	--header-logo-height: 42px;
	--header-sticky-top: 10px;
	--header-height: calc(
		var(--header-offset-top) + var(--header-topbar-height) + var(--header-topbar-gap) + var(--header-bar-height)
	);
}

body {
	padding-top: var(--header-height);
}

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 1000;
	padding: var(--header-offset-top) var(--container-padding) 0;
	background: transparent;
	pointer-events: none;
	box-sizing: border-box;
}

.site-header > * {
	pointer-events: auto;
}

.site-header.is-scrolled {
	--header-offset-top: var(--header-sticky-top);
	--header-topbar-height: 0px;
	--header-topbar-gap: 0px;
	padding-top: var(--header-sticky-top);
}

/* Gleiches Content-Raster wie Hero/Sections: Außenabstand am Header, Shell = Contentbreite */
.site-header__shell.container {
	display: flex;
	flex-direction: column;
	gap: var(--header-topbar-gap);
	width: min(100%, var(--container-content-width));
	max-width: var(--container-content-width);
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
	overflow: visible;
}

.site-header__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: var(--header-topbar-height);
	min-height: var(--header-topbar-height);
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: hidden;
	transition: opacity 0.22s ease, height 0.22s ease, min-height 0.22s ease, margin 0.22s ease;
}

.site-header.is-scrolled .site-header__topbar {
	opacity: 0;
	height: 0;
	min-height: 0;
	margin: 0;
	pointer-events: none;
}

.site-header__topbar-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--color-text-muted);
}

.site-header__topbar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-primary);
}

.site-header__topbar-svg {
	display: block;
	width: 14px;
	height: 14px;
}

.site-header__topbar-text {
	white-space: nowrap;
}

.site-header__bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	min-height: var(--header-bar-height);
	height: var(--header-bar-height);
	padding: 12px 28px;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: var(--header-bar-radius);
	box-shadow:
		0 2px 6px rgba(20, 42, 60, 0.035),
		0 12px 30px rgba(30, 70, 100, 0.07),
		0 24px 60px rgba(30, 80, 120, 0.055),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	overflow: visible;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header__bar {
		background-color: rgba(255, 255, 255, 0.97);
	}
}

.site-header.is-scrolled .site-header__bar {
	background-color: rgba(255, 255, 255, 0.94);
}

.site-header__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	line-height: 0;
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
	text-decoration: none;
}

.site-header__logo {
	display: block;
	width: auto;
	height: var(--header-logo-height);
	max-height: 42px;
	object-fit: contain;
}

.site-header__mobile-actions {
	display: none;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-primary);
	cursor: pointer;
}

.site-header__toggle-box {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

.site-header__toggle-bar {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background-color: currentColor;
	border-radius: 1px;
	transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.site-header__toggle-bar:nth-child(1) { top: 0; }
.site-header__toggle-bar:nth-child(2) { top: 7px; }
.site-header__toggle-bar:nth-child(3) { top: 14px; }

.site-header.is-nav-open .site-header__toggle-bar:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}

.site-header.is-nav-open .site-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.site-header.is-nav-open .site-header__toggle-bar:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

.site-header__panel {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-left: auto;
	min-width: 0;
}

.site-header__nav {
	display: flex;
	align-items: center;
}

.site-header__menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__menu .menu-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--color-ink);
	text-decoration: none;
	transition: color 180ms ease;
}

.site-header__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 2px;
	background-color: var(--color-primary);
	opacity: 0;
	transform: scaleX(0.65);
	transform-origin: center;
	transition: opacity 180ms ease, transform 180ms ease;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible {
	color: var(--color-primary);
	text-decoration: none;
}

.site-header__menu a:hover::after,
.site-header__menu a:focus-visible::after {
	opacity: 1;
	transform: scaleX(1);
}

.site-header__menu .current-menu-item > a,
.site-header__menu .current_page_item > a {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

.site-header__menu .current-menu-item > a::after,
.site-header__menu .current_page_item > a::after {
	opacity: 1;
	transform: scaleX(1);
}

.site-header__menu .menu-item-has-children {
	position: relative;
}

.site-header__menu .sub-menu {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 0;
	z-index: 10;
	display: none;
	min-width: 12rem;
	margin: 0;
	padding: var(--space-3);
	list-style: none;
	background: rgba(255, 255, 255, 0.97);
	border-radius: var(--radius-md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.site-header__menu .menu-item-has-children:hover > .sub-menu,
.site-header__menu .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.site-header__menu .sub-menu a::after {
	display: none;
}

.site-header__divider {
	display: block;
	flex-shrink: 0;
	width: 1px;
	height: 30px;
	margin: 0;
	background-color: rgba(35, 65, 90, 0.14);
	align-self: center;
}

.site-header__tools {
	display: block;
	flex-shrink: 0;
}

.site-header__tools-list {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__tools-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	text-decoration: none;
	color: var(--color-ink);
	background-color: rgba(246, 249, 251, 0.85);
	border: 1px solid rgba(50, 80, 105, 0.06);
	border-radius: 50%;
	box-shadow:
		0 2px 5px rgba(30, 50, 70, 0.04),
		0 5px 12px rgba(30, 60, 85, 0.055),
		inset 0 1px 2px rgba(255, 255, 255, 0.9);
	transition: transform 200ms ease, box-shadow 200ms ease, color 200ms ease, background-color 200ms ease;
}

.site-header__tool:hover,
.site-header__tool:focus-visible {
	color: var(--color-primary);
	background-color: #ffffff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 7px 16px rgba(30, 70, 100, 0.12);
}

.site-header__tool:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.site-header__tool-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.site-header__tool-svg {
	display: block;
	width: 19px;
	height: 19px;
	color: inherit;
}

.site-header__tool-svg--brand {
	fill: currentColor;
}

.site-header__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-header__cta.button--primary {
	min-width: 185px;
	min-height: 50px;
	height: 50px;
	padding: 0 22px 0 25px;
	gap: 12px;
	border-radius: 9px;
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: var(--font-weight-semibold);
	font-synthesis: weight;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	box-shadow: 0 6px 15px rgba(40, 120, 160, 0.15);
	transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.site-header__cta.button--primary:hover,
.site-header__cta.button--primary:focus {
	background-color: color-mix(in srgb, var(--color-primary) 86%, #000 14%);
	color: var(--color-inverse);
	transform: translateY(-2px);
	box-shadow: 0 9px 22px rgba(40, 120, 160, 0.22);
}

.site-header__cta-icon {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	transition: transform 200ms ease;
}

.site-header__cta:hover .site-header__cta-icon,
.site-header__cta:focus .site-header__cta-icon {
	transform: translate(2px, -2px);
}

.site-header__quick {
	display: none;
}

.site-header__legal {
	display: none;
}

html.is-nav-locked,
html.is-nav-locked body {
	overflow: hidden;
}

body.is-nav-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

/* Tablet / small desktop: switch to mobile chrome before overflow */
@media (max-width: 1199px) {
	:root {
		--header-offset-top: 10px;
		--header-topbar-height: 0px;
		--header-topbar-gap: 0px;
		--header-bar-height: 64px;
		--header-bar-radius: 15px;
		--header-logo-height: 28px;
		--header-height: calc(10px + 64px);
	}

	.site-header {
		padding-top: 10px;
	}

	.site-header__topbar {
		display: none;
	}

	.site-header__bar {
		height: var(--header-bar-height);
		min-height: var(--header-bar-height);
		padding: 8px 14px;
	}

	.site-header__brand {
		min-width: 0;
		flex: 1 1 auto;
	}

	.site-header__logo {
		max-height: var(--header-logo-height);
		max-width: min(100%, 168px);
	}

	.site-header__mobile-actions {
		display: inline-flex !important;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		position: relative;
		z-index: 3;
		flex-shrink: 0;
		margin-left: auto;
	}

	/* Mail + Telefon + Menü: gleichartige runde Buttons nebeneinander */
	.site-header__tool--mobile-contact,
	.site-header__toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		visibility: visible !important;
		opacity: 1 !important;
		width: 36px;
		height: 36px;
		flex-shrink: 0;
		margin: 0;
		padding: 0;
		border: 1px solid rgba(50, 80, 105, 0.06);
		border-radius: 50%;
		color: var(--color-primary);
		background-color: rgba(246, 249, 251, 0.95);
		box-shadow:
			0 2px 5px rgba(30, 50, 70, 0.04),
			0 5px 12px rgba(30, 60, 85, 0.055),
			inset 0 1px 2px rgba(255, 255, 255, 0.9);
		cursor: pointer;
		text-decoration: none;
	}

	.site-header__tool--mobile-contact:hover,
	.site-header__tool--mobile-contact:focus-visible {
		color: var(--color-primary);
		text-decoration: none;
	}

	.site-header__tool--mobile-contact .site-header__tool-svg {
		width: 16px;
		height: 16px;
	}

	.site-header__toggle-box {
		position: relative;
		display: block;
		width: 16px;
		height: 12px;
	}

	.site-header__toggle-bar {
		background-color: currentColor;
	}

	.site-header__toggle-bar:nth-child(1) { top: 0; }
	.site-header__toggle-bar:nth-child(2) { top: 5px; }
	.site-header__toggle-bar:nth-child(3) { top: 10px; }

	.site-header.is-nav-open .site-header__toggle-bar:nth-child(1),
	.site-header.is-nav-open .site-header__toggle-bar:nth-child(3) {
		top: 5px;
	}

	.site-header__divider,
	.site-header__tools {
		display: none;
	}

	.site-header__panel {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		z-index: 4;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 20px;
		background-color: rgba(255, 255, 255, 0.97);
		-webkit-backdrop-filter: blur(18px) saturate(140%);
		backdrop-filter: blur(18px) saturate(140%);
		border: 1px solid rgba(255, 255, 255, 0.85);
		border-radius: 15px;
		box-shadow:
			0 2px 6px rgba(20, 42, 60, 0.035),
			0 12px 30px rgba(30, 70, 100, 0.07),
			0 24px 60px rgba(30, 80, 120, 0.055);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-6px);
		transition:
			opacity 0.22s ease,
			transform 0.22s ease,
			visibility 0.22s ease;
	}

	.site-header.is-nav-open .site-header__panel,
	.site-header.is-nav-closing .site-header__panel {
		pointer-events: auto;
	}

	.site-header.is-nav-open .site-header__panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.site-header.is-nav-closing .site-header__panel {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
	}

	.site-header__nav {
		width: 100%;
	}

	.site-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.site-header__menu > .menu-item > a {
		display: flex;
		width: 100%;
		min-height: 48px;
		font-size: 1rem;
		font-weight: var(--font-weight-semibold);
	}

	.site-header__menu a::after {
		display: none;
	}

	.site-header__menu .sub-menu {
		position: static;
		display: block;
		box-shadow: none;
		background: transparent;
		padding: 0 0 0.5rem 1rem;
	}

	.site-header__actions {
		width: 100%;
		margin-top: 1rem;
	}

	.site-header__cta {
		width: 100%;
		min-width: 0;
		justify-content: center;
		transform: none;
	}

	.site-header__cta:hover,
	.site-header__cta:focus {
		transform: none;
	}

	.site-header__quick {
		display: block;
		width: 100%;
		margin-top: 1.25rem;
		padding-top: 1rem;
		border-top: 1px solid rgba(35, 65, 90, 0.1);
	}

	.site-header__legal {
		display: block;
		width: 100%;
		margin-top: 1rem;
		padding-top: 0.85rem;
		border-top: 1px solid rgba(35, 65, 90, 0.08);
	}

	.site-header__legal-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0.35rem 0.75rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-header__legal-item {
		margin: 0;
		padding: 0;
	}

	.site-header__legal-item:not(:last-child)::after {
		content: "·";
		margin-left: 0.75rem;
		color: rgba(19, 32, 43, 0.28);
		pointer-events: none;
	}

	.site-header__legal-link {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
		font-family: var(--font-ui);
		font-size: 0.78rem;
		font-weight: var(--font-weight-medium);
		letter-spacing: 0.02em;
		line-height: 1.2;
		color: rgba(19, 32, 43, 0.48);
		text-decoration: none;
	}

	.site-header__legal-link:hover,
	.site-header__legal-link:focus-visible {
		color: var(--color-primary);
		text-decoration: none;
	}

	.site-header__legal-link:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
		border-radius: 2px;
	}

	.site-header__quick-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-header__quick-item {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-header__quick-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		color: var(--color-ink);
		background-color: rgba(246, 249, 251, 0.85);
		border: 1px solid rgba(50, 80, 105, 0.06);
		border-radius: 50%;
		box-shadow:
			0 2px 5px rgba(30, 50, 70, 0.04),
			0 5px 12px rgba(30, 60, 85, 0.055),
			inset 0 1px 2px rgba(255, 255, 255, 0.9);
		text-decoration: none;
		transition: transform 200ms ease, color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
	}

	.site-header__quick-link:hover,
	.site-header__quick-link:focus-visible {
		color: var(--color-primary);
		background-color: #fff;
		transform: translateY(-2px);
		box-shadow: 0 7px 16px rgba(30, 70, 100, 0.12);
	}

	.site-header__quick-icon {
		display: inline-flex;
		line-height: 0;
	}

	.site-header__quick-svg {
		display: block;
		width: 19px;
		height: 19px;
	}

	.site-header__quick-svg--brand {
		fill: currentColor;
	}
}

@media (max-width: 767px) {
	:root {
		--header-bar-height: 56px;
		--header-bar-radius: 13px;
		--header-logo-height: 24px;
		--header-height: calc(8px + 56px);
	}

	.site-header {
		padding-top: 8px;
	}

	.site-header.is-scrolled {
		padding-top: 8px;
	}

	.site-header__bar {
		padding: 7px 12px;
	}

	.site-header__logo {
		max-width: min(100%, 148px);
	}

	.site-header__tool--mobile-contact,
	.site-header__toggle {
		width: 34px;
		height: 34px;
	}

	.site-header__tool--mobile-contact .site-header__tool-svg {
		width: 15px;
		height: 15px;
	}

	.site-header__toggle-box {
		width: 17px;
		height: 12px;
	}

	.site-header__toggle-bar:nth-child(2) { top: 5px; }
	.site-header__toggle-bar:nth-child(3) { top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header__topbar,
	.site-header__menu a,
	.site-header__menu a::after,
	.site-header__tool,
	.site-header__cta,
	.site-header__cta-icon,
	.site-header__toggle-bar,
	.site-header__panel,
	.site-header__quick-link {
		transition: none;
	}

	.site-header__tool:hover,
	.site-header__tool:focus-visible,
	.site-header__cta:hover,
	.site-header__cta:focus,
	.site-header__quick-link:hover,
	.site-header__quick-link:focus-visible {
		transform: none;
	}

	.site-header__panel {
		transform: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Hero (WP4.2 revision) – Elementor post-11 element 571095d                  */
/* Overlay: linear-gradient(90deg, #fff 0%–50%, transparent); opacity 1      */
/* -------------------------------------------------------------------------- */

body.home.front-page,
body.home.blog {
	padding-top: 0;
}

/* Unterseiten-Hero läuft hinter dem Floating Header (wie Über-uns) */
body:has(.about-hero),
body:has(.career-hero) {
	padding-top: 0;
}

.site-main--front {
	padding: 0;
}

.hero {
	--hero-min-height: 887px;
	--hero-padding-block-start: 265px;
	--hero-padding-block-end: 150px;
	--hero-content-max: 40rem;

	position: relative;
	display: flex;
	align-items: center;
	isolation: isolate;
	box-sizing: border-box;
	min-height: var(--hero-min-height);
	padding: var(--hero-padding-block-start) var(--container-padding) var(--hero-padding-block-end);
	overflow: hidden;
	color: var(--color-heading);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Elementor: white → transparent at 46%, overlay opacity 0.75 */
.hero__overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, var(--color-white) 0%, var(--color-white) 50%, rgb(255 255 255 / 0) 100%);
	opacity: 1;
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	width: min(100%, var(--container-content-width));
	max-width: var(--container-content-width);
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}

.hero__content {
	max-width: var(--hero-content-max);
}

.hero__title {
	margin: 0 0 1rem;
	font-family: var(--font-display);
	font-size: 5rem;
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.2;
	color: var(--color-heading);
}

.hero__title-line,
.hero__title-accent {
	display: block;
}

.hero__title-accent {
	color: var(--color-primary);
}

.hero__description {
	margin: 0 0 var(--space-7);
	max-width: 36rem;
	font-family: var(--font-body);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: var(--space-7);
}

.hero__cta {
	gap: 10px;
}

.hero__cta-icon {
	flex-shrink: 0;
}

/* Recruiting CTA box – Elementor bc5f22d */
.hero-recruiting {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 40rem;
	padding: 20px 30px;
	text-decoration: none;
	color: inherit;
	background-color: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(0, 175, 212, 0.38);
	border-radius: var(--radius-md);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
	transition: box-shadow var(--button-transition), border-color var(--button-transition), transform var(--button-transition);
}

.hero-recruiting:hover,
.hero-recruiting:focus-visible {
	text-decoration: none;
	color: inherit;
	border-color: rgba(0, 175, 212, 0.55);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11);
}

.hero-recruiting__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--color-blue-50);
	color: var(--color-primary);
}

.hero-recruiting__icon svg {
	display: block;
	width: 30px;
	height: 30px;
}

/* Desktop: Kinder am Parent-Flex; Mobile: Spalte für zentriertes Icon */
.hero-recruiting__body {
	display: contents;
}

.hero-recruiting__content {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	flex: 1;
}

.hero-recruiting__title {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: var(--color-heading);
}

.hero-recruiting__description {
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.hero-recruiting__divider {
	display: block;
	align-self: stretch;
	width: 1px;
	margin-block: 0.25rem;
	background-color: var(--color-blue-50);
	flex-shrink: 0;
}

.hero-recruiting__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: 2px;
	color: var(--color-primary);
	white-space: nowrap;
}

.hero-recruiting:hover .hero-recruiting__link,
.hero-recruiting:focus-visible .hero-recruiting__link {
	color: var(--color-primary-hover);
	transform: translateX(3px);
}

.hero-recruiting__link-icon {
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.hero {
		--hero-min-height: 450px;
		--hero-padding-block-start: 170px;
		--hero-padding-block-end: 80px;
	}

	.hero__title {
		font-size: 2.7rem;
	}

	.hero-recruiting {
		padding: 16px 20px;
		gap: 0.75rem;
	}

	.hero-recruiting__icon {
		width: 48px;
		height: 48px;
	}

	.hero-recruiting__icon svg {
		width: 24px;
		height: 24px;
	}
}

@media (max-width: 767px) {
	.hero {
		--hero-min-height: 90vh;
		--hero-padding-block-start: 120px;
		--hero-padding-block-end: 50px;
	}

	.hero__title {
		font-size: 2rem;
	}

	.hero__description {
		margin-bottom: 1.25rem;
	}

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin-bottom: 1.25rem;
	}

	.hero__cta {
		width: 100%;
		justify-content: center;
	}

	.hero-recruiting {
		align-items: center;
		gap: 0.65rem;
		max-width: none;
		padding: 0.7rem 0.85rem;
	}

	.hero-recruiting__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
		min-width: 0;
		flex: 1;
	}

	.hero-recruiting__icon {
		width: 36px;
		height: 36px;
	}

	.hero-recruiting__icon svg {
		width: 18px;
		height: 18px;
	}

	.hero-recruiting__content {
		flex: none;
		width: 100%;
		gap: 0.1rem;
	}

	.hero-recruiting__title {
		font-size: 0.95rem;
		line-height: 1.25;
	}

	.hero-recruiting__description {
		font-size: 0.82rem;
		line-height: 1.45;
	}

	.hero-recruiting__divider {
		display: none;
	}

	.hero-recruiting__link {
		width: auto;
		justify-content: flex-start;
		padding-top: 0;
		font-size: 0.9rem;
		letter-spacing: 1px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-recruiting,
	.hero-recruiting__link {
		transition: none;
	}

	.hero-recruiting:hover .hero-recruiting__link,
	.hero-recruiting:focus-visible .hero-recruiting__link {
		transform: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Company intro – white section, straight photos, gray blueprint backdrop    */
/* -------------------------------------------------------------------------- */

.company-intro {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: color-mix(in srgb, var(--color-gray-100) 42%, var(--color-white));
	padding: var(--space-12) var(--container-padding) var(--space-11);
}

.company-intro__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.company-intro__plan {
	position: absolute;
	display: block;
	margin: 0;
	max-width: none;
	opacity: 0.14;
	filter: grayscale(1) brightness(0.55) contrast(1.05);
	user-select: none;
}

.company-intro__plan img {
	display: block;
	width: 100%;
	height: auto;
}

.company-intro__plan--left {
	left: clamp(-7rem, -4vw, -2rem);
	bottom: clamp(-4rem, -3vw, -1rem);
	width: min(46vw, 34rem);
}

.company-intro__plan--right {
	right: clamp(-6rem, -3vw, -1.5rem);
	top: clamp(-3rem, -2vw, -0.75rem);
	width: min(48vw, 36rem);
}

.company-intro__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	column-gap: clamp(2.5rem, 5vw, 4.5rem);
	row-gap: var(--space-9);
	align-items: center;
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.company-intro__media {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--space-4);
	align-items: end;
	min-width: 0;
}

.company-intro__frame {
	margin: 0;
	padding: 0;
	line-height: 0;
	min-width: 0;
}

.company-intro__frame--secondary {
	padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.company-intro__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 4px;
	background-color: var(--color-blue-25);
}

.company-intro__frame--secondary .company-intro__photo {
	aspect-ratio: 3 / 4;
}

.company-intro__content {
	min-width: 0;
	max-width: 34rem;
}

.company-intro__eyebrow {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
}

.company-intro__eyebrow-line {
	display: block;
	flex: 0 0 auto;
	width: 50px;
	height: 1px;
	background-color: var(--color-primary);
}

.company-intro__eyebrow-text {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-eyebrow);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
}

.company-intro__title {
	margin: 0 0 var(--space-6);
	font-family: var(--font-display);
	font-size: var(--font-size-h2);
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-heading);
	color: var(--color-ink);
}

.company-intro__title-line,
.company-intro__title-accent {
	display: block;
}

.company-intro__title-accent {
	color: var(--color-primary);
}

.company-intro__lead {
	margin: 0 0 var(--space-5);
	font-family: var(--font-body);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-body);
	color: var(--color-ink);
}

.company-intro__text {
	margin: 0 0 var(--space-8);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.company-intro__actions {
	margin: 0;
}

.company-intro__cta-icon {
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.company-intro {
		padding-inline: 30px;
	}

	.company-intro__inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.company-intro__media {
		grid-template-columns: 1fr 1fr;
		max-width: 36rem;
	}

	.company-intro__frame--secondary {
		padding-bottom: 0;
	}

	.company-intro__content {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.company-intro {
		padding: var(--space-10) 15px var(--space-9);
	}

	.company-intro__plan--left,
	.company-intro__plan--right {
		opacity: 0.1;
		width: min(70vw, 18rem);
	}

	.company-intro__media {
		position: relative;
		display: block;
		width: 100%;
		max-width: none;
		min-height: 18.5rem;
		gap: 0;
		overflow: visible;
	}

	.company-intro__frame--primary {
		position: relative;
		z-index: 2;
		width: 58%;
		margin: 1.75rem 0 0;
	}

	.company-intro__frame--secondary {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		width: 49%;
		padding-bottom: 0;
	}

	.company-intro__frame--primary .company-intro__photo,
	.company-intro__frame--secondary .company-intro__photo {
		width: 100%;
		height: auto;
	}

	.company-intro__cta {
		min-height: 44px;
	}
}

/* -------------------------------------------------------------------------- */
/* Activity areas (WP4.4) – Elementor 287f165 / 17b5ff9 / c754d9c             */
/* -------------------------------------------------------------------------- */

.activity-areas {
	background-color: var(--color-blue-40); /* #E9F4F8 */
	padding: var(--space-12) var(--container-padding) var(--space-11); /* 150 / 100 */
}

.activity-areas__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-9); /* Elementor --gap:50px */
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.activity-areas__header {
	/* WP6.1: Grid statt space-between – Lead näher an H2 (kein großer Mittelspalt) */
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: var(--space-8); /* 40px – zusammenhängende Zweispaltigkeit */
	row-gap: var(--space-6);
	align-items: end; /* Lead bündig mit Unterkante der Headline */
	justify-content: start;
}

.activity-areas__intro {
	min-width: 0;
	width: max-content;
	max-width: min(100%, 28rem);
}

.activity-areas__eyebrow {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
}

.activity-areas__eyebrow-line {
	display: block;
	flex: 0 0 auto;
	width: 50px;
	height: 1px;
	background-color: var(--color-primary);
}

.activity-areas__eyebrow-text {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-eyebrow);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
}

.activity-areas__title {
	margin: 0;
	width: max-content;
	max-width: 100%;
	font-family: var(--font-display);
	font-size: var(--font-size-h2); /* 3rem – typography 85aec0b */
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-heading);
	color: var(--color-ink);
}

.activity-areas__title-line,
.activity-areas__title-accent {
	display: block;
}

.activity-areas__title-accent {
	color: var(--color-primary);
}

.activity-areas__lead {
	min-width: 0;
	max-width: 34rem;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.activity-areas__grid {
	display: grid;
	/* Elementor card widths ~42% / 30% / 30% */
	grid-template-columns: 42fr 30fr 30fr;
	gap: var(--space-5);
	align-items: stretch;
}

.activity-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	background-color: var(--color-white);
	border-radius: var(--radius-md); /* 10px */
}

.activity-card__media {
	/* WP6.1: feste Desktop-Höhe – gleiche Bildunterkanten bei 42/30/30-Breiten */
	position: relative;
	flex: 0 0 auto;
	height: 280px;
	overflow: hidden;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	background-color: var(--color-gray-100);
}

.activity-card__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.activity-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.activity-card__content {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	flex: 1 1 auto;
	padding: var(--space-6) var(--space-5); /* WP4.9: more readable card body */
}

.activity-card__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.activity-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-heading);
	color: var(--color-ink);
}

.activity-card__description {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

/* Decorative thematic icon – not interactive */
.activity-card__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--color-blue-50); /* #E3F4FC */
	color: var(--color-primary);
	pointer-events: none;
	cursor: default;
}

.activity-card__icon-svg,
.activity-card__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.activity-areas__contact {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin: 0;
	text-align: center;
}

.activity-areas__contact-line {
	display: block;
	flex: 0 0 auto;
	width: 50px;
	height: 1px;
	background-color: var(--color-primary);
}

.activity-areas__contact-inner {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 10px;
}

.activity-areas__contact-label {
	font-family: var(--font-ui);
	font-size: 1rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	color: var(--color-ink);
}

.activity-areas__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-ui);
	font-size: 1rem;
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
	color: var(--color-primary);
	text-decoration: none;
	background: transparent;
	border-radius: 0;
	padding: 0;
	min-height: 44px;
}

.activity-areas__contact-link:hover,
.activity-areas__contact-link:focus {
	color: var(--color-primary-hover);
	text-decoration: none;
}

.activity-areas__contact-link:focus-visible {
	outline: 2px solid var(--color-primary-hover);
	outline-offset: 3px;
}

.activity-areas__contact-icon {
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.activity-areas {
		padding: var(--space-10) 30px; /* 80px */
	}

	.activity-areas__header {
		grid-template-columns: 1fr;
	}

	.activity-areas__intro {
		width: auto;
		max-width: none;
	}

	.activity-areas__lead {
		max-width: none;
	}

	/* Elementor behält ab 768 drei Spalten (42/30/30) */
	.activity-areas__grid {
		grid-template-columns: 42fr 30fr 30fr;
		gap: var(--space-4);
	}

	.activity-card__media {
		height: 200px;
	}

	.activity-card__icon {
		width: 40px;
		height: 40px;
	}

	.activity-card__icon-svg,
	.activity-card__icon svg {
		width: 16px;
		height: 16px;
	}

	.activity-areas__contact-inner {
		max-width: 83%;
	}
}

@media (max-width: 767px) {
	.activity-areas {
		padding: var(--space-10) 15px var(--space-9); /* 80 / 50 – wie company-intro */
	}

	.activity-areas__grid {
		grid-template-columns: 1fr;
	}

	.activity-card__media {
		height: 220px;
	}

	.activity-card__content {
		padding: 10px;
	}

	.activity-card__title {
		font-size: 1rem;
	}

	.activity-areas__contact {
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
	}

	.activity-areas__contact-inner {
		max-width: 100%;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
	}
}


/* -------------------------------------------------------------------------- */
/* Career teaser (WP6.3) – Split Highlight Recruiting                         */
/* -------------------------------------------------------------------------- */

.career-teaser {
	background-color: var(--color-gray-900); /* Markenschwarz #13202B */
	padding: var(--space-11) var(--container-padding);
	color: var(--color-white);
}

.career-teaser__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: stretch;
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
	min-height: 34rem;
}

.career-teaser__visual {
	position: relative;
	min-width: 0;
	min-height: 100%;
}

.career-teaser__media {
	position: relative;
	height: 100%;
	min-height: 34rem;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-gray-900);
}

.career-teaser__media picture,
.career-teaser__image {
	display: block;
	width: 100%;
	height: 100%;
}

.career-teaser__image {
	object-fit: cover;
	object-position: center 28%;
}

.career-teaser__media-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		115deg,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(0, 0, 0, 0.05) 45%,
		rgba(0, 175, 212, 0.18) 100%
	);
}

/* Runder Callout / Störer mit Benefits */
.career-teaser__callout {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 13.75rem;
	height: 13.75rem;
	padding: 1.35rem 1.1rem 1.25rem;
	box-sizing: border-box;
	text-align: center;
	background-color: var(--color-primary);
	color: var(--color-ink);
	border-radius: 50%;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
	transform: translateX(32%);
}

.career-teaser__callout-label {
	font-family: var(--font-ui);
	font-size: 0.62rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.career-teaser__callout-role {
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: 400;
	font-synthesis: none;
	line-height: 1;
	letter-spacing: 0.01em;
}

.career-teaser__callout-benefits {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	margin: 0.35rem 0 0;
	padding: 0.4rem 0 0;
	list-style: none;
	border-top: 1px solid rgba(0, 0, 0, 0.18);
	width: 100%;
	max-width: 10.5rem;
}

.career-teaser__callout-benefits li {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: var(--font-weight-medium);
	line-height: 1.25;
	color: var(--color-ink);
}

.career-teaser__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: var(--space-6) 0 var(--space-6) var(--space-2);
}

.career-teaser__eyebrow {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
}

.career-teaser__eyebrow-line {
	display: block;
	flex: 0 0 auto;
	width: 50px;
	height: 1px;
	background-color: var(--color-primary);
}

.career-teaser__eyebrow-text {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-eyebrow);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
}

.career-teaser__title {
	margin: 0 0 var(--space-6);
	font-family: var(--font-display);
	font-size: var(--font-size-h2);
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-heading);
	color: var(--color-white);
}

.career-teaser__title-line,
.career-teaser__title-accent {
	display: block;
}

.career-teaser__title-accent {
	color: var(--color-primary);
}

.career-teaser__text {
	margin: 0 0 var(--space-8);
	max-width: 28rem;
	font-family: var(--font-body);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: rgba(255, 255, 255, 0.82);
}

.career-teaser__actions {
	margin: 0;
}

.career-teaser__cta {
	min-height: 54px;
	padding-inline: 1.6rem;
}

.career-teaser__cta-icon {
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.career-teaser {
		padding: var(--space-10) 30px;
	}

	.career-teaser__inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
		min-height: 0;
	}

	.career-teaser__media {
		min-height: 22rem;
		border-radius: var(--radius-md);
	}

	.career-teaser__callout {
		right: auto;
		left: 1rem;
		bottom: 1.25rem;
		transform: none;
		width: 12.5rem;
		height: 12.5rem;
	}

	.career-teaser__content {
		padding: 0;
	}

	.career-teaser__text {
		max-width: 38rem;
	}
}

@media (max-width: 767px) {
	.career-teaser {
		padding: var(--space-10) 15px;
	}

	.career-teaser__inner {
		gap: var(--space-7);
	}

	.career-teaser__media {
		min-height: 18rem;
	}

	.career-teaser__callout {
		left: 0.75rem;
		bottom: 0.85rem;
		width: 11.5rem;
		height: 11.5rem;
		padding: 1.1rem 0.85rem 1rem;
		gap: 0.35rem;
	}

	.career-teaser__callout-role {
		font-size: 1.3rem;
	}

	.career-teaser__callout-benefits {
		gap: 0.15rem;
		max-width: 9.25rem;
	}

	.career-teaser__callout-benefits li {
		font-size: 0.62rem;
	}

	.career-teaser__title {
		margin-bottom: var(--space-5);
	}

	.career-teaser__text {
		margin-bottom: var(--space-7);
		max-width: none;
	}

	.career-teaser__cta {
		width: 100%;
		justify-content: center;
		min-height: 50px;
	}
}

/* -------------------------------------------------------------------------- */
/* Working method (WP6.2 Revision) – Asymmetric Process                       */
/* -------------------------------------------------------------------------- */

.working-method {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--color-white);
	padding: var(--space-12) var(--container-padding) var(--space-11);
}

.working-method__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.working-method__plan {
	position: absolute;
	display: block;
	margin: 0;
	max-width: none;
	opacity: 0.22;
	user-select: none;
}

.working-method__plan img {
	display: block;
	width: 100%;
	height: auto;
}

.working-method__plan--left {
	left: clamp(-8rem, -5vw, -2.5rem);
	bottom: clamp(-5rem, -4vw, -1.5rem);
	width: min(52vw, 40rem);
}

.working-method__plan--right {
	right: clamp(-7rem, -4vw, -2rem);
	top: clamp(-4rem, -3vw, -1rem);
	width: min(54vw, 42rem);
}

.working-method__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
	column-gap: clamp(2.5rem, 5vw, 5rem);
	row-gap: var(--space-10);
	align-items: start;
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.working-method__statement {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	max-width: 36rem;
	padding-top: var(--space-2);
}

.working-method__eyebrow {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

.working-method__eyebrow-line {
	display: block;
	flex: 0 0 auto;
	width: 50px;
	height: 1px;
	background-color: var(--color-primary);
}

.working-method__eyebrow-text {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-eyebrow);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
}

.working-method__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-h2);
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-heading);
	color: var(--color-ink);
}

.working-method__title-line {
	display: block;
}

.working-method__title-accent {
	display: inline;
	color: var(--color-primary);
}

.working-method__lead {
	margin: 0;
	max-width: 28rem;
	font-family: var(--font-body);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.working-method__process {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(0, 175, 212, 0.35);
}

.working-method__row {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	column-gap: var(--space-6);
	align-items: start;
	margin: 0;
	padding: var(--space-7) 0;
	border-bottom: 1px solid rgba(0, 175, 212, 0.35);
}

.working-method__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.75rem, 3.5vw, 3.5rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 0.9;
	letter-spacing: 0.02em;
	color: var(--color-primary);
}

.working-method__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
	padding-top: 0.35rem;
}

.working-method__row-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 1.8vw, 1.75rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-heading);
	color: var(--color-ink);
}

.working-method__row-text {
	margin: 0;
	max-width: 34rem;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

@media (max-width: 1024px) {
	.working-method {
		padding: var(--space-10) 30px;
	}

	.working-method__plan {
		opacity: 0.16;
	}

	.working-method__plan--left {
		width: min(58vw, 32rem);
	}

	.working-method__plan--right {
		width: min(60vw, 34rem);
	}

	.working-method__inner {
		grid-template-columns: 1fr;
		row-gap: var(--space-9);
	}

	.working-method__statement {
		max-width: 40rem;
	}

	.working-method__lead {
		max-width: 36rem;
	}

	.working-method__row {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		column-gap: var(--space-5);
		padding: var(--space-6) 0;
	}

	.working-method__row-text {
		max-width: 40rem;
	}
}

@media (max-width: 767px) {
	.working-method {
		padding: var(--space-11) 15px var(--space-10);
	}

	.working-method__plan {
		opacity: 0.12;
	}

	.working-method__plan--left {
		left: -22%;
		bottom: -10%;
		width: 82vw;
	}

	.working-method__plan--right {
		right: -24%;
		top: -8%;
		width: 86vw;
	}

	.working-method__inner {
		row-gap: var(--space-8);
	}

	.working-method__statement {
		max-width: none;
		gap: var(--space-5);
	}

	.working-method__row {
		grid-template-columns: 3.25rem minmax(0, 1fr);
		column-gap: var(--space-4);
		padding: var(--space-5) 0;
	}

	.working-method__num {
		font-size: 2.25rem;
	}

	.working-method__copy {
		padding-top: 0.15rem;
	}

	.working-method__row-title {
		font-size: 1.35rem;
	}

	.working-method__row-text {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Contact CTA (WP6.4 FINAL) – prototype card composition                     */
/* -------------------------------------------------------------------------- */

.contact-cta {
	background-color: var(--color-white);
	padding: clamp(4.75rem, 9vw, 7.5rem) var(--container-padding) clamp(5rem, 10vw, 8rem);
}

.contact-cta__inner {
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

/* Offenes Layout – bewusst ohne Card-Rahmen, Border oder Schatten */
.contact-cta__layout {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.75rem);
	min-height: clamp(26rem, 36vw, 32rem);
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.contact-cta__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1.25rem;
	padding: clamp(0.5rem, 1.5vw, 1.25rem) clamp(0.25rem, 1vw, 0.75rem) clamp(0.5rem, 1.5vw, 1.25rem) 0;
	z-index: 2;
}

.contact-cta__eyebrow {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.contact-cta__eyebrow-line {
	display: block;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 1px;
	background-color: var(--color-primary);
}

.contact-cta__eyebrow-text {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-eyebrow);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
}

.contact-cta__title {
	margin: 0;
	max-width: 11ch;
	font-family: var(--font-display);
	font-size: var(--font-size-h2);
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-heading);
	letter-spacing: 0.005em;
	color: var(--color-ink);
}

.contact-cta__title-line,
.contact-cta__title-accent {
	display: block;
	white-space: nowrap;
}

.contact-cta__title-accent {
	color: var(--color-primary);
}

.contact-cta__text {
	margin: 0;
	max-width: 26rem;
	font-family: var(--font-body);
	font-size: clamp(1rem, 1.1vw, 1.1rem);
	font-weight: var(--font-weight-regular);
	line-height: 1.55;
	color: var(--color-text);
}

.contact-cta__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 0.55rem 0 0;
}

/* Gleicher Primary wie Header/Hero – keine Pill-Sonderform */
.contact-cta__button.button--primary {
	gap: 0.5rem;
}

.contact-cta__button-icon {
	flex-shrink: 0;
}

.contact-cta__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: clamp(22rem, 34vw, 30rem);
	isolation: isolate;
}

.contact-cta__picture {
	display: block;
	width: 100%;
	max-width: 46rem;
	margin-inline: auto 0;
}

.contact-cta__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: right center;
}

.contact-cta__badge {
	position: absolute;
	top: 42%;
	left: -0.35rem;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 8rem;
	height: 8rem;
	padding: 0.9rem;
	text-decoration: none;
	color: var(--color-white);
	background-color: var(--color-gray-900);
	border-radius: 50%;
	box-shadow: 0 16px 34px rgba(17, 24, 39, 0.22);
	transform: translateY(-50%);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-cta__badge:hover,
.contact-cta__badge:focus-visible {
	color: var(--color-white);
	text-decoration: none;
	transform: translateY(-50%) scale(1.03);
	box-shadow: 0 18px 36px rgba(17, 24, 39, 0.28);
}

.contact-cta__badge:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

.contact-cta__badge-ring {
	position: absolute;
	inset: 0.35rem;
	border-radius: 50%;
	border: 1.5px solid transparent;
	border-left-color: var(--color-primary);
	border-top-color: rgba(0, 175, 212, 0.55);
	transform: rotate(-18deg);
	pointer-events: none;
}

.contact-cta__badge-icon {
	display: inline-flex;
	color: var(--color-white);
}

.contact-cta__badge-svg {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
}

.contact-cta__badge-label {
	max-width: 6.2rem;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
}

.contact-cta__badge-arrow {
	font-size: 0.85rem;
	line-height: 1;
	opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
	.contact-cta__button,
	.contact-cta__badge {
		transition: none;
	}

	.contact-cta__badge:hover,
	.contact-cta__badge:focus-visible {
		transform: translateY(-50%);
	}
}

@media (max-width: 1024px) {
	.contact-cta {
		padding: clamp(3.75rem, 6vw, 5rem) 30px clamp(4.5rem, 8vw, 6rem);
	}

	.contact-cta__layout {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		min-height: 0;
	}

	.contact-cta__content {
		padding: 0;
		gap: 1.15rem;
	}

	.contact-cta__title {
		max-width: none;
	}

	.contact-cta__title-line,
	.contact-cta__title-accent {
		white-space: normal;
	}

	.contact-cta__media {
		min-height: 0;
		justify-content: center;
	}

	.contact-cta__picture {
		max-width: 36rem;
		margin-inline: auto;
	}

	.contact-cta__badge {
		top: auto;
		bottom: 8%;
		left: 6%;
		transform: none;
	}

	.contact-cta__badge:hover,
	.contact-cta__badge:focus-visible {
		transform: scale(1.03);
	}
}

@media (max-width: 767px) {
	.contact-cta {
		padding: clamp(3rem, 9vw, 4rem) 15px clamp(3.75rem, 10vw, 5rem);
	}

	.contact-cta__content {
		padding: 0;
	}

	.contact-cta__text {
		max-width: none;
	}

	.contact-cta__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.9rem;
	}

	.contact-cta__button.button--primary {
		width: 100%;
		justify-content: center;
	}

	.contact-cta__badge {
		width: 6.75rem;
		height: 6.75rem;
		left: 4%;
		bottom: 6%;
	}

	.contact-cta__badge-label {
		font-size: 0.68rem;
	}
}

/* -------------------------------------------------------------------------- */
/* Site footer (WP6.6) – prototype corrections                                */
/* -------------------------------------------------------------------------- */

.site-footer {
	--site-footer-divider: 1px solid rgba(0, 175, 212, 0.18);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--color-gray-300);
	padding: clamp(4.5rem, 8vw, 6.5rem) var(--container-padding) var(--space-5);
	background-color: var(--color-gray-900);
	background-image:
		radial-gradient(ellipse 70% 55% at 50% 35%, rgba(0, 175, 212, 0.08) 0%, transparent 68%),
		radial-gradient(ellipse 45% 40% at 12% 80%, rgba(0, 175, 212, 0.04) 0%, transparent 70%),
		radial-gradient(ellipse 40% 35% at 88% 20%, rgba(0, 175, 212, 0.045) 0%, transparent 65%),
		linear-gradient(180deg, #0c1116 0%, #080a0c 55%, #060708 100%);
}

/* Footer blueprints as lazy <img> (PERF-IMG-001) – visual parity with former CSS backgrounds */
.site-footer__deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0.72;
	-webkit-mask-image: linear-gradient(
		90deg,
		#000 0%,
		#000 22%,
		rgba(0, 0, 0, 0.35) 40%,
		transparent 48%,
		transparent 52%,
		rgba(0, 0, 0, 0.35) 60%,
		#000 78%,
		#000 100%
	);
	mask-image: linear-gradient(
		90deg,
		#000 0%,
		#000 22%,
		rgba(0, 0, 0, 0.35) 40%,
		transparent 48%,
		transparent 52%,
		rgba(0, 0, 0, 0.35) 60%,
		#000 78%,
		#000 100%
	);
}

.site-footer__deco-img {
	position: absolute;
	top: 0;
	display: block;
	height: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.site-footer__deco-img--left {
	left: -4%;
	top: 8%;
	width: min(34rem, 38vw);
}

.site-footer__deco-img--right {
	right: -3%;
	top: 0;
	width: min(36rem, 40vw);
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(2.75rem, 5vw, 3.75rem);
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.site-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(0, 0.75fr);
	align-items: stretch;
	column-gap: 0;
	row-gap: 0;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100%;
	padding-block: 0;
	padding-inline: clamp(1.25rem, 2.4vw, 2.25rem);
}

.site-footer__col--brand {
	padding-left: 0;
}

.site-footer__col--legal {
	padding-right: 0;
}

/* Einheitliche vertikale Divider: gleiche Höhe & Y-Position über Grid-Stretch */
.site-footer__col--nav,
.site-footer__col--contact,
.site-footer__col--legal {
	border-left: var(--site-footer-divider);
}

.site-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	text-decoration: none;
	color: var(--color-white);
}

.site-footer__brand:hover,
.site-footer__brand:focus-visible {
	color: var(--color-white);
	text-decoration: none;
}

.site-footer__logo {
	display: block;
	width: auto;
	height: 72px;
	max-width: min(100%, 11rem);
	object-fit: contain;
	flex-shrink: 0;
}

.site-footer__wordmark {
	display: none;
	font-family: var(--font-ui);
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	font-weight: var(--font-weight-extrabold);
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-white);
}

.site-footer__tagline {
	margin: var(--space-5) 0 0;
	max-width: 26rem;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
}

.site-footer__heading {
	margin: 0 0 var(--space-5);
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-eyebrow);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
}

.site-footer__menu,
.site-footer__contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
}

.site-footer__menu a {
	font-family: var(--font-ui);
	font-size: 0.975rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.01em;
	line-height: var(--line-height-ui);
	color: var(--color-white);
	text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible,
.site-footer__menu .current-menu-item > a {
	color: var(--color-primary);
}

.site-footer__menu a:focus-visible,
.site-footer__contact-row:focus-visible,
.site-footer__brand:focus-visible,
.site-footer__credit-link:focus-visible {
	outline: 2px solid var(--color-primary-hover);
	outline-offset: 3px;
}

.site-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: 1.05rem;
}

.site-footer__contact-item {
	margin: 0;
	padding: 0;
}

.site-footer__contact-row {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	align-items: start;
	column-gap: 0.75rem;
	padding: 0;
	text-decoration: none;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	transition: color 0.2s ease;
}

.site-footer__contact-row--static {
	cursor: default;
}

.site-footer__contact-row:hover,
.site-footer__contact-row:focus-visible {
	background: none;
	border: 0;
	text-decoration: none;
	color: inherit;
	transform: none;
}

.site-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	margin-top: 0.1rem;
	border-radius: 0;
	background: none;
	color: var(--color-primary);
}

.site-footer__contact-svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	color: inherit;
}

.site-footer__contact-text {
	min-width: 0;
	font-family: var(--font-body);
	font-size: 0.975rem;
	font-weight: var(--font-weight-regular);
	line-height: 1.55;
	color: var(--color-white);
	word-break: break-word;
}

.site-footer__contact-row:hover .site-footer__contact-text,
.site-footer__contact-row:focus-visible .site-footer__contact-text {
	color: var(--color-primary);
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid rgba(0, 175, 212, 0.22);
}

.site-footer__copyright,
.site-footer__credit {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--font-size-small);
	letter-spacing: 0.02em;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.45);
}

.site-footer__credit-heart {
	display: inline;
	margin-inline: 0.15em;
	color: var(--color-primary); /* #00AFD4 */
	font-style: normal;
}

.site-footer__credit-link {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

.site-footer__credit-link:hover,
.site-footer__credit-link:focus-visible {
	color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__contact-row {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.site-footer {
		padding: var(--space-10) 30px var(--space-5);
	}

	.site-footer__deco {
		opacity: 0.58;
	}

	.site-footer__deco-img--left {
		width: min(28rem, 48vw);
	}

	.site-footer__deco-img--right {
		width: min(30rem, 50vw);
	}

	.site-footer__main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 0;
		row-gap: var(--space-8);
		align-items: stretch;
	}

	.site-footer__col {
		padding-inline: 0;
	}

	.site-footer__col--brand {
		grid-column: 1 / -1;
		padding-bottom: var(--space-6);
		border-bottom: var(--site-footer-divider);
		border-left: 0;
	}

	.site-footer__col--nav,
	.site-footer__col--contact,
	.site-footer__col--legal {
		border-left: 0;
	}

	.site-footer__col--contact,
	.site-footer__col--legal {
		border-left: var(--site-footer-divider);
		padding-left: var(--space-6);
	}
}

@media (max-width: 767px) {
	.site-footer {
		padding: var(--space-10) 15px var(--space-5);
	}

	.site-footer__deco {
		opacity: 0.48;
		-webkit-mask-image: linear-gradient(
			90deg,
			#000 0%,
			#000 16%,
			rgba(0, 0, 0, 0.3) 34%,
			transparent 46%,
			transparent 54%,
			rgba(0, 0, 0, 0.3) 66%,
			#000 84%,
			#000 100%
		);
		mask-image: linear-gradient(
			90deg,
			#000 0%,
			#000 16%,
			rgba(0, 0, 0, 0.3) 34%,
			transparent 46%,
			transparent 54%,
			rgba(0, 0, 0, 0.3) 66%,
			#000 84%,
			#000 100%
		);
	}

	.site-footer__deco-img--left {
		width: min(22rem, 78vw);
	}

	.site-footer__deco-img--right {
		width: min(24rem, 80vw);
	}

	.site-footer__main {
		grid-template-columns: 1fr;
		row-gap: var(--space-7);
	}

	.site-footer__col--brand {
		grid-column: auto;
		border-bottom: 0;
		padding-bottom: 0;
	}

	.site-footer__col--nav,
	.site-footer__col--contact,
	.site-footer__col--legal {
		border-left: 0;
		padding-left: 0;
	}

	.site-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}
}


/* -------------------------------------------------------------------------- */
/* WP7 – Subpages: page hero, sections, forms, career, legal, 404             */
/* -------------------------------------------------------------------------- */

.page-hero {
	background-color: var(--color-white);
	padding: clamp(4rem, 8vw, 6.5rem) var(--container-padding) clamp(3.5rem, 6vw, 5rem);
}

.page-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-9);
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
	align-items: center;
}

.page-hero--split .page-hero__inner,
.page-hero--career .page-hero__inner {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.page-hero--compact {
	padding-block: clamp(3.25rem, 6vw, 4.75rem) clamp(2.5rem, 4vw, 3.5rem);
	background-color: var(--color-blue-25);
}

.page-hero__eyebrow,
.page-section__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
}

.page-hero__eyebrow-line,
.page-section__eyebrow-line {
	display: block;
	width: 50px;
	height: 1px;
	background-color: var(--color-primary);
	flex: 0 0 auto;
}

.page-hero__eyebrow-text,
.page-section__eyebrow span:last-child {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
	line-height: var(--line-height-eyebrow);
}

.page-hero__title,
.page-section__title,
.page-cta-band__title,
.error-404__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-heading);
	color: var(--color-ink);
}

.page-hero__title {
	font-size: clamp(2.35rem, 5vw, 3.5rem);
	max-width: 18ch;
}

.page-hero__accent {
	color: var(--color-primary);
}

.page-hero__lead,
.page-section__lead,
.page-section__text,
.page-cta-band__text,
.error-404__text {
	font-family: var(--font-body);
	font-size: var(--font-size-body-lg);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.page-hero__lead {
	margin: var(--space-5) 0 0;
	max-width: 36rem;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-7);
}

.page-hero__media {
	min-width: 0;
	border-radius: 4px;
	overflow: hidden;
}

.page-hero__image,
.page-section__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.page-hero--career .page-hero__media {
	min-height: 22rem;
}

.page-hero--career .page-hero__image {
	height: 100%;
	min-height: 22rem;
}

.lang-switch {
	display: inline-flex;
	align-items: stretch;
	flex-shrink: 0;
	margin: 0;
	padding: 2px;
	gap: 1px;
	border: 1px solid rgba(19, 32, 43, 0.12);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 8px rgba(19, 32, 43, 0.045);
	font-family: var(--font-ui);
}

.lang-switch__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.28rem;
	min-width: 2.55rem;
	min-height: 30px;
	padding: 0.22rem 0.48rem;
	border-radius: 999px;
	color: var(--color-ink);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch__option:hover,
.lang-switch__option:focus-visible {
	color: var(--color-primary);
	text-decoration: none;
	background-color: rgba(0, 175, 212, 0.08);
}

.lang-switch__option:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.lang-switch__option.is-active {
	color: var(--color-primary);
	background-color: rgba(0, 175, 212, 0.16);
	box-shadow: inset 0 0 0 1px rgba(0, 175, 212, 0.28);
}

.lang-switch__option.is-active:hover,
.lang-switch__option.is-active:focus-visible {
	color: var(--color-primary);
	background-color: rgba(0, 175, 212, 0.2);
}

.lang-switch__code {
	font-size: 0.66rem;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	line-height: 1;
}

.lang-switch__flag {
	display: block;
	flex: 0 0 auto;
	width: 0.82rem;
	height: 0.58rem;
	border-radius: 1px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(19, 32, 43, 0.12);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.lang-switch__flag--de {
	background-image: linear-gradient(
		to bottom,
		#000 0 33.33%,
		#dd0000 33.33% 66.66%,
		#ffce00 66.66% 100%
	);
}

.lang-switch__flag--pl {
	background-image: linear-gradient(
		to bottom,
		#ffffff 0 50%,
		#dc143c 50% 100%
	);
}

.career-hero__lang {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin: 0 0 0.7rem;
}

.career-hero__lang .lang-switch {
	margin-top: 0;
	transform: scale(0.88);
	transform-origin: left center;
}

.page-section {
	padding: clamp(3.75rem, 7vw, 6rem) var(--container-padding);
	background-color: var(--color-white);
}

.page-section--surface {
	background-color: var(--color-blue-40);
}

.page-section--muted {
	background-color: var(--color-blue-25);
}

.page-section__inner {
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.page-section__inner--narrow {
	max-width: min(100%, 48rem);
}

.page-section__inner--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.page-section__inner--split-reverse .page-section__copy {
	order: 2;
}

/* Contact page content band (WP10.4) */
.contact-band {
	position: relative;
	background-color: #ffffff;
	padding: var(--section-spacing) var(--container-padding);
}

.contact-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.contact-band__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.contact-band__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--space-5);
}

.contact-band__eyebrow-line {
	display: block;
	width: 2.5rem;
	height: 2px;
	background-color: var(--color-primary);
}

.contact-band__eyebrow-text {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.contact-band__title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-size: var(--font-size-h2);
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-heading);
	color: #13202b;
	max-width: none;
}

.contact-band__lead {
	margin: 0 0 var(--space-7);
	max-width: min(42ch, 100%);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.contact-band__channels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--color-border);
}

.contact-band__channels > li {
	border-bottom: 1px solid var(--color-border);
}

.contact-band__channel {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: var(--space-5) 0;
	color: inherit;
	text-decoration: none;
	min-width: 0;
	transition: color var(--button-transition);
}

a.contact-band__channel:hover .contact-band__channel-value,
a.contact-band__channel:focus-visible .contact-band__channel-value {
	color: var(--color-primary);
}

a.contact-band__channel:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: 4px;
}

.contact-band__channel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-white));
	color: var(--color-primary);
}

.contact-band__channel-svg {
	display: block;
	width: 1.2rem;
	height: 1.2rem;
}

.contact-band__channel-svg--brand {
	width: 1.1rem;
	height: 1.1rem;
}

.contact-band__channel-copy {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.contact-band__channel-label {
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(19, 32, 43, 0.55);
}

.contact-band__channel-value {
	font-family: var(--font-ui);
	font-size: 0.98rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-ink);
	word-break: break-word;
	transition: color var(--button-transition);
}

.contact-band__note {
	margin: var(--space-7) 0 0;
	max-width: 36ch;
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	line-height: 1.5;
	color: var(--color-text-muted);
}

.contact-band__aside {
	min-width: 0;
	align-self: start;
}

.contact-band__form-card {
	padding: clamp(1.35rem, 3vw, 1.9rem);
	border-radius: var(--radius-lg);
	background-color: var(--color-white);
	box-shadow:
		0 1px 0 rgba(19, 32, 43, 0.04),
		0 18px 48px rgba(19, 32, 43, 0.07);
}

.contact-band__form-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-ui);
	font-size: 1.35rem;
	font-weight: var(--font-weight-extrabold);
	line-height: 1.25;
	color: var(--color-ink);
}

.contact-band__form-text {
	margin: 0 0 var(--space-5);
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	line-height: 1.5;
	color: var(--color-text);
}

.contact-band__form {
	min-width: 0;
}

/* NinjaMatic in contact card – outer chrome only; fields unchanged */
.contact-band__form .nfs-public-form {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	--nfs-primary: #00afd4;
	--nfs-form-max-width: 100%;
	--nfs-form-width: 100%;
	--nfs-form-padding: 0px;
	--nfs-form-shadow: none;
}

.contact-band__form .nfs-public-headline {
	display: none;
}

.contact-band__form .nfs-public-form .nfs-public-submit {
	width: 100%;
	background-color: #00afd4;
	color: #ffffff;
}

.contact-band__form .nfs-public-form .nfs-public-submit:hover,
.contact-band__form .nfs-public-form .nfs-public-submit:focus-visible {
	background-color: var(--color-primary-hover);
	box-shadow: var(--shadow-button-hover);
}

@media (max-width: 1024px) {
	.contact-band__inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

@media (max-width: 767px) {
	.contact-band__form-card {
		padding: 1.15rem;
	}

	.contact-band__lead {
		max-width: none;
	}
}

.page-section__title {
	font-size: clamp(2rem, 3.5vw, 3rem);
	max-width: 22ch;
}

.page-section__lead {
	margin: var(--space-5) 0 0;
	max-width: 40rem;
}

.page-section__text {
	margin: var(--space-5) 0 0;
	max-width: 40rem;
	font-size: var(--font-size-body);
}

.page-section__note {
	margin: var(--space-3) 0 0;
	font-family: var(--font-ui);
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.page-section__meta {
	margin: var(--space-6) 0 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--color-ink);
	line-height: 1.5;
}

.about-process {
	list-style: none;
	margin: var(--space-9) 0 0;
	padding: 0;
	border-top: 1px solid rgba(0, 175, 212, 0.35);
}

.about-process__item {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: var(--space-5);
	padding: var(--space-6) 0;
	border-bottom: 1px solid rgba(0, 175, 212, 0.35);
}

.about-process__num {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 3vw, 3rem);
	color: var(--color-primary);
	line-height: 0.95;
}

.about-process__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.8vw, 1.7rem);
	font-weight: 400;
	font-synthesis: none;
	color: var(--color-ink);
}

.about-process__text {
	margin: var(--space-3) 0 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.page-cta-band {
	background-color: var(--color-ink);
	color: var(--color-white);
	padding: clamp(3rem, 6vw, 4.5rem) var(--container-padding);
}

.page-cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.page-cta-band__title {
	color: var(--color-white);
	font-size: clamp(1.85rem, 3vw, 2.5rem);
}

.page-cta-band__text {
	margin: var(--space-3) 0 0;
	color: rgba(255, 255, 255, 0.82);
	max-width: 34rem;
}


.brodkorb-form__field,
.brodkorb-form__check,
.brodkorb-form__actions,
.brodkorb-form__hint {
	margin: 0 0 var(--space-4);
}

.brodkorb-form__field label,
.brodkorb-form__check label {
	display: block;
	font-family: var(--font-ui);
	font-size: 0.875rem;
	font-weight: var(--font-weight-medium);
	color: var(--color-ink);
	margin-bottom: 0.4rem;
}

.brodkorb-form__field input,
.brodkorb-form__field textarea {
	width: 100%;
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-ink);
	background: var(--color-white);
}

.brodkorb-form__field input:focus,
.brodkorb-form__field textarea:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
	border-color: var(--color-primary);
}

.brodkorb-form__check label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.65rem;
	align-items: start;
	font-weight: var(--font-weight-regular);
	line-height: 1.45;
	color: var(--color-text);
}

.brodkorb-form__check a {
	color: var(--color-primary);
}

.brodkorb-form__hp {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

.brodkorb-form__hint {
	font-family: var(--font-ui);
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.form-notice {
	margin: 0 0 var(--space-5);
	padding: 0.9rem 1rem;
	border-radius: 2px;
}

.form-notice--success {
	background: rgba(105, 213, 54, 0.12);
	color: var(--color-ink);
}

.form-notice--error {
	background: rgba(255, 105, 105, 0.12);
	color: var(--color-ink);
}

.form-notice__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
}

.career-facts {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.career-facts li {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--color-text);
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.career-list {
	margin: var(--space-6) 0 0;
	padding-left: 1.15rem;
	display: grid;
	gap: 0.75rem;
}

.career-list li {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.legal-content {
	padding: clamp(3rem, 5.5vw, 4.75rem) var(--container-padding) clamp(4.5rem, 8vw, 7rem);
	background:
		linear-gradient(180deg, var(--color-blue-25) 0%, var(--color-white) 7.5rem);
	text-align: left;
}

.legal-content__shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.legal-content--has-toc .legal-content__shell {
	grid-template-columns: minmax(0, 1fr);
}

.legal-content__body {
	width: min(100%, 42rem);
	max-width: 65ch;
	margin: 0;
	justify-self: start;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: 1.7;
	color: var(--color-text);
	text-align: left;
}

.legal-content__body > *:first-child {
	margin-top: 0;
}

.legal-content__body > *:last-child {
	margin-bottom: 0;
}

.legal-content__body h2 {
	margin: var(--space-9) 0 var(--space-4);
	padding-top: var(--space-6);
	border-top: 1px solid rgba(37, 37, 37, 0.1);
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 2vw, 1.75rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.2;
	color: var(--color-ink);
	scroll-margin-top: calc(var(--header-sticky-top, 12px) + var(--header-bar-height, 88px) + 20px);
}

.legal-content__body > h2:first-child,
.legal-content__body > :first-child + h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.legal-content__body h3 {
	margin: var(--space-6) 0 var(--space-3);
	font-family: var(--font-ui);
	font-size: 1.05rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-ink);
	scroll-margin-top: calc(var(--header-sticky-top, 12px) + var(--header-bar-height, 88px) + 20px);
}

.legal-content__body p,
.legal-content__body ul,
.legal-content__body ol {
	margin: 0 0 var(--space-4);
}

.legal-content__body ul,
.legal-content__body ol {
	padding-left: 1.25rem;
}

.legal-content__body li + li {
	margin-top: 0.4rem;
}

.legal-content__body a {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.legal-content__body a:hover,
.legal-content__body a:focus-visible {
	color: var(--color-primary-hover);
}

.legal-content__body b,
.legal-content__body strong {
	font-family: var(--font-ui);
	font-weight: var(--font-weight-semibold);
	color: var(--color-ink);
}

.legal-toc {
	padding: var(--space-5) var(--space-6);
	border: 1px solid rgba(37, 37, 37, 0.08);
	border-radius: 4px;
	background: var(--color-white);
}

.legal-toc__label {
	margin: 0 0 var(--space-4);
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
	line-height: var(--line-height-eyebrow);
}

.legal-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.legal-toc__link {
	display: block;
	padding: 0.45rem 0;
	font-family: var(--font-ui);
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.legal-toc__link:hover,
.legal-toc__link:focus-visible {
	color: var(--color-ink);
	border-bottom-color: rgba(0, 175, 212, 0.45);
}

@media (min-width: 1024px) {
	.legal-content--has-toc .legal-content__shell {
		grid-template-columns: minmax(13.5rem, 17rem) minmax(0, 42rem);
		column-gap: clamp(2.5rem, 4vw, 4.5rem);
		justify-content: start;
	}

	.legal-toc {
		position: sticky;
		top: calc(var(--header-sticky-top, 12px) + var(--header-bar-height, 88px) + 12px);
	}

	.legal-content--has-toc .legal-content__body {
		width: 100%;
	}
}

/* Fullscreen 404: fill viewport below header */
.error404 .site-main--error {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--header-height));
	min-height: calc(100vh - var(--header-height));
}

.error-404 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100dvh - var(--header-height));
	min-height: calc(100vh - var(--header-height));
	width: 100%;
	padding: clamp(2.5rem, 6vw, 4rem) var(--container-padding);
	text-align: center;
	background:
		radial-gradient(ellipse 60% 55% at 50% 40%, rgba(0, 175, 212, 0.1), transparent 70%),
		var(--color-blue-25);
}

.error-404__deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.14;
	background-image:
		url("../images/brodkorb-footer-bauzeichnung-links.webp"),
		url("../images/brodkorb-footer-bauzeichnung-rechts.webp");
	background-repeat: no-repeat, no-repeat;
	background-position: left -8% center, right -8% center;
	background-size: min(28rem, 42vw) auto, min(28rem, 42vw) auto;
	filter: invert(1) hue-rotate(180deg) brightness(0.35);
}

.error-404__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 36rem);
	margin-inline: auto;
}

.error-404__eyebrow {
	justify-content: center;
}

.error-404__title {
	font-size: clamp(2.35rem, 5vw, 3.35rem);
	max-width: 14ch;
	text-wrap: balance;
}

.error-404__text {
	margin: var(--space-5) 0 0;
	max-width: 32rem;
	text-wrap: pretty;
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-7);
}

@media (max-width: 1024px) {
	.page-hero--split .page-hero__inner,
	.page-hero--career .page-hero__inner,
	.page-section__inner--split,
	.page-section__inner--contact {
		grid-template-columns: 1fr;
	}

	.page-section__inner--split-reverse .page-section__copy {
		order: 0;
	}

	.page-hero,
	.page-section,
	.legal-content,
	.error-404 {
		padding-inline: 30px;
	}
}

@media (max-width: 767px) {
	.page-hero,
	.page-section,
	.legal-content,
	.error-404,
	.page-cta-band {
		padding-inline: 15px;
	}

	.about-process__item {
		grid-template-columns: 3.25rem minmax(0, 1fr);
	}

	.page-career .page-cta-band {
		position: sticky;
		bottom: 0;
		z-index: 5;
		padding-block: var(--space-4);
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
	}

	.page-career .page-cta-band__inner {
		gap: var(--space-3);
	}

	.page-career .page-cta-band__text {
		display: none;
	}
}

/* -------------------------------------------------------------------------- */
/* WP8.3 – About page: Premium Agency Redesign                                 */
/* Art Direction: BESTAND · HANDWERK · ARCHITEKTUR                             */
/* -------------------------------------------------------------------------- */

.page-about {
	overflow-x: clip;
}

.about-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
}

.about-eyebrow__line {
	display: block;
	width: 50px;
	height: 1px;
	flex: 0 0 auto;
	background-color: var(--color-primary);
}

.about-eyebrow__text {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
	line-height: var(--line-height-eyebrow);
}

.about-eyebrow--on-dark .about-eyebrow__text {
	color: var(--color-primary);
}

/* --- 01 Hero WP8.5 – flächig hinter Header, weicher Bildübergang --- */
.about-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	height: 617px; /* 767 − 150 */
	padding-inline: var(--container-padding);
	background: #ffffff;
	box-sizing: border-box;
}

/* WP8.4.6 – Foto + diagonale Grenze als SVG-Komposition (clipPath) */
.about-hero__artwork {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.about-hero__mobile-media,
.about-hero__mobile-bar {
	display: none;
}

.about-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: min(100%, var(--container-content-width));
	max-width: var(--container-content-width);
	height: 100%;
	margin-inline: auto;
	padding-block: calc(var(--header-height) + 2.25rem) clamp(2.75rem, 5vw, 4rem);
	padding-inline: 0;
	box-sizing: border-box;
}

.about-hero__crumb {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 0 0 28px;
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.5px;
	line-height: 20px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #00afd4;
}

.about-hero__crumb::after {
	content: "";
	display: block;
	width: 120px;
	height: 1px;
	flex: 0 0 auto;
	margin-left: 4px; /* gap 12px + 4px = 16px zum Text */
	background-color: rgba(0, 175, 212, 0.45);
}

.about-hero__crumb-home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #00afd4;
	text-decoration: none;
}

.about-hero__crumb-home:hover,
.about-hero__crumb-home:focus-visible {
	color: #00afd4;
	opacity: 0.85;
}

.about-hero__crumb-icon {
	display: block;
	width: 16px;
	height: 16px;
}

.about-hero__crumb-sep {
	line-height: 20px;
	color: #00afd4;
	opacity: 1;
}

.about-hero__crumb-current {
	color: #00afd4;
}

.about-hero__title {
	margin: 0;
	max-width: none;
	font-family: var(--font-display);
	font-size: clamp(2.75rem, 5.5vw, 3.5rem); /* tablet/default; Desktop ≥1200 siehe unten */
	font-weight: 400;
	font-synthesis: none;
	line-height: 0.98;
	letter-spacing: 0.01em;
	color: var(--color-ink);
}

/* Desktop: Unterseiten-H1 kleiner – Startseite (.hero) unverändert */
@media (min-width: 1200px) {
	.about-hero__title {
		font-size: clamp(2.75rem, 3.2vw, 3.5rem);
	}
}

.about-hero__title-row,
.about-hero__title-accent {
	display: block;
	white-space: nowrap;
}

.about-hero__title-accent {
	color: var(--color-primary);
}

/* Single-line H1 (e.g. Über uns: „Wer wir sind.“) */
.about-hero__title--inline {
	white-space: nowrap;
}

.about-hero__title--inline .about-hero__title-row,
.about-hero__title--inline .about-hero__title-accent {
	display: inline;
	white-space: nowrap;
}

.about-hero__title--inline .about-hero__title-accent::before {
	content: "\00a0";
}

/* WP8.6 – Minimal Hero (Impressum / Datenschutz / AGB) */
.about-hero--minimal {
	height: auto;
	min-height: 320px;
}

.about-hero--minimal .about-hero__title {
	max-width: 18ch;
	white-space: normal;
}

.about-hero--minimal .about-hero__title-row {
	white-space: normal;
}

.about-hero--minimal .about-hero__mobile-media {
	display: none !important;
}

.page-career__lang {
	padding-top: var(--space-6);
	padding-bottom: 0;
}

.error-404--after-hero {
	position: relative;
	padding: clamp(2.5rem, 5vw, 4rem) var(--container-padding) clamp(4rem, 8vw, 6rem);
	background-color: var(--color-white);
}

.error-404--after-hero .error-404__deco {
	display: none;
}

.error-404--after-hero .error-404__inner {
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
	padding: 0;
}

.error-404--after-hero .error-404__text {
	max-width: 40rem;
	margin: 0 0 var(--space-7);
}

@media (max-width: 1024px) {
	.about-hero--minimal {
		min-height: 280px;
	}
}

@media (max-width: 767px) {
	.about-hero--minimal {
		min-height: 240px;
	}

	.about-hero--minimal .about-hero__artwork {
		display: block;
		opacity: 0.9;
	}

	.about-hero--minimal .about-hero__mobile-bar {
		display: block;
		opacity: 0.28;
	}
}

/* --- WP9 About scroll stage + story cards --- */
.about-scroll {
	--about-scroll-sticky-top: calc(var(--header-sticky-top) + var(--header-bar-height) + 16px);
	position: relative;
	isolation: isolate;
	background-color: #eef5f9;
	background-image:
		radial-gradient(ellipse 70% 55% at 0% 8%, rgba(0, 175, 212, 0.16), transparent 58%),
		radial-gradient(ellipse 65% 50% at 100% 92%, rgba(19, 32, 43, 0.07), transparent 60%),
		radial-gradient(ellipse 50% 38% at 100% 6%, rgba(0, 175, 212, 0.1), transparent 68%),
		radial-gradient(ellipse 40% 30% at 50% 50%, rgba(255, 255, 255, 0.55), transparent 70%),
		linear-gradient(168deg, #f7fbfd 0%, #e8f2f7 42%, #f2f7fa 100%);
	padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
}

/* Soft architectural grid – strongest in the side margins around the cards */
.about-scroll::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(19, 32, 43, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(19, 32, 43, 0.045) 1px, transparent 1px),
		linear-gradient(rgba(0, 175, 212, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 175, 212, 0.05) 1px, transparent 1px);
	background-size: 64px 64px, 64px 64px, 320px 320px, 320px 320px;
	background-position: center top;
	opacity: 0.85;
	-webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 45%, transparent 35%, #000 78%);
	mask-image: radial-gradient(ellipse 58% 62% at 50% 45%, transparent 35%, #000 78%);
}

/* Construction rings + soft vertical edge light – sit in the free margins */
.about-scroll::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at calc(100% - 3.5rem) 12%, transparent 0, transparent 5.5rem, rgba(0, 175, 212, 0.14) 5.65rem, transparent 5.9rem),
		radial-gradient(circle at calc(100% - 3.5rem) 12%, transparent 0, transparent 8.75rem, rgba(19, 32, 43, 0.07) 8.9rem, transparent 9.2rem),
		radial-gradient(circle at 3rem 78%, transparent 0, transparent 4.25rem, rgba(0, 175, 212, 0.1) 4.4rem, transparent 4.65rem),
		linear-gradient(90deg, rgba(0, 175, 212, 0.07) 0%, transparent 12%, transparent 88%, rgba(0, 175, 212, 0.05) 100%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, transparent 12%, transparent 88%, rgba(255, 255, 255, 0.45) 100%);
}

.about-scroll__sticky,
.about-scroll__viewport,
.about-scroll__track {
	position: relative;
	z-index: 1;
	width: 100%;
}

.about-scroll__track {
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vw, 4rem);
	padding-inline: var(--container-padding);
	box-sizing: border-box;
}

.about-scroll__slot {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Connector line between cards – on the track, behind the card surfaces */
.about-scroll__rail {
	display: none;
}

.about-scroll.is-carousel-active .about-scroll__rail {
	--about-scroll-progress: 0;
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	/* Must span all slots – percentage width only covers the visible track box */
	width: calc(var(--about-scroll-card-count, 4) * var(--about-scroll-slot-width, 100%));
	height: 1.25rem;
	z-index: 0;
	pointer-events: none;
	transform: translateY(-50%);
}

.about-scroll__rail-base,
.about-scroll__rail-progress {
	position: absolute;
	top: 50%;
	height: 1px;
	border-radius: 1px;
	transform: translateY(-50%);
}

.about-scroll__rail-base {
	left: calc(100% / var(--about-scroll-card-count, 4) / 2);
	right: calc(100% / var(--about-scroll-card-count, 4) / 2);
	background: rgba(19, 32, 43, 0.2);
}

.about-scroll__rail-progress {
	left: calc(100% / var(--about-scroll-card-count, 4) / 2);
	width: calc(100% - (100% / var(--about-scroll-card-count, 4)));
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	background: linear-gradient(
		90deg,
		rgba(0, 175, 212, 0.35) 0%,
		rgba(0, 175, 212, 0.9) 78%,
		var(--color-primary) 100%
	);
}

.about-scroll.is-carousel-active .about-scroll__rail-progress {
	will-change: transform;
}

.about-scroll__rail-glow {
	position: absolute;
	top: 50%;
	left: calc(100% / var(--about-scroll-card-count, 4) / 2);
	width: 1.1rem;
	height: 1.1rem;
	border: 0;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(0, 175, 212, 0.55) 0%,
		rgba(0, 175, 212, 0.22) 38%,
		rgba(0, 175, 212, 0.06) 62%,
		transparent 76%
	);
	box-shadow: none;
	filter: blur(2px);
	opacity: 0.85;
	transform: translate(-50%, -50%);
}

.about-scroll.is-carousel-active .about-scroll__rail-glow {
	will-change: left;
}

/* Soft ports only on the inner card edges (between cards) */
.about-scroll.is-carousel-active .about-firm::before,
.about-scroll.is-carousel-active .about-firm::after {
	content: "";
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 0.42rem;
	height: 0.42rem;
	border: 0;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(0, 175, 212, 0.5) 0%,
		rgba(0, 175, 212, 0.18) 45%,
		transparent 72%
	);
	box-shadow: none;
	filter: blur(1px);
	transform: translateY(-50%);
	pointer-events: none;
}

.about-scroll.is-carousel-active .about-firm::before {
	left: -0.2rem;
}

.about-scroll.is-carousel-active .about-firm::after {
	right: -0.2rem;
}

.about-scroll.is-carousel-active .about-scroll__slot--first .about-firm::before,
.about-scroll.is-carousel-active .about-scroll__slot--last .about-firm::after {
	content: none;
	display: none;
}

.about-scroll.is-carousel-active .about-scroll__slot:not([inert]) .about-firm::before,
.about-scroll.is-carousel-active .about-scroll__slot:not([inert]) .about-firm::after {
	background: radial-gradient(
		circle,
		rgba(0, 175, 212, 0.65) 0%,
		rgba(0, 175, 212, 0.22) 42%,
		transparent 72%
	);
}

@media (prefers-reduced-motion: reduce) {
	.about-scroll__rail-progress,
	.about-scroll__rail-glow {
		transition: none;
		will-change: auto;
	}
}

/* Desktop carousel – activated by JS via .is-carousel-active */
.about-scroll.is-carousel-active {
	padding-block: 0;
	/* height set via --about-scroll-height from JS */
	height: var(--about-scroll-height, auto);
}

.about-scroll.is-carousel-active .about-scroll__sticky {
	position: sticky;
	top: var(--about-scroll-sticky-top);
	height: calc(100vh - var(--about-scroll-sticky-top) - 24px);
	height: calc(100dvh - var(--about-scroll-sticky-top) - 24px);
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.about-scroll.is-carousel-active .about-scroll__viewport {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.about-scroll.is-carousel-active .about-scroll__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	height: 100%;
	padding-inline: 0;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.about-scroll.is-carousel-active .about-scroll__slot {
	position: relative;
	z-index: 1;
	flex: 0 0 var(--about-scroll-slot-width, 100%);
	width: var(--about-scroll-slot-width, 100%);
	height: 100%;
	align-items: center;
	padding-block: clamp(0.5rem, 1.5vh, 1.25rem);
	padding-inline: var(--container-padding);
	box-sizing: border-box;
}

.about-scroll.is-carousel-active .about-firm {
	--about-firm-carousel-height: clamp(30rem, 68vh, 42rem);
	display: flex;
	flex-direction: column;
	height: var(--about-firm-carousel-height);
	max-height: 100%;
}

.about-scroll.is-carousel-active .about-firm__shell {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	max-height: 100%;
	min-height: 0;
}

.about-scroll.is-carousel-active .about-firm__main {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
}

.about-scroll.is-carousel-active .about-firm__content {
	min-height: 0;
	overflow-y: auto;
}

.about-scroll.is-carousel-active .about-firm__media {
	min-height: 0;
}

.about-scroll.is-carousel-active .about-firm__bar {
	flex: 0 0 auto;
}

@media (min-width: 1025px) {
	.about-scroll.is-carousel-active .about-firm__title {
		max-width: min(100%, 24ch);
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-scroll.is-carousel-active {
		height: auto !important;
		padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
	}

	.about-scroll.is-carousel-active .about-scroll__sticky {
		position: static;
		height: auto;
		display: block;
	}

	.about-scroll.is-carousel-active .about-scroll__viewport {
		overflow: visible;
		height: auto;
	}

	.about-scroll.is-carousel-active .about-scroll__track {
		display: flex;
		flex-direction: column;
		gap: clamp(2.5rem, 5vw, 4rem);
		height: auto;
		padding-inline: var(--container-padding);
		transform: none !important;
		will-change: auto;
	}

	.about-scroll.is-carousel-active .about-scroll__slot {
		flex: none;
		width: 100%;
		height: auto;
		padding-inline: 0;
	}
}

/* Story card (former about-firm visual master) */
.about-firm {
	position: relative;
	width: min(100%, var(--container-content-width));
	margin: 0;
	padding: 0;
	background: transparent;
}

.about-firm__shell {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-white);
	box-shadow:
		0 1px 0 rgba(19, 32, 43, 0.04),
		0 18px 48px rgba(19, 32, 43, 0.08);
}

.about-firm__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	min-height: clamp(30rem, 44vw, 40rem);
}

.about-firm__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: clamp(2.75rem, 5.5vw, 4.75rem);
	padding-right: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(2.75rem, 5.5vw, 4.75rem);
	padding-left: clamp(2.75rem, 5.5vw, 4.75rem);
	background-color: var(--color-white);
}

.about-firm__title {
	margin: 0 0 var(--space-6);
	max-width: min(100%, 22ch);
	font-family: var(--font-display);
	font-size: clamp(2.15rem, 3.4vw, 3.15rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.08;
	color: var(--color-ink);
}

.about-firm__text {
	margin: 0 0 var(--space-5);
	max-width: 36rem;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.about-firm__text:last-of-type {
	margin-bottom: 0;
}

.about-firm__address {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin-top: clamp(1.35rem, 2.5vw, 1.85rem);
	max-width: 22rem;
	padding: 0.95rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
	border-radius: var(--radius-md);
	background-color: color-mix(in srgb, var(--color-surface) 72%, var(--color-white));
}

.about-firm__address-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-white));
	color: var(--color-primary);
}

.about-firm__address-svg {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
}

.about-firm__address-copy {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	padding-top: 0.1rem;
}

.about-firm__address-label {
	font-family: var(--font-ui);
	font-size: 0.7rem;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(19, 32, 43, 0.5);
}

.about-firm__address-link,
.about-firm__address-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.35;
	color: var(--color-ink);
	text-decoration: none;
}

.about-firm__address-link:hover,
.about-firm__address-link:focus-visible {
	color: var(--color-primary);
}

.about-firm__address-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

.about-firm__address-line {
	display: block;
}

.about-firm__actions {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.about-firm__cta-icon {
	display: block;
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
}

.about-firm__media {
	position: relative;
	margin: 0;
	padding: 0;
	min-height: 100%;
	overflow: hidden;
	line-height: 0;
	background-color: var(--color-surface-muted);
}

.about-firm__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.7s ease;
}

@media (hover: hover) and (pointer: fine) {
	.about-firm__shell:hover .about-firm__image {
		transform: scale(1.03);
	}
}

.about-firm__bar {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding: clamp(1.15rem, 2.2vw, 1.5rem) clamp(1.5rem, 3.5vw, 2.75rem);
	background-color: var(--color-ink);
	color: var(--color-inverse);
}

.about-firm__meta {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-width: 0;
}

.about-firm__meta + .about-firm__meta {
	padding-left: clamp(1.25rem, 3vw, 2.25rem);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.about-firm__meta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--color-inverse);
}

.about-firm__meta-svg {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
}

.about-firm__meta-copy {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.about-firm__meta-link {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.about-firm__meta-link:hover .about-firm__meta-title,
.about-firm__meta-link:focus-visible .about-firm__meta-title {
	color: var(--color-primary-hover);
}

.about-firm__meta-link:focus-visible {
	outline: 2px solid var(--color-primary-hover);
	outline-offset: 3px;
	border-radius: 2px;
}

.about-firm__meta-title {
	font-family: var(--font-ui);
	font-size: 0.92rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.25;
	color: var(--color-inverse);
}

.about-firm__meta-sub {
	font-family: var(--font-body);
	font-size: 0.82rem;
	line-height: 1.35;
	color: rgba(227, 244, 252, 0.72);
}

.about-firm__mark {
	margin: 0;
	justify-self: end;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) {
	.about-firm__image {
		transition: none;
	}

	.about-firm__shell:hover .about-firm__image {
		transform: none;
	}
}

/* --- 03 Stance – Media-Stack + Störer --- */
.about-stance {
	background-color: #f3f6f8;
	padding: clamp(4rem, 8vw, 7rem) var(--container-padding);
}

.about-stance__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.about-stance__media {
	position: relative;
	isolation: isolate;
	min-height: clamp(22rem, 36vw, 30rem);
	padding: 0 0 clamp(3.5rem, 6vw, 5rem) 0;
}

.about-stance__shot {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	line-height: 0;
	background-color: var(--color-surface-muted);
}

.about-stance__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.about-stance__shot--primary {
	position: relative;
	z-index: 1;
	width: 88%;
	aspect-ratio: 16 / 11;
	box-shadow: 0 22px 50px rgba(19, 32, 43, 0.12);
}

.about-stance__shot--inset {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	width: min(48%, 17.5rem);
	aspect-ratio: 4 / 5;
	outline: 8px solid #f3f6f8;
	box-shadow: 0 16px 36px rgba(19, 32, 43, 0.14);
}

.about-stance__badge {
	position: absolute;
	z-index: 3;
	left: clamp(28%, 34%, 38%);
	bottom: clamp(1.5rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: clamp(7.25rem, 11vw, 9rem);
	aspect-ratio: 1;
	padding: 0.85rem 0.7rem 1rem;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-inverse);
	text-align: center;
	box-shadow: 0 14px 32px rgba(0, 175, 212, 0.35);
	box-sizing: border-box;
}

.about-stance__badge-icon {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
	flex: 0 0 auto;
	color: var(--color-inverse);
}

.about-stance__badge-text {
	max-width: 7.5ch;
	font-family: var(--font-ui);
	font-size: clamp(0.62rem, 1vw, 0.72rem);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.12em;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--color-inverse);
}

.about-stance__badge-rule {
	display: block;
	width: 1.75rem;
	height: 1px;
	margin-top: 0.15rem;
	background-color: rgba(255, 255, 255, 0.7);
}

.about-stance__copy {
	min-width: 0;
}

.about-stance__title {
	margin: 0 0 var(--space-7);
	max-width: 14ch;
	font-family: var(--font-display);
	font-size: clamp(2.35rem, 4.2vw, 3.5rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.08;
	color: var(--color-ink);
}

.about-stance__lead,
.about-stance__text {
	margin: 0 0 var(--space-5);
	max-width: 36rem;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.about-stance__text {
	margin-bottom: 0;
}

/* --- 04 Collaboration band --- */
.about-work {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	min-height: clamp(32rem, 70vh, 44rem);
	background-color: var(--color-white);
}

.about-work__media {
	position: relative;
	min-height: 22rem;
	overflow: hidden;
}

.about-work__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.about-work__panel {
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--color-white);
	overflow: hidden;
}

.about-work__panel-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 36rem;
	padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem);
	box-sizing: border-box;
}

.about-work__title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 3.6vw, 3.15rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.08;
	color: var(--color-ink);
	max-width: 14ch;
}

.about-work__lead {
	margin: 0 0 var(--space-7);
	font-family: var(--font-body);
	font-size: var(--font-size-body-lg);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.about-work__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(0, 175, 212, 0.35);
}

.about-work__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	border-bottom: 1px solid rgba(0, 175, 212, 0.35);
}

.about-work__index {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.2;
	color: var(--color-primary);
}

.about-work__item-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 400;
	font-synthesis: none;
	color: var(--color-ink);
}

.about-work__item-text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.about-work__plan {
	position: absolute;
	right: -3rem;
	bottom: -2rem;
	width: min(42%, 18rem);
	opacity: 0.1;
	filter: grayscale(1) brightness(0.45);
	pointer-events: none;
	user-select: none;
}

.about-work__plan img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- 05 Dark location climax --- */
.about-place {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(28rem, 68vh, 40rem);
	display: flex;
	align-items: center;
	background-color: var(--color-gray-900);
	color: var(--color-white);
	padding: clamp(5rem, 10vw, 8rem) var(--container-padding);
}

.about-place__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.about-place__bg-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

.about-place__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			105deg,
			rgba(37, 37, 37, 0.94) 0%,
			rgba(37, 37, 37, 0.82) 38%,
			rgba(37, 37, 37, 0.45) 68%,
			rgba(37, 37, 37, 0.28) 100%
		);
}

.about-place__content {
	position: relative;
	z-index: 1;
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
	max-width: 38rem;
}

.about-place__title {
	margin: 0 0 var(--space-6);
	font-family: var(--font-display);
	font-size: clamp(2.75rem, 5.5vw, 4.5rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.05;
	color: var(--color-white);
}

.about-place__title-accent {
	display: block;
	color: var(--color-primary);
}

.about-place__text {
	margin: 0 0 var(--space-6);
	max-width: 30rem;
	font-family: var(--font-body);
	font-size: clamp(1.05rem, 1.35vw, 1.2rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.86);
}

.about-place__address {
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1px solid rgba(0, 175, 212, 0.45);
	max-width: 18rem;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

.about-place__plan {
	position: absolute;
	z-index: 1;
	right: clamp(-2rem, 2vw, 4rem);
	bottom: clamp(-1rem, 2vw, 2rem);
	width: min(36vw, 22rem);
	opacity: 0.18;
	pointer-events: none;
	user-select: none;
	filter: brightness(1.2);
}

.about-place__plan img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- About close CTA – offenes Conversion-Band (kein Card) --- */
.about-close {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--color-ink);
	padding: clamp(4.5rem, 9vw, 7rem) var(--container-padding);
}

.about-close::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: min(42%, 28rem);
	background: linear-gradient(
		115deg,
		rgba(0, 175, 212, 0.16) 0%,
		rgba(0, 175, 212, 0.04) 48%,
		transparent 72%
	);
	pointer-events: none;
	z-index: 0;
}

.about-close__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(1.15rem, 2.2vw, 1.6rem);
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.about-close__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

.about-close__eyebrow-line {
	display: block;
	width: 2.25rem;
	height: 1px;
	flex: 0 0 auto;
	background-color: var(--color-primary);
}

.about-close__eyebrow-text {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	line-height: var(--line-height-eyebrow);
	color: var(--color-primary);
}

.about-close__title {
	margin: 0;
	max-width: min(100%, 22rem);
	font-family: var(--font-display);
	font-size: clamp(2.35rem, 4vw, 3.35rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--color-inverse);
}

.about-close__title-row,
.about-close__title-accent {
	display: block;
}

@media (min-width: 768px) {
	.about-close__title-row,
	.about-close__title-accent {
		white-space: nowrap;
	}
}

.about-close__title-accent {
	color: var(--color-primary);
}

.about-close__text {
	margin: 0;
	max-width: 34rem;
	font-family: var(--font-body);
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

.about-close__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	margin-top: 0.35rem;
}

.about-close__button.button--primary {
	box-shadow: none;
}

.about-close__icon {
	display: block;
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
}

.about-close__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.02em;
	color: var(--color-inverse);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.about-close__phone:hover,
.about-close__phone:focus-visible {
	color: var(--color-primary-hover);
	text-decoration: none;
}

.about-close__phone:focus-visible {
	outline: 2px solid var(--color-primary-hover);
	outline-offset: 3px;
}

.about-close__phone-icon {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
	.about-hero {
		height: clamp(28rem, 58vh, 34rem);
	}

	.about-hero--minimal {
		height: auto;
		min-height: 280px;
	}

	.about-hero__title {
		font-size: clamp(2.65rem, 3.8vw, 3.15rem);
	}

	.about-hero__crumb::after {
		width: 5.5rem;
	}

	.about-firm__main {
		min-height: 32rem;
	}

	.about-firm__title {
		font-size: clamp(2rem, 3.2vw, 2.75rem);
	}

	.about-stance__grid {
		gap: 2.75rem;
	}

	.about-stance__title {
		font-size: clamp(2.15rem, 3.6vw, 3rem);
	}
}

@media (max-width: 1024px) {
	.about-hero__inner {
		justify-content: center;
		padding-top: calc(var(--header-height) + 1.75rem);
		padding-bottom: 2.5rem;
	}

	.about-hero__title {
		max-width: none;
		font-size: clamp(2.75rem, 5.5vw, 3.5rem);
	}

	.about-scroll {
		/* Extra bottom space before dark about-close CTA (stacked layout) */
		padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4.25rem, 9vw, 6rem);
	}

	.about-scroll.is-carousel-active {
		--about-scroll-sticky-top: calc(var(--header-sticky-top) + var(--header-bar-height) + 8px);
		padding-block: 0;
	}

	.about-scroll.is-carousel-active .about-scroll__sticky {
		height: calc(100vh - var(--about-scroll-sticky-top) - 12px);
		height: calc(100dvh - var(--about-scroll-sticky-top) - 12px);
	}

	.about-scroll.is-carousel-active .about-scroll__slot {
		align-items: stretch;
	}

	.about-scroll.is-carousel-active .about-firm {
		--about-firm-carousel-height: 100%;
		height: 100%;
	}

	.about-scroll.is-carousel-active .about-firm__media {
		order: -1;
		min-height: 0;
		max-height: min(28vh, 12rem);
		aspect-ratio: 16 / 9;
		flex: 0 0 auto;
	}

	.about-scroll.is-carousel-active .about-firm__content {
		padding: clamp(1.1rem, 2.5vh, 1.75rem) clamp(1.15rem, 3.5vw, 1.75rem);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.about-scroll.is-carousel-active .about-firm__title {
		max-width: none;
		margin-bottom: var(--space-4);
		font-size: clamp(1.65rem, 4.5vw, 2.25rem);
	}

	.about-scroll.is-carousel-active .about-firm__text {
		margin-bottom: var(--space-3);
		font-size: 0.95rem;
	}

	.about-scroll.is-carousel-active .about-firm__actions {
		margin-top: var(--space-4);
	}

	.about-scroll.is-carousel-active .about-firm__bar {
		flex: 0 0 auto;
		padding: 0.9rem 1.15rem;
		gap: 0.85rem 1rem;
	}

	.about-firm__main {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.about-firm__media {
		order: -1;
		min-height: clamp(16rem, 48vw, 22rem);
		aspect-ratio: 16 / 10;
	}

	.about-firm__content {
		padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem) clamp(2rem, 4vw, 2.75rem);
	}

	.about-firm__title {
		max-width: none;
	}

	.about-firm__bar {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem 1.5rem;
	}

	.about-firm__meta + .about-firm__meta {
		padding-left: 1.5rem;
	}

	.about-firm__mark {
		grid-column: 1 / -1;
		justify-self: start;
		margin-top: 0.25rem;
	}

	.about-stance__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.about-stance__media {
		max-width: 36rem;
		min-height: 0;
		padding-bottom: 3.25rem;
	}

	.about-stance__shot--primary {
		width: 92%;
	}

	.about-stance__shot--inset {
		width: min(46%, 15rem);
		outline-width: 6px;
	}

	.about-stance__badge {
		left: 30%;
		bottom: 1.25rem;
		width: 7.25rem;
	}

	.about-stance__title {
		max-width: none;
	}

	.about-work {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.about-work__media {
		height: clamp(16rem, 52vw, 24rem);
	}

	.about-work__panel-inner {
		max-width: none;
		padding-inline: var(--container-padding);
	}

	.about-place {
		min-height: clamp(24rem, 70vh, 34rem);
	}

	.about-place__plan {
		width: min(48vw, 16rem);
		opacity: 0.12;
	}

	.about-close__title {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.about-hero {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		height: auto;
		min-height: min(calc(72vh - 200px), 21.5rem); /* 200px niedriger, nur Über-uns mobil */
		background-color: #ffffff;
		background-image: none;
		padding-top: 0;
		padding-bottom: 0;
		box-sizing: border-box;
	}

	.about-hero--minimal {
		min-height: 240px;
	}

	.about-hero__artwork {
		display: none;
	}

	.about-hero::before,
	.about-hero::after {
		content: none;
		display: none;
	}

	/* Bild als volle Hero-Fläche hinter dem Text */
	.about-hero__mobile-media {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		width: auto;
		height: auto;
		margin: 0;
		pointer-events: none;
		background-color: #eef3f6;
		background-image:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.88) 0%,
				rgba(255, 255, 255, 0.72) 42%,
				rgba(255, 255, 255, 0.55) 100%
			),
			var(--about-hero-photo);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		filter: grayscale(1) contrast(1.22) brightness(1.12);
		clip-path: none;
	}

	/* Balken über gesamten Hero-Abschnitt */
	.about-hero__mobile-bar {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
		width: auto;
		height: auto;
		pointer-events: none;
		background: #eaf1f5;
		opacity: 0.32;
		clip-path: polygon(0 0, 40% 0, 78% 100%, 38% 100%);
	}

	/* Breadcrumb + H1: vertikal mittig im gesamten Hero */
	.about-hero__inner {
		position: relative;
		z-index: 2;
		order: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		width: min(100%, var(--container-content-width));
		height: auto;
		min-height: 0;
		margin-inline: auto;
		background-color: transparent;
		padding-top: 0;
		padding-bottom: 0;
		box-sizing: border-box;
	}

	.about-hero__crumb {
		gap: 10px;
		margin-bottom: 1.15rem;
		font-size: 11px;
		letter-spacing: 0.14em;
		max-width: 100%;
		overflow: hidden;
	}

	.about-hero__crumb::after {
		width: 3.5rem;
		margin-left: 0;
		flex-shrink: 0;
	}

	.about-hero__crumb-icon {
		width: 15px;
		height: 15px;
		flex-shrink: 0;
	}

	.about-hero__title {
		max-width: none;
		font-size: clamp(2.4rem, 10vw, 2.9rem);
		line-height: 1.02;
	}

	.about-hero__title-row,
	.about-hero__title-accent {
		white-space: nowrap;
	}

	.about-firm__shell {
		border-radius: var(--radius-md);
	}

	.about-firm__media {
		min-height: 14rem;
		aspect-ratio: 4 / 3;
	}

	.about-firm__content {
		padding: 1.5rem 1.25rem 1.75rem;
	}

	.about-firm__title {
		font-size: clamp(1.85rem, 8vw, 2.35rem);
	}

	.about-firm__bar {
		grid-template-columns: 1fr;
		gap: 1.15rem;
		padding: 1.25rem 1.25rem 1.35rem;
	}

	.about-firm__meta + .about-firm__meta {
		padding-left: 0;
		padding-top: 1.15rem;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.about-firm__mark {
		margin-top: 0.15rem;
	}

	.about-work__plan {
		opacity: 0.07;
	}

	.about-stance__media {
		padding-bottom: 2.75rem;
	}

	.about-stance__shot--primary {
		width: 100%;
		aspect-ratio: 5 / 4;
	}

	.about-stance__shot--inset {
		width: min(52%, 11.5rem);
		right: 0.35rem;
		bottom: 0.35rem;
		outline-width: 5px;
	}

	.about-stance__badge {
		left: auto;
		right: clamp(38%, 42%, 48%);
		bottom: 0.5rem;
		width: 6.5rem;
		gap: 0.25rem;
		padding: 0.7rem 0.55rem 0.85rem;
	}

	.about-stance__badge-icon {
		width: 1.15rem;
		height: 1.15rem;
	}

	.about-stance__badge-text {
		font-size: 0.58rem;
		letter-spacing: 0.1em;
	}

	.about-stance__title {
		font-size: clamp(2.05rem, 8.5vw, 2.65rem);
		max-width: none;
	}

	.about-place__title {
		font-size: clamp(2.35rem, 10vw, 3.15rem);
	}

	.about-place__plan {
		display: none;
	}

	.about-scroll {
		padding-bottom: clamp(4.75rem, 14vw, 6.5rem);
	}

	.about-close {
		padding-block: clamp(3.75rem, 12vw, 5rem);
	}

	.about-close__title {
		max-width: none;
		font-size: clamp(2.15rem, 9vw, 2.75rem);
	}

	.about-close__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.about-close__button {
		justify-content: center;
	}

	.about-close__phone {
		justify-content: center;
		min-height: 44px;
	}
}

/* -------------------------------------------------------------------------- */
/* WP10 – Recruiting landing (Karriere DE/PL)                                 */
/* -------------------------------------------------------------------------- */

.page-career--landing #stelle,
.page-career--landing #aufgaben,
.page-career--landing #vorteile,
.page-career--landing #bewerbung {
	scroll-margin-top: calc(var(--header-sticky-top) + var(--header-bar-height) + 16px);
}

.career-hero__content {
	max-width: min(52rem, 100%);
}

.career-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--space-5);
}

.career-hero__eyebrow-line {
	display: block;
	width: 2.5rem;
	height: 2px;
	background-color: var(--color-primary);
}

.career-hero__eyebrow-text {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
}

.career-hero__title {
	font-size: clamp(2.25rem, 3.4vw, 3.25rem);
}

.career-hero__title .hero__title-line {
	white-space: nowrap;
}

.career-hero__actions {
	margin-bottom: var(--space-6);
}

.career-hero__actions--sticker {
	position: relative;
}

/* Allow sticker to sit left of the CTA without clipping into hero padding */
.hero.career-hero {
	overflow: visible;
}

.hero.career-hero .hero__media {
	overflow: hidden;
	border-radius: inherit;
}

/* WP11.9 – decorative CTA sticker (DE career hero only) */
.career-hero__sticker {
	position: absolute;
	left: -7.5rem;
	top: calc(-1.875rem - 5px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	width: max-content;
	margin: 0;
	color: var(--color-primary);
	pointer-events: none;
	user-select: none;
	z-index: 2;
}

.career-hero__sticker-text {
	display: flex;
	flex-direction: column;
	margin: -3px 0 0 -3px;
	padding: 0;
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: var(--font-weight-medium);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: inherit;
	transform: rotate(-8deg);
	transform-origin: left center;
}

.career-hero__sticker-line {
	display: block;
	white-space: nowrap;
}

.career-hero__sticker-arrow {
	display: block;
	width: 4.35rem;
	height: auto;
	margin: calc(0.05rem - 3px) 0.85rem 0.2rem calc(1.1rem + 12px);
	object-fit: contain;
}

@media (max-width: 1199px) {
	.career-hero__sticker {
		left: -6.25rem;
		top: calc(-1.65rem - 5px);
		transform: scale(0.9);
		transform-origin: right bottom;
	}

	.career-hero__sticker-arrow {
		width: 3.9rem;
		margin-right: 0.65rem;
	}
}

@media (max-width: 900px) {
	.career-hero__sticker {
		display: none;
	}
}

.career-hero__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: var(--space-5) 0 0;
	list-style: none;
	border-top: 1px solid rgba(19, 32, 43, 0.1);
}

.career-hero__fact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.career-hero__fact-label {
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(19, 32, 43, 0.55);
}

.career-hero__fact-value {
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color: var(--color-ink);
}

.career-feature {
	position: relative;
	padding: var(--section-spacing) var(--container-padding);
}

.career-feature--light {
	background-color: #ffffff;
	color: var(--color-ink);
}

.career-feature--dark {
	background-color: #13202b;
	color: var(--color-inverse);
}

.career-feature__inner {
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.career-feature__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.career-feature--media-left .career-feature__media {
	order: 1;
}

.career-feature--media-left .career-feature__content {
	order: 2;
}

.career-feature--media-right .career-feature__content {
	order: 1;
}

.career-feature--media-right .career-feature__media {
	order: 2;
}

.career-feature__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-surface-muted);
	aspect-ratio: 4 / 3;
}

.career-feature__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.career-feature__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--space-4);
}

.career-feature__eyebrow-line {
	display: block;
	width: 2.25rem;
	height: 2px;
	background-color: var(--color-primary);
}

.career-feature__eyebrow-text {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
}

.career-feature__title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.1;
	color: inherit;
}

.career-feature__title-accent {
	color: var(--color-primary);
}

.career-feature__title-accent--line {
	display: block;
}

.career-feature__intro {
	margin: 0 0 var(--space-6);
	max-width: 36rem;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: inherit;
	opacity: 0.88;
}

.career-feature--light .career-feature__intro {
	color: var(--color-text);
	opacity: 1;
}

.career-feature__items {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.career-feature__item {
	display: flex;
	align-items: flex-start;
	gap: 0.95rem;
	padding: 0.95rem 1.05rem;
	border-radius: var(--radius-md);
	background-color: rgba(19, 32, 43, 0.035);
}

.career-feature--dark .career-feature__item {
	background-color: rgba(255, 255, 255, 0.06);
}

.career-feature__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--color-primary);
}

.career-feature__item-svg {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
}

.career-feature__item-copy {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.career-feature__item-title {
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color: inherit;
}

.career-feature__item-text {
	font-family: var(--font-body);
	font-size: 0.92rem;
	line-height: 1.45;
	opacity: 0.78;
}

.career-feature--light .career-feature__item-text {
	color: var(--color-text);
	opacity: 1;
}

/* WP10.2 / WP10.3 – Bewerbungsbereich (#bewerbung) */
.career-apply {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: #ffffff;
	padding: var(--section-spacing) var(--container-padding);
}

.career-apply__quote-drawing img {
	display: block;
	width: 100%;
	height: auto;
}

.career-apply__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
	width: min(100%, var(--container-content-width));
	margin-inline: auto;
}

.career-apply__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.career-apply__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--space-5); /* 20px → H2 */
}

.career-apply__eyebrow-line {
	display: block;
	width: 2.5rem;
	height: 2px;
	background-color: var(--color-primary);
}

.career-apply__eyebrow-text {
	font-family: var(--font-ui);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.career-apply__title {
	margin: 0 0 var(--space-6); /* 24px ≈ 22px → Einleitung */
	font-family: var(--font-display);
	font-size: var(--font-size-h2);
	font-weight: 400;
	font-synthesis: none;
	line-height: var(--line-height-heading);
	color: #13202b;
}

.career-apply__title-line {
	display: block;
}

.career-apply__title-accent {
	color: #00afd4;
}

.career-apply__text {
	margin: 0 0 var(--space-7); /* 32px → Kontaktwege */
	max-width: min(60ch, 100%);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

.career-apply__contacts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5); /* 20px */
	margin: 0 0 var(--space-7); /* 32px → Trennlinie */
	padding: 0;
	list-style: none;
}

.career-apply__contacts--count-1,
.career-apply__contacts--count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.career-apply__contacts--count-1 {
	grid-template-columns: minmax(0, 1fr);
}

.career-apply__contact {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.career-apply__contact:hover .career-apply__contact-value,
.career-apply__contact:focus-visible .career-apply__contact-value {
	color: var(--color-primary);
}

.career-apply__contact:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

.career-apply__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-white));
	color: var(--color-primary);
}

.career-apply__contact-svg {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
}

.career-apply__contact-svg--brand {
	width: 1.05rem;
	height: 1.05rem;
}

.career-apply__contact-copy {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.career-apply__contact-label {
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(19, 32, 43, 0.55);
}

.career-apply__contact-value {
	font-family: var(--font-ui);
	font-size: 0.88rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.35;
	color: var(--color-ink);
	word-break: break-word;
	transition: color var(--button-transition);
}

.career-apply__points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0 0 var(--space-7); /* 32px ≈ 34px → Zitat */
	padding: var(--space-7) 0 0; /* 32px ≈ 30px nach Trennlinie */
	list-style: none;
	border-top: 1px solid var(--color-border);
}

.career-apply__point {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	min-width: 0;
	padding: 0 var(--space-4);
	border-right: 1px solid var(--color-border);
}

.career-apply__point:first-child {
	padding-left: 0;
}

.career-apply__point:last-child {
	padding-right: 0;
	border-right: 0;
}

.career-apply__point-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #00afd4;
	margin-bottom: 0.15rem;
}

.career-apply__point-svg {
	display: block;
	width: 28px;
	height: 28px;
	stroke-width: 1.5;
}

.career-apply__point-title {
	font-family: var(--font-ui);
	font-size: 0.92rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color: var(--color-ink);
}

.career-apply__point-text {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	line-height: 1.45;
	color: var(--color-text);
}

.career-apply__quote {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 166px;
	margin: 0;
	padding: 30px 34px;
	border-radius: var(--radius-lg);
	background-color: var(--color-blue-25); /* #F7FDFF – gleicher Blauton, näher am Section-Weiß */
	box-sizing: border-box;
}

.career-apply__quote-drawing {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 42%;
	height: auto;
	margin: 0;
	opacity: 0.24;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.career-apply__quote-mark {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0 0 0.35rem;
	font-family: var(--font-display);
	font-size: 3.25rem;
	line-height: 0.75;
	color: #00afd4;
}

.career-apply__quote-text {
	position: relative;
	z-index: 1;
	margin: 0 0 var(--space-5);
	max-width: min(32rem, 72%);
}

.career-apply__quote-text p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	color: var(--color-ink);
}

.career-apply__quote-person {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.career-apply__quote-avatar {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	object-fit: cover;
	flex: 0 0 auto;
}

.career-apply__quote-meta {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.career-apply__quote-name {
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-ink);
}

.career-apply__quote-role {
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(19, 32, 43, 0.55);
}

.career-apply__aside {
	min-width: 0;
	margin-top: 0;
	align-self: start;
}

.career-apply__form-card {
	margin-top: 0;
	padding: clamp(1.35rem, 3vw, 1.9rem);
	border-radius: var(--radius-lg);
	background-color: var(--color-white);
	box-shadow:
		0 1px 0 rgba(19, 32, 43, 0.04),
		0 18px 48px rgba(19, 32, 43, 0.07);
}

.career-apply__form-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-ui);
	font-size: 1.35rem;
	font-weight: var(--font-weight-extrabold);
	line-height: 1.25;
	color: var(--color-ink);
}

.career-apply__form-text {
	margin: 0 0 var(--space-5);
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	line-height: 1.5;
	color: var(--color-text);
}

.career-apply__form {
	min-width: 0;
}

/* NinjaMatic scoped to career apply – single card, Brodkorb controls */
.career-apply__form .nfs-public-form {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--font-body);
	color: var(--color-text);
	--nfs-primary: #00afd4;
	--nfs-primary-hover: var(--color-primary-hover);
	--nfs-accent: #00afd4;
	--nfs-focus: #00afd4;
	--nfs-form-max-width: 100%;
	--nfs-form-width: 100%;
	--nfs-form-padding: 0px;
	--nfs-form-padding-top: 0px;
	--nfs-form-padding-right: 0px;
	--nfs-form-padding-bottom: 0px;
	--nfs-form-padding-left: 0px;
	--nfs-form-shadow: none;
	--nfs-border-form-width-top: 0px;
	--nfs-border-form-width-right: 0px;
	--nfs-border-form-width-bottom: 0px;
	--nfs-border-form-width-left: 0px;
	--nfs-radius-form-tl: 0px;
	--nfs-radius-form-tr: 0px;
	--nfs-radius-form-br: 0px;
	--nfs-radius-form-bl: 0px;
	--nfs-label-color: var(--color-ink);
	--nfs-heading-color: var(--color-ink);
	--nfs-placeholder-color: var(--color-text-muted);
	--nfs-border-input-color: var(--color-border);
	--nfs-border-input-color-hover: var(--color-border);
	--nfs-border-input-color-focus: var(--color-primary);
	--nfs-border-textarea-color: var(--color-border);
	--nfs-border-textarea-color-hover: var(--color-border);
	--nfs-border-textarea-color-focus: var(--color-primary);
	--nfs-border-file-color: var(--color-border);
	--nfs-border-file-color-focus: var(--color-primary);
	--nfs-focus-ring-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
	--nfs-focus-ring-width: 2px;
	--nfs-required-color: var(--color-primary);
	--nfs-required-text-color: var(--color-primary);
	--nfs-link-color: var(--color-primary);
	--nfs-link-hover-color: var(--color-primary-hover);
	--nfs-field-gap: 1.1rem;
	--nfs-label-gap: 0.45rem;
	--nfs-label-size: 0.88rem;
	--nfs-label-weight: 600;
	--nfs-radius-input-tl: var(--radius-md);
	--nfs-radius-input-tr: var(--radius-md);
	--nfs-radius-input-br: var(--radius-md);
	--nfs-radius-input-bl: var(--radius-md);
	--nfs-radius-textarea-tl: var(--radius-md);
	--nfs-radius-textarea-tr: var(--radius-md);
	--nfs-radius-textarea-br: var(--radius-md);
	--nfs-radius-textarea-bl: var(--radius-md);
	--nfs-radius-button-tl: var(--button-radius);
	--nfs-radius-button-tr: var(--button-radius);
	--nfs-radius-button-br: var(--button-radius);
	--nfs-radius-button-bl: var(--button-radius);
	--nfs-button-hover-translate: 0px;
	--nfs-button-hover-scale: 1;
}

.career-apply__form .nfs-public-headline {
	display: none;
}

.career-apply__form .nfs-public-label {
	font-family: var(--font-ui);
	color: var(--color-ink);
}

.career-apply__form .nfs-public-form .nfs-public-field input.nfs-public-input,
.career-apply__form .nfs-public-form .nfs-public-field textarea.nfs-public-input,
.career-apply__form .nfs-public-form .nfs-public-field select.nfs-public-input {
	font-family: var(--font-body);
	color: var(--color-ink);
	background-color: var(--color-white);
	border-color: var(--color-border);
	border-radius: var(--radius-md);
	min-height: 48px;
}

.career-apply__form .nfs-public-form .nfs-public-field input.nfs-public-input:focus,
.career-apply__form .nfs-public-form .nfs-public-field textarea.nfs-public-input:focus,
.career-apply__form .nfs-public-form .nfs-public-field select.nfs-public-input:focus {
	border-color: var(--color-primary);
	outline: 2px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
	outline-offset: 0;
	box-shadow: none;
}

.career-apply__form .nfs-public-actions {
	width: 100%;
}

.career-apply__form .nfs-public-form .nfs-public-submit {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: var(--button-padding-block) var(--button-padding-inline);
	border: 0;
	border-radius: var(--button-radius);
	background: #00afd4;
	background-color: #00afd4;
	color: #ffffff;
	font-family: var(--font-ui);
	font-size: var(--button-font-size);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-button);
	text-transform: uppercase;
	cursor: pointer;
	transform: none;
	transition: background-color var(--button-transition), box-shadow var(--button-transition);
}

.career-apply__form .nfs-public-form .nfs-public-submit:hover,
.career-apply__form .nfs-public-form .nfs-public-submit:focus,
.career-apply__form .nfs-public-form .nfs-public-submit:focus-visible {
	background: var(--color-primary-hover);
	background-color: var(--color-primary-hover);
	box-shadow: var(--shadow-button-hover);
	transform: none;
}

.career-apply__form .nfs-public-privacy-text a {
	color: var(--color-primary);
}

@media (max-width: 1024px) {
	.career-hero__facts {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}

	.career-feature__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.career-feature--media-left .career-feature__content,
	.career-feature--media-right .career-feature__content {
		order: 1;
	}

	.career-feature--media-left .career-feature__media,
	.career-feature--media-right .career-feature__media {
		order: 2;
	}

	.career-feature--dark .career-feature__content {
		order: 1;
	}

	.career-feature--dark .career-feature__media {
		order: 3;
	}

	.career-feature--dark .career-feature__items {
		order: 4;
	}

	.career-feature__content {
		display: flex;
		flex-direction: column;
	}

	.career-feature--dark .career-feature__grid {
		display: flex;
		flex-direction: column;
	}

	.career-feature--dark .career-feature__eyebrow,
	.career-feature--dark .career-feature__title,
	.career-feature--dark .career-feature__intro {
		order: 0;
	}

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

	.career-apply__contacts--count-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.career-apply__points {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	.career-apply__point {
		padding: 0;
		border-right: 0;
		padding-bottom: var(--space-5);
		border-bottom: 1px solid var(--color-border);
	}

	.career-apply__point:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.career-apply__quote {
		padding: var(--space-6) var(--space-5);
		min-height: 0;
	}
}

/* WP10.3 – below desktop: single-column apply band */
@media (max-width: 1199px) {
	.career-apply__inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

@media (max-width: 767px) {
	.career-hero__title {
		font-size: clamp(1.7rem, 6.8vw, 2.25rem);
	}

	.career-hero__title .hero__title-line {
		white-space: nowrap;
	}

	.career-feature__media {
		border-radius: var(--radius-md);
	}

	.career-apply__contacts,
	.career-apply__contacts--count-2,
	.career-apply__contacts--count-3 {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.career-apply__text {
		max-width: none;
	}

	.career-apply__form-card {
		padding: 1.15rem;
	}

	.career-apply__quote {
		padding: var(--space-5);
		min-height: 0;
	}

	.career-apply__quote-text {
		max-width: 100%;
	}

	.career-apply__quote-drawing {
		width: 55%;
	}
}

/* Mobile: feature content order eyebrow → title → intro → image → items */
@media (max-width: 1024px) {
	.career-feature--light .career-feature__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch; /* override base align-items:center – text left */
	}

	.career-feature--light .career-feature__content {
		display: contents;
	}

	.career-feature--light .career-feature__eyebrow {
		order: 1;
		align-self: flex-start;
	}

	.career-feature--light .career-feature__title {
		order: 2;
		text-align: left;
	}

	.career-feature--light .career-feature__intro {
		order: 3;
		text-align: left;
	}

	.career-feature--light .career-feature__media {
		order: 4;
	}

	.career-feature--light .career-feature__items {
		order: 5;
	}

	.career-feature--dark .career-feature__content {
		display: contents;
	}

	.career-feature--dark .career-feature__eyebrow {
		order: 1;
	}

	.career-feature--dark .career-feature__title {
		order: 2;
	}

	.career-feature--dark .career-feature__intro {
		order: 3;
	}

	.career-feature--dark .career-feature__items {
		order: 4;
	}

	.career-feature--dark .career-feature__media {
		order: 5;
	}
}

/* -------------------------------------------------------------------------- */
/* NinjaMatic forms – scoped to contact/career pages                          */
/* -------------------------------------------------------------------------- */

.page-contact .nfs-public-form,
.page-career .nfs-public-form {
	font-family: var(--font-body);
	--nfs-font-family: var(--font-body);
}

.page-contact .nfs-public-label,
.page-career .nfs-public-label {
	font-family: var(--font-ui);
	font-size: 0.875rem;
	font-weight: var(--font-weight-medium);
	color: var(--color-ink);
}

.page-contact .nfs-public-input,
.page-career .nfs-public-input {
	border-radius: 2px;
	font-family: var(--font-body);
}

.page-contact .nfs-public-input:focus,
.page-career .nfs-public-input:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

.page-contact .nfs-public-submit,
.page-career .nfs-public-submit {
	font-family: var(--font-display);
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: var(--letter-spacing-button);
	border-radius: var(--button-radius);
	min-height: 3.25rem;
	padding: var(--button-padding-block) var(--button-padding-inline);
	background-color: var(--color-primary);
	color: var(--color-inverse);
	border: none;
	cursor: pointer;
}

.page-contact .nfs-public-submit:hover,
.page-contact .nfs-public-submit:focus-visible,
.page-career .nfs-public-submit:hover,
.page-career .nfs-public-submit:focus-visible {
	background-color: var(--color-primary);
	box-shadow: var(--shadow-button-hover);
}