/* =====================================================================
   Pegel · Gestaltung (nur Variablen aus tokens.css)
   Leitidee: ein Pegel. Der gelbe Wasserstrich füllt die Wortmarke (Intro), steigt als Band
   über jede neue Seite (Seitenwechsel) und misst rechts die Tiefe (Pegellatte).
   ===================================================================== */

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--nacht); color: var(--weiss);
  font-family: var(--font); font-size: 100%;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scrollbar-gutter: stable; scrollbar-color: #3a3a3a var(--nacht);
  interpolate-size: allow-keywords;
}
body { margin: 0; font-size: var(--text); line-height: var(--lh-text); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--signal); color: var(--auf-signal); }
input, textarea { caret-color: var(--signal); }
.mono { font-family: var(--mono); font-size: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; line-height: 1.35; font-variant-numeric: tabular-nums; }
.leise { color: var(--meta-dunkel); }
[data-thema="hell"] .leise, .recht .leise { color: var(--meta-hell); }
.klein { font-size: var(--text-klein); }
.h2 { font-size: var(--h2); font-weight: 600; letter-spacing: -0.02em; line-height: .95; text-wrap: balance; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
p { text-wrap: pretty; }

[data-thema="hell"] { background: var(--hell); color: var(--nacht); }
[data-thema="nacht"] { background: var(--nacht); color: var(--weiss); }

/* sprunglinks-landmarken */
.sprung { position: fixed; z-index: 200; left: var(--rand); top: 10px; padding: 10px 18px; background: var(--signal); color: var(--auf-signal); border-radius: var(--knopf-radius); font-weight: 600; transform: translateY(-160%); }
.sprung:focus { transform: none; }
main:focus { outline: none; }

/* fokus-stil-system (doppel): innen dunkel, außen gelb, sichtbar auf hell und dunkel */
:focus-visible { outline: 2px solid var(--fokus-innen); outline-offset: 0; box-shadow: 0 0 0 2px var(--fokus-innen), 0 0 0 5px var(--fokus); border-radius: 2px; }
.knopf:focus-visible, .knopf-klein:focus-visible, .knopf-rund:focus-visible, .filter-knopf:focus-visible { border-radius: var(--knopf-radius); }

/* unterstreichung-varianten: Linie läuft beim Hover nach rechts raus und von links nach */
.linie { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size var(--dur-ui) var(--ease-out); }
@media (hover: hover) {
  .linie:hover { animation: linie-nach var(--dur-2) var(--ease-out); }
}
@keyframes linie-nach { 0% { background-size: 100% 1px; background-position: 100% 100%; } 40% { background-size: 0 1px; background-position: 100% 100%; } 41% { background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } }

/* ---------- Zeilen aus Masken (split-mask-reveal, Zeilen stehen im HTML) ---------- */
.zm { display: block; overflow-x: visible; overflow-y: clip; overflow-clip-margin: 0; padding-bottom: .08em; margin-bottom: -.08em; }
.zi { display: block; }
html.js [data-zeilen] .zi { transform: translateY(105%); transition: transform var(--dur-2) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger-line)); }
html.js [data-zeilen].sichtbar .zi { transform: none; }

/* Bild-Reveal (clip-path-bild-reveal): Blende öffnet von unten, Bild zoomt gegenläufig */
html.js [data-blende] { clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-4) var(--ease-out); }
html.js [data-blende] img, html.js [data-blende] video { transform: scale(1.12); transition: transform var(--dur-4) var(--ease-out); }
html.js [data-blende].sichtbar { clip-path: inset(0); }
html.js [data-blende].sichtbar img, html.js [data-blende].sichtbar video { transform: none; }

/* bild-zoom-in-maske (basis) */
.maske-zoom { display: block; overflow: clip; border-radius: var(--radius-klein, 4px); }
.maske-zoom img { transition: transform var(--dur-3) var(--ease-out); }
@media (hover: hover) { a:hover .maske-zoom img, a.maske-zoom:hover img { transform: scale(1.05); } }

/* ---------- Buttons ---------- */
/* Haupthandlung: pfeil-icon-button, Variante kreis-expand */
.knopf { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: var(--knopf-hoehe); border-radius: var(--knopf-radius); text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1; border: 0; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.knopf-haupt { padding: 6px 6px 6px var(--knopf-pad); background: var(--signal); color: var(--auf-signal); overflow: clip; }
.knopf-haupt .knopf-text { position: relative; z-index: 1; transition: color var(--dur-hover) var(--ease-out); }
.knopf-haupt .kreis { position: relative; width: var(--knopf-kreis); height: var(--knopf-kreis); flex: none; display: grid; place-items: center; }
.knopf-haupt .kreis::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--nacht); transition: transform var(--dur-1) var(--ease-out); z-index: -1; }
.knopf-haupt .kreis svg { width: 20px; height: 20px; fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; position: relative; z-index: 1; }
.knopf-haupt .schaft { transform-origin: 19px 12px; transition: transform var(--dur-ui) var(--ease-out); }
.knopf-haupt .spitze { transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) {
  .knopf-haupt:hover .kreis::before { transform: scale(9); }
  .knopf-haupt:hover .knopf-text { color: var(--signal); }
  .knopf-haupt:hover .schaft { transform: scaleX(1.35); }
  .knopf-haupt:hover .spitze { transform: translateX(3px); }
}
.knopf-haupt:active { transform: scale(.97); transition: transform var(--dur-druck) var(--ease-out); }
.knopf-hell { background: var(--weiss); color: var(--nacht); }
.knopf-hell .kreis svg { stroke: none; fill: var(--weiss); }
.knopf-hell .kreis svg path { fill: var(--weiss); }

/* Nebenhandlung: Kontur-Pille, Bewegung nur im Label (text-roll-hover) */
.knopf-neben { padding: 0 var(--knopf-pad); border: 1px solid currentColor; font-weight: 500; }
.knopf-neben:active { transform: scale(.97); }
.roll { position: relative; display: inline-flex; overflow: clip; line-height: 1.15; }
.roll-a, .roll-b { display: inline-flex; white-space: nowrap; }
.roll-b { position: absolute; left: 0; top: 0; }
.roll span span { display: inline-block; transition: transform var(--dur-1) var(--ease-out); transition-delay: calc(var(--z) * var(--stagger-char)); }
.roll-b span { transform: translateY(105%); }
@media (hover: hover) {
  a:hover > .roll .roll-a span, button:hover > .roll .roll-a span, .kopf-link:hover .roll-a span { transform: translateY(-105%); }
  a:hover > .roll .roll-b span, button:hover > .roll .roll-b span, .kopf-link:hover .roll-b span { transform: none; }
}

