/* ============================================================
   N-M Marketing — Website
   Formprinzip aus dem Logo: Flächen scharfkantig, Striche voll gerundet.
   Winkel ausschließlich 45° / −41° (im Logo gemessen).
   ============================================================ */

*, *::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(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 900; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

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

/* ---------- Fokus: sichtbar, nie entfernt ---------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-soft);
}

/* ---------- Sprungmarke ---------- */
.skip {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 200;
  background: var(--blue-700); color: #fff;
  padding: var(--sp-3) var(--sp-4); font-weight: 700;
  transition: top var(--dur-fast) var(--ease-move);
}
.skip:focus { top: var(--sp-3); }

/* ============================================================
   Layout
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }

/* Kopfblock über volle Breite: gibt großen Überschriften genug Maß,
   damit sie nicht in viele kurze, ungleiche Zeilen brechen. */
.section-head {
  margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}
/* Das Maß gehört auf die Überschrift, nicht auf den Container: „ch" bemisst
   sich an der Schrift des Elements. Auf dem div galt die Fließtextschrift
   (Manrope 17px ≈ 9px pro ch) — 22ch ergaben dort rund 198 px statt der
   beabsichtigten ~700 px und brachen jede Überschrift in viele kurze Zeilen.
   Auf der h2 gilt Poppins Black in Displaygröße, das Maß skaliert korrekt mit. */
.section-head .h2 { max-width: 20ch; }
.section-head--wide .h2 { max-width: 26ch; }
.container--narrow .section-head .h2 { max-width: none; }
.section--dark {
  background: var(--dark-ground);
  color: #EDF1F4;
}
.section--sunken { background: var(--bg-subtle); }

/* ---------- Abschnittsmarke: Label + Haarlinie ---------- */
.eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}
.eyebrow::before {
  content: ""; width: 28px; height: 3px;
  background: var(--blue-500); border-radius: var(--radius-stroke);
  flex: none;
}
.section--dark .eyebrow { color: var(--blue-300); }
.section--dark .eyebrow::before { background: var(--blue-400); }

/* ---------- Überschriften ---------- */
.h-hero {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-hero); line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  text-wrap: balance;
  color: var(--text-strong);
}
.h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h2); line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
  color: var(--text-strong);
}
.section--dark .h2, .section--dark .h-hero { color: #fff; }

.h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h3); line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.section--dark .h3 { color: #fff; }

.h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-h4); line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.section--dark .h4 { color: #fff; }

.lead {
  font-size: var(--fs-lead); line-height: 1.55;
  color: var(--text-muted); font-weight: 400;
  max-width: 62ch;
}
.section--dark .lead { color: #A9B7C2; }

.muted { color: var(--text-muted); }
.section--dark .muted { color: #94A5B2; }

.small { font-size: var(--fs-small); }

/* ============================================================
   Buttons — Flächen, daher scharfkantig
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 1.05rem 1.75rem;
  font-family: var(--font-body); font-size: var(--fs-small);
  font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius-soft);
  transition: background var(--dur-fast) var(--ease-move),
              border-color var(--dur-fast) var(--ease-move),
              color var(--dur-fast) var(--ease-move),
              transform var(--dur-fast) var(--ease-rise);
}
.btn__arrow { transition: transform var(--dur-base) var(--ease-rise); flex: none; }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }  /* 45°, Markenwinkel */

.btn--primary { background: var(--blue-500); color: #fff; }
.btn--primary:hover  { background: var(--blue-600); transform: translateY(-2px); }
.btn--primary:active { background: var(--blue-700); transform: translateY(0); }

.btn--ghost {
  background: transparent; color: var(--text-strong);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--blue-500); color: var(--blue-700); background: var(--blue-50); }

.section--dark .btn--ghost { color: #fff; border-color: var(--dark-border); }
.section--dark .btn--ghost:hover { border-color: var(--blue-400); color: var(--blue-300); background: rgba(100,162,208,.08); }

/* ---------- Textlink: Unterstrich wächst von links (Pfeilstart) ---------- */
.link {
  color: var(--link); text-decoration: none; font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease-move), color var(--dur-fast) var(--ease-move);
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 2px; }
.section--dark .link { color: var(--blue-300); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-move),
              background var(--dur-base) var(--ease-move);
}
.header[data-scrolled="true"] {
  border-bottom-color: var(--border);
  background: rgba(255,255,255,.94);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); height: 84px;
}
.header__logo {
  display: flex; align-items: center; flex: none;
  min-height: 44px;   /* komfortable Klickfläche, WCAG 2.5.8 */
}
.header__logo img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--sp-5); }
.nav__link {
  font-size: var(--fs-small); font-weight: 600; color: var(--text-muted);
  text-decoration: none; position: relative; padding-block: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-move);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--blue-500); border-radius: var(--radius-stroke);
  transition: width var(--dur-base) var(--ease-move);
}
.nav__link:hover { color: var(--text-strong); }
.nav__link:hover::after { width: 100%; }

