/* ============================================================================
   Uncle Savvy — Aufbau
   Gerüst nach mercury.com, gemessen in Mercury/MERCURY-REFERENZ.md.
   Inhalte aus Uncle Savvy Website Idea.md. Kein Hexwert außerhalb tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--background-default);
  color: var(--text-default);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Der Themewechsel läuft über diesen Wrapper, damit alle Farben zugleich
   überblenden statt einzeln zu springen. */
#theme-scroller {
  transition: background-color 600ms var(--ease-in-out), color 600ms var(--ease-in-out);
  background: var(--background-default);
  color: var(--text-default);
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-on); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

h1, h2, h3, h4 { margin: 0; font-weight: 480; letter-spacing: -.01em; text-wrap: balance; }

/* Die Titelschrift trägt nur, was groß gesetzt ist: Überschriften, die
   Kennzahlen, das Zitat. h3 und h4 bleiben absichtlich in der Textschrift —
   sie stehen bei 1,125 rem, und Bricolage wird im kleinen Grad unruhig. */
h1, h2, .stats b, .quote p { font-family: var(--font-display); }
h1, h2 { font-weight: 500; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-on);
  padding: 12px 20px; border-radius: 0 0 var(--radius-lg) 0;
}
.skip:focus { left: 0; }

/* ---- Raster: 16 Spalten, 32px Gutter, 1952px max ------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-total-columns), minmax(0, 1fr));
  gap: var(--grid-gutters);
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margins);
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-inline: 20px; }
}

.section { padding-block: var(--layout-padding-lg); }
.section--sm { padding-block: var(--layout-padding-md); }
.section--xl { padding-block: var(--layout-padding-xl); }
@media (max-width: 900px) {
  .section, .section--xl { padding-block: 64px; }
  .section--sm { padding-block: 48px; }
}

/* Mittige Textspalte im 16er-Raster: 4 | 8 | 4 */
.col-center { grid-column: 5 / span 8; }
.col-full { grid-column: 1 / -1; }
.col-half-l { grid-column: 1 / span 7; }
.col-half-r { grid-column: 9 / span 8; }
@media (max-width: 900px) {
  .col-center, .col-full, .col-half-l, .col-half-r { grid-column: 1 / -1; }
}

/* ---- Standard-Einblendung (Referenz §6) ---------------------------------- */
.reveal { opacity: 0; translate: 0 var(--spacing-fadeIn); }
.reveal[data-in] {
  animation: fadeIn 700ms var(--ease-out) forwards,
             translateUp 700ms var(--ease-out) forwards;
}
@keyframes translateUp { from { translate: 0 var(--spacing-fadeIn); } to { translate: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; }
  .reveal[data-in] { animation: none; }
}

/* ═══════════════════════════════════════════════════════════ NAVBAR ════ */

