/* ============================================================
   Sandberg Creation Studio — Core Styles
   Abschnitt 1: Tokens · Base · Navigation · Hero
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Farben */
  --sand: #FFE7B6;
  --sand-soft: #FBF4E6;
  --sand-line: #E8D4A0;
  --ink: #0A0A0A;
  --black: #000000;
  --accent: #FF5A00;
  --white: #FFFFFF;

  /* Semantik */
  --bg: var(--sand);
  --fg: var(--black);

  /* Typo */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", Arial, sans-serif;

  /* Spacing (8px-Grid) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  --maxw: 1480px;
  --gutter: clamp(20px, 5vw, 72px);

  /* Vertikaler Rhythmus — EIN Maß für alle Kapitel-Sektionen:
     Sektionsrand (Farbkante → Kapitel-Label) und Label → Inhalt.
     Bewusst überall identisch, damit jeder Sektionswechsel gleich atmet. */
  --sec-pad: clamp(72px, 12vh, 160px);
  --kicker-gap: clamp(30px, 5vh, 64px);

  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;  /* kein grauer iOS-Tap-Blitz */
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* text-rendering: auto statt optimizeLegibility — Kerning/Ligaturen sind in
     modernen Browsern ohnehin aktiv; optimizeLegibility provoziert beim Scrollen
     Re-Rasterisierung (sichtbares Buchstaben-Flackern bei fetten Glyphen). */
  text-rendering: auto;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

/* ---------- Globales Berg-Leitmotiv ---------- */
/* Ein Berg, zwei deckungsgleich gestapelte Farbschichten: weiß und schwarz.
   BEIDE sind permanent sichtbar — es wird NICHT geclippt und NICHT geblendet.
   Der Trick: jede Schicht ist auf dem „falschen" Hintergrund praktisch
   unsichtbar (weiß bei 6 % auf Sand ≈ 0, schwarz bei 5 % auf Ink ≈ 0), auf dem
   „richtigen" liest sie als Berg. So läuft die Bergsilhouette lückenlos über
   jede Sektionsgrenze — kein Clip-Rennen mit dem nativen Scroll, keine
   Zwischenlücke, kein mix-blend-mode (der zwang den Browser früher zum
   Mitkompositieren der Headlines -> Glyphen-Flackern). */
.berg {
  position: fixed;
  right: clamp(-80px, -4vw, -10px);
  bottom: 0;
  width: clamp(460px, 64vw, 1180px);   /* Start = exakte Hero-Größe */
  pointer-events: none;
  z-index: 40;
  display: grid;                       /* beide Schichten deckungsgleich stapeln */
  will-change: transform;
  transform-origin: 100% 100%;         /* schrumpft in die untere rechte Ecke */
  transform: scale(var(--berg-scale, 1));
  /* JS setzt die Skalierung in groben Schritten (alle ~35px Scroll), die
     Transition interpoliert compositor-seitig dazwischen: der Berg-Layer wird
     nicht mehr pro Scroll-Frame invalidiert (Headline-Ruhe), bleibt aber fluid */
  transition: transform .35s linear, opacity .3s var(--ease);
}
.berg__svg {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}
.berg__svg--light { opacity: 0.06; }
.berg__svg--light path { fill: #fff; }
.berg__svg--dark { opacity: 0.05; }
.berg__svg--dark path { fill: #000; }
/* während das Fullscreen-Menü offen ist, tritt der Berg zurück */
body.no-scroll .berg { opacity: 0; }

/* ---------- Punkt-Raster (Canvas, per JS erzeugt) ---------- */
/* Feines Raster hinter allen Inhalten; Punkte reagieren minimal auf den
   Cursor (Anziehung mit weichem Falloff). Farbe je Sektion via JS. */
.dotgrid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 39;              /* über den Sektionsflächen, unter Berg (40) & Inhalt (41) */
  pointer-events: none;
}
body.no-scroll .dotgrid { opacity: 0; transition: opacity .3s var(--ease); }
/* Mobil: größer, damit der Gipfel wie am Desktop hoch in den Hero ragt */
@media (max-width: 760px) {
  .berg { width: min(200vw, 760px); }
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--accent); color: #fff; }

/* Tastatur-Fokus: einheitlich sichtbar, nur bei :focus-visible (nicht bei Maus-Klick) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Sanfter Crossfade beim Seitenwechsel (View Transitions API).
   Progressive Enhancement: Browser ohne Support ignorieren die Regel einfach. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

.wrap {
  position: relative;
  z-index: 41;              /* aller Inhalt liegt über den Deko-Layern:
                               Punkt-Raster (39) und Berg (40) bleiben Hintergrund */
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Typo-Helfer ---------- */
.label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.label--accent { color: var(--accent); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  color: var(--sand);
  transition: transform .5s var(--ease), color .4s ease;
  /* KEIN mix-blend-mode mehr: der Blend-Layer zwang den Browser, die ganze
     Seite pro Scroll-Frame mitzukompositieren (Glyphen-Flackern). Die Farbe
     wechselt stattdessen per Sektions-Logik (JS setzt .on-sand). */
}
.nav.on-sand { color: var(--black); }
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo (Block-Wortmarke) */
.nav__logo {
  display: flex;
  align-items: center;
  color: currentColor;
}
.nav__logo-mark {
  height: clamp(26px, 2.6vw, 34px);
  width: auto;
  color: currentColor;             /* folgt der Nav-Farbe (Sektions-Logik) */
  transition: color .4s ease;
}

/* Rechte Seite: Sprache + Burger */
.nav__right { display: flex; align-items: center; gap: var(--s-3); }

.lang {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 0.8rem;
  color: currentColor;
}
.lang button {
  color: currentColor;
  opacity: 0.5;
  padding: 2px 4px;
  transition: opacity .25s ease;
  letter-spacing: 0.04em;
}
.lang button.is-active { opacity: 1; }
.lang button:hover { opacity: 1; }
.lang i { opacity: 0.4; font-style: normal; }

/* Burger */
.burger {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: currentColor;
}
.burger span {
  position: relative;
  width: 26px; height: 2px;
  background: currentColor;
  transition: background .3s ease;
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute; left: 0;
  width: 26px; height: 2px;
  background: currentColor;
  transition: transform .4s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(7px) rotate(45deg); }
.burger.is-open span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Fullscreen Overlay-Menü ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  color: var(--sand);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--nav-h) + var(--s-4)) var(--gutter) var(--s-5);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--ease), visibility 0s linear .7s;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .7s var(--ease);
}
/* Bei offenem Menü den Blend-Mode der Nav neutralisieren (weiße Schrift auf
   dunklem Menü bleibt lesbar) — unabhängig von der Sektions-Logik. */
body.no-scroll .nav, body.no-scroll .nav.on-sand { color: var(--sand); }

