/* Vidotion — Startseite v3. Scoped auf body.home; Tokens kommen aus styles.css. */

/* ---------- Grundgerüst / Overlays ---------- */
.home {
  --svc-black: #060e0a;
  --wipe-green: #1e4d3d;
  /* Immer der normale Pfeil — kein Text-I-Beam über Überschriften/Absätzen.
     Links/Buttons behalten ihren Pointer (UA/eigene Regeln). */
  cursor: default;
}
.home .nav {
  z-index: 80;
}
.wipe {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  display: none;
}
.wipe svg {
  width: 100%;
  height: 100%;
  display: block;
}
.wipe--white path {
  fill: var(--paper);
}
/* Der grüne Wipe lebt IM main-Stacking-Kontext (main z2 aus styles.css):
   z2 + DOM nach .folio = über der gepinnten Bühne, unter dem Outro (z3) —
   der Warum-Content blendet direkt auf dem Grün ein. */
.wipe--green {
  z-index: 2;
}
.wipe--green path {
  fill: var(--wipe-green);
}

/* Fluid-Splash-Cursor: unter main (z2), über dem weißen Body — sichtbar nur
   in Sections mit transparentem Hintergrund (Prozess + Portfolio).
   Überschreibt das z-index 9 aus styles.css (dort läuft er ÜBER dem Content). */
.home #fluid {
  /* liegt IMMER auf z1: hinter allem Content (main z2), vor .pagebg (z0) —
     ein Ebenen-Wechsel würde "mal davor, mal dahinter"-Sprünge erzeugen */
  z-index: 1;
  display: none;
}

.zoomlayer {
  position: fixed;
  z-index: 44;
  display: none;
  background-size: cover;
  background-position: center;
  border-radius: 30px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.5);
}
.handoff-shade {
  position: fixed;
  inset: 0;
  z-index: 43;
  display: none;
  background: var(--svc-black);
  opacity: 0;
}

/* ---------- 1 · Hero ---------- */
.vhero {
  height: 520vh;
  position: relative;
}
.vhero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #f9f8f8; /* = Frame-BG rgb(249,248,248), gemessen */
}
.vhero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Naht Video → nächste Section: Der Frame-BG ist rgb(249,248,248) (gemessen,
   unterste Zeilen) — Stage, Canvas-Fill und .svc__bg nutzen EXAKT diese Farbe,
   dann gibt es keine Kante. Dieser Mini-Fade (6vh, farbgleich) gleicht nur die
   ±2-Restvarianz der Frame-Ränder aus — wäscht den Laptop NICHT aus. */
.vhero__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(249 248 248 / 0) 0%,
    rgb(249 248 248 / 0.9) 100%
  );
}
.vhero__intro,
.vhero__outro {
  position: absolute;
  /* links verankert statt zentriert: bleibt auf breiten Monitoren (2560+) im
     linken Drittel — klar neben Auge/Laptop statt mittig drüber. */
  left: clamp(28px, 5.2vw, 168px);
  width: auto;
  max-width: min(640px, 88vw);
  padding-inline: 0;
  z-index: 2;
}
/* Intro = großer Wordmark, unten zentriert (Arne: größer + Richtung Mitte).
   Zentrierung über text-align (KEIN transform → der Scroll-Fade im JS setzt
   transform:translateY und würde ein translateX(-50%) sonst überschreiben). */
/* rechts-mittig (Arne): zwischen Mitte und rechtem Rand, nicht am Rand kleben.
   right-Offset schiebt die rechte Wortkante nach innen → Wort-Mitte landet bei
   ~68–70% Breite über alle Auflösungen. */
.vhero__intro {
  left: auto;
  right: clamp(28px, 9vw, 300px);
  bottom: clamp(22px, 5vh, 76px);
  max-width: min(1100px, 82vw);
  text-align: right;
  padding-inline: 0;
}
/* weicher heller Schein hinter dem Wordmark — Lesbarkeit über der unteren Iris. */
.vhero__intro::before {
  content: "";
  position: absolute;
  inset: -24% -14% -34% -16%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 74% 76% at 66% 80%,
    rgb(252 253 252 / 0.84) 0%,
    rgb(252 253 252 / 0.48) 48%,
    rgb(252 253 252 / 0) 76%
  );
}
.vhero__wordmark {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(3.6rem, 1.4rem + 10vw, 12.5rem);
  line-height: 0.8;
  letter-spacing: -0.045em;
  /* rein schwarz (Arne) — klarer Kontrast zum grünen Auge, kein Dunkelgrün-Look */
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
}
/* spitzes V-Mark (Kit v2, schwarz-grau twotone) vor der Wortmarke — deutlich
   größer als der Schriftzug, wie im Lockup (Arne 2026-07-10) */