.nav {
  position: sticky; top: 0; z-index: var(--navbar-z-index);
  height: var(--navbar-height);
  display: flex; align-items: center;
  padding-inline: var(--grid-margins);
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav[data-solid] {
  background: color-mix(in srgb, var(--background-default) 82%, transparent);
  backdrop-filter: blur(20px);
  border-bottom-color: var(--border-subdued);
}
/* Über dem Hero ist die Leiste immer hell, egal welches Theme darunter liegt. */
.nav[data-over-hero] { color: #fff; }
.nav[data-over-hero] .nav__link { color: rgb(255 255 255 / .82); }
.nav[data-over-hero] .nav__link:hover { color: #fff; }

.nav__mark {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-sm); letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; font-weight: 500;
}
.nav__glyph {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid currentColor; position: relative; flex: none;
}
.nav__glyph::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .55;
}
.nav__links { display: flex; align-items: center; gap: var(--gap-md); margin-left: auto; }
.nav__link {
  font-size: var(--text-sm); text-decoration: none; color: var(--text-subdued);
  transition: color 160ms var(--ease-out);
}
.nav__link:hover { color: var(--text-default); }
@media (max-width: 1100px) { .nav__links { display: none; } }

.nav__cta { margin-left: var(--gap-md); }
@media (max-width: 1100px) { .nav__cta { margin-left: auto; } }

/* Auf dem Telefon passen Wortmarke und volles CTA nicht nebeneinander. Das
   Zeichen trägt die Marke allein, das Feld bleibt vollständig sichtbar. */
@media (max-width: 560px) {
  .nav { padding-inline: 16px; }
  .nav__word { display: none; }
  .nav__ctaLong { display: none; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding-inline: 22px; border: 0; border-radius: var(--radius-pill);
  font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out),
              transform 120ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-on); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost {
  background: var(--surface-frosted); color: var(--text-default);
  box-shadow: inset 0 0 0 1px var(--border-frosted);
}
.btn--ghost:hover { background: var(--background-frosted); }
.btn--onDark { background: rgb(255 255 255 / .14); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
.btn--onDark:hover { background: rgb(255 255 255 / .22); }
.btn--lg { height: 52px; padding-inline: 28px; font-size: var(--text-base); }

/* ═══════════════════════════════════════════════════════════ HERO ══════ */

.hero {
  position: relative;
  /* Ein einziger Akt auf einer klebenden Bühne, vier Abschnitte:
     200vh Anfahrt (Video) · 130vh Übernahme (Fläche wächst auf den Viewport)
     · 40vh Halt · 200vh Zerfall (Zeilen werden Knoten). Zusammen 570vh
     Scrollweg plus die 100vh der Bühne.

     Der Zerfall steckt bewusst hier drin und nicht in einer eigenen Sektion:
     am Ende der Übernahme steht das Dashboard 1,87-fach vergrößert. Eine
     neue Sektion würde es bei 1:1 zeichnen, und die Schrift spränge. */
  height: 670vh;
  margin-top: calc(var(--navbar-height) * -1);
}

.hero__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  /* Derselbe Grund wie die Seite. Vorher stand hier ein eigener Hexwert,
     neun Stufen dunkler — das ergab quer durchs Bild eine sichtbare Kante,
     genau dort, wo der Hero endet. */
  background: var(--background-default);
}
.hero__stage > * { grid-area: 1 / 1; }

/* --raum kommt aus app.js und läuft von 1 auf 0, sobald die Karte den
   Laptopschirm verlässt. Er hängt an allen drei Schichten, die den Raum
   ausmachen — Bild, Kopfabdunklung, Fußverlauf. Bliebe eine davon stehen,
   läge sie am Ende über dem blanken Seitengrund und man sähe sie als Schleier
   ohne Ursache. Am Ende steht nur noch die Karte auf dem Grund der Seite. */
.hero__media { position: relative; width: 100%; height: 100%; opacity: var(--raum, 1); }
/* Trägt Standbild, Video und Dämmerung. Nur diese Schicht wird für die
   Einfahrt bewegt, damit die Maske außen an ihrem Platz bleibt. */
.hero__push { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Deckt die Tagfassung, sobald die Kamera einfährt. Deckkraft aus app.js. */
.hero__dusk { opacity: var(--dusk, 0); }
.hero__media video { opacity: 0; transition: opacity 400ms var(--ease-out); }
.hero[data-ready] .hero__media video { opacity: 1; }
.hero[data-ready] .hero__poster { opacity: 0; transition: opacity 400ms var(--ease-out); }

/* Randmaske (Referenz §3.7): 300 % heißt, alle weichen Zonen liegen außerhalb
   des Bildes, das Bild ist also randlos. Gegen Ende fährt sie auf 100 %, und
   die Kanten fransen weich in den Grund aus.

   Abweichung von der Referenz, mit Absicht: Mercurys waagerechtes Band ist
   25–73 %, das beschneidet bei 100 % auf die mittleren gut 48 %. Bei Mercury
   steckt der Inhalt im Video und wird mitbeschnitten, hier liegt das
   Dashboard darüber und würde angeschnitten. Also 6–94 %, symmetrisch: ein
   weicher Rand statt eines Schnitts. Senkrecht bleibt es bei 14–86 %. */
.hero__media {
  --mask: 300%;
  -webkit-mask-image:
    linear-gradient(transparent 0%, transparent 10%, #000 14%, #000 86%, transparent 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(transparent 0%, transparent 10%, #000 14%, #000 86%, transparent 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: var(--mask); mask-size: var(--mask);
}

/* Am Ende der Fahrt löst sich das Bild nach unten in den Seitengrund auf,
   statt an einer Kante aufzuhören. Die Deckkraft kommt aus app.js und folgt
   derselben Kurve wie die Randmaske — vorher wäre der Schreibtisch verdeckt. */
.hero__fade {
  position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to bottom,
              rgb(20 24 26 / 0) 0%, rgb(20 24 26 / .65) 58%, var(--background-default) 100%);
  opacity: calc(var(--fade, 0) * var(--raum, 1));
  pointer-events: none; z-index: 5;
}

/* Dunkelt den Kopf ab, damit weiße Schrift auf dem hellen Foto trägt. Sobald
   der Raum geht, wird sie entbehrlich — und zwar genau rechtzeitig: die
   Leiste bekommt bei u > 0.30 ihren eigenen Grund, der Raum beginnt bei
   u = 0.32 zu weichen. */
.hero__top {
  position: absolute; inset: 0 0 auto 0; height: 52%;
  background: linear-gradient(to bottom, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .26) 40%, transparent 100%);
  opacity: var(--raum, 1);
  pointer-events: none;
}

/* Die Textgruppe steht im oberen Drittel, nicht mittig. Grund ist derselbe wie
   bei mercury.com: darunter liegt das eigentliche Bild — der Schreibtisch, auf
   den die Kamera gleich zufährt. Mittig gesetzter Text steht genau darauf und
   nimmt dem Motiv den Platz. Oben lässt er es frei. */
.hero__content {
  position: relative; z-index: 10;
  display: grid; align-content: center; justify-items: center;
  text-align: center; color: #fff;
  /* 5vh unter der Leiste setzt die Oberkante der Überschrift auf 13 % der
     Fensterhöhe — dieselbe Höhe, auf der sie bei mercury.com steht. */
  padding: var(--navbar-height) var(--grid-margins) 96px;
  isolation: isolate;
}
/* Der Hero ist absichtlich hell, und weiße Schrift auf einem sonnigen Fenster
   trägt nicht. Kein Schleier über das ganze Bild, sondern nur dort, wo der
   Text steht: ein weicher Kreis, der zum Rand hin verschwindet. */
.hero__content::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Mitte auf 32 % statt 48 %: der Schleier gehört unter den Text, und der
     steht jetzt oben. Bliebe er mittig, läge er über dem Schreibtisch und
     verdunkelte genau das Motiv, das er freilassen soll. */
  background: radial-gradient(66% 50% at 50% 50%, rgb(6 11 13 / .72) 0%,
                              rgb(6 11 13 / .52) 46%, transparent 80%);
}
.hero h1 {
  text-shadow: 0 1px 2px rgb(4 9 11 / .42), 0 6px 26px rgb(4 9 11 / .32);
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, var(--text-7xl));
  line-height: var(--leading-105);
  letter-spacing: -.022em;
  max-width: 17ch;
}
.hero__sub {
  text-shadow: 0 1px 2px rgb(4 9 11 / .48);
  margin-top: var(--stack-gap-md);
  font-size: clamp(var(--text-base), .95rem + .4vw, var(--text-lg));
  line-height: var(--leading-135);
  color: rgb(255 255 255 / .88);
  max-width: 48ch;
}