/* ---------- Mobile-Navigation ---------- */
.nav-toggle {
  display: none; flex: none;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius-soft); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle__bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--text-strong); border-radius: var(--radius-stroke);
  transition: transform var(--dur-base) var(--ease-move), opacity var(--dur-fast) linear;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
/* Direkte Kinder adressieren: „span:nth-child(n)" allein würde auch den
   Wrapper .nav-toggle__bars treffen (er ist erstes Kind des Buttons).
   Dessen Drehung addierte sich zu der der Striche — aus dem X wurde ein Plus. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 84px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-move), transform var(--dur-base) var(--ease-rise);
    max-height: calc(100dvh - 84px); overflow-y: auto;
  }
  .nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }

  /* Seiten ohne Umschalter (Impressum, Datenschutz) behalten ihre einfache,
     stets sichtbare Navigation — sonst wäre der Rücksprunglink mobil unerreichbar. */
  .nav--plain {
    position: static; inset: auto; flex-direction: row; align-items: center;
    background: none; border: 0; padding: 0;
    transform: none; opacity: 1; pointer-events: auto; max-height: none;
  }
  .nav--plain .nav__link { padding: var(--sp-2) 0; border: 0; font-size: var(--fs-small); }
  .nav__link { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); font-size: 1.0625rem; }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: var(--sp-4); justify-content: center; }
}

/* ============================================================
   Hero
   ============================================================ */
/* Kopfabstand bewusst knapper als bei den übrigen Sektionen: Bei 1366×768 —
   noch immer eine der häufigsten Laptopauflösungen — lag der primäre CTA
   sonst 10 px unter dem Falz. */
.hero {
  position: relative;
  padding-top: clamp(2.25rem, 1.4rem + 3.6vw, 5.5rem);
  padding-bottom: 0;
  background: var(--bg);
  overflow: hidden;
}
.hero__grid { position: relative; z-index: 2; }

.hero .h-hero { max-width: 21ch; margin-bottom: var(--sp-5); }
.hero__lead { max-width: 56ch; margin-bottom: var(--sp-7); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Hintergrundmotiv: Balkenraster des Logos, angeschnitten */
.hero__motif {
  position: absolute; right: calc(var(--gutter) * -1); top: 0;
  width: min(46vw, 620px); height: 100%;
  z-index: 1; pointer-events: none;
  opacity: .5;
}
@media (max-width: 900px) { .hero__motif { opacity: .28; width: 70vw; } }

/* Flache Viewports (1280×720, iPhone SE): Nur hier wird der Hero gestaucht,
   damit der primäre CTA über dem Falz bleibt. Höhenabfrage statt Breiten-
   abfrage — das Problem ist die Höhe, nicht die Breite. */
@media (max-height: 760px) {
  .hero { padding-top: var(--sp-4); }
  .hero .h-hero { margin-bottom: var(--sp-4); }
  .hero__lead { margin-bottom: var(--sp-5); }
}
@media (max-height: 700px) {
  .hero { padding-top: var(--sp-3); }
  .hero__lead { margin-bottom: var(--sp-4); }
}

/* ---------- Kette am Fuß des Hero ---------- */
.chain {
  margin-top: clamp(3.5rem, 2rem + 5vw, 7rem);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-5); padding-bottom: var(--sp-5);
  position: relative; z-index: 2;
}
/* Raster statt Scrollstreifen: zwölf Glieder passen horizontal nicht in den
   Container. Die Ziffern tragen die Reihenfolge, eine Verbindungslinie ist
   dafür nicht nötig — und erzeugt an Zeilenenden keine Sonderfälle. */
.chain__track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-4);
}
@media (max-width: 1024px) { .chain__track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .chain__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.chain__step {
  display: block; min-width: 0;
  border-top: 2px solid var(--border);
  padding-top: var(--sp-3);
  font-size: var(--fs-small); font-weight: 600; color: var(--text-muted);
  transition: border-color var(--dur-base) var(--ease-move),
              color var(--dur-base) var(--ease-move);
}
.chain__step:hover { border-top-color: var(--blue-500); color: var(--text-strong); }
.chain__num {
  display: block;
  font-family: var(--font-display); font-weight: 900; font-size: 0.75rem;
  color: var(--blue-500); letter-spacing: 0.06em; margin-bottom: 5px;
}

/* ============================================================
   Kennzahlen
   ============================================================ */
/* Zwei Spalten statt vier: „1.000.000+" misst 289 px, bei vier Spalten
   stünden nur 224 px zur Verfügung. Die beiden freigegebenen Referenzwerte
   führen, die beiden erläuternden Angaben stehen darunter zurückgenommen. */
.stats {
  display: grid; gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; } }
