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

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

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

/* Intro-Phase: --home-intro-top = untere Header-Kante (Viewport), gesetzt per JS */
body.page-home:not(.intro-done) .home__intro--lede {
	position: fixed;
	/* Unterkante Header + gleicher Abstand wie Innenseiten (--page-intro-vspace) */
	top: calc(var(--home-intro-top, 11rem) + var(--page-intro-vspace));
	left: var(--page-pad);
	right: auto;
	/* Gleiche max. Lesbreite wie .home__cases-site-intro (--home-site-intro-text-max) */
	width: min(var(--home-site-intro-text-max), calc(100vw - var(--page-pad) * 2));
	max-width: min(var(--home-site-intro-text-max), calc(100vw - var(--page-pad) * 2));
	margin: 0;
	padding: 0;
	z-index: 16;
	text-align: left;
	font-size: var(--text-lede);
	line-height: 1.65;
	pointer-events: none;
	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;
}

body.page-home.intro-done .home__cases-site-intro.home__intro__typewriter {
	/* kein margin: 0 — Element hat auch .home__cases-site-intro; sonst wegfallen die --page-intro-vspace-Abstände */
	text-wrap: pretty;
}

/* Site-Intro zwei Teile: Source mit Leerzeile dazwischen — Block + pre-line = sichtbarer Absatz */
.home__cases-site-intro.home__intro__typewriter .home__intro__typewriter-text {
	display: block;
}

.home__cases-site-intro .home__intro__line {
	margin: 0;
	line-height: 1.65;
	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;
}

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

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

.section--dark .pill {
	background: transparent;
	color: var(--white);
	box-shadow: inset 0 0 0 1px var(--white);
}

/*
 * 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: wie Typewriter-Phase (left: var(--page-pad)) — ab Gitterspalte 1.
 * Cases-Liste (.home__cases-main) bleibt wie gehabt ab --layout-content-start (4. Spalte).
 */
.home__cases .home__cases-site-intro {
	grid-column: 1 / span var(--layout-content-span);
	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;
}

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

/*
 * Liste verborgen solange #home-intro da ist; nach intro-done schneller einblenden (war 0.48s / 0.52s).
 */
