/* ==========================================================================
   Guthabenkarten im ÖPNV — Landingpage
   --------------------------------------------------------------------------
   Eigenes, helleres Design (Kundenentscheidung) — bewusst NICHT das
   Navy-Flächen-Layout der Hauptseite (landing-page/DESIGN.md).

   Farblogik der Seite:
     Obere Hälfte  = die Sache. Papier, Tinte und das Gelb-Grün des deutschen
                     Haltestellenschilds (StVO Zeichen 224) — die Farbe des
                     Ortes, an dem eine Fahrt beginnt.
     Untere Hälfte = der Absender. Ab #402payment ausschließlich Navy,
                     Signal-Rot und Weiß, also die Markenfarben aus
                     brand-assets/colors.css. Der Farbwechsel ist der
                     Abschnittswechsel; deshalb taucht Gelb dort nirgends auf.

   Schrift: durchgehend Inter (Kundenwunsch). Die drei Rollen-Tokens
   (Anzeige / Text / Daten) bleiben getrennt, zeigen aber alle auf dieselbe
   Familie — die Hierarchie trägt Gewicht, Größe und Sperrung. Fällt der
   Webfont aus, greift die System-Kette und das Layout hält.

   Signatur der Seite: die Karte. Gezeichnet im echten ID-1-Format
   (85,60 × 53,98 mm → 1,586), Chip und Kontaktlos-Symbol als SVG-Sprite in
   index.html. Alle Innenmaße der Karte laufen über Container-Query-Einheiten
   (cqi), damit die Karte als EIN Objekt skaliert — im Hero klein, in der
   Projektliste groß, ohne zweiten Satz Regeln.

   JS: vier Dateien, drei davon unverändert aus der Hauptseite übernommen —
       scroll-reveal.js, mailchimp-popup.js und button-ripple.js — plus
       karten-lupe.js für die Kartenvergrößerung. Alle sind Progressive
       Enhancement: ohne JS ist alles sichtbar, die Whitepaper-Buttons bleiben
       Anker auf #whitepaper, der Lupen-Knopf ist ausgeblendet und die Knöpfe
       behalten Hover-, Active- und Focus-Zustand aus dem CSS.
   ========================================================================== */

:root {
  /* --- Bogen & Tinte (obere Seitenhälfte) ---
     Alle hellen Flächen sind Weiß (Kundenwunsch). --bogen-tief ist nur noch
     eine neutrale Fülltönung für Kleinteile (Rohling-Schraffur, Fortschritts-
     balken im Popup), keine Sektionsfarbe mehr. */
  --bogen:       #FFFFFF;
  --bogen-tief:  #F1F1F3;
  --weiss:       #FFFFFF;
  --tinte:       #16181D;
  --tinte-weich: #5A5D66;               /* 6,2:1 auf Weiß */
  --linie:       rgba(22, 24, 29, 0.14);
  --linie-stark: rgba(22, 24, 29, 0.28);

  /* --- Haltestellenschild (StVO Z. 224) — genau ein Abschnitt --- */
  --halt-gelb:   #FFC800;
  --halt-gruen:  #0B4A2F;               /* 6,6:1 auf Gelb */

  /* --- 402PAYMENT (untere Seitenhälfte), aus brand-assets/colors.css --- */
  --navy:        #0B0B23;
  --signal:      #FF4436;
  --navy-weich:  rgba(255, 255, 255, 0.68);   /* 9,1:1 auf Navy */
  --linie-hell:  rgba(255, 255, 255, 0.16);

  /* Knopfschrift ist überall Weiß (Kundenwunsch). Auf Signal-Rot sind das
     3,42:1 statt der von WCAG AA geforderten 4,5:1 — dieselbe bewusste
     Abweichung, die auch die Hauptseite fährt (dort in styles.css als
     --on-primary dokumentiert). Betrifft ausschließlich Knopfschrift; alle
     übrigen Textfarben dieser Seite erfüllen AA. */
  --auf-knopf:   #FFFFFF;

  /* --- Schrift ---
     Alles Inter (Kundenwunsch 2026-08-24). Die drei Rollen bleiben als eigene
     Tokens bestehen, obwohl sie derselben Familie zeigen: die Seite
     unterscheidet Anzeige, Fließtext und Daten weiterhin über Gewicht, Größe
     und Sperrung — und ein späterer Rückbau auf eine eigene Anzeige- oder
     Datenschrift bleibt eine Änderung an genau diesen drei Zeilen.
     Was der Wechsel kostet, steht in der README unter „Schrift". */
  --schrift-anzeige: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-text:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-daten:   "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Steilere Kurve als üblich: die Überschrift teilt sich ab 701 px die Zeile
     mit dem Kartenfächer und muss trotzdem bei 1280 px groß ankommen.
     Unter 700 px gilt der flachere Wert im Breakpoint weiter unten. */
  --fs-hero:  clamp(2.4rem, 0.6rem + 6vw, 5.75rem);
  --fs-h2:    clamp(1.85rem, 1.35rem + 2.1vw, 3rem);
  --fs-h3:    clamp(1.1rem,  1.02rem + 0.36vw, 1.35rem);
  --fs-lead:  clamp(1.03rem, 0.98rem + 0.28vw, 1.2rem);
  --fs-text:  1.0313rem;
  --fs-klein: 0.9063rem;
  --fs-marke: 0.75rem;

  /* --- Maß --- */
  --huelle: 1240px;
  --rand:   clamp(1.25rem, 5vw, 3.5rem);
  --luft:   clamp(4rem, 8.5vw, 7.5rem);
  --lesbar: 62ch;
  --tipp:   44px;                        /* WCAG 2.2 Target Size */

  --r-knopf: 4px;      /* Eingabefelder */
  --r-pille: 999px;    /* Knöpfe im Ruhezustand, siehe DESIGN.md §6.2 */
  --r-flaeche: 3px;

  --aus: cubic-bezier(0.2, 0.7, 0.25, 1);

  /* MD3-Physik der Knöpfe (DESIGN.md §6.2): Federung mit Overshoot beim
     Loslassen, Standard-Easing zum Hineindrücken und für den Ripple. */
  --ease-feder:    cubic-bezier(0.2, 0.8, 0.2, 1.2);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --schatten-sm:    0 6px 16px -8px rgba(22, 24, 29, 0.22);

  --schatten-karte: 0 2px 4px rgba(22, 24, 29, 0.14), 0 14px 34px -12px rgba(22, 24, 29, 0.42);
  --schatten-hoch:  0 4px 8px rgba(22, 24, 29, 0.16), 0 26px 56px -16px rgba(22, 24, 29, 0.48);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  background: var(--bogen);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--fs-text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

h1, h2, h3 {
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h3 { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.005em; }

.huelle {
  width: 100%;
  max-width: var(--huelle);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: var(--luft); }

/* Sichtbarer Fokusring auf jedem Untergrund. Die Ringfarbe wird pro
   Abschnitt umgestellt, weil ein dunkler Ring auf Navy unsichtbar wäre. */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 2px;
  border-radius: var(--r-flaeche);
}
.ablauf :where(a, button, summary):focus-visible { outline-color: var(--halt-gruen); }
:where(.absender, .whitepaper, .fuss, .lupe-dialog) :where(a, button):focus-visible { outline-color: var(--weiss); }
/* Der Lupen-Knopf deckt die Karte komplett ab; ein Ring auf seiner Außenkante
   wäre der Ring um die Karte. Genau das ist hier gewollt. */
.lupe:focus-visible { outline-offset: -2px; }

.skip-link {
  position: absolute;
  left: 0.5rem; top: 0.5rem; z-index: 1001;
  transform: translateY(-160%);
  background: var(--tinte); color: var(--bogen);
  padding: 0.75rem 1rem; border-radius: var(--r-knopf);
  font-weight: 600; font-size: var(--fs-klein);
  transition: transform 0.2s ease-out;
}
.skip-link:focus-visible { transform: none; }


/* ==========================================================================
   Bausteine
   ========================================================================== */

/* Kleine Marke über jeder Überschrift. Sagt, um welche Art von Information es
   geht — kein Nummerierungssystem, weil die Abschnitte keine Reihenfolge sind. */
.marke {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--schrift-daten);
  font-size: var(--fs-marke);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}