.knopf-klein { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--knopf-radius); border: 1px solid currentColor; background: transparent; font-size: .875rem; font-weight: 500; line-height: 1; }
.knopf-klein:active { transform: scale(.96); }
.knopf-rund { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linie-dunkel); background: var(--tief); color: var(--weiss); }
.knopf-rund svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; z-index: 50; inset: 0 0 auto; height: var(--kopf);
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: var(--spalte);
  padding: 0 var(--rand); color: var(--weiss);
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
  view-transition-name: kopf;
}
html[data-kopf="hell"] .kopf { color: var(--nacht); }
.kopf.unterwegs { background: var(--nacht); }
html[data-kopf="hell"] .kopf.unterwegs { background: var(--hell); }
.kopf.weg { transform: translateY(-101%); transition: transform calc(var(--dur-1) * var(--zu)) var(--ease-in), background-color var(--dur-ui) var(--ease-out); }
.marke { position: relative; display: inline-flex; flex-direction: column; text-decoration: none; padding: 6px 0; }
.marke-wort { font-weight: 800; font-stretch: 75%; font-size: 1.75rem; line-height: .9; letter-spacing: -0.02em; }
.marke-strich { height: 3px; width: 100%; background: var(--signal); transform-origin: left; transition: transform var(--dur-1) var(--ease-out); margin-top: 3px; }
@media (hover: hover) { .marke:hover .marke-strich { transform: scaleX(.35); } }
.kopf-zeit { white-space: nowrap; }
.kopf-nav ul { display: flex; gap: clamp(14px, 2vw, 28px); }
.kopf-link { text-decoration: none; font-weight: 500; display: inline-flex; min-height: 44px; align-items: center; position: relative; }
.kopf-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--signal); }
.bewegung-schalter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: none; border: 0; padding: 0 4px; }
.schalter-spur { width: 30px; height: 18px; border-radius: 9px; border: 1px solid currentColor; position: relative; }
.schalter-spur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; transition: transform var(--dur-ui) var(--ease-out); }
.bewegung-schalter[aria-pressed="true"] .schalter-spur::after { transform: translateX(12px); background: var(--signal); }
.menue-knopf { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; background: none; border: 0; padding: 0 0 0 6px; font-weight: 600; }
.menue-label { display: grid; overflow: clip; height: 1.2em; line-height: 1.2; }
.menue-label span { grid-area: 1 / 1; transition: transform var(--dur-1) var(--ease-out); }
.menue-label span + span { transform: translateY(110%); }
.menue-linien { width: 26px; height: 12px; position: relative; }
.menue-linien i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--dur-1) var(--ease-out); }
.menue-linien i:first-child { top: 0; } .menue-linien i:last-child { bottom: 0; }
html.menue-offen .menue-label span:first-child { transform: translateY(-110%); }
html.menue-offen .menue-label span + span { transform: none; }
html.menue-offen .menue-linien i:first-child { transform: translateY(5px) rotate(45deg); }
html.menue-offen .menue-linien i:last-child { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 899px) { .kopf-nav, .kopf-zeit { display: none; } .kopf { grid-template-columns: auto 1fr auto auto; } .bewegung-schalter .mono { display: none; } }

/* ---------- Menü (vollbild-overlay-menue-bildvorschau) ---------- */
.menue { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--weiss); overflow: hidden; }
.menue::backdrop { background: transparent; }
.menue-flaeche {
  position: absolute; inset: 0; background: var(--nacht); overflow: auto;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); align-content: center;
  padding: calc(var(--kopf) + 24px) var(--rand) 40px;
  clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-1) var(--ease-out);
}
.menue.auf .menue-flaeche { clip-path: inset(0); }
.menue.zu .menue-flaeche { clip-path: inset(100% 0 0 0); transition: clip-path calc(var(--dur-1) * var(--zu)) var(--ease-in) calc(var(--dur-ui) * .4); }
.menue nav { grid-column: 1 / 9; position: relative; z-index: 1; }
.menue-link { display: flex; align-items: baseline; gap: 18px; text-decoration: none; padding: 2px 0; transition: opacity var(--dur-ui) var(--ease-out); }
.ml-maske { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.ml-text { display: block; font-weight: 800; font-stretch: 75%; font-size: clamp(3.4rem, 11.5vw, 10.5rem); line-height: .86; letter-spacing: -0.03em; transform: translateY(120%); transition: transform var(--dur-3) var(--ease-out); transition-delay: calc(150ms + var(--i) * 60ms); }
.menue.auf .ml-text { transform: none; }
.menue.zu .ml-text { transform: translateY(-120%); transition: transform calc(var(--dur-2) * .45) var(--ease-in); transition-delay: calc(var(--i) * 30ms); }
.ml-nr { opacity: .6; }
.menue-link[aria-current="page"] .ml-text { color: var(--signal); }
@media (hover: hover) { .menue-liste:hover .menue-link { opacity: .3; } .menue-liste .menue-link:hover, .menue-liste .menue-link:focus-visible { opacity: 1; } }
.menue-neben { grid-column: 10 / 13; align-self: end; display: grid; gap: 18px; font-size: 1rem; opacity: 0; transform: translateY(16px); transition: opacity var(--dur-2) var(--ease-out) 500ms, transform var(--dur-2) var(--ease-out) 500ms; }
.menue.auf .menue-neben { opacity: 1; transform: none; }
.menue.zu .menue-neben { opacity: 0; transition: opacity calc(var(--dur-ui) * .6) var(--ease-in); }
.menue-zu { position: absolute; top: 10px; right: var(--rand); width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: var(--weiss); }
.menue-zu svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menue-vorschau { position: fixed; left: 0; top: 0; width: clamp(170px, 17vw, 260px); aspect-ratio: 4 / 5; pointer-events: none; z-index: 0; transform: translate(-50%, -50%) translate(var(--mx, -999px), var(--my, -999px)) rotate(var(--rot, 0deg)); }
.menue-vorschau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-klein, 4px); clip-path: inset(100% 0 0 0); transition: clip-path calc(var(--dur-ui) * .6) var(--ease-in); }
.menue-vorschau img.an { clip-path: inset(0); transition: clip-path var(--dur-1) var(--ease-out); }
@media (max-width: 899px) { .menue nav { grid-column: 1 / -1; } .menue-neben { grid-column: 1 / -1; margin-top: 40px; } .menue-vorschau { display: none; } }
@media (hover: none) { .menue-vorschau { display: none; } }