.vhero__wordmark-mark {
  height: 1.58em;
  width: auto;
  display: block;
  transform: translateY(-0.04em);
}
.vhero__wordmark {
  gap: 0.14em;
}
.vhero__outro {
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
}
.vhero__outro h1,
.vhero__outro h2 {
  font-family: var(--serif);
  /* etwas größer als der Standard-h2 — trägt die End-Aussage links allein */
  font-size: clamp(2.4rem, 1.3rem + 2.9vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.vhero__sub {
  max-width: 46ch;
  margin-top: var(--s4);
  color: var(--dim);
  font-size: var(--t-1);
}
.vhero__actions {
  display: flex;
  gap: var(--s4);
  margin-top: var(--s6);
  flex-wrap: wrap;
}
.vhero--end .vhero__outro {
  visibility: visible;
}
.vhero--end .vhero__intro {
  pointer-events: none;
}
.vhero__hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.vhero__hint span {
  display: block;
  width: 1px;
  height: 34px;
  background: var(--line-strong);
  overflow: hidden;
  position: relative;
}
.vhero__hint span::after {
  content: "";
  position: absolute;
  left: 0;
  top: -50%;
  width: 100%;
  height: 50%;
  background: var(--emerald);
  animation: hero-hint-drop 1.8s var(--ease) infinite;
}
@keyframes hero-hint-drop {
  0% {
    top: -50%;
  }
  70%,
  100% {
    top: 110%;
  }
}
.vhero__load {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 3;
  background: transparent;
}
.vhero__load i {
  display: block;
  height: 100%;
  background: var(--emerald);
  transform-origin: left center;
  transform: scaleX(0);
  transition:
    transform 0.25s linear,
    opacity 0.4s ease;
}

/* ---------- 2 · Leistungen / Scroll-Stack ---------- */
.svc {
  position: relative;
  /* KEIN isolation:isolate hier — fixe Kind-Layer müssen den Root-Stacking-Context behalten */
}
.svc__zone {
  position: relative;
}
/* Sticky-FX-Schicht: klebt am Viewport, solange die Zone ihn besitzt —
   kein Bleed über Hero/Prozess, kein Stacking-Kampf mit fixen Layern. */
/* R49: Höhe und Gegen-Margin MÜSSEN dieselbe Einheit haben. Vorher stand hier
   height:100dvh gegen margin-bottom:-100vh — auf iOS schrumpft dvh beim
   Einblenden der Adressleiste, vh nicht, also klafften beide um ~99px
   auseinander und schoben alles Folgende hin und her. lvh ist konstant (immer
   die volle Höhe ohne Leiste), deckt die Zone also lückenlos und bewegt sich
   beim Scrollen nicht mit. */
.svc__fx {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  z-index: 0;
  pointer-events: none;
}
.svc__bg,
.svc__dots,
.svc__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.svc__bg {
  z-index: 0;
  /* startet im Frame-BG-Ton (rgb 249,248,248) — nahtlos unters Hero-Video */
  background: #f9f8f8;
}
.svc__glow {
  z-index: 1;
  opacity: 0;
  /* großflächiger, weicher grüner Schein mittig hinter dem Karten-Stapel —
     leuchtet den Hintergrund rund um die Karten aus, nicht die Karten selbst */
  background: radial-gradient(
    ellipse 78% 66% at 50% 50%,
    oklch(0.62 0.14 160 / 0.5) 0%,
    oklch(0.48 0.11 160 / 0.26) 40%,
    oklch(0.4 0.09 160 / 0.1) 62%,
    transparent 78%
  );
  mix-blend-mode: screen;
}
.svc__dots {
  z-index: 1;
  opacity: 0;
  background-image: radial-gradient(
    oklch(0.86 0.06 162 / 0.72) 1.3px,
    transparent 1.5px
  );
  background-size: 26px 26px;
  /* Maske: rundum sichtbar (auch neben den breiteren Karten), fadet erst zu den
     Rändern hin weg (Arne: „um die Karten herum sehen, zum Rand ausblenden"). */
  -webkit-mask-image: radial-gradient(
    ellipse 68% 66% at 50% 50%,
    #000 46%,
    transparent 86%
  );
  mask-image: radial-gradient(
    ellipse 68% 66% at 50% 50%,
    #000 46%,
    transparent 86%
  );
}
/* Live-Modus: JS ersetzt das CSS-Raster durch ein cursor-reaktives Canvas
   (gleiche Optik, Dots weichen dem Cursor aus + leuchten auf).
   Maske bleibt auf dem Container und schneidet auch das Canvas zu. */
.svc__dots--live {
  background-image: none;
}
.svc__dots canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.svc__head {
  position: relative;
  z-index: 2;
  padding-top: 16vh;
  padding-bottom: 8vh;
  max-width: 760px;
}
.svc__head h2 {
  font-family: var(--serif);
  font-size: var(--h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: var(--s3);
}
.svc__head p {
  margin-top: var(--s4);
  color: var(--dim);
  max-width: 54ch;
}
.stack {
  position: relative;
  z-index: 2;
  --glow: 0;
}
.stack-card {
  /* Pin compositor-nativ: jede Karte klebt an ihrem top-Offset (s. --g1..g4),
     KEIN Main-Thread-Transform fürs Pinnen ⇒ kein Zittern bei Scrollbar/
     Tastatur (die scrollen am Compositor vorbei an Lenis). Tiefen-Skalierung
     macht weiter das JS (Origin top center ⇒ verschiebt die Pin-Position nicht). */
  position: sticky;
  /* breiter (Arne): füllt auf 2K mehr Fläche */
  width: min(1320px, 93vw);
  margin: 0 auto 14vh;
  min-height: clamp(480px, 60vh, 660px);
  border-radius: 30px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  transform-origin: top center;
  will-change: transform;
  backface-visibility: hidden;
  /* Karten selbst geben KEIN Licht mehr ab (sonst wirken die hinteren
     Karten flau) — nur ein neutraler Tiefen-Schatten. Das grüne Leuchten
     sitzt jetzt im Hintergrund (.svc__glow) um den Stapel herum. */
  box-shadow: 0 26px 64px rgb(0 0 0 / calc(0.18 + var(--glow) * 0.22));
}
.stack-card__txt {
  padding: clamp(28px, 4.4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
}
.stack-card__n {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.18em;
  opacity: 0.65;
}
.stack-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.stack-card p {
  max-width: 46ch;
  /* leicht größer als Body — passt zur breiteren Karte (scoped, nicht global) */
  font-size: clamp(1.05rem, 0.98rem + 0.28vw, 1.25rem);
  line-height: 1.55;
}
.stack-card__link {
  margin-top: var(--s3);
  align-self: flex-start;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.18s ease;
}
.stack-card__link:hover {
  opacity: 0.7;
}
.stack-card__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.stack-card__media {
  position: relative;
  min-height: 280px;
}
.stack-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Grün-Treppe: dunkel → hell */
.stack-card--g1 {
  background: linear-gradient(
    150deg,
    oklch(0.22 0.045 161),
    oklch(0.3 0.06 162)
  );
  color: oklch(0.97 0.015 160);
}
.stack-card--g2 {
  background: linear-gradient(
    150deg,
    oklch(0.31 0.06 162),
    oklch(0.41 0.072 163)
  );
  color: oklch(0.975 0.014 160);
}
.stack-card--g3 {
  background: linear-gradient(
    150deg,
    oklch(0.44 0.075 163),
    oklch(0.57 0.085 164)
  );
  color: oklch(0.99 0.01 160);
}
.stack-card--g4 {
  background: linear-gradient(
    150deg,
    oklch(0.87 0.06 165),
    oklch(0.95 0.032 160)
  );
  color: var(--emerald-ink);
}
/* Sticky-Pin-Offsets: leicht fächernd (14vh + 34px·i), muss zum JS-Scale
   (stackPos 0.14 / itemStack 34) passen; g4 (front) liegt zuoberst. */
.stack-card--g1 {
  top: 14vh;
}
.stack-card--g2 {
  top: calc(14vh + 16px);
}
.stack-card--g3 {
  top: calc(14vh + 32px);
}
.stack-card--g4 {
  top: calc(14vh + 48px);
}
.stack-card--g1 .stack-card__n,
.stack-card--g2 .stack-card__n,
.stack-card--g3 .stack-card__n {
  color: oklch(0.88 0.07 165);
  opacity: 1;
}
/* Zickzack: gerade Karten (02/04) gespiegelt — Foto links, Text rechts.
   Nur Desktop; mobil bleibt 1-spaltig (Foto oben, s. @media 820px). */
@media (min-width: 821px) {
  .stack-card--g2,
  .stack-card--g4 {
    grid-template-columns: 1fr 1.05fr;
  }
  .stack-card--g2 .stack-card__media,
  .stack-card--g4 .stack-card__media {
    order: -1;
  }
}
.stack-end {
  height: 24vh;
}
.handoff {
  position: relative;
  height: 1px;
}
.stack-release {
  height: 1px;
}

/* ---------- 3 · Prozess: gepinnte Step-Sequenz ---------- */
.prozess {
  position: relative;
  z-index: 2;
  /* transparent statt paper: der Fluid-Cursor (fixed, z1) scheint zwischen
     weißem Body und Section-Content durch */
  background: transparent;
}
.prozess__stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 8vh 0 5vh;
}
.prozess__stage > .wrap {
  width: 100%;
  /* Framer-Maßstab: die Prozess-Bühne darf breiter als der Standard-Wrap */
  max-width: min(1440px, 94vw);
}
/* groß gedacht (Framer-Template-Maßstab): Headline füllt die Breite,
   Buchstaben sind einzeln gewrappt (Warp-Hover) */
.prozess h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.1rem + 4.2vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: var(--s3);
  max-width: 24ch;
}
/* Proximity-Titel ([data-warp], alle Sections — war fälschlich nur auf
   .prozess gescoped → auf owhy/ovoices/ofaq sprangen Wörter beim Fetterwerden
   in die Zeile drüber). .ww hält Wörter zusammen, .wc-Breite wird per JS nach
   fonts.ready eingefroren → wght-Änderung verschiebt das Layout nicht mehr. */
.ww {
  display: inline-block;
  white-space: nowrap;
}
.wc {
  display: inline-block;
  text-align: center;
  will-change: transform, font-variation-settings;
  /* scale wächst aus der Grundlinie — Zeile bleibt ruhig */
  transform-origin: center 78%;
}
.prozess__body {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: clamp(20px, 3vw, 44px);
  margin-top: var(--s6);
  align-items: stretch;
}
/* Fortschritts-Balken: sichtbar nur im gepinnten Modus */
.prozess__bars {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.prozess--pin .prozess__bars {
  display: flex;
}
/* --on (0..1) kommt live aus dem Scrub und füllt den Balken exakt mit der
   Präsenz seines Steps — kein hartes Umschalten mehr. */
.pbar {
  --on: 0;
  position: relative;
  display: block;
  width: 4px;
  flex: 0 0 clamp(44px, 8vh, 84px);
  border-radius: 999px;
  background: var(--line-strong);
  transform: scaleX(calc(1 + var(--on) * 0.6));
  transform-origin: left center;
}
.pbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--emerald);
  box-shadow: 0 0 14px oklch(0.62 0.14 160 / calc(var(--on) * 0.6));
  opacity: var(--on);
}
/* Reduced-Motion / kein Scrub: aktiver Balken statisch grün */
.pbar.is-active {
  --on: 1;
}
/* Step-Viewport: Steps liegen übereinander, JS blendet durch */
.prozess__viewport {
  position: relative;
}
.prozess--pin .prozess__viewport {
  height: clamp(380px, 58vh, 600px);
  overflow: hidden;
}
/* Step füllt die Bühne: riesige Ghost-Nummer links, Text mittig, Bild groß */
.pstep {
  display: grid;
  grid-template-columns: auto 0.95fr 1.2fr;
  gap: clamp(20px, 3.4vw, 56px);
  align-items: center;
}
.prozess--pin .pstep {
  position: absolute;
  inset: 0;
  will-change: transform, filter, opacity;
}
/* Ohne Pin (kein JS / reduced motion): Steps normal untereinander */
.prozess:not(.prozess--pin) .pstep {
  margin-top: var(--s7);
}
/* Foto mit Border-Beam (feiner Rahmen + langsam umlaufender Licht-Akzent)
   und mehrschichtigem weichen Schatten. overflow/box-shadow überschreiben
   die Alt-Regeln aus styles.css (V4-Prozess). */
.pstep__media {
  position: relative;
  width: 100%;
  max-width: 840px;
  aspect-ratio: 16 / 10.5;
  max-height: clamp(340px, 56vh, 580px);
  justify-self: end;
  overflow: visible;
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgb(10 25 18 / 0.06),
    0 10px 28px rgb(10 25 18 / 0.1),
    0 30px 60px -18px rgb(10 25 18 / 0.22);
}
.pstep__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Border-Beam (Magic-UI-Stil, CSS-Port): statischer Hairline-Rahmen,
   darauf ein umlaufendes Licht-Segment */
.pstep__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background:
    conic-gradient(
      from var(--ringspin),
      transparent 0deg 296deg,
      oklch(0.6 0.11 162 / 0.15) 316deg,
      oklch(0.82 0.15 162) 338deg,
      oklch(0.6 0.11 162 / 0.15) 352deg,
      transparent 360deg
    ),
    linear-gradient(oklch(0.25 0.03 162 / 0.16), oklch(0.25 0.03 162 / 0.16));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: mq-ring-spin 7s linear infinite;
  pointer-events: none;
}
/* Liquid-Glass-Badge mit der Schrittnummer auf dem Foto */
.pstep__media::before {
  content: attr(data-n);
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 7px 15px;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: #fff;
  background: oklch(0.24 0.03 162 / 0.35);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgb(255 255 255 / 0.35);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    0 4px 14px rgb(0 0 0 / 0.18);
}
/* riesige Ghost-Nummer (Outline) links — Framer-Template-Signal */
.pstep__big {
  font-family: var(--serif);
  font-size: clamp(6rem, 11vw, 13rem);
  line-height: 0.82;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px oklch(0.4 0.076 162 / 0.32);
  user-select: none;
  align-self: center;
}
@supports not (-webkit-text-stroke: 2px black) {
  .pstep__big {
    color: oklch(0.9 0.03 160);
  }
}
.pstep__n {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emerald);
}
.pstep h3 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem);
  line-height: 1.02;
  margin-top: var(--s3);
}
.pstep p {
  color: var(--dim);
  margin-top: var(--s4);
  max-width: 44ch;
  font-size: var(--t-1);
}
/* Meta-Strich mit Kennwerten (Dauer, Reaktionszeit …) */
.pstep__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(28px, 3.4vw, 56px);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-strong);
}
.pstep__meta em {
  display: block;
  font-style: normal;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 1.1vw, 2rem);
  color: var(--emerald);
  line-height: 1.1;
}
.pstep__meta span {
  font-size: 0.86rem;
  color: var(--faint);
  letter-spacing: 0.03em;
}

