/* BIANCO — Layout & Home: Raster, Listen/Vorschau, Hero/Galerie */

/* Layout */
.wrap {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0;
}

/* 12er-Raster: .wrap.layout-grid oder .site-footer__inner.layout-grid */
.layout-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--layout-grid-cols), minmax(0, 1fr));
	column-gap: var(--layout-grid-gap);
	row-gap: 0;
	min-width: 0;
	align-content: start;
}

/* Kinder von .layout-grid: Hauptspalte (max. Lesbreite) */
.layout-grid__span-content {
	grid-column: var(--layout-content-start) / span var(--layout-content-span);
	width: 100%;
	max-width: min(42rem, 100%);
	justify-self: start;
	min-width: 0;
	box-sizing: border-box;
}

.layout-grid__span-content--tight {
	max-width: min(38rem, 100%);
}

.layout-grid__span-content--wide {
	max-width: min(52rem, 100%);
}

.layout-grid__span-content--flush {
	max-width: none;
}

.layout-grid__span-full {
	grid-column: 1 / -1;
	width: 100%;
	min-width: 0;
}

@media (max-width: 52rem) {
	.layout-grid__span-content,
	.layout-grid__span-content--tight,
	.layout-grid__span-content--wide,
	.layout-grid__span-content--flush {
		grid-column: 1 / -1;
	}
}

.section {
	padding: var(--page-intro-vspace) 0;
}

.section--dark {
	background: var(--black);
	color: var(--white);
}

/* Wie Case/Talent-.hero-dark unter dem Karussell (--hero-dark-pad-bottom) */
.section.section--dark.home__talents {
	padding-bottom: var(--hero-dark-pad-bottom);
}

.section--dark a:hover {
	color: var(--white);
}

/* Talents mit Intro-Teaser: kein doppeltes Ober-Padding — Abstand wie .page-intro (margin oben/unten). */
.section.home__talents:has(.home__talents-wrap--has-intro) {
	padding-top: 0;
}

/*
 * Home: Site-Intro im Cases-.wrap — Section oben ohne Padding (Abstand nur über Intro-Margins).
 * Spezifität ≥ .home__masthead .home__cases.section (padding-top), sonst gewinnt die Masthead-Regel.
 */
body.page-home.intro-done .home__masthead .section.home__cases:has(.home__cases-wrap--has-site-intro),
body.page-home:not(.intro-done) .home__masthead .section.home__cases:has(.home__cases-wrap--has-site-intro) {
	padding-top: 0;
}

@media (max-width: 52rem) {
	.section {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}

/* Nur About: ganze Seite dunkel. Case/Talent: dunkel nur .hero-dark, darunter Light (Site --bg). */
body.page-about {
	background: var(--black);
	color: var(--white);
}

body.page-about .page-wrapper {
	display: flex;
	flex-direction: column;
	background-color: var(--black);
	color: var(--white);
	min-height: 100vh;
	min-height: 100dvh;
}

/* Volle Viewport-Höhe: freier Raum im Main, nicht als leerer Streifen unter dem Footer (BERLIN). */
body.page-about .page-wrapper > main {
	flex: 1 1 auto;
	min-height: 0;
}

body.page-about main.about-page {
	background-color: var(--black);
	color: var(--white);
}

/*
 * About: kein .hero-dark um den Header — gleiche Lesbarkeit wie Case/Talent: Kopf schwarz,
 * Wortmarke explizit hell (Maske + --white), sonst kann die SVG-Vorlage dunkel wirken.
 */
body.page-about .site-header.site-header--dark {
	background-color: var(--black);
	color: var(--white);
}

/*
 * Exakt --white (#f6f7f3): Maske am Link, Füllfarbe am <a> — <img> nur für Abmessungen/Alt unsichtbar.
 * Am <img> mask+background lässt nach SVG-Decode oft die dunkle Raster-Vorlage über die Maske legen
 * (kurz hell, dann „überlagert“); About + Case/Talent: daher wie About nur Maske am <a>.
 */
body.page-about .site-header.site-header--dark .site-header__brand.logo-mega--svg,
body.page-case .site-header.site-header--dark .site-header__brand.logo-mega--svg,
body.page-talent .site-header.site-header--dark .site-header__brand.logo-mega--svg,
.hero-dark .site-header.site-header--dark .site-header__brand.logo-mega--svg {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	position: relative;
	isolation: isolate;
	background-color: var(--white);
	-webkit-mask-image: var(--bianco-wordmark-mask);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-image: var(--bianco-wordmark-mask);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 100% 100%;
}

/*
 * Schwarzes <img> liegt sonst über der maskierten Fläche am <a>; bis CSS lädt, blitzt es kurz.
 * Inline opacity:0 im Markup (header.php) + hier !important / kein Transition.
 */
body.page-about .site-header.site-header--dark .logo-mega--svg img.site-header__wordmark--mask-only,
body.page-case .site-header.site-header--dark .logo-mega--svg img.site-header__wordmark--mask-only,
body.page-talent .site-header.site-header--dark .logo-mega--svg img.site-header__wordmark--mask-only,
.hero-dark .site-header.site-header--dark .logo-mega--svg img.site-header__wordmark--mask-only {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-width: 0;
	opacity: 0 !important;
	transition: none !important;
	filter: none;
	background: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

body.page-about .site-header.site-header--dark .site-nav a {
	color: var(--white);
}

body.page-about .site-header.site-header--dark .site-nav a:hover,
body.page-about .site-header.site-header--dark .site-nav a:focus {
	color: var(--white);
}

/* Akzent für aktuelle Seite — nach allgemeinem Weiß, sonst überschreibt .site-nav a */
body.page-about .site-header.site-header--dark .site-nav--mega a[aria-current="page"],
body.page-about .site-header.site-header--dark .site-nav--mega a[aria-current="page"]:hover,
body.page-about .site-header.site-header--dark .site-nav--mega a[aria-current="page"]:focus {
	color: var(--accent);
	border-bottom: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.about-page__closing {
	margin-top: var(--page-intro-vspace);
	padding-bottom: 3rem;
}

/* Home: #cases springt auf #cases-first (erstes Projekt); Fallback: Sektion */
#cases {
	scroll-margin-top: 5rem;
}

/*
 * Standard-Home: warm bis Viewport-Rand + Exit-Root warm — verhindert schwarzen Aufblitz
 * (.home-scroll) beim Intro-Exit durch transparente Lücken neben/zwischen Blöcken.
 */
body.page-home:not(.home--focus-talents) .home__exit-mask-root {
	background-color: var(--bg-warm);
}

body.page-home:not(.home--focus-talents) #cases.home__cases.section {
	background-color: var(--bg-warm);
	color: var(--fg);
	margin-left: calc(-1 * var(--page-pad));
	margin-right: calc(-1 * var(--page-pad));
	width: calc(100% + 2 * var(--page-pad));
	max-width: none;
	box-sizing: border-box;
	padding-left: var(--page-pad);
	padding-right: var(--page-pad);
}

/* Erstes Listenelement: Bündigkeit unter Sticky / Kompaktleiste (anchor-smooth + Hash-Laden) */
#cases-first {
	scroll-margin-top: var(--anchor-scroll-padding);
}

#talents {
	scroll-margin-top: 5rem;
}

.home__masthead {
	box-sizing: border-box;
}

/* Ein Spalt unter Header+Sticky: Intro, Cases, .home-scroll in einer flex-Kette */
body.page-home.intro-done .home__masthead > .home__exit-mask-root {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

body.page-home.intro-done .home__masthead {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

/* Cases im ersten Viewport: oben unter der Lede, unten Luft wie Innenseiten */
body.page-home.intro-done .home__masthead .home__cases.section {
	flex: 1 1 auto;
	min-height: 0;
	padding-top: var(--page-intro-vspace);
	padding-bottom: var(--page-intro-vspace);
}

.home__intro {
	font-size: var(--text-lede);
	line-height: 1.65;
}

/* Site-Intro-Lede im Cases-Grid: gleiche Mono-Typo wie zuvor am Typewriter — Desktop & Mobile */
.home__intro--lede.home__cases-site-intro {
	font-family: var(--font-mono);
	font-size: var(--text-lede);
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: normal;
	text-align: left;
	text-wrap: pretty;
}

/*
 * Site-Intro sitzt im Cases-Grid (.home__cases-site-intro); Abstände wie .home__talents-intro
 * über .home__cases .home__cases-site-intro (padding-top/bottom: --page-intro-vspace).
 * Kein padding: 0 hier — würde jene Abstände überschreiben (zu Header + zu Cases-Liste).
 */
body.page-home.intro-done .home__cases .home__intro--lede.home__cases-site-intro {
	position: static;
	z-index: auto;
	pointer-events: auto;
	font-size: var(--text-lede);
	line-height: 1.65;
	/* kein margin: 0 — Element hat auch .home__cases-site-intro; sonst wegfallen die --page-intro-vspace-Abstände */
	margin: 0;
	text-wrap: pretty;
}

.home__cases-site-intro .home__intro__line + .home__intro__line {
	margin-top: 0.75rem;
}

.home__section-label {
	margin: 0 0 0.75rem;
	font-size: var(--text-label);
	text-transform: uppercase;
}

.home__cases .home__section-label,
.home__talents .home__section-label {
	font-size: var(--text-label);
	margin-bottom: 0.65rem;
	padding-left: 0.2rem;
}

.list-mega {
	list-style: none;
	margin: 0;
	padding: 0;
}

.list-mega li {
	margin: 0 0 0.35rem;
}

.page-home .home-cases-list li,
.page-home .home-talents-list li,
.page-case .project-aside .home-cases-list li,
.page-talent .project-aside .home-talents-list li {
	margin: 0 0 0.22rem;
}

.list-mega a {
	display: inline-block;
	font-family: var(--font-display);
	/* Wie Cases/Talents-Liste: große Display-Zeilen (responsive clamp) */
	font-size: var(--home-mega-list-size);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	border: 0;
	white-space: nowrap;
}

.list-mega a:hover,
.list-mega a:focus {
	opacity: 1;
}

.list-mega a.home-case-link:hover,
.list-mega a.home-case-link:focus {
	opacity: 1;
}

.list-mega a.home-case-link.is-active {
	color: var(--accent);
	opacity: 1;
}

.list-mega a.home-talent-link:hover,
.list-mega a.home-talent-link:focus {
	opacity: 1;
}

.list-mega a.home-talent-link.is-active {
	color: var(--accent);
	opacity: 1;
}

.list-mega a[aria-current="page"]:not(.home-case-link):not(.home-talent-link) {
	color: var(--accent);
}

/* Case/Talent Mega-Links: nur Farb-Transition — kein Opacity-Spiel */
.page-home .home-cases-list a.home-case-link,
.page-home .home-talents-list a.home-talent-link,
.page-case .project-aside .home-cases-list a.home-case-link,
.page-talent .project-aside .home-talents-list a.home-talent-link {
	transition: color var(--duration-mega-link) var(--ease-mega-link);
}

@media (prefers-reduced-motion: reduce) {
	.page-home .home-cases-list a.home-case-link,
	.page-home .home-talents-list a.home-talent-link,
	.page-case .project-aside .home-cases-list a.home-case-link,
	.page-talent .project-aside .home-talents-list a.home-talent-link {
		transition-duration: 0.05s;
	}
}

.pill {
	display: inline-block;
	margin: 1.75rem 0 0;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	background: transparent;
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--fg);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--fg);
}