/* ---------- Pegellatte: misst die Tiefe (1 px Scroll = 1 mm) ---------- */
.latte { opacity: 0; visibility: hidden; position: fixed; z-index: 40; right: 4px; top: 50%; height: 38vh; width: 14px; transform: translateY(-50%); color: var(--weiss); pointer-events: none; transition: color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui); }
.latte.an { opacity: 1; visibility: visible; transition-delay: 0s; }
html[data-kopf="hell"] .latte { color: var(--nacht); }
html[data-kopf="hell"] .latte-stand { background: var(--hell); }
.latte-skala { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.latte-skala i { display: block; width: 5px; height: 1px; background: currentColor; opacity: .55; }
.latte-skala i.gross { width: 10px; opacity: 1; }
.latte::after { content: ""; position: absolute; right: 0; top: calc(var(--tiefe, 0) * 100%); width: 14px; height: 3px; margin-top: -1px; background: var(--signal); }
.latte-stand { display: none; }
@media (min-width: 1380px) {
  .latte { width: 30px; }
  .latte-skala i { width: 8px; } .latte-skala i.gross { width: 16px; }
  .latte::after { width: 22px; }
  /* Stand senkrecht links neben der Skala: bleibt im Seitenrand (--rand ≥ 36 px), verdeckt keine Spalte */
  .latte-stand { display: block; position: absolute; right: 18px; top: calc(var(--tiefe, 0) * 100%); transform: translateY(6px); writing-mode: vertical-rl; white-space: nowrap; font-size: .6875rem; line-height: 1; padding: 3px 1px; background: var(--nacht); }
}
@media (max-width: 899px), (hover: none) { .latte { display: none; } }

/* ---------- Seitenwechsel (vt-cross-document-mpa + clip-path-reveal-seite + seitenname-typo-uebergang) ---------- */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: var(--dur-seite); }
::view-transition-group(kopf) { animation: none; }
::view-transition-old(kopf) { animation: none; display: none; }
::view-transition-new(kopf) { animation: none; }

/* Band: die neue Seite steigt wie Wasser von unten, das gelbe Band mit dem Seitennamen reitet auf der Kante */
.pegelband { display: none; }
html.vt-band .pegelband {
  display: flex; position: fixed; z-index: 100; left: 0; right: 0; top: 0; height: 30vh;
  align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 var(--rand) 2.4vh;
  background: var(--signal); color: var(--auf-signal); view-transition-name: pegelband; pointer-events: none;
}
.pb-name { text-transform: uppercase; font-weight: 800; font-stretch: 75%; font-size: 21vh; line-height: .76; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 80vw; }
.pb-meta { padding-bottom: .5vh; }
html:active-view-transition-type(hoch)::view-transition-new(root) { animation: vt-neu-hoch var(--dur-seite) var(--ease-out) both; }
html:active-view-transition-type(hoch)::view-transition-old(root) { animation: vt-alt-hoch var(--dur-seite) var(--ease-out) both; }
html:active-view-transition-type(hoch)::view-transition-new(pegelband) { animation: vt-band-hoch var(--dur-seite) var(--ease-out) both; }
html:active-view-transition-type(runter)::view-transition-new(root) { animation: vt-neu-runter var(--dur-seite) var(--ease-out) both; }
html:active-view-transition-type(runter)::view-transition-old(root) { animation: vt-alt-runter var(--dur-seite) var(--ease-out) both; }
html:active-view-transition-type(runter)::view-transition-new(pegelband) { animation: vt-band-runter var(--dur-seite) var(--ease-out) both; }
::view-transition-old(pegelband) { display: none; }
::view-transition-group(pegelband) { animation: none; }
@keyframes vt-neu-hoch { from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes vt-alt-hoch { to { transform: translateY(-16vh); filter: brightness(.4); } }
@keyframes vt-band-hoch { from { transform: translateY(100vh); } to { transform: translateY(-100%); } }
@keyframes vt-neu-runter { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes vt-alt-runter { to { transform: translateY(16vh); filter: brightness(.4); } }
@keyframes vt-band-runter { from { transform: translateY(-100%); } to { transform: translateY(100vh); } }

/* Werk: Bild aus Karte, Index oder „Nächstes Projekt“ morpht ins Schlüsselbild (vt-shared-element-morph) */
html:active-view-transition-type(werk)::view-transition-old(root) { animation: vt-aus calc(var(--dur-seite) * .45) var(--ease-in) both; }
html:active-view-transition-type(werk)::view-transition-new(root) { animation: vt-ein calc(var(--dur-seite) * .7) var(--ease-out) calc(var(--dur-seite) * .3) both; }
::view-transition-group(werkbild) { animation-duration: var(--dur-seite); animation-timing-function: var(--ease-out); overflow: clip; }
::view-transition-old(werkbild), ::view-transition-new(werkbild) { height: 100%; width: 100%; object-fit: cover; animation-duration: var(--dur-seite); animation-timing-function: var(--ease-out); }
@keyframes vt-aus { to { opacity: 0; } }
@keyframes vt-ein { from { opacity: 0; } }

/* Ruhig: kurze Überblendung, kein Band, kein Morph */
html[data-bewegung="ruhig"]::view-transition-group(*) { animation-duration: 200ms !important; }
html[data-bewegung="ruhig"]::view-transition-old(root) { animation: vt-aus 200ms linear both !important; }
html[data-bewegung="ruhig"]::view-transition-new(root) { animation: vt-ein 200ms linear both !important; }

/* ---------- Startseite: Hero ---------- */
.held { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--spalte); padding: calc(var(--kopf) + 8px) var(--rand) 0; overflow: clip; }
.held-labels { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); padding-top: 18px; border-top: 1px solid var(--linie-hell); }
.held-labels .hl:nth-child(1) { grid-column: 1 / 5; } .held-labels .hl:nth-child(2) { grid-column: 5 / 8; } .held-labels .hl:nth-child(3) { grid-column: 8 / 10; } .held-labels .hl:nth-child(4) { grid-column: 10 / 13; text-align: right; }
.held-satz { grid-column: 8 / 13; align-self: end; font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; max-width: 22ch; padding-bottom: clamp(20px, 3vw, 44px); }
.held-marke { grid-column: 1 / -1; position: relative; margin: 0 calc(var(--rand) * -.2); line-height: 1; }
.hm-zug { display: flex; justify-content: space-between; font-weight: 800; font-stretch: 75%; font-size: 36vw; line-height: .72; letter-spacing: -0.03em; padding-top: .04em; color: var(--nacht); }
.hm-b { display: block; }
.hm-wasser { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--signal); transform-origin: left; }
@media (max-width: 760px) {
  .held { min-height: 82svh; }
  .held-labels { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .held-labels .hl:nth-child(n) { grid-column: auto; text-align: left; }
  .held-satz { grid-column: 1 / -1; }
}
/* Intro voll (erster Aufruf im Tab): Strich zieht ein, steigt, die Buchstaben füllen sich von unten */
html.mit-intro[data-bewegung="voll"] .hm-wasser { animation: wasser-ein 420ms var(--ease-out) both, wasser-steigt var(--dur-4) var(--ease-out) 240ms both; }
html.mit-intro[data-bewegung="voll"] .hm-zug { animation: fuellen var(--dur-4) var(--ease-out) 240ms both; }
html.mit-intro[data-bewegung="voll"] .hl { animation: auftauchen var(--dur-2) var(--ease-out) both; animation-delay: calc(900ms + var(--i) * 60ms); }
html.mit-intro[data-bewegung="voll"] .held-satz .zi { animation: steigen var(--dur-2) var(--ease-out) both; animation-delay: calc(1100ms + var(--i) * var(--stagger-line)); }
html.mit-intro[data-bewegung="voll"] .kopf { animation: auftauchen var(--dur-2) var(--ease-out) 1000ms both; }
@keyframes wasser-ein { from { transform: scaleX(0); } }
@keyframes wasser-steigt { from { bottom: 0; } to { bottom: calc(100% - .06em); } }
@keyframes fuellen { from { clip-path: inset(100% -2% -2% -2%); } to { clip-path: inset(-6% -2% -2% -2%); } }
@keyframes steigen { from { transform: translateY(105%); } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } }
/* Kurz (wiederholt): nur die Buchstaben steigen */
html.kurz-intro[data-bewegung="voll"] .hm-b { animation: steigen var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i) * var(--stagger-letter)); }
html.kurz-intro[data-bewegung="voll"] .hm-zug { overflow: clip; }
.hm-wasser { bottom: calc(100% - .06em); }
.held-skala { display: none; }
.held-skala i { display: block; width: 10px; height: 1px; background: var(--nacht); opacity: .45; }
.held-skala i.gross { width: 22px; opacity: 1; }
.held-skala i[data-m]::after { content: attr(data-m); display: block; margin: 4px 0 0 28px; width: max-content; font-family: var(--mono); font-size: .6875rem; line-height: 1; transform: translateY(-50%); color: var(--meta-hell); }
/* Hochkant: Die Wortmarke steht senkrecht an der linken Kante wie eine Pegellatte und füllt die Höhe.
   Rechts Labels, Skala und Haltungssatz; der gelbe Strich steigt über die ganze Breite. */