.hero__form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin-top: var(--gap-xl);
}
.hero__trust {
  /* Die Zeile steht bei rund 50 % der Fensterhöhe und damit am äußeren Rand
     des Schleiers, wo der schon fast durchsichtig ist — auf dem hellen Boden
     im Bild trug der einfache Schatten sie nicht mehr. Zweite, weiche Stufe
     dazu, wie bei der Überschrift. */
  text-shadow: 0 1px 2px rgb(4 9 11 / .62), 0 4px 18px rgb(4 9 11 / .55);
  display: flex; gap: var(--gap-sm) var(--gap-xl); flex-wrap: wrap; justify-content: center;
  margin-top: var(--gap-xl);
  font-size: var(--text-sm); color: rgb(255 255 255 / .78);
}
.hero__trust li { display: flex; align-items: center; gap: 8px; }
.hero__trust i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  flex: none; display: block;
}

/* Die Zeile unter der Karte. Ihre Sichtbarkeit entscheidet app.js über --u1:
   sie kommt mit dem Dashboard und geht mit ihm.
   --kartenGrund ist die Unterkante der
   Karte in Pixeln, ebenfalls aus app.js — nur so klebt die Zeile bei jeder
   Fenstergröße direkt darunter, statt auf einen festen Abstand zu hoffen. */
.hero__unter {
  position: absolute; z-index: 8; left: 0; right: 0;
  top: var(--kartenGrund, 100%);
  height: 104px; padding: 26px var(--grid-margins) 0;
  text-align: center; pointer-events: none;
}
/* Eigener Schleier statt Vertrauen darauf, dass da schon etwas Dunkles ist.
   Was unter der Karte liegt, hängt von der Fensterhöhe ab — auf einem hohen
   Schirm ist es die helle Tastatur, und weiße Schrift darauf ist unlesbar.
   Er kommt und geht mit der Zeile, sonst stünde während der Anfahrt ein
   dunkler Fleck im Bild. */
.hero__unter::before {
  content: ""; position: absolute; inset: 4px 0 -18px; z-index: -1;
  background: radial-gradient(62% 130% at 50% 46%,
              rgb(10 14 16 / .82) 0%, rgb(10 14 16 / .55) 46%, rgb(10 14 16 / 0) 78%);
  opacity: var(--u1, 0);
}
.hero__unter p {
  position: absolute; left: var(--grid-margins); right: var(--grid-margins);
  max-width: 720px; margin-inline: auto;
  color: rgb(255 255 255 / .70);
  font-size: var(--text-sm); line-height: var(--leading-135);
}
.hero__unter p b {
  display: block; color: #fff; font-weight: 600;
  font-size: var(--text-lg); line-height: var(--leading-125); margin-bottom: 6px;
  letter-spacing: -.01em;
}
.hero__unter p[data-an] { opacity: var(--u1, 0); }

@media (max-width: 700px) {
  /* Dort steht die Fläche als freie Karte im Fluss; eine Zeile, die an einer
     gerechneten Unterkante klebt, hat da nichts zu suchen. */
  .hero__unter { display: none; }
}

/* Der Fortschrittszähler aus Schritt 6 der Bauanleitung. Bleibt im Code,
   sichtbar nur mit ?debug in der Adresse. */