/* ---------- 4 · Portfolio / 3D-Karussell ---------- */
.folio {
  position: relative;
  z-index: 2;
  /* transparent — siehe .prozess (Fluid-Cursor-Layer) */
  background: transparent;
}
.folio__stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6vh 0 3.5vh;
  overflow: hidden;
}
/* groß gedacht: Headline läuft über die volle Monitor-Breite, sitzt oben */
.folio__head {
  max-width: min(1720px, 94vw);
}
/* Header-Farben laufen mit der BG-Journey (Arne 2026-07-10): solange der
   Hintergrund noch schwarz/dunkel ist, heller Text; sobald das Grau steht,
   blendet JS (.is-light) auf die dunklen Farben um. */
.folio__head h2 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1rem + 4.6vw, 6.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-top: var(--s3);
  color: oklch(0.95 0.02 160);
  transition: color 0.6s ease;
  max-width: 18ch;
}
.folio__head p {
  color: oklch(0.82 0.02 160);
  margin-top: var(--s4);
  transition: color 0.6s ease;
}
.folio__head .kicker {
  color: oklch(0.88 0.07 165);
  transition: color 0.6s ease;
}
.folio__head.is-light h2 {
  color: oklch(0.28 0.04 160);
}
.folio__head.is-light p {
  color: oklch(0.42 0.025 160);
}
.folio__head.is-light .kicker {
  color: oklch(0.5 0.12 162);
}
/* Flaches Endlos-Marquee über die volle Viewport-Breite */
.mq {
  position: relative;
  margin-top: var(--s6);
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  /* weiche Kanten links/rechts */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
/* zweite, gegenläufige Reihe (JS-Klon) sitzt dicht unter der ersten */
.mq--rev {
  margin-top: 0;
}
.mq__track {
  display: flex;
  gap: clamp(16px, 1.8vw, 26px);
  width: max-content;
  will-change: transform;
  padding: 13px 0;
}
.mq__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 21vw, 360px);
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow:
    0 1px 2px rgb(10 25 18 / 0.08),
    0 14px 34px rgb(10 25 18 / 0.14);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.mq__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.mq__card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 20px 16px;
  color: #fff;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  background: linear-gradient(to top, rgb(4 14 9 / 0.82), transparent);
}
.mq__card figcaption span {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.88 0.07 165);
  margin-bottom: 4px;
}
/* Hover: Karte hebt sich mit Glow + kurzem Wobble, Marquee läuft weiter */
@property --ringspin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.mq__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--ringspin),
    transparent 0deg 250deg,
    oklch(0.72 0.15 160 / 0.25) 285deg,
    oklch(0.85 0.16 162) 320deg,
    oklch(0.72 0.15 160 / 0.25) 350deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: mq-ring-spin 2.6s linear infinite paused;
  pointer-events: none;
}
.mq__card:hover {
  transform: scale(1.045);
  box-shadow:
    0 2px 4px rgb(10 25 18 / 0.08),
    0 22px 50px rgb(10 25 18 / 0.2),
    0 0 44px oklch(0.72 0.16 160 / 0.3);
  animation: mq-wobble 0.55s var(--ease) 1;
}
.mq__card:hover::after {
  opacity: 1;
  animation-play-state: running;
}
@keyframes mq-ring-spin {
  to {
    --ringspin: 360deg;
  }
}
@keyframes mq-wobble {
  0% {
    rotate: 0deg;
  }
  30% {
    rotate: 1.1deg;
  }
  60% {
    rotate: -0.8deg;
  }
  100% {
    rotate: 0deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mq__card::after,
  .mq__card:hover,
  .pstep__media::after {
    animation: none;
  }
}
/* Fallback-Ansicht (reduced motion / kein JS): flaches Raster */
.mq--flat {
  width: 100%;
  left: auto;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.mq--flat .mq__track {
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
}
.mq--flat .mq__card {
  width: clamp(260px, 30vw, 380px);
}
.mq--flat .mq__card::after {
  display: none;
}

/* ---------- ScrollX-Filmstrip (Portfolio) ----------
   Full-bleed horizontaler Streifen großer Portrait-Karten. Der Track wird
   pin-getrieben (home.js folioPin) nach links geschoben; danach setzt die
   grüne Page-Transition ein. Hover/Focus deckt Badges + Beschreibung auf. */
.sxc {
  position: relative;
  /* full-bleed über die ganze Viewport-Breite */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin-top: clamp(32px, 6vh, 88px);
  /* füllt den Restraum unter dem großen Head, Streifen vertikal zentriert */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sxc__track {
  display: flex;
  align-items: center;
  /* Arne: Karten enger aneinander */
  gap: clamp(10px, 0.9vw, 18px);
  padding-inline: clamp(24px, 5vw, 90px);
  width: max-content;
  margin: 0;
  list-style: none;
  will-change: transform;
}
.pcard {
  position: relative;
  flex: 0 0 auto;
  /* Höhe an die VERFÜGBARE Viewport-Höhe gekoppelt (64vh sitzt auch auf Full-HD
     1080 sicher unter Head+Padding → keine abgeschnittenen Karten mehr) und
     wächst automatisch auf höheren 2K/4K-Screens. Breite skaliert bis 640 →
     füllt große Monitore besser (Arne: auf 2K zu klein). */
  /* hochkant (Arne 2026-07-10): schmaler, damit auf 2K fünf Karten
     gleichzeitig sichtbar sind statt vier fast-quadratischer */
  width: clamp(260px, 18vw, 470px);
  /* niedriger, damit auf Full-HD (auch im Fenster, nicht Vollbild) oben+unten
     Hintergrund frei bleibt statt bis zur Progress-Leiste zu reichen (Arne). */
  height: clamp(340px, 55vh, 900px);
  border-radius: 24px;
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate;
  box-shadow:
    0 1px 2px rgb(10 25 18 / 0.07),
    0 10px 24px -8px rgb(10 25 18 / 0.18),
    0 34px 60px -30px rgb(10 25 18 / 0.28);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transform: scale(1.03);
  transition: transform 0.7s var(--ease);
}
.pcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(5 14 10 / 0.84) 0%,
    rgb(5 14 10 / 0.36) 30%,
    rgb(5 14 10 / 0) 60%
  );
  transition: opacity 0.5s var(--ease);
}
.pcard__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.8vw, 32px);
  color: #fff;
}
.pcard__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* schiebt die Meta-Zeile ganz nach unten */
  margin-bottom: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.pcard__badges span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border-radius: 999px;
  color: oklch(0.96 0.02 165);
  background: rgb(255 255 255 / 0.13);
  border: 1px solid rgb(255 255 255 / 0.22);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.pcard__type {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.9 0.09 165);
  margin-bottom: 8px;
}
.pcard__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 0.9rem + 1.1vw, 2.15rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
/* Beschreibung fährt sauber in der Höhe auf (0fr → 1fr), kein Layout-Sprung */
.pcard__descWrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.pcard__desc {
  overflow: hidden;
  min-height: 0;
  margin-top: 0;
  max-width: 34ch;
  color: rgb(255 255 255 / 0.86);
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0;
  transition:
    opacity 0.45s var(--ease),
    margin-top 0.45s var(--ease);
}
/* Reveal-Zustand: Hover ODER Tastatur-Fokus */
.pcard:hover,
.pcard:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgb(10 25 18 / 0.08),
    0 18px 40px -10px rgb(10 25 18 / 0.28),
    0 44px 80px -32px rgb(10 25 18 / 0.36);
}
.pcard:focus-visible {
  outline: 3px solid oklch(0.74 0.15 162);
  outline-offset: 3px;
}
.pcard:hover .pcard__img,
.pcard:focus-within .pcard__img {
  transform: scale(1.09);
}
.pcard:hover .pcard__badges,
.pcard:focus-within .pcard__badges {
  opacity: 1;
  transform: none;
}
.pcard:hover .pcard__descWrap,
.pcard:focus-within .pcard__descWrap {
  grid-template-rows: 1fr;
}
.pcard:hover .pcard__desc,
.pcard:focus-within .pcard__desc {
  opacity: 1;
  margin-top: 12px;
}
/* Fortschritts-Balken unter dem Streifen */
.sxc__progress {
  width: min(1720px, 86vw);
  height: 3px;
  margin: clamp(22px, 3.4vh, 44px) auto 0;
  background: rgb(20 45 32 / 0.16);
  border-radius: 999px;
  overflow: hidden;
}
.sxc__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, oklch(0.6 0.1 162), oklch(0.78 0.15 162));
  border-radius: inherit;
}
/* Fallback (reduced motion / kein JS): flaches, wrappendes Raster */
.sxc--flat {
  width: 100%;
  left: auto;
  transform: none;
}
.sxc--flat .sxc__track {
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
  padding-inline: 0;
  gap: var(--s4);
}
.sxc--flat .pcard {
  width: clamp(260px, 30vw, 360px);
  height: auto;
  aspect-ratio: 4 / 5;
}
.sxc--flat .sxc__progress {
  display: none;
}