@media (max-width: 760px) and (orientation: portrait) {
  .held { min-height: 100svh; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: clamp(14px, 4vw, 22px); padding-bottom: 20px; }
  .held-labels { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; row-gap: 4px; border-top: 0; padding-top: 6px; }
  .held-satz { grid-column: 2; grid-row: 3; font-size: clamp(1.0625rem, 4.6vw, 1.5rem); padding-bottom: 4px; max-width: none; }
  .held-skala { display: flex; grid-column: 2; grid-row: 2; flex-direction: column; justify-content: space-between; align-self: stretch; margin: 22px 0; }
  .held-marke { grid-column: 1; grid-row: 1 / -1; position: static; margin: 0; height: calc(100svh - var(--kopf) - 28px); }
  .hm-zug { writing-mode: vertical-rl; transform: rotate(180deg); height: 100%; width: auto; padding-top: 0; line-height: .74; justify-content: space-between; }
  .hm-wasser { left: 0; right: 0; height: 3px; bottom: calc(100% - var(--kopf) - 7px); }
  html.mit-intro[data-bewegung="voll"] .hm-zug { animation-name: fuellen-hoch; }
  html.mit-intro[data-bewegung="voll"] .hm-wasser { animation: wasser-ein 420ms var(--ease-out) both, wasser-steigt-hoch var(--dur-4) var(--ease-out) 240ms both; }
  html.kurz-intro[data-bewegung="voll"] .hm-b { animation: none; }
  html.kurz-intro[data-bewegung="voll"] .hm-zug { animation: fuellen-hoch var(--dur-3) var(--ease-out) both; }
}
/* rotiert um 180°: unten im Element ist oben auf dem Schirm, also von der anderen Seite füllen */
@keyframes fuellen-hoch { from { clip-path: inset(-2% -6% 100% -6%); } to { clip-path: inset(-2% -6% -2% -6%); } }
@keyframes wasser-steigt-hoch { from { bottom: 20px; } to { bottom: calc(100% - var(--kopf) - 7px); } }

/* ---------- Showreel: medien-expansion-scroll ---------- */
.reel { position: relative; height: 300vh; }
.reel-buehne { position: sticky; top: 0; height: 100svh; overflow: clip; }
.reel-rahmen { position: absolute; inset: 0; clip-path: inset(var(--a, 30%) var(--b, 33%) round var(--r, 16px)); }
.reel-video { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--s, 1.2)); }
.reel-wort { position: absolute; top: 50%; font-weight: 800; font-stretch: 75%; font-size: clamp(3.5rem, 12vw, 13rem); line-height: .8; letter-spacing: -0.03em; transform: translateY(-50%); white-space: nowrap; z-index: 1; }
.reel-l { right: calc(50% + var(--wl, 19vw)); }
.reel-r { left: calc(50% + var(--wl, 19vw)); }
.reel-leiste { position: absolute; left: var(--rand); right: var(--rand); bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; z-index: 2; }
@media (max-width: 520px) { .reel-kapitel { flex-basis: 100%; } }
.reel-kapitel { margin-right: auto; text-shadow: 0 1px 12px rgb(0 0 0 / .7); }
.reel-leiste .knopf-klein { background: rgb(11 11 11 / .55); }
@media (max-width: 640px) { .reel-wort { display: none; } }
html[data-bewegung="ruhig"] .reel { height: auto; }
html[data-bewegung="ruhig"] .reel-buehne { position: relative; height: auto; aspect-ratio: 16 / 9; }
html[data-bewegung="ruhig"] .reel-rahmen { clip-path: none; }
html[data-bewegung="ruhig"] .reel-video { transform: none; }
html[data-bewegung="ruhig"] .reel-wort { display: none; }
html[data-bewegung="ruhig"] .reel-leiste { opacity: 1; }