.hero__debug {
  position: absolute; z-index: 30; top: calc(var(--navbar-height) + 12px); left: 24px;
  font-variant-numeric: tabular-nums; font-size: var(--text-sm);
  background: rgb(0 0 0 / .6); color: #fff; padding: 4px 10px; border-radius: var(--radius-md);
  display: none;
}
body[data-debug] .hero__debug { display: block; }

/* Auf schmalen Fenstern laeuft von den vier Abschnitten nur die Anfahrt:
   die Flaeche steht dort als freie Karte im Fluss, Uebernahme und Zerfall
   sind abgeschaltet (app.js, narrow). Ohne diese Zeile blieben ihre 370
   Hoehen als leerer Scrollweg stehen — man wischt und nichts passiert. */
@media (max-width: 700px) {
  .hero { height: 260vh; }
}

/* Bewegungsarm: kein Scrub, kein Zoom. Statt das Dashboard einfach
   wegzulassen, wird der Hero hoch genug und stapelt Text und Karte
   untereinander. Wer keine Bewegung will, soll trotzdem sehen, worum es
   geht. Deshalb liegt #screen als eigene Ebene in der Bühne und nicht
   mehr in der Bildebene: nur so kann es in den Fluss zurück. */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__stage {
    position: static; height: auto; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    gap: var(--gap-2xl);
    padding-block: calc(var(--navbar-height) + var(--layout-padding-md)) var(--layout-padding-lg);
  }
  /* Im Quelltext steht die Karte vor dem Text, weil sie beim Scrub hinter
     ihm liegt. Ohne Bewegung ist die Reihenfolge umgekehrt richtig. */
  .hero__content { order: 1; position: relative; padding-block: 0; }
  /* Ohne die große Innenfläche des Scrub-Heros wäre der Textschleier hier
     zu klein und die Vertrauenszeile läge außerhalb. */
  .hero__content::before { inset: -16% -6%; }
  .screen { order: 2; }
  .hero__media { position: absolute; inset: 0; --mask: 100%; }
  .hero__media video { display: none; }
}

/* ═══════════════════════════════════════ AKKORDEON + KACHELVIDEOS ══════ */

.tiles__head { margin-bottom: var(--gap-2xl); }
.tiles h2 {
  font-size: clamp(var(--text-3xl), 1.6rem + 1.8vw, var(--text-6xl));
  line-height: var(--leading-110); letter-spacing: -.02em;
}

.acc { border-top: 1px solid var(--border-subdued); }
.acc__item { border-bottom: 1px solid var(--border-subdued); }
.acc__btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 20px 0; cursor: pointer;
  font: inherit; font-size: var(--text-md); font-weight: 500; color: var(--text-subdued);
  text-align: left;
  transition: color 200ms var(--ease-out);
}
.acc__btn:hover { color: var(--text-default); }
.acc__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: transparent; box-shadow: inset 0 0 0 1px var(--border-default);
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.acc__item[data-open] .acc__btn { color: var(--text-default); }
.acc__item[data-open] .acc__dot { background: var(--accent); box-shadow: none; }
.acc__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-in-out-cubic);
}
.acc__item[data-open] .acc__body { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner p {
  padding: 0 0 20px 20px; max-width: 52ch;
  color: var(--text-subdued); font-size: var(--text-sm); line-height: var(--leading-140);
}

/* Die vier Panels liegen übereinander. Das war früher `aspect-ratio: 16/10`
   plus `position: absolute` — und damit rechnete die Höhe ausschließlich aus
   der Breite. Sobald die Spalte schmal wurde, schrumpfte der Kasten, während
   der Text darin umbrach und länger wurde. Zwei gegenläufige Kurven; unter
   1250px Fensterbreite war der Durchlauf abgeschnitten.

   Jetzt stapelt ein Raster: alle Panels sitzen in derselben Zelle, dazu ein
   leerer Platzhalter, der 16:10 anfordert. Die Zeile nimmt den größeren der
   beiden Werte — das Seitenverhältnis ist damit ein Mindestmaß. Breit bleibt
   die Proportion, schmal wächst der Kasten mit dem Inhalt. Ohne Umbruchpunkt,
   also auch ohne Sprung an einer bestimmten Fensterbreite.

   Die Panels müssen dafür im Fluss liegen statt absolut, denn nur dann zählt
   ihr Inhalt für die Zeilenhöhe überhaupt mit. */
/* minmax(0, 1fr) auf beiden Rastern, nicht die voreingestellte auto-Spalte:
   `auto` heißt minmax(min-content, max-content), und die maximale
   Inhaltsbreite einer Zeile ist ihr ungebrochener Satz. Die Spur wuchs damit
   auf 753 px, während der Kasten 350 breit war — der Text lief seitlich
   heraus und wurde von overflow: hidden abgeschnitten. minmax(0, 1fr) bindet
   die Spur an die Kastenbreite und erlaubt dem Inhalt, darunter zu
   schrumpfen; erst dadurch bricht der Satz um. */
.panels {
  position: relative; border-radius: var(--radius-2xl); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.panels::before { content: ""; grid-area: 1 / 1; aspect-ratio: 16 / 10; }
.panel {
  grid-area: 1 / 1;
  position: relative;
  /* Raster, damit das Medium die volle Zellhöhe erbt. */
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subdued);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  z-index: 0;
  /* Der 400ms-Trick aus Referenz §4.1: sichtbar ist nur die Überblendung,
     das Wegräumen passiert unsichtbar dahinter. */
  transform: translateX(100%);
  transition: transform 0ms var(--ease-out) 400ms;
  pointer-events: none;
}
.panel[data-active] {
  transform: none; z-index: 10; pointer-events: auto;
  transition: transform 0ms;
}
.panel__media {
  grid-area: 1 / 1;
  opacity: 0; filter: blur(4px);
  transition: opacity 400ms var(--ease-out), filter 400ms var(--ease-out);
}
.panel[data-active] .panel__media { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .panel__media { transition: opacity 200ms linear; filter: none !important; }
}

/* ═══════════════════════════════════════════════════════ SOZIALBEWEIS ══ */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats li { padding: var(--gap-sm) var(--gap-md); text-align: center; }
.stats li + li { border-left: 1px solid var(--border-subdued); }
.stats b {
  display: block; font-size: clamp(var(--text-3xl), 1.5rem + 1.6vw, var(--text-6xl));
  font-weight: 420; letter-spacing: -.02em; line-height: var(--leading-105);
  font-variant-numeric: tabular-nums;
}
.stats span { display: block; margin-top: 10px; font-size: var(--text-sm); color: var(--text-subdued); }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats li:nth-child(odd) { border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--border-subdued); }
}