.menu__list {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.4vw, 14px);
}
.menu__item { overflow: hidden; }
.menu__item a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--sand);
  transform: translateY(110%);
  /* transform .8s = Einflug; color .3s = Hover-Einfärbung, synchron zum Nudge der .txt */
  transition: transform .8s var(--ease), color .3s var(--ease);
  /* eigener Compositor-Layer: hält Einflug flüssig und isoliert den Hover-Repaint */
  backface-visibility: hidden;
}
.menu.is-open .menu__item a { transform: none; }
.menu__item a .num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  transform: translateY(-0.4em);
}
/* Text-Label: bekommt die flüssige (GPU-composited) Hover-Bewegung wie bei „Leistungen".
   Ein horizontaler Nudge per transform -> kein Repaint, kein vertikales Clipping
   (overflow:hidden des Items), läuft auch bei schnellem Wechsel butterweich. */
.menu__item a .txt {
  display: inline-block;
  /* gleiche Dauer/Easing wie die Farbe -> Bewegung und Einfärbung laufen synchron */
  transition: transform .3s var(--ease);
}
@media (hover:hover) {
  .menu__item a:hover { color: var(--accent); }
  .menu__item a:hover .txt { transform: translateX(clamp(4px, 0.6vw, 10px)); }
}
/* gestaffeltes Einfliegen */
.menu.is-open .menu__item:nth-child(1) a { transition-delay: .08s; }
.menu.is-open .menu__item:nth-child(2) a { transition-delay: .14s; }
.menu.is-open .menu__item:nth-child(3) a { transition-delay: .20s; }
.menu.is-open .menu__item:nth-child(4) a { transition-delay: .26s; }
.menu.is-open .menu__item:nth-child(5) a { transition-delay: .32s; }
.menu.is-open .menu__item:nth-child(6) a { transition-delay: .38s; }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  border-top: 1px solid rgba(255,231,182,0.18);
  padding-top: var(--s-3);
  font-size: 0.85rem;
}
.menu__foot a { opacity: .7; transition: opacity .25s; }
.menu__foot a:hover { opacity: 1; color: var(--accent); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--ink);
  color: var(--sand);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(28px, 5vh, 56px);
  overflow: hidden;
}

.hero__top {
  position: relative;
  z-index: 41;          /* über dem Berg (40) — Text liegt vor dem Leitmotiv */
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--s-5));
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px 24px;
  color: rgba(255,231,182,0.7);
  width: 100%;
}
/* Studio-Labels gestapelt (links); der Badge sitzt rechts oben auf Höhe der
   ersten Zeile. Auf schmalen Viewports bricht der Badge als Ganzes UNTER
   beide Labels um (statt zwischen sie zu rutschen). */
.hero__meta-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Verfügbarkeits-Badge: pulsierender Punkt (sitzt in der ersten Hero-Meta-Zeile) */
.avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: availPulse 2.4s ease-in-out infinite;
}
@keyframes availPulse {
  0%, 100% { opacity: .45; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

.hero__main { position: relative; z-index: 41; margin-top: var(--s-4); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 11.5vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: none;
}
.hero__title .line { display: block; overflow: hidden; white-space: nowrap; }
.hero__title .line > span {
  display: inline-block;
  vertical-align: top;
  padding-bottom: 0.16em;   /* Platz für Unterlängen (g) – wird nicht abgeschnitten */
  transform: translateY(110%);
  opacity: 0;
}
.hero.is-in .hero__title .line > span {
  transform: none;              /* none statt translateY(0): kein Transform-
                                   Kontext -> Text bleibt auf der Hauptebene,
                                   kein GPU-Resampling beim Scrollen */
  opacity: 1;
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}
.hero.is-in .hero__title .line:nth-child(1) > span { transition-delay: .15s; }
.hero.is-in .hero__title .line:nth-child(2) > span { transition-delay: .28s; }
/* Oranger Satzpunkt: echter Punkt in der Headline-Schrift, nur eingefärbt */
.hero__title .line .accent-dot {
  display: inline-block;
  width: auto;
  height: auto;
  padding-bottom: 0;        /* erbt sonst die Unterlängen-Reserve der Zeile */
  margin-left: 0.02em;
  background: none;
  color: var(--accent);
  vertical-align: baseline;
  transform: none;
  opacity: 0;
}
.hero.is-in .hero__title .line .accent-dot {
  opacity: 1;
  transition: opacity .6s ease .7s;
}

.hero__bottom {
  position: relative;
  z-index: 41;
  margin-top: calc(var(--s-4) - 10px);  /* optisch gleich zur Caption: Headline-Unterlänge ausgeglichen */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
}
.hero__bottom-left {
  position: relative;
}
.hero__subline {
  max-width: 34ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 400;
  color: rgba(255,231,182,0.85);
  opacity: 0;
  transform: translateY(20px);
}
.hero.is-in .hero__subline {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s;
}

/* Scroll-Indikator (ohne Text) – vertikale Spur + pulsierender Pfeil.
   Absolut platziert, näher am Rand als der Subtext – verschiebt diesen nicht. */
.hero__cue {
  position: absolute;
  font-size: clamp(1rem, 1.4vw, 1.2rem);  /* an den Subtext gekoppelt für em-genaue Ausrichtung */
  top: 0.54em;             /* startet auf Höhe der Versaloberkante des Subtextes */
  bottom: 0;               /* genau so hoch wie der Subtext daneben */
  left: calc(-1 * clamp(16px, 2.4vw, 34px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  opacity: 0;
}
.hero.is-in .hero__cue { opacity: 1; transition: opacity .9s ease .9s; }
.hero__cue-track {
  width: 1px;
  flex: 1;
  min-height: 22px;
  background: rgba(255,231,182,0.13);
  position: relative;
  overflow: hidden;
}
.hero__cue-track::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 1px; height: 46%;
  background: linear-gradient(var(--accent), transparent);
  opacity: 0.75;
  animation: cueDrop 2.1s var(--ease) infinite;
}
.hero__cue-arrow {
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  opacity: 0.75;
  transform: rotate(45deg);
  animation: cueBounce 2.1s var(--ease) infinite;
}
@keyframes cueDrop {
  0% { transform: translateY(-100%); }
  55%,100% { transform: translateY(210%); }
}
@keyframes cueBounce {
  0%,100% { transform: rotate(45deg) translate(-2px,-2px); opacity: .45; }
  50%     { transform: rotate(45deg) translate(2px,2px);   opacity: 1; }
}

/* CTA-Gruppe: Verfügbarkeits-Badge sitzt beim Button (Status -> Handlung) */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.hero__avail { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,231,182,0.7); opacity: 0; }
.hero.is-in .hero__avail { opacity: 1; transition: opacity .9s var(--ease) .7s; }

/* CTA Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: 100px;
  border: 1px solid currentColor;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: transparent; color: var(--accent); }
.btn--ghost { color: var(--sand); }
.btn--ghost:hover { background: var(--sand); color: var(--ink); border-color: var(--sand); }

/* ============================================================
   REVEAL-ON-SCROLL (generisch)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ============================================================
   02 — LEISTUNGEN
   ============================================================ */
.lst {
  position: relative;
  background: var(--sand);
  color: var(--black);
  border-top: 1px solid var(--sand-line);
  overflow: hidden;
  /* einheitlicher Sektionsrand statt Viewport-Zentrierung — alle Kapitel
     starten mit exakt demselben Abstand Farbkante → Kapitel-Label */
  padding: var(--sec-pad) 0;
}

.lst__inner {
  position: relative;
  z-index: 41;
  display: flex;
  flex-direction: column;
  gap: var(--kicker-gap);          /* Label→Grid, einheitliches Maß */
}

/* Editorial-Headline */
.lst__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 9vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin-bottom: 0;            /* Abstand Headline→Grid steuert der gap auf .lst__inner */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em;
}
.lst__title-index { color: var(--accent); }

.lst__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
}