.marke--hell { color: var(--navy-weich); }
.marke--halt { color: var(--halt-gruen); }
.marke__zeichen { width: 1.35em; height: 1.35em; flex: none; }

.kopfzeile { max-width: 46rem; }
.kopfzeile--breit { max-width: none; }
.kopfzeile h2 { margin-top: 0.9rem; font-size: var(--fs-h2); }
.kopfzeile .lead { margin-top: 1.1rem; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--tinte-weich);
  max-width: var(--lesbar);
}
.lead--hell { color: var(--navy-weich); }

/* Unausgefüllte Angabe. Bewusst als solche erkennbar (Schraffur + gestrichelte
   Grundlinie) statt still gelassen — Publikum sind öffentliche Auftraggeber,
   eine erfundene Zahl kostet mehr als ein sichtbar leeres Feld.
   Vor Go-Live:  grep -n 'data-todo' index.html   */
.todo {
  font-family: var(--schrift-daten);
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--tinte-weich);
  background: repeating-linear-gradient(45deg,
              rgba(22, 24, 29, 0.055) 0 5px, transparent 5px 10px);
  border-bottom: 1.5px dashed var(--linie-stark);
  padding: 0.12em 0.4em;
  white-space: nowrap;
}


/* ==========================================================================
   Knöpfe — MD3-Shape-Morph + Ripple, übernommen von der Hauptseite
   --------------------------------------------------------------------------
   Portiert aus ../landing-page/landingpage/styles.css (Spezifikation:
   DESIGN.md §6.2). Klassennamen und Mechanik bleiben identisch, damit
   button-ripple.js unverändert läuft und die Knöpfe im Whitepaper-Popup —
   mailchimp-popup.js schreibt fest .btn/.btn--primary/.btn--outline ins
   Markup — ohne Sonderregeln dasselbe Verhalten bekommen. Als einzige Klassen
   dieser Seite sind sie deshalb englisch benannt.

   Ruhezustand ist eine Pille. Beim Drücken zieht sich der Radius zusammen
   (schnell, ease-standard), beim Loslassen federt er mit Overshoot zurück
   (ease-spring). Der Ripple kommt von button-ripple.js; ohne JS bleibt alles
   andere intakt.

   Abweichungen von der Vorlage, jeweils aus Entscheidungen dieser Seite:
   · Der dunkle Knopf nimmt die Tinte dieser Seite (#16181D), nicht das
     Marken-Navy — im hellen Seitenteil kommt Navy sonst nirgends vor.
   · .btn--outline ist gefüllt statt umrandet, siehe Kommentar dort.
   ========================================================================== */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--tipp);
  font-family: var(--schrift-anzeige);
  font-weight: 600; font-size: 0.9375rem; line-height: 1;
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--r-pille);
  cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.45s var(--ease-feder), border-radius 0.45s var(--ease-feder);
}
/* Beim Drücken schnell hinein, federnd zurück (Basis-Transition oben). Die
   volle Liste wird wiederholt — gäbe man nur border-radius an, verlöre der
   Knopf beim Drücken alle übrigen Übergänge. */