/* ═══════════════════════════════════════════════════════════ BLÖCKE ════ */

.lede {
  font-size: clamp(var(--text-md), 1rem + .35vw, var(--text-lg));
  line-height: var(--leading-140); color: var(--text-subdued); max-width: 56ch;
}
.h-sect {
  font-size: clamp(var(--text-2xl), 1.5rem + 1.4vw, var(--text-5xl));
  line-height: var(--leading-110); letter-spacing: -.02em;
}
.h-sub { font-size: var(--text-md); font-weight: 500; }
.kicker {
  font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-accent);
}

/* Die Kette. Acht Glieder als festes 4×2-Raster: gleiche Breiten, gleiche
   Höhen je Zeile — als umbrechendes Flex dehnten sich die Reste der zweiten
   Zeile auf volle Breite und die Sektion wirkte zerrissen. */
.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .chain { grid-template-columns: repeat(2, 1fr); } }
.chain li {
  flex: 1 1 150px; min-width: 0;
  background: var(--surface-elevated); border: 1px solid var(--border-subdued);
  border-radius: var(--radius-xl); padding: 16px;
  box-shadow: var(--shadow-1), var(--edge);
}
.chain li[data-ai] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.chain li[data-ai] .chain__n { color: var(--text-accent); }
.chain__n { font-size: var(--text-xs); color: var(--text-subdued); font-variant-numeric: tabular-nums; }
.chain__t { display: block; margin-top: 6px; font-size: var(--text-base); font-weight: 500; }
.chain__s { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--text-subdued); }

/* Ampel */
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
@media (max-width: 900px) { .lanes { grid-template-columns: 1fr; } }
.lane {
  background: var(--surface-elevated); border: 1px solid var(--border-subdued);
  border-radius: var(--radius-2xl); padding: var(--gap-md);
  box-shadow: var(--shadow-1), var(--edge);
}
.lane__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lane__head i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.lane p { color: var(--text-subdued); font-size: var(--text-sm); line-height: var(--leading-140); }
.lane--g i { background: #2FA36B; }
.lane--a i { background: #E0A02A; }
.lane--r i { background: #D2543F; }

/* Karten-Raster */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-md); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cards, .cards--3 { grid-template-columns: 1fr; } }
.card {
  background: var(--surface-elevated); border: 1px solid var(--border-subdued);
  border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-1), var(--edge);
  display: flex; flex-direction: column;
}
.card__media { aspect-ratio: 16 / 9; background: var(--background-secondary); position: relative; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--gap-md); }
.card__body p { margin-top: 8px; color: var(--text-subdued); font-size: var(--text-sm); line-height: var(--leading-140); }

/* Alles, was auf --shadow-1 liegt, hebt unter dem Zeiger auf --shadow-2 ab.
   Bewusst in beiden Themes: eine Karte, die sich je nach Theme anders
   verhält, liest sich als Fehler, nicht als Absicht. */
.card, .chain li, .lane {
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.card:hover, .chain li:hover, .lane:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2), var(--edge);
}
@media (prefers-reduced-motion: reduce) {
  .card, .chain li, .lane { transition: box-shadow 220ms var(--ease-out); }
  .card:hover, .chain li:hover, .lane:hover { transform: none; }
}