/* ---------- Leistungen: section-overlap-uebergang ---------- */
.feld { position: sticky; top: 0; height: 100svh; overflow: clip; }
.feld-weiss { background: var(--weiss); color: var(--nacht); }
.feld-innen {
  height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: var(--spalte);
  padding: calc(var(--kopf) + 20px) var(--rand) 0;
  transform: scale(calc(1 - var(--zurueck, 0) * .08)); filter: brightness(calc(1 - var(--zurueck, 0) * .55)); transform-origin: 50% 100%;
  border-radius: calc(var(--zurueck, 0) * 24px);
}
.feld-satz { grid-column: 1 / 6; grid-row: 1; font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; max-width: 24ch; }
.feld-bild { grid-column: 7 / 13; grid-row: 1 / 3; position: relative; height: 0; min-height: calc(100% - 18px); overflow: visible; border-radius: 0; }
.feld-bild img { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-klein, 4px); }
.feld-web .feld-bild img { aspect-ratio: 3 / 2; }
@media (hover: hover) { a.feld-bild:hover img { transform: scale(1.02); } }
.feld-weiter { grid-column: 1 / 6; grid-row: 2; align-self: end; padding-bottom: 18px; }
.feld-wort { grid-column: 1 / -1; grid-row: 3; font-weight: 800; font-stretch: 75%; font-size: 26vw; line-height: .74; letter-spacing: -0.035em; margin: 0 calc(var(--rand) * -.2); text-transform: uppercase; white-space: nowrap; }
@media (max-width: 760px) {
  .feld-innen { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .feld-satz { grid-column: 1 / -1; }
  .feld-bild { grid-column: 1 / -1; grid-row: 2; margin-top: 18px; min-height: 100%; }
  .feld-bild img { left: 0; right: auto; }
  .feld-weiter { grid-column: 1 / -1; grid-row: 3; padding-top: 14px; }
  .feld-wort { grid-row: 4; }
}

/* ---------- Ausgewählte Arbeiten: horizontal-scroll-section ---------- */
.streifen { position: relative; }
.streifen-buehne { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 48px); overflow: clip; padding: var(--kopf) 0 24px; }
.streifen-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 20px; padding: 0 var(--rand); }
.streifen-band { display: flex; gap: var(--spalte); padding: 0 var(--rand); will-change: transform; transform: translateX(calc(var(--zug, 0) * -1px)); }
.streifen-karte { flex: none; width: clamp(260px, 29vw, 460px); }
.sk-link { display: block; text-decoration: none; }
.sk-bild { aspect-ratio: 4 / 5; }
.sk-bild img { width: 100%; height: 100%; object-fit: cover; }
.sk-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--linie-dunkel); }
.sk-titel { font-size: clamp(1.375rem, 1rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; }
.sk-was { display: block; margin-top: 6px; color: var(--meta-dunkel); }
@media (max-width: 899px), (hover: none) {
  .streifen { height: auto !important; }
  .streifen-buehne { position: relative; height: auto; padding: var(--abschnitt) 0; }
  .streifen-band { overflow-x: auto; scroll-snap-type: x mandatory; transform: none; scroll-padding: 0 var(--rand); scrollbar-width: none; }
  .streifen-karte { scroll-snap-align: start; width: min(78vw, 420px); }
}
html[data-bewegung="ruhig"] .streifen { height: auto !important; }
html[data-bewegung="ruhig"] .streifen-buehne { position: relative; height: auto; padding: var(--abschnitt) 0; }
html[data-bewegung="ruhig"] .streifen-band { overflow-x: auto; transform: none; scroll-snap-type: x mandatory; }

/* ---------- Footer: footer-cta-riesen-wortmarke ---------- */
main { position: relative; z-index: 1; background: var(--nacht); }
body.vorhang .fuss { position: sticky; bottom: 0; z-index: 0; }
.fuss { padding: var(--abschnitt) var(--rand) 0; overflow: clip; }
.fuss:not(:has(.fuss-cta)) { padding-top: clamp(28px, 4vw, 56px); }
.fuss-cta { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); padding-bottom: clamp(48px, 8vw, 120px); }
.fuss-satz { grid-column: 1 / -1; font-weight: 800; font-stretch: 75%; font-size: var(--h-riesig); line-height: .86; letter-spacing: -0.03em; text-transform: uppercase; }
.fuss-wege { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: clamp(28px, 4vw, 56px); }
.mail-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mail-gross { font-size: clamp(1.25rem, .9rem + 1.4vw, 2.25rem); font-weight: 500; letter-spacing: -0.015em; }
.fuss-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px var(--spalte); padding: 28px 0; border-top: 1px solid var(--linie-dunkel); font-size: 1rem; }
.fuss-titel { color: var(--meta-dunkel); margin-bottom: 8px; }
.fuss-recht { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; font-size: .875rem; }
.fuss-recht nav { display: flex; gap: 20px; }
.riesen { overflow: clip; height: calc(var(--rg, 36vw) * .72); margin: 0 calc(var(--rand) * -.2); }
.riesen-zug { display: flex; justify-content: space-between; font-weight: 800; font-stretch: 75%; font-size: 36vw; line-height: .9; letter-spacing: -0.03em; transform: translateY(-.02em); }
.rb { display: block; }
html.js .riesen .rb { transform: translateY(100%); transition: transform var(--dur-3) var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
html.js .riesen.sichtbar .rb { transform: none; }
@media (max-width: 760px) { .fuss-raster { grid-template-columns: 1fr 1fr; } .fuss-recht { flex-direction: column; } }

.fundus-hinweis { position: relative; z-index: 2; font: 14px/1.5 system-ui, sans-serif; background: #111; color: #f5f5f5; padding: 14px 20px; text-align: center; }
.fundus-hinweis a { color: #9fe3ec; }

/* ---------- Seitenköpfe (Arbeiten, Studio) ---------- */
.seiten-held { position: relative; min-height: 72svh; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: calc(var(--kopf) + 40px) var(--rand) clamp(28px, 4vw, 56px); }
.seiten-titel { font-weight: 800; font-stretch: 75%; font-size: clamp(4rem, 15vw, 16rem); line-height: .8; letter-spacing: -0.035em; text-transform: uppercase; }
.seiten-zahl { padding-bottom: .6em; white-space: nowrap; }
@media (max-width: 760px) { .seiten-held { flex-direction: column; align-items: flex-start; min-height: 56svh; } }

/* ---------- Arbeiten: projektindex-hover-vorschau ---------- */
.index { position: relative; padding: 0 var(--rand) var(--abschnitt); }
.filter { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 0 0 26px; }
.filter-knopf { position: relative; min-height: 44px; padding: 0; background: none; border: 0; font-size: 1.125rem; font-weight: 500; color: var(--meta-dunkel); transition: color var(--dur-hover) var(--ease-out); }
.filter-knopf sup { margin-left: 4px; font-size: .625rem; vertical-align: super; }
.filter-knopf[aria-pressed="true"] { color: var(--weiss); }
.filter-knopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) var(--ease-out); }
.filter-knopf[aria-pressed="true"]::after { transform: none; }
@media (hover: hover) { .filter-knopf:hover { color: var(--weiss); } }
.index-zeile { border-top: 1px solid var(--linie-dunkel); }
.index-zeile:last-child { border-bottom: 1px solid var(--linie-dunkel); }
.index-zeile[hidden] { display: none; }
.iz-link { display: grid; grid-template-columns: 1fr minmax(0, 18rem) 4rem; align-items: center; gap: var(--spalte); padding: clamp(12px, 1.4vw, 20px) 0; text-decoration: none; transition: opacity var(--dur-2) var(--ease-out); }
.iz-titel { font-size: clamp(2rem, 1rem + 4vw, 5.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: .95; transition: transform var(--dur-2) var(--ease-out); }
.iz-was { color: var(--meta-dunkel); }
.iz-jahr { text-align: right; }
.iz-daumen { display: none; }
@media (hover: hover) and (pointer: fine) {
  .index-liste:hover .iz-link { opacity: .3; }
  .index-liste .iz-link:hover, .index-liste .iz-link:focus-visible { opacity: 1; }
  .iz-link:hover .iz-titel, .iz-link:focus-visible .iz-titel { transform: translateX(.18em); }
}
.index-vorschau { position: fixed; left: 0; top: 0; z-index: 30; width: 256px; aspect-ratio: 4 / 5; pointer-events: none; transform: translate(-50%, -50%) translate(var(--mx, -999px), var(--my, -999px)) rotate(var(--rot, 0deg)) scale(var(--sk, 0)); transition: scale var(--dur-hover) var(--ease-out); }
.iv-innen { position: absolute; inset: 0; overflow: clip; border-radius: var(--radius-klein, 4px); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .6); }
.iv-innen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.iv-innen img.an { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .index-vorschau { display: none; }
  .iz-link { grid-template-columns: 64px 1fr auto; grid-template-rows: auto auto; }
  .iz-daumen { display: block; grid-row: 1 / 3; width: 64px; aspect-ratio: 4 / 5; overflow: clip; border-radius: var(--radius-klein, 4px); }
  .iz-daumen img { width: 100%; height: 100%; object-fit: cover; }
  .iz-titel { font-size: clamp(1.5rem, 1rem + 3vw, 2.5rem); }
  .iz-was { grid-column: 2 / 4; }
  .iz-jahr { grid-row: 1; grid-column: 3; }
}
@media (max-width: 640px) and (hover: hover) { .iz-link { grid-template-columns: 1fr auto; } .iz-was { display: none; } }

/* ---------- Fallstudie: case-study-geruest ---------- */
.fall-held { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); padding: calc(var(--kopf) + 28px) var(--rand) clamp(28px, 4vw, 56px); }
.fall-zurueck { grid-column: 1 / -1; margin-bottom: clamp(40px, 9vh, 120px); }
.fall-titel { grid-column: 1 / -1; font-weight: 800; font-stretch: 75%; font-size: clamp(3.5rem, 11vw, 12.5rem); line-height: .82; letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance; }
.fall-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px var(--spalte); margin-top: clamp(36px, 6vw, 80px); }
.cm { border-top: 1px solid var(--linie-hell); padding-top: 10px; font-size: 1rem; line-height: 1.35; }
.cm dt { color: var(--meta-hell); margin-bottom: 6px; }
html.js .cm { animation: auftauchen var(--dur-2) var(--ease-out) both; animation-delay: calc(300ms + var(--i) * 60ms); }
html[data-bewegung="ruhig"] .cm { animation: none; }
@media (max-width: 900px) { .fall-meta { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .fall-meta { grid-template-columns: repeat(2, 1fr); } }
.fall-bild { overflow: clip; }
.fall-bild img { width: 100%; height: auto; max-height: 100svh; object-fit: cover; }
.fall-lead { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); padding: var(--abschnitt) var(--rand); }
.lead-satz { grid-column: 1 / 11; font-size: var(--h2); font-weight: 600; letter-spacing: -0.025em; line-height: .98; text-wrap: balance; }
.lead-spalten { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--spalte); margin-top: clamp(40px, 6vw, 88px); }
.lead-spalten dt { color: var(--meta-hell); margin-bottom: 8px; }
.lead-spalten dd { max-width: 42ch; }
@media (max-width: 760px) { .lead-satz, .lead-spalten { grid-column: 1 / -1; } .lead-spalten { grid-template-columns: 1fr; } }
.modul { padding: 0 var(--rand) var(--abschnitt); }
.modul-paar { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); align-items: start; }
.mp-a { grid-column: 1 / 7; } .mp-b { grid-column: 8 / 13; margin-top: clamp(80px, 18vw, 280px); }
.modul figure { overflow: clip; border-radius: var(--radius-klein, 4px); }
.modul img, .modul video { width: 100%; height: auto; }
.modul-voll { padding: 0 0 var(--abschnitt); }
.modul-voll figure { border-radius: 0; position: relative; }
.modul-voll figcaption { position: absolute; left: var(--rand); bottom: 20px; color: var(--weiss); text-shadow: 0 1px 10px rgb(0 0 0 / .5); }
.modul-voll { background: var(--nacht); }
.modul-rand { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); align-items: end; }
.mr-bild { grid-column: 7 / 13; grid-row: 1; }
.mr-satz { grid-column: 1 / 6; grid-row: 1; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; max-width: 20ch; }
.modul-clip { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); align-items: center; padding-top: var(--abschnitt); }
.mc-rahmen { grid-column: 3 / 8; position: relative; }
.mc-pause { position: absolute; right: 12px; bottom: 12px; background: rgb(11 11 11 / .6); color: var(--weiss); }
.mc-satz { grid-column: 9 / 13; font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; }
@media (max-width: 760px) { .mp-a, .mp-b, .mr-bild, .mr-satz, .mc-rahmen, .mc-satz { grid-column: 1 / -1; grid-row: auto; } .mp-b { margin-top: 18px; } .mr-satz, .mc-satz { margin-top: 22px; } }
.modul-farben { padding-top: 0; }
.farben { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spalte); }
.farben li { display: grid; gap: 6px; }
.fb-feld { display: block; aspect-ratio: 3 / 4; background: var(--f); border-radius: var(--radius-klein, 4px); box-shadow: inset 0 0 0 1px var(--linie-hell); transform-origin: bottom; }
html.js .farben .fb-feld { transform: scaleY(0); transition: transform var(--dur-3) var(--ease-out); }
html.js .farben.sichtbar .fb-feld { transform: none; }
.farben li:nth-child(2) .fb-feld { transition-delay: 80ms; } .farben li:nth-child(3) .fb-feld { transition-delay: 160ms; }
@media (max-width: 640px) { .fb-feld { aspect-ratio: 1 / 2; } }
.fall-ergebnis { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); padding: var(--abschnitt) var(--rand); }
.ergebnis-zitat, .ergebnis-satz { grid-column: 1 / 12; }
.ergebnis-zitat p, .ergebnis-satz { font-weight: 800; font-stretch: 75%; font-size: clamp(2.5rem, 1rem + 6vw, 7.5rem); line-height: .88; letter-spacing: -0.03em; text-transform: uppercase; }
.ergebnis-zitat footer { margin-top: 22px; color: var(--meta-dunkel); }
.credits { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px var(--spalte); margin-top: clamp(48px, 8vw, 120px); font-size: 1rem; }
.credits dt { color: var(--meta-dunkel); margin-bottom: 6px; }
.fall-cta { grid-column: 9 / 13; align-self: end; justify-self: end; }
@media (max-width: 760px) { .credits { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } .fall-cta { grid-column: 1 / -1; justify-self: start; margin-top: 32px; } }