@media (prefers-reduced-motion: no-preference) {
	.home__cases-wrap--has-site-intro .home__cases-main {
		transition:
			opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body.page-home:not(.intro-done):has(#home-intro) .home__cases-wrap--has-site-intro .home__cases-main {
		opacity: 0;
		transform: translateY(0.85rem);
		pointer-events: none;
	}

	body.page-home.intro-done .home__cases-wrap--has-site-intro .home__cases-main {
		opacity: 1;
		transform: translateY(0);
	}

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

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

	body.page-home.intro-done .home__cases-wrap--has-site-intro .home__cases-main {
		opacity: 1;
		transition: opacity 0.15s ease;
	}

	body.home-intro-skipped .home__cases-wrap--has-site-intro .home__cases-main {
		transition: none;
		opacity: 1;
	}
}

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

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

	/*
	 * 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 0.48s cubic-bezier(0.24, 0.9, 0.22, 1) both;
	}

	.home__split-right--talents .home__preview-grid.home__preview-grid--reveal {
		animation: home-preview-slide-in-talents 0.48s cubic-bezier(0.24, 0.9, 0.22, 1) both;
	}

	.home__split-right--cases .home__preview-grid.home__preview-grid--cross-out {
		opacity: 0;
		transform: translate3d(min(28vw, 11rem), 0, 0) scale(0.996);
		pointer-events: none;
		transition:
			opacity 0.38s cubic-bezier(0.24, 0.9, 0.22, 1),
			transform 0.38s cubic-bezier(0.24, 0.9, 0.22, 1);
	}

	.home__split-right--talents .home__preview-grid.home__preview-grid--cross-out {
		opacity: 0;
		transform: translate3d(calc(-1 * min(28vw, 11rem)), 0, 0) scale(0.996);
		pointer-events: none;
		transition:
			opacity 0.38s cubic-bezier(0.24, 0.9, 0.22, 1),
			transform 0.38s cubic-bezier(0.24, 0.9, 0.22, 1);
	}

	.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 0.4s cubic-bezier(0.24, 0.9, 0.22, 1),
			transform 0.4s cubic-bezier(0.24, 0.9, 0.22, 1);
	}

	.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 0.4s cubic-bezier(0.24, 0.9, 0.22, 1),
			transform 0.4s cubic-bezier(0.24, 0.9, 0.22, 1);
	}

	.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: .home__split-tag oberhalb der Teaser-Kachel (flex order), Oberkante außerhalb; Abstand: gap am Panel */
	.home__split-right--cases .home__split-tag,
	.home__split-right--talents .home__split-tag {
		order: 0;
		position: static;
		align-self: flex-start;
		max-width: 100%;
		pointer-events: none;
	}

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

	/*
	 * Desktop-Teaser: 5∶7 — max-height der Basisregel (24rem) bricht das Ratio bei Panelbreite ~26rem,
	 * 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 „+“ (2,25rem, rund) mittig über dem Teaser; Tag darunter im Fluss.
	 */
	.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 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:has(.home__split-right--active),
	.page-home .home-talents-list li:has(.home__split-right--active),
	.page-case .project-aside .home-cases-list li:has(.home__split-right--active),
	.page-talent .project-aside .home-talents-list li:has(.home__split-right--active) {
		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;
	}

	/*
	 * Kategorie/Tagline: nicht mit dem Bild starten — bleibt unsichtbar bis --reveal, dann kurz danach einfaden (unter dem Teaser).
	 */
	.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 0.4s cubic-bezier(0.22, 0.82, 0.18, 1) 0.36s,
			transform 0.4s cubic-bezier(0.22, 0.82, 0.18, 1) 0.36s;
	}

	.home__split-right--cases.home__split-right--active .home__preview-visual:has(.home__preview-grid--reveal) ~ .home__split-tag:not([hidden]),
	.home__split-right--talents.home__split-right--active .home__preview-visual:has(.home__preview-grid--reveal) ~ .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: 2px;
	}

	.home__preview-toolbar .home__preview-open__plus-bar--v {
		width: 2px;
		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: max-height + Maske + Opacity + Versatz in einer gemeinsamen Kurve (kein Delay) —
	 * max-height verhindert Layout-Sprung durch aspect-ratio des Teasers.
	 */
	.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 0.52s cubic-bezier(0.22, 0.82, 0.18, 1),
			transform 0.52s cubic-bezier(0.22, 0.82, 0.18, 1),
			opacity 0.52s cubic-bezier(0.22, 0.82, 0.18, 1),
			clip-path 0.52s cubic-bezier(0.22, 0.82, 0.18, 1);
	}

	.home__split-right--cases .home__preview-visual:has(.home__preview-grid:not([hidden]):not(.home__preview-grid--reveal):not(.home__preview-grid--out):not(.home__preview-grid--cross-out)),
	.home__split-right--talents .home__preview-visual:has(.home__preview-grid:not([hidden]):not(.home__preview-grid--reveal):not(.home__preview-grid--out):not(.home__preview-grid--cross-out)) {
		max-height: 0;
		opacity: 0;
		transform: translate3d(0, min(5vw, 0.65rem), 0);
		clip-path: inset(0 0 100% 0);
	}

	.home__split-right--cases .home__preview-visual:has(.home__preview-grid--reveal),
	.home__split-right--talents .home__preview-visual:has(.home__preview-grid--reveal) {
		/* wie .home__preview-teaser max-height schmal — genug für natürliche 3∶4-Höhe */
		max-height: 24rem;
		opacity: 1;
		transform: translate3d(0, 0, 0);
		clip-path: inset(0);
	}

	.home__split-right--cases .home__preview-visual:has(.home__preview-grid--cross-out),
	.home__split-right--talents .home__preview-visual:has(.home__preview-grid--cross-out) {
		max-height: 0;
		opacity: 0;
		transform: translate3d(0, min(8vw, 1rem), 0);
		clip-path: inset(0 0 100% 0);
		pointer-events: none;
		transition-property: max-height, transform, opacity, clip-path;
		transition-duration: 0.36s, 0.36s, 0.34s, 0.36s;
		transition-timing-function: cubic-bezier(0.55, 0.06, 0.68, 1), cubic-bezier(0.55, 0.06, 0.68, 1),
			cubic-bezier(0.24, 0.9, 0.22, 1), cubic-bezier(0.55, 0.06, 0.68, 1);
		transition-delay: 0s, 0s, 0s, 0s;
	}

	.home__split-right--cases .home__preview-visual:has(.home__preview-grid--out),
	.home__split-right--talents .home__preview-visual:has(.home__preview-grid--out) {
		max-height: 0;
		opacity: 0;
		transform: translate3d(0, min(8vw, 1rem), 0);
		clip-path: inset(0 0 100% 0);
		pointer-events: none;
		transition-property: max-height, transform, opacity, clip-path;
		transition-duration: 0.38s, 0.38s, 0.36s, 0.38s;
		transition-timing-function: cubic-bezier(0.55, 0.06, 0.68, 1), cubic-bezier(0.55, 0.06, 0.68, 1),
			cubic-bezier(0.24, 0.9, 0.22, 1), cubic-bezier(0.55, 0.06, 0.68, 1);
		transition-delay: 0s, 0s, 0s, 0s;
	}

	.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: 24rem;
		flex-shrink: 0;
	}

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

		.home__split-right--cases .home__preview-visual,
		.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;
		}

		.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: 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: cubic-bezier(0.24, 0.9, 0.22, 1);
	width: 100%;
	box-sizing: border-box;
	min-height: 0;
	opacity: 1;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	transition:
		opacity 0.42s var(--home-preview-ease),
		transform 0.42s var(--home-preview-ease);
}