/* Vorgang in vier Minuten */
.minutes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
@media (max-width: 1100px) { .minutes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .minutes { grid-template-columns: 1fr; } }
.minute {
  border-top: 1px solid var(--border-default); padding-top: 16px;
}
.minute b { display: block; font-size: var(--text-sm); color: var(--text-accent); }
.minute h3 { margin-top: 8px; font-size: var(--text-md); font-weight: 500; }
.minute p { margin-top: 8px; color: var(--text-subdued); font-size: var(--text-sm); line-height: var(--leading-140); }

/* Zitat als Atempause, wie bei Mercury zwischen den Nutzenblöcken */
.quote { text-align: center; }
.quote p {
  font-size: clamp(var(--text-xl), 1.2rem + 1.2vw, var(--text-4xl));
  line-height: var(--leading-125); letter-spacing: -.015em; max-width: 22ch; margin-inline: auto;
}
.quote span { display: block; margin-top: var(--stack-gap-md); font-size: var(--text-sm); color: var(--text-subdued); }

/* Person.
   Der Block steht in einer Sektion über die volle Rasterbreite, sein Inhalt
   hört aber viel früher auf: 320 Bild + 72 Abstand + 719 Text (der Fließtext
   ist auf 56 Zeichen begrenzt) = 1111 Pixel. Auf einem 1920er Schirm blieben
   dadurch 730 Pixel Leere rechts, und die Gruppe klebte am linken Rand.
   Deshalb wird sie auf ihre tatsächliche Breite gezäumt und mittig gestellt. */
.person {
  display: grid; grid-template-columns: 320px 1fr; gap: var(--gap-2xl);
  align-items: center;
  max-width: 1120px; margin-inline: auto;
}
@media (max-width: 900px) { .person { grid-template-columns: 1fr; gap: var(--gap-xl); } }
.person__pic { border-radius: var(--radius-3xl); overflow: hidden; background: var(--surface-default); }
.person__pic img { width: 100%; height: auto; }
.person p + p { margin-top: var(--stack-gap-md); }
.promises { margin-top: var(--gap-xl); display: grid; gap: 10px; }
.promises li { position: relative; padding-left: 20px; font-size: var(--text-sm); }
.promises li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* FAQ */
.faq { border-top: 1px solid var(--border-subdued); }
.faq__item { border-bottom: 1px solid var(--border-subdued); }
.faq__btn {
  width: 100%; display: flex; align-items: flex-start; gap: 16px; justify-content: space-between;
  background: none; border: 0; padding: 22px 0; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--text-md); color: var(--text-default);
}
.faq__btn span:last-child { flex: none; color: var(--text-subdued); transition: transform 240ms var(--ease-out); }
.faq__item[data-open] .faq__btn span:last-child { transform: rotate(45deg); }
.faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-in-out-cubic); }
.faq__item[data-open] .faq__body { grid-template-rows: 1fr; }
.faq__inner { overflow: hidden; }
.faq__inner p { padding-bottom: 24px; max-width: 68ch; color: var(--text-subdued); font-size: var(--text-sm); line-height: var(--leading-140); }

/* Abschluss-CTA */
.cta { text-align: center; }
.cta h2 {
  font-size: clamp(var(--text-4xl), 2rem + 2.6vw, var(--text-7xl));
  line-height: var(--leading-105); letter-spacing: -.022em; max-width: 16ch; margin-inline: auto;
}
.cta p { margin-top: var(--gap-sm); margin-inline: auto; max-width: 46ch; color: var(--text-subdued); }
.cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--gap-xl); }
.cta__note { margin-top: var(--gap-sm); font-size: var(--text-sm); color: var(--text-subdued); }

/* Footer */
.foot { padding-block: var(--layout-padding-lg) var(--layout-padding-sm); }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-xl); }
@media (max-width: 900px) { .foot__cols { grid-template-columns: repeat(2, 1fr); } }
.foot h4 { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subdued); }
.foot ul { margin-top: 16px; display: grid; gap: 10px; }
.foot a { font-size: var(--text-sm); text-decoration: none; color: var(--text-default); }
.foot a:hover { color: var(--text-accent); }
.foot__legal {
  margin-top: var(--layout-padding-md); padding-top: var(--gap-sm);
  border-top: 1px solid var(--border-subdued);
  display: flex; flex-wrap: wrap; gap: 8px var(--gap-xl);
  font-size: var(--text-xs); color: var(--text-subdued);
}

/* Unsichtbare Theme-Marker (Referenz §5) */
.marker { height: 1px; width: 1px; opacity: 0; pointer-events: none; }

/* ═══════════════════════════════════════════ ERGÄNZUNGEN COPY v3 ══════ */

/* Zweigeteilte Karte: „Läuft von allein / Bleibt bei dir".
   Wiederkehrende Komponente in der Ablauf-Sektion und den Rechenbeispielen;
   nur der Von-allein-Teil trägt den grünen Punkt, der Rest bleibt neutral. */