/* ---------- 5 · Outro (grün → schwarz) ---------- */
.outro {
  position: relative;
  z-index: 3;
  color: #fff;
}
/* Mit aktivem Portfolio-Pin ist das Outro selbst der grüne Vorhang:
   es schiebt sich (margin -100vh) von unten über die gepinnte Portfolio-Bühne,
   der Content liegt auf der Transition und fährt mit hoch. */
.has-folio-pin .outro {
  margin-top: -100vh;
}
.outro__bg {
  position: absolute;
  /* nach oben verlängert: schließt die kurze Lücke am Pin-Release, wo der grüne
     Wipe schon aus ist, das Outro aber noch nicht ganz oben sitzt (sonst blitzt
     dort für ~2 Frames der helle Section-Rand durch). */
  top: -18vh;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: var(--wipe-green);
}
.outro__shader {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  display: none;
}
.outro section,
.outro footer {
  position: relative;
  z-index: 1;
}
.outro .kicker {
  color: oklch(0.88 0.07 165);
}
.outro h2 {
  font-family: var(--serif);
  font-size: var(--h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: var(--s3);
}
/* Loslegen-Formular im dunklen Outro: Kicker/Headline erben Weiß, nur der
   Fließtext muss aufgehellt werden. Zone = Viewport minus Footer (364px) und
   Inhalt vertikal zentriert → am Seitenende steht der Block komplett sichtbar
   mittig zwischen Nav und Fußzeile (Arne 2026-07-10, 2K). */
.outro .uform {
  min-height: calc(100vh - 364px);
  min-height: calc(100svh - 364px);
  display: grid;
  align-content: center;
  /* top-Padding ≈ Nav-Unterkante → zentriert zwischen Nav und Fußzeile,
     Karte rutscht nie unter die fixe Menüleiste */
  padding: 110px 0 20px;
}
.outro .uform__sub {
  color: oklch(0.86 0.03 165);
}
/* Startseite: einspaltig-zentriert — „Loslegen" ÜBER der Karte, Karte in
   FAQ-Breite (Arne 2026-07-10). Überschreibt das 2-Spalten-Grid der Subpages. */
.outro .uform__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.outro .uform__intro {
  max-width: 62ch;
}
.outro .uform__h {
  max-width: none;
  margin-inline: auto;
  /* kompakter, damit Kicker+Titel+Karte am Seitenende komplett in die
     (100svh − Footer)-Zone passen */
  font-size: clamp(2rem, 1.3rem + 2.1vw, 3.4rem);
}
/* Untertitel auf der Startseite weglassen — „nicht so viel Text" (Arne) */
.outro .uform__intro .uform__sub {
  display: none;
}
.outro .uform__card {
  margin-top: var(--s6);
  width: min(1112px, 92vw); /* = FAQ-Boxen-Breite (ofaq .wrap-Innenbreite) */
  text-align: left;
}
/* Padding oben so, dass der Content nach dem Wipe eher mittig steht
   und beim Weiterscrollen hochfährt */
.owhy {
  padding: 30vh 0 12vh;
}
/* breiter + größer für 2K (vorher schmales .wrap = viel Leerraum) */
.owhy > .wrap,
.ovoices__head {
  max-width: min(1640px, 92vw);
}
.owhy h2 {
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.6rem);
  max-width: 18ch;
}
.owhy__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(36px, 5vw, 110px);
  align-items: center;
}
.owhy__stats {
  gap: clamp(16px, 1.4vw, 22px);
}
.owhy__grid > div > p:last-child {
  margin-top: var(--s4);
  color: oklch(0.9 0.02 160);
  max-width: 44ch;
}
.owhy__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* .stat = GSAP-Entrance-Ziel (opacity/y/blur), .stat__in = Tilt-Ziel des
   Cursor-Effekts — getrennte Elemente, damit sich die Transforms nicht beißen */