.stat { background: var(--bg); padding: var(--sp-6) var(--sp-5); min-width: 0; }
.stats__intro {
  padding-block: 0 var(--sp-5); max-width: 58ch;
}
.stat__num {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-num); line-height: 1; letter-spacing: -0.04em;
  color: var(--blue-600); display: block; margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--fs-small); color: var(--text-muted); }
.stat__label strong { color: var(--text-strong); font-weight: 700; display: block; margin-bottom: 2px; }

/* ============================================================
   Zweispalter
   ============================================================ */
.split {
  display: grid; gap: clamp(2rem, 1rem + 5vw, 5.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- Gegenüberstellung ---------- */
.contrast-list { display: grid; gap: 0; }
.contrast-row {
  background: var(--bg); padding: var(--sp-5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
@media (max-width: 640px) { .contrast-row { grid-template-columns: 1fr; gap: var(--sp-3); } }
.contrast-row__k {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-muted);
}
.contrast-row__v { font-size: var(--fs-small); }
.contrast-row--us { background: var(--blue-50); }
.contrast-row--us .contrast-row__k { color: var(--blue-700); }

/* ============================================================
   Leistungen
   ============================================================ */
/* Acht Leistungen. Spaltenzahlen bewusst gesetzt statt auto-fit, damit jede
   Zeile aufgeht: bei drei Spalten 3+3+(1+2 überspannt), bei zwei Spalten
   vier volle Zeilen, bei einer Spalte acht. Kein Umbruchpunkt mit Restzelle. */
.cards {
  display: grid; gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cards { grid-template-columns: 1fr; } }

/* Die achte Karte schließt bei drei Spalten die letzte Zeile — und ist
   zugleich die, die inhaltlich mehr Raum verdient. */
@media (min-width: 1001px) { .card--wide { grid-column: span 2; } }

.card {
  background: var(--bg); padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: background var(--dur-base) var(--ease-move);
  position: relative;
}
.card:hover { background: var(--bg-subtle); }
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--blue-500);
  transition: width var(--dur-base) var(--ease-move);
}
.card:hover::before { width: 100%; }

.card__idx {
  font-family: var(--font-display); font-weight: 900; font-size: 0.75rem;
  color: var(--blue-500); letter-spacing: 0.08em; margin-bottom: var(--sp-2);
}
.card__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.card__tag {
  font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border); padding: 5px 10px;
  border-radius: var(--radius-soft);
}

/* ============================================================
   Spezialisierungen
   ============================================================ */
.spec { border-top: 1px solid var(--border); padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.spec:last-child { border-bottom: 1px solid var(--border); }
.spec__grid {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
@media (max-width: 900px) { .spec__grid { grid-template-columns: 1fr; } }

.spec__idx {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); line-height: 1;
  /* --grey-200 ergab auf Weiss nur 1,45:1. --grey-500 ist die gemessene
     Markengrautönung und erreicht 4,7:1. */
  color: var(--grey-500); letter-spacing: -0.04em;
  margin-bottom: var(--sp-4);
}
.spec__for { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.spec__chip {
  font-size: var(--fs-micro); font-weight: 600;
  background: var(--grey-50); border: 1px solid var(--border);
  padding: 6px 11px; color: var(--text-muted);
}
.spec__cta { margin-top: var(--sp-5); display: inline-flex; align-items: center; gap: var(--sp-2); }
.spec__nutzen {
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--blue-50); border-left: 3px solid var(--blue-500);
  font-size: var(--fs-small); color: var(--text);
}
.spec__nutzen strong { color: var(--blue-800); font-weight: 700; }

.pain { display: grid; gap: var(--sp-3); }
.pain li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: start; font-size: var(--fs-small);
}
.pain li::before {
  content: ""; width: 14px; height: 2px; background: var(--blue-500);
  border-radius: var(--radius-stroke); margin-top: 0.72em;
}

/* ============================================================
   Aussagenband mit Bild
   Bild trägt eine Aussage, es dekoriert nicht. Die Komposition hält den
   Freiraum rechts — dort steht der Text, nie über den Ebenen.
   ============================================================ */
/* #E9E5DA ist der aus dem Bild gemessene Hintergrundton, die Plattenkante
   liegt bei 58 % der Bildbreite. Der Verlauf stellt den Textbereich
   unabhängig vom Beschnitt frei — ein fester Abstand wäre nicht verlässlich. */