.split { margin-top: 14px; display: grid; }
.split__part { padding-block: 12px; }
.split__part:first-child { padding-top: 0; }
.split__part + .split__part { border-top: 1px solid var(--border-subdued); }
.split__k {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-subdued);
}
.split__k i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #2FA36B; }

/* Drei Merk-Zeilen unter der Kette: Titel links, Text rechts,
   getrennt durch Linien — trägt ungleich lange Texte ohne ragged Karten */
.merk { border-top: 1px solid var(--border-subdued); }
.merk > div {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-md);
  padding-block: var(--gap-lg);
  border-bottom: 1px solid var(--border-subdued);
}
.merk p { max-width: 68ch; color: var(--text-subdued); font-size: var(--text-sm); line-height: var(--leading-140); }
@media (max-width: 900px) {
  .merk > div { grid-template-columns: 1fr; gap: 10px; }
}

/* Zwischen-CTA unter den fünf Karten */
.sectcta {
  margin-top: var(--gap-2xl); padding-top: var(--gap-lg);
  border-top: 1px solid var(--border-subdued);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md); flex-wrap: wrap;
}
.sectcta p { font-size: var(--text-md); }

/* Stundenrechner: rechnet clientseitig, speichert nichts */
.calc {
  margin-top: var(--gap-2xl); padding: var(--gap-xl);
  border: 1px solid var(--border-subdued); border-radius: var(--radius-3xl);
  background: var(--surface-default);
}
.calc h3 { font-size: var(--text-md); font-weight: 500; }
.calc__io { margin-top: var(--gap-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); }
@media (max-width: 900px) { .calc__io { grid-template-columns: 1fr; } }
.calc label { display: block; font-size: var(--text-sm); color: var(--text-subdued); line-height: var(--leading-140); }
.calc input[type="range"] { display: block; width: 100%; margin-top: 14px; accent-color: var(--accent); }
.calc__val { display: block; margin-top: 8px; font-size: var(--text-sm); color: var(--text-default); }
.calc__val b { font-variant-numeric: tabular-nums; }
.calc__eur { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--text-default); }
.calc input[type="number"] {
  width: 110px; padding: 10px 12px; font: inherit; font-size: var(--text-sm);
  color: var(--text-default); background: var(--background-default);
  border: 1px solid var(--border-subdued); border-radius: 10px;
}
.calc__out {
  margin-top: var(--gap-xl);
  font-size: clamp(var(--text-md), 1rem + .6vw, var(--text-xl));
  line-height: var(--leading-140);
}
.calc__out b {
  font-size: clamp(var(--text-2xl), 1.5rem + 1vw, var(--text-4xl));
  font-weight: 420; letter-spacing: -.02em;
  /* Kein tabular-nums: das gäbe dem Tausenderpunkt eine volle Ziffernbreite
     („46 . 000"). Die Zahl steht allein, nichts muss untereinander fluchten. */
}
.calc__note { margin: var(--gap-sm) 0 var(--gap-lg); font-size: var(--text-sm); color: var(--text-subdued); }

/* Zitat in der Person-Sektion (ersetzt die frühere Zitat-Sektion) */
.person__quote { margin-top: var(--stack-gap-md); padding-left: 18px; border-left: 2px solid var(--accent); }
.person__quote p { font-size: var(--text-md); line-height: var(--leading-140); }
.person__quote span { display: block; margin-top: 8px; font-size: var(--text-sm); color: var(--text-subdued); }

/* Kurzform des Nav-CTA, nur auf dem Telefon sichtbar */
.nav__ctaShort { display: none; }
@media (max-width: 560px) {
  .nav__ctaShort { display: inline; }
}

/* Links in der Rechtszeile erben Größe und Farbe der Zeile */
.foot__legal a { font-size: inherit; color: inherit; }

/* ══════════════════════════════════ MERCURY-ABSCHNITTSGRAMMATIK ═══════ */
/* An mercury.com bei 1440px gemessen (26.08.2026). Drei Maße tragen den
   ganzen Unterschied:

   1. Die Inhaltsspalte ist 12 von 16 Spalten und beginnt bei der dritten
      (x=206, Breite 1013 bei 1425px Fenster). Nicht die volle Breite.
   2. Der Abstand zwischen Abschnitten steht nur *oben*. Mercury setzt kein
      padding-bottom; die Lücke entsteht allein aus dem padding-top des
      folgenden Abschnitts. Bei uns stand er auf beiden Seiten — 224px statt
      112px, die Seite war doppelt so luftig wie das Vorbild.
   3. Der Kopf sitzt *über* dem Inhalt, nicht daneben. Die Halb-und-halb-
      Teilung ist bei Mercury dem Akkordeon mit Medienfläche vorbehalten. */

.col-inset { grid-column: 3 / span 12; }
@media (max-width: 1240px) { .col-inset { grid-column: 2 / span 14; } }
@media (max-width: 900px)  { .col-inset { grid-column: 1 / -1; } }

