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

/* 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 {
	background-color: var(--black);
	color: var(--white);
	min-height: 100vh;
	min-height: 100dvh;
}

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

/* 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 bis Bildschirmrand */
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: 3rem;
}

.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;
	/* --home-intro-top = untere Header-Kante inkl. padding-bottom (JS) */
	top: var(--home-intro-top, 11rem);
	left: var(--page-pad);
	right: auto;
	width: min(44rem, calc(100vw - var(--page-pad) * 2));
	max-width: min(44rem, calc(100vw - var(--page-pad) * 2));
	margin: 0;
	padding: 0;
	padding-right: var(--page-pad);
	z-index: 16;
	text-align: left;
	font-size: var(--text-lede);
	line-height: 1.65;
	pointer-events: none;
}

/*
 * Nach Intro: Lede weiter links (Nav-Achse); Cases-Block + Teaser eingerückt wie Mockup (~20–25vw).
 */
body.page-home.intro-done .home__intro--lede {
	position: static;
	z-index: auto;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0;
	pointer-events: auto;
	font-size: var(--text-label);
	line-height: 1.65;
}

body.page-home.intro-done .home__intro__typewriter {
	max-width: min(46rem, 100%);
	margin: 0;
	text-wrap: pretty;
}


.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-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;
	/* wie .page-intro: gleicher Abstand oben und unten */
	margin: var(--page-intro-vspace) 0;
	line-height: 1.65;
}

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

/*
 * 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 > .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 {
		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 am Seitenpadding, Talents unten links (symmetrisch); untere Kante 1rem (--page-pad) */
	.home__split-right--cases,
	.home__split-right--talents {
		position: fixed;
		z-index: 130;
		top: auto;
		bottom: var(--page-pad);
		transform: none;
		/* kein vw: sonst Breite/Höhe (aspect-ratio) beim Scrollen mit Browser-Chrome — svw + rem-Cap */
		width: min(26rem, calc(100svw - var(--page-pad)));
		max-width: calc(100svw - var(--page-pad));
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.35rem;
		pointer-events: none;
	}

	.home__split-right--cases {
		left: auto;
		right: var(--page-pad);
	}

	.home__split-right--talents {
		left: var(--page-pad);
		right: auto;
	}

	.home__split-right--cases.home__split-right--active,
	.home__split-right--talents.home__split-right--active {
		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;
	}

	.home__split-right--cases .home__preview-visual,
	.home__split-right--talents .home__preview-visual {
		position: relative;
		width: 100%;
		flex: 0 0 auto;
		min-height: 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;
	}

	.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;
		/* Masken-Reveal: von 0 % sichtbarer Höhe nach unten aufklappen */
		clip-path: inset(0 0 100% 0);
		opacity: 1;
		transform: none;
		transition: clip-path 0.52s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.home__split-right--cases .home__preview-grid.home__preview-grid--reveal,
	.home__split-right--talents .home__preview-grid.home__preview-grid--reveal {
		clip-path: inset(0 0 0 0);
		animation: none;
	}

	.home__split-right--cases .home__preview-grid.home__preview-grid--out,
	.home__split-right--talents .home__preview-grid.home__preview-grid--out {
		opacity: 1;
		transform: none;
		clip-path: inset(0 0 100% 0);
		transition: clip-path 0.32s cubic-bezier(0.32, 0.72, 0.28, 1);
	}

	.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-grid,
		.home__split-right--talents .home__preview-grid {
			transition: none !important;
			clip-path: inset(0 0 0 0) !important;
		}
	}

}

.home__cases-teaser {
	margin-top: var(--page-intro-vspace);
	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 {
	width: 100%;
	box-sizing: border-box;
	min-height: 0;
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.24s cubic-bezier(0.25, 0.9, 0.32, 1),
		transform 0.28s cubic-bezier(0.25, 0.9, 0.32, 1);
}

/* Beim ersten Erscheinen / nach Listenwechsel: etwas weicher */
.home__preview-grid--reveal {
	animation: home-preview-grid-in 0.32s cubic-bezier(0.25, 0.9, 0.32, 1) both;
}

/* Listen-Hover: alter Teaser kurz zurücknehmen, dann neuer Inhalt (home-cases-preview.js) */
.home__preview-grid--cross-out {
	opacity: 0;
	transform: translateY(6px) scale(0.985);
	pointer-events: none;
}

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

.home__preview-grid--out {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

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

.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.25rem;
	overflow: hidden;
}

.home__preview-teaser__img {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	background: transparent;
	transition: opacity 0.52s cubic-bezier(0.25, 0.9, 0.32, 1);
}

/*
 * 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: ein Bild wie Einzel-Teaser; Diashow tauscht src nach Preload — keine Opacity-Animation.
 */
.home__preview-teaser--gallery {
	background: var(--home-preview-cell, var(--black));
}

.home__preview-teaser--gallery .home__preview-teaser__img {
	opacity: 1;
	transition: 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 {
		transition: none;
	}
}

/* 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 3rem;
	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 {
	/* Case/Talent Unterseiten: 3rem nach Header, 3rem nach Titel */
	margin: 3rem 0 3rem;
}

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

/* 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.
   ============================================================================= */

body.page-case .hero-dark__grid .hero-dark__title,
body.page-talent .hero-dark__grid .hero-dark__title {
	margin: 1.5rem 0 0.5rem;
}

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

.case-hero-carousel.swiper {
	--chc-vh: min(100svh, 100dvh);
	--chc-slide-gap: 0.5rem;
	--chc-flank-scale-y: 0.82;
	--chc-inactive-scale-y: 0.8;
	--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;
}

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

.case-hero-carousel__slide.swiper-slide {
	width: auto;
	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;
}

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

.case-hero-carousel__media {
	margin: 0;
	height: 100%;
	width: auto;
	max-width: min(92vw, 56rem);
	overflow: hidden;
	background: var(--black);
	transform-origin: top center;
	transition:
		transform 0.58s cubic-bezier(0.4, 0, 0.2, 1),
		filter 0.45s ease,
		opacity 0.4s ease;
}

/* Nur nächste Slide kleiner; aktuelle volle Höhe */
.case-hero-carousel__slide.swiper-slide-next:not(.swiper-slide-blank) .case-hero-carousel__media {
	transform: scaleY(var(--chc-inactive-scale-y));
	transform-origin: top center;
}

.case-hero-carousel__slide.swiper-slide-active .case-hero-carousel__media {
	transform: none;
}

/* Links: eine Flanke direkt daneben, weiter links staffelnd „Flanke“ */
.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 {
	transform-origin: top left;
	transform: scaleY(var(--chc-flank-scale-y));
	opacity: 1;
}

/* Rechts: gleiche Flanken-Höhe wie links */
.case-hero-carousel__slide--flank-right:not(.case-hero-carousel__slide--hub) .case-hero-carousel__media {
	transform-origin: top right;
	transform: scaleY(var(--chc-flank-scale-y));
	opacity: 1;
}

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

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

.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) {
	body.page-case .hero-dark__grid .hero-dark__title,
	body.page-talent .hero-dark__grid .hero-dark__title {
		margin: 3rem 0 3rem;
	}

	.case-hero-carousel.swiper {
		--chc-vh: min(76svh, 100dvh);
		--chc-slide-gap: 0.35rem;
		--chc-inactive-scale-y: 0.88;
		--chc-pager-bottom: calc(2.125rem + env(safe-area-inset-bottom, 0px));
		--chc-vpad-fractions: 0.28rem;
	}

	.case-hero-carousel__media {
		max-width: min(86vw, 56rem);
	}
}

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