/* scroll-naechstes-projekt */
.naechstes { position: relative; height: 200svh; }
.nx-buehne { position: sticky; top: 0; height: 100svh; overflow: clip; }
.nx-fenster { position: absolute; inset: 0; clip-path: inset(calc(var(--ia, 20%) * (1 - var(--p, 0))) calc(var(--ib, 40%) * (1 - var(--p, 0))) round calc(4px * (1 - var(--p, 0)))); }
.nx-fenster img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.3 - .3 * var(--p, 0))); }
/* Abdunklung unten, damit Titel, Hinweis und Links auf jedem Bild lesbar bleiben (4,5 : 1 auch auf hellen Motiven) */
.nx-fenster::after { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgb(11 11 11 / .86) 0%, rgb(11 11 11 / .62) 45%, rgb(11 11 11 / 0) 100%); opacity: clamp(0, calc((var(--p, 0) - .4) / .4), 1); pointer-events: none; }
html[data-bewegung="ruhig"] .nx-fenster::after { opacity: 1; }
.nx-label { position: absolute; left: var(--rand); top: calc(var(--kopf) + 12px); opacity: max(0, calc(1 - 1.6 * var(--p, 0))); }
.nx-link { position: absolute; left: var(--rand); right: var(--rand); bottom: 72px; text-decoration: none; display: grid; gap: 10px; opacity: clamp(.35, calc((var(--p, 0) - .55) / .45), 1); text-shadow: 0 2px 24px rgb(0 0 0 / .45); }
.nx-titel { font-weight: 800; font-stretch: 75%; font-size: clamp(3rem, 10vw, 11rem); line-height: .82; letter-spacing: -0.035em; text-transform: uppercase; }
.nx-satz { font-size: 1.125rem; max-width: 40ch; }
.nx-balken { position: absolute; left: 50%; bottom: 28px; width: clamp(90px, 14vw, 180px); height: 1px; background: rgb(255 255 255 / .3); transform: translateX(-50%); }
.nx-balken i { position: absolute; inset: 0; background: var(--signal); transform: scaleX(var(--zug, 0)); transform-origin: left; }
.nx-hinweis { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); white-space: nowrap; font-size: .75rem; opacity: 0; transition: opacity var(--dur-ui) var(--ease-out); }
.naechstes.am-ende .nx-hinweis { opacity: 1; }
.naechstes.am-ende .nx-balken { background: rgb(255 255 255 / .55); }
.nx-recht { position: absolute; right: var(--rand); bottom: 18px; display: flex; gap: 16px; font-size: .875rem; }
@media (max-width: 640px) { .nx-fenster { --ia: 22%; --ib: 16%; } .nx-recht { left: var(--rand); right: auto; flex-wrap: wrap; } .nx-balken { bottom: 56px; } .nx-hinweis { bottom: 66px; } .nx-link { bottom: 112px; } }
html[data-bewegung="ruhig"] .naechstes { height: auto; }
html[data-bewegung="ruhig"] .nx-buehne { position: relative; height: 90svh; }
html[data-bewegung="ruhig"] .nx-fenster { --p: 1; }
html[data-bewegung="ruhig"] .nx-link, html[data-bewegung="ruhig"] .nx-label { opacity: 1; }
html[data-bewegung="ruhig"] .nx-balken, html[data-bewegung="ruhig"] .nx-hinweis { display: none; }