.btn:active {
  border-radius: 10px;
  transition: transform 0.1s var(--ease-standard), border-radius 0.1s var(--ease-standard),
              background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--lg { padding: 1rem 2rem; font-size: 1.0625rem; }
.btn--lg:active { border-radius: 14px; }

.btn--primary { background: var(--signal); color: var(--auf-knopf); border-color: var(--signal); }
/* Abdunkeln beim Hover: mit weißer Schrift verbessert das den Kontrast sogar
   (3,42:1 → 4,34:1 auf #E13A2C). Wert aus der Hauptseite übernommen. */
.btn--primary:hover {
  background: #E13A2C; border-color: #E13A2C;
  transform: translateY(-1px); box-shadow: var(--schatten-sm);
}

.btn--secondary { background: var(--tinte); color: var(--auf-knopf); border-color: var(--tinte); }
.btn--secondary:hover { background: #000; border-color: #000; transform: translateY(-1px); }

.btn--outline-light { background: transparent; color: var(--weiss); border-color: rgba(255, 255, 255, 0.6); }
.btn--outline-light:hover { background: var(--weiss); color: var(--tinte); border-color: var(--weiss); }

/* Trägt den Namen der Vorlage, weil mailchimp-popup.js ihn fest ins Markup
   schreibt („Zurück"), ist hier aber KEIN Umriss-Knopf: auf dem hellen
   Dialoggrund wäre weiße Schrift unlesbar, und weiße Knopfschrift ist
   Kundenwunsch. Grau gefüllt hält den Knopf trotzdem klar zweitrangig. */
.btn--outline { background: var(--tinte-weich); color: var(--auf-knopf); border-color: var(--tinte-weich); }
.btn--outline:hover { background: var(--tinte); border-color: var(--tinte); }

.btn[disabled] { opacity: 0.6; cursor: default; }

/* Press-Feedback auf scale, NICHT auf border-radius: die Pille liegt bei
   999px, optisch gekappt wird sie aber schon bei halber Knopfhöhe. Der
   Overshoot des Springs landete dort in einem unsichtbaren Bereich.
   Steht absichtlich NACH den :hover-Regeln der Varianten: gleiche
   Spezifität, also entscheidet die Reihenfolge — Drücken schlägt Hover. */
.btn:active { transform: scale(0.96); }

/* Ripple: negativer z-index liegt über dem Knopfhintergrund, aber unter der
   Beschriftung. */
.btn__ripple {
  position: absolute; z-index: -1; pointer-events: none;
  border-radius: var(--r-pille);
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(closest-side, currentColor 65%, transparent 100%);
  animation: btn-ripple 450ms var(--ease-standard) forwards;
}
@keyframes btn-ripple {
  from { transform: translate(-50%, -50%) scale(0); opacity: 0.28; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.btn-reihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.1rem; }


/* ==========================================================================
   Die Karte — Signaturbaustein
   --------------------------------------------------------------------------
   .karte ist der Container (container-type: inline-size), .karte__flaeche die
   eigentliche Karte. Jedes Innenmaß in cqi = Prozent der Kartenbreite, deshalb
   skaliert die Karte überall gleich, ohne zweiten Regelsatz.
   ========================================================================== */
.karte {
  container-type: inline-size;
  width: 100%;

  --karte-grund:  #2B303B;
  --karte-tinte:  #F5F5F2;
  --karte-hoch:   rgba(255, 255, 255, 0.3);   /* Prägelicht oben */
  --karte-tief:   rgba(0, 0, 0, 0.5);         /* Prägeschatten unten */
}

.karte__flaeche {
  position: relative;
  aspect-ratio: 1.586;                        /* ID-1: 85,60 / 53,98 */
  border-radius: 3.7cqi;                      /* 3,18 mm auf 85,60 mm */
  padding: 7cqi;
  display: flex; flex-direction: column;
  background: var(--karte-grund);
  color: var(--karte-tinte);
  box-shadow: var(--schatten-karte);
  overflow: hidden;
}

/* Laminatglanz. Statisch, nicht animiert: das ist Material, keine Deko. */
.karte__flaeche::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(107deg,
              transparent 26%,
              rgba(255, 255, 255, 0.17) 42%,
              rgba(255, 255, 255, 0.04) 51%,
              transparent 64%);
}

.karte__kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 4cqi;
}
.karte__marke {
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  font-size: 10cqi;
  line-height: 1;
  letter-spacing: -0.01em;
}
.karte__funk { width: 8.4cqi; height: auto; opacity: 0.88; }

.karte__chip { width: 15.5cqi; height: auto; margin-top: 6.5cqi; }

.karte__nr {
  margin-top: auto;
  font-family: var(--schrift-daten);
  /* Die 19 Zeichen müssen in EINE Zeile zwischen die 7cqi-Ränder passen, also
     in 86cqi. Inters Tabellenziffern laufen schmaler als die frühere Fira Mono:
     gemessen 6,6cqi Schriftgröße → 72cqi Textbreite, rund 16 % Luft.
     Tabellenziffern, damit die Vierergruppen wie auf einer echten Karte auf
     gleicher Breite stehen; Inter setzt sonst proportionale Ziffern. */
  font-size: 6.6cqi;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
  /* Prägung: Licht von oben, Schatten nach unten — wie auf einer echten Karte. */
  text-shadow: 0 0.35cqi 0 var(--karte-hoch), 0 -0.35cqi 0 var(--karte-tief);
}

.karte__fuss {
  margin-top: 3.6cqi;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 3cqi;
  font-family: var(--schrift-daten);
  font-size: 3.4cqi;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* --- Kartenvarianten. Musterdarstellungen: die Farbflächen stammen aus dem
       ÖPNV-Umfeld, nicht aus den Hausfarben der Verkehrsunternehmen. Echte
       Kartenmotive werden hier bewusst nicht nachgebaut. --- */
.karte--gruen {
  --karte-grund: linear-gradient(152deg, #14663F 0%, #0B4A2F 56%, #073821 100%);
  --karte-tinte: #F3F7F3;
}
.karte--gelb {
  --karte-grund: linear-gradient(152deg, #FFD94E 0%, #FFC800 54%, #E7A600 100%);
  --karte-tinte: #1A1508;
  --karte-hoch:  rgba(255, 255, 255, 0.55);
  --karte-tief:  rgba(0, 0, 0, 0.3);
}

/* Bildkarte: liegt ein Originalmotiv vor (bislang nur RVV), ersetzt es die
   gezeichnete Musterkarte. Kein Laminatglanz und keine Prägung — auf echtem
   Artwork wäre beides ein aufgesetzter Effekt.
   Die Schraffur im Hintergrund ist der Platzhalter, falls die Datei fehlt:
   dieselbe Sprache wie .todo, damit „unfertig" überall gleich aussieht. */
.karte--bild .karte__bild {
  display: block;
  width: 100%;
  aspect-ratio: 1.586;
  object-fit: cover;
  border-radius: 3.7cqi;
  box-shadow: var(--schatten-karte);
  background:
    repeating-linear-gradient(45deg,
      rgba(22, 24, 29, 0.05) 0 7px, transparent 7px 14px),
    var(--bogen-tief);
  color: var(--tinte-weich);
  font-family: var(--schrift-daten);
  font-size: 0.75rem;
}


/* ==========================================================================
   NAV
   ========================================================================== */
/* Deckend, nicht durchscheinend (Kundenwunsch 2026-08-24): kein
   backdrop-filter, volle Deckkraft. Über der gelben Ablauf-Fläche und dem
   dunklen 402PAYMENT-Ende schiebt sich die Leiste damit sauber drüber, statt
   die Farbe dahinter durchschimmern zu lassen. */
.nav {
  position: sticky; top: 0; z-index: 900;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.nav__innen {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.5rem;
}

/* Wortmarke der Seite. Kein Bild, sondern gesetzte Schrift — sie skaliert
   mit, bleibt bei Textzoom scharf und braucht keine zweite Datei. */
.nav__wortmarke {
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  font-size: clamp(0.98rem, 0.88rem + 0.42vw, 1.22rem);
  letter-spacing: -0.02em;
  color: var(--tinte);
  white-space: nowrap;
}
.nav__tld { font-weight: 600; color: var(--tinte-weich); }
.nav__wortmarke:hover .nav__tld { color: var(--tinte); }

/* Kein Menü und kein CTA (Kundenwunsch) — links die Wortmarke, rechts das
   Thema der Seite. Das hält die Leiste ruhig und beantwortet trotzdem sofort
   die Frage, wo man gelandet ist. */
.nav__thema {
  margin-left: auto;
  font-family: var(--schrift-daten);
  font-size: var(--fs-marke);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  text-align: right;
}


/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding-block: clamp(3rem, 6.5vw, 6rem) var(--luft); }

/* Drei Blöcke in einem Raster: Überschrift (kopf), Karten (bild), Fließtext
   und Knöpfe (fuss). Auf breiten Schirmen liegt „bild" rechts über beide
   Zeilen — optisch identisch zum früheren Zweispalter. Unter 700 px wird das
   Raster umgeschichtet, damit die Karten oben neben der Überschrift bleiben
   (siehe Breakpoint). Genau dafür sind es benannte Bereiche statt zweier
   getrennter Layouts. */
.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  grid-template-areas:
    "kopf bild"
    "fuss bild";
  gap: 0 clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.hero__kopf { grid-area: kopf; }
.hero__fuss { grid-area: fuss; }
.hero__bild { grid-area: bild; align-self: center; }

.hero__zeile {
  margin-top: 1.1rem;
  font-size: var(--fs-hero);
  letter-spacing: -0.025em;
}
.hero__lead { margin-top: 1.5rem; font-size: var(--fs-lead); line-height: 1.58; color: var(--tinte-weich); max-width: 34rem; }

/* --- Der Kartenfächer --- */
.faecher {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.8;
}
.faecher__platz {
  position: absolute;
  left: var(--l); top: var(--t);
  width: 64%;
  transform: rotate(var(--r));
  animation: austeilen 0.72s var(--aus) backwards;
  animation-delay: calc(var(--i) * 0.11s + 0.15s);
}
/* Der Fächer steigt nach rechts oben, vorne liegt die erste Karte, hinten der
   Rohling. Beide Richtungen zusammen sind der Punkt: so bleibt die vordere
   Karte ganz sichtbar UND die Markennamen der beiden hinteren, weil deren
   obere linke Ecke über der Oberkante der Vorderkarte liegt. Andersherum
   verdeckt ausgerechnet die leere Karte die beiden benannten Projekte. */
.faecher__platz:nth-child(1) { --l: 0%;  --t: 34%; --r: -8deg; --i: 0; z-index: 3; }
.faecher__platz:nth-child(2) { --l: 18%; --t: 17%; --r: 1deg;  --i: 1; z-index: 2; }
.faecher__platz:nth-child(3) { --l: 36%; --t: 0%;  --r: 9deg;  --i: 2; z-index: 1; }
@keyframes austeilen {
  from { opacity: 0; transform: translate(-5%, 15%) rotate(0deg) scale(0.94); }
}

.bildnachweis {
  margin-top: 1.4rem;
  font-family: var(--schrift-daten);
  font-size: 0.72rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--tinte-weich);
  max-width: 30rem;
}


/* ==========================================================================
   GRUNDLAGE
   ========================================================================== */
.grundlage { border-top: 1px solid var(--linie); }

.merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.merkmal { border-top: 2px solid var(--tinte); padding-top: 1.1rem; }
.merkmal p { margin-top: 0.6rem; color: var(--tinte-weich); font-size: var(--fs-klein); }


/* ==========================================================================
   ABLAUF — der eine laute Abschnitt
   ========================================================================== */
.ablauf {
  background: var(--halt-gelb);
  color: var(--halt-gruen);
}
.ablauf h2 { font-size: var(--fs-h2); margin-top: 0.9rem; }

.schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.schritt { border-top: 2px solid currentColor; padding-top: 1.1rem; }
.schritt__nr {
  display: block;
  font-family: var(--schrift-daten);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
  margin-bottom: 0.7rem;
  /* Gleiche Ziffernbreite, damit 01/02/03 exakt untereinander stehen. */
  font-variant-numeric: tabular-nums;
}
.schritt p { margin-top: 0.6rem; font-size: var(--fs-klein); opacity: 0.86; }


/* ==========================================================================
   PROJEKTE
   ========================================================================== */
.projektliste {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Keine Kästen (Kundenwunsch): die Karte liegt frei neben dem Text. Getrennt
   werden die Projekte nur durch eine Haarlinie. */
.projekt {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.projekt + .projekt {
  border-top: 1px solid var(--linie);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* Leichte Drehung und ein tieferer Schatten: so liegt die Karte lose auf dem
   Papier, statt in einem Rahmen zu stecken. Die Winkel wechseln die Richtung,
   damit die drei Karten nicht wie eine Reihe wirken.
   Die Drehung sitzt am Container, nicht an der Karte: nur so dreht der
   Lupen-Knopf mit und liegt weiter deckungsgleich über der Karte. Der Winkel
   steht als --dreh bereit, damit der Hover-Zustand ihn mit scale() kombinieren
   kann, ohne ihn zu überschreiben. */
.projekt__karte {
  --dreh: -3deg;
  position: relative;
  transform: rotate(var(--dreh));
}
.projekt:nth-child(2) .projekt__karte { --dreh: 2.5deg; }
.projekt:nth-child(3) .projekt__karte { --dreh: -1.5deg; }
.projekt__karte :where(.karte__flaeche, .karte__bild) { box-shadow: var(--schatten-hoch); }


/* --- Lupe: Auslöser über der Karte ---
   Unsichtbare Klickfläche über der ganzen Karte; das Lupenzeichen erscheint
   erst beim Überfahren. Ausgeblendet, bis karten-lupe.js `lupe-bereit` setzt —
   ohne JavaScript kein toter Knopf. */
.lupe { display: none; }

.lupe-bereit .lupe {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  cursor: zoom-in;
  border-radius: 12px;
}
.lupe-bereit .projekt__karte { transition: transform 0.2s var(--aus); }
.lupe-bereit .projekt__karte:has(.lupe:hover),
.lupe-bereit .projekt__karte:has(.lupe:focus-visible) {
  transform: rotate(var(--dreh)) scale(1.03);
}

/* Erscheint erst beim Überfahren (Kundenwunsch): mittig auf der Karte, damit
   sie im Ruhezustand nichts verdeckt. Dunkler Kreis, weil die Karten hell und
   farbig sind und ein weißer Kreis auf der gelben Karte untergehen würde. */
.lupe__pille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  background: rgba(22, 24, 29, 0.72);
  color: var(--weiss);
  box-shadow: 0 4px 16px rgba(22, 24, 29, 0.4);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s var(--aus);
}
.lupe:hover .lupe__pille,
.lupe:focus-visible .lupe__pille { opacity: 1; transform: none; }

/* Ohne Hover-fähigen Zeiger (Touch) gäbe es sonst gar keinen Hinweis, dass
   die Karte anklickbar ist — dort bleibt die Lupe deshalb dauerhaft stehen. */
@media (hover: none) {
  .lupe__pille { opacity: 1; transform: none; }
}

.lupe__zeichen { width: 1.3rem; height: 1.3rem; }


/* --- Lupe: die vergrößerte Ansicht ---
   Natives <dialog>: Fokusfalle, Esc und Backdrop kommen vom Browser. */
.lupe-dialog {
  width: 100%; height: 100%;
  max-width: 100vw; max-height: 100vh;
  margin: 0; padding: clamp(1rem, 4vw, 2.5rem);
  border: 0; background: transparent;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.25rem;
  overflow: hidden;
  cursor: zoom-out;
}
/* Muss nach der Regel oben stehen und spezifischer sein, sonst überschreibt
   das display:flex die UA-Regel `dialog:not([open]) { display: none }`. */
.lupe-dialog:not([open]) { display: none; }
/* Kräftiger als beim Whitepaper-Popup: dort liegt ein weißer Dialog über der
   Seite, hier eine Karte plus eine Bildunterschrift ohne eigene Fläche — die
   braucht ruhigen Grund, sonst liest sie sich in den Inhalt dahinter hinein. */
.lupe-dialog::backdrop { background: rgba(11, 11, 35, 0.85); }

.lupe-dialog__buehne { cursor: default; }
/* Die Kopie erbt keine der .projekt__karte-Regeln — Breite und Schatten
   deshalb hier eigens setzen. Die Höhe begrenzt der dritte min()-Wert:
   72vh mal Seitenverhältnis ID-1. */
/* Die Neigung folgt dem Zeiger: karten-lupe.js setzt --kipp-x und --kipp-y,
   hier stehen nur der Ruhezustand (0°) und die Perspektive. Die Karte kippt
   von der Maus weg — man drückt sie dort hinein, wo der Zeiger steht. */
.lupe-dialog__buehne .karte {
  width: min(86vw, 620px, calc(72vh * 1.586));
  transform:
    perspective(1400px)
    rotateX(var(--kipp-x, 0deg))
    rotateY(var(--kipp-y, 0deg));
  transition: transform 0.14s ease-out;
}
.lupe-dialog__buehne :where(.karte__flaeche, .karte__bild) {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.lupe-dialog__titel {
  color: var(--weiss);
  font-family: var(--schrift-daten);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center;
}

.lupe-dialog__zu {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); color: var(--weiss);
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  transition: background-color 0.15s ease;
}
.lupe-dialog__zu:hover { background: rgba(255, 255, 255, 0.28); }

.lupe-dialog[open] { animation: lupe-auf 0.22s var(--aus); }
.lupe-dialog[open]::backdrop { animation: lupe-blende 0.22s ease; }
@keyframes lupe-auf { from { opacity: 0; transform: scale(0.97); } }
@keyframes lupe-blende { from { opacity: 0; } }

.projekt__name { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); }

.status {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--schrift-daten);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
}
/* Offen = schraffiert und gestrichelt, wie jedes andere TODO auf der Seite.
   Live = gefüllt im Haltestellen-Grün, also derselben Farbe, die im Abschnitt
   „So läuft eine Fahrt" für „hier geht es los" steht. Weiß darauf: 10,3:1. */
.status--offen {
  color: var(--tinte-weich);
  border: 1.5px dashed var(--linie-stark);
  background: repeating-linear-gradient(45deg,
              rgba(22, 24, 29, 0.055) 0 5px, transparent 5px 10px);
}
.status--live {
  color: var(--weiss);
  background: var(--halt-gruen);
  border: 1.5px solid var(--halt-gruen);
}

.fakten { margin-top: 1.6rem; border-top: 1px solid var(--linie); }
.fakt {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linie);
}
.fakt dt {
  font-family: var(--schrift-daten);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  padding-top: 0.2rem;
}
.fakt dd { font-size: var(--fs-klein); }


/* ==========================================================================
   HÄUFIGE FRAGEN — natives <details>, kein JavaScript
   ========================================================================== */
.fragenliste {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linie-stark);
  max-width: 54rem;
}
.frage { border-bottom: 1px solid var(--linie); }

.frage summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--tipp);
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.25;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--tinte-weich); }