.lst__cat-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-4);
}

.lst__list { border-top: 1px solid var(--sand-line); }

.lst__item {
  position: relative;
  display: flex;
  align-items: center;            /* Nummer exakt mittig zu Text und Trennlinien */
  gap: clamp(14px, 1.4vw, 22px);
  padding: clamp(18px, 2.4vh, 28px) 0;
  border-bottom: 1px solid var(--sand-line);
  font-size: clamp(1.12rem, 1.6vw, 1.5rem);
  line-height: 1.3;
  /* gestaffeltes Erscheinen, getriggert durch die Kategorie darüber */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.lst__cat.is-revealed .lst__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * .07s + .12s);
}

/* sanfte Einfärbung der ganzen Zeile beim Hover */
.lst__item::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * clamp(12px, 1.4vw, 20px));
  background: rgba(255, 90, 0, 0.07);
  border-radius: 8px;
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: -1;
}
.lst__item:hover::before { opacity: 1; }

.lst__item-num {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(10, 10, 10, 0.4);
  transition: color .35s var(--ease);
}
.lst__item-text {
  flex: 1;
  transform-origin: left center;
  transition: transform .35s var(--ease);
}
.lst__item:hover .lst__item-text { transform: scale(1.04); }
.lst__item:hover .lst__item-num { color: var(--accent); }

@media (max-width: 760px) {
  .lst__grid {
    grid-template-columns: 1fr;
    gap: clamp(48px, 9vh, 80px);
  }
}

/* ============================================================
   03 — WIE ICH ARBEITE (Prozess)
   ============================================================ */
.prc {
  position: relative;
  background: var(--ink);
  color: var(--sand);
  border-top: 1px solid rgba(255, 231, 182, 0.08);
  padding: var(--sec-pad) 0;   /* einheitlicher Sektionsrand */
}
.prc__inner { position: relative; z-index: 41; }

/* Editorial-Headline (analog 01) */
.prc__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 9vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin-bottom: var(--kicker-gap);   /* Label→Inhalt, einheitliches Maß */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em;
}
.prc__title-index { color: var(--accent); }

/* Timeline */
.prc__steps {
  --node: clamp(38px, 4.5vw, 60px);
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Der „Pfad" — feine Linie; Top/Höhe setzt JS exakt von erstem zu letztem Knoten */
.prc__path {
  position: absolute;
  left: calc(var(--node) / 2);
  top: 0;
  height: 100%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 231, 182, 0.16);
  overflow: hidden;
  pointer-events: none;
}
.prc__path-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: var(--accent);
  will-change: height;
}

.prc__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) 1fr;
  gap: clamp(20px, 3vw, 56px);
  padding-bottom: clamp(76px, 13vh, 188px);
  /* erscheint gestaffelt — gesteuert per JS (erst wenn vorheriger Knoten orange ist) */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.prc__step:last-child { padding-bottom: 0; }
.prc__step.is-shown { opacity: 1; transform: none; }

/* Knoten mit Nummer */
.prc__step-num {
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.78rem, 1.1vw, 1rem);
  color: rgba(255, 231, 182, 0.5);
  background: var(--ink);
  border: 1px solid rgba(255, 231, 182, 0.16);
  border-radius: 50%;
  transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
/* sobald der Pfad den Knoten erreicht hat */
.prc__step.is-reached .prc__step-num {
  color: var(--black);
  background: var(--accent);
  border-color: var(--accent);
}

.prc__step-body { padding-top: 0.15em; }
.prc__step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: clamp(8px, 1.2vh, 16px);
}
.prc__step-text {
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255, 231, 182, 0.72);
}

@media (max-width: 760px) {
  .prc__steps { --node: 48px; }
  .prc__step { gap: 20px; }
}

/* ============================================================
   04 — PORTFOLIO (Arbeiten) — schwebende Sphere
   ============================================================ */
.pf {
  position: relative;
  background: var(--ink);
  color: var(--sand);
  border-top: 1px solid rgba(255, 231, 182, 0.08);
  overflow: hidden;
  padding: var(--sec-pad) 0;   /* einheitlicher Sektionsrand */
}
.pf__inner { position: relative; z-index: 41; }

/* Editorial-Headline (analog 01/03) */
.pf__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 9vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em;
  margin-bottom: var(--kicker-gap);   /* Label→Inhalt, einheitliches Maß */
}
.pf__title-index { color: var(--accent); }

.pf__lead {
  max-width: 44ch;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: rgba(255, 231, 182, 0.72);
}

/* Bühne */
.pf__stage {
  position: relative;
  margin-top: clamp(28px, 5vh, 64px);
}

/* --- Standard / Fallback: ruhiges Raster (kein JS, reduced-motion) --- */
.pf__sphere {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 36px);
}

.pf__item {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Karte (Mockup) */
.pf__card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sand-soft);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pf__mk { width: 100%; height: 100%; }
/* echtes Projektbild in der Karte (ersetzt die SVG-Mockups) */
.pf__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover: nur die Karte skaliert (nicht das JS-transformierte Item) */
.pf__item:hover .pf__card,
.pf__item:focus-visible .pf__card {
  transform: scale(1.06);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

/* Label */
.pf__label { display: block; margin-top: 12px; text-align: center; }
.pf__label-cat {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 3px;
}
.pf__label-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--sand);
}

/* Hinweis (nur im 3D-Modus sichtbar) */
.pf__hint {
  display: none;
  margin-top: clamp(20px, 4vh, 40px);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 231, 182, 0.45);
}

/* ============================================================
   04 — 3D-Modus (per JS aktiviert: ab Tablet, kein reduced-motion)
   ============================================================ */
.pf__stage.is-3d {
  height: clamp(360px, 60vh, 680px);
  perspective: 1100px;
  perspective-origin: 50% 50%;
  cursor: grab;
  /* pan-y: vertikales Scrollen der Seite bleibt möglich; horizontales Ziehen
     dreht die Sphere (JS unterscheidet die Richtung beim Touch). */
  touch-action: pan-y;
}
.pf__stage.is-3d.is-grabbing { cursor: grabbing; }

.pf__stage.is-3d .pf__sphere {
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  transform-style: preserve-3d;
}

/* Items werden von JS absolut zentriert + per translate3d platziert (Billboard) */
.pf__stage.is-3d .pf__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(112px, 15vw, 180px);   /* stärker vw-gekoppelt: füllt auch Tablet-Breiten */
  margin: 0;
  will-change: transform, opacity, filter;
}