.stat {
  perspective: 700px;
}
.stat__in {
  height: 100%;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.06);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 26px 22px;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.3s var(--ease);
}
/* Glare: wandernder Glanzpunkt am Cursor (JS setzt --gx/--gy) */
.stat__in::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgb(255 255 255 / 0.16),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .stat:hover .stat__in {
    border-color: oklch(0.88 0.07 165 / 0.55);
  }
  .stat:hover .stat__in::after {
    opacity: 1;
  }
  /* Fokus-Effekt: gehovertes Kästchen bleibt voll, Geschwister treten zurück */
  .owhy__stats:hover .stat:not(:hover),
  .ovoices__grid:hover .voice:not(:hover) {
    opacity: 0.55;
  }
  .owhy__stats .stat,
  .ovoices__grid .voice {
    transition: opacity 0.35s var(--ease);
  }
}
.stat strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.9rem);
  line-height: 1;
}
.stat span {
  display: block;
  margin-top: 8px;
  color: oklch(0.87 0.03 162);
  font-size: 0.95rem;
}
.ovoices {
  padding: 10vh 0;
}
.ovoices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: var(--s7);
}
.voice {
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.06);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.voice blockquote {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.5;
}
/* Wort-für-Wort-Hover: JS splittet das Zitat in Wort-Spans; beim Hover
   dimmt alles kurz ab und leuchtet dann Wort für Wort wieder auf */