/* Plus, das sich beim Öffnen zum Kreuz dreht. Zwei Farbstreifen statt Icon-
   Datei — skaliert mit der Schriftgröße und erbt die Textfarbe. */
.frage summary::after {
  content: "";
  flex: none;
  width: 15px; height: 15px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 0.22s var(--aus);
}
.frage[open] summary::after { transform: rotate(45deg); }

.frage__text {
  padding-bottom: 1.4rem;
  max-width: var(--lesbar);
  color: var(--tinte-weich);
  animation: aufblenden 0.25s var(--aus);
}
@keyframes aufblenden {
  from { opacity: 0; transform: translateY(-0.35rem); }
}


/* ==========================================================================
   402PAYMENT — ab hier Navy/Rot/Weiß
   ========================================================================== */
.absender {
  background: var(--navy);
  color: var(--weiss);
}
.absender__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* Wortmarke auf Navy. Die Datei liegt farbig vor und wird per Filter auf Weiß
   gedreht — gleicher dokumentierter Workaround wie im Fuß und auf der
   Hauptseite, weil es (noch) keine sauber beschnittene weiße Wide-Variante
   gibt. Siehe ../landing-page/brand-assets/README.md. */
.absender__logo {
  height: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);
  width: auto;
  filter: brightness(0) invert(1);
}