/* Labels im 3D-Modus erst beim Hover/Fokus — sonst zu viel Unruhe */
.pf__stage.is-3d .pf__label {
  position: absolute;
  left: 50%;
  top: 100%;
  width: max-content;
  max-width: 200px;
  margin-top: 10px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.pf__stage.is-3d .pf__item:hover .pf__label,
.pf__stage.is-3d .pf__item:focus-visible .pf__label { opacity: 1; }

.pf__stage.is-3d .pf__hint {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  pointer-events: none;
}

/* ============================================================
   05 — ÜBER MICH (Signatur-Block, bewusst ohne Portrait)
   ============================================================ */
.abt {
  position: relative;
  background: var(--sand);
  color: var(--black);
  border-top: 1px solid var(--sand-line);
  overflow: hidden;
  padding: var(--sec-pad) 0;   /* einheitlicher Sektionsrand */
}
.abt__inner { position: relative; z-index: 41; }

/* Kapitel-Mikro-Label */
.abt__kicker {
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(10, 10, 10, 0.55);
  margin-bottom: var(--kicker-gap);
}
.abt__kicker-num { color: var(--accent); }

.abt__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}

/* Linke Spalte — ruhiger Leitsatz, bleibt beim Scrollen stehen */
.abt__statement {
  position: sticky;
  top: calc(var(--nav-h) + 7vh);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.abt__statement em {
  font-style: normal;
  color: var(--accent);
}

/* Rechte Spalte — Fließtext */
.abt__text > p {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.62;
  color: rgba(10, 10, 10, 0.82);
  max-width: 48ch;
}
.abt__text > p + p { margin-top: clamp(18px, 2.4vh, 30px); }

/* Signatur — rein typografisch (Ersatz fürs Portrait): Name im Headline-
   System der Seite, abgeschlossen mit dem orangen Signaturpunkt des Claims.
   Kein Icon, kein Schräglauf — dieselbe Sprache wie die großen Statements. */
.abt__sign {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(40px, 6vh, 80px);
  padding-top: clamp(28px, 4vh, 48px);
  border-top: 1px solid var(--sand-line);
}
.abt__sign-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.abt__sign-name .accent-period { color: var(--accent); }
.abt__sign-role {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(10, 10, 10, 0.5);
}

@media (max-width: 760px) {
  .abt__grid { grid-template-columns: 1fr; gap: clamp(30px, 6vh, 52px); }
  .abt__statement { position: static; }
}

/* ============================================================
   06 — KONTAKT (schwarz, editorial; Formspree async)
   ============================================================ */
.cnt {
  position: relative;
  background: var(--ink);
  color: var(--sand);
  border-top: 1px solid rgba(255, 231, 182, 0.08);
  overflow: hidden;
  padding: var(--sec-pad) 0;   /* einheitlicher Sektionsrand */
}
.cnt__inner { position: relative; z-index: 41; }

/* Kapitel-Mikro-Label (hell) */
.cnt__kicker {
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 231, 182, 0.55);
  margin-bottom: var(--kicker-gap);
}
.cnt__kicker-num { color: var(--accent); }

.cnt__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

/* Linke Spalte */
.cnt__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.cnt__lead {
  margin-top: clamp(18px, 2.6vh, 30px);
  max-width: 42ch;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 231, 182, 0.72);
}
.cnt__direct {
  margin-top: clamp(28px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 18px);
}
.cnt__direct-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8em;
  width: fit-content;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.cnt__direct-link:hover { border-color: var(--accent); }
.cnt__direct-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 231, 182, 0.45);
}
.cnt__direct-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

/* Formular */
.cnt__form {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vh, 32px);
}
/* Honeypot — visuell entfernt, für Screenreader versteckt */
.cnt__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cnt__field { display: flex; flex-direction: column; gap: 0.5em; }
.cnt__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 231, 182, 0.55);
}
.cnt__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 231, 182, 0.25);
  color: var(--sand);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  padding: 0.5em 0;
  transition: border-color .3s var(--ease);
}
.cnt__input::placeholder { color: rgba(255, 231, 182, 0.32); }
.cnt__input:focus { outline: none; border-color: var(--accent); }
.cnt__input:user-invalid { border-color: rgba(255, 90, 0, 0.65); }
.cnt__textarea { resize: vertical; min-height: 4.5em; line-height: 1.5; }

/* Select */
.cnt__select-wrap { position: relative; }
.cnt__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 1.8em;
}
.cnt__select:invalid { color: rgba(255, 231, 182, 0.32); }  /* Platzhalter-Optik */
.cnt__select option { color: #0A0A0A; }                     /* Liste i. d. R. auf hell */
.cnt__select-arrow {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  color: rgba(255, 231, 182, 0.6);
  pointer-events: none;
}
.cnt__select-arrow svg { width: 100%; height: auto; }

/* DSGVO-Consent */
.cnt__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 231, 182, 0.6);
}
.cnt__consent-box {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 0.15em;
  border: 1px solid rgba(255, 231, 182, 0.35);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.cnt__consent-box:checked { background: var(--accent); border-color: var(--accent); }
.cnt__consent-box:checked::after {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 5px; height: 9px;
  border: solid #0A0A0A;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.cnt__consent-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cnt__consent-link {
  color: var(--sand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .3s var(--ease);
}
.cnt__consent-link:hover { color: var(--accent); }

.cnt__submit { align-self: flex-start; margin-top: 0.4em; }

.cnt__status {
  min-height: 1.3em;
  font-size: 0.95rem;
  line-height: 1.5;
}
.cnt__status.is-sending { color: rgba(255, 231, 182, 0.6); }
.cnt__status.is-ok { color: var(--accent); }
.cnt__status.is-err { color: #FF8B5E; }

@media (max-width: 760px) {
  .cnt__grid { grid-template-columns: 1fr; gap: clamp(40px, 7vh, 64px); }
}

/* ============================================================
   TEST — Mikro-Label statt großer Headline (Sektionen 01–03)
   Rendert .lst__title / .prc__title / .pf__title im Look des
   .abt__kicker. Rein typografischer Override; Margins/JS-Logik
   bleiben unangetastet (leicht reversibel). Index bleibt orange.
   ============================================================ */
.lst__title,
.prc__title,
.pf__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  gap: 0.6em;
}
.lst__title { color: rgba(10, 10, 10, 0.55); }
.prc__title,
.pf__title { color: rgba(255, 231, 182, 0.55); }

/* ============================================================
   RECHTLICHE UNTERSEITEN (Impressum / Datenschutz)
   Sand-Hintergrund, kein Berg-Parallax. Ruhige Editorial-Lesespalte.
   ============================================================ */
.legal {
  background: var(--sand);
  color: var(--black);
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(48px, 11vh, 128px)) 0 clamp(80px, 14vh, 168px);
}

.legal__head {
  margin-bottom: clamp(48px, 8vh, 104px);
}
.legal__kicker {
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(10, 10, 10, 0.55);
  margin-bottom: clamp(22px, 4vh, 44px);
}
.legal__kicker-num { color: var(--accent); }

.legal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 9vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
}

