/* ==========================================================================
   Dennis Glomm – Website
   Schrift: Inter, selbst gehostet (assets/fonts, OFL-Lizenz) – überall gleich, ohne Google
   Farben: Papier #ECE9E2, Tinte #121210, Hervorhebung fast schwarz (#1C1B18), auf dunklen Flächen hell (Creme)
   ========================================================================== */

:root {
	--paper: #ECE9E2;
	--ink: #121210;
	--night: #14130F;
	--stage: #0D0C0A;
	--cream: #EDE8DD;
	/* Hervorhebung (früher Lila): auf hellen Flächen fast schwarz mit heller Schrift, auf dunklen Flächen umgekehrt (unten) */
	--accent: #1C1B18;
	--on-accent: var(--paper);
	--line: #CFCAC0;
	--line-dark: #2E2B25;
	--font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--sans: var(--font);
	--ease: cubic-bezier(0.7, 0, 0.2, 1);
	--gutter: 28px;
	--hero-h: 100svh;
}

/* Inter liegt auf dem eigenen Webspace: kein Abruf bei Google, also kein Datenschutzthema */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-wght-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext-wght-italic.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, video, svg, canvas { display: block; }
img { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
/* Dunkle Flächen: Hervorhebung und Fokusrahmen hell */
.stage, .footer, .menu, .player, .bts, .lightbox, .greet, .side-behind, .sub--project .nav { --accent: var(--cream); --on-accent: var(--ink); }
.side-behind .inq, .inq { --accent: #1C1B18; --on-accent: var(--paper); }
/* Fokusrahmen: dunkel auf hellen Flächen, hell auf dunklen */
:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 3px; }
.stage, .footer, .menu, .player, .bts, .lightbox, .greet, .side-behind, .sub--project .nav, .pj-hero, .pj-bts { --focus: var(--cream); }
.inq { --focus: var(--ink); }
/* Sprunglink für Tastatur: erscheint erst beim ersten Tab */
.skip {
	position: fixed; top: 12px; left: 12px; z-index: 200;
	padding: 12px 18px; border-radius: 999px;
	background: var(--ink); color: var(--paper);
	font-size: 13px; font-weight: 500; text-decoration: none;
	transform: translateY(-160%); transition: transform 0.2s ease;
}
.skip:focus { transform: none; outline-color: var(--ink); }
.skip-target { display: block; height: 0; outline: none; }

.label, .chip, .tag, .filter, .pill {
	font-family: var(--font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.label { margin: 0; }
.dim { opacity: 0.64; }

.chip {
	display: inline-block;
	margin: 0;
	padding: 3px 7px;
	background: var(--accent);
	color: var(--on-accent);
	line-height: 1.3;
}
.tag {
	padding: 2px 6px;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 11px;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.pill--ink { background: var(--ink); color: var(--paper); }
.pill--accent { background: var(--accent); color: var(--on-accent); }
.pill--cream { background: var(--cream); color: var(--night); }
.pill--ghost { background: transparent; color: inherit; border: 1px solid rgba(237, 232, 221, 0.4); }
.pill--big { height: 48px; padding: 0 24px; font-size: 13px; }

.round {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	cursor: pointer;
}
.round--ghost { border: 1px solid rgba(244, 241, 234, 0.3); background: transparent; color: inherit; }
.round--accent { border: 0; background: var(--accent); color: var(--on-accent); }

.play-pill {
	display: inline-flex; align-items: center; gap: 10px;
	height: 42px; padding: 0 16px 0 6px;
	border: 0; border-radius: 999px;
	background: var(--ink); color: var(--paper);
	font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
	cursor: pointer;
}
.play-pill__dot {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--paper); color: var(--ink);
}
/* Film abspielen: schwarz, auch über dem Film */
.play-pill--big { height: 48px; padding: 0 20px 0 7px; background: var(--ink); color: var(--paper); font-size: 13px; }
.play-pill--big .play-pill__dot { width: 34px; height: 34px; }

.hide-m { display: inline; }
.show-m { display: none; }

/* ---------- Seitenwechsel: dunkle Flut aus der Navi ---------- */

.flood {
	position: fixed; inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
.flood__disc {
	position: absolute;
	top: 40px; left: 50%;
	width: 0; height: 0;
	border-radius: 50%;
	background: var(--night);
	transform: translate(-50%, -50%);
	transition: width 1.4s cubic-bezier(0.65, 0, 0.35, 1), height 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.side-behind .flood__disc { width: 300vmax; height: 300vmax; }

.page {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--ink);
	transition: color 0.5s ease 0.7s;
}
.side-behind .page { color: var(--cream); transition-delay: 0.25s; }
.side-behind { background: var(--night); transition: background-color 0s linear 1.2s; }

/* ---------- Navi: schlicht wie bei Rozay ---------- */
/* Leiste über die ganze Breite, oben ohne Grund, ohne Pille. Logo links, Work / Raw in der Mitte, rechts Projekte, Info, Anfragen.
   Kleine Großbuchstaben, eckige Klammern um das Aktive (und beim Drüberfahren).
   Beim Runterscrollen fährt sie raus, beim Hochscrollen kommt sie wieder, immer ohne Grund; die Schrift passt sich dem an, was darunter liegt (site.js). */

.nav-wrap {
	position: sticky;
	top: 0;
	z-index: 50;
	height: 0;
	transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nav-wrap.is-hidden { transform: translateY(-110px); }
.side-behind .nav-wrap.is-hidden { transform: none; }
@media (prefers-reduced-motion: reduce) { .nav-wrap { transition: none; } }

.nav {
	--nav-fg: var(--ink);
	position: absolute;
	top: 0; left: 0; right: 0;
	isolation: isolate;
	height: 80px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: 24px;
	padding: 0 var(--gutter);
	color: var(--nav-fg);
}
/* über dunklen Flächen hell: Film oben auf der Projektseite, Raw-Seite (Anfangszustand, danach entscheidet site.js) */
.sub--project .nav, .side-behind .nav { --nav-fg: var(--cream); }
.sub--project .nav { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); }
/* site.js schaut, was gerade unter der Navi liegt: dunkle Fläche oder Film = hell, sonst schwarz. Nie mit Grund. */
.nav-wrap.is-dark .nav { --nav-fg: var(--cream); --accent: var(--cream); --on-accent: var(--ink); --focus: var(--cream); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); }
.nav-wrap.is-light .nav { --nav-fg: var(--ink); --accent: #1C1B18; --on-accent: var(--paper); --focus: var(--ink); text-shadow: none; }
.nav-wrap.no-tone-anim .nav, .nav-wrap.no-tone-anim .nav__cta { transition: none !important; }
/* Startseite: Farbwechsel im Takt der dunklen Flut */
.shell .nav { transition: color 0.6s ease 0.7s; }
.shell.side-behind .nav { transition-delay: 0.25s; }

.nav__logo { justify-self: start; display: flex; align-items: center; min-height: 44px; color: inherit; transition: opacity 0.5s ease, transform 0.5s ease; }
.nav .logo { display: block; width: 76px; height: auto; }
.shell .nav__logo { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s; }
.shell .nav__logo.is-on, .shell.side-behind .nav__logo { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s; }

/* Gemeinsame Schrift der Navi */
.nav__label, .nav__link, .nav__cta, .nav__menu, .switch__btn, .menu__close {
	font-family: var(--font);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.nav__label { justify-self: center; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Schalter Work / Raw: zwei Wörter, das aktive in Klammern */
.switch { display: flex; align-items: center; gap: 34px; }
.switch__btn, .nav__link, .nav__cta, .nav__menu {
	position: relative;
	display: inline-flex; align-items: center;
	height: 44px; padding: 0;
	border: 0; background: none; color: inherit;
	text-decoration: none; white-space: nowrap;
	cursor: pointer;
}

/* Eckige Klammern: um das Aktive, beim Drüberfahren gleiten sie heran */
.switch__btn::before, .switch__btn::after, .nav__link::before, .nav__link::after, .nav__cta::before, .nav__cta::after, .nav__menu::before, .nav__menu::after {
	position: absolute;
	top: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.switch__btn::before, .nav__link::before, .nav__cta::before, .nav__menu::before { content: '['; right: 100%; padding-right: 0.18em; transform: translate(0.35em, -50%); }
.switch__btn::after, .nav__link::after, .nav__cta::after, .nav__menu::after { content: ']'; left: 100%; padding-left: 0.18em; transform: translate(-0.35em, -50%); }
.switch__btn[aria-pressed="true"]::before, .switch__btn[aria-pressed="true"]::after,
.switch__btn[aria-current]::before, .switch__btn[aria-current]::after { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) {
	.switch__btn:hover::before, .switch__btn:hover::after,
	.nav__link:hover::before, .nav__link:hover::after,
	.nav__cta:hover::before, .nav__cta:hover::after,
	.nav__menu:hover::before, .nav__menu:hover::after { opacity: 1; transform: translate(0, -50%); }
}
.switch__btn:focus-visible::before, .switch__btn:focus-visible::after,
.nav__link:focus-visible::before, .nav__link:focus-visible::after,
.nav__cta:focus-visible::before, .nav__cta:focus-visible::after,
.nav__menu:focus-visible::before, .nav__menu:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) {
	.switch__btn::before, .switch__btn::after, .nav__link::before, .nav__link::after,
	.nav__cta::before, .nav__cta::after, .nav__menu::before, .nav__menu::after { transition: none; }
}

.nav__links { justify-self: end; display: flex; align-items: center; gap: 34px; }
.nav__menu { display: none; }

/* Anfragen: hervorgehoben, rund wie die übrigen Knöpfe. Auf hellem Grund fast schwarz, über dem Film und auf der Raw-Seite hell */
.nav__cta {
	height: 34px; padding: 0 16px;
	border-radius: 999px;
	background: var(--accent); color: var(--on-accent);
	text-shadow: none;
	transition: opacity 0.2s ease;
}
.nav__cta::before, .nav__cta::after { display: none; }
@media (hover: hover) { .nav__cta:hover { opacity: 0.84; } }
.shell .nav__cta { transition: opacity 0.2s ease, background-color 0.6s ease 0.7s, color 0.6s ease 0.7s; }
.shell.side-behind .nav__cta { transition-delay: 0s, 0.25s, 0.25s; }

/* Menü (Handy) */
.menu {
	position: fixed; inset: 0;
	z-index: 80;
	background: var(--ink);
	color: var(--paper);
}
.menu[hidden] { display: none; }
.menu__inner {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	padding: 88px 16px 32px;
	min-height: 100%;
}
.menu__close {
	position: absolute; top: 6px; right: 16px;
	display: inline-flex; align-items: center;
	height: 44px; padding: 0;
	border: 0; background: none; color: inherit;
	cursor: pointer;
}
.menu__close::before { content: '['; padding-right: 0.18em; }
.menu__close::after { content: ']'; padding-left: 0.18em; }
.menu__link {
	font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase;
	text-decoration: none;
}
.menu__link--behind { font-style: italic; text-transform: none; }
.menu__mail { margin-top: auto; font-size: 18px; text-decoration: none; opacity: 0.8; }

/* Tablet: etwas enger */
@media (max-width: 1100px) {
	.switch { gap: 28px; }
	.nav__links { gap: 24px; }
}

/* Handy: Logo, Schalter, Menü */
@media (max-width: 760px) {
	.nav { height: 64px; column-gap: 12px; }
	.nav .logo { width: 60px; }
	.switch { gap: 26px; }
	.nav__link--hide-m { display: none; }
	.nav__menu { display: inline-flex; }
	/* Pitch am Handy: für wen steht direkt darunter im Etikett */
	.nav--pitch { grid-template-columns: auto minmax(0, 1fr); }
	.nav--pitch .nav__label { display: none; }
	.nav--pitch .nav__links { justify-self: end; }
}

/* ---------- Einstieg (Hero) mit Dreh auf die Behind-Seite ---------- */

.hero {
	position: relative;
	height: var(--hero-h);
	min-height: 560px;
	overflow: hidden;
	perspective: 2600px;
}
.hero__flip {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	transition: transform 1.25s var(--ease);
}
.side-behind .hero__flip { transform: rotateY(180deg); }
.hero__face {
	position: absolute; inset: 0;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.hero__face--work { background: var(--paper); }
.hero__face--behind { transform: rotateY(180deg); background: #0E0D0B; color: var(--cream); }
.no-flip .hero__flip { transition: none; }

.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 50%;
	opacity: 0; transition: opacity 0.8s ease;
	pointer-events: none;
}
.hero__video.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.ko { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.ko path { fill: var(--paper); }
.ko--mob { display: none; }

/* Einstieg (einmal je Besuch, site.js): Logo baut sich in Schwarz auf, dann erscheint der Film in den Buchstaben,
   danach Navi und Leiste unten. html.intro setzt ein kleines Script vor dem ersten Bild. */
.ko-intro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; display: none; transition: opacity 0.9s ease; }
.ko-intro path { fill: var(--ink); fill-rule: evenodd; }
html.intro .ko-intro--desk, html.intro-reveal .ko-intro--desk { display: block; }
html.intro-media .ko-intro { opacity: 0; }
html.intro .hero__img, html.intro .hero__video { opacity: 0 !important; transition: none; }
html.intro .nav-wrap, html.intro .hero__bar { opacity: 0; pointer-events: none; }
html.intro-reveal .hero__img { transition: opacity 0.9s ease; }
html.intro-reveal .nav-wrap { transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.8s ease 0.6s; }
html.intro-reveal .hero__bar { transition: opacity 0.8s ease 0.85s; }
/* übersprungen (gescrollt, getippt): ohne Wartezeit */
html.intro-quick .nav-wrap { transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease; }
html.intro-quick .hero__bar, html.intro-quick .hero__img, html.intro-quick .ko-intro { transition: opacity 0.3s ease; }

.hero__bar {
	position: absolute;
	left: 28px; right: 28px; bottom: 26px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	color: var(--ink);
}
.hero__chip { justify-self: start; }
/* schlicht wie die Navi: kleine Großbuchstaben ohne Fläche */
.hero__chip .chip, .hero__scroll { font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }
.hero__chip .chip { padding: 0; background: none; color: inherit; }
.hero__scroll { display: flex; align-items: center; gap: 6px; opacity: 0.6; transition: opacity 0.3s ease; }
/* sobald gescrollt wird, hat der Hinweis seinen Zweck erfüllt */
.hero.is-scrolled .hero__scroll { opacity: 0; }

/* ---------- Behind: Kugel ---------- */

.sph {
	position: absolute; inset: 0;
	overflow: hidden;
	touch-action: none;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.sph.is-dragging { cursor: grabbing; }
.sph__gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.sph__dom { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sph__tile { position: absolute; }
.sph__tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.behind__shade {
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 300px;
	background: linear-gradient(rgba(14, 13, 11, 0), rgba(14, 13, 11, 0.88));
	pointer-events: none;
}
.behind__intro {
	position: absolute; left: 28px; bottom: 28px;
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
	pointer-events: none;
}
.behind__hi {
	margin: 0;
	font-style: italic; font-weight: 700; letter-spacing: -0.035em;
	font-size: 64px; line-height: 1;
}
.behind__sub { margin: 0; font-size: 15px; opacity: 0.85; }
.status {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(14, 13, 11, 0.6);
	border: 1px solid rgba(237, 232, 221, 0.24);
	font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cream); }
.behind__side {
	position: absolute; right: 28px; bottom: 28px;
	display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
	font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
}
.hint {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	border: 1px solid rgba(237, 232, 221, 0.24);
	border-radius: 999px;
	background: rgba(14, 13, 11, 0.6); color: var(--cream);
	transition: opacity 0.6s ease;
}
.hint.is-off { opacity: 0; }
.behind__tools { display: flex; align-items: center; gap: 8px; }
.zoom { display: flex; gap: 6px; }
.zoom__btn {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(237, 232, 221, 0.35);
	background: rgba(14, 13, 11, 0.6);
	color: var(--cream);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.zoom__btn:hover { border-color: rgba(237, 232, 221, 0.6); background: rgba(237, 232, 221, 0.14); }
.behind__links { display: flex; flex-wrap: wrap; gap: 6px 18px; pointer-events: auto; }
.behind__links a { text-decoration: none; }
.behind__links a + a { opacity: 0.7; }
.behind__links--m { display: none; font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }

.gyro {
	pointer-events: auto;
	display: flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 16px 0 12px;
	border: 1px solid rgba(237, 232, 221, 0.24); border-radius: 999px;
	background: rgba(14, 13, 11, 0.6); color: var(--cream);
	font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.gyro[hidden] { display: none; }
.gyro.is-on { background: var(--cream); }

.lightbox {
	position: absolute; inset: 0;
	z-index: 8;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
	padding: 92px 28px 28px;
	background: rgba(10, 9, 7, 0.9);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.lightbox[hidden] { display: flex; pointer-events: none; visibility: hidden; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 100%; max-height: calc(100% - 70px); object-fit: contain; }
.lightbox__img[hidden] { display: none; }
video.lightbox__img { background: #000; }
.lightbox__bar { display: flex; align-items: center; gap: 10px; }
.lightbox__bar .pill { height: 38px; padding: 0 16px; }
.lightbox__bar .pill[hidden] { display: none; }

/* ---------- Rest der Startseite (blendet auf Behind aus) ---------- */

.rest {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	max-height: none;
	opacity: 1;
	transition: opacity 0.5s ease 0.3s;
}
.side-behind .rest { opacity: 0; pointer-events: none; transition: opacity 0.5s ease 0s; }
.side-behind.rest-gone .rest { display: none; }

/* Collage */
.collage {
	position: relative;
	/* wächst auf großen Bildschirmen mit, damit die größeren Fotos Platz haben */
	height: max(1100px, 70vw);
	overflow: hidden;
}
.collage__card {
	position: absolute;
	left: var(--x); top: var(--y);
	width: max(var(--w), var(--wv, var(--w)));
	aspect-ratio: var(--r);
	z-index: var(--z);
	will-change: transform, filter;
}
.collage__card img { width: 100%; height: 100%; object-fit: cover; }
.collage__text {
	position: absolute; inset: 0;
	z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 30px;
	padding: 0 28px;
	text-align: center;
	pointer-events: none;
}
.collage__statement {
	margin: 0;
	font-size: clamp(100px, 9.6vw, 140px);
	line-height: 0.88;
	letter-spacing: -0.035em;
	font-weight: 700;
	text-transform: uppercase;
}
.collage__intro { margin: 0; max-width: 540px; font-size: 18px; line-height: 1.45; text-wrap: balance; }
.collage__text .pill { pointer-events: auto; }

/* Projekte (Bühne): füllt immer genau den Bildschirm.
   lvh = Höhe ohne Browserleisten (Handy), svh = mit. Hintergrund bis ganz unten,
   Inhalt bleibt im sichtbaren Bereich. Ältere Browser nehmen vh. */
.stage {
	position: relative;
	min-height: 100vh;
	min-height: 100lvh;
	overflow: hidden;
	background: var(--stage);
	color: #F4F1EA;
}
.stage__list { position: relative; min-height: inherit; }

.stage__media { position: absolute; inset: 0; overflow: hidden; background: #1A1915; }
.stage__cover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.stage__cover.is-on { opacity: 1; }
.stage__cover img, .stage__cover video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease;
}
.stage__cover.is-on img { transform: scale(1.04); }
.stage__cover video { opacity: 0; }
.stage__cover video.is-playing { opacity: 1; }
.stage__shade {
	position: absolute; inset: 0;
	background:
		linear-gradient(rgba(13, 12, 10, 0.5), rgba(13, 12, 10, 0) 20%, rgba(13, 12, 10, 0) 68%, rgba(13, 12, 10, 0.62)),
		linear-gradient(90deg, rgba(13, 12, 10, 0.7) 0%, rgba(13, 12, 10, 0.4) 50%, rgba(13, 12, 10, 0.62) 100%);
}
.stage__inner {
	position: relative;
	min-height: inherit;
	display: flex; flex-direction: column; justify-content: space-between;
	gap: clamp(20px, 3vh, 32px);
	padding: clamp(100px, 15vh, 168px) 30px clamp(40px, 8vh, 88px);
	padding-bottom: calc(clamp(40px, 8svh, 88px) + (100lvh - 100svh));
}
.stage__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 32px; }
.stage__head h2 { font-size: 12px; font-weight: 500; }
.filters { display: flex; flex-wrap: wrap; gap: 0 6px; }
.filter {
	height: 32px; padding: 0 12px;
	border: 0; border-radius: 999px;
	background: transparent;
	color: rgba(244, 241, 234, 0.7);
	cursor: pointer;
}
.filter.is-on { background: var(--accent); color: var(--on-accent); }

.plist { list-style: none; margin: 0; padding: 0; }
.plist__item { padding: 2px 0 4px; }
.plist__link {
	display: flex; align-items: center; gap: 22px;
	color: inherit;
	text-decoration: none;
	opacity: 0.62;
	transition: opacity 0.35s ease;
	font-size: clamp(26px, min(2.9vw, 4.4vh), 42px);
	font-size: clamp(26px, min(2.9vw, 4.4svh), 42px);
	line-height: 1.04;
	font-weight: 500;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	white-space: nowrap;
}
.plist__link.is-on { opacity: 1; }
.plist__link.is-out { opacity: 0.14; pointer-events: none; }
/* Marke links, langer Strich, rechts Art + Titel */
.plist__line { flex: 1 1 auto; min-width: 48px; height: max(1px, 0.04em); margin-top: 0.06em; background: currentColor; }
.plist__right { display: flex; align-items: flex-start; gap: 10px; }
.plist__kind {
	font-family: var(--sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: 0.03em;
	position: relative; top: 0.14em;
}

.stage__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.stage__count { display: flex; align-items: flex-end; gap: 14px; }
.stage__num { font-size: clamp(64px, 11vh, 120px); line-height: 0.78; font-weight: 700; letter-spacing: -0.06em; }
/* niedrige Bildschirme (z. B. 1280 × 720): etwas enger, damit alles auf eine Seite passt */
@media (min-width: 761px) and (max-height: 780px) {
	.stage__inner { padding-top: 96px; }
	.plist__link { font-size: clamp(24px, min(2.9vw, 4vh), 42px); font-size: clamp(24px, min(2.9vw, 4svh), 42px); }
}
.stage__of { display: flex; flex-direction: column; gap: 4px; padding-bottom: 2px; }
/* Breite fest, damit lange Titel in eine Zeile passen und beim Wechsel nichts springt */
.meta { flex: none; width: clamp(380px, 40vw, 640px); max-width: 100%; display: flex; flex-direction: column; }
.meta__title {
	margin-bottom: 12px;
	font-size: clamp(16px, 1.6vw, 22px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meta__table { margin: 0; display: flex; flex-direction: column; font-size: 12px; }
.meta__table > div {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	padding: 7px 0;
	border-top: 1px solid rgba(244, 241, 234, 0.2);
}
.meta__table dt { font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.55; }
.meta__table dd { margin: 0; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta__bar { position: relative; height: 3px; overflow: hidden; background: rgba(244, 241, 234, 0.22); }
.meta__bar div { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--accent); }

/* Leinwand */
/* Leistungen & Kunden */
.about { display: flex; flex-direction: column; gap: 140px; padding: 90px 28px 120px; }
.about__title {
	margin: 0;
	font-size: clamp(56px, 6vw, 88px); line-height: 0.9;
	font-weight: 700; letter-spacing: -0.045em; text-transform: uppercase;
}
/* Über mich: Fotos links, Text rechts */
.me { display: grid; grid-template-columns: minmax(0, 900px) minmax(0, 600px); justify-content: center; align-items: center; gap: 80px; }
/* Höhe wächst mit der Breite, damit die Fotos auf jedem Bildschirm im Rahmen bleiben */
.me__photos { position: relative; width: 100%; max-width: 900px; aspect-ratio: 24 / 25; }
.me__photo { position: absolute; height: auto; object-fit: cover; }
.me__photo--1 { left: 0; top: 0; width: 58%; aspect-ratio: 2 / 3; }
.me__photo--2 { right: 4%; top: 0; width: 31%; aspect-ratio: 2 / 3; }
.me__photo--3 { right: 0; bottom: 0; width: 60%; aspect-ratio: 4 / 3; }
.me__text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 600px; }
.me__lead { margin: 0; font-size: 27px; line-height: 1.22; font-weight: 500; letter-spacing: -0.018em; text-wrap: pretty; }
.me__body { margin: 0; font-size: 17px; line-height: 1.55; opacity: 0.75; text-wrap: pretty; }
.me__facts { margin: 6px 0 0; align-self: stretch; display: flex; flex-direction: column; font-size: 14px; }
.me__facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.me__facts dt { font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.64; }
.me__facts dd { margin: 0; font-weight: 500; }
.clients { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.clients h2 { font-size: 12px; font-weight: 500; }
/* Kunden & Partner: ein Band ohne Rahmen, das endlos durchs Bild fährt (über die ganze Breite, an den Rändern ausgeblendet) */
.marquee {
	--lh: 42px; --gap: 128px;
	align-self: stretch;
	margin: 0 calc(-1 * var(--gutter));
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee calc(var(--n, 6) * 3.6s) linear infinite;
}
@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translate3d(calc(-100% / var(--copies, 3)), 0, 0); } }
.logos {
	list-style: none; margin: 0; padding: 0 0 0 var(--gap);
	display: flex; align-items: center; gap: var(--gap);
}
.logos__item {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	height: 96px;
}
/* alle Logos gleich: einfarbig dunkel, gleich hoch. --s = Größe aus dem Panel (1 = normal) */
.logos__img {
	display: block; width: auto; height: auto;
	max-height: calc(var(--lh) * var(--s, 1));
	max-width: calc(220px * var(--s, 1));
	object-fit: contain; filter: brightness(0); opacity: 0.72; transition: opacity 0.3s ease;
}
.logos__item:hover .logos__img { opacity: 1; }
.logos__name { font-size: calc(22px * var(--s, 1)); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; text-align: center; white-space: nowrap; opacity: 0.72; transition: opacity 0.3s ease; }
.logos__item:hover .logos__name { opacity: 1; }
/* Bewegung reduzieren: das Band steht, eine Liste, die umbricht */
@media (prefers-reduced-motion: reduce) {
	.marquee { margin: 0; -webkit-mask-image: none; mask-image: none; }
	.marquee__track { width: auto; animation: none; }
	.marquee .logos { flex-wrap: wrap; padding: 0; gap: 24px 56px; }
	.marquee .logos[aria-hidden] { display: none; }
}

/* Häufige Fragen */
.faq {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 80px;
	padding: 20px 28px 150px;
}
.faq__head { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.faq__title {
	margin: 0;
	font-size: clamp(56px, 6vw, 88px); line-height: 0.9;
	font-weight: 700; letter-spacing: -0.045em; text-transform: uppercase;
}
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
	display: flex; justify-content: space-between; align-items: center; gap: 24px;
	padding: 24px 0;
	list-style: none; cursor: pointer;
	font-size: 25px; line-height: 1.2; font-weight: 500; letter-spacing: -0.018em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q > span:first-child { text-wrap: balance; }
.faq__q:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.faq__icon {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border: 1px solid var(--line); border-radius: 50%;
	transition: transform 0.35s var(--ease), background-color 0.2s ease, border-color 0.2s ease;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .faq__q:hover .faq__icon { border-color: var(--ink); } }
.faq__a { max-width: 720px; padding: 0 58px 28px 0; font-size: 17px; line-height: 1.55; opacity: 0.75; text-wrap: pretty; }
.faq__a p { margin: 0; }
.faq__a p + p { margin-top: 0.8em; }
@media (max-width: 760px) {
	.faq { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 8px 16px 88px; }
	.faq__head { position: static; gap: 18px; }
	.faq__title { font-size: 48px; }
	.faq__q { padding: 18px 0; font-size: 19px; line-height: 1.25; gap: 16px; }
	.faq__icon { width: 30px; height: 30px; }
	.faq__a { padding: 0 0 22px; font-size: 15px; }
}

/* Mehr Filme: Masonry aus quer und hochkant, überall gleich breite Lücken */
.arch { display: flex; flex-direction: column; gap: 40px; padding: 150px 28px 30px; }
.arch__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; gap: 24px 48px; }
.arch__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.arch__title {
	margin: 0;
	display: flex; align-items: flex-start; gap: 14px;
	font-size: clamp(56px, 6vw, 88px); line-height: 0.9;
	font-weight: 700; letter-spacing: -0.045em; text-transform: uppercase;
}
.arch__count { line-height: 1; opacity: 0.64; }
.arch__text { margin: 0; font-size: 17px; line-height: 1.55; opacity: 0.75; text-wrap: pretty; }
.arch__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.arch__filter {
	height: 34px; padding: 0 14px;
	border: 1px solid var(--line); border-radius: 999px;
	background: transparent; color: var(--ink);
	font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.arch__filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.arch__grid { list-style: none; margin: 0; padding: 0; column-count: 4; column-gap: 20px; }
.arch__item { break-inside: avoid; margin: 0 0 20px; }
.arch__item[hidden], .arch__item.is-more { display: none; }
/* Filter: Unpassende bleiben stehen, werden blass und reagieren nicht */
.arch__item { transition: opacity 0.35s ease, filter 0.35s ease; }
.arch__item.is-out { opacity: 0.22; filter: grayscale(1); pointer-events: none; }
.arch__item.is-out .arch__tile { cursor: default; }
.arch.is-all .arch__item.is-more:not([hidden]), .arch.is-filtered .arch__item.is-more:not([hidden]) { display: block; }
.arch__tile {
	position: relative; display: block;
	width: 100%; margin: 0; padding: 0; border: 0;
	overflow: hidden;
	background: #D8D3C9; color: #F4F1EA;
	font: inherit; text-align: left;
	cursor: pointer;
}
.arch__img, .arch__clip, .arch__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Fotostrecke: alle Fotos liegen vorgeladen übereinander, sichtbar ist nur das aktuelle */
.arch__slide { visibility: hidden; }
.arch__slide.is-shown { visibility: visible; }
/* Das Video bleibt sichtbar, sobald es ein Bild hat: als Vorschaubild und nach dem Wegfahren auf dem Bild, wo es angehalten hat */
.arch__clip { opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.arch__clip.is-ready { opacity: 1; }
.arch__shade {
	position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
	background: linear-gradient(rgba(13, 12, 10, 0), rgba(13, 12, 10, 0.82));
	pointer-events: none;
	transition: opacity 0.35s ease;
}
.arch__pill {
	position: absolute; left: 12px; top: 12px;
	display: flex; align-items: center; gap: 8px;
	max-width: 25px; height: 25px; padding-right: 0;
	overflow: hidden;
	border-radius: 999px;
	background: var(--paper); color: var(--ink);
	transition: max-width 0.35s var(--ease), padding-right 0.35s var(--ease);
}
/* Abspielen-Punkt: heller Kreis mit schwarzem Symbol, ohne Ring (öffnet sich beim Drüberfahren zur hellen Pille mit schwarzer Schrift) */
.arch__dot { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 1.5px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.arch__play { font-size: 11px; white-space: nowrap; opacity: 0; transition: opacity 0.25s ease; }
.arch__txt {
	position: absolute; left: 16px; right: 16px; bottom: 15px;
	display: flex; flex-direction: column; gap: 5px;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.arch__brand { font-size: 11px; opacity: 0.8; }
.arch__name { font-size: 22px; line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.arch__meta { font-size: 11px; opacity: 0.72; }
/* Titel erst beim Drüberfahren (am Computer) */
.arch:not(.arch--always) .arch__shade, .arch:not(.arch--always) .arch__txt { opacity: 0; }
.arch:not(.arch--always) .arch__txt { transform: translateY(10px); }
.arch__tile.is-on .arch__pill { max-width: 220px; padding-right: 12px; }
.arch__tile.is-on .arch__play { opacity: 1; }
.arch__tile.is-on .arch__shade, .arch__tile.is-on .arch__txt { opacity: 1; transform: none; }
.arch__tile:focus-visible .arch__shade, .arch__tile:focus-visible .arch__txt { opacity: 1; transform: none; }
.arch__more { display: flex; justify-content: center; }
.arch.is-all .arch__more, .arch.is-filtered .arch__more { display: none; }
.pill--ghost-ink { background: transparent; color: var(--ink); border: 1px solid var(--line); }
@media (hover: hover) { .pill--ghost-ink:hover { border-color: var(--ink); } .arch__filter:hover { border-color: var(--ink); } }
/* Ohne Maus (Handy, Tablet) stehen die Titel immer da */
@media (hover: none) {
	.arch:not(.arch--always) .arch__shade, .arch:not(.arch--always) .arch__txt { opacity: 1; transform: none; }
}
@media (max-width: 1100px) { .arch__grid { column-count: 3; } }
@media (max-width: 760px) {
	.arch { gap: 20px; padding: 88px 16px 8px; }
	.arch__head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.arch__intro { gap: 20px; }
	.arch__title { font-size: 48px; gap: 10px; }
	.arch__count { font-size: 11px; }
	.arch__text { font-size: 15px; }
	/* in Zeilen umbrechen statt seitlich aus dem Bild laufen */
	.arch__filters { flex-wrap: wrap; gap: 8px 6px; }
	.arch__filter { flex: 0 0 auto; padding: 0 12px; font-size: 11px; }
	.arch__grid { column-count: 2; column-gap: 12px; margin-top: 4px; }
	.arch__item { margin-bottom: 12px; }
	.arch__shade { height: 72%; }
	.arch__pill { left: 7px; top: 7px; max-width: 22px; height: 22px; background: transparent; box-shadow: none; }
	.arch__dot { margin-left: 0; }
	.arch__dot svg { width: 8px; height: 8px; }
	.arch__play { display: none; }
	.arch__tile.is-on .arch__pill { max-width: 22px; padding-right: 0; }
	.arch__txt { left: 10px; right: 10px; bottom: 9px; gap: 2px; }
	.arch__brand { font-size: 11px; letter-spacing: 0.03em; opacity: 0.86; }
	.arch__name { font-size: 14px; line-height: 1.12; letter-spacing: -0.01em; }
	.arch__meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.arch__clip, .arch__txt, .arch__pill { transition: none; }
}

/* Nur für Screenreader und Suchmaschinen */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* Kontakt */
.contact {
	flex: 1 0 auto;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 30px;
	padding: 150px 28px 140px;
	text-align: center;
	border-top: 1px solid var(--line);
}
.contact--solo { min-height: 80vh; border-top: 0; padding-top: 180px; }
.contact__mail {
	font-size: clamp(56px, 6.6vw, 96px); line-height: 1;
	font-weight: 700; letter-spacing: -0.04em;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.contact__line {
	max-width: 1240px;
	font-size: clamp(76px, 8.6vw, 128px); line-height: 0.88;
	font-weight: 700; letter-spacing: -0.045em; text-transform: uppercase;
	text-decoration: none; text-wrap: balance;
}
.contact__cta { height: 52px; padding: 0 26px; font-size: 13px; }
.contact__cta svg { flex: none; }
.contact__big {
	margin: 0;
	font-size: clamp(90px, 9vw, 130px); line-height: 0.9;
	letter-spacing: -0.045em; font-weight: 700; text-transform: uppercase;
}
.contact__links {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 0 12px;
	font-size: 15px; font-weight: 500;
}
/* lesbar statt grau in Versalien, Tippfläche 44 px */
.contact__links a:not(.pill) {
	padding: 12px 8px;
	text-decoration: underline; text-decoration-color: rgba(18, 18, 16, 0.25); text-underline-offset: 4px;
}
@media (hover: hover) { .contact__links a:not(.pill):hover { text-decoration-color: currentColor; } }

/* Footer */
.footer {
	display: flex; flex-direction: column; gap: 56px;
	padding: 64px 28px 28px;
	background: var(--ink);
	color: var(--paper);
}
.footer a { text-decoration: none; }
.footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
	align-items: start;
}
.footer__logo { display: block; color: inherit; }
.footer__col { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.footer__label { font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.55; }
.footer__addr { display: flex; flex-direction: column; gap: 2px; font-style: normal; }
.footer__addr span { display: block; }
.footer__bottom {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding-top: 20px;
	border-top: 1px solid rgba(236, 233, 226, 0.14);
	font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase;
}
.footer__bottom span { opacity: 0.55; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.footer__inline { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }

/* ---------- Unterseiten (Projekt, Pitch, Rechtliches) ---------- */

/* Wiederkehrendes Element: Marke links, Linie füllt den Platz, Titel rechts */
.split { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.22em; row-gap: 0.06em; }
.split__brand { min-width: 0; }
.split__rest { flex: 1 1 auto; min-width: 40%; display: flex; align-items: center; gap: 0.22em; }
/* Strichstärke wächst mit der Schrift: bei fetten Titeln 0.055em, in der Projektliste (mittlere Stärke) 0.04em */
.split__line { flex: 1 1 auto; min-width: 0.6em; height: max(1px, 0.055em); background: currentColor; }
.split__title { white-space: nowrap; }

.sub .page { line-height: 1.5; }
.phead { display: flex; flex-direction: column; gap: 22px; padding: 136px 28px 56px; }
.phead__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.back { display: flex; align-items: center; gap: 6px; min-height: 40px; text-decoration: none; opacity: 0.65; }
.phead__title {
	margin: 0;
	font-size: clamp(56px, 9.6vw, 140px); line-height: 0.9;
	letter-spacing: -0.045em; font-weight: 700; text-transform: uppercase;
	overflow-wrap: anywhere;
}
.facts {
	margin: 34px 0 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px 24px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 16px;
}
.facts div { display: flex; flex-direction: column; gap: 4px; }
.facts dt { font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.6; }
.facts dd { margin: 0; font-weight: 500; }

.film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #D8D3C9; }
.film__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

.pbody { display: flex; flex-direction: column; gap: 96px; padding: 140px 28px; }
.pbody__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }
.pbody__text { max-width: 820px; display: flex; flex-direction: column; gap: 28px; }
.pbody__text p { margin: 0; text-wrap: pretty; }
.pbody__text .lead { font-size: 19px; line-height: 1.5; }
.pbody__text .more { font-size: 17px; line-height: 1.6; opacity: 0.75; }
.credits { max-width: 820px; margin: 0; display: flex; flex-direction: column; font-size: 16px; }
.credits div {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px;
	padding: 13px 0;
	border-top: 1px solid var(--line);
}
.credits div:last-child { border-bottom: 1px solid var(--line); }
.credits dt { font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.6; padding-top: 3px; }
.credits dd { margin: 0; font-weight: 500; }


.bts {
	display: flex; flex-direction: column; gap: 56px;
	padding: 120px 28px 130px;
	background: var(--night);
	color: var(--cream);
}
.bts__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.bts__head h2 { font-size: 12px; font-weight: 500; }
.bts__grid { columns: 3 320px; column-gap: 24px; }
.bts__item { margin: 0 0 24px; break-inside: avoid; }
.bts__item img { width: 100%; height: auto; }

.next { flex: 1 0 auto; padding: 120px 28px 140px; }
.next__link { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; text-decoration: none; }
.next__title {
	align-self: stretch; text-align: left;
	font-size: clamp(48px, 5.8vw, 84px); line-height: 0.92;
	letter-spacing: -0.045em; font-weight: 700; text-transform: uppercase;
}
.next__link img { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Projektseite: Film im Einstieg, Credits daneben, Geschichte, Behind, nächstes Projekt ---------- */

.pj-hero {
	position: relative;
	isolation: isolate;
	min-height: max(100svh, 660px);
	display: flex; flex-direction: column; justify-content: flex-end; gap: 48px;
	padding: 100px 28px 40px;
	overflow: hidden;
	background: var(--stage);
	color: var(--cream);
}
.pj-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pj-hero__img, .pj-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-hero__video { opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
.pj-hero__video.is-on { opacity: 1; }
.pj-hero__shade {
	position: absolute; inset: 0;
	background:
		linear-gradient(to bottom, rgba(13, 12, 10, 0.62) 0%, rgba(13, 12, 10, 0) 28%),
		linear-gradient(to top, rgba(13, 12, 10, 0.86) 0%, rgba(13, 12, 10, 0.5) 34%, rgba(13, 12, 10, 0) 64%);
}
.pj-hero__bottom { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
/* Film abspielen über dem Titel */
.pj-hero__play { align-self: flex-start; margin-bottom: 12px; }


.pj-hero__bottom { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: end; gap: 40px 64px; }
.pj-hero__head { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* so groß wie möglich, das längste Wort (--w Zeichen) passt immer in die Spalte */
.pj-hero__title {
	margin: 0;
	font-size: min(clamp(56px, 8vw, 132px), calc(var(--tw, 50vw) / (var(--w, 8) * 0.62)));
	line-height: 0.88; letter-spacing: -0.045em; font-weight: 700; text-transform: uppercase;
}
.pj-hero__title--line { white-space: nowrap; }
.pj-hero__hook { margin: 4px 0 0; max-width: 34em; font-size: 19px; line-height: 1.45; text-wrap: pretty; }
.pj-credits { min-width: 0; }
.pj-credits dl { margin: 0; }
.pj-credits div {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px;
	padding: 9px 0;
	border-top: 1px solid rgba(237, 232, 221, 0.22);
}
.pj-credits div:last-child { border-bottom: 1px solid rgba(237, 232, 221, 0.22); }
.pj-credits dt { padding-top: 2px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.65; }
.pj-credits dd { margin: 0; font-size: 14px; font-weight: 500; }

/* Geschichte: Überschrift und Text links, ein Foto aus dem Film rechts */
/* Frames (wie bei Rozay): links Überschrift, Beschreibung und Zähler, die beim Scrollen stehen bleiben, rechts die Frames */
.frames { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px 64px; padding: 140px 28px; }
.frames--text { grid-template-columns: minmax(0, 1fr); }
.frames__side { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 760px; }
.frames--text .frames__side { position: static; max-width: 760px; }
.frames__title { margin: 0; font-size: clamp(30px, 2.8vw, 46px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 700; text-transform: uppercase; text-wrap: balance; }
.frames__chip { margin: 0; opacity: 0.6; }
.frames__text { display: flex; flex-direction: column; gap: 14px; }
.frames__text p { margin: 0; text-wrap: pretty; }
.frames__text .lead { font-size: 17px; line-height: 1.55; }
.frames__text .more { font-size: 15px; line-height: 1.6; opacity: 0.7; }
.frames__count { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
.frames__label { opacity: 0.6; }
.frames__num { font-size: clamp(30px, 2.8vw, 46px); line-height: 1; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.frames__num b { font-weight: inherit; }
.frames__num span { opacity: 0.4; }
.frames__list { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.frames__item { margin: 0; overflow: hidden; background: var(--paper-2, #E2DDD3); }
.frames__item img { display: block; width: 100%; height: auto; }

/* Behind the Scenes: Text, darunter alle Fotos (und das BTS-Video vorne) in einer Reihe zum Durchblättern */
.pj-bts {
	--rail-h: clamp(280px, 30vw, 540px);
	display: flex; flex-direction: column; gap: 56px;
	padding: 120px 28px 130px;
	background: var(--night); color: var(--cream);
}
.pj-bts__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.pj-bts__intro { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.pj-bts__kicker { opacity: 0.65; }
.pj-bts__title { margin: 0; font-size: clamp(36px, 3.8vw, 60px); line-height: 1; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; }
.pj-bts__text p { margin: 0; font-size: 17px; line-height: 1.6; opacity: 0.78; text-wrap: pretty; }
.pj-bts__text p + p { margin-top: 12px; }
.pj-bts__lead { position: relative; margin: 0; width: 100%; max-width: 980px; aspect-ratio: 16 / 9; overflow: hidden; background: #1E1C18; }
.pj-bts__lead img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj-bts__lead--film::after, .pj-rail__item--film::after { content: ''; position: absolute; inset: 0; background: rgba(13, 12, 10, 0.3); pointer-events: none; }
.pj-bts__play { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); }
.pj-rail { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pj-rail__track {
	display: flex; gap: 16px;
	height: var(--rail-h);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* läuft bis an den rechten Rand, damit man sieht, dass es weitergeht */
	margin-right: -28px; padding-right: 28px;
}
.pj-rail__track::-webkit-scrollbar { display: none; }
.pj-rail__item { position: relative; flex: none; margin: 0; height: 100%; aspect-ratio: var(--ar, 1.5); max-width: 86%; overflow: hidden; scroll-snap-align: start; background: #1E1C18; }
.pj-rail__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj-rail__ctrl { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pj-rail__ctrl[hidden] { display: none; }
.pj-rail__btns { display: flex; gap: 20px; }
.pj-rail__btn { min-height: 40px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.pj-rail__btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .pj-rail__btn:not(:disabled):hover { text-decoration: underline; text-underline-offset: 4px; } }

/* Nächstes Projekt: links Titel (wie oben Marke – Titel), rechts das Bild (am Computer läuft beim Drüberfahren der Clip) */
.pj-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30vw); align-items: end; gap: 32px 56px; padding: 120px 28px 96px; border-top: 1px solid var(--line); }
.pj-next__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.pj-next__kicker { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.pj-next__title {
	display: block; max-width: 100%;
	color: inherit; text-decoration: none;
	font-size: min(clamp(40px, 4.4vw, 76px), calc(44vw / (var(--w, 8) * 0.62)));
	line-height: 0.9; letter-spacing: -0.045em; font-weight: 700; text-transform: uppercase;
}
.pj-next__title--line { white-space: nowrap; }
.pj-next__all { display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: none; opacity: 0.65; }
@media (hover: hover) {
	.pj-next__title:hover { opacity: 0.75; }
	.pj-next__all:hover { opacity: 1; }
}
.pj-next__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #D8D3C9; }
.pj-next__media img, .pj-next__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-next__media video { opacity: 0; transition: opacity 0.4s ease; }
.pj-next__media.is-on video { opacity: 1; }

/* Tablet hochkant: Titel über die ganze Breite, Credits darunter */
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 1 / 1) {
	.pj-hero__bottom { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.pj-hero__title { --tw: 88vw; }
	.pj-credits { max-width: 620px; }
}

@media (max-width: 760px) {
	/* oben der Film, darunter Titel, Aufhänger und Credits auf hellem Grund */
	.pj-hero { --m-h: clamp(380px, 64svh, 620px); min-height: 0; justify-content: flex-start; gap: 0; padding: 0; background: var(--paper); color: var(--ink); }
	.pj-hero__media { position: relative; inset: auto; z-index: 0; height: var(--m-h); background: var(--stage); }
	.pj-hero__shade { background: linear-gradient(to bottom, rgba(13, 12, 10, 0.6) 0%, rgba(13, 12, 10, 0) 34%), linear-gradient(to top, rgba(13, 12, 10, 0.45) 0%, rgba(13, 12, 10, 0) 30%); }
	.pj-hero__play { height: 44px; margin-bottom: 8px; font-size: 12px; }
	.pj-hero__bottom { text-shadow: none; }
	.pj-hero__bottom { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 28px 16px 56px; }
	.pj-hero__title { --tw: 92vw; font-size: min(64px, calc(var(--tw) / (var(--w, 8) * 0.62))); }
	.pj-hero__hook { font-size: 17px; }
	.pj-credits div { border-color: var(--line); }
	.pj-credits div:last-child { border-bottom-color: var(--line); }
	.pj-credits dd { font-size: 15px; }

	.frames { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 72px 16px; }
	.frames__side { position: static; gap: 20px; }
	.frames__title { font-size: 30px; }
	.frames__text .lead { font-size: 16px; }
	.frames__count { display: none; }
	.frames__list { gap: 10px; }

	.pj-bts { --rail-h: 62vw; gap: 32px; padding: 72px 16px; }
	.pj-bts__title { font-size: 32px; }
	.pj-bts__text p { font-size: 16px; }
	.pj-bts__lead { aspect-ratio: 4 / 3; }
	.pj-rail__item--film .pj-bts__play { transform: translate(-50%, -50%) scale(0.85); }
	.pj-rail__track { gap: 10px; margin-right: -16px; padding-right: 16px; scroll-padding-left: 0; }

	.pj-next { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 64px 16px 48px; }
	.pj-next__title { font-size: min(40px, calc(92vw / (var(--w, 8) * 0.62))); }
}

/* Pitch */
.phead--pitch { gap: 26px; padding-bottom: 80px; }
.phead__title--pitch { font-size: clamp(64px, 10.4vw, 150px); }
.pitch__intro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; gap: 24px 48px; margin-top: 22px; }
.pitch__note { margin: 0; max-width: 680px; font-size: 22px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }
.pitch__from { justify-self: end; display: flex; align-items: center; gap: 14px; }
.pitch__from img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.pitch__from div { display: flex; flex-direction: column; font-size: 15px; line-height: 1.35; }
.pitch__from .label { margin-top: 4px; }
.pitch__expired { margin: 0; font-size: 28px; font-weight: 500; }
.greet { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--night); color: var(--cream); }
.greet__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.greet__shade { position: absolute; inset: 0; background: linear-gradient(rgba(14, 13, 11, 0.1), rgba(14, 13, 11, 0.55)); pointer-events: none; }
.greet__caption { position: absolute; left: 28px; bottom: 26px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.greet__title { font-size: 40px; line-height: 1; font-weight: 700; font-style: italic; letter-spacing: -0.035em; }
.greet.is-playing .greet__shade, .greet.is-playing .greet__caption, .greet.is-playing .film__play { display: none; }
.picks { display: flex; flex-direction: column; gap: 40px; padding: 140px 28px 120px; }
.picks__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.picks__head h2 { font-size: 12px; font-weight: 500; }
.picks__head a { text-decoration: none; }
.picks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pick {
	display: flex; flex-direction: column; gap: 26px;
	padding: 30px 0 44px;
	border-top: 1px solid var(--line);
}
.pick__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
	gap: 24px 40px;
}
.pick__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #D8D3C9; }
.pick__img img { width: 100%; height: 100%; object-fit: cover; }
.pick__body { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.pick__title { margin: 0; font-size: 64px; line-height: 0.95; font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase; }
.pick__why { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pick__why span:last-child { font-size: 19px; line-height: 1.4; font-weight: 500; }
.pick__body .pill { align-self: flex-start; margin-top: 10px; }

/* Rechtliches */
.legal { flex: 1 0 auto; display: flex; flex-direction: column; gap: 48px; padding: 136px 28px 120px; }
.legal .phead__title { font-size: clamp(48px, 7vw, 100px); }
.legal__text { max-width: 760px; font-size: 17px; }
.legal__text h2 { margin: 40px 0 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.legal__text p { margin: 0 0 14px; }

/* ---------- Player ---------- */

.player {
	position: fixed; inset: 0;
	z-index: 90;
	display: flex; align-items: center; justify-content: center;
	padding: 72px 28px 28px;
	background: rgba(10, 9, 7, 0.94);
}
.player[hidden] { display: none; }
.player__close {
	position: absolute; top: 18px; right: 18px;
	height: 40px; padding: 0 16px;
	border: 1px solid rgba(237, 232, 221, 0.4); border-radius: 999px;
	background: transparent; color: var(--cream);
	font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
	cursor: pointer;
}
.player__box { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
/* Format kommt vom Film (quer, hochkant, 4:5 …) */
.player__frame { width: min(100%, calc((100vh - 120px) * var(--ar, 1.7778))); aspect-ratio: var(--r, 16 / 9); background: #000; }
.player.has-cap .player__frame { width: min(100%, calc((100vh - 200px) * var(--ar, 1.7778))); }
.player__frame iframe, .player__frame video { width: 100%; height: 100%; border: 0; }
/* Fotostrecke: jedes Foto in seinem eigenen Format, Pfeile links und rechts */
.player.is-gallery { padding-left: 100px; padding-right: 100px; }
.player.is-gallery .player__frame { background: transparent; }
.gal__img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.gal__nav {
	position: absolute; top: 50%; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; margin-top: -26px; padding: 0;
	border: 1px solid rgba(237, 232, 221, 0.4); border-radius: 50%;
	background: rgba(10, 9, 7, 0.45); color: var(--cream);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.gal__nav--prev { left: 22px; }
.gal__nav--next { right: 22px; }
.player:not(.is-gallery) .gal__nav, .gal__nav[hidden] { display: none; }
@media (hover: hover) { .gal__nav:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } }
.player__cap {
	width: min(100%, max(300px, calc((100vh - 200px) * var(--ar, 1.7778))));
	margin: 0;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px;
	color: var(--cream);
}
.player__cap[hidden] { display: none; }
.player__cap strong { font-size: 22px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; }
.player__cap span { font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.7; }

/* ---------- Handy ---------- */

@media (max-width: 760px) {
	body { font-size: 16px; }
	.hide-m { display: none; }
	.show-m { display: inline; }
	:root { --gutter: 16px; }

	.flood__disc { top: 32px; }

	.hero { height: 82svh; min-height: 520px; perspective: 1600px; transition: height 0.8s var(--ease); }
	.side-behind .hero { height: 100svh; }
	.ko--desk { display: none; }
	.ko--mob { display: block; }
	html.intro .ko-intro--desk, html.intro-reveal .ko-intro--desk { display: none; }
	html.intro .ko-intro--mob, html.intro-reveal .ko-intro--mob { display: block; }
	.hero__bar { left: 14px; right: 14px; bottom: 16px; display: flex; justify-content: space-between; gap: 12px; }
	.hero__scroll { display: none; }
	.hero__chip .chip { text-wrap: balance; }

	.behind__intro { left: 16px; right: 16px; bottom: 20px; }
	.behind__hi { font-size: 44px; }
	.behind__sub { font-size: 14px; }
	.status { display: none; }
	.behind__side { display: none; }
	.behind__links--m { display: flex; }
	.behind__links--m a { display: inline-block; padding: 14px 0; margin: -14px 0; }
	.lightbox { padding: 92px 16px 16px; }

	.collage { height: 780px; }
	.collage__card { left: var(--mx); top: var(--my); width: var(--mw); }
	.collage__card--desk { display: none; }
	/* Text liegt am Handy über den Fotos, damit „Was ich mache“ nie verdeckt wird */
	.collage__text { gap: 20px; padding: 0 16px; z-index: 4; }
	.collage__statement { font-size: 64px; }
	.collage__intro { font-size: 16px; }
	.collage__text .pill { display: none; }

	.stage__inner { gap: 20px; padding: clamp(96px, 13vh, 120px) 16px 48px; padding-bottom: calc(48px + (100lvh - 100svh)); }
	@media (max-height: 700px) {
		.stage__inner { gap: 16px; padding-top: 88px; }
		.plist { gap: 4px; }
	}
	.stage__shade { background: linear-gradient(rgba(13, 12, 10, 0.74), rgba(13, 12, 10, 0.46) 55%, rgba(13, 12, 10, 0.78)); }
	.stage__head { flex-direction: column; align-items: flex-start; }
	.stage__head h2 { font-size: 11px; }
	.filters { flex-wrap: nowrap; gap: 4px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; white-space: nowrap; width: calc(100% + 32px); scrollbar-width: none; }
	.filter { flex: 0 0 auto; padding: 0 9px; font-size: 11px; }
	.plist { display: flex; flex-direction: column; gap: 8px; }
	.plist__item { padding: 0; }
	/* Handy: Marke mit Strich oben, Titel rechtsbündig darunter */
	.plist__link { flex-wrap: wrap; gap: 2px 8px; font-size: 23px; line-height: 1.05; letter-spacing: -0.02em; }
	.plist__brand { font-family: var(--sans, 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; line-height: 1.2; letter-spacing: 0.03em; }
	.plist__line { margin-top: 0; }
	.plist__right { flex: 1 0 100%; justify-content: flex-end; gap: 7px; }
	.plist__kind { font-size: 11px; top: 3px; }
	.stage__foot { flex-direction: column; align-items: stretch; gap: 10px; }
	.stage__count { justify-content: space-between; align-items: center; }
	.stage__num { font-size: 15px; letter-spacing: 0; line-height: 1; font-weight: 600; }
	.stage__of { flex-direction: row; gap: 10px; font-size: 11px; }
	.meta { width: auto; }
	.meta__title { margin: 0 0 4px; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 600; }
	.meta__table > div:nth-child(1), .meta__table > div:nth-child(2) { display: none; }
	.meta__table > div { border: 0; padding: 0 0 8px; grid-template-columns: 1fr; }
	.meta__table dt { display: none; }
	.meta__table dd { font-size: 14px; font-weight: 400; opacity: 0.65; }
	.meta__bar { border-radius: 2px; }

	.about { gap: 64px; padding: 88px 16px 64px; }
	.about__title { font-size: 48px; }
	/* Handy: Überschrift, dann Fotos, dann Text */
	.me { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
	.me__text { display: contents; }
	.me__chip { order: -3; align-self: flex-start; }
	.me__title { order: -2; }
	.me__photos { order: -1; max-width: 560px; aspect-ratio: 5 / 6; }
	.me__photo--1 { width: 60%; }
	.me__photo--2 { right: 0; width: 34%; }
	.me__lead { font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; }
	.me__body { font-size: 15px; }
	.me__facts { margin: 0; }
	.me__facts > div { grid-template-columns: 120px minmax(0, 1fr); padding: 8px 0; }
	.me__cta { align-self: flex-start; }
	.clients { gap: 14px; }
	.clients h2 { font-size: 11px; }
	.marquee { --lh: 28px; --gap: 72px; }
	.logos__item { height: 72px; }
	.logos__img { max-width: calc(140px * var(--s, 1)); }
	.logos__name { font-size: calc(16px * var(--s, 1)); }

	.contact { gap: 22px; padding: 88px 16px 80px; }
	.contact__mail { font-size: 30px; line-height: 1.05; letter-spacing: -0.035em; }
	.contact__big { font-size: 48px; }
	.contact__line { font-size: 48px; }
	.contact__links { gap: 0 6px; font-size: 15px; }

	.footer { gap: 32px; padding: 40px 16px 20px; }
	.footer__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
	.footer__logo { grid-column: 1 / -1; }
	.footer__logo .logo { width: 54px; height: 36px; }
	.footer__col--contact { display: none; }
	.footer__label { font-size: 11px; }
	.footer__bottom { font-size: 11px; }
	/* Tippflächen mindestens 44 px hoch */
	.footer__col { gap: 0; }
	.footer__col > :not(.footer__label) { display: block; padding: 11px 0; }
	.footer__label { margin-bottom: -4px; }
	.footer__bottom a { display: inline-block; padding: 14px 0; margin: -14px 0; }
	.footer__inline { gap: 0 24px; }
	.footer__inline a { display: inline-block; padding: 12px 0; }

	.phead { gap: 16px; padding: 96px 16px 32px; }
	.phead__title { font-size: 48px; }
	.facts { grid-template-columns: 1fr 1fr; margin-top: 16px; font-size: 15px; }
	.pbody { gap: 56px; padding: 72px 16px; }
	.pbody__row { grid-template-columns: 1fr; gap: 16px; }
	.pbody__text .lead { font-size: 17px; }
	.pbody__text .more { font-size: 16px; }
	.credits div { gap: 12px; }
	.bts { gap: 32px; padding: 72px 16px; }
	.bts__grid { columns: 2 140px; column-gap: 10px; }
	.bts__item { margin-bottom: 10px; }
	.next { padding: 72px 16px 88px; }
	.next__title { font-size: 40px; }

	.phead--pitch { padding-bottom: 40px; }
	.phead__title--pitch { font-size: 56px; }
	.pitch__intro { grid-template-columns: 1fr; margin-top: 8px; }
	.pitch__note { font-size: 18px; }
	.pitch__from { justify-self: start; }
	.greet__caption { left: 16px; bottom: 14px; }
	.greet__title { font-size: 24px; }
	.greet .play-pill--big .play-pill__label { display: none; }
	.greet .play-pill--big { padding: 0 7px; }
	.greet .play-pill--big .play-pill__dot { background: transparent; color: var(--paper); }
	.picks { gap: 24px; padding: 72px 16px; }
	.picks__head { flex-direction: column; align-items: flex-start; }
	.pick { gap: 16px; padding: 24px 0 32px; }
	.pick__grid { grid-template-columns: 1fr; gap: 16px; }
	.pick__title { font-size: 34px; }
	/* Handy: Linie und Titel immer in der zweiten Zeile, lange Titel dürfen umbrechen */
	.split__rest { flex-basis: 100%; }
	.split__title { white-space: normal; hyphens: auto; text-align: right; min-width: 0; }
	.pick__why { margin-top: 6px; }
	.pick__why span:last-child { font-size: 16px; }

	.legal { padding: 96px 16px 72px; gap: 32px; }
	.player { padding: 64px 0 0; align-items: center; }
	.player.is-gallery { padding-left: 0; padding-right: 0; }
	.gal__nav { width: 40px; height: 40px; margin-top: -20px; background: rgba(10, 9, 7, 0.55); }
	.gal__nav--prev { left: 8px; }
	.gal__nav--next { right: 8px; }
	.player.has-cap .player__frame { width: min(100%, calc((100vh - 170px) * var(--ar, 1.7778))); }
	.player__cap { padding: 0 16px; }
	.player__cap strong { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.flood__disc, .hero__flip, .rest, .nav, .page { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* ---------- Anfrage-Formular (öffnet über jeden Link auf #anfrage) ---------- */

html.inq-lock { overflow: hidden; }

.inq {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(640px, 100%);
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--paper);
	color: var(--ink);
	overflow: hidden;
}
.inq::backdrop { background: rgba(14, 13, 11, 0.62); }
/* Ohne JavaScript: der Link-Anker #anfrage zeigt das Formular */
.inq:target:not([open]) { display: block; z-index: 95; box-shadow: 0 0 0 100vmax rgba(14, 13, 11, 0.62); }
.inq.is-js:target:not([open]) { display: none; }

.inq[open] { animation: inq-in 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.inq[open]::backdrop { animation: inq-fade 0.46s ease both; }
.inq.is-closing { animation: inq-out 0.3s cubic-bezier(0.6, 0, 0.8, 0.4) both; }
.inq.is-closing::backdrop { animation: inq-fade 0.3s ease reverse both; }
@keyframes inq-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes inq-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes inq-fade { from { opacity: 0; } to { opacity: 1; } }

.inq__sheet {
	display: flex; flex-direction: column; gap: 30px;
	height: 100%;
	padding: 36px 48px 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.inq__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.inq__x {
	display: grid; place-items: center; flex: none;
	width: 40px; height: 40px;
	border: 1px solid rgba(18, 18, 16, 0.3); border-radius: 50%;
	color: inherit;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
@media (hover: hover) { .inq__x:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }

.inq__form { display: flex; flex-direction: column; gap: 22px; }
.inq__form[hidden], .inq__done[hidden] { display: none; }
.inq__title {
	margin: 0;
	font-size: 52px; line-height: 0.92; font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase;
	text-wrap: balance;
}
.inq__title:focus { outline: none; }
.inq__intro { margin: 0; font-size: 17px; line-height: 1.45; opacity: 0.75; text-wrap: pretty; }

.inq__label {
	display: block;
	font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
	color: rgba(18, 18, 16, 0.64);
}
.inq__opt { text-transform: none; letter-spacing: 0; }

.inq__kinds { min-width: 0; margin: 0; padding: 0; border: 0; }
.inq__kinds legend { float: left; width: 100%; margin: 0 0 10px; padding: 0; }
.inq__chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.inq__chip { position: relative; }
.inq__chip input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.inq__chip span {
	display: flex; align-items: center;
	height: 36px; padding: 0 14px;
	border: 1px solid var(--ink); border-radius: 999px;
	font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
	cursor: pointer; user-select: none;
	transition: background 0.15s, color 0.15s;
}
@media (hover: hover) { .inq__chip span:hover { background: rgba(18, 18, 16, 0.08); } }
.inq__chip input:checked + span { background: var(--ink); color: var(--paper); }
.inq__chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.inq__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inq__input {
	display: block; width: 100%;
	margin: 0; padding: 10px 0 12px;
	border: 0; border-bottom: 1px solid rgba(18, 18, 16, 0.35); border-radius: 0;
	background: transparent; color: var(--ink);
	font: inherit; font-size: 19px; line-height: 1.4;
	outline: none;
	-webkit-appearance: none; appearance: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
textarea.inq__input { min-height: 118px; resize: vertical; }
.inq__input::placeholder { color: rgba(18, 18, 16, 0.62); opacity: 1; }
.inq__input:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.inq__field.is-err .inq__input { border-bottom-color: #A4262C; box-shadow: 0 1px 0 #A4262C; }
.inq__err { padding-top: 6px; font-size: 13px; font-weight: 500; color: #A4262C; }
.inq__err:empty { display: none; }
.inq__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }

/* Honeypot: für Menschen unsichtbar */
.inq__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.inq__alert {
	margin: 0; padding: 10px 14px;
	border-radius: 10px;
	background: rgba(18, 18, 16, 0.08);
	font-size: 14px; font-weight: 500; line-height: 1.4;
}
.inq__send { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.inq__submit { gap: 10px; }
.inq__submit[disabled] { opacity: 0.6; cursor: progress; }
.inq__note { margin: 0; font-size: 12px; line-height: 1.45; color: rgba(18, 18, 16, 0.64); text-wrap: pretty; }

.inq__done { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 12vh; outline: none; }
.inq__thanks {
	margin: 0;
	font-size: 72px; line-height: 0.9; font-weight: 700; letter-spacing: -0.045em; text-transform: uppercase;
	overflow-wrap: anywhere;
}
.inq__thanks-text { margin: 0; max-width: 30em; font-size: 20px; line-height: 1.45; text-wrap: pretty; }
.inq__to { margin: -8px 0 0; font-size: 15px; color: rgba(18, 18, 16, 0.7); overflow-wrap: anywhere; }
.inq__to strong { color: var(--ink); font-weight: 600; }

.inq__direct {
	margin-top: auto;
	display: flex; flex-wrap: wrap; gap: 6px 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(18, 18, 16, 0.18);
	font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
}
.inq__direct a { text-decoration: none; }
@media (hover: hover) { .inq__direct a:hover { text-decoration: underline; } }
.inq__direct-label { color: rgba(18, 18, 16, 0.55); }

.menu__cta { margin-top: 22px; }

@media (max-width: 760px) {
	.inq { width: 100%; height: 100dvh; }
	.inq[open] { animation-name: inq-up; }
	.inq.is-closing { animation-name: inq-down; }
	.inq__sheet { gap: 18px; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }
	.inq__form { gap: 18px; }
	.inq__title { font-size: 36px; }
	.inq__intro { font-size: 16px; }
	.inq__input { font-size: 17px; }
	textarea.inq__input { min-height: 96px; }
	.inq__row { gap: 16px; }
	.inq__send { align-items: stretch; }
	.inq__submit { justify-content: center; }
	.inq__done { padding-top: 40px; }
	.inq__thanks { font-size: 44px; }
	.inq__thanks-text { font-size: 17px; }
}
@keyframes inq-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes inq-down { from { transform: none; } to { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
	.inq[open], .inq[open]::backdrop, .inq.is-closing, .inq.is-closing::backdrop { animation: none; }
}

/* ---------- Abschluss auf Projektseiten: nach dem nächsten Projekt eine Zeile mit Frage und Knopf, links bündig ---------- */
.pcta {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px 40px;
	padding: 44px 28px 56px;
	border-top: 1px solid var(--line);
}
.pcta__line {
	margin: 0;
	font-size: clamp(28px, 3vw, 44px); line-height: 0.95;
	font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase;
	text-wrap: balance;
}
.pcta__btn { flex: none; }
/* Knopf „Projekt ansehen“ unter der Projektliste: nur am Handy, wo es kein Drüberfahren gibt */
.meta__open { display: none; }
@media (max-width: 760px) {
	.meta__open { display: flex; justify-content: center; width: 100%; height: 48px; margin-top: 6px; font-size: 13px; }
	.pcta { flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px 16px 56px; }
	.pcta__line { font-size: 28px; }
}