.voice blockquote .vw {
  display: inline-block;
  will-change: opacity;
}
@media (hover: hover) and (pointer: fine) {
  .voice {
    transition: border-color 0.3s var(--ease);
  }
  .voice:hover {
    border-color: oklch(0.88 0.07 165 / 0.45);
  }
}
.voice figcaption {
  color: oklch(0.87 0.03 162);
  font-size: 0.9rem;
}
/* ---------- Stimmen: 2-Reihen-Sterne-Marquee (gegenläufig). Hover pausiert die
   Reihe + voiceWords spielt das Zitat Wort für Wort ab (Effekt bleibt). ------- */
.ovoices__head {
  margin-bottom: clamp(32px, 5vh, 64px);
}
.voice__stars {
  color: #ffca4a;
  font-size: 1.02rem;
  letter-spacing: 3px;
  line-height: 1;
}
.vmar {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 26px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}
.vmar__row {
  overflow: hidden;
}
.vmar__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.vmar__track--l {
  animation: vmar-l 62s linear infinite;
}
.vmar__track--r {
  animation: vmar-r 62s linear infinite;
}
.vmar__group {
  display: flex;
  gap: clamp(16px, 1.6vw, 24px);
  padding-right: clamp(16px, 1.6vw, 24px);
  flex: 0 0 auto;
}
/* R49: translate3d statt translateX — erzwingt eine echte GPU-Ebene. Mit dem
   2D-Transform komponierte iOS das Band zusammen mit der mask-image-Kante auf
   der CPU und setzte es bei dem sehr langsamen Lauf (~15px/s) zwischen
   Sub-Pixel-Positionen um: Arnes „kleine Springer" im Stimmen-Bereich. */