.absender h2 { margin-top: 1.1rem; font-size: var(--fs-h2); }
.absender .lead { margin-top: 1.1rem; }
.absender .btn { margin-top: 2rem; }

.leistungen { padding-top: 0.35rem; }
.leistungen li {
  border-top: 1px solid var(--linie-hell);
  padding: 0.95rem 0;
  font-family: var(--schrift-anzeige);
  font-weight: 600;
  font-size: 1.075rem;
}
.leistungen li:last-child { border-bottom: 1px solid var(--linie-hell); }


/* ==========================================================================
   WHITEPAPER
   ========================================================================== */
.whitepaper {
  background: var(--navy);
  color: var(--weiss);
  border-top: 1px solid var(--linie-hell);
}
.whitepaper__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.whitepaper h2 { margin-top: 0.9rem; font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); }
.whitepaper .lead { margin-top: 1.1rem; }
.whitepaper .btn { margin-top: 2rem; }

.kleingedrucktes {
  margin-top: 1.1rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--navy-weich);
  max-width: 30rem;
}

/* Heft. Bewusst nicht der 3D-Buch-Baustein der Hauptseite (DESIGN.md §6.4):
   hier reichen versetzter Buchblock und ein Schnittstreifen rechts. */
.whitepaper__bild { display: flex; justify-content: center; }
.heft {
  position: relative;
  width: clamp(190px, 24vw, 280px);
  aspect-ratio: 49 / 60;
  transform: rotate(-3deg);
}
.heft::before {
  content: "";
  position: absolute; inset: 0;
  transform: translate(11px, 9px);
  background: #23233A;
  border-radius: 2px 4px 4px 2px;
}
.heft__deckel {
  position: absolute; inset: 0;
  background: var(--signal);
  color: var(--navy);
  border-radius: 2px 4px 4px 2px;
  padding: 10% 9% 9% 15%;
  display: flex; flex-direction: column;
  box-shadow: 0 22px 48px -14px rgba(0, 0, 0, 0.6);
}
.heft__deckel::after {
  content: "";
  position: absolute; right: -6px; top: 3%; bottom: 3%;
  width: 6px;
  border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(180deg, #FFFFFF 0 2px, #D6D6DE 2px 4px);
}
/* Bundsteg: der Schattenverlauf am Buchrücken. */
.heft__ruecken {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 8.2%;
  z-index: 2;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.06) 60%, transparent 100%);
}
.heft__marke {
  font-family: var(--schrift-daten);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.heft__titel {
  margin-top: auto;
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  font-size: clamp(0.95rem, 0.7rem + 1vw, 1.3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.heft__fuss {
  margin-top: 0.8rem;
  font-family: var(--schrift-daten);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
}


/* ==========================================================================
   FUSS
   ========================================================================== */
.fuss {
  background: var(--navy);
  color: var(--navy-weich);
  border-top: 1px solid var(--linie-hell);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.fuss__innen {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
}
/* Die Wortmarke liegt farbig vor; auf Navy wird sie per Filter auf Weiß
   gedreht. Gleicher Workaround wie auf der Hauptseite — es gibt (noch) keine
   sauber beschnittene weiße Wide-Variante. */
.fuss__logo img { height: 1.5rem; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.fuss__recht { font-size: 0.8125rem; }
.fuss__links { display: flex; gap: 1.5rem; margin-left: auto; font-size: 0.8125rem; }
.fuss__links a:hover { color: var(--weiss); }


/* ==========================================================================
   Einblenden beim Scrollen (scroll-reveal.js)
   --------------------------------------------------------------------------
   Der Ausgangszustand hängt an .reveal-ready auf <html>, und die Klasse setzt
   nur das Script. Ohne JS steht alles sichtbar da — kein opacity:0 in der Basis.
   ========================================================================== */
.reveal-ready [data-reveal] {
  opacity: 0;
  transition: opacity 0.55s var(--aus), transform 0.55s var(--aus);
}
.reveal-ready [data-reveal="up"]    { transform: translateY(1.5rem); }
.reveal-ready [data-reveal="left"]  { transform: translateX(-2.5rem); }
.reveal-ready [data-reveal="right"] { transform: translateX(2.5rem); }
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

.reveal-ready .merkmal:nth-child(2),
.reveal-ready .schritt:nth-child(2),
.reveal-ready .projekt:nth-child(2) { transition-delay: 0.09s; }
.reveal-ready .merkmal:nth-child(3),
.reveal-ready .schritt:nth-child(3),
.reveal-ready .projekt:nth-child(3) { transition-delay: 0.18s; }


/* ==========================================================================
   Whitepaper-Popup (mailchimp-popup.js)
   --------------------------------------------------------------------------
   Markup und Klassennamen kommen unverändert aus der Hauptseite; hier nur auf
   die Tokens dieser Seite umgestellt. Die Knopfklassen .btn/.btn--primary/
   .btn--outline erwartet das Script fest — deshalb bleiben sie so heißen.
   ========================================================================== */
.mc-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(11, 11, 35, 0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.mc-modal.is-open { opacity: 1; visibility: visible; }
.mc-modal[hidden] { display: none; }

.mc-modal__dialog {
  position: relative;
  width: 100%; max-width: 600px;
  max-height: calc(100vh - 2.5rem); overflow-y: auto;
  background: var(--weiss); color: var(--tinte);
  border-radius: 6px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 28px 70px rgba(11, 11, 35, 0.45);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s var(--aus);
}
.mc-modal.is-open .mc-modal__dialog { transform: none; }

.mc-modal__close {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 2.5rem; height: 2.5rem;
  border: none; background: transparent; color: var(--tinte-weich);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mc-modal__close:hover { background: var(--bogen-tief); color: var(--tinte); }

.mc-modal__eyebrow {
  font-family: var(--schrift-daten);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-weich);
}
.mc-modal__title { margin-top: 0.4rem; font-family: var(--schrift-anzeige); font-weight: 800; font-size: 1.45rem; line-height: 1.1; }
.mc-modal__intro { margin-top: 0.55rem; font-size: var(--fs-klein); color: var(--tinte-weich); }

.mc-progress { margin: 1.35rem 0 1.4rem; }
.mc-progress__label { font-family: var(--schrift-daten); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-weich); }
.mc-progress__track { margin-top: 0.45rem; height: 4px; border-radius: 999px; background: var(--bogen-tief); overflow: hidden; }
.mc-progress__fill { height: 100%; background: var(--signal); border-radius: 999px; transition: width 0.3s var(--aus); }

.mc-step[hidden] { display: none; }

.mc-field { margin-bottom: 1rem; }
.mc-field > label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.mc-field__optional { color: var(--tinte-weich); font-weight: 400; }
.mc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }

.mc-field input {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--tinte);
  padding: 0.75rem 0.9rem; background: var(--weiss);
  border: 1.5px solid var(--linie-stark); border-radius: var(--r-knopf);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mc-field input::placeholder { color: var(--tinte-weich); }
.mc-field input:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(22, 24, 29, 0.12); }
.mc-field.is-invalid input { border-color: var(--signal); }

/* Fehlertext in Tinte statt Rot: das Rot-Signal trägt der Feldrahmen als
   grafisches Element (3:1 genügt dort), der Text selbst braucht 4,5:1. */
.mc-field__error { margin-top: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--tinte); display: none; }
.mc-field.is-invalid .mc-field__error { display: block; }

.mc-form__error { margin: 0 0 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--tinte); }
.mc-form__error[hidden] { display: none; }

.mc-actions { display: flex; gap: 0.75rem; margin-top: 1.35rem; }
.mc-actions .btn { flex: 1; }

.mc-legal { margin-top: 1rem; font-size: 0.72rem; line-height: 1.55; color: var(--tinte-weich); }

.mc-done { text-align: center; padding: 0.5rem 0; }
.mc-done[hidden] { display: none; }
.mc-done__check {
  width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem;
  border-radius: 50%; background: rgba(255, 68, 54, 0.12); color: var(--signal);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700;
}
.mc-done__title { font-family: var(--schrift-anzeige); font-weight: 800; font-size: 1.35rem; }
.mc-done__text { margin-top: 0.6rem; font-size: var(--fs-klein); color: var(--tinte-weich); }
.mc-done .btn { margin-top: 1.5rem; width: 100%; }

body.mc-modal-open { overflow: hidden; }

/* Keine eigenen Knopfregeln mehr für das Popup: seit die Seite dieselben
   .btn-Klassen wie die Hauptseite fährt, greifen die Knöpfe im Dialog
   automatisch — samt Pillenform, Shape-Morph und Ripple. */


/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 960px) {
  .absender__raster,
  .whitepaper__raster { grid-template-columns: minmax(0, 1fr); }

  .whitepaper__raster { gap: 2.5rem; }
  .whitepaper__bild { justify-content: flex-start; order: 2; }

  .projekt { grid-template-columns: minmax(0, 1fr); }
  .projekt__karte { max-width: 22rem; }
}