/* UA-Button vs. <a class="pill"> (Schrift/Rand kommen von .pill) */
button.pill {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

/* Auf Schwarz: ausgefüllt (invers zu transparent + 1px --fg auf hellem Grund) */
.section--dark .pill {
	background: var(--white);
	color: var(--black);
	border: 0;
	box-shadow: none;
}

.section--dark .pill:hover,
.section--dark .pill:focus-visible {
	background: color-mix(in srgb, var(--white) 90%, var(--black));
}

.section--dark .pill:focus-visible {
	outline: 1px solid var(--white);
	outline-offset: 2px;
}

/* a.pill: .section--dark a:hover würde sonst die Schrift wieder weiß färben */
.section--dark a.pill,
.section--dark a.pill:hover,
.section--dark a.pill:focus,
.section--dark a.pill:focus-visible {
	color: var(--black);
}

/* Optionales inverses Pill auf dunklem Grund (nicht Cookie-Leiste: dort Standard-.pill) */
.pill--on-dark {
	background: var(--white);
	color: var(--black);
	border: 0;
	box-shadow: none;
}

.pill--on-dark:hover,
.pill--on-dark:focus-visible {
	background: color-mix(in srgb, var(--white) 90%, var(--black));
}

.pill--on-dark:focus-visible {
	outline: 1px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

/*
 * Raster: nur die Liste nimmt Höhe ein; Vorschau-Aside liegt in Zeile mit 0 Höhe
 * (fix am unteren Viewport, siehe .home__split-right), kein Extra-Row-Gap.
 */
.home__cases .wrap.home__cases-wrap,
.home__talents .wrap.home__talents-wrap {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--layout-grid-cols), minmax(0, 1fr));
	grid-template-rows: auto 0px;
	column-gap: var(--layout-grid-gap);
	row-gap: 0;
	min-height: 0;
}

/*
 * Case/Talent-Detail: Markup .project-related-list (kein .home__*-wrap / .wrap) — nur ein Raster (z. B. .project-body).
 */
.project-aside .project-related-list {
	position: relative;
	display: block;
	min-height: 0;
}

.project-aside .project-related-list__main {
	width: 100%;
	max-width: min(38rem, 100%);
	box-sizing: border-box;
}

.home__talents .wrap.home__talents-wrap--has-intro {
	grid-template-rows: auto auto 0px;
}

.home__cases .wrap.home__cases-wrap--has-site-intro {
	grid-template-rows: auto auto 0px;
}

.home__cases-main,
.home__talents-main {
	grid-column: var(--layout-content-start) / span var(--layout-content-span);
	width: 100%;
	max-width: min(38rem, 100%);
	justify-self: start;
	min-width: 0;
	margin-left: 0;
	box-sizing: border-box;
}

.home__talents .home__talents-main {
	grid-column: var(--layout-talents-content-start) / span var(--layout-talents-content-span);
}

.home__talents-wrap--has-intro .home__talents-main {
	grid-row: 2;
}

.home__talents-wrap:not(.home__talents-wrap--has-intro) .home__talents-main {
	grid-row: 1;
}

/* Teaser: gleiche linke Achse wie Cases (ab Gitterlinie --layout-content-start) */
.home__talents .home__talents-intro {
	grid-column: var(--layout-content-start) / span var(--layout-content-span);
	grid-row: 1;
	width: 100%;
	max-width: min(38rem, 100%);
	justify-self: start;
	min-width: 0;
	box-sizing: border-box;
	text-align: left;
	margin: 0;
	padding-top: var(--page-intro-vspace);
	padding-bottom: var(--page-intro-vspace);
	line-height: 1.65;
}

/*
 * Site-Intro: Spalten 1–6. Cases-Liste wie ohne Intro ab --layout-content-start (Desktop: Gitterlinie 4).
 */
.home__cases .home__cases-site-intro {
	grid-column: 1 / span 6;
	grid-row: 1;
	width: 100%;
	max-width: min(var(--home-site-intro-text-max), 100%);
	justify-self: start;
	min-width: 0;
	box-sizing: border-box;
	text-align: left;
	margin: 0;
	padding-top: var(--page-intro-vspace);
	padding-bottom: var(--page-intro-vspace);
	line-height: 1.65;
}

/* Klasse am Wrap = Intro-Markup vorhanden (PHP); Liste Zeile 2; Spaltenstart der Liste unverändert (--layout-content-start). */
.home__cases-wrap--has-site-intro .home__cases-main {
	grid-row: 2;
}

/*
 * Home-Cases-Liste: solange #home-intro im DOM — unsichtbar. Erst nach intro.remove() in finishIntro
 * einblenden — nur Opacity, kein translateY (sonst wischt die Mega-Liste durch die Lede-Zeile).
 */