@keyframes vmar-l {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes vmar-r {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
/* R47 (Arne): Laufband läuft IMMER weiter — Hover pausiert nicht mehr.
   Karten-Hover (Border + Wort-Stagger) bleibt davon unberührt. */
.vmar .voice {
  flex: 0 0 auto;
  width: clamp(290px, 24vw, 384px);
  margin: 0;
  gap: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .vmar {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .vmar__track {
    animation: none;
    flex-wrap: wrap;
  }
  .vmar__group[aria-hidden="true"] {
    display: none;
  }
}
@media (max-width: 700px) {
  .vmar .voice {
    width: 80vw;
  }
}
.ofaq {
  padding: 10vh 0;
}
.ofaq details {
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.06);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  margin-top: 14px;
  overflow: hidden;
}
.ofaq details:first-of-type {
  margin-top: var(--s6);
}
.ofaq summary {
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 52px;
}
.ofaq summary::-webkit-details-marker {
  display: none;
}
.ofaq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: 1.4rem;
  color: oklch(0.88 0.07 165);
  transition: transform 0.25s var(--ease);
}
.ofaq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.ofaq summary:focus-visible {
  outline: 2px solid oklch(0.88 0.07 165);
  outline-offset: -2px;
}
.ofaq details p {
  padding: 0 22px 20px;
  color: oklch(0.9 0.02 160);
  max-width: 70ch;
}
.octa {
  /* „Loslegen" genau mittig im Bereich ÜBER dem Footer: Höhe = Viewport minus
     Footer (~330px) → am Seitenende sitzt octa oben, Footer unten, Content
     vertikal zentriert dazwischen. FAQ blurren derweil raus (faqBlurOut). */
  min-height: calc(100vh - 330px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8vh 0;
}
.octa h2 {
  max-width: 22ch;
  margin-inline: auto;
}
.octa__actions {
  display: flex;
  gap: var(--s4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--s6);
}
.btn--ghostlight {
  border: 1px solid rgb(255 255 255 / 0.45);
  color: #fff;
  background: transparent;
}
.btn--ghostlight:hover {
  border-color: oklch(0.88 0.07 165);
  color: oklch(0.88 0.07 165);
}
.octa__note {
  margin-top: var(--s5);
  color: oklch(0.87 0.03 162);
  font-size: 0.95rem;
}
.ofoot {
  padding: 8vh 0 48px;
}
.ofoot__grid {
  display: flex;
  justify-content: space-between;
  gap: clamp(40px, 8vw, 120px);
  flex-wrap: wrap;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  padding-top: 44px;
}
.brand--light {
  color: #fff;
}
.ofoot p {
  margin-top: 14px;
  color: oklch(0.85 0.03 165);
  font-size: 0.92rem;
  max-width: 34ch;
}
.ofoot__brand {
  flex: 0 1 320px;
}
/* Spalten-Gruppe hält zusammen (rechts), statt jede Spalte auseinander-
   zuziehen — so entstehen keine großen Lücken mehr */
.ofoot__cols {
  display: flex;
  gap: clamp(36px, 5vw, 72px);
  flex-wrap: wrap;
}
/* Social-Icons (Verlinkung folgt — Platzhalter) */
.ofoot__social {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.soc {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.05);
  color: oklch(0.88 0.07 165);
  transition:
    border-color 0.25s var(--ease),
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.soc svg {
  width: 19px;
  height: 19px;
}
.soc:hover {
  border-color: oklch(0.88 0.07 165 / 0.6);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  transform: translateY(-2px);
}
.soc:focus-visible {
  outline: 2px solid oklch(0.88 0.07 165);
  outline-offset: 3px;
}
/* Link-Spalten: Leistungen / Rechtliches */
.ofoot__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.ofoot__col h4 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.88 0.07 165);
  margin-bottom: 6px;
}
.ofoot__col a {
  color: oklch(0.87 0.03 162);
  font-size: 0.95rem;
}
.ofoot__col a:hover {
  color: #fff;
}
.ofoot__col a:focus-visible {
  outline: 2px solid oklch(0.88 0.07 165);
  outline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .owhy__grid {
    grid-template-columns: 1fr;
  }
  .ovoices__grid {
    grid-template-columns: 1fr;
  }
  /* R49: 24 Karten mit live berechnetem backdrop-filter sind auf dem iPhone
     die teuerste Operation der ganzen Seite — Safari blurrt beim Scrollen für
     jede sichtbare Karte den Hintergrund neu, das erzeugte Arnes „kleine
     Springer" im Stimmen-Bereich. Mobil durch eine opake Fläche ersetzen:
     optisch praktisch identisch (der Hintergrund dort ist ohnehin fast
     einfarbig dunkel), aber ohne GPU-Last pro Frame. */
  .voice {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(255 255 255 / 0.08);
  }
  .prozess__body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .prozess__bars {
    flex-direction: row;
    justify-content: flex-start;
  }
  .pbar {
    width: auto;
    flex: 0 0 clamp(44px, 10vw, 84px);
    height: 4px;
    transform: scaleY(calc(1 + var(--on) * 0.6));
    transform-origin: center;
  }
  .pstep {
    grid-template-columns: 1fr;
    gap: 14px;
    align-content: start;
  }
  /* mobil frisst die Ghost-Nummer nur Platz */
  .pstep__big {
    display: none;
  }
  .pstep__media {
    order: -1;
    max-height: 26vh;
    aspect-ratio: 16 / 9;
    height: auto;
  }
  /* Head + kompakteres Step-Layout, damit alles UNTER die Menü-Pille passt
     (die fixe Nav überdeckte sonst „Wie wir arbeiten") und die Kennwerte-Zeile
     nicht abgeschnitten wird. Stage nicht mehr vertikal zentriert — der Inhalt
     startet mit sauberem Abstand unter der Nav. */
  .prozess__stage {
    align-items: flex-start;
    padding-top: clamp(84px, 12vh, 116px);
    padding-bottom: 3vh;
  }
  .prozess h2 {
    font-size: clamp(1.75rem, 1rem + 3.2vw, 2.6rem);
    margin-top: var(--s3);
  }
  .prozess__body {
    margin-top: var(--s5);
  }
  .pstep h3 {
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  }
  .pstep p {
    margin-top: var(--s3);
  }
  .pstep__meta {
    margin-top: var(--s4);
    padding-top: var(--s3);
  }
  .prozess--pin .prozess__viewport {
    height: clamp(430px, 58vh, 540px);
  }
}
@media (max-width: 820px) {
  .vhero {
    height: 380vh;
  }
  .vhero__intro {
    bottom: 7vh;
  }
  /* Hero-Outro-Text bleibt LINKS neben dem Laptop (Arne): oben-links verankert
     statt vertikal zentriert, Spaltenbreite so begrenzt, dass Headline + Text
     nie über Bildschirm/Tastatur des Laptops laufen (dunkle Schrift auf dunklem
     Laptop-Rand war unlesbar). Etwas kleiner, damit es in die linke Zone passt. */
  .vhero__outro {
    top: clamp(84px, 12.5vh, 140px);
    transform: none;
    max-width: 57vw;
  }
  .vhero__outro h1,
.vhero__outro h2 {
    font-size: clamp(1.8rem, 6.2vw, 2.5rem);
    max-width: 100%;
  }
  .vhero__sub {
    max-width: 100%;
    font-size: 0.98rem;
    margin-top: var(--s3);
  }
  .vhero__actions {
    margin-top: var(--s5);
  }
  .stack-card {
    grid-template-columns: 1fr;
    min-height: 0;
    width: min(560px, 92vw);
  }
  /* mobil enger gefächert (12vh + 22px·i, passt zum JS-Scale mobil) */
  .stack-card--g1 {
    top: 12vh;
  }
  .stack-card--g2 {
    top: calc(12vh + 12px);
  }
  .stack-card--g3 {
    top: calc(12vh + 24px);
  }
  .stack-card--g4 {
    top: calc(12vh + 36px);
  }
  .stack-card__media {
    order: -1;
    min-height: 200px;
    aspect-ratio: 16 / 10;
  }
  .mq__card {
    width: clamp(260px, 72vw, 340px);
  }
  /* mobil reicht EINE Reihe — zwei übereinander sprengen die Höhe */
  .mq--rev {
    display: none;
  }
  .pcard {
    width: clamp(258px, 78vw, 340px);
    height: clamp(340px, 56vh, 520px);
    border-radius: 20px;
  }
  .sxc__track {
    padding-inline: clamp(16px, 6vw, 40px);
  }
  .folio__stage {
    /* Kopf mit sauberem Abstand unter der fixen Nav-Pille starten (wie Prozess),
       damit „Portfolio" nicht an der Menüleiste klebt */
    padding-top: clamp(78px, 11vh, 104px);
    padding-bottom: 12vh;
  }
  .folio__head h2 {
    font-size: clamp(2.1rem, 1rem + 5vw, 3.2rem);
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .home #fluid {
    display: none !important;
  }
  /* Portfolio: kein horizontales Scrollen — Reveals dauerhaft offen zeigen */
  .pcard__badges {
    opacity: 1;
    transform: none;
  }
  .pcard__descWrap {
    grid-template-rows: 1fr;
  }
  .pcard__desc {
    opacity: 1;
    margin-top: 12px;
  }
  .owhy__stats:hover .stat:not(:hover),
  .ovoices__grid:hover .voice:not(:hover) {
    opacity: 1;
  }
  .stat__in {
    transition: none;
    will-change: auto;
  }
  .vhero {
    height: auto;
  }
  .vhero__stage {
    position: relative;
    height: 100vh;
  }
  .vhero__hint,
  .vhero__load {
    display: none;
  }
  .vhero__hint span::after {
    animation: none;
  }
  .svc__bg,
  .svc__dots,
  .svc__glow {
    display: none !important;
  }
  .stack-card {
    position: static !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ---------- 3b · Förderung & Beratung (Fuel-Stil) ----------
   Schiebt sich mit schräger Oberkante über den GEPINNTEN Prozess. Eigener BG
   nur während des Rise — danach übernimmt .pagebg (unter dem Fluid-Cursor),
   damit der Cursor-Effekt durchläuft und der Farbverlauf bis ins Portfolio
   weitergeht. */
.pagebg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: rgb(13, 23, 18);
}
.pagebg--on {
  opacity: 1;
}
/* Förderung v2 (Arne 2026-07-10): Panel kommt GRAU hoch (Fuel-Stil), beim
   Weiterscrollen lerpt der Hintergrund flüssig zu Schwarz (pbG in home.js);
   Textfarben wechseln per .foerder--dark mit. */
.foerder {
  position: relative;
  z-index: 4;
  margin-top: -100vh;
  /* Referenzlinie sitzt KNAPP unter der steigenden Panel-Kante (Arne 2026-07-10:
     „ein Finger drunter" — 20vh war viel zu viel Luft auf 2K) */
  padding: clamp(44px, 5vh, 76px) 0 32vh;
  color: oklch(0.26 0.03 160);
  background: rgb(171, 178, 174);
}
.foerder--dark {
  color: #fff;
}
/* Live-Modus (JS an): Section ist von Anfang an transparent — die dunkle
   Panel-Fläche zeichnet .pagebg (z0, unterm Fluid). Ohne JS/REDUCE bleibt
   der dunkle Fallback-BG oben stehen. */
.foerder--live,
.foerder--merged {
  background: transparent;
}
/* Fuel-Referenzlinie: kleine Labels über einem horizontalen Strich, der fast
   die volle Breite spannt — die schräge Kante steigt dahinter hoch */
.foerder__rule {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px clamp(20px, 3vw, 56px);
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(10 18 14 / 0.3);
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: oklch(0.34 0.02 160 / 0.85);
  transition:
    color 0.6s ease,
    border-color 0.6s ease;
}
.foerder--dark .foerder__rule {
  border-color: rgb(255 255 255 / 0.22);
  color: rgb(255 255 255 / 0.68);
}
.foerder__rule em {
  font-style: normal;
  font-family: var(--serif);
  margin-right: 8px;
  color: oklch(0.42 0.1 162);
  transition: color 0.6s ease;
}
.foerder--dark .foerder__rule em {
  color: oklch(0.86 0.11 162);
}
.foerder__rule-label,
.foerder__rule-year {
  font-weight: 700;
}
.foerder__title {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 0.8rem + 6vw, 7rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: clamp(32px, 5vh, 64px);
  max-width: 24ch;
  transition: color 0.6s ease;
}
.foerder__title .fw {
  display: inline-block;
  white-space: nowrap;
}
.foerder__title .fc {
  opacity: 0.16; /* JS-Sweep hebt auf 1 */
}
.foerder__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  margin-top: clamp(48px, 8vh, 104px);
}
@media (max-width: 900px) {
  /* Überlappung = 100vh (wie Desktop): so endet der Förder-Rise EXAKT wenn der
     Prozess-Pin ausläuft. Bei nur -45vh lief der Rise ~0,5 Viewport LÄNGER als
     der Pin → der „Wie wir arbeiten"-Prozess klinkte mitten im Rise aus, wurde
     mit hochgescrollt und sein Clip gab dahinter Body-Weiß frei (Arne-Bug).
     Der Prozess bleibt jetzt gepinnt STEHEN, bis das Grau ihn ganz deckt. */
  .foerder {
    margin-top: -100vh;
    padding: 16vh 0 24vh;
  }
  .foerder__grid {
    grid-template-columns: 1fr;
  }
  /* mobil nur Label + Jahr in den Ecken — die 01/02/03-Items wrappen hässlich */
  .foerder__rule .foerder__rule-item {
    display: none;
  }
}
.foerder__media {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 44px 100px -55px rgba(0, 0, 0, 0.85);
}
.foerder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* zarte Vignette, damit das helle Foto ins Dunkel passt */
.foerder__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 55%,
    rgba(8, 14, 11, 0.35) 100%
  );
}
.foerder__info > p {
  color: oklch(0.32 0.02 160 / 0.9);
  max-width: 54ch;
  font-size: 1.06rem;
  transition: color 0.6s ease;
}
.foerder--dark .foerder__info > p {
  color: rgba(255, 255, 255, 0.78);
}
.foerder__actions {
  margin-top: var(--s6);
}
/* Liquid-Glass-CTA (Arne 2026-07-10: bewusst anders als „Projekt anfragen") —
   transluzentes Glas mit Sheen; Textfarbe wechselt mit dem Grau→Schwarz-BG */