@media (max-width: 700px) {
  /* Das Thema entfällt auf schmalen Displays: neben der Wortmarke blieben nur
     zwölf Pixel Abstand und es brach auf zwei Zeilen um. „EMV-Guthabenkarte.de"
     sagt ohnehin dasselbe. */
  .nav__innen { min-height: 4rem; }
  .nav__thema { display: none; }

  /* Karten bleiben oben neben der Überschrift (Kundenwunsch); Fließtext und
     Knöpfe rücken darunter auf die volle Breite. Der Bildnachweis muss dafür
     aus .hero__bild heraus — display:contents hebt den Zwischen-<div> auf, so
     werden Fächer und Nachweis zu eigenen Rasterfeldern. */
  .hero__raster {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "kopf      bild"
      "fuss      fuss"
      "nachweis  nachweis";
    gap: 1.5rem 0.9rem;
    align-items: start;
  }
  .hero__bild { display: contents; }
  .faecher { grid-area: bild; align-self: center; }
  .bildnachweis { grid-area: nachweis; margin-top: 0; }

  /* Enger gestapelt und breitere Karten: in einer 150-px-Spalte zählt jeder
     Millimeter, damit die Kartenmarken noch lesbar bleiben. Karte 3 endet bei
     24 % + 76 % = genau 100 % der Fächerbreite. */
  .faecher__platz { width: 76%; }
  .faecher__platz:nth-child(1) { --l: 0%;  --t: 36%; }
  .faecher__platz:nth-child(2) { --l: 12%; --t: 18%; }
  .faecher__platz:nth-child(3) { --l: 24%; --t: 0%; }

  /* Flacher als die Grundkurve: hier teilt sich die Überschrift die Zeile mit
     dem Fächer. Maßgeblich ist „Einsteigen." — das längste Wort bestimmt, wie
     groß die Überschrift in der schmalen Spalte werden darf. In Inter misst es
     das 5,31-fache der Schriftgröße; Fira Sans Condensed kam mit demselben Wort
     auf gut ein Viertel weniger, deshalb ist diese Kurve nach dem
     Schriftwechsel neu gerechnet. Sie hält bei 320 px wie bei 700 px rund 6 %
     Luft zur Spaltenbreite. */
  .hero__zeile { font-size: clamp(1.5rem, -0.3rem + 9.2vw, 3.2rem); }

  .fakt { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .fakt dt { padding-top: 0; }

  .btn-reihe .btn { flex: 1 1 100%; }

  .fuss__innen { flex-direction: column; align-items: flex-start; }
  .fuss__links { margin-left: 0; }
}

@media (max-width: 640px) {
  /* Popup als Bottom-Sheet statt gestauchtem Mini-Dialog. */
  .mc-modal { padding: 0; align-items: flex-end; }
  .mc-modal__dialog {
    max-width: none; max-height: 92vh;
    border-radius: 16px 16px 0 0;
    padding: 1.4rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  .mc-modal.is-open .mc-modal__dialog { transform: none; }
  .mc-modal__dialog::before {
    content: ""; display: block; width: 2.25rem; height: 4px;
    margin: -0.4rem auto 1rem; border-radius: 999px; background: var(--bogen-tief);
  }
  /* font-size bleibt 16px — kleiner zoomt iOS beim Fokus ins Feld hinein. */
  .mc-field input { min-height: 3rem; }
}

@media (max-width: 480px) {
  .mc-actions { flex-direction: column-reverse; }
  .mc-row { grid-template-columns: 1fr; gap: 0; }
}


/* ==========================================================================
   Reduzierte Bewegung. scroll-reveal.js schaltet sich selbst ab; hier bleiben
   Kartenfächer, Akkordeon und Popup zu entschärfen.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faecher__platz { animation: none; }
  .frage__text { animation: none; }
  .btn:hover, .btn:active { transform: none; }
  .btn__ripple { display: none; }
  .lupe-dialog[open],
  .lupe-dialog[open]::backdrop { animation: none; }
  .lupe-bereit .projekt__karte { transition: none; }
  .lupe-bereit .projekt__karte:has(.lupe:hover) { transform: rotate(var(--dreh)); }
  .lupe__pille { transition: none; }
  /* karten-lupe.js setzt die Kippwinkel hier gar nicht erst; der Rückfallwert
     0deg bleibt also stehen. Die Regel nimmt nur noch den Übergang heraus. */
  .lupe-dialog__buehne .karte { transition: none; }
  .frage summary::after,
  .mc-modal, .mc-progress__fill { transition: none; }
  /* Steht nach dem 640px-Block und hebt dessen translateY(100%) mit auf —
     ohne Bewegung darf das Sheet nicht unsichtbar unter dem Rand liegen. */
  .mc-modal__dialog { transform: none; transition: none; }
}