/* Halbe Inhaltsspalte, für Abschnitte, die keinen Flex-Split brauchen */
.col-inset-l { grid-column: 3 / span 6; }
.col-inset-r { grid-column: 9 / span 6; }
@media (max-width: 1240px) { .col-inset-l { grid-column: 2 / span 7; } .col-inset-r { grid-column: 9 / span 7; } }
@media (max-width: 900px)  { .col-inset-l, .col-inset-r { grid-column: 1 / -1; } }

/* Abstand nur oben. --layout-padding-lg (112px) für Abschnitte mit
   Medienfläche, --layout-padding-md (72px) für die mit Haarlinie: dort
   kommen nach der Linie noch 24px, zusammen wieder rund 96. */
.sect      { padding-top: var(--layout-padding-lg); padding-bottom: 0; }
.sect--rule{ padding-top: var(--layout-padding-md); }
.sect--last{ padding-bottom: var(--layout-padding-lg); }
@media (max-width: 900px) {
  .sect { padding-top: 64px; }
  .sect--rule { padding-top: 48px; }
  .sect--last { padding-bottom: 64px; }
}

/* Der Abschnittskopf. Die Haarlinie ist Mercurys Trennung zwischen zwei
   Kachelabschnitten — sie ersetzt den doppelten Leerraum. */
.sect-head        { padding-bottom: var(--gap-2xl); }
.sect-head--rule  { border-top: 1px solid var(--border-default); padding-top: var(--gap-sm); }
.sect-head .h-sect{ max-width: 66%; }
@media (max-width: 900px) { .sect-head .h-sect { max-width: none; } }
.sect-head .kicker + .h-sect { margin-top: 12px; }
.sect-head .lede  { margin-top: var(--gap-sm); }
@media (max-width: 900px) { .sect-head { padding-bottom: var(--gap-xl); } }

/* Mercury-Maße für die Abschnittszeile: 32px, Gewicht 480, Zeile 1.15,
   Sperrung +0.48px. Bewusst *positiv* gesperrt — unsere .h-sect hatte -.02em,
   also die entgegengesetzte Richtung. Bei einer Display-Schrift in dieser
   Größe zieht negative Sperrung die Wörter zu Blöcken zusammen. */
.h-sect--mercury {
  font-size: clamp(var(--text-2xl), 1.35rem + .85vw, var(--text-3xl));
  font-weight: 480; line-height: var(--leading-115); letter-spacing: .015em;
}

/* ── Splitzeile: Akkordeon links, Medienfläche rechts ──────────────────
   Zwei gleiche Hälften im Flex, 32px dazwischen. Die Textseite ist
   space-between: die Zeile steht oben, das Akkordeon fällt nach unten.
   Genau das erzeugt bei Mercury die Unterkante, auf der beide Hälften
   zusammen aufsitzen. */
.split-row { display: flex; gap: var(--gap-md); align-items: stretch; }
.split-row > * { flex: 1 1 0; min-width: 0; }
.split-row--flip { flex-direction: row-reverse; }

/* Im Split gilt fuer die Flaeche zweierlei, das sonst nicht gilt:
   - 3:2 statt 16:10, damit sie dieselbe Ecke und dasselbe Verhaeltnis hat
     wie die Kacheln weiter unten auf derselben Seite.
   - align-self: start, weil sie sonst mit der Akkordeonhoehe mitwuechse und
     bei jedem Klick auf eine andere Zeile spraenge.
   Beides bleibt hier stehen und nicht an .panels selbst: entscheidungen.html
   benutzt denselben Baustein und soll sich davon nicht aendern. */
.split-row > .panels { align-self: start; border-radius: var(--radius-xl); }
.split-row > .panels::before { aspect-ratio: 3 / 2; }
.split-row > .panels .panel { border-radius: var(--radius-xl); }
.split-row__text { display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-2xl); }
@media (max-width: 900px) {
  .split-row, .split-row--flip { flex-direction: column; gap: var(--gap-xl); }
  .split-row__text { gap: var(--gap-md); }
}

/* Der Akkordeontext trägt jetzt den Läuft-/Bleibt-Zweiklang statt eines
   einzelnen Absatzes. Die Einrückung um 20px hält ihn unter dem Punkt der
   offenen Zeile, wie bei Mercury. */
.acc__text { padding: 0 0 20px 20px; }
.acc__text .split { margin-top: 0; }
.acc .split p {
  margin-top: 8px; color: var(--text-subdued);
  font-size: var(--text-sm); line-height: var(--leading-140);
}

/* Ein Bild oder Video als Panelmedium muss die Zelle füllen; ohne das
   liegt es in seiner Eigengröße in der Ecke. */
img.panel__media, video.panel__media { width: 100%; height: 100%; object-fit: cover; }

/* figure bringt vom Browser margin: 1em 40px mit. Im Panel hieß das: das
   Medium war 408 statt 490 breit und saß 41px eingerückt in seiner eigenen
   Fläche. Ein Fehler, den man im Screenshot sieht, aber nicht im Quelltext. */
figure.panel { margin: 0; }