/* Beim ersten Erscheinen / nach Listenwechsel: etwas weicher */
.home__preview-grid--reveal {
	animation: home-preview-grid-in 0.48s 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 0.4s var(--home-preview-ease),
		transform 0.4s 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 0.42s var(--home-preview-ease),
		transform 0.42s 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: 24rem;
	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 0.38s cubic-bezier(0.25, 0.85, 0.2, 1);
}

/* 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 (Desktop: oberhalb der Kachel; schmal: unter dem Bild im Fluss) */
.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;
}

/* Talents: Vorschau links — Tag an der Kachel links */
.home__split-right--talents .home__split-tag {
	align-self: flex-start;
	text-align: left;
	color: var(--white);
}

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

@media (max-width: 52rem) {
	.home__split-right--talents .home__split-tag {
		color: var(--white);
	}
}

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

/* Slider-Bleed / 100vw: nicht am body clippen — sonst iOS/WebKit und fixed .site-sticky-bar; nur im Wrapper */
body.page-case .page-wrapper,
body.page-talent .page-wrapper {
	overflow-x: clip;
}

/* Case- / Talent-Slider: mittiges Bild ~100svh darf über den Hero nach unten ragen */
body.page-case .hero-dark,
body.page-talent .hero-dark {
	overflow-x: clip;
	overflow-y: visible;
}

/* Kein padding-inline: Hero bringt eigenes horizontales Pad; oben: body:not(.page-home) .site-header */
.hero-dark .site-header {
	position: relative;
	z-index: 2;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}

.hero-dark .site-header__loading {
	color: var(--white);
}

.hero-dark .site-nav a {
	color: var(--white);
}

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

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

/* 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: 2px 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 / Talent: Raster-Zelle darf schrumpfen, damit die Galerie-Höhen-Budgets greifen */
body.page-case .hero-dark__gallery,
body.page-talent .hero-dark__gallery {
	min-height: 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.
   ============================================================================= */

.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-x: clip;
	overflow-y: visible;
	/* Sonst zeigt spaceBetween den Seitenhintergrund (--bg) als grauen Streifen */
	background: var(--black);
}

.case-hero-carousel.swiper {
	--chc-vh: min(100svh, 100dvh);
	--chc-slide-gap: 0.5rem;
	/* Maske Peek → aktiv (100% Höhe): weiche Expansion */
	--chc-mask-expand-duration: 0.72s;
	--chc-mask-expand-ease: cubic-bezier(0.33, 0.86, 0.24, 1);
	/* ~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;
	--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.swiper-slide {
	width: 100vw;
	max-width: 100vw;
}

.case-hero-carousel.swiper.case-hero-carousel--active-video {
	--chc-vh: min(80svh, 80dvh);
	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;
	background: var(--black);
	position: relative;
	transform-origin: top center;
	transition:
		height var(--chc-mask-expand-duration) var(--chc-mask-expand-ease),
		filter 0.45s ease,
		opacity 0.4s ease;
}

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

.case-hero-carousel__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.case-hero-carousel__media--loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;
	border: 2px 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;
}

@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: weniger Vollbild-Höhe, engere Peeks */
@media (max-width: 64rem) {
	.case-hero-carousel.swiper {
		--chc-vh: min(76svh, 100dvh);
		--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;
	}
}

@media (prefers-reduced-motion: reduce) {
	.case-hero-carousel__media {
		transition:
			filter 0.45s ease,
			opacity 0.4s ease;
	}
}

.hero-side-tag {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
	transform-origin: center;
	font-size: var(--text-micro);
	text-transform: uppercase;
	color: var(--white);
	white-space: nowrap;
}

.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-dots {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 0 1.5rem;
	font-size: var(--text-label);
	color: var(--white);
}