.band { position: relative; overflow: hidden; background: #E9E5DA; }
.band__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: left center;
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(233, 229, 218, 0) 50%,
    rgba(233, 229, 218, 0.90) 60%,
    #E9E5DA 64%);
}
.band__inner {
  position: relative; z-index: 2;
  min-height: clamp(20rem, 14rem + 22vw, 30rem);
  display: grid; align-items: center;
  grid-template-columns: 1fr minmax(0, 34%);
}
.band__text { grid-column: 2; }
.band__text p {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  line-height: 1.25; letter-spacing: -0.02em; color: var(--grey-900);
  text-wrap: balance;
}
.band__text .small { margin-top: var(--sp-4); color: var(--grey-700); }

@media (max-width: 860px) {
  /* Auf schmalen Schirmen deckt der Text die Ebenen ab — daher Bild oben,
     Text darunter auf ruhigem Grund statt Text über Bild. */
  .band__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 0 var(--sp-6); }
  .band__img { position: relative; height: clamp(11rem, 40vw, 16rem); }
  .band::after { display: none; }
  .band__text { grid-column: 1; padding-top: var(--sp-5); }
}

/* ============================================================
   Ablauf
   ============================================================ */
.phases { display: grid; gap: 0; }

/* In dunklen Sektionen muss auch der Kartengrund dunkel sein. Sonst treffen
   die hellen Textfarben aus .section--dark auf eine weisse Karte — die
   Überschrift stand dadurch weiss auf weiss und war unsichtbar. */
.section--dark .phase { background: var(--dark-surface); }
/* Markenblau erreicht auf dem dunklen Kartengrund nur 3,42:1. In dunklen
   Kontexten verwendet das System durchgängig die hellere Blaustufe. */
.section--dark .phase__no { color: var(--blue-300); }
.section--dark .phase .h4 { color: #fff; }
.section--dark .phase .small { color: #A9B7C2; }
.phase {
  background: var(--bg); padding: var(--sp-5);
  display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-5); align-items: start;
}
@media (max-width: 640px) { .phase { grid-template-columns: 1fr; gap: var(--sp-3); } }
.phase__no {
  font-family: var(--font-display); font-weight: 900; font-size: 1rem;
  color: var(--blue-500); letter-spacing: 0.06em; padding-top: 2px;
}

/* ============================================================
   Inhaber — bewusst ohne Porträt
   Die Vertrauenswirkung trägt hier die Typografie und die Zusage,
   nicht ein Gesicht. Kein Bildplatz vorgesehen, damit später kein
   beliebiges Foto in eine Lücke gestellt wird.
   ============================================================ */
/* Bild links, Text rechts: In einem Vertrauensblock wird das Gesicht zuerst
   gelesen, die Aussagen danach. Name und Rolle stehen direkt unter dem Bild
   statt daneben — sie gehören zur Person, nicht zum Fließtext. */
.founder__grid {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
}
@media (max-width: 900px) { .founder__grid { grid-template-columns: 1fr; } }

.founder__figure { margin: 0; max-width: 420px; }
@media (max-width: 900px) { .founder__figure { max-width: 320px; } }

/* Die Datei liegt bereits im Verhältnis 4:5 vor und der Rahmen ebenso —
   es findet daher kein Beschnitt statt, das Gesicht kann nicht angeschnitten
   werden. aspect-ratio plus width/height verhindern Layoutverschiebung. */
.founder__portrait {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  background: var(--grey-100);
}

.founder__figure figcaption { margin-top: var(--sp-4); }
.founder__name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--text-strong); margin-bottom: var(--sp-3);
}
.founder__role {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--blue-700);
  padding-top: var(--sp-3); border-top: 3px solid var(--blue-500);
  display: inline-block;
}
.founder__promise {
  margin-top: var(--sp-6); padding-left: var(--sp-4);
  border-left: 3px solid var(--border-strong);
}
.founder__promise li {
  font-size: var(--fs-small); color: var(--text-muted);
  padding-block: var(--sp-2);
}
.founder__promise li strong { color: var(--text-strong); font-weight: 700; }
/* Die Liste erscheint auch in der dunklen Kontaktsektion — dort war der
   Hervorhebungstext nahezu unsichtbar (1,13:1). */