/* Lesespalte */
.legal__body {
  max-width: 720px;
}
.legal__block {
  padding-top: clamp(28px, 4.5vh, 52px);
  margin-top: clamp(28px, 4.5vh, 52px);
  border-top: 1px solid var(--sand-line);
}
.legal__block:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
.legal__block h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: clamp(12px, 1.6vh, 18px);
  scroll-margin-top: calc(var(--nav-h) + 28px);
}
.legal__block h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: clamp(20px, 3vh, 32px) 0 clamp(8px, 1.2vh, 12px);
}
.legal__block p {
  color: rgba(10, 10, 10, 0.78);
  line-height: 1.65;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  margin-bottom: 0.6em;
}
.legal__block p:last-child { margin-bottom: 0; }

/* Adressblöcke: enge Zeilen, ohne Absatzabstand */
.legal__block--addr p {
  margin-bottom: 0;
  line-height: 1.7;
}

.legal__block a {
  color: var(--accent);
  transition: opacity .25s var(--ease);
}
.legal__block a:hover { opacity: 0.7; text-decoration: underline; }

/* Hervorgehobene Inline-Zeile (z.B. E-Mail im Fließtext) */
.legal__inline {
  font-weight: 500;
}

/* Sekundär-Zeile: Link zur Datenschutzerklärung des Dienstleisters */
.legal__sub {
  margin-top: 0.2em;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

/* Listen im Fließtext (Aufzählungen, m-elements, Glossar) */
.legal__block ul {
  list-style: none;
  margin: 0 0 0.6em;
  padding: 0;
}
.legal__block li {
  position: relative;
  padding-left: 22px;
  color: rgba(10, 10, 10, 0.78);
  line-height: 1.6;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  margin-bottom: 0.5em;
}
.legal__block li:last-child { margin-bottom: 0; }
.legal__block li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}
.legal__block strong { font-weight: 600; color: var(--black); }

/* Detail-Listen (Datenarten, Zwecke, Rechtsgrundlagen) etwas ruhiger */
.legal__meta li,
.legal__glossary li {
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.55;
}

/* Inhaltsübersicht: kompakte, klickbare Sprungmarken */
.legal__toc {
  list-style: none;
  margin: 0;
  padding: 0;
}
.legal__toc li {
  padding-left: 0;
  margin-bottom: 0.35em;
  line-height: 1.5;
  counter-increment: toc;
}
.legal__toc li::before { display: none; }
.legal__toc a {
  display: inline-block;
  color: rgba(10, 10, 10, 0.78);
}
.legal__toc a:hover { color: var(--accent); opacity: 1; }

/* Generator-/Quellen-Hinweis */
.legal__seal {
  margin-top: clamp(28px, 4.5vh, 52px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--sand-line);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  opacity: 0.7;
}
.legal__seal a { color: rgba(10, 10, 10, 0.78); }
.legal__seal a:hover { color: var(--accent); opacity: 1; }

/* ============================================================
   PROJEKT-DETAILSEITE (Case Study) — wiederverwendbare Vorlage
   Dunkler Header → Sand-Story mit Bild-Modulen → Quote-Band →
   Ergebnis → Nächstes Projekt → CTA. Nutzt dieselben Tokens,
   Reveals und das globale Berg-Leitmotiv wie die Startseite.
   ============================================================ */

/* — Header (schwarz, analog Hero) — */
.case__hero {
  position: relative;
  background: var(--ink);
  color: var(--sand);
  padding: calc(var(--nav-h) + clamp(40px, 8vh, 96px)) 0 clamp(48px, 9vh, 104px);
  overflow: hidden;
}
.case__hero-inner { position: relative; z-index: 41; }

.case__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 231, 182, 0.6);
  transition: color .3s var(--ease);
  margin-bottom: clamp(28px, 6vh, 64px);
}
.case__back:hover { color: var(--accent); }
.case__back-ico { display: inline-flex; width: 15px; transition: transform .3s var(--ease); }
.case__back-ico svg { width: 100%; height: auto; }
.case__back:hover .case__back-ico { transform: translateX(-3px); }

.case__kicker {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 231, 182, 0.55);
  margin-bottom: clamp(18px, 3vh, 30px);
}
.case__kicker-num { color: var(--accent); }
.case__kicker-count { margin-left: auto; color: rgba(255, 231, 182, 0.4); }

.case__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 10vw, 8rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  max-width: 14ch;
}
/* Titel-Maske für den Zeilen-Reveal (analog Start-Hero) */
.case__title-mask { display: block; overflow: hidden; }
.case__title-text {
  display: inline-block;
  padding-bottom: 0.12em;   /* Unterlängen (g, p) nicht abschneiden */
  margin-bottom: -0.12em;   /* Reserve wieder ausgleichen — Layout bleibt identisch */
  transform: translateY(110%);
  opacity: 0;
}

/* — Entrance: gestaffeltes Einblenden des Headers (JS setzt .is-in) — */
.case__hero .case__back,
.case__hero .case__kicker,
.case__hero .case__subline,
.case__hero .case__facts {
  opacity: 0;
  transform: translateY(18px);
}
.case__hero.is-in .case__back    { opacity: 1; transform: none; transition: opacity .8s var(--ease) .1s,  transform .8s var(--ease) .1s; }
.case__hero.is-in .case__kicker  { opacity: 1; transform: none; transition: opacity .8s var(--ease) .2s,  transform .8s var(--ease) .2s; }
.case__hero.is-in .case__title-text { opacity: 1; transform: none; transition: transform 1s var(--ease) .3s, opacity 1s var(--ease) .3s; }
.case__hero.is-in .case__subline { opacity: 1; transform: none; transition: opacity .9s var(--ease) .55s, transform .9s var(--ease) .55s; }
.case__hero.is-in .case__facts   { opacity: 1; transform: none; transition: opacity .9s var(--ease) .7s,  transform .9s var(--ease) .7s; }
.case__subline {
  margin-top: clamp(20px, 3vh, 32px);
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: rgba(255, 231, 182, 0.82);
}