@media (prefers-reduced-motion: no-preference) {
	.page-home .home__cases .home__cases-main {
		transition: opacity var(--duration-ui-md) var(--ease-out-ui);
	}

	body.page-home:has(#home-intro) .home__cases .home__cases-main {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	/* Site-Lede: wie .home__cases-main — nur verstecken, solange #home-intro im DOM (dann mit main animieren). */
	body.page-home:has(#home-intro) .home__cases .home__cases-site-intro,
	body.page-home:has(#home-intro) .home__cases .home__cases-site-intro .home__intro__line,
	body.page-home:has(#home-intro) .home__cases .home__cases-site-intro .home__intro__line * {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	body.page-home.intro-done:not(:has(#home-intro)) .home__cases .home__cases-main {
		opacity: 1;
		visibility: visible;
		transition:
			opacity var(--duration-ui-md) var(--ease-out-ui),
			visibility 0s linear 0s;
	}

	/* Session-Skip / reduced-motion-skip: kein Sprung von opacity 0 → 1 */
	body.home-intro-skipped .home__cases .home__cases-main {
		transition: none;
		opacity: 1;
		visibility: visible;
	}

	body.home-intro-skipped .home__cases .home__cases-site-intro,
	body.home-intro-skipped .home__cases .home__cases-site-intro .home__intro__line,
	body.home-intro-skipped .home__cases .home__cases-site-intro .home__intro__line * {
		transition: none;
		opacity: 1;
		visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-home:has(#home-intro) .home__cases .home__cases-main {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	body.page-home:has(#home-intro) .home__cases .home__cases-site-intro,
	body.page-home:has(#home-intro) .home__cases .home__cases-site-intro .home__intro__line,
	body.page-home:has(#home-intro) .home__cases .home__cases-site-intro .home__intro__line * {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	body.page-home.intro-done:not(:has(#home-intro)) .home__cases .home__cases-main {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--duration-micro) ease;
	}

	body.home-intro-skipped .home__cases .home__cases-main {
		transition: none;
		opacity: 1;
		visibility: visible;
	}

	body.home-intro-skipped .home__cases .home__cases-site-intro,
	body.home-intro-skipped .home__cases .home__cases-site-intro .home__intro__line,
	body.home-intro-skipped .home__cases .home__cases-site-intro .home__intro__line * {
		transition: none;
		opacity: 1;
		visibility: visible;
	}
}

.home__talents .home__talents-intro p {
	margin: 0 0 0.65rem;
}

.home__talents .home__talents-intro p:last-child {
	margin-bottom: 0;
}

@media (max-width: 52rem) {
	.home__cases-main,
	.home__talents .home__talents-main {
		grid-column: 1 / -1;
	}

	.home__talents .home__talents-intro {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.home__cases .home__cases-site-intro {
		grid-column: 1 / -1;
		grid-row: 1;
		max-width: none;
	}

	.home__cases-wrap--has-site-intro .home__cases-main {
		grid-row: 2;
	}

	.home__cases-wrap--has-site-intro:not(:has(> .home__cases-site-intro)) .home__cases-main {
		grid-row: 1;
	}

	.home__cases-wrap > .home__split-right,
	.home__talents-wrap > .home__split-right,
	.project-related-list > .home__split-right {
		grid-column: 1 / -1;
		height: 0;
		min-height: 0;
		overflow: visible;
		align-self: start;
	}

	/*
	 * Vorschau wird ins <li> verschoben: Flex-Column, damit Bild/Teaser unter dem Link zuverlässig Platz im Fluss hat.
	 */
	.page-home .home-cases-list > li,
	.page-home .home-talents-list > li,
	.page-case .project-aside .home-cases-list > li,
	.page-talent .project-aside .home-talents-list > li {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-width: 0;
		/* Höhe wechselt mit Vorschau — Scroll Anchoring sonst Zucken beim Einklappen/Wechsel */
		overflow-anchor: none;
	}

	/*
	 * Preview-scroll (JS): scrollIntoView(link, { block: 'start' }) — Oberkante des Titels unter Subnav.
	 * Gleiches Token wie Hash-Anker (#cases-first).
	 */
	.page-home .home-cases-list > li > a.home-case-link,
	.page-home .home-talents-list > li > a.home-talent-link,
	.page-case .project-aside .home-cases-list > li > a.home-case-link,
	.page-talent .project-aside .home-talents-list > li > a.home-talent-link {
		scroll-margin-top: var(--anchor-scroll-padding);
	}

	/* Falls die Vorschau kurz noch Kind vom Wrap ist: nicht auf 0 Höhe kollabieren. */
	.home__cases-wrap > .home__split-right.home__split-right--active,
	.home__talents-wrap > .home__split-right.home__split-right--active,
	.project-related-list > .home__split-right.home__split-right--active {
		height: auto;
		min-height: 0;
	}
}

/*
 * Layout-Raster sichtbar machen — nur vorübergehend; für Live: Attribut weglassen oder
 * data-design-grid="false" / "off".
 *
 * Tückischer Fehler (behoben): Früher galt [data-design-grid] für jeden Wert — auch "false".
 *
 *   <html data-design-grid>         → **ganzer Viewport** (fix, wie .wrap) + Home-Wraps
 *   <html data-design-grid="page">  → nur Viewport-Raster (keine zusätzlichen Home-Wrap-Overlays)
 *   <html data-design-grid="both"> → wie Default (Viewport + Home-Wraps)
 *   <html data-design-grid="all">   → Viewport + jedes 12er-Feld (.layout-grid, project-body, …)
 *   About (true/both): main.about-page.layout-grid — lokales 12er-Overlay wie Home-Wraps
 *   <html data-design-grid="false"> → aus (oder Attribut ganz weglassen)
 *
 * Stärke/Farbe: --layout-grid-debug-opacity, --layout-grid-debug-rgb
 *
 * Default-Modus + data-design-grid="all": gleicher ::before-/Kinder-Stack (eine Deklarationsliste, mehrere Selektoren).
 */
html[data-design-grid]:not([data-design-grid="false"]):not([data-design-grid="off"]):not([data-design-grid="page"]):not([data-design-grid="all"]) .home__cases .home__cases-wrap::before,
html[data-design-grid]:not([data-design-grid="false"]):not([data-design-grid="off"]):not([data-design-grid="page"]):not([data-design-grid="all"]) .home__talents .home__talents-wrap::before,
html[data-design-grid]:not([data-design-grid="false"]):not([data-design-grid="off"]):not([data-design-grid="page"]):not([data-design-grid="all"]) main.about-page.layout-grid::before,
html[data-design-grid="all"] .layout-grid::before,
html[data-design-grid="all"] .home__cases .home__cases-wrap::before,
html[data-design-grid="all"] .home__talents .home__talents-wrap::before,
html[data-design-grid="all"] .project-body::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	--layout-col-w: calc(
		(100% - (var(--layout-grid-cols) - 1) * var(--layout-grid-gap)) /
			var(--layout-grid-cols)
	);
	background: repeating-linear-gradient(
		90deg,
		rgba(var(--layout-grid-debug-rgb), var(--layout-grid-debug-opacity)) 0,
		rgba(var(--layout-grid-debug-rgb), var(--layout-grid-debug-opacity)) var(--layout-col-w),
		transparent var(--layout-col-w),
		transparent calc(var(--layout-col-w) + var(--layout-grid-gap))
	);
}

html[data-design-grid]:not([data-design-grid="false"]):not([data-design-grid="off"]):not([data-design-grid="page"]):not([data-design-grid="all"]) .home__cases .home__cases-wrap > *,
html[data-design-grid]:not([data-design-grid="false"]):not([data-design-grid="off"]):not([data-design-grid="page"]):not([data-design-grid="all"]) .home__talents .home__talents-wrap > *,
html[data-design-grid]:not([data-design-grid="false"]):not([data-design-grid="off"]):not([data-design-grid="page"]):not([data-design-grid="all"]) main.about-page.layout-grid > *,
html[data-design-grid="all"] .layout-grid > *,
html[data-design-grid="all"] .home__cases .home__cases-wrap > *,
html[data-design-grid="all"] .home__talents .home__talents-wrap > *,
html[data-design-grid="all"] .project-body > * {
	position: relative;
	z-index: 1;
}

/* Voller Viewport: gleiche Spaltenlogik, horizontal wie zentrierte .wrap */
html[data-design-grid]:not([data-design-grid="false"]):not([data-design-grid="off"]):not([data-design-grid="page"]):not([data-design-grid="all"]) .page-wrapper::before,
html[data-design-grid="page"] .page-wrapper::before,
html[data-design-grid="all"] .page-wrapper::before {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(var(--max), calc(100vw - 2 * var(--page-pad)));
	box-sizing: border-box;
	/* Unter .site-sticky-bar (120), über Hero/Content — sonst Case/Talent mit data-design-grid="all": Raster über der Subnav */
	z-index: 30;
	pointer-events: none;
	--layout-col-w: calc(
		(100% - (var(--layout-grid-cols) - 1) * var(--layout-grid-gap)) /
			var(--layout-grid-cols)
	);
	background: repeating-linear-gradient(
		90deg,
		rgba(var(--layout-grid-debug-rgb), var(--layout-grid-debug-opacity)) 0,
		rgba(var(--layout-grid-debug-rgb), var(--layout-grid-debug-opacity)) var(--layout-col-w),
		transparent var(--layout-col-w),
		transparent calc(var(--layout-col-w) + var(--layout-grid-gap))
	);
}

/* Home-Cases: große Display-Zeilen */
.home__cases .list-mega.home-cases-list a.home-case-link,
.project-aside .list-mega.home-cases-list a.home-case-link {
	font-size: var(--home-mega-list-size);
	font-weight: 700;
	line-height: 1.06;
}

@media (min-width: 52.0625rem) {
	.home__cases-wrap:not(.home__cases-wrap--has-site-intro) > .home__split-right,
	.home__talents-wrap:not(.home__talents-wrap--has-intro) > .home__split-right {
		grid-column: 1 / -1;
		grid-row: 2;
		height: 0;
		min-height: 0;
		min-width: 0;
		margin: 0;
		padding: 0;
		align-self: start;
		overflow: visible;
	}

	.home__talents-wrap--has-intro > .home__split-right,
	.home__cases-wrap--has-site-intro > .home__split-right {
		grid-column: 1 / -1;
		grid-row: 3;
		height: 0;
		min-height: 0;
		min-width: 0;
		margin: 0;
		padding: 0;
		align-self: start;
		overflow: visible;
	}

	/*
	 * Vorschau: Cases unten rechts, Talents unten links — bündig am Viewport (kein --page-pad-Abstand).
	 * Breite: bis 26rem, max. sichtbare Viewportbreite (safe-area nur als Innenabstand sinnvoll bei Notch).
	 */
	.home__split-right--cases,
	.home__split-right--talents {
		position: fixed;
		z-index: 130;
		top: auto;
		bottom: 0;
		transform: none;
		width: min(26rem, 100svw);
		max-width: 100svw;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		padding-left: env(safe-area-inset-left, 0px);
		padding-right: env(safe-area-inset-right, 0px);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.35rem;
		pointer-events: none;
	}

	.home__split-right--cases {
		left: auto;
		right: 0;
	}

	.home__split-right--talents {
		left: 0;
		right: auto;
	}

	/* Cases: Rein von rechts; Talents: von links — Exit jeweils zurück zur Seite */
	.home__split-right--cases .home__preview-grid.home__preview-grid--reveal {
		animation: home-preview-slide-in-cases var(--duration-reveal) var(--ease-out-editorial) both;
	}

	.home__split-right--talents .home__preview-grid.home__preview-grid--reveal {
		animation: home-preview-slide-in-talents var(--duration-reveal) var(--ease-out-editorial) both;
	}

	.home__split-right--cases .home__preview-grid.home__preview-grid--cross-out {
		animation: none;
		opacity: 0;
		transform: translate3d(min(28vw, 11rem), 0, 0) scale(0.996);
		pointer-events: none;
		transition:
			opacity var(--duration-ui) var(--ease-out-editorial),
			transform var(--duration-ui) var(--ease-out-editorial);
	}

	.home__split-right--talents .home__preview-grid.home__preview-grid--cross-out {
		animation: none;
		opacity: 0;
		transform: translate3d(calc(-1 * min(28vw, 11rem)), 0, 0) scale(0.996);
		pointer-events: none;
		transition:
			opacity var(--duration-ui) var(--ease-out-editorial),
			transform var(--duration-ui) var(--ease-out-editorial);
	}

	.home__split-right--cases .home__preview-grid.home__preview-grid--out {
		opacity: 0;
		transform: translate3d(min(22vw, 9rem), 0, 0);
		pointer-events: none;
		transition:
			opacity var(--duration-ui-md) var(--ease-out-editorial),
			transform var(--duration-ui-md) var(--ease-out-editorial);
	}

	.home__split-right--talents .home__preview-grid.home__preview-grid--out {
		opacity: 0;
		transform: translate3d(calc(-1 * min(22vw, 9rem)), 0, 0);
		pointer-events: none;
		transition:
			opacity var(--duration-ui-md) var(--ease-out-editorial),
			transform var(--duration-ui-md) var(--ease-out-editorial);
	}

	.home__split-right--cases.home__split-right--active,
	.home__split-right--talents.home__split-right--active {
		z-index: 140;
		pointer-events: auto;
	}

	.home__preview-toolbar {
		display: none !important;
	}

	.home__preview-open {
		display: none !important;
	}

	/* Desktop: Kategorie über dem Teaser, horizontal */
	.home__split-right--cases.home__split-right--active,
	.home__split-right--talents.home__split-right--active {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-end;
		row-gap: 0.35rem;
	}

	.home__split-right--cases .home__split-tag,
	.home__split-right--talents .home__split-tag {
		position: static;
		pointer-events: none;
		max-width: 100%;
		width: auto;
		white-space: normal;
		margin: 0;
		order: 1;
		align-self: stretch;
		text-align: left;
	}

	.home__split-right--cases .home__preview-visual,
	.home__split-right--talents .home__preview-visual {
		order: 2;
		width: 100%;
		min-height: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * Desktop-Teaser: 5∶7 — max-height der Basisregel (--home-preview-teaser-max-h) bricht das Ratio bei schmalem Panel,
	 * daher hier explizit aufheben; Höhe kommt nur aus width × aspect-ratio.
	 */
	.home__split-right--cases .home__preview-teaser,
	.home__split-right--talents .home__preview-teaser {
		aspect-ratio: 5 / 7;
		max-height: none;
		height: auto;
		flex-shrink: 0;
	}
}

@media (max-width: 52rem) {
	.list-mega a {
		font-size: var(--home-mega-list-size-sm);
	}

	/*
	 * Vorschau schmal: nur „+“ über dem Teaser; Kategorie (mono) unter dem Bild.
	 */
	.home__split-right--cases:not(.home__split-right--active),
	.home__split-right--talents:not(.home__split-right--active) {
		display: none !important;
	}

	.home__split-right--cases.home__split-right--active,
	.home__split-right--talents.home__split-right--active {
		display: flex !important;
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 100%;
		margin: 0.3rem 0.2rem 0;
		padding: 0;
		box-sizing: border-box;
		flex-direction: column;
		align-items: stretch;
		gap: 0.35rem;
		pointer-events: auto;
		overflow: visible;
		background: transparent;
		border: 0;
		box-shadow: none;
		border-radius: 0;
		font-family: var(--font-mono);
		font-weight: 400;
	}

	.home__split-right--cases.home__split-right--active {
		color: var(--fg);
	}

	.home__split-right--talents.home__split-right--active {
		color: var(--white);
	}

	.page-home .home-cases-list li.is-preview-open,
	.page-home .home-talents-list li.is-preview-open,
	.page-case .project-aside .home-cases-list li.is-preview-open,
	.page-talent .project-aside .home-talents-list li.is-preview-open {
		margin-bottom: 0.5rem;
	}

	.list-mega li > .home__split-right--cases,
	.list-mega li > .home__split-right--talents {
		flex: 0 0 auto;
		min-width: 0;
	}

	.home__split-right--cases .home__split-tag:not([hidden]),
	.home__split-right--talents .home__split-tag:not([hidden]) {
		max-width: 100%;
		box-sizing: border-box;
	}

	.home__split-right--cases .home__split-tag,
	.home__split-right--talents .home__split-tag {
		align-self: stretch;
		text-align: left;
		order: 2;
	}

	.home__split-right--cases .home__preview-visual,
	.home__split-right--talents .home__preview-visual {
		order: 1;
		position: relative;
		width: 100%;
		flex: 0 0 auto;
		min-height: 0;
		overflow: hidden;
	}

	/*
	 * Tagline unter dem Teaser: leicht von unten, nach Reveal mit kurzem Delay.
	 */
	.home__split-right--cases.home__split-right--active .home__split-tag:not([hidden]),
	.home__split-right--talents.home__split-right--active .home__split-tag:not([hidden]) {
		opacity: 0;
		transform: translate3d(0, 0.28rem, 0);
		transition:
			opacity var(--duration-ui-long) var(--home-preview-narrow-motion-ease)
				var(--home-preview-narrow-tag-delay),
			transform var(--duration-ui-long) var(--home-preview-narrow-motion-ease)
				var(--home-preview-narrow-tag-delay);
	}

	.page-home .home-cases-list > li.is-preview-open .home__split-right--cases .home__split-tag:not([hidden]),
	.page-home .home-talents-list > li.is-preview-open .home__split-right--talents .home__split-tag:not([hidden]),
	.page-case .project-aside .home-cases-list > li.is-preview-open .home__split-tag:not([hidden]),
	.page-talent .project-aside .home-talents-list > li.is-preview-open .home__split-tag:not([hidden]) {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.home__preview-toolbar {
		position: absolute;
		inset: 0;
		z-index: 3;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		box-sizing: border-box;
		margin: 0;
		padding: 0.75rem 1rem;
		font-family: var(--font-mono);
		font-weight: 400;
		pointer-events: none;
	}

	.home__preview-toolbar .home__preview-open {
		pointer-events: auto;
	}

	/* Nur „+“: 2,25rem Kreis, kein Fill; Striche in --accent (Label: aria-label am Link) */
	.home__preview-toolbar .home__preview-open {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		width: 2.25rem;
		height: 2.25rem;
		aspect-ratio: 1;
		max-width: none;
		min-height: 0;
		font-size: var(--text-label);
		font-family: var(--font-mono);
		font-weight: 400;
		line-height: 1;
		color: var(--fg);
		background: transparent;
		border: 0;
		border-radius: 50%;
		box-shadow: none;
		cursor: pointer;
		opacity: 1;
		gap: 0;
		flex-shrink: 0;
		text-decoration: none;
		text-align: center;
		-webkit-tap-highlight-color: transparent;
	}

	.home__preview-toolbar .home__preview-open__plus {
		position: relative;
		display: block;
		width: 2.25rem;
		height: 2.25rem;
		flex-shrink: 0;
	}

	.home__preview-toolbar .home__preview-open__plus-bar {
		position: absolute;
		left: 50%;
		top: 50%;
		background: var(--accent);
		transform: translate(-50%, -50%);
	}

	.home__preview-toolbar .home__preview-open__plus-bar--h {
		width: 2.25rem;
		height: 1px;
	}

	.home__preview-toolbar .home__preview-open__plus-bar--v {
		width: 1px;
		height: 2.25rem;
	}

	.home__preview-toolbar .home__preview-open__text {
		display: none !important;
	}

	.home__preview-toolbar .home__preview-open[hidden] {
		display: none !important;
	}

	.home__preview-toolbar .home__preview-open:hover,
	.home__preview-toolbar .home__preview-open:focus-visible {
		opacity: 1;
	}

	/*
	 * Schmal: Einklappen nur Maske + max-height — Bild bleibt während des Zusammenziehens opak (kein Fade);
	 * Aufklappen wie bisher mit leichtem Fade/Versatz aus dem geschlossenen Zustand (s. :has ohne --reveal).
	 */
	.home__split-right--cases.home__split-right--active .home__preview-visual,
	.home__split-right--talents.home__split-right--active .home__preview-visual {
		transition:
			max-height var(--home-preview-narrow-motion-duration) var(--home-preview-narrow-motion-ease),
			transform var(--home-preview-narrow-motion-duration) var(--home-preview-narrow-motion-ease),
			opacity var(--home-preview-narrow-motion-duration) var(--home-preview-narrow-motion-ease),
			clip-path var(--home-preview-narrow-motion-duration) var(--home-preview-narrow-motion-ease);
	}

	/*
	 * Schmal: Zeile zu ohne --reveal/--out; nur li.is-preview-open steuert die Maske (JS setzt Klasse nach scrollIntoView).
	 */
	.page-home .home-cases-list > li:not(.is-preview-open) .home__split-right--cases .home__preview-visual,
	.page-home .home-talents-list > li:not(.is-preview-open) .home__split-right--talents .home__preview-visual,
	.page-case .project-aside .home-cases-list > li:not(.is-preview-open) .home__preview-visual,
	.page-talent .project-aside .home-talents-list > li:not(.is-preview-open) .home__preview-visual {
		max-height: 0;
		opacity: 0;
		transform: translate3d(0, min(5vw, 0.65rem), 0);
		clip-path: inset(0 0 100% 0);
	}

	.page-home .home-cases-list > li.is-preview-open .home__split-right--cases .home__preview-visual,
	.page-home .home-talents-list > li.is-preview-open .home__split-right--talents .home__preview-visual,
	.page-case .project-aside .home-cases-list > li.is-preview-open .home__preview-visual,
	.page-talent .project-aside .home-talents-list > li.is-preview-open .home__preview-visual {
		max-height: var(--home-preview-teaser-max-h);
		opacity: 1;
		transform: translate3d(0, 0, 0);
		clip-path: inset(0);
	}

	.home__split-right--cases .home__preview-grid,
	.home__split-right--talents .home__preview-grid {
		position: relative;
		z-index: 0;
		width: 100%;
		flex: 0 0 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		overflow: hidden;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.home__split-right--cases .home__preview-grid.home__preview-grid--reveal,
	.home__split-right--talents .home__preview-grid.home__preview-grid--reveal {
		animation: none;
	}

	.home__split-right--cases .home__preview-grid.home__preview-grid--cross-out,
	.home__split-right--talents .home__preview-grid.home__preview-grid--cross-out,
	.home__split-right--cases .home__preview-grid.home__preview-grid--out,
	.home__split-right--talents .home__preview-grid.home__preview-grid--out {
		animation: none;
		opacity: 1;
		transform: none;
		pointer-events: none;
		transition: none;
	}

	.home__split-right--cases .home__preview-teaser,
	.home__split-right--talents .home__preview-teaser {
		width: 100%;
		max-width: 100%;
		/* nur rem — keine Viewport-Einheiten (vh/svh/dvh wackeln in Brave/Chromium beim Scrollen) */
		max-height: var(--home-preview-teaser-max-h);
		flex-shrink: 0;
	}

	@media (prefers-reduced-motion: reduce) {
		.home__preview-toolbar .home__preview-open {
			background: transparent;
		}

		.page-home .home-cases-list > li:not(.is-preview-open) .home__split-right--cases .home__preview-visual,
		.page-home .home-talents-list > li:not(.is-preview-open) .home__split-right--talents .home__preview-visual,
		.page-case .project-aside .home-cases-list > li:not(.is-preview-open) .home__split-right--cases .home__preview-visual,
		.page-talent .project-aside .home-talents-list > li:not(.is-preview-open) .home__split-right--talents .home__preview-visual {
			transition: none !important;
			transform: none !important;
			animation: none !important;
			clip-path: inset(0 0 100% 0) !important;
			max-height: 0 !important;
			opacity: 0 !important;
			pointer-events: none !important;
		}

		.page-home .home-cases-list > li.is-preview-open .home__split-right--cases .home__preview-visual,
		.page-home .home-talents-list > li.is-preview-open .home__split-right--talents .home__preview-visual,
		.page-case .project-aside .home-cases-list > li.is-preview-open .home__split-right--cases .home__preview-visual,
		.page-talent .project-aside .home-talents-list > li.is-preview-open .home__split-right--talents .home__preview-visual {
			transition: none !important;
			transform: none !important;
			animation: none !important;
			clip-path: none !important;
			max-height: none !important;
			opacity: 1 !important;
			pointer-events: auto !important;
		}

		.home__split-right--cases .home__preview-grid,
		.home__split-right--talents .home__preview-grid {
			transition: none !important;
			transform: none !important;
			animation: none !important;
			opacity: 1 !important;
			pointer-events: auto !important;
		}

		.page-home .home-cases-list > li.is-preview-open .home__split-right--cases .home__split-tag:not([hidden]),
		.page-home .home-talents-list > li.is-preview-open .home__split-right--talents .home__split-tag:not([hidden]),
		.page-case .project-aside .home-cases-list > li.is-preview-open .home__split-tag:not([hidden]),
		.page-talent .project-aside .home-talents-list > li.is-preview-open .home__split-tag:not([hidden]) {
			opacity: 1 !important;
			transform: none !important;
			transition: none !important;
		}
	}

}

/* Wie .page-intro: gleicher Abstand oben und unten (kein Sprung zu anderen Seiten) */
.home__cases-teaser {
	margin: var(--page-intro-vspace) 0;
	max-width: min(34rem, 100%);
	font-size: var(--text-reading);
	line-height: 1.65;
	color: var(--fg);
}

/* Galerie-JSON im <li> — nicht anzeigen */
.home-preview-gallery-json {
	display: none !important;
}

/*
 * Home-Vorschau: eine Teaser-Kachel; Bilder wechseln per JS (gifartig).
 */
.home__preview-grid[hidden] {
	display: none !important;
}

.home__preview-grid {
	--home-preview-ease: var(--ease-out-editorial);
	width: 100%;
	box-sizing: border-box;
	min-height: 0;
	opacity: 1;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	transition:
		opacity var(--duration-ui-long) var(--home-preview-ease),
		transform var(--duration-ui-long) var(--home-preview-ease);
}

/* Beim ersten Erscheinen / nach Listenwechsel: etwas weicher */
.home__preview-grid--reveal {
	animation: home-preview-grid-in var(--duration-reveal) var(--home-preview-ease) both;
}

/* Listen-Hover: alter Teaser kurz zurücknehmen, dann neuer Inhalt (home-cases-preview.js) */
.home__preview-grid--cross-out {
	opacity: 0;
	transform: translate3d(0, 5px, 0) scale(0.997);
	pointer-events: none;
	transition:
		opacity var(--duration-ui-md) var(--home-preview-ease),
		transform var(--duration-ui-md) var(--home-preview-ease);
}

@keyframes home-preview-grid-in {
	from {
		opacity: 0;
		transform: translate3d(0, 9px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Desktop Home-Vorschau: horizontal rein (Cases ← rechts, Talents ← links) */
@keyframes home-preview-slide-in-cases {
	from {
		opacity: 0;
		transform: translate3d(min(32vw, 14rem), 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes home-preview-slide-in-talents {
	from {
		opacity: 0;
		transform: translate3d(calc(-1 * min(32vw, 14rem)), 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.home__preview-grid--out {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
	pointer-events: none;
	transition:
		opacity var(--duration-ui-long) var(--home-preview-ease),
		transform var(--duration-ui-long) var(--home-preview-ease);
}

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

	.home__preview-grid--reveal {
		animation: none;
	}

	.home__preview-grid--cross-out {
		opacity: 1 !important;
		transform: none !important;
	}
}

.home__split-right--cases .home__preview-grid {
	--home-preview-cell: var(--black);
}

.home__split-right--talents .home__preview-grid {
	--home-preview-cell: var(--white);
}

/* Galerie-Diashow: volle Grid-Fläche schwarz (Talents-Panel nutzt sonst helles --home-preview-cell). */
.home__preview-grid--gallery {
	background-color: var(--black);
}

.home__preview-teaser {
	cursor: pointer;
	position: relative;
	aspect-ratio: 3 / 4;
	width: 100%;
	/* feste Cap statt vh/svh — vermeidet wachsende Teaser bei dynamischem Viewport */
	max-height: var(--home-preview-teaser-max-h);
	min-height: 0;
	margin: 0;
	background: var(--home-preview-cell, var(--black));
	border-radius: 0;
	overflow: hidden;
}

/* Ebene für Diashow (weißes img oder <picture> mit AVIF/WebP) */
.home__preview-teaser__media,
.home__preview-teaser > .home__preview-teaser__img {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	line-height: 0;
}

.home__preview-teaser__media .home__preview-teaser__img {
	width: 100%;
	height: 100%;
	display: block;
}

.home__preview-teaser__img {
	object-fit: cover;
	object-position: center;
	background: transparent;
	display: block;
	transition: opacity var(--duration-ui) var(--ease-teaser-img);
}

/* Falls img-load-indicator früher .bianco-img--track gesetzt hat: kein grauer Shim über dem Bild */
.home__preview-teaser__img.bianco-img--track,
.home__preview-teaser__img.bianco-img--loading,
.home__preview-teaser__img.bianco-img--error {
	background-color: transparent !important;
	animation: none !important;
}

/*
 * Teaser-Stufen (::after): nur für JS-Klassen-Hooks; keine abgestuften Grautöne über dem Bild.
 */
.home__preview-teaser::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	/* Kein Transition: sonst wirkt jeder Teaser-Schritt und das Ein-/Ausblenden weichgezeichnet */
	transition: none;
}

/*
 * Galerie: kein ::after zwischen den Bildern (gleicher z-index wie früher → Artefakte).
 */
.home__preview-teaser--gallery::after {
	z-index: -1;
	opacity: 0 !important;
	background-color: transparent !important;
}

/*
 * Galerie: zwei Stapel, Wechsel per hartem Schnitt in home-cases-preview.js (kein Opacity-Crossfade).
 * Schwarz hinter allen Layern — vermeidet helle/grau wirkende Zwischenframes (v. a. Talents-Strip).
 */
.home__preview-teaser--gallery {
	background: var(--black);
}

/* Opacity nur auf .home__preview-teaser__duo-wrap — inneres img bleibt opacity 1 (kein Flackern bei src-Wechsel). */
.home__preview-teaser--gallery .home__preview-teaser__img {
	opacity: 1;
	transition: none;
	background-color: var(--black);
}

.home__preview-teaser--gallery .home__preview-teaser__duo-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--black);
	border-radius: inherit;
	z-index: 0;
	line-height: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.home__preview-teaser--gallery .home__preview-teaser__duo-wrap > .home__preview-teaser__media,
.home__preview-teaser--gallery .home__preview-teaser__duo-wrap > .home__preview-teaser__img {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	line-height: 0;
}

.home__preview-teaser--gallery .home__preview-teaser__stack--duo {
	opacity: 1 !important;
	transition: none !important;
	animation: none !important;
}

.home__preview-teaser--tone0::after {
	background-color: transparent;
	opacity: 0;
}

.home__preview-teaser--tone1::after,
.home__preview-teaser--tone2::after,
.home__preview-teaser--tone3::after {
	background-color: transparent;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.home__preview-teaser::after {
		opacity: 0 !important;
		background-color: transparent !important;
	}

	.home__preview-teaser__img,
	.home__preview-teaser__stack--duo {
		transition: none !important;
	}
}

/* Kleines Mono-Label zur Teaser-Vorschau (über dem Bild; horizontal) */
.home__split-tag {
	position: static;
	left: auto;
	bottom: auto;
	margin: 0;
	width: max-content;
	max-width: 100%;
	font-size: var(--text-micro);
	font-weight: 400;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--accent);
	opacity: 0;
}

/* Nur in der Hover-Vorschau: kein Opacity-Fade (sonst wirkt Ein/Aus träge) */
.home__split-right .home__split-tag {
	transition: none;
}

.home__split-right--active .home__split-tag:not([hidden]) {
	opacity: 1;
}

.home__split-right--talents .home__split-tag {
	align-self: stretch;
	text-align: left;
	padding-left: 1rem;
	box-sizing: border-box;
}

@media (max-width: 52rem) {
	.home__split-right--talents .home__split-tag {
		padding-left: 0;
	}
}

.home__split-right--cases .home__split-tag {
	align-self: stretch;
}

.section--dark .home__section-label {
	text-align: center;
}

/* Label links wie Cases (nicht section--dark-zentriert) */
.home__talents .home__talents-main > .home__section-label {
	text-align: left;
}

/* „More talents“ links unter der Liste wie „More cases“ */
.section--dark.home__talents .home__talents-main .pill {
	display: inline-block;
	margin-left: 0;
	margin-right: 0;
}

.section--dark .list-mega {
	text-align: center;
}

.section--dark .list-mega a {
	color: var(--white);
}

/* Talent-Namen: gleiche Mega-Größe wie Cases */
.section--dark.home__talents .home__talents-main .home-talents-list {
	text-align: left;
}

.section--dark.home__talents .home__talents-main .home-talents-list a.home-talent-link,
.project-aside .project-related-list__main .home-talents-list a.home-talent-link {
	font-size: var(--home-mega-list-size);
	font-weight: 700;
	line-height: 1.06;
}

.section--dark .pill {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

/* Page listing */
.page-intro {
	max-width: 40rem;
	margin: var(--page-intro-vspace) 0;
}

.page-list .list-mega {
	margin-bottom: 2rem;
}

/* Einfache Inhaltsseiten + Default (gleicher Typo wie Hero-Titel) */
.page-article__title {
	font-family: var(--font-display);
	font-size: var(--text-page-title);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0 0 var(--page-intro-vspace);
}

@media (max-width: 52rem) {
	.page-article__title {
		font-size: var(--text-page-title-sm);
	}
}

.page-article__body {
	margin-top: 0;
}

/* Case / Talent hero */
.hero-dark {
	background: var(--black);
	color: var(--white);
	padding: 0 0 var(--page-intro-vspace);
	overflow: hidden;
	position: relative;
}

/* Case/Talent: 100vw-Bleed — nicht mit overflow am Root abfangen (s. pages.css, bricht sticky). */
/* flow-root am .page-wrapper: BFC, Breakouts/negative Ränder (s. pages.css) */
body.page-case .page-wrapper,
body.page-talent .page-wrapper {
	display: flow-root;
	overflow: visible;
	/* Slide-in auf <main>: transform verschiebt die Paint-Ebene — oben bleibt Layout-Raum; sonst body --bg */
	background-color: var(--black);
}

/* Case- / Talent: kein overflow auf dem Hero — sonst kein Sticky; horizont. nur am Bleed-Kind. */
body.page-case .hero-dark,
body.page-talent .hero-dark {
	overflow: visible;
	/* Stacking: .page-detail__light (folgendes section in <main>, z-index: 1) über dem Heldbezirk (s. pages.css) */
	position: relative;
	z-index: 0;
	padding-bottom: var(--hero-dark-pad-bottom);
}

/*
 * Case/Talent: Site-Header sitzt als Geschwister vor <main> (Landmarks für Transitions).
 * Geschwister-Header braucht höheres z-index als der Hero in <main>, sonst übermalt das
 * spätere Geschwister-Element den Kopf (früher lag der Header im Hero, kein Konflikt).
 * Im Hero verbleibende .hero-dark .site-header (falls je genutzt): z-index nur über dem Heldbezirk.
 */
.hero-dark .site-header {
	position: relative;
	z-index: 2;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}

body.page-case .page-wrapper > .site-header.site-header--dark,
body.page-talent .page-wrapper > .site-header.site-header--dark {
	position: relative;
	z-index: 10;
	/* Volle Breite wie .hero-dark: Wrapper-Pad ausgleichen + Innenpad für Raster (s. page-shell Hero-Breakout). */
	max-width: none;
	margin-left: calc(-1 * var(--page-pad));
	margin-right: calc(-1 * var(--page-pad));
	width: calc(100% + 2 * var(--page-pad));
	box-sizing: border-box;
	padding-left: var(--page-pad);
	padding-right: var(--page-pad);
	padding-bottom: 0;
	background-color: var(--black);
}

/*
 * Case/Talent: beim Slide-in von <main> zeigt Chromium mitunter helle Pixel zwischen Kopf und Hero.
 * Schwarzer Überhang unter dem Header (Case + Talent); aktiver Link ohne text-decoration.
 */
body.page-case .page-wrapper > .site-header.site-header--dark::after,
body.page-talent .page-wrapper > .site-header.site-header--dark::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 4px;
	background: var(--black);
	pointer-events: none;
	z-index: 11;
}
body.page-case .page-wrapper > .site-header.site-header--dark .site-header__loading,
body.page-talent .page-wrapper > .site-header.site-header--dark .site-header__loading {
	color: var(--white);
}

.hero-dark .site-nav a,
body.page-case .page-wrapper > .site-header.site-header--dark .site-nav a,
body.page-talent .page-wrapper > .site-header.site-header--dark .site-nav a {
	color: var(--white);
}

.hero-dark .site-nav--mega a[aria-current="page"],
.hero-dark .site-nav--mega a[aria-current="page"]:hover,
.hero-dark .site-nav--mega a[aria-current="page"]:focus,
body.page-case .page-wrapper > .site-header.site-header--dark .site-nav--mega a[aria-current="page"],
body.page-case .page-wrapper > .site-header.site-header--dark .site-nav--mega a[aria-current="page"]:hover,
body.page-case .page-wrapper > .site-header.site-header--dark .site-nav--mega a[aria-current="page"]:focus {
	color: var(--accent);
	border-bottom: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

body.page-talent .page-wrapper > .site-header.site-header--dark .site-nav--mega a[aria-current="page"],
body.page-talent .page-wrapper > .site-header.site-header--dark .site-nav--mega a[aria-current="page"]:hover,
body.page-talent .page-wrapper > .site-header.site-header--dark .site-nav--mega a[aria-current="page"]:focus {
	color: var(--accent);
	border-bottom: 1px solid var(--accent);
	text-decoration: none;
}

.hero-dark__title {
	margin: 0;
	padding: 0;
	font-family: var(--font-display);
	font-size: var(--text-hero-title);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}

/* Case- / Talent-Detail: Hero-Titel = gleiche Schriftgröße/Lauf wie Home-Case-Liste, Zeilenabstand enger */
body.page-case .hero-dark__title,
body.page-talent .hero-dark__title {
	font-size: var(--home-mega-list-size);
	line-height: var(--home-case-hero-line-height);
}

@media (max-width: 52rem) {
	body.page-case .hero-dark__title,
	body.page-talent .hero-dark__title {
		font-size: var(--home-mega-list-size-sm);
	}
}

/* Titel + Galerie am gleichen 12er-Raster wie .project-body */
.wrap.layout-grid.hero-dark__grid {
	row-gap: 0;
	min-width: 0;
}

/* Sticky: Gridzeilen an den Inhalt, nicht dehnen; sonst hält die Zelle u. U. keinen Scroll-Raum fürs Kleben. */
body.page-case .wrap.layout-grid.hero-dark__grid,
body.page-talent .wrap.layout-grid.hero-dark__grid {
	align-items: start;
	min-height: 0;
	overflow: visible;
}

.hero-dark__grid .hero-dark__title {
	/* Wie Service/About: Abstand unter Nav = --page-intro-vspace */
	margin: var(--page-intro-vspace) 0 var(--page-intro-vspace);
}

.hero-dark__gallery {
	min-width: 0;
	overflow-x: clip;
}

/* Talent: Galerie / Kooperationen — Tabs oberhalb des Karussells */
.talent-hero-gallery {
	min-width: 0;
	position: relative;
	z-index: 0;
}

.talent-hero-gallery__ribbon {
	position: relative;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0 0 0.75rem;
	padding: 0;
	max-width: var(--max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--page-pad);
	padding-right: var(--page-pad);
	box-sizing: border-box;
}

@media (max-width: 52rem) {
	.talent-hero-gallery__ribbon {
		padding-left: 0;
	}
}

/* Flache Text-Tabs: weiß, keine Button-Kontur; Aktiv nur Unterstreichung */
.talent-hero-gallery__tab {
	margin: 0;
	padding: 0.15rem 0;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--white);
	background: transparent;
	border: 0;
	box-shadow: none;
	text-decoration: none;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.talent-hero-gallery__tab:focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: 2px;
}

.talent-hero-gallery__tab.is-active {
	text-decoration: underline;
}

.talent-hero-gallery__panes {
	position: relative;
	min-width: 0;
}

.talent-hero-gallery__pane[hidden] {
	display: none !important;
}

/* Case Hero: Video-Textliste (Raster wie Hero-Titel) + nahezu Vollbild-Modal */
.case-hero-video-list-wrap {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.case-hero-video-list-root {
	display: grid;
	grid-template-columns: repeat(var(--layout-grid-cols), minmax(0, 1fr));
	column-gap: var(--layout-grid-gap);
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.case-hero-video-list__kicker {
	margin: 0 0 0.65rem;
	padding: 0;
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--white);
	opacity: 0.68;
}

@media (max-width: 52rem) {
	.case-hero-video-list__kicker {
		grid-column: 1 / -1;
	}
}

.case-hero-video-list {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
	border-top: 1px solid var(--white);
	border-bottom: 1px solid var(--white);
}

.case-hero-video-list__li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--white);
}

.case-hero-video-list__li:last-child {
	border-bottom: none;
}

.case-hero-video-list__item {
	display: grid;
	grid-template-columns: repeat(var(--layout-grid-cols), minmax(0, 1fr));
	column-gap: var(--layout-grid-gap);
	width: 100%;
	margin: 0;
	padding: 0.85rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--white);
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--duration-micro) ease;
}

@media (min-width: 52.0625rem) {
	.case-hero-video-list__item {
		padding: 1rem 0;
	}
}

.case-hero-video-list__item:hover .case-hero-video-list__label {
	color: var(--accent);
}

.case-hero-video-list__item:focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: 2px;
}

/* Zeilentitel = gleiche Mega-Display-Linie wie Home-Case- / Hero-Titel */
body.page-case .case-hero-video-list__label {
	grid-column: var(--layout-content-start) / span var(--layout-content-span);
	width: 100%;
	min-width: 0;
	justify-self: start;
	display: block;
	font-family: var(--font-display);
	font-size: var(--home-mega-list-size);
	font-weight: 700;
	line-height: var(--home-case-hero-line-height);
	text-transform: uppercase;
	letter-spacing: normal;
	color: inherit;
	white-space: normal;
	overflow-wrap: anywhere;
	transition: color var(--duration-micro) ease;
}

@media (max-width: 52rem) {
	body.page-case .case-hero-video-list__label {
		grid-column: 1 / -1;
		font-size: var(--home-mega-list-size-sm);
	}
}

body.page-case .hero-dark__gallery {
	transition: opacity var(--duration-ui) var(--ease-out-soft);
}

body.page-case.case-hero-video-modal-open .hero-dark__gallery {
	opacity: 0;
	pointer-events: none;
}

body.page-case.case-hero-video-modal-open .case-hero-video-modal:not([hidden]) {
	z-index: 2147483646;
}

.case-hero-video-modal {
	/* Oberkante: max(Hero-Header, Sticky); im Hero + 0,5rem unter Nav unter der Wortmarke (JS) */
	--chv-modal-pad-y: calc(0.5rem + 2.5rem);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: var(--case-hero-video-modal-top, 0px);
	z-index: var(--z-case-video-modal-layer);
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	/* Explizite Höhe: Flex-„Resthöhe“ zum Viewport, damit Stage/Video zuverlässig mittig sind */
	height: calc(100vh - var(--case-hero-video-modal-top, 0px));
	height: calc(100dvh - var(--case-hero-video-modal-top, 0px));
	max-height: none;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	background: transparent;
	color: var(--white);
	isolation: isolate;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.case-hero-video-modal[hidden] {
	display: none !important;
}

.case-hero-video-modal__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	background: var(--black);
	opacity: 0;
}

.case-hero-video-modal--open .case-hero-video-modal__backdrop {
	animation: case-hero-video-modal-backdrop-in var(--duration-ui) var(--ease-out-soft) forwards;
}

@keyframes case-hero-video-modal-backdrop-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes case-hero-video-modal-backdrop-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.case-hero-video-modal--closing .case-hero-video-modal__backdrop {
	animation: case-hero-video-modal-backdrop-out var(--duration-ui) var(--ease-out-soft) forwards;
}

.case-hero-video-modal__backdrop:focus {
	outline: none;
}

.case-hero-video-modal__backdrop:focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: -1px;
}

.case-hero-video-modal__dialog {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	/* Gleicher Block-Abstand oben/unten (Schließen absolut über der Stage im Dialog); Safe-Area */
	padding: max(var(--chv-modal-pad-y), env(safe-area-inset-top, 0px))
		max(0.75rem, env(safe-area-inset-right, 0px))
		max(var(--chv-modal-pad-y), env(safe-area-inset-bottom, 0px))
		max(0.75rem, env(safe-area-inset-left, 0px));
	box-sizing: border-box;
	pointer-events: none;
}

.case-hero-video-modal--open .case-hero-video-modal__dialog {
	animation: case-hero-video-modal-dialog-in var(--duration-reveal) var(--ease-out-soft) both;
	animation-delay: 0.04s;
}

.case-hero-video-modal--closing .case-hero-video-modal__dialog {
	animation: case-hero-video-modal-dialog-out var(--duration-modal-out) var(--ease-modal-exit) forwards;
}

@keyframes case-hero-video-modal-dialog-in {
	from {
		opacity: 0;
		transform: translateY(min(18vh, 7.5rem));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes case-hero-video-modal-dialog-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(min(18vh, 7.5rem));
	}
}

@media (prefers-reduced-motion: reduce) {
	.case-hero-video-modal--open .case-hero-video-modal__dialog {
		animation: none;
	}

	.case-hero-video-modal--open .case-hero-video-modal__backdrop {
		animation: none;
		opacity: 1;
	}

	.case-hero-video-modal--closing .case-hero-video-modal__dialog,
	.case-hero-video-modal--closing .case-hero-video-modal__backdrop {
		animation: none !important;
		opacity: 0;
	}

	body.page-case.case-hero-video-modal-open .hero-dark__gallery {
		transition: none;
	}
}

/* Im Dialog, über der Video-Stage — Schließen: Theme-Pill (.pill.pill--on-dark), hier nur Platzierung */
.case-hero-video-modal__close {
	position: absolute;
	z-index: 3;
	top: 0.5rem;
	left: max(0.75rem, env(safe-area-inset-left, 0px));
	box-sizing: border-box;
	margin: 0;
	max-width: 100%;
	cursor: pointer;
	pointer-events: auto;
	text-align: left;
	-webkit-tap-highlight-color: transparent;
}

.case-hero-video-modal__stage {
	position: relative;
	min-height: 0;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	overflow: auto;
	overflow-x: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: rgba(246, 247, 243, 0.45) transparent;
	background: transparent;
	/* trotz pointer-events: none am .dialog — Scroll + Bedienung */
	pointer-events: auto;
}

.case-hero-video-modal__video-shell {
	--case-hero-video-pad: 1rem;
	position: relative;
	flex: 1 1 0;
	min-height: 0;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	border: 0;
	/* Oben/unten gleich — sichtbarer Rahmen nur als Linie, nicht asymmetrisch */
	border-block: 1px solid var(--white);
	padding: var(--case-hero-video-pad);
	background: transparent;
}

@media (min-width: 52.0625rem) {
	.case-hero-video-modal__video-shell {
		--case-hero-video-pad: 3rem;
	}
}

.case-hero-video-modal__video-shell--loading {
	min-height: 12rem;
}

.case-hero-video-modal__video-shell--loading::after {
	content: "";
	position: absolute;
	inset: var(--case-hero-video-pad);
	pointer-events: none;
	border-radius: 2px;
	background: linear-gradient(105deg, var(--black) 38%, #242424 50%, var(--black) 62%);
	background-size: 220% 100%;
	animation: case-hero-video-modal-shimmer 1.05s ease-in-out infinite;
}

@keyframes case-hero-video-modal-shimmer {
	0% {
		background-position: 120% 0;
	}
	100% {
		background-position: -120% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.case-hero-video-modal__video-shell--loading::after {
		animation: none;
		background: #242424;
		background-position: 0 0;
	}
}

.case-hero-video-modal__video {
	display: block;
	flex: 1 1 0;
	min-height: 0;
	/* Volle Höhe der Video-Shell (Inhalt bleibt per object-fit proportioniert) */
	height: 100%;
	max-height: 100%;
	width: auto;
	max-width: 100%;
	align-self: center;
	object-fit: contain;
	object-position: center;
	border-radius: 2px;
	pointer-events: auto;
	margin-inline: auto;
}

/* Case / Talent: Sticky auf .hero-dark__gallery (gesamte Galerie-Zeile im Raster), nicht auf .case-hero-carousel-bleed.
   Wenn Sticky am Bleed sitzt, ist der Elternteil .hero-dark__gallery oft exakt so hoch wie der Bleed — dann
   fehlt der sinnvolle Sticky-Bereich (Bereich 0 in der Praxis). Titel + Ladezeile sitzen in eigenen Zeilen
   oberhalb und scrollen weg, danach bleibt die Spalte unter --project-sticky-below-header kleben. */
body.page-case .hero-dark__gallery,
body.page-talent .hero-dark__gallery {
	--project-sticky-below-header: max(0.15rem, calc(env(safe-area-inset-top, 0px) + 2.75rem));
	min-height: 0;
	overflow: visible;
	position: -webkit-sticky;
	position: sticky;
	top: var(--project-sticky-below-header);
	align-self: start;
	z-index: 0;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}

/* Karussell-Bleed: kein eigenes Sticky; horizontaler Ausbruch bleibt im Sticky-Eltern */
body.page-case .case-hero-carousel-bleed,
body.page-talent .case-hero-carousel-bleed {
	position: relative;
	z-index: 0;
}

.hero-dark__gallery .gallery-track {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

.hero-dark__gallery .gallery-dots {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

/* =============================================================================
   Case Hero — Swiper, slidesPerView auto, Fraction.
   ============================================================================= */

/* Sticky am äußeren Block; kein overflow: clip auf dem Sticky-Element (bricht Sticky in Chrome/Safari). */
.case-hero-carousel-bleed {
	--chc-pad-x: max(var(--page-pad), env(safe-area-inset-left, 0px));
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	min-width: 0;
	margin: -0.25rem calc(50% - 50vw) 0;
	padding-left: var(--chc-pad-x);
	padding-right: max(var(--page-pad), env(safe-area-inset-right, 0px));
	overflow: visible;
	background: var(--black);
}

/* Horizontales Clipping + Streifen-Problem: nur im Inneren, nicht am sticky .case-hero-carousel-bleed */
.case-hero-carousel-bleed__clip {
	width: 100%;
	min-width: 0;
	overflow-x: clip;
	overflow-y: visible;
}

.case-hero-carousel.swiper {
	/*
	 * Höhe aus Viewport-Breite (vw), nicht *vh: vertikale Browser-Leisten ändern die Höhe,
	 * die Breite typischerweise nicht — damit kein „Atmen“ beim Scrollen.
	 * Faktor ~1,48 ≈ 70 % typischer Portrait-Höhe (H/B ~2,1); Cap in rem für sehr breite Screens.
	 */
	--chc-vh: min(44rem, calc(1.48 * 100vw));
	--chc-slide-gap: 0.5rem;
	/* Maske Peek → aktiv (100% Höhe): weiche Expansion */
	--chc-mask-expand-duration: var(--duration-chc-mask);
	--chc-mask-expand-ease: var(--ease-out-expand);
	/* ~2,5 Kacheln gleichzeitig sichtbar (vorher ~3,5 bei 28vw) */
	--chc-slide-w: min(39vw, 42rem);
	/* Peek/Flanke: Anteil der Track-Höhe als Maske (kein scaleY — sonst wirkt das Bild gequetscht) */
	--chc-flank-media-height: 82%;
	--chc-peek-media-height: 80%;
	--chc-pager-bottom: calc(2.625rem + env(safe-area-inset-bottom, 0px));
	--chc-vpad-fractions: 0.35rem;
	/* Erst alle Platzhalter, dann gemeinsames sanftes Einblenden der Medien */
	--chc-placeholder-reveal: var(--duration-project-hero);
	--chc-track-h: max(
		0px,
		calc(
			var(--chc-vh) - var(--chc-pager-bottom) - var(--chc-vpad-fractions)
		)
	);
	box-sizing: border-box;
	position: relative;
	width: 100%;
	min-width: 0;
	height: var(--chc-vh);
	max-height: var(--chc-vh);
	padding-bottom: var(--chc-pager-bottom);
	overflow: hidden;
	background: var(--black);
}

.case-hero-carousel .swiper-wrapper {
	align-items: stretch;
	height: var(--chc-track-h) !important;
	box-sizing: border-box;
	background: var(--black);
}

.case-hero-carousel__slide.swiper-slide {
	width: var(--chc-slide-w);
	max-width: var(--chc-slide-w);
	height: 100%;
	flex-shrink: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	justify-content: flex-start;
	overflow: hidden;
	background: var(--black);
}

.case-hero-carousel__slide--video.case-hero-carousel__slide--video-orient-pending.swiper-slide,
.case-hero-carousel__slide--video.case-hero-carousel__slide--video-portrait.swiper-slide {
	width: var(--chc-slide-w);
	max-width: var(--chc-slide-w);
}

.case-hero-carousel__slide--video.case-hero-carousel__slide--video-landscape.swiper-slide {
	width: 100vw;
	max-width: 100vw;
}

.case-hero-carousel.swiper.case-hero-carousel--active-video {
	--chc-vh: min(38rem, calc(1.23 * 100vw));
	height: var(--chc-vh);
	max-height: var(--chc-vh);
}

.case-hero-carousel__slide.swiper-slide-active,
.case-hero-carousel__slide--hub {
	z-index: 1;
}

.case-hero-carousel__media {
	margin: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	/* Unterm Platzhalter (s. ::before) */
	background: var(--black);
	position: relative;
	transform-origin: top center;
	transition:
		height var(--chc-mask-expand-duration) var(--chc-mask-expand-ease),
		filter var(--duration-chc-wave) ease,
		opacity var(--duration-ui-md) ease,
		background var(--duration-ui-md) ease;
}

/* Bis Reveal: gräuliche Fläche, leicht pulsend — Medien darüber per CSS einheitlich opacity:0 */
.case-hero-carousel:not(.case-hero-carousel--initial-wave-done) .case-hero-carousel__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: #3a3a3a;
	animation: case-hero-media-placeholder-pulse 1.5s ease-in-out infinite;
}

.case-hero-carousel.case-hero-carousel--initial-wave-done .case-hero-carousel__media::before {
	animation: none;
	opacity: 0;
	transition: opacity var(--chc-placeholder-reveal) var(--ease-out-editorial);
	pointer-events: none;
}

@keyframes case-hero-media-placeholder-pulse {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 0.88;
	}
}

@media (prefers-reduced-motion: reduce) {
	.case-hero-carousel:not(.case-hero-carousel--initial-wave-done) .case-hero-carousel__media::before {
		animation: none;
		opacity: 0.65;
	}

	.case-hero-carousel.case-hero-carousel--initial-wave-done .case-hero-carousel__media::before {
		opacity: 0;
		transition: none;
	}
}

.case-hero-carousel__media picture,
.case-hero-carousel__media > img,
.case-hero-carousel__media > video {
	position: relative;
	z-index: 1;
}

/* Nächste Slide (Peek): gleiche Kachelbreite wie Mitte; Maske nur in der Höhe ~80 %, Bild cover */
.case-hero-carousel__slide.swiper-slide-next:not(.swiper-slide-blank) .case-hero-carousel__media {
	height: var(--chc-peek-media-height);
	align-self: flex-start;
}

.case-hero-carousel__slide.swiper-slide-active .case-hero-carousel__media {
	height: 100%;
}

/* Staffel-Flanken (wenn JS-Klassen aktiv): Höhe ~82 %, kein scaleY */
.case-hero-carousel__slide--adj-prev:not(.case-hero-carousel__slide--hub) .case-hero-carousel__media,
.case-hero-carousel__slide--flank-left:not(.case-hero-carousel__slide--hub) .case-hero-carousel__media {
	height: var(--chc-flank-media-height);
	align-self: flex-start;
	opacity: 1;
}

.case-hero-carousel__slide--flank-right:not(.case-hero-carousel__slide--hub) .case-hero-carousel__media {
	height: var(--chc-flank-media-height);
	align-self: flex-start;
	opacity: 1;
}

/* Mitte (optisch zentriert im Viewport): immer volle Höhe */
.case-hero-carousel__slide--hub .case-hero-carousel__media {
	height: 100%;
	filter: none;
	opacity: 1;
}

.case-hero-carousel__media picture {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.case-hero-carousel__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* kein sichtbares Grau während decode — Fläche bleibt schwarz (Sichtbarkeit steuert .bianco-img-Override unten) */
	background-color: transparent;
	transition: opacity var(--duration-ui-md) ease;
}

/* case-hero: page-shell-Grau hinter object-fit + 0,72-Opacity würden graue Teppiche zeigen — hier nur schwarz bis sichtbar */
.case-hero-carousel__media img.bianco-img--track {
	background-color: transparent !important;
}
.case-hero-carousel__media img.bianco-img--track.bianco-img--loading {
	opacity: 0;
}
.case-hero-carousel__media img.bianco-img--error {
	background-color: transparent !important;
}

/* Vor initial-wave-done: alle Medien aus — alle Kacheln zeigen zuerst nur den grauen Puls-Platzhalter (::before) */
.case-hero-carousel:not(.case-hero-carousel--initial-wave-done) .case-hero-carousel__media picture,
.case-hero-carousel:not(.case-hero-carousel--initial-wave-done) .case-hero-carousel__media > img:not(.case-hero-carousel__img--broken),
.case-hero-carousel:not(.case-hero-carousel--initial-wave-done) .case-hero-carousel__media > video {
	opacity: 0 !important;
	transition: opacity var(--chc-placeholder-reveal) var(--ease-out-editorial);
}

.case-hero-carousel.case-hero-carousel--initial-wave-done .case-hero-carousel__media picture,
.case-hero-carousel.case-hero-carousel--initial-wave-done .case-hero-carousel__media > img:not(.case-hero-carousel__img--broken),
.case-hero-carousel.case-hero-carousel--initial-wave-done .case-hero-carousel__media > video {
	opacity: 1 !important;
	transition: opacity var(--chc-placeholder-reveal) var(--ease-out-editorial);
}

@media (prefers-reduced-motion: reduce) {
	.case-hero-carousel:not(.case-hero-carousel--initial-wave-done) .case-hero-carousel__media picture,
	.case-hero-carousel:not(.case-hero-carousel--initial-wave-done) .case-hero-carousel__media > img:not(.case-hero-carousel__img--broken),
	.case-hero-carousel:not(.case-hero-carousel--initial-wave-done) .case-hero-carousel__media > video,
	.case-hero-carousel.case-hero-carousel--initial-wave-done .case-hero-carousel__media picture,
	.case-hero-carousel.case-hero-carousel--initial-wave-done .case-hero-carousel__media > img:not(.case-hero-carousel__img--broken),
	.case-hero-carousel.case-hero-carousel--initial-wave-done .case-hero-carousel__media > video {
		transition: none !important;
	}
}

/* Kein Browser-Broken-Icon: bei Fehler ausblenden, schwarze Fläche der Figure bleibt */
.case-hero-carousel__media img.case-hero-carousel__img--broken {
	opacity: 0 !important;
	pointer-events: none;
}

/* Hero-Video: wie Bilder — Frame füllen (9:16 / 16:9 / etc. werden sauber zentriert beschnitten) */
.case-hero-carousel__media > video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Einige Browser rendern Video-Rechteck ohne Inhalt als 0 — min. Stretch hilft object-fit */
	min-width: 0;
	min-height: 0;
}

.case-hero-carousel__media--loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-top-color: rgba(255, 255, 255, 0.8);
	animation: biancoSpin 0.9s linear infinite;
	pointer-events: none;
	z-index: 2;
}

/* Während des ersten Batches: nur Platzhalter-Puls, kein Lade-Spinner übers Gewebe */
.case-hero-carousel:not(.case-hero-carousel--initial-wave-done) .case-hero-carousel__media--loading::after {
	opacity: 0;
	visibility: hidden;
}

@keyframes biancoSpin {
	to {
		transform: rotate(360deg);
	}
}

.case-hero-carousel__media--empty {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	width: min(12rem, 42vw);
	height: 100%;
	padding-top: 1.25rem;
}

.case-hero-carousel__placeholder {
	font-size: var(--text-lede);
	text-transform: uppercase;
	opacity: 1;
}

.case-hero-carousel .case-hero-carousel__pager.swiper-pagination-fraction {
	position: absolute;
	left: var(--chc-pad-x);
	bottom: 0;
	width: auto;
	margin: 0;
	padding: 0 0 env(safe-area-inset-bottom, 0px);
	z-index: 2;
	font-family: var(--font-mono);
	font-size: var(--text-label);
	color: var(--white);
}

.case-hero-carousel .case-hero-carousel__pager .swiper-pagination-current {
	font-weight: 400;
	color: var(--white);
}

/* Case/Talent Hero — schmale Viewports: engere Peeks (--chc-vh wie oben, vw-basiert) */
@media (max-width: 64rem) {
	.case-hero-carousel.swiper {
		--chc-slide-gap: 0.35rem;
		--chc-slide-w: min(78vw, 38rem);
		--chc-peek-media-height: 88%;
		--chc-pager-bottom: calc(2.125rem + env(safe-area-inset-bottom, 0px));
		--chc-vpad-fractions: 0.28rem;
	}
}

/* Querformat / kurze Fenster: vw allein zu hoch — auf vmin (hier ≈ Fensterhöhe) begrenzen */
@media (orientation: landscape) and (max-height: 32rem) {
	.case-hero-carousel.swiper {
		--chc-vh: min(38rem, calc(0.92 * 100vmin));
	}

	.case-hero-carousel.swiper.case-hero-carousel--active-video {
		--chc-vh: min(32rem, calc(0.76 * 100vmin));
	}
}

@media (prefers-reduced-motion: reduce) {
	.case-hero-carousel__media {
		transition: none !important;
	}

	.case-hero-carousel__media--loading::after {
		animation: none !important;
	}
}

.gallery-track {
	display: flex;
	gap: 0.75rem;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 0 2rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.gallery-track__slide {
	flex: 0 0 min(72vw, 38rem);
	scroll-snap-align: center;
	border-radius: 0;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--black);
}

.gallery-track__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gallery-track__slide .case-hero-carousel__video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.gallery-dots {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 0 1.5rem;
	font-size: var(--text-label);
	color: var(--white);
}