.section--dark .founder__promise { border-left-color: var(--dark-border); }
.section--dark .founder__promise li { color: #A9B7C2; }
.section--dark .founder__promise li strong { color: #fff; }

/* ============================================================
   Kontakt
   ============================================================ */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: var(--sp-2); }
.field label { font-size: var(--fs-small); font-weight: 700; color: #fff; }
.field .req { color: var(--blue-300); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: var(--fs-body); color: #fff;
  background: var(--dark-surface); border: 1px solid var(--dark-border);
  border-radius: var(--radius-soft); padding: 0.9rem 1rem;
  transition: border-color var(--dur-fast) var(--ease-move), background var(--dur-fast) var(--ease-move);
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: #6E8494; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #465866; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--blue-400); background: var(--dark-raised);
}
.field textarea { resize: vertical; min-height: 130px; }

.checkbox { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.checkbox input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--blue-500); }
.checkbox label { font-weight: 400; font-size: var(--fs-small); color: #A9B7C2; line-height: 1.55; }

/* ============================================================
   Honeypot — für Menschen unsichtbar, für Bots erreichbar.
   Bewusst nicht display:none: manche Bots ignorieren solche Felder.
   Aus dem Fokusfluss genommen, damit Tastaturnutzer nicht hineinlaufen.
   ============================================================ */
/* Robuster als das alte left:-9999px — kein Risiko für horizontales Scrollen,
   und clip-path entzieht das Feld auch Screenreadern zuverlässig. Zusätzlich
   aria-hidden und tabindex="-1" im Markup. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   Themenauswahl — Radio-Chips statt Dropdown
   Sechs Optionen mit kurzen Bezeichnungen. Sichtbare Optionen senken die
   Reibung gegenüber einem Aufklappfeld, und die Auswahl ist auf einen Blick
   erfassbar. Basis sind echte input[type=radio]: Tastaturbedienung,
   Pfeiltasten-Navigation und Screenreader-Ansage kommen ohne JavaScript.
   ============================================================ */
.choice { border: 0; padding: 0; margin: 0; }
.choice__legend {
  padding: 0; margin-bottom: var(--sp-3);
  font-size: var(--fs-small); font-weight: 700; color: #fff;
}
.choice__grid {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .choice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .choice__grid { grid-template-columns: 1fr; } }

.choice__opt { position: relative; display: flex; }
/* Der Radiobutton bleibt im Baum (Fokus, Tastatur, Screenreader),
   wird aber visuell vom Label ersetzt. */
.choice__opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.choice__opt span {
  /* width/flex sorgen dafür, dass alle Chips einer Zeile gleich hoch sind —
     auch wenn ein Label zweizeilig umbricht. */
  display: flex; align-items: center; width: 100%;
  min-height: 48px;   /* Touch-Ziel */
  padding: var(--sp-3) var(--sp-4);
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-soft);
  font-size: var(--fs-small); font-weight: 600; color: #A9B7C2;
  transition: border-color var(--dur-fast) var(--ease-move),
              background var(--dur-fast) var(--ease-move),
              color var(--dur-fast) var(--ease-move);
}
.choice__opt input:hover + span { border-color: #465866; color: #fff; }
.choice__opt input:checked + span {
  background: var(--blue-800); border-color: var(--blue-400); color: #fff;
}
/* Fokus liegt auf dem unsichtbaren Input — der Ring muss deshalb
   auf das sichtbare Label gezeichnet werden. */
.choice__opt input:focus-visible + span {
  outline: 3px solid var(--focus); outline-offset: 3px;
}

/* ============================================================
   Vertrauensblock
   Ersetzt die frühere Aufzählung mit linker Linie. Haken-Icons als
   Inline-SVG — keine Icon-Bibliothek, kein externer Request, gleiche
   Strichstärke wie die übrigen Symbole der Seite.
   ============================================================ */
.trust { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.trust li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3);
  align-items: start; font-size: var(--fs-small); line-height: 1.55;
  color: var(--text-muted);
}
.trust svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--blue-600); }
.trust strong { display: block; font-weight: 700; color: var(--text-strong); margin-bottom: 1px; }