/* Fakten-Leiste */
.case__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(36px, 6vh, 72px);
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid rgba(255, 231, 182, 0.16);
}
.case__fact { display: flex; flex-direction: column; gap: 0.6em; }
.case__fact-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 231, 182, 0.45);
}
.case__fact-value {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.35;
  color: var(--sand);
}
@media (max-width: 680px) {
  .case__facts { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}

/* — Story-Sektionen (Sand / optional dunkel) — */
.case__section {
  background: var(--sand);
  color: var(--black);
  padding: var(--sec-pad) 0;   /* einheitlicher Sektionsrand */
}
.case__section--dark { background: var(--ink); color: var(--sand); }
/* Reines Bild-Intro direkt nach dem Header: kein doppelter Abstand zur Folge-Sektion */
.case__section--visual { padding-bottom: 0; }

/* Ausgewogene Zeilenumbrüche in großen Headlines (kein einsames letztes Wort) */
.case__title,
.case__lead,
.case__split-head,
.case__quote-text,
.case__cta-title,
.legal__title { text-wrap: balance; }

.case__kicker-line {
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(10, 10, 10, 0.5);
  margin-bottom: var(--kicker-gap);
}
.case__section--dark .case__kicker-line { color: rgba(255, 231, 182, 0.5); }
.case__kicker-line .num { color: var(--accent); }

/* Großer Einleitungs-/Statement-Text */
.case__lead {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Fließtext-Spalte */
.case__copy { max-width: 60ch; }
.case__copy p {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: rgba(10, 10, 10, 0.78);
  margin-bottom: 0.9em;
}
.case__copy p:last-child { margin-bottom: 0; }
.case__section--dark .case__copy p { color: rgba(255, 231, 182, 0.8); }

/* 2-spaltig: Überschrift links, Text rechts (wie „Über mich") */
.case__split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.case__split-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
@media (max-width: 820px) {
  .case__split { grid-template-columns: 1fr; gap: 20px; }
}

/* — Bild-Module (Platzhalter bis echte Bilder folgen) — */
/* z-index 41 hebt die (deckenden) Bildflächen über das fixierte Berg-Leitmotiv
   (z 40) — der Berg bleibt im Hintergrund/Negativraum, liegt aber nie über einem Bild. */
.case__media { position: relative; z-index: 41; margin: clamp(40px, 7vh, 96px) 0; }
.case__media:first-child { margin-top: 0; }
.case__media:last-child { margin-bottom: 0; }
.case__media--inset { max-width: 820px; margin-inline: auto; }
.case__media--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 32px);
}
@media (max-width: 720px) { .case__media--duo { grid-template-columns: 1fr; } }

.case__media-ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--sand-soft);
  border: 1px solid var(--sand-line);
  overflow: hidden;
}
.case__media--inset .case__media-ph,
.case__media--duo .case__media-ph { aspect-ratio: 4 / 5; }
.case__media-ph--dark { background: var(--ink); border-color: rgba(255, 231, 182, 0.14); }
.case__media-ph--accent { background: var(--accent); border-color: transparent; }

/* Echtes Projektbild: füllt den Slot und deckt den Platzhalter (Berg + Label).
   Die Slots verweisen schon auf assets/work/<projekt>/<slot>.jpg. Startzustand
   transparent -> der gestaltete Platzhalter ist sichtbar. main.js blendet das
   Bild erst nach erfolgreichem Laden ein (.is-loaded); fehlt die Datei oder ist
   sie noch lazy nicht geladen, bleibt der Platzhalter stehen. Echte Bilder sind
   damit reines Drop-in — inkl. sanftem Einblenden. */
.case__media-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.case__media-img.is-loaded { opacity: 1; }

/* — Poster-Galerie (Slider) — */
/* Native Scroll-Snap-Spur (Touch/Trackpad) + Pfeile und Zähler im Label-Stil.
   main.js findet poster-01.jpg … automatisch (data-slider-Präfix) und baut die
   Slides; ohne Funde bleibt der gestaltete Platzhalter stehen. */
/* Breite folgt der FENSTERHÖHE, damit das ganze Bild samt Pfeil-Buttons und
   Bildunterschrift ins Sichtfeld passt (Slides sind 4:5 -> Breite = Höhe × 0.8).
   Reserviert ~210px für Buttons (44px + Abstand), Caption und Luft oben/unten.
   Deckel bei 820px; Untergrenze 300px für sehr flache Fenster (Querformat). */
.case__media--slider {
  max-width: min(820px, max(300px, calc((100svh - 210px) * 0.8)));
  margin-inline: auto;
}
.case__slider { position: relative; }
.case__slider-track {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;               /* eigene UI statt Scrollbar */
}
.case__slider-track::-webkit-scrollbar { display: none; }
.case__slider-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.case__slide {
  flex: 0 0 100%;                      /* Slide füllt den Rahmen — gleiche Größe wie die Detail-Slots */
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;                 /* identisch zu .case__media--inset der anderen Projektseiten */
  background: var(--sand-soft);
  border: 1px solid var(--sand-line);
  overflow: hidden;
}
.case__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case__slide--ph { display: grid; place-items: center; }

.case__slider-ui {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(14px, 2vh, 20px);
}
.case__slider-count {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(10, 10, 10, 0.5);
  font-variant-numeric: tabular-nums;  /* Zähler springt nicht in der Breite */
}
.case__slider-nav { display: flex; gap: 10px; }
.case__slider-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(10, 10, 10, 0.25);
  border-radius: 50%;
  color: var(--black);
  transition: border-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.case__slider-btn svg { width: 18px; height: 18px; }
.case__slider-btn:hover { border-color: var(--accent); color: var(--accent); }
.case__slider-btn[disabled] { opacity: 0.3; pointer-events: none; }

.ph__berg { width: clamp(72px, 11vw, 132px); opacity: 0.16; }
.ph__berg path { fill: var(--ink); }
.case__media-ph--dark .ph__berg { opacity: 0.3; }
.case__media-ph--dark .ph__berg path { fill: var(--sand); }
.case__media-ph--accent .ph__berg { opacity: 0.34; }
.case__media-ph--accent .ph__berg path { fill: #fff; }

.ph__tag {
  position: absolute;
  left: clamp(14px, 2vw, 24px);
  bottom: clamp(12px, 2vh, 20px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(10, 10, 10, 0.4);
}
.case__media-ph--dark .ph__tag,
.case__media-ph--accent .ph__tag { color: rgba(255, 255, 255, 0.6); }

.case__media-cap {
  margin-top: 0.9em;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: rgba(10, 10, 10, 0.5);
}
.case__section--dark .case__media-cap { color: rgba(255, 231, 182, 0.5); }

/* — Pull-Quote (dunkles Band) — */
.case__quote {
  background: var(--ink);
  color: var(--sand);
  padding: clamp(64px, 12vh, 160px) 0;
}
.case__quote-text {
  max-width: 24ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4.5vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.case__quote-text::before { content: "„"; color: var(--accent); }
.case__quote-text::after { content: "“"; color: var(--accent); }
.case__quote-cite {
  display: block;
  margin-top: clamp(20px, 3vh, 32px);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 231, 182, 0.5);
}

/* — Nächstes Projekt (Prev/Next) — */
.case__next {
  background: var(--ink);
  color: var(--sand);
  border-top: 1px solid rgba(255, 231, 182, 0.12);
  padding: clamp(48px, 8vh, 104px) 0;
}
.case__next-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 56px);
}
.case__next-item { display: flex; flex-direction: column; gap: 0.6em; }
.case__next-item--next { text-align: right; align-items: flex-end; }
.case__next-dir {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 231, 182, 0.45);
}
.case__next-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--sand);
  transition: color .3s var(--ease);
}
.case__next-item:hover .case__next-name { color: var(--accent); }
@media (max-width: 600px) {
  .case__next-grid { grid-template-columns: 1fr; gap: 28px; }
  .case__next-item--next { text-align: left; align-items: flex-start; }
}