/* ---------- Studio ---------- */
.manifest { padding: var(--abschnitt) var(--rand); min-height: 130svh; display: flex; align-items: center; }
.manifest-text { font-size: clamp(2rem, 1rem + 4.2vw, 5.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; max-width: 22ch; text-wrap: balance; }
.wh { color: var(--nacht); opacity: var(--an, .16); transition: opacity var(--dur-ui) linear; }
html[data-bewegung="ruhig"] .wh, html:not(.js) .wh { opacity: 1; }
.ablauf { padding: var(--abschnitt) var(--rand); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); }
.ablauf .h2 { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--kopf) + 20px); }
.ablauf-spur { grid-column: 7 / 13; position: relative; padding-left: 48px; }
.ablauf-linie { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--linie-dunkel); }
.ablauf-linie i { position: absolute; inset: 0; background: var(--signal); transform: scaleY(var(--fuell, 0)); transform-origin: top; }
.etappe { padding: 0 0 clamp(56px, 12vh, 140px); position: relative; }
.etappe::before { content: ""; position: absolute; left: -55px; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: var(--nacht); border: 2px solid var(--linie-dunkel); transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
.etappe.an::before { background: var(--signal); border-color: var(--signal); }
.et-tiefe { color: var(--meta-dunkel); }
.etappe h3 { font-size: clamp(2rem, 1rem + 3vw, 4rem); font-weight: 800; font-stretch: 75%; letter-spacing: -0.02em; line-height: .9; margin: 8px 0 12px; text-transform: uppercase; }
.etappe p { max-width: 38ch; }
@media (max-width: 760px) { .ablauf .h2 { grid-column: 1 / -1; position: static; margin-bottom: 48px; } .ablauf-spur { grid-column: 1 / -1; } }
.leute { padding: var(--abschnitt) var(--rand) 0; }
.leute-liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--spalte); margin-top: clamp(36px, 5vw, 72px); }
.leute-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linie-hell); }
.lt-name { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.lt-rolle { color: var(--meta-hell); text-align: right; }
.leute-jobs { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 40px; font-size: 1.25rem; }
@media (max-width: 760px) { .leute-liste { grid-template-columns: 1fr; } }
.kunden { padding: var(--abschnitt) var(--rand); }
.kunden-titel { color: var(--meta-hell); margin-bottom: 28px; }
.kunden-raster { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie-hell); border-left: 1px solid var(--linie-hell); }
.kunden-raster li { display: grid; place-items: center; aspect-ratio: 2 / 1; border-right: 1px solid var(--linie-hell); border-bottom: 1px solid var(--linie-hell); color: var(--nacht); }
.kunden-raster .logo { width: 56%; height: auto; max-height: 42%; }
@media (max-width: 760px) { .kunden-raster { grid-template-columns: repeat(2, 1fr); } }
.faq { padding: var(--abschnitt) var(--rand); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); }
.faq .h2 { grid-column: 1 / 6; }
.faq-liste { grid-column: 7 / 13; }
@media (max-width: 760px) { .faq .h2, .faq-liste { grid-column: 1 / -1; } .faq-liste { margin-top: 36px; } }
.frage { border-top: 1px solid var(--linie-dunkel); }
.frage:last-child { border-bottom: 1px solid var(--linie-dunkel); }
.frage summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; cursor: pointer; list-style: none; font-size: 1.25rem; font-weight: 500; }
.frage summary::-webkit-details-marker { display: none; }
.frage-zeichen { width: 22px; height: 22px; position: relative; flex: none; }
.frage-zeichen::before, .frage-zeichen::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: currentColor; transition: transform var(--ui-dauer-l, 450ms) var(--ease-out); }
.frage-zeichen::after { transform: rotate(90deg); }
.frage[open] .frage-zeichen::after { transform: rotate(0); }
.frage[open] .frage-zeichen::before { background: var(--signal); }
.frage::details-content { block-size: 0; overflow: clip; transition: block-size calc(var(--dur-ui) * var(--zu)) var(--ease-in), content-visibility calc(var(--dur-ui) * var(--zu)) allow-discrete; }
.frage[open]::details-content { block-size: auto; transition: block-size var(--dur-1) var(--ease-out), content-visibility var(--dur-1) allow-discrete; }
.frage-antwort p { padding: 0 0 22px; max-width: 52ch; color: #d6d6d6; }

/* ---------- Kontakt ---------- */
.kontakt-held { padding: calc(var(--kopf) + 40px) var(--rand) clamp(40px, 6vw, 96px); }
.kontakt-titel { font-weight: 800; font-stretch: 75%; font-size: clamp(4rem, 16.5vw, 18rem); line-height: .8; letter-spacing: -0.035em; text-transform: uppercase; }
.anfrage { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); row-gap: 48px; padding: 0 var(--rand) var(--abschnitt); }
.anfrage-wege { grid-column: 1 / 6; display: grid; align-content: start; gap: 22px; }
.anfrage-satz { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); line-height: 1.15; max-width: 22ch; font-weight: 500; }
.formular { grid-column: 7 / 13; background: var(--tief); border-radius: var(--radius-gross, 12px); padding: clamp(22px, 3vw, 40px); display: grid; gap: 22px; }
@media (max-width: 899px) { .anfrage-wege, .formular { grid-column: 1 / -1; } }
.feld-gruppe { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.feld-gruppe label, .feld-gruppe legend { font-size: .9375rem; font-weight: 500; padding: 0; }
.feld-gruppe input, .feld-gruppe textarea { width: 100%; min-height: 48px; padding: 10px 0; background: transparent; border: 0; border-bottom: 1px solid #5a5a5a; border-radius: 0; color: var(--weiss); font-size: 1.125rem; transition: border-color var(--dur-hover) var(--ease-out); }
.feld-gruppe textarea { resize: vertical; min-height: 110px; }
.feld-gruppe input:focus-visible, .feld-gruppe textarea:focus-visible { box-shadow: none; outline: none; border-bottom: 2px solid var(--signal); }
.feld-gruppe.falsch input, .feld-gruppe.falsch textarea { border-bottom-color: var(--farbe-fehler, #FF8A80); }
.fehler { color: var(--farbe-fehler, #FF8A80); font-size: .9375rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--knopf-radius); border: 1px solid #5a5a5a; font-size: .9375rem; transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out); }
.chip input:checked + span { background: var(--weiss); color: var(--nacht); border-color: var(--weiss); }
.chip input:focus-visible + span { box-shadow: 0 0 0 2px var(--fokus-innen), 0 0 0 5px var(--fokus); }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.knopf-senden { padding: 0 26px; background: var(--signal); color: var(--auf-signal); gap: 10px; }
.knopf-senden:active { transform: scale(.97); }
.ks-kreisel { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: none; }
.knopf-senden[data-zustand="laedt"] .ks-kreisel { display: block; animation: drehen 800ms linear infinite; }
.knopf-senden[data-zustand="ok"] { background: var(--weiss); }
@keyframes drehen { to { transform: rotate(1turn); } }
.formular-status:empty { display: none; }
.anfahrt { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--spalte); row-gap: 36px; padding: var(--abschnitt) var(--rand); align-items: end; }
.anfahrt-text { grid-column: 1 / 5; display: grid; gap: 16px; align-content: end; }
.karte { grid-column: 6 / 13; position: relative; border-radius: var(--radius-gross, 12px); overflow: clip; aspect-ratio: 4 / 3; background: #141414; }
.karte svg, .karte iframe { width: 100%; height: 100%; border: 0; }
.karte-leiste { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: var(--radius-gross, 12px); background: rgb(11 11 11 / .88); color: var(--weiss); font-size: .875rem; }
@media (max-width: 899px) { .anfahrt-text, .karte { grid-column: 1 / -1; } .karte-leiste { position: static; border-radius: 0; } .karte { aspect-ratio: auto; } }

/* ---------- Recht und 404 ---------- */
.recht { padding: calc(var(--kopf) + 48px) var(--rand) var(--abschnitt); min-height: 80svh; }
.recht-titel { font-weight: 800; font-stretch: 75%; font-size: clamp(3.5rem, 12vw, 12rem); line-height: .82; letter-spacing: -0.035em; text-transform: uppercase; margin-bottom: clamp(36px, 6vw, 80px); }
.recht-text { max-width: 65ch; display: grid; gap: 14px; }
.recht-text h2 { font-size: 1.375rem; font-weight: 600; margin-top: 18px; letter-spacing: -0.01em; }
.recht-text ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 6px; }
.platzhalter { border-left: 3px solid var(--signal); padding: 10px 16px; background: rgb(11 11 11 / .05); }
.recht-lead { font-size: 1.5rem; }
.fehler-wege { list-style: none !important; padding: 0 !important; font-size: 1.5rem; }

/* ---------- Kino (eigener-videoplayer) ---------- */
.kino { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--rand); border: 0; background: rgb(8 8 8 / .96); color: var(--weiss); }
.kino[open] { display: grid; place-items: center; }
.kino::backdrop { background: rgb(0 0 0 / .7); }
.player { width: min(100%, calc((100svh - 140px) * 16 / 9)); }
.player video { width: 100%; height: auto; border-radius: var(--radius-klein, 4px); background: #000; }
.player-leiste { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.zeitleiste { flex: 1; accent-color: var(--signal); min-height: 44px; }
.knopf-rund .i-pause { display: none; } .player.spielt .i-play { display: none; } .player.spielt .i-pause { display: block; }
.knopf-rund .i-play, .knopf-rund .i-pause { fill: currentColor; stroke: none; }
.kino-zu { position: fixed; top: 14px; right: var(--rand); }
video::cue { background: rgb(0 0 0 / .75); font-family: var(--font); }

/* ---------- Kontrastmodus (forced-colors) ---------- */
@media (forced-colors: active) {
  .knopf, .knopf-klein, .chip span, .filter-knopf { border: 1px solid ButtonText; }
  .marke-strich, .hm-wasser, .latte::after, .nx-balken i, .ablauf-linie i { background: Highlight; forced-color-adjust: none; }
  .wh { opacity: 1; }
  .pegelband { display: none !important; }
}

/* ---------- Bewegung reduziert: alles steht ---------- */
html[data-bewegung="ruhig"] *, html[data-bewegung="ruhig"] *::before, html[data-bewegung="ruhig"] *::after { animation: none !important; transition: none !important; }
html[data-bewegung="ruhig"] .ks-kreisel { animation: drehen 1600ms linear infinite !important; }
html[data-bewegung="ruhig"] [data-zeilen] .zi, html[data-bewegung="ruhig"] .riesen .rb { transform: none; }
html[data-bewegung="ruhig"] [data-blende] { clip-path: none; }
html[data-bewegung="ruhig"] [data-blende] img, html[data-bewegung="ruhig"] [data-blende] video { transform: none; }
html[data-bewegung="ruhig"] .farben .fb-feld { transform: none; }
html[data-bewegung="ruhig"] .feld-innen { transform: none; filter: none; border-radius: 0; }

/* ---------- Druck ---------- */
@media print {
  .kopf, .latte, .menue, .kino, .reel-leiste, .nx-balken, .karte-leiste, .fundus-hinweis { display: none !important; }
  .reel, .naechstes, .streifen, .feld { height: auto !important; position: static !important; }
  .reel-buehne, .nx-buehne, .streifen-buehne { position: static !important; height: auto !important; }
  [data-zeilen] .zi, .riesen .rb { transform: none !important; }
  [data-blende] { clip-path: none !important; }
}