.section--dark .trust li { color: #A9B7C2; }
.section--dark .trust svg { color: var(--blue-300); }
.section--dark .trust strong { color: #fff; }

/* ============================================================
   WhatsApp — schwebende Schaltfläche
   Reiner Verweis, kein eingebettetes Skript: Beim Seitenaufruf werden
   keine Daten an WhatsApp übertragen. Das Symbol liegt als Inline-SVG vor,
   damit die Seite weiterhin ohne externe Requests auskommt.
   ============================================================ */
.wa {
  position: fixed; z-index: 90;
  right: calc(clamp(1rem, 0.5rem + 1.5vw, 2rem) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(1rem, 0.5rem + 1.5vw, 2rem) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 0.875rem 1.25rem;
  background: var(--dark-ground); color: #fff;
  border: 1px solid var(--dark-border); border-radius: var(--radius-soft);
  text-decoration: none; box-shadow: var(--shadow-lg);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.01em;
  transition: background var(--dur-fast) var(--ease-move),
              border-color var(--dur-fast) var(--ease-move),
              transform var(--dur-fast) var(--ease-rise);
}
.wa__icon { flex: none; width: 20px; height: 20px; }

/* Auf Wunsch durchgehend sichtbar — kein Ein- und Ausblenden beim Scrollen.
   Die frühere Überdeckung des Hero-CTA ist stattdessen baulich gelöst:
   auf dem Telefon ist der Button kompakt (52 px) und der Hero-Handlungsbereich
   hält unten Abstand (siehe .hero__actions in den Mobilregeln). */
.wa:hover {
  background: #12312A; border-color: #25D366; transform: translateY(-2px);
}
.wa:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
/* Auf dem Telefon nur das Symbol — der Text würde die Daumenzone verstellen */
@media (max-width: 620px) {
  .wa { padding: 0; width: 52px; height: 52px; justify-content: center; }
  .wa__text { display: none; }
  /* Freiraum, damit die schwebende Schaltfläche am Seitenende nichts verdeckt
     (Regel fixed-element-offset). */
  body { padding-bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) { .wa:hover { transform: none; } }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--dark-ground); color: #94A5B2; padding-block: var(--sp-8) var(--sp-6); }
.footer__top {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  padding-bottom: var(--sp-6); border-bottom: 1px solid var(--dark-border);
}
@media (max-width: 800px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }
.footer__logo img { height: 34px; margin-bottom: var(--sp-4); }
/* Als h2 ausgezeichnet, nicht h4: der Footer ist eine eigene Landmark und
   darf die Ebenenfolge nicht von h2 auf h4 springen lassen. */
.footer__h {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: #fff;
  margin-bottom: var(--sp-4);
}
/* Abstand über Innenabstand der Links statt über gap: so erreichen die
   Klickflächen die von WCAG 2.2 AA (2.5.8) geforderten 24 px Mindesthöhe. */
.footer ul { display: grid; gap: 0; }
.footer a {
  display: inline-block; padding-block: 0.5rem;
  text-decoration: none; font-size: var(--fs-small);
  transition: color var(--dur-fast) var(--ease-move);
}
.footer a:hover { color: #fff; }
.footer__bottom {
  padding-top: var(--sp-5); display: flex; flex-wrap: wrap;
  gap: var(--sp-4); justify-content: space-between; font-size: var(--fs-micro);
}

/* ---------- Warnhinweis für fehlende Rechtstexte ---------- */
.notice {
  background: #2A1F0B; border: 1px solid var(--accent-600); color: #F0DCB4;
  padding: var(--sp-4) var(--sp-5); font-size: var(--fs-small);
  margin-top: var(--sp-6);
}
.notice strong { color: var(--accent-500); }

/* ============================================================
   Fünf Hauptphasen — die öffentliche Vereinfachung des Systems
   ============================================================ */
/* ------------------------------------------------------------
   Haarlinien-Technik
   Früher: gap:1px über einer grauen Containerfläche. Nachteil — eine
   leere Rasterzelle hat kein Kind, das darüber malt, und die graue Fläche
   scheint als massiver Block durch. Genau das erzeugte die Restflächen.
   Jetzt: Der Container trägt Ober- und Linkskante, jedes Element trägt
   Rechts- und Unterkante. Leere Zellen bleiben dadurch unsichtbar,
   unabhängig von Elementanzahl und Spaltenzahl.
   ------------------------------------------------------------ */
.grid-rule { border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.grid-rule > * { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section--dark .grid-rule { border-color: var(--dark-border); }
.section--dark .grid-rule > * { border-color: var(--dark-border); }

/* Fünf Phasen — Variante B: vier gleichrangige Phasen, Phase 5 als
   breites Abschlussmodul. „1 / -1" füllt die Zeile auf jeder Spaltenzahl
   vollständig aus, es kann also an keinem Umbruchpunkt eine Restzelle
   entstehen. */
.flow {
  display: grid; gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1080px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .flow { grid-template-columns: 1fr; } }

.flow__item {
  background: var(--bg); padding: var(--sp-5) var(--sp-4) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative; transition: background var(--dur-base) var(--ease-move);
}
.flow__item:hover { background: var(--bg-subtle); }

/* Phase 5 — Abschluss und zugleich das Unterscheidungsmerkmal */
.flow__item--final {
  grid-column: 1 / -1;
  background: var(--bg-subtle);
  padding: var(--sp-6) var(--sp-5);
  display: grid; gap: var(--sp-4) var(--sp-6);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
@media (max-width: 860px) { .flow__item--final { grid-template-columns: 1fr; } }
.flow__item--final:hover { background: var(--bg-subtle); }
.flow__item--final .flow__title { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); }
.flow__final-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.flow__final-list span {
  font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border-strong); padding: 5px 10px; background: var(--bg);
}
.flow__no {
  font-family: var(--font-display); font-weight: 900; font-size: 0.75rem;
  color: var(--blue-500); letter-spacing: 0.08em;
}
.flow__title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem;
  line-height: 1.25; letter-spacing: -0.02em; color: var(--text-strong);
}
.flow__text { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; }

/* ============================================================
   Branchen — Herausforderung, Ansatz{
  display: grid; gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* ============================================================
   Branchengruppen — progressive Offenlegung
   Bewusst mit <details>: funktioniert ohne JavaScript, ist tastaturbedienbar
   und wird von Screenreadern als aufklappbare Gruppe angesagt. Die Inhalte
   sind auch im geschlossenen Zustand im DOM und damit crawlbar.
   ============================================================ */
.branch-groups {
  display: grid; gap: 0 clamp(1.5rem, 1rem + 3vw, 4rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}
@media (max-width: 900px) { .branch-groups { grid-template-columns: 1fr; } }

.branch-groups details { border-bottom: 1px solid var(--border); }
.branch-groups summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--sp-4) var(--sp-6) var(--sp-4) 0;
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem;
  letter-spacing: -0.015em; color: var(--text-strong);
  transition: color var(--dur-fast) var(--ease-move);
}
.branch-groups summary::-webkit-details-marker { display: none; }
.branch-groups summary:hover { color: var(--blue-700); }
.branch-groups summary::before,
.branch-groups summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  background: var(--blue-500); border-radius: var(--radius-stroke);
  transition: transform var(--dur-base) var(--ease-move), opacity var(--dur-fast) linear;
}
.branch-groups summary::before { width: 14px; height: 3px; transform: translateY(-50%); }
.branch-groups summary::after  { width: 3px; height: 14px; transform: translate(-5.5px, -50%); }
.branch-groups details[open] summary::after { transform: translate(-5.5px, -50%) scaleY(0); opacity: 0; }

.branch-body { padding: 0 var(--sp-5) var(--sp-5) 0; }
.branch-need {
  font-size: var(--fs-small); color: var(--text-muted);
  margin-bottom: var(--sp-4); line-height: 1.55;
}
.branch-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.branch-chips span {
  font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted);
  background: var(--grey-50); border: 1px solid var(--border);
  padding: 5px 10px;
}

/* Abgrenzung belegter Schwerpunkt vs. anwendbare Leistung */
.branch-note {
  border-left: 3px solid var(--blue-500);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-4);
  margin-bottom: var(--sp-6); max-width: 74ch;
  font-size: var(--fs-small); color: var(--text-muted);
}
.branch-note strong { color: var(--text-strong); font-weight: 700; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-cluster {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--blue-700);
  margin: var(--sp-7) 0 var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 2px solid var(--blue-500);
}
.faq-cluster:first-of-type { margin-top: 0; }