/* — CTA-Band (Sand; Akzent nur dosiert über den Button) —
   KEIN z-index auf der Sektion selbst: sonst läge ihre Fläche über Raster (39)
   und Berg (40). Der Inhalt liegt über den .wrap (41) ohnehin darüber. */
.case__cta {
  background: var(--sand);
  color: var(--black);
  text-align: center;
  padding: clamp(56px, 10vh, 120px) 0;
  border-top: 1px solid var(--sand-line);
}
.case__cta-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-inline: auto;
}
.case__cta .btn { margin-top: clamp(24px, 4vh, 40px); }

/* ============================================================
   404 — NICHT GEFUNDEN
   ============================================================ */
.nf {
  position: relative;
  min-height: 100svh;
  background: var(--ink);
  color: var(--sand);
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 40px) 0 80px;
  overflow: hidden;
}
.nf__inner { position: relative; z-index: 41; }
.nf__code {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 231, 182, 0.55);
  margin-bottom: clamp(18px, 3vh, 30px);
}
.nf__code .num { color: var(--accent); }
.nf__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 7.5vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 16ch;
  text-wrap: balance;
}
.nf__text {
  margin-top: clamp(18px, 3vh, 28px);
  max-width: 44ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 231, 182, 0.75);
}
.nf .btn { margin-top: clamp(28px, 4.5vh, 44px); }

/* ============================================================
   FOOTER (schwarz, Ausklang)
   ============================================================ */
.ft {
  position: relative;
  background: var(--ink);
  color: var(--sand);
  border-top: 1px solid rgba(255, 231, 182, 0.12);
  overflow: hidden;
  padding: clamp(56px, 9vh, 110px) 0 clamp(28px, 4vh, 44px);
}
.ft__inner { position: relative; z-index: 41; }

/* 1) Große Wortmarke + Claim — mittig als Schlusspunkt */
.ft__brand { text-align: center; }
.ft__logo {
  display: block;
  color: var(--sand);
}
.ft__logo-mark {
  display: block;
  width: 100%;
  max-width: min(100%, 1040px);
  height: auto;
  margin-inline: auto;
}
.ft__claim {
  margin-top: clamp(14px, 2vh, 24px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  letter-spacing: -0.01em;
  color: rgba(255, 231, 182, 0.7);
}

/* 2) Link-Spalten — Gruppe spannt exakt die Glyphen-Breite der Wortmarke:
   Navigations-Block am „S", Kontakt-Block am „G" (gespiegelt), Rechtliches mittig.
   Titel + Links sind INNERHALB jeder Spalte zentriert. 98.6% / 1025px = Ink-Breite
   (Logo-Box ist ~0.7% breiter, Glyphen sitzen symmetrisch darin). */
.ft__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: min(98.6%, 1025px);
  margin-inline: auto;
  gap: 0;
  margin-top: clamp(48px, 8vh, 96px);
  padding-top: clamp(36px, 5vh, 56px);
  border-top: 1px solid rgba(255, 231, 182, 0.1);
}
.ft__col { display: flex; flex-direction: column; align-items: center; text-align: center; width: fit-content; }
.ft__col:nth-child(1) { justify-self: start;  } /* Block am „S" */
.ft__col:nth-child(2) { justify-self: center; }
.ft__col:nth-child(3) { justify-self: end;    } /* Block am „G" */
.ft__col-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 231, 182, 0.45);
  margin-bottom: clamp(14px, 2vh, 20px);
}
.ft__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(9px, 1.2vh, 13px);
}
.ft__list a {
  display: inline-block;
  width: fit-content;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: rgba(255, 231, 182, 0.82);
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.ft__list a:hover { color: var(--accent); border-color: var(--accent); }

/* 3) Meta-Leiste */
.ft__meta {
  /* 1fr | auto | 1fr: die Lokalzeit sitzt exakt in der Seitenmitte —
     bündig mit der zentrierten „Rechtliches"-Spalte darüber */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: clamp(40px, 6vh, 72px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid rgba(255, 231, 182, 0.1);
}
.ft__meta .ft__copy { justify-self: start; }
.ft__meta .ft__time { justify-self: center; text-align: center; }
.ft__meta .ft__top { justify-self: end; }
.ft__copy {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 231, 182, 0.45);
}
/* Lokalzeit Hamburg (JS tickt sekündlich) */
.ft__time {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 231, 182, 0.45);
  font-variant-numeric: tabular-nums;   /* Ziffern gleich breit — tickt ohne Zittern */
}
.ft__top {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 231, 182, 0.6);
  transition: color .3s var(--ease);
}
.ft__top:hover { color: var(--accent); }
.ft__top-berg {
  display: inline-flex;
  width: 15px;
  transition: transform .3s var(--ease);
}
.ft__top-berg svg { width: 100%; height: auto; }
/* der Berg „steigt" beim Hover nach oben — kleiner Scroll-to-top-Cue */
.ft__top:hover .ft__top-berg { transform: translateY(-3px); }

@media (max-width: 700px) {
  /* Spalten bleiben dreispaltig & am Logo orientiert; Meta bleibt wie auf Desktop
     nebeneinander: Copyright links, „Nach oben" rechts (kein Stapeln/Überlappen).
     Die Lokalzeit ist ein Desktop-Detail — mobil würde die Zeile überlaufen. */
  .ft__meta { flex-wrap: nowrap; gap: 12px; }
  .ft__copy, .ft__top { white-space: nowrap; }
  .ft__time { display: none; }
}

/* ============================================================
   PLATZHALTER-SECTIONS (folgen abschnittsweise)
   ============================================================ */
.section-stub {
  min-height: 60vh;
  display: grid;
  place-items: center;
  border-top: 1px solid var(--sand-line);
  color: rgba(10,10,10,0.4);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  text-align: center;
  padding: var(--s-7) var(--gutter);
}

/* ============================================================
   POSTER-MODUS — Anton als Display-Schrift
   Anton existiert in genau einem Schnitt (400) und lebt in
   Versalien. Deshalb: Gewicht hart auf 400 (kein Faux-Bold),
   Versalien + leicht positive Laufweite auf allen Display-
   Elementen, und Zeilenabstände mit gezielter Luft für die
   Umlaut-Punkte (Ä/Ö/Ü) — eng, aber ohne Kollision.
   Liegt bewusst NACH allen Komponenten-Styles (überschreibt sie).
   ============================================================ */

/* Ein Gewicht für alles — Faux-Bold unterbinden */
.menu__item a, .hero__title, .lst__cat-title, .prc__step-num, .prc__step-title,
.pf__label-name, .abt__statement, .abt__sign-name, .cnt__title,
.legal__title, .legal__block h2, .legal__block h3,
.case__title, .case__lead, .case__split-head, .case__quote-text,
.case__next-name, .case__cta-title, .nf__title, .ft__claim, .section-stub {
  font-weight: 400;
  font-synthesis: none;
}