.foerder__cta {
  position: relative;
  overflow: hidden;
  background: rgb(255 255 255 / 0.3);
  border: 1px solid rgb(255 255 255 / 0.55);
  color: oklch(0.24 0.03 160);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 16px 36px -20px rgb(0 0 0 / 0.55);
  transition:
    background 0.4s var(--ease),
    border-color 0.4s var(--ease),
    color 0.6s ease,
    transform 0.25s var(--ease);
}
.foerder__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgb(255 255 255 / 0.35) 0%,
    transparent 42%
  );
  pointer-events: none;
}
.foerder__cta:hover {
  background: rgb(255 255 255 / 0.42);
  border-color: rgb(255 255 255 / 0.75);
  transform: translateY(-2px);
}
.foerder--dark .foerder__cta {
  background: rgb(255 255 255 / 0.09);
  border-color: rgb(255 255 255 / 0.3);
  color: #fff;
}
.foerder--dark .foerder__cta:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: oklch(0.88 0.07 165 / 0.7);
}
.foerder__note {
  margin-top: var(--s4);
  color: oklch(0.4 0.02 160 / 0.75);
  font-size: 0.9rem;
  transition: color 0.6s ease;
}
.foerder--dark .foerder__note {
  color: rgba(255, 255, 255, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .foerder {
    margin-top: 0;
    color: #fff;
    background: linear-gradient(
      180deg,
      rgb(171, 178, 174) 0%,
      #070908 55%,
      #070908 100%
    );
  }
  .foerder__title .fc {
    opacity: 1;
  }
}