.faq { border-top: 1px solid var(--border); }
/* Zweiter Selektor: das Detailelement im System-Abschnitt trägt die Klasse
   selbst, ist also kein Nachfahre von .faq */
.faq details,
details.faq {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  list-style: none; cursor: pointer;
  padding: var(--sp-5) var(--sp-6) var(--sp-5) 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  letter-spacing: -0.015em; color: var(--text-strong);
  position: relative; transition: color var(--dur-fast) var(--ease-move);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-700); }
/* Plus-Zeichen aus zwei Strichen — Striche sind rund, gemäß Formregel */
.faq summary::after,
.faq summary::before {
  content: ""; position: absolute; right: 4px; top: 50%;
  background: var(--blue-500); border-radius: var(--radius-stroke);
  transition: transform var(--dur-base) var(--ease-move), opacity var(--dur-fast) linear;
}
/* Der waagerechte Strich ist 16 px breit, der senkrechte 3 px. Beide sitzen an
   right:4px — ihre Mittelpunkte liegen damit 6,5 px auseinander. Der senkrechte
   muss also nach LINKS versetzt werden, sonst stehen sie nebeneinander statt
   sich zu kreuzen. */
.faq summary::before { width: 16px; height: 3px; transform: translateY(-50%); }
.faq summary::after  { width: 3px; height: 16px; transform: translate(-6.5px, -50%); }
.faq details[open] summary::after { transform: translate(-6.5px, -50%) scaleY(0); opacity: 0; }
.faq__body { padding: 0 var(--sp-7) var(--sp-5) 0; }
.faq__body p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.68; max-width: 72ch; }

/* ============================================================
   Abschluss-Band
   ============================================================ */
/* Farben kommen vollständig aus .section--dark (siehe HTML) — hier nur Layout.
   Frühere Einzelregeln für .h2 und .lead sind dadurch entfallen; sie waren
   der Grund, warum das Eyebrow übersehen wurde. */
.closing { text-align: center; }
.closing__inner {
  max-width: 62ch; margin-inline: auto;
  display: grid; gap: var(--sp-5); justify-items: center;
}
.closing .lead { margin-inline: auto; }