/* Versalien + Poster-Laufweite (große Momente & Marketing-Headlines) */
.menu__item a, .hero__title, .lst__cat-title, .prc__step-title,
.pf__label-name, .abt__statement, .cnt__title, .legal__title,
.case__title, .case__lead, .case__split-head, .case__quote-text,
.case__next-name, .case__cta-title, .nf__title, .ft__claim {
  text-transform: uppercase;
  letter-spacing: 0.008em;
}
/* kleine Display-Grade brauchen in Versalien etwas mehr Tracking */
.pf__label-name { letter-spacing: 0.035em; }
.ft__claim { letter-spacing: 0.04em; }

/* — Zeilenabstände: Umlaut-Luft, Zeile für Zeile austariert — */
.hero__title { line-height: 1.0; }
/* Reveal-Masken clippen oben — Reserve für Ä/Ö/Ü-Punkte schaffen */
.hero__title .line > span { padding-top: 0.14em; }
.case__title-text { padding-top: 0.14em; }
/* BEWUSST KEIN dauerhaftes will-change/backface auf den Headlines:
   das promoviert die (fetten Anton-)Buchstaben in eigene GPU-Ebenen, die der
   Browser beim Scrollen resampled -> genau das sichtbare Flimmern an den
   Stämmen. Ursprünglich gegen den Blend-Berg gedacht (längst entfernt), half
   es nie. Ohne die Ebenen rendert der Text scharf auf der Hauptebene mit; die
   einmaligen Reveal-Transitions werden vom Browser ohnehin auto-komponiert. */
/* Menü: Anton baut höher — Grad etwas zurück, damit alle 6 Punkte in den
   Viewport passen; Nummer wieder oben an die Versalkante gestellt */
.menu__item a {
  line-height: 1.0;
  padding-top: 0.12em;
  font-size: clamp(2.3rem, 7.2vw, 5rem);
  align-items: flex-start;
}
.menu__item a .num { transform: translateY(0.55em); }
.lst__cat-title { line-height: 1.1; }
.prc__step-title { line-height: 1.12; }
.abt__statement { line-height: 1.14; }
.cnt__title { line-height: 1.08; }
.legal__title { line-height: 1.04; }
.case__title { line-height: 1.02; }
.case__lead { line-height: 1.16; }
.case__split-head { line-height: 1.16; }
.case__quote-text { line-height: 1.22; }
.case__next-name { line-height: 1.12; }
.case__cta-title { line-height: 1.12; }
.nf__title { line-height: 1.08; }

/* — bewusste Ausnahmen vom Versal-Prinzip — */
/* Rechtsseiten: lange juristische Überschriften bleiben gemischt (Lesbarkeit) */
.legal__block h2, .legal__block h3 { text-transform: none; letter-spacing: 0.012em; }
.legal__block h2 { line-height: 1.2; }
.legal__block h3 { line-height: 1.28; }
/* Kontakt-Direktwerte (E-Mail/Telefon): ruhige Utility statt Poster-Schrift */
.cnt__direct-val { font-family: var(--font-body); font-weight: 500; }

/* ============================================================
   ANZIEHUNG — Custom Cursor · Magnetik · Wort-Reveals
   Interaktions-Metapher der Seite: Punkt-Raster, Cursor-Punkt und
   Buttons folgen derselben sanften Anziehungs-Physik. Der Cursor
   ist konzeptionell der orange Signaturpunkt des Claims.
   ============================================================ */
/* Punkt: sitzt präzise an der Maus */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  transition: width .25s var(--ease), height .25s var(--ease),
              opacity .2s ease;
}
/* Ring: folgt dem Punkt mit spürbarem Nachlauf — die sichtbare „Anziehung" */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 299;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 90, 0, 0.55);
  background: transparent;
  pointer-events: none;
  transition: width .3s var(--ease), height .3s var(--ease),
              background .3s var(--ease), border-color .3s var(--ease),
              opacity .2s ease;
}
/* über Interaktivem: Ring blüht auf und füllt sich leicht, Punkt schrumpft */
.cursor.is-link { width: 5px; height: 5px; }
.cursor-ring.is-link {
  width: 52px;
  height: 52px;
  background: rgba(255, 90, 0, 0.10);
  border-color: var(--accent);
}
/* Klick: Ring zieht sich zusammen */
.cursor-ring.is-down { width: 26px; height: 26px; }
.cursor.is-hidden, .cursor-ring.is-hidden { opacity: 0; }
/* nativer Cursor aus — Formularfelder behalten ihren (Text-Caret!) */
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.has-cursor input, .has-cursor textarea,
.has-cursor select, .has-cursor label { cursor: auto; }

/* Magnetische Elemente: weiches Nachziehen + Zurückfedern */
.magnetic { transition: transform .3s var(--ease); }

/* — Wort-für-Wort-Reveal (nur die großen Statements, [data-words]) — */
/* Block-Reveal aus: die Wort-Masken übernehmen die Inszenierung */
[data-words][data-reveal] { opacity: 1; transform: none; transition: none; }
[data-words] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Umlaut-Reserve oben, Komma-Reserve unten — Margins kompensieren das Layout */
  padding: 0.14em 0 0.08em;
  margin: -0.14em 0 -0.08em;
}
[data-words] .w-in {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .7s var(--ease);
}
[data-words].is-revealed .w-in { transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  /* Voller Hero wie am Desktop: füllt den Viewport, damit der fixierte Berg
     im schwarzen Hero bleibt und unten mit ihm abschließt (statt in Sektion 02
     zu ragen). Gesamter Inhalt unten als ein Block gruppiert (.hero justify-content
     flex-end). hero__top NICHT mehr dehnen (flex:0 0 auto), damit die Meta-Zeilen
     direkt über der Headline bleiben — gleicher Abstand wie Headline→Subline. */
  .hero__top {
    flex: 0 0 auto;
    align-items: flex-start;
    padding-top: 0;
  }
  .hero__main { margin-top: clamp(22px, 5vh, 40px); }
  .hero__bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: clamp(22px, 5vh, 40px);  /* gleicher Abstand wie Caption -> Headline */
  }

  /* Portfolio: Die Sphere läuft auch auf dem Phone (nur kleiner) — siehe JS.
     Nur falls 3D NICHT aktiv ist (reduced-motion / kein JS), zeigen wir die
     ruhige Swipe-Karten-Variante als Fallback. */
  .pf__stage:not(.is-3d) .pf__sphere {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .pf__stage:not(.is-3d) .pf__sphere::-webkit-scrollbar { display: none; }
  .pf__stage:not(.is-3d) .pf__item { scroll-snap-align: center; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  .hero__title .line > span,
  .hero__subline,
  .hero__cue,
  .hero__avail,
  .case__hero .case__back,
  .case__hero .case__kicker,
  .case__title-text,
  .case__hero .case__subline,
  .case__hero .case__facts { opacity: 1 !important; transform: none !important; }
  [data-words] .w-in { transform: none !important; }
  .menu__item a { transform: none; }
}