/* ============================================================
   MOBILE KOMPOSITIONEN
   Eigenständige Layoutentscheidungen für das Telefon — keine
   verkleinerte Desktopfassung. Jede Regel hat eine Begründung.
   ============================================================ */
@media (max-width: 720px) {

  /* 1 — Hero: Das Balkenmotiv liegt auf dem Desktop hinter dem Satzspiegel.
     Auf dem Telefon würde es den Text hinterlegen und die Lesbarkeit senken.
     Es wandert deshalb unter den Textblock und wird zum Abschluss des Hero. */
  .hero { padding-bottom: 0; }
  .hero__motif {
    position: relative; right: auto; top: auto;
    width: 100%; height: clamp(7rem, 26vw, 10rem);
    opacity: .16; margin-top: var(--sp-6);
  }
  .hero .h-hero { max-width: none; margin-bottom: var(--sp-4); }
  .hero__lead { margin-bottom: var(--sp-4); font-size: 1.0625rem; }
  .hero__actions { display: grid; gap: var(--sp-3); }
  .hero__actions .btn { justify-content: center; }   /* volle Breite, Daumenzone */

  /* 2 — System: Zwölf Karten à 190 px ergäben auf dem Telefon über 2.200 px
     reine Kartenhöhe. Der Fortschrittsbalken ist dekorativ und entfällt,
     die Phasenmarke erscheint nur noch am Anfang ihrer Gruppe statt zwölfmal.
     Aus einer Kartenwand wird eine gegliederte{ grid-template-columns: 1fr; }

  /* 3 — Leistungen und Spezialisierung: Auf dem Desktop trägt großzügiger
     Innenabstand die Ruhe. Auf dem Telefon erzeugt derselbe Abstand nur
     Scrollweg, weil ohnehin je Karte eine Bildschirmbreite zur Verfügung steht. */
  .card { padding: var(--sp-5) var(--sp-4); }
  .spec { padding-block: var(--sp-6); }
  .spec__idx { margin-bottom: var(--sp-3); }
  .phase { padding: var(--sp-4); }

  /* 4 — Kennzahlen: Die beiden Referenzwerte behalten ihre Größe,
     die erläuternden Werte treten weiter zurück als auf dem Desktop. */
  .stat { padding: var(--sp-5) var(--sp-4); }
}

/* ============================================================
   Motion-System
   Bewusst KEIN generisches Fade-up: gleichzeitig Deckkraft und
   Vertikalversatz auf jedem Element ist die Signatur von Scroll-Plugins.
   Stattdessen drei Typen, jeder aus der Markenform abgeleitet:

   rv-wipe  Überschriften werden freigelegt wie ein sich hebender Vorhang.
            Typografisches Mittel, keine Kartenbewegung.
   rv-line  Linien wachsen von links — zitiert den Startpunkt des Pfeils
            in der Bildmarke (unten links).
   rv-fade  Fließtext und Flächen blenden nur auf, ohne jede Bewegung.
   ============================================================ *//* reiner Beobachter-Anker, ohne eigene Darstellung */

/* Vorhang statt clip-path: Ein per clip-path auf null Fläche beschnittenes
   Element erreicht den Schwellwert des IntersectionObserver nie — es bliebe
   dauerhaft unsichtbar. Deshalb deckt ein Pseudoelement ab und zieht sich
   zurück; die Geometrie des beobachteten Elements bleibt unangetastet. */
.rv-wipe { position: relative; --curtain: var(--bg); }
/* Nur wenn JavaScript läuft, darf überhaupt etwas verdeckt werden.
   Ohne die .js-Klasse bliebe sonst bei blockiertem Skript die halbe
   Seite unsichtbar, weil niemand is-in setzen kann. */
.js .rv-wipe::after {
  content: ""; position: absolute; inset: -3% -1.5%;
  background: var(--curtain); pointer-events: none;
  transform-origin: bottom;
  transition: transform 780ms var(--ease-rise);
  transition-delay: var(--delay, 0ms);
}
.rv-wipe.is-in::after { transform: scaleY(0); }

/* Vorhangfarbe folgt dem jeweiligen Sektionsgrund */
.section--sunken .rv-wipe { --curtain: var(--bg-subtle); }
.section--dark   .rv-wipe { --curtain: var(--dark-ground); }
.band            .rv-wipe { --curtain: #E9E5DA; }

.js .rv-fade {
  opacity: 0;
  transition: opacity 680ms linear;
  transition-delay: var(--delay, 0ms);
}
.rv-fade.is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .rv-wipe::after { display: none !important; }
  .rv-fade { opacity: 1 !important; }
  .btn:hover, .card:hover { transform: none; }
}