/* ============================================================
   PostCloud · Material-DNA "Kanzleiglas"
   Lichte, opake Basis. Satiniertes Glas nur, wo es Bedeutung
   traegt: Navigation, Tuerschild, Portal-Fenster, Sekundaer-CTA.
   Daten und lange Texte liegen auf ruhigen, fast opaken Flaechen.
   ============================================================ */

/* ===== Schriften: lokal gehostet (DSGVO) ===== */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/schibsted-grotesk-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/schibsted-grotesk-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Tokens ===== */
:root {
  /* Base Canvas: Tageslicht, opak */
  --canvas: #F5F7FA;
  --canvas-deep: #EDF1F6;
  --surface: #FFFFFF;
  --surface-calm: #FBFCFE;

  /* Tinte und Text */
  --ink: #101828;
  --ink-soft: #33415C;
  --mute: #5A6472;

  /* Das eine Adress-Blau */
  --blue: #0B64F4;
  --blue-deep: #0A50C2;
  --blue-wash: rgba(11, 100, 244, 0.08);

  /* Kanzleiglas-Rezept */
  --glass-tint: rgba(255, 255, 255, 0.66);
  --glass-tint-strong: rgba(255, 255, 255, 0.78);
  --glass-edge-in: rgba(255, 255, 255, 0.9);
  --glass-edge-out: rgba(16, 32, 64, 0.1);
  --glass-blur: 20px;
  --glass-sat: 1.35;

  --sp-sec: 112px;
  --sp-sec-tight: 72px;

  --green: #157A4C;
  --green-soft: #DEF3E7;
  --line: #E3E8F0;

  --font-display: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif;
  --font-text: "Inter", "Segoe UI", Arial, sans-serif;

  --shell: 1160px;
  --r-l: 28px;
  --r-m: 18px;
  --r-s: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.05), 0 20px 44px -22px rgba(16, 32, 64, 0.18);
  --shadow-deep: 0 2px 4px rgba(16, 24, 40, 0.06), 0 32px 64px -28px rgba(16, 32, 64, 0.28);

  /* ===== Drei Kartenrollen (Apple-/CRO-Review, 5. September 2026) =====
     Vorher trug jede Sektion ihr eigenes Kartenmaterial (Glas, Weiss,
     Calm, mit und ohne Kontur), und das las sich als Vorlage. Jetzt gibt
     es drei Rollen, und jede Flaeche der Seite ist eine davon:
       Buehne: Radius 28, opakes Weiss, tiefer Schatten. Impressum-Karten
               (Hero, Schluss), Gruender-Karte, Tarife.
       Karte:  Radius 18, opakes Calm-Weiss, 1px Kontur, weicher Schatten.
               Schritte, Stimmen, Warum, Ratgeber, FAQ-Kontakt, Standort.
       Zeile:  Radius 14, EINE Flaeche mit Haarlinien. Die FAQ.
     Glas (.glass-satin) nur noch dort, wo Licht dahinter liegt: Nav,
     Portal-Fenster, Weg-Scheibe, Frost, Weltkugel. */
  --karte-buehne-radius: var(--r-l);
  --karte-buehne-grund: var(--surface);
  --karte-buehne-rand: 1px solid var(--line);
  --karte-buehne-schatten: inset 0 1px 0 var(--glass-edge-in), var(--shadow-deep);
  --karte-radius: var(--r-m);
  --karte-grund: var(--surface-calm);
  --karte-rand: 1px solid var(--line);
  --karte-schatten: inset 0 1px 0 var(--glass-edge-in), var(--shadow-soft);
  --karte-schatten-hoch: inset 0 1px 0 var(--glass-edge-in), var(--shadow-deep);
  --zeile-radius: var(--r-s);
  --zeile-grund: var(--surface);
  --zeile-linie: var(--line);

  /* ===== Ein Label-Token fuer alle Versalienzeilen =====
     Vorher acht Varianten zwischen 11.5 und 13px, 600 und 700, 0.06 und
     0.12em, in drei Farben. Jetzt eine. */
  --label-groesse: 11.5px;
  --label-gewicht: 700;
  --label-spur: 0.1em;
  --label-farbe: var(--mute);

  /* ===== Typo-Leiter =====
     Text 12 / 13 / 14 / 15 / 17 / 19 / 21, Display 30 / 36 / 46 / 58,
     Gewichte 400 / 500 / 600 / 700. Halbe Pixel (12.5, 14.5, 16.5) und
     Zwischengewichte (550, 650) gibt es in den Sektionen nicht mehr. */
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-17: 17px;
  --t-19: 19px;
  --t-21: 21px;
  --d-30: 30px;
  --d-36: 36px;
  --d-46: 46px;
  --d-58: 58px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas-deep) 100%);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; }
::selection { background: rgba(11, 100, 244, 0.22); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
/* Die schwebende Leiste verdeckt sonst jedes Element, zu dem der Browser
   selbst scrollt: Tastaturfokus, Sprungziele aus dem Verlauf, das
   Aufklappen einer Frage. scroll-margin fasst nur Elemente mit id,
   scroll-padding gilt fuer alles. */
html { scroll-padding-top: 92px; }
/* Unsichtbare Sprungziele fuer alte Anker (/#funktionen, /#faq) */
.anker-alias { position: relative; height: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--blue); color: #fff; padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }

/* Das eine Label: jede Versalienzeile der Seite traegt dieselbe Groesse,
   dasselbe Gewicht, dieselbe Spur und dieselbe Farbe. Layout (Abstand,
   Ausrichtung) steht weiter bei der jeweiligen Klasse. */
.eyebrow, .imprint-label, .imprint-caption, .gruender-karte-frage,
.stimmen-h, .plan-name, .outro-card-caption, .footer-h, .ratgeber-themen-h {
  font-size: var(--label-groesse);
  font-weight: var(--label-gewicht);
  letter-spacing: var(--label-spur);
  text-transform: uppercase;
  color: var(--label-farbe);
}

/* ===== Materialklasse: Kanzleiglas ===== */
.glass-satin {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge-out);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-in),
    var(--shadow-soft);
}
/* Opaque Fallback: gleichwertig, kein Notbehelf */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-satin { background: var(--surface-calm); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-satin {
    background: var(--surface-calm);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ===== Ambient Field: Tageslicht hinter der Glastuer =====
   Zwei langsam driftende Lichtschichten. Sie sind der Grund, warum das
   Glas existiert: ohne Licht kein Material. Transform-only Animation,
   bei Reduced Motion steht das Licht still. */
.light-field {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Ohne Maske endet der Schein an der Sektionskante abrupt, und weil das
     Feld der naechsten Sektion dort oft noch durchsichtig ist, steht ein
     sichtbarer Strich quer ueber die Seite. Gemessen an drei Grenzen:
     Hero zu Portal, Portal zu "So starten Sie", Preise zu Fragen.
     Die Maske blendet den Schein an beiden Enden aus, dann treffen sich
     zwei Sektionen immer auf demselben Grundton. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
}
.light-field::before,
.light-field::after {
  content: "";
  position: absolute;
  inset: -30% -20%;
  will-change: transform;
}
.light-field::before {
  background:
    radial-gradient(46% 58% at 20% 16%, rgba(11, 100, 244, 0.22), transparent 68%),
    radial-gradient(40% 52% at 84% 22%, rgba(76, 178, 255, 0.18), transparent 70%),
    radial-gradient(52% 62% at 60% 92%, rgba(11, 100, 244, 0.12), transparent 72%);
  animation: lf-drift-a 44s ease-in-out infinite alternate;
}
.light-field::after {
  background:
    radial-gradient(34% 44% at 44% 38%, rgba(255, 255, 255, 0.85), transparent 72%),
    radial-gradient(26% 34% at 74% 64%, rgba(255, 255, 255, 0.5), transparent 70%);
  mix-blend-mode: soft-light;
  animation: lf-drift-b 56s ease-in-out infinite alternate;
}
@keyframes lf-drift-a {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(3%, 3%, 0) scale(1.08); }
}
@keyframes lf-drift-b {
  from { transform: translate3d(2%, 3%, 0) rotate(0.001deg); }
  to { transform: translate3d(-3%, -2%, 0) rotate(0.001deg); }
}
.lf-low::before { opacity: 0.62; }
.lf-low::after { opacity: 0.5; }
.lf-outro::before {
  background:
    radial-gradient(48% 52% at 50% 8%, rgba(11, 100, 244, 0.2), transparent 70%),
    radial-gradient(36% 44% at 22% 70%, rgba(76, 178, 255, 0.12), transparent 70%);
}

/* ===== Buttons ===== */
/* iOS-DNA: Controls sind Kapseln. Pills bleiben Controls vorbehalten
   (CTAs, Toggle, Nav), Inhalte bekommen keine Kapseln. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px;
  border-radius: 999px;
  font-weight: 600; font-size: 15px;
  transition: transform 0.24s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.24s var(--ease), background 0.18s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-s { height: 44px; padding: 0 20px; font-size: 14px; }
.btn-l { height: 58px; padding: 0 34px; font-size: var(--t-17); }
.btn-primary {
  background: var(--blue); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 26px -12px rgba(11, 100, 244, 0.75);
}
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-2px); }
/* Sekundaer-CTA opak: Blur ueber flachem Canvas waere unsichtbar und
   liesse den Button deaktiviert wirken (Material-Purpose-Check). */
.btn-glass {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-edge-in);
  color: var(--ink);
}
.btn-glass:hover { transform: translateY(-2px); border-color: #CBD4E1; box-shadow: inset 0 1px 0 var(--glass-edge-in), var(--shadow-soft); }

/* ===== Navigation: schwebende Glas-Kapsel ===== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: center;
  padding: 14px 16px 0;
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 26px;
  width: min(1060px, 100%);
  height: 62px;
  padding: 0 10px 0 22px;
  border-radius: 999px;
  --glass-tint: rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav.scrolled .nav-pill {
  --glass-tint: rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-in),
    0 2px 4px rgba(16, 24, 40, 0.06),
    0 24px 48px -20px rgba(16, 32, 64, 0.3);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand span { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.brand b { color: var(--blue); font-weight: 700; }
.nav-links { position: relative; display: flex; gap: 4px; margin-inline: auto; }
/* ink-soft statt mute: bleibt auch lesbar, wenn dunkle Flaechen
   unter das Nav-Glas scrollen (Kontrast-Worst-Case) */
.nav-links a {
  position: relative; z-index: 1;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.18s;
}
.nav-links a:hover, .nav-links a.on { color: var(--ink); }
/* Die wandernde Glas-Pille: erhaben wie ein iOS-Segmented-Thumb.
   JS setzt left/width; sie folgt dem Zeiger und beim Scrollen der
   aktiven Sektion. */
.nav-indicator {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(16, 24, 40, 0.1),
    0 6px 16px -8px rgba(16, 32, 64, 0.35);
  opacity: 0;
  transition:
    left 0.32s cubic-bezier(0.3, 1.1, 0.4, 1),
    width 0.32s cubic-bezier(0.3, 1.1, 0.4, 1),
    opacity 0.25s var(--ease);
}
.nav-indicator.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-indicator { transition: opacity 0.2s; }
}
.nav-actions { margin-left: 0; display: flex; align-items: center; gap: 14px; }
.nur-schmal { display: none; }
.nav-login { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.nav-login:hover { color: var(--ink); }
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; border-radius: 10px; padding: 0 10px;
}
.nav-burger i { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.28s var(--ease); }
.nav-burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu {
  /* .nav setzt pointer-events: none, damit die Seite neben der Glaskapsel
     bedienbar bleibt. Das Menue liegt IM header und hat das geerbt: der
     Burger liess sich oeffnen, aber kein einziger Menuepunkt liess sich
     antippen. elementFromPoint traf die Ueberschrift dahinter. Auf jedem
     Telefon war die Navigation damit unbenutzbar. */
  pointer-events: auto;
  position: fixed; inset: 88px 14px auto 14px; z-index: 49;
  background: rgba(250, 251, 253, 0.98);
  border: 1px solid var(--glass-edge-out);
  border-radius: var(--r-l);
  box-shadow: inset 0 1px 0 var(--glass-edge-in), var(--shadow-deep);
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 22px;
}
.mobile-menu[hidden] { display: none; }
/* Sanft statt schlagartig: 200 ms und 8px, wie das Cookie-Panel. Browser
   ohne @starting-style zeigen das Menue wie bisher sofort. */
.mobile-menu { transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), display 0.2s allow-discrete; }
@starting-style { .mobile-menu:not([hidden]) { opacity: 0; transform: translateY(-8px); } }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  padding: 16px 4px;
  font-family: var(--font-display);
  font-size: 25px; font-weight: 600; letter-spacing: -0.01em;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .mm-login { font-family: var(--font-text); font-size: 16px; font-weight: 500; color: var(--mute); border-bottom: 0; }
.mobile-menu .btn { width: 100%; }

/* ===== Hero: zentrierte Buehne ===== */
.hero { position: relative; overflow: hidden; }
/* Am Seitenanfang gibt es keine Nachbarsektion darueber: der Schein soll
   sofort tragen und nur nach unten ausblenden. */
.hero > .light-field {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
}
.hero-center {
  position: relative;
  display: grid;
  /* minmax(0, 1fr) statt der Vorgabe auto: eine Rasterspalte waechst sonst
     auf die min-content-Breite ihres breitesten Kindes. Hier war das die
     Impressum-Karte, und weil justify-items zentriert, ragten bei 320px
     ALLE Kinder um dieselben 47px aus dem Fenster, die Ueberschrift
     eingeschlossen. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  padding-top: 104px;
  padding-bottom: 72px;
}
/* .eyebrow: siehe Label-Regel oben. Ueber h2 steht nirgends mehr eine
   Ueberzeile; die einzige verbliebene (Weltkugel) liegt ueber einer h3. */
.hero h1 {
  margin-top: 20px;
  /* justify-items: center des Elternrasters gibt der Ueberschrift ihre
     Inhaltsbreite. Ohne Deckel ragte sie auf schmalen Schirmen aus dem
     Fenster, gemessen 14px bei 320px Breite. */
  max-width: 100%;
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 720;
  line-height: 1.05;
  letter-spacing: -0.022em;
}
.hero h1 em { font-style: normal; color: var(--blue); }
.hero-sub {
  margin-top: 20px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--mute);
}
.hero-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-actions-center { justify-content: center; }
.hero-legal { margin-top: 22px; font-size: 13px; color: var(--mute); }
/* Stiller Weg fuer die, die schon wissen, was sie brauchen. */
.hero-direkt { margin-top: 12px; text-align: center; font-size: 13px; }
.hero-direkt a { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.hero-direkt a:hover { color: var(--ink); }
.imprint-form [hidden] { display: none !important; }

/* ===== Die Impressum-Buehne: vorher/nachher =====
   Das Impressum des Besuchers mit seiner Region. Bei "Adresse schuetzen"
   schiebt sich Milchglas ueber die private Strasse, darunter erscheint
   glasklar die PostCloud-Anschrift: die Material-These als Interaktion. */
.imprint {
  position: relative;
  margin-top: 34px;
  width: min(600px, 100%);
  text-align: left;
}
/* Licht direkt hinter der Karte */
.imprint::before {
  content: "";
  position: absolute;
  inset: -40px -90px -60px -90px;
  background:
    radial-gradient(48% 46% at 26% 30%, rgba(11, 100, 244, 0.26), transparent 68%),
    radial-gradient(42% 40% at 78% 70%, rgba(76, 178, 255, 0.22), transparent 70%),
    radial-gradient(32% 32% at 60% 14%, rgba(255, 255, 255, 0.9), transparent 72%);
  border-radius: 50%;
  pointer-events: none;
}
.imprint-head {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 0 6px 10px;
}
/* .imprint-label: siehe Label-Regel oben. */
/* Der Live-Chip: die erkannte Region des Besuchers, unuebersehbar */
.imprint-geo {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--glass-edge-out);
  box-shadow: inset 0 1px 0 var(--glass-edge-in), 0 8px 20px -12px rgba(16, 32, 64, 0.35);
  font-size: 12.5px; font-weight: 550;
  color: var(--ink-soft);
  white-space: nowrap;
}
.imprint-geo b { font-weight: 750; color: var(--ink); }
.imprint-geo small { font-size: 10.5px; color: var(--mute); font-weight: 500; }
.geo-dot {
  align-self: center;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(11, 100, 244, 0.45);
  animation: geo-pulse 2.4s ease-out infinite;
}
@keyframes geo-pulse {
  0% { box-shadow: 0 0 0 0 rgba(11, 100, 244, 0.45); }
  60% { box-shadow: 0 0 0 7px rgba(11, 100, 244, 0); }
  100% { box-shadow: 0 0 0 0 rgba(11, 100, 244, 0); }
}
/* Die Privatanschrift in der Impressum-Karte: sobald die Stadt des
   Besuchers erkannt ist, werden BEIDE Zeilen (Strasse + Stadt) rot
   markiert wie mit Warnmarker. Rot heisst hier Gefahr: an dieser Stelle
   ist der Besucher oeffentlich exponiert. Keine Postleitzahl: die
   IP-Ortung trifft sie zu selten, eine falsche Zahl im Fokus wuerde
   den ganzen Effekt entwerten. Das Milchglas deckt alles spaeter ab. */
.geo-mark { display: inline-block; border-radius: 9px; }
.geo-mark.geo-set {
  padding: 3px 10px 5px;
  margin-left: -10px;
  background: #FDE0DD;
  color: #B42318;
  font-weight: 650;
  animation: geo-pop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.geo-mark.geo-set .geo-city { font-weight: 750; }
@keyframes geo-pop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .geo-dot { animation: none; }
  .geo-mark.geo-set { animation: none; }
}
/* Ortswahl in der Impressum-Buehne (Hero). Gehoert hinter die .geo-mark-Regeln
   in styles.css. site.js setzt die Klassen per JS:
     .geo-city.geo-waehlbar   der Ort ist ein Knopf (role="button"), Klick
                              macht daraus ein Eingabefeld
     .geo-city.geo-bearbeitet der Ort enthaelt gerade das Feld
     .geo-feld                das Eingabefeld selbst, erbt Schrift und Farbe
                              der Zeile (auch das Rot von .geo-mark.geo-set) */
.geo-city.geo-waehlbar {
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: var(--mute);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 4px;
  transition: text-decoration-color 0.2s var(--ease);
}
.geo-city.geo-waehlbar:hover { text-decoration-color: var(--ink); }
.geo-mark.geo-set .geo-city.geo-waehlbar { text-decoration-color: currentColor; }
.geo-city.geo-bearbeitet { text-decoration: none; }
/* Die sichtbare Zeile hinter dem geschaetzten Ort ("geschätzt, zum Ändern
   antippen"). Tooltip und aria-label erreichen Touch-Besucher nicht, und
   die gepunktete Linie liest sich dort als Schmuck. site.js haengt sie an
   .geo-mark, nur solange der Ort geschaetzt, waehlbar und nicht unter dem
   Milchglas ist. Inline hinter dem Ort, damit die Karte nicht waechst. */
.geo-hinweis {
  display: inline-block;
  font-size: var(--t-12); font-weight: 500;
  letter-spacing: 0;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.geo-hinweis[hidden] { display: none; }
.geo-feld {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--mute);
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 12ch;
  max-width: 100%;
  vertical-align: baseline;
}
.geo-feld::placeholder { color: var(--mute); opacity: 1; font-weight: 500; }
.geo-feld:focus-visible { outline-offset: 2px; }
.imprint-card {
  position: relative;
  /* Buehne: dieselbe Karte im Hero, beim Gruender und im Schluss. */
  border-radius: var(--karte-buehne-radius);
  background: var(--karte-buehne-grund);
  border: var(--karte-buehne-rand);
  box-shadow: var(--karte-buehne-schatten);
  padding: 26px 30px 24px;
  overflow: hidden;
}
.imprint-specular {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(200px circle at var(--mx, 28%) var(--my, 18%), rgba(255, 255, 255, 0.8), transparent 62%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  mix-blend-mode: soft-light;
}
.imprint-card:hover .imprint-specular { opacity: 1; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .imprint-specular { display: none; }
}
/* .imprint-caption: siehe Label-Regel oben. */
.imprint-company {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: var(--t-21); font-weight: 600;
  letter-spacing: -0.01em;
}
.imprint-street {
  position: relative;
  margin-top: 6px;
  width: fit-content;
  min-width: 220px;
  border-radius: 10px;
}
.imprint-lines {
  padding: 4px 10px 6px 0;
  font-size: var(--t-17); line-height: 1.55;
  color: var(--ink-soft);
}
/* Die Milchglasscheibe, die sich ueber die private Strasse schiebt */
.imprint-frost {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(9px) saturate(var(--glass-sat));
  backdrop-filter: blur(9px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge-out);
  box-shadow: inset 0 1px 0 var(--glass-edge-in);
  transform: translateX(-108%);
  opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.3s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .imprint-frost { background: rgba(250, 251, 253, 0.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .imprint-frost { background: rgba(250, 251, 253, 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.imprint.protected .imprint-frost { transform: none; opacity: 1; }
.imprint-frost-chip {
  padding: 3px 11px; border-radius: 999px;
  background: var(--green-soft); color: var(--green);
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
/* Die PostCloud-Zeilen: liegen schon hinter Milchglas bereit und werden
   beim Schuetzen glasklar. Der milchige Schimmer fuellt die Karte, statt
   ein leeres Loch zu reservieren. */
.imprint-cloud {
  margin-top: 10px;
  font-size: var(--t-17); line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.3;
  filter: blur(7px);
  transition: opacity 0.5s var(--ease) 0.25s, filter 0.5s var(--ease) 0.25s;
}
.imprint.protected .imprint-cloud { opacity: 1; filter: blur(0); }
.imprint-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--t-13);
  color: var(--mute);
  min-height: 20px;
}
.imprint.protected .imprint-note { color: var(--green); font-weight: 500; }
.imprint-form {
  position: relative;
  margin-top: 16px;
  display: flex; gap: 10px;
}
/* Eigener Behaelter, damit Stift und Schreibmaschine am FELD haengen und
   nicht am Formular: sonst wandern sie mit der Knopfbreite. */
.imprint-feld { position: relative; flex: 1; min-width: 0; display: flex; }

.imprint-input {
  flex: 1;
  min-width: 0;
  height: 58px;
  padding: 0 52px 0 24px;   /* rechts Platz fuer das Stift-Zeichen */
  border-radius: 999px;
  border: 1.5px solid #D8E0EC;
  background: var(--surface);
  font-size: 17px; font-weight: 550;
  color: var(--ink);
  cursor: text;
  box-shadow: inset 0 1px 0 var(--glass-edge-in), inset 0 2px 6px rgba(16, 24, 40, 0.04);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease);
}
.imprint-input:hover { border-color: #B9C8DE; box-shadow: inset 0 1px 0 var(--glass-edge-in), 0 6px 18px -10px rgba(16, 32, 64, 0.28); }

/* Hier atmeten Feldring und Stift zwoelf Sekunden lang neben der
   Schreibmaschine: drei Signale fuer dieselbe Aufforderung. Jetzt
   erklaert die Schreibmaschine allein. */

/* Stift im Feld: das eindeutigste Zeichen dafuer, dass hier geschrieben wird. */
.imprint-stift {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: #9FB0C8; pointer-events: none;
  transition: color 0.22s var(--ease), opacity 0.22s var(--ease);
}
.imprint-input:focus ~ .imprint-stift,
.imprint-input:hover ~ .imprint-stift { color: var(--blue); }
.imprint-stift[hidden] { display: none; }
.imprint-input::placeholder { color: var(--mute); }

/* Schreibmaschinen-Schleife im Eingabefeld.
   Der echte Platzhalter laesst sich nicht mit einem Schreibstrich versehen,
   deshalb liegt eine Textschicht ueber dem Feld. Sie ist fuer Maus und
   Vorlesesoftware unsichtbar; sobald jemand das Feld anfasst oder etwas
   eingibt, verschwindet sie. */
.imprint-input.hat-lockruf::placeholder { color: transparent; }
.imprint-lockruf {
  position: absolute; left: 23px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center;
  font-size: 16px; font-weight: 550; color: var(--mute);
  pointer-events: none; white-space: nowrap; max-width: calc(100% - 46px);
  overflow: hidden;
  transition: opacity 0.25s var(--ease);
}
.imprint-lockruf[hidden] { display: none; }
.imprint-lockruf.ist-weg { opacity: 0; }
.imprint-lockruf i {
  display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px;
  background: var(--blue); border-radius: 1px;
  transform-origin: 50% 100%;
  opacity: 0;
}
/* Der Strich kommt zuerst und macht dabei einen kleinen Satz, so wie ein
   Cursor, der in ein Feld gesetzt wurde. Erst danach wird getippt. */
.imprint-lockruf.ist-gesetzt i { animation: lockruf-satz 0.42s var(--ease) forwards; }
.imprint-lockruf.ist-gesetzt.blinkt i { animation: lockruf-blinken 1.05s steps(1, end) infinite; }
@keyframes lockruf-satz {
  0%   { opacity: 0; transform: translateY(-7px) scaleY(0.45); }
  55%  { opacity: 1; transform: translateY(1px) scaleY(1.14); }
  78%  { transform: translateY(0) scaleY(0.94); }
  100% { opacity: 1; transform: none; }
}
@keyframes lockruf-blinken { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .imprint-lockruf { display: none; }
  .imprint-input.hat-lockruf::placeholder { color: var(--mute); }
}
.imprint-input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-color: var(--blue);
  box-shadow: none;
  animation: none;
}
/* Ohne JS steht der geschuetzte Endzustand da */
html:not(.bereit) .imprint-frost { transform: none; opacity: 1; }
html:not(.bereit) .imprint-cloud { opacity: 1; filter: none; }
html:not(.bereit) .imprint-form { display: none; }

/* Der Datenschutzhinweis und die Einladung teilen sich EINE Zelle: so
   springt nichts, wenn die Einladung kommt und wieder geht, und der
   Kasten ist immer so hoch wie der laengere der beiden Texte. Der
   Hinweis kommt zurueck, sobald jemand das Feld anfasst. */
.dp-hint {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--mute);
  display: grid;
}
/* Erst geht die eine, dann kommt die andere. Ein gleichzeitiges Blenden
   legt zwei verschiedene Saetze uebereinander, und das war im Standbild
   ein unleserlicher Brei. */
.dp-hint > * { grid-area: 1 / 1; transition: opacity 0.18s var(--ease); }
.dp-hint-ruf { opacity: 0; color: var(--blue-deep); font-weight: 600; transition-delay: 0.2s; }
.dp-hint.ruft .dp-hint-satz { opacity: 0; transition-delay: 0s; }
.dp-hint.ruft .dp-hint-ruf { opacity: 1; }
.dp-hint .dp-hint-satz { transition-delay: 0.2s; }
.dp-hint.ruft .dp-hint-ruf { transition-delay: 0.2s; }

/* Registerfakten */
/* ===== Sektionen ===== */
section { position: relative; }
.sec-head { max-width: 620px; padding-top: var(--sp-sec); }
.faq .sec-head { padding-top: var(--sp-sec-tight); }
.sec-head h2 {
  font-size: clamp(var(--d-30), 2.8vw, var(--d-36));
  font-weight: 700;
  line-height: var(--lh-display);
}
.sec-head p { margin-top: 14px; font-size: var(--t-17); color: var(--mute); max-width: 540px; }
.sec-head-center { margin-inline: auto; text-align: center; }
.sec-head-center p { margin-inline: auto; }

/* Reveals nur, wenn JS bestaetigt ist: ohne Skript bleibt alles sichtbar */
.bereit .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.bereit .reveal.in { opacity: 1; transform: none; }


/* ===== So starten Sie (Tournament-Sieger Variante 2) =====
   Zentrale Timeline: der Lichtstrahl laeuft mittig, vier Kanzleiglas-
   Karten docken abwechselnd links/rechts an gravierten Glas-Medaillons
   an. Strahl kontinuierlich scroll-gekoppelt, beide Richtungen. */
.start { position: relative; overflow: hidden; padding-bottom: 8px; }
.start .sec-head { padding-top: var(--sp-sec); }
.sv-light {
  inset: -220px 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.v2-timeline {
  position: relative;
  margin-top: 56px;
  padding-bottom: 8px;
}
.v2-beam {
  position: absolute;
  left: 50%; top: 0;
  height: 100%;
  width: 3px;
  border-radius: 3px;
  background: rgba(16, 32, 64, 0.1);
  transform: translateX(-50%);
  z-index: 0;
}
.v2-beam-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  border-radius: 3px;
  /* Fortschritt ueber Helligkeit, nicht ueber Farbe: Blau gehoert unterhalb
     der Falte allein den Kaufknoepfen (DIRECTION.md). */
  background: linear-gradient(180deg, rgba(16, 32, 64, 0.18), var(--ink-soft));
}
.v2-beam-tip {
  position: absolute;
  left: 50%; top: 0;
  width: 13px; height: 13px;
  margin: -6px 0 0 -6.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    inset 0 0 0 3px var(--ink-soft),
    0 0 12px 2px rgba(16, 32, 64, 0.22);
}
.v2-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  column-gap: 20px;
  row-gap: 60px;
  align-items: center;
}
.v2-grid [data-step="1"] { grid-row: 1; }
.v2-grid [data-step="2"] { grid-row: 2; }
.v2-grid [data-step="3"] { grid-row: 3; }
.v2-grid [data-step="4"] { grid-row: 4; }
.v2-card {
  grid-column: 1;
  position: relative;
  padding: 26px 28px;
  /* Karte, opak: vier Milchglasscheiben nebeneinander lasen sich als
     Vorlage. Das Glas bleibt den Medaillons auf dem Strahl. */
  border-radius: var(--karte-radius);
  background: var(--karte-grund);
  border: var(--karte-rand);
  box-shadow: var(--karte-schatten);
  transition: filter 0.45s var(--ease), opacity 0.45s var(--ease);
}
.v2-card.v2-side-r { grid-column: 3; }
.v2-card.v2-side-l::after,
.v2-card.v2-side-r::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px; height: 2px;
  background: var(--line);
  transition: background 0.45s var(--ease);
}
.v2-card.v2-side-l::after { right: -20px; }
.v2-card.v2-side-r::before { left: -20px; }
.v2-card.on.v2-side-l::after,
.v2-card.on.v2-side-r::before { background: var(--ink-soft); }
.v2-card-head { display: flex; align-items: center; gap: 12px; }
.v2-card-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-soft);
}
.v2-card-icon .i { width: 17px; height: 17px; }
/* Schibsted wie jeder Kartentitel der Seite; die Inter-Ausnahme ist weg. */
.v2-card h3 { font-size: var(--t-19); font-weight: 700; line-height: var(--lh-titel); }
.v2-card p { margin-top: 8px; font-size: var(--t-14); color: var(--mute); }
.v2-node {
  grid-column: 2;
  justify-self: center;
  position: relative;
  z-index: 2;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge-out);
  box-shadow: inset 0 1px 0 var(--glass-edge-in), var(--shadow-soft);
  transition: box-shadow 0.45s var(--ease), filter 0.45s var(--ease), opacity 0.45s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v2-node { background: var(--surface-calm); }
}
@media (prefers-reduced-transparency: reduce) {
  .v2-node { background: var(--surface-calm); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.v2-node-num {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #8593A9;  /* war #C3CCDB (1,62:1), dann #94A2B8 (2,59:1), beides unter der Schwelle */
  transition: color 0.45s var(--ease);
}
/* Erreicht heisst: Ziffer in Tinte und ein 1px-Ring, kein blauer Schein.
   Der Ruhezustand bleibt das hellere Grau darueber. */
.v2-node.on {
  box-shadow:
    inset 0 1px 0 var(--glass-edge-in),
    var(--shadow-soft),
    0 0 0 1px var(--ink-soft);
}
.v2-node.on .v2-node-num { color: var(--ink); }
/* Das Geraet ist richtig: was der Strahl noch nicht erreicht hat, liegt
   hinter Milchglas. Der Ruhezustand lag aber zu tief. Gemessen: die Ziffer
   stand bei 1,62:1 und war zusaetzlich unscharf und halbdurchsichtig, also
   weit unter jeder Lesbarkeitsschwelle. Wer ueber den Fuss auf #starten
   springt, sieht zwei der vier Schritte so. Jetzt liest es sich weiterhin
   als "noch nicht", bleibt aber Text statt Fleck. */
html.bereit .v2-card:not(.on) { filter: blur(1.2px); opacity: 0.72; }
html.bereit .v2-node:not(.on) { filter: blur(1px); opacity: 0.75; }
html:not(.bereit) .v2-node-num { color: var(--ink); }
html:not(.bereit) .v2-node {
  box-shadow:
    inset 0 1px 0 var(--glass-edge-in),
    var(--shadow-soft),
    0 0 0 1px var(--ink-soft);
}
html:not(.bereit) .v2-card.v2-side-l::after,
html:not(.bereit) .v2-card.v2-side-r::before { background: var(--ink-soft); }
.v2-note { position: relative; z-index: 1; margin-top: 36px; font-size: 14px; text-align: center; }
/* Unter 768px kippt die Zickzack-Timeline in eine Spalte: Knoten links,
   Karten rechts. Diese Regel stand bis Commit b984176 im Repo; ohne sie
   ragten Karte 2 und 4 bei 390px 113px ueber den rechten Rand. */
@media (max-width: 767.98px) {
  .v2-grid { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 28px; }
  .v2-card, .v2-card.v2-side-r { grid-column: 2; }
  .v2-node { grid-column: 1; width: 44px; height: 44px; }
  .v2-node-num { font-size: 15px; }
  /* Die Spitze ist ein Kind des Strahls, nicht der Timeline: left: 50% der
     Grundregel zentriert sie im 3px-Strahl. Ein eigenes left: 22px setzte
     sie 20,5px rechts NEBEN die Linie (gemessen bei 390 und 360). */
  .v2-beam { left: 22px; transform: none; }
  .v2-card.v2-side-l::after, .v2-card.v2-side-r::before { display: none; }
  .v2-card { padding: 20px 20px; }
  .v2-card h3 { font-size: var(--t-17); }
}
/* Auf Touch-Geraeten liegt die untere Haelfte jedes Bildschirms sonst
   dauerhaft hinter Milchglas. */
@media (pointer: coarse) {
  html.bereit .v2-card:not(.on), html.bereit .v2-node:not(.on) { filter: none; opacity: 0.85; }
}

/* Die Leistungs-Leiste auf dem silbernen Schein: eine grosse, seidig
   polierte Lichtflaeche liegt schraeg hinter der Kanzleiglas-Leiste. */
.caps-wrap { position: relative; margin-top: 72px; }
/* Die silberne Form wie in Variante 3: eine kompakte Aura, die die
   Leiste knapp ueberragt — zwei zarte Blau-Schleier plus Weissglanz. */
.caps-shine {
  position: absolute;
  inset: -50px -70px -60px -70px;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(46% 52% at 22% 28%, rgba(11, 100, 244, 0.16), transparent 68%),
    radial-gradient(40% 46% at 80% 72%, rgba(76, 178, 255, 0.13), transparent 70%),
    radial-gradient(30% 34% at 58% 10%, rgba(255, 255, 255, 0.85), transparent 72%);
}
/* ===== Der Weg eines Briefes =====
   Fuenf Stationen auf einer Bahn, und ein Brief, der sie abfaehrt.

   VIER REGELN, DIE HIER ALLES BESTIMMEN

   1. Kein SVG wird je GROESSER als 1 skaliert. Der Browser rastert eine
      bewegte Ebene EINMAL und skaliert danach das Bild, nicht die Form.
      Nachgemessen an der alten Kamera bei scale(1.14): staerkste Kante
      faellt von 257 auf 222, weiche Zwischenpixel steigen um ein
      Viertel. Kleiner als 1 ist erlaubt (der Brief legt sich so in den
      Scannerrahmen), groesser nie. Wachsen darf nur weiches Licht, wo
      Unschaerfe niemand sieht, und der Ring waechst ueber box-shadow:
      der wird neu GEZEICHNET und bleibt dabei scharf.

   2. Alles laeuft auf EINER Uhr, dem Umlauf des Briefes. Jede
      Verzoegerung unten ist der Zeitpunkt, zu dem er ankommt, keine
      runde Zahl.

   3. Zwei Gestaltwechsel geschehen VOR den Augen, nicht versteckt: der
      Brief wird an "Geoeffnet" mitten im Kreis geoeffnet und legt sich
      an "Gescannt" in den Rahmen, wo aus ihm das Dokument wird. Dafuer
      liegt er dort VOR den Kreisen statt dahinter. An den uebrigen drei
      Stationen verschwindet er in ihnen, denn dort passiert nichts, was
      man sehen muss: er wird angenommen, gemeldet, mitgenommen.

   4. Keine Blende zwischen zwei Gestalten. Wo eine Gestalt in die
      andere ueberging, standen beide halbdurchsichtig uebereinander,
      und genau das sah aus wie ein Darstellungsfehler. Gewechselt wird
      hart, immer im Augenblick, in dem das Zeichen hochkant steht. */
.weg {
  position: relative;
  border-radius: var(--r-l);
  padding: 40px 30px 44px;
}
.weg-titel {
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Das Gleis traegt vier Lagen: die Haarlinie, die Stationen, die
   Fahrspur des Briefes und ganz oben den Lichtstrahl des Scanners. */
.weg-gleis { position: relative; margin-top: 44px; }
.weg-gleis::before {
  content: "";
  position: absolute; left: 10%; width: 80%; top: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
  transform-origin: 0 50%;
}
.weg-fahrt {
  position: absolute;
  left: 10%; width: 80%; top: 32px; height: 0;
  pointer-events: none;
  perspective: 360px;
}
/* Der Laeufer ist so breit wie die Spur. translateX(100%) heisst darum
   genau: von der ersten Punktmitte bis zur letzten. Die Fracht darin
   ist ein Punkt ohne Ausdehnung, um den sich alles dreht. */
.weg-laeufer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transform-style: preserve-3d;
}
.weg-fracht {
  position: absolute; left: 0; top: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.weg-fracht .weg-blatt {
  position: absolute; left: -12px; top: -12px;
  width: 24px; height: 24px;
  color: var(--ink-soft);
  filter: drop-shadow(0 2px 3px rgba(16, 32, 64, 0.22));
}
.weg-blatt-2, .weg-blatt-3, .weg-blatt-4 { opacity: 0; }
/* Der Schweif: in Ruhe ein runder Schein, in Fahrt ein Streifen, der
   nach hinten zieht. Weiches Licht darf gestreckt werden. */
.weg-laeufer::before {
  content: "";
  position: absolute; left: -30px; top: -30px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(16, 32, 64, 0.14), rgba(16, 32, 64, 0) 100%);
  transform-origin: 50% 50%;
}

/* Der Scanner: eine runde Blende ueber der dritten Station, in der ein
   Lichtstrahl von oben nach unten wandert. Sie liegt ueber der Bahn UND
   ueber dem Brief, damit das Licht auf ihn faellt und nicht hinter ihn. */
.weg-scanner {
  position: absolute; z-index: 3;
  left: 50%; top: 32px;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.weg-strahl {
  position: absolute; left: 13px; right: 13px; top: 31px;
  height: 2px; border-radius: 2px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(16, 32, 64, 0), var(--ink-soft) 22%, var(--ink-soft) 78%, rgba(16, 32, 64, 0));
  box-shadow: 0 0 9px 1px rgba(16, 32, 64, 0.35);
}

.weg-bahn {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.weg-bahn > li { position: relative; padding: 0 10px; text-align: center; }
.weg-punkt {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px -12px rgba(16, 32, 64, 0.5);
  /* Grau wie .v2-card-icon 300px darueber: Blau gehoert den Kaufwegen. */
  color: var(--ink-soft);
}
/* Der Ring, der bei der Ankunft nach aussen laeuft. Ueber box-shadow,
   nicht ueber scale: so bleibt seine Kante scharf. */
.weg-punkt::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.weg-punkt > * { grid-area: 1 / 1; }
.weg-punkt .i { width: 26px; height: 26px; }
.weg-bahn > li > b {
  display: block;
  margin-top: 18px;
  font-family: var(--font-display);
  /* Leiterstufe statt 16,5px/650: "Weitergeleitet" bleibt bei 850px in
     seiner Spalte (nachgemessen). */
  font-size: var(--t-17); font-weight: 600;
  letter-spacing: -0.005em;
}

/* Ruhezustand: was ohne Bewegung nicht zu sehen sein darf. */
.weg-glanz, .weg-punktchen { opacity: 0; }
.weg-glanz {
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(16, 32, 64, 0.16), rgba(16, 32, 64, 0) 100%);
}
.weg-punktchen {
  align-self: start; justify-self: end;
  width: 9px; height: 9px; margin: 13px 13px 0 0;
  border-radius: 50%;
  background: var(--ink-soft);
  box-shadow: 0 0 0 2.5px var(--surface);
}

/* ---------------------------------------------------------------------
   DER AUFTRITT, einmalig beim Hereinscrollen
   Erst zieht sich die Bahn, dann steigen die Stationen der Reihe nach
   herauf, und erst danach faehrt der Brief los. Deshalb haben alle
   Schleifen 1,1 s Vorlauf: so lange dauert der Auftritt.
   --------------------------------------------------------------------- */
.caps-wrap.in .weg-gleis::before { animation: weg-bahn-ziehen 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
@keyframes weg-bahn-ziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.caps-wrap.in .weg-bahn > li { animation: weg-auftritt 0.72s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes weg-auftritt {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.caps-wrap.in .weg-bahn > li:nth-child(1) { animation-delay: 0.22s; }
.caps-wrap.in .weg-bahn > li:nth-child(2) { animation-delay: 0.32s; }
.caps-wrap.in .weg-bahn > li:nth-child(3) { animation-delay: 0.42s; }
.caps-wrap.in .weg-bahn > li:nth-child(4) { animation-delay: 0.52s; }
.caps-wrap.in .weg-bahn > li:nth-child(5) { animation-delay: 0.62s; }

/* ---------------------------------------------------------------------
   DIE UHR

   Ein Umlauf dauert 8,4 s. Ankunft an den Stationen bei 7 / 26 / 45 /
   64 / 83 Prozent, Aufenthalt jeweils 6 Prozent, Fahrt dazwischen
   13 Prozent.

   Die Einteilung ist NACHGEMESSEN. Zuerst standen 7 Prozent Aufenthalt
   gegen 11 Prozent Fahrt mit einer harten Zeitkurve; die Abtastung
   zeigte, dass der Brief die ersten 4 Prozent einer Teilstrecke gerade
   44px kroch und dann in 3 Prozent 128px schoss. Jede Gestalt war
   dadurch nur 0,21 s frei zu sehen. Mit 6/13 und der flachen Kurve
   0.4/0.1/0.6/0.9 sind es 0,46 s, und der Anteil des Umlaufs mit frei
   stehendem Brief stieg von 11 auf 23 Prozent.

   Jede Station bekommt ihre Ankunftszeit als Verzoegerung, minus die
   3 Prozent Anlauf ihrer eigenen Bewegung, plus 1,1 s Vorlauf:
     1,1 + (7-3)  % = 1,44 s     1,1 + (64-3) % = 6,22 s
     1,1 + (26-3) % = 3,03 s     1,1 + (83-3) % = 7,82 s
     1,1 + (45-3) % = 4,63 s
   --------------------------------------------------------------------- */
.weg-laeuft .weg-fahrt,
.weg-laeuft .weg-laeufer,
.weg-laeuft .weg-laeufer::before,
.weg-laeuft .weg-fracht,
.weg-laeuft .weg-blatt,
.weg-laeuft .weg-strahl,
.weg-laeuft .weg-punkt,
.weg-laeuft .weg-punkt::after,
.weg-laeuft .weg-punkt > * {
  animation-duration: 8.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.weg-laeuft .weg-laeufer,
.weg-laeuft .weg-fracht,
.weg-laeuft .weg-blatt,
.weg-laeuft .weg-punkt,
.weg-laeuft .weg-ico { will-change: transform; }

.weg-laeuft .weg-fahrt,
.weg-laeuft .weg-laeufer,
.weg-laeuft .weg-laeufer::before,
.weg-laeuft .weg-fracht,
.weg-laeuft .weg-blatt { animation-delay: 1.1s; }
.weg-laeuft .weg-strahl { animation-delay: 4.63s; }
.weg-laeuft .weg-bahn > li:nth-child(1) .weg-punkt,
.weg-laeuft .weg-bahn > li:nth-child(1) .weg-punkt::after,
.weg-laeuft .weg-bahn > li:nth-child(1) .weg-punkt > * { animation-delay: 1.44s; }
.weg-laeuft .weg-bahn > li:nth-child(2) .weg-punkt,
.weg-laeuft .weg-bahn > li:nth-child(2) .weg-punkt::after,
.weg-laeuft .weg-bahn > li:nth-child(2) .weg-punkt > * { animation-delay: 3.03s; }
.weg-laeuft .weg-bahn > li:nth-child(3) .weg-punkt,
.weg-laeuft .weg-bahn > li:nth-child(3) .weg-punkt::after,
.weg-laeuft .weg-bahn > li:nth-child(3) .weg-punkt > * { animation-delay: 4.63s; }
.weg-laeuft .weg-bahn > li:nth-child(4) .weg-punkt,
.weg-laeuft .weg-bahn > li:nth-child(4) .weg-punkt::after,
.weg-laeuft .weg-bahn > li:nth-child(4) .weg-punkt > * { animation-delay: 6.22s; }
.weg-laeuft .weg-bahn > li:nth-child(5) .weg-punkt,
.weg-laeuft .weg-bahn > li:nth-child(5) .weg-punkt::after,
.weg-laeuft .weg-bahn > li:nth-child(5) .weg-punkt > * { animation-delay: 7.82s; }

/* Vor oder hinter den Kreisen? An "Geoeffnet" und "Gescannt" liegt der
   Brief VORNE, weil man dort zusehen soll. Sonst hinten, damit er in
   Haus, Handy und Wagen verschwindet. Der Wechsel faellt jedes Mal auf
   eine freie Strecke, wo nichts uebereinanderliegt. */
.weg-laeuft .weg-fahrt { animation-name: weg-vorn; }
@keyframes weg-vorn {
  0%, 21.9%  { z-index: 0; }
  22%, 57.9% { z-index: 2; }
  58%, 100%  { z-index: 0; }
}

/* --- Die Fahrt. Zwischen den Stationen wird beschleunigt und wieder
       abgebremst; an der Station steht der Brief still. Deshalb die
       eigene Zeitkurve JE ABSCHNITT statt einer ueber das Ganze. --- */
.weg-laeuft .weg-laeufer { animation-name: weg-reise; }
@keyframes weg-reise {
  0%   { opacity: 0; transform: translateX(-9%); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
  3%   { opacity: 1; }
  7%   { transform: translateX(0); animation-timing-function: linear; }
  13%  { transform: translateX(0); animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 0.9); }
  26%  { transform: translateX(25%); animation-timing-function: linear; }
  32%  { transform: translateX(25%); animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 0.9); }
  45%  { transform: translateX(50%); animation-timing-function: linear; }
  51%  { transform: translateX(50%); animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 0.9); }
  64%  { transform: translateX(75%); animation-timing-function: linear; }
  70%  { transform: translateX(75%); animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 0.9); }
  83%  { transform: translateX(100%); animation-timing-function: linear; }
  89%  { opacity: 1; transform: translateX(100%); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
  95%  { opacity: 0; transform: translateX(112%); }
  100% { opacity: 0; transform: translateX(112%); }
}

/* Bogen, Neigung und Wendung. Die beiden ersten Wendungen liegen jetzt
   IM Kreis (29 % in "Geoeffnet", 48 % im Scannerrahmen), weil man sie
   sehen soll. Die dritte bleibt auf der Strecke hinter dem Handy: dort
   trennen sich Dokument und Original, das ist kein Vorgang, den man an
   einem einzigen Zeichen zeigen kann. Gedreht wird nie durch, sondern
   hin und zurueck: so gibt es keine spiegelverkehrte Rueckseite. */
.weg-laeuft .weg-fracht { animation-name: weg-schwung; }
@keyframes weg-schwung {
  0%,   7% { transform: translateY(0) rotate(0) rotateY(0deg); }
  19.5%    { transform: translateY(-5px) rotate(-5deg) rotateY(0deg); }
  26%      { transform: translateY(0) rotate(0) rotateY(0deg); }
  27.5%    { transform: translateY(0) rotate(0) rotateY(0deg); }
  29%      { transform: translateY(0) rotate(0) rotateY(90deg); }
  30.5%    { transform: translateY(0) rotate(0) rotateY(0deg); }
  32%      { transform: translateY(0) rotate(0) rotateY(0deg); }
  38.5%    { transform: translateY(-5px) rotate(-4deg) rotateY(0deg); }
  45%      { transform: translateY(0) rotate(0) rotateY(0deg); }
  46.5%    { transform: translateY(0) rotate(0) rotateY(0deg); }
  48%      { transform: translateY(0) rotate(0) rotateY(90deg); }
  49.5%    { transform: translateY(0) rotate(0) rotateY(0deg); }
  51%      { transform: translateY(0) rotate(0) rotateY(0deg); }
  57.5%    { transform: translateY(-5px) rotate(-4deg) rotateY(0deg); }
  64%      { transform: translateY(0) rotate(0) rotateY(0deg); }
  70%      { transform: translateY(-1px) rotate(-4deg) rotateY(0deg); }
  73.5%    { transform: translateY(-5px) rotate(0) rotateY(90deg); }
  77%      { transform: translateY(-5px) rotate(3deg) rotateY(0deg); }
  83%      { transform: translateY(0) rotate(0) rotateY(0deg); }
  91%      { transform: translateY(-4px) rotate(4deg) rotateY(0deg); }
  100%     { transform: translateY(0) rotate(0) rotateY(0deg); }
}

/* Im Scannerrahmen legt sich der Brief klein hin. Kleiner als 1 ist
   erlaubt (Regel 1): der Browser rastert bei 1 und verkleinert das
   Bild, das bleibt scharf. Zurueck geht es genau auf 1, nie darueber. */
.weg-laeuft .weg-blatt { animation-name: weg-hinlegen; }
@keyframes weg-hinlegen {
  0%, 42% { transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
  45%     { transform: scale(0.52); }
  52%     { transform: scale(0.52); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
  55%     { transform: scale(1); }
  100%    { transform: scale(1); }
}

/* Der Schweif zieht sich in Fahrt zu einem Streifen und wird an der
   Station wieder rund. */
.weg-laeuft .weg-laeufer::before { animation-name: weg-schweif; }
@keyframes weg-schweif {
  0%,   7% { transform: translateX(0) scaleX(1); }
  19.5%    { transform: translateX(-9px) scaleX(2.3); }
  26%      { transform: translateX(0) scaleX(1); }
  38.5%    { transform: translateX(-9px) scaleX(2.3); }
  45%      { transform: translateX(0) scaleX(1); }
  57.5%    { transform: translateX(-9px) scaleX(2.3); }
  64%      { transform: translateX(0) scaleX(1); }
  76.5%    { transform: translateX(-9px) scaleX(2.3); }
  83%      { transform: translateX(0) scaleX(1); }
  91%      { transform: translateX(-9px) scaleX(2.3); }
  100%     { transform: translateX(0) scaleX(1); }
}

/* Die Gestalt wechselt HART, im selben Augenblick, in dem der Brief
   hochkant steht und darum nicht zu sehen ist:
     Brief -> offener Brief    bei 29 %, mitten in "Geoeffnet"
     offener Brief -> Dokument bei 48 %, im Scannerrahmen
     Dokument -> Brief         bei 73,5 %, hinter dem Handy
   Ab dort ist nur noch das Original unterwegs; das Dokument bleibt im
   Handy, und genau das ist der Punkt des Produkts. */
/* steps(1, end) fuer den Gestaltwechsel: der Wert SPRINGT, er blendet
   nicht. Ohne das lag zwischen den beiden Bildern ein Fenster von
   0,1 Prozent, also 8 ms; kuerzer als ein Einzelbild, aber im
   angehaltenen Bild messbar (0,24 gegen 0,76), und was messbar ist,
   kann irgendwann auch sichtbar werden. */
.weg-laeuft .weg-blatt-1 { animation-name: weg-hinlegen, weg-gestalt-1; animation-timing-function: linear, steps(1, end); }
.weg-laeuft .weg-blatt-2 { animation-name: weg-hinlegen, weg-gestalt-2; animation-timing-function: linear, steps(1, end); }
.weg-laeuft .weg-blatt-3 { animation-name: weg-hinlegen, weg-gestalt-3; animation-timing-function: linear, steps(1, end); }
.weg-laeuft .weg-blatt-4 { animation-name: weg-hinlegen, weg-gestalt-4; animation-timing-function: linear, steps(1, end); }
@keyframes weg-gestalt-1 { 0%, 28.9% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes weg-gestalt-2 { 0%, 28.9% { opacity: 0; } 29%, 47.9% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes weg-gestalt-3 { 0%, 47.9% { opacity: 0; } 48%, 73.4% { opacity: 1; } 73.5%, 100% { opacity: 0; } }
@keyframes weg-gestalt-4 { 0%, 73.4% { opacity: 0; } 73.5%, 100% { opacity: 1; } }

/* --- Ankunft: der Kreis nimmt den Brief auf, senkt sich unter dem
       Gewicht und schickt einen Ring nach aussen. --- */
.weg-laeuft .weg-punkt { animation-name: weg-aufnehmen; }
@keyframes weg-aufnehmen {
  0%, 2% { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
  5%     { transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  14%    { transform: translateY(0); }
  100%   { transform: translateY(0); }
}
.weg-laeuft .weg-punkt::after { animation-name: weg-ring; }
@keyframes weg-ring {
  0%, 2% { box-shadow: 0 0 0 0 rgba(16, 32, 64, 0.24); }
  16%    { box-shadow: 0 0 0 17px rgba(16, 32, 64, 0); }
  100%   { box-shadow: 0 0 0 17px rgba(16, 32, 64, 0); }
}

/* --- Arbeit: das Licht, das alle Stationen gemeinsam haben. --- */
.weg-laeuft .weg-glanz { animation-name: weg-leuchten; }
@keyframes weg-leuchten {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  10%  { opacity: 1; }
  17%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 1 Angenommen: das Haus setzt sich mit. */
.weg-laeuft .weg-bahn > li:nth-child(1) .weg-ico { animation-name: weg-annehmen; }
@keyframes weg-annehmen {
  0%, 2% { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
  6%     { transform: translateY(1.5px); animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1); }
  15%, 100% { transform: translateY(0); }
}

/* 2 Geoeffnet: hier oeffnet sich der BRIEF, nicht das Stationszeichen.
   Deshalb tritt das Zeichen zurueck, solange er da ist, und kommt
   danach zurueck. Zwei Umschlaege gleichzeitig waeren Matsch. */
.weg-laeuft .weg-bahn > li:nth-child(2) .weg-ico { animation-name: weg-weichen; }
@keyframes weg-weichen {
  0%, 1%   { opacity: 1; }
  3%, 10%  { opacity: 0; }
  14%, 100% { opacity: 1; }
}

/* 3 Gescannt: der Rahmen bleibt stehen, der Brief legt sich hinein, und
   ein Lichtstrahl wandert einmal von oben nach unten ueber ihn. Kein
   Blitz mehr: ein Blitz gehoert zur Kamera, und eine Kamera macht
   Fotos. Ein Scanner tastet ab. */
.weg-laeuft .weg-strahl { animation-name: weg-strahlen; }
@keyframes weg-strahlen {
  0%, 2%  { opacity: 0; transform: translateY(-17px); }
  4%      { opacity: 1; transform: translateY(-15px); animation-timing-function: cubic-bezier(0.4, 0.05, 0.6, 0.95); }
  10%     { opacity: 1; transform: translateY(13px); }
  12%     { opacity: 0; transform: translateY(16px); }
  100%    { opacity: 0; transform: translateY(16px); }
}

/* 4 Benachrichtigt: das Handy summt und der Punkt kommt. Kein Drehen
   wie bei einer Glocke, sondern ein kurzes Zittern, wie es ein Geraet
   auf dem Tisch macht. Bewusst klein: 1,5px. */
.weg-laeuft .weg-bahn > li:nth-child(4) .weg-ico { animation-name: weg-summen; }
.weg-laeuft .weg-punktchen { animation-name: weg-melden; }
@keyframes weg-summen {
  0%, 3% { transform: translateX(0); }
  4.5%   { transform: translateX(1.5px); }
  6%     { transform: translateX(-1.5px); }
  7.5%   { transform: translateX(1.2px); }
  9%     { transform: translateX(-1.2px); }
  10.5%  { transform: translateX(0.7px); }
  12%, 100% { transform: translateX(0); }
}
@keyframes weg-melden {
  0%, 4% { opacity: 0; transform: scale(0.4); animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1); }
  8%     { opacity: 1; transform: scale(1); }
  16%    { opacity: 1; transform: scale(1); }
  22%, 100% { opacity: 0; transform: scale(0.85); }
}

/* 5 Weitergeleitet: der Wagen zieht an, waehrend der Brief hinausfaehrt. */
.weg-laeuft .weg-bahn > li:nth-child(5) .weg-ico { animation-name: weg-anziehen; }
@keyframes weg-anziehen {
  0%, 4% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
  8%     { transform: translateX(-2.5px); }
  16%    { transform: translateX(4px); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
  26%, 100% { transform: translateX(0); }
}

@media (max-width: 849.98px) {
  /* Schmal reicht die Breite fuer fuenf Woerter nebeneinander nicht mehr.
     Gemessen, nicht geschaetzt: "Weitergeleitet" ist 118px breit und hat
     keine Trennstelle, das Wort bricht also nicht um, sondern laeuft aus
     seiner Spalte heraus. Bei 640px stiess es sichtbar an "Gemeldet" an.
     Fuenf Spalten brauchen darum rund 780px Fensterbreite; darunter
     kippt die Bahn in die Senkrechte, und der Brief faehrt nach unten
     statt nach rechts. Bogen und Wendung kippen mit; der Scanner sitzt
     dann auf halber Hoehe statt auf halber Breite. */
  .weg { padding: 30px 20px 32px; }
  .weg-titel { font-size: var(--t-21); }
  .weg-gleis { margin-top: 30px; max-width: 300px; margin-inline: auto; }
  .weg-gleis::before {
    left: 32px; top: 32px; bottom: 32px; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
    transform-origin: 50% 0;
  }
  .weg-fahrt { left: 32px; top: 32px; bottom: 32px; width: 0; height: auto; }
  .weg-scanner { left: 32px; top: 50%; }
  .weg-bahn {
    grid-template-columns: minmax(0, 1fr);
    /* Weiter auseinander als noetig: bei 18px Abstand steckte der
       fahrende Brief immer halb in einem der beiden Kreise und war fast
       nie ganz zu sehen. 38px geben ihm eine sichtbare Strecke. */
    row-gap: 38px;
  }
  .weg-bahn > li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 18px; align-items: center;
    padding: 0; text-align: left;
  }
  .weg-bahn > li > b { margin-top: 0; }
  .caps-wrap.in .weg-gleis::before { animation-name: weg-bahn-ziehen-hinab; }
  @keyframes weg-bahn-ziehen-hinab { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .weg-laeuft .weg-laeufer { animation-name: weg-reise-hinab; }
  @keyframes weg-reise-hinab {
    0%   { opacity: 0; transform: translateY(-9%); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    3%   { opacity: 1; }
    7%   { transform: translateY(0); animation-timing-function: linear; }
    13%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 0.9); }
    26%  { transform: translateY(25%); animation-timing-function: linear; }
    32%  { transform: translateY(25%); animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 0.9); }
    45%  { transform: translateY(50%); animation-timing-function: linear; }
    51%  { transform: translateY(50%); animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 0.9); }
    64%  { transform: translateY(75%); animation-timing-function: linear; }
    70%  { transform: translateY(75%); animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 0.9); }
    83%  { transform: translateY(100%); animation-timing-function: linear; }
    89%  { opacity: 1; transform: translateY(100%); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    95%  { opacity: 0; transform: translateY(112%); }
    100% { opacity: 0; transform: translateY(112%); }
  }
  .weg-laeuft .weg-fracht { animation-name: weg-schwung-hinab; }
  @keyframes weg-schwung-hinab {
    0%,   7% { transform: translateX(0) rotate(0) rotateX(0deg); }
    19.5%    { transform: translateX(5px) rotate(5deg) rotateX(0deg); }
    26%      { transform: translateX(0) rotate(0) rotateX(0deg); }
    27.5%    { transform: translateX(0) rotate(0) rotateX(0deg); }
    29%      { transform: translateX(0) rotate(0) rotateX(90deg); }
    30.5%    { transform: translateX(0) rotate(0) rotateX(0deg); }
    32%      { transform: translateX(0) rotate(0) rotateX(0deg); }
    38.5%    { transform: translateX(5px) rotate(4deg) rotateX(0deg); }
    45%      { transform: translateX(0) rotate(0) rotateX(0deg); }
    46.5%    { transform: translateX(0) rotate(0) rotateX(0deg); }
    48%      { transform: translateX(0) rotate(0) rotateX(90deg); }
    49.5%    { transform: translateX(0) rotate(0) rotateX(0deg); }
    51%      { transform: translateX(0) rotate(0) rotateX(0deg); }
    57.5%    { transform: translateX(5px) rotate(4deg) rotateX(0deg); }
    64%      { transform: translateX(0) rotate(0) rotateX(0deg); }
    70%      { transform: translateX(1px) rotate(4deg) rotateX(0deg); }
    73.5%    { transform: translateX(5px) rotate(0) rotateX(90deg); }
    77%      { transform: translateX(5px) rotate(-3deg) rotateX(0deg); }
    83%      { transform: translateX(0) rotate(0) rotateX(0deg); }
    91%      { transform: translateX(4px) rotate(-4deg) rotateX(0deg); }
    100%     { transform: translateX(0) rotate(0) rotateX(0deg); }
  }
  .weg-laeuft .weg-laeufer::before { animation-name: weg-schweif-hinab; }
  @keyframes weg-schweif-hinab {
    0%,   7% { transform: translateY(0) scaleY(1); }
    19.5%    { transform: translateY(-9px) scaleY(2.3); }
    26%      { transform: translateY(0) scaleY(1); }
    38.5%    { transform: translateY(-9px) scaleY(2.3); }
    45%      { transform: translateY(0) scaleY(1); }
    57.5%    { transform: translateY(-9px) scaleY(2.3); }
    64%      { transform: translateY(0) scaleY(1); }
    76.5%    { transform: translateY(-9px) scaleY(2.3); }
    83%      { transform: translateY(0) scaleY(1); }
    91%      { transform: translateY(-9px) scaleY(2.3); }
    100%     { transform: translateY(0) scaleY(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung bleibt jede Station in ihrem Ruhezustand: das Haus,
     der geoeffnete Umschlag, der Scannerrahmen, das Handy, der Wagen.
     Der fahrende Brief ist dann gar nicht da, der Lichtstrahl auch
     nicht, und der Auftritt entfaellt. */
  .caps-wrap.in .weg-gleis::before,
  .caps-wrap.in .weg-bahn > li,
  .weg-laeuft .weg-fahrt,
  .weg-laeuft .weg-laeufer,
  .weg-laeuft .weg-laeufer::before,
  .weg-laeuft .weg-fracht,
  .weg-laeuft .weg-blatt,
  .weg-laeuft .weg-strahl,
  .weg-laeuft .weg-punkt,
  .weg-laeuft .weg-punkt::after,
  .weg-laeuft .weg-punkt > * { animation: none !important; }
}

/* ===== Der Tippzeiger =====
   Ein Zeichen, das einmal vormacht, was man tun soll: es faehrt heran,
   tippt zweimal auf, und geht wieder. Zweimal, weil einmal wie ein
   Zucken aussieht und dreimal wie Genoergel.

   Es zeigt, was der Besucher tatsaechlich in der Hand hat: einen Finger
   auf dem Telefon, einen Zeiger an der Maus. Ein Daumen auf einem
   Schreibtischschirm waere eine Anleitung fuer ein Geraet, das gar
   nicht da ist. */
.tippzeiger {
  position: absolute;
  width: 30px; height: 30px;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  color: var(--blue-deep);
}
.tippzeiger.ist-da { opacity: 1; }
.tippzeiger .i { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; }
.tippzeiger-welle {
  position: absolute; left: 4px; top: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(11, 100, 244, 0.5);
}
/* Nur das Zeichen, das zum Geraet passt. */
.tippzeiger-maus { display: none; }
@media (pointer: coarse) { .tippzeiger-hand { display: block; } }
@media not all and (pointer: coarse) {
  .tippzeiger-hand { display: none; }
  .tippzeiger-maus { display: block; }
}
.tippzeiger.tippt .tippzeiger-hand,
.tippzeiger.tippt .tippzeiger-maus { animation: tipp-tippen 2.4s var(--ease); }
.tippzeiger.tippt .tippzeiger-welle { animation: tipp-welle 2.4s linear; }
@keyframes tipp-tippen {
  0%   { transform: translate(9px, 13px); }
  20%  { transform: translate(0, 0); }
  28%  { transform: translate(0.5px, 3px); }
  38%  { transform: translate(0, 0); }
  54%  { transform: translate(0.5px, 3px); }
  64%  { transform: translate(0, 0); }
  86%  { transform: translate(0, 0); }
  100% { transform: translate(9px, 13px); }
}
/* Die Welle waechst ueber box-shadow, nicht ueber scale: so bleibt ihre
   Kante scharf, dieselbe Regel wie beim Weg des Briefes. */
@keyframes tipp-welle {
  0%, 26%   { box-shadow: 0 0 0 0 rgba(11, 100, 244, 0.34); }
  44%       { box-shadow: 0 0 0 15px rgba(11, 100, 244, 0); }
  45%, 52%  { box-shadow: 0 0 0 0 rgba(11, 100, 244, 0.34); }
  70%       { box-shadow: 0 0 0 15px rgba(11, 100, 244, 0); }
  100%      { box-shadow: 0 0 0 15px rgba(11, 100, 244, 0); }
}
/* Im Feld sitzt er auf dem Stift, auf dem Telefon rechts in der
   Benachrichtigung. */
.imprint-feld .tippzeiger { right: 12px; top: 50%; margin-top: -15px; }
.imprint-feld.wird-gezeigt .imprint-stift { opacity: 0; }
/* Unten rechts in der Nachricht: dort endet die letzte Textzeile, und
   der Platz ist frei. Der rechte Rand ginge nicht, dort sitzt der
   Winkel; die Mitte ginge auch nicht, dort steht die Ueberschrift, und
   ein Zeiger, der die Nachricht verdeckt, ist keine Einladung, sie zu
   lesen. */
.fon-schirm .tippzeiger { right: 44px; top: 340px; }

@media (prefers-reduced-motion: reduce) {
  .tippzeiger { display: none; }
}

/* ===== Portal ===== */
.portal { padding-bottom: 8px; }

.i { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Dieselbe App im Browserfenster =====
   Im Produkt wird aus der schwebenden Bodenleiste auf breiten Schirmen
   eine SEITENLEISTE links: eine hohe Glaspille mit denselben vier
   Zielen. Das Blatt daneben ist dasselbe wie im Telefon; nur Anordnung
   und Groessen aendern sich. Deshalb steht hier kein zweites Markup,
   sondern dieselbe Vorlage (werkzeuge/portal-app.html) ein zweites Mal.

   Die Fensterleiste oben rahmt es als das, was es ist: das Portal im
   Browser, nicht die App. */
.pdemo {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
}
.pdemo[hidden] { display: none; }
.pdemo-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  height: 46px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-calm);
}
.pdemo-dots { display: flex; gap: 6px; }
.pdemo-dots i { width: 10px; height: 10px; border-radius: 50%; background: #D7DEE9; }
.pdemo-url {
  margin-inline: auto;
  padding: 4px 16px; border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12.5px; color: var(--mute);
}
.pdemo-chrome-spacer { width: 42px; }

/* Das Fenster: Seitenleiste links, Blatt rechts, alles auf dem
   Lichtfeld der App. */
.pdemo-fenster {
  position: relative;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 34px;
  padding: 26px 30px 30px 22px;
  min-height: 560px;
  background:
    radial-gradient(46% 40% at 18% 8%, rgba(11, 100, 244, 0.16) 0%, transparent 66%),
    radial-gradient(44% 38% at 88% 22%, rgba(76, 178, 255, 0.14) 0%, transparent 70%),
    radial-gradient(60% 46% at 62% 100%, rgba(11, 100, 244, 0.12) 0%, transparent 72%),
    linear-gradient(168deg, #FBFCFE 0%, #EDF1F6 60%, #E6ECF5 100%);
}

/* Die Bodenleiste wird zur Seitenleiste. */
.pdemo .app-leiste {
  grid-column: 1; grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
  padding: 12px 10px;
  display: grid; grid-template-columns: 1fr; gap: 4px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 28px -14px rgba(16, 32, 64, 0.3);
}
.pdemo .app-leiste > * {
  grid-template-columns: 30px 1fr;
  justify-items: start; align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 550;
}
.pdemo .app-leiste .i { width: 19px; height: 19px; }
.pdemo .app-leiste .app-leiste-ico {
  width: 30px; height: 30px;
  background: transparent; box-shadow: none;
}
/* Aktives Ziel: die ganze Zeile bekommt die weisse Kapsel, nicht nur
   das Zeichen. */
.pdemo .app-leiste .app-leiste-an {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.07);
}
.pdemo .app-leiste .app-leiste-an .app-leiste-ico { background: transparent; box-shadow: none; }

/* Der Kopf und das Blatt liegen rechts, untereinander. */
.pdemo .app-kopf { grid-column: 2; grid-row: 1; gap: 14px; }
.pdemo .app-blatt {
  grid-column: 2; grid-row: 2;
  gap: 14px;
  overflow: visible;
  max-width: 620px;
}
.pdemo .app-titel { font-size: 38px; }
.pdemo .app-suche { height: 46px; font-size: 14.5px; max-width: 620px; }

/* Im Fenster ist mehr Platz: die Zeilen duerfen atmen. */
.pdemo .app-zeile { padding: 15px 18px; }
.pdemo .app-karte-innen { padding: 4px 18px; }
.pdemo .app-trenner { margin: 0 -18px; }
.pdemo .app-liste li { padding: 14px 18px; grid-template-columns: 7px 38px minmax(0, 1fr) auto; }
.pdemo .app-bild { width: 38px; height: 48px; }
.pdemo .app-name { font-size: 14.5px; }
.pdemo .app-zeile-text b { font-size: 15.5px; }
.pdemo .app-kennzahl { font-size: 30px; }

@media (max-width: 900px) {
  /* Schmal wird aus der Seitenleiste wieder eine Bodenleiste, genau wie
     im Produkt. */
  .pdemo-fenster { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 18px 20px; }
  .pdemo .app-kopf, .pdemo .app-blatt { grid-column: 1; grid-row: auto; }
  .pdemo .app-leiste {
    grid-column: 1; grid-row: auto;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 999px; padding: 9px 6px;
  }
  .pdemo .app-leiste > * {
    grid-template-columns: 1fr; justify-items: center; gap: 3px;
    padding: 0; font-size: 10px; border-radius: 999px;
  }
  .pdemo .app-leiste .app-leiste-an { background: none; box-shadow: none; }
  .pdemo .app-leiste .app-leiste-an .app-leiste-ico {
    background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    width: 46px; height: 26px;
  }
  .pdemo .app-titel { font-size: 30px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pdemo .app-leiste { background: #FBFCFE; }
}
@media (prefers-reduced-transparency: reduce) {
  .pdemo .app-leiste { background: #FBFCFE; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===== Erklaervideo: leiser Trigger + Glas-Modal ===== */
/* Der Weg fuer die, die nicht klicken wollen. Vorher ein Textlink in
   einer Fliesstextzeile; jetzt ein Knopf mit Play-Zeichen, der aussieht,
   wie er wirkt. */
/* ===== Die Weltkugel ===== */
.welt-wrap { margin-top: 56px; }
.welt {
  position: relative;
  border-radius: var(--r-l);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: center;
}
.welt-buehne { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; }
.welt-kugel { display: block; width: 100%; height: 100%; }
/* Das Etikett am Zielort: eine kleine Glaskapsel mit echter Schrift */
.welt-etikett {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, 14px) scale(0.96);
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft);
  text-align: center; line-height: 1.3;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.welt-etikett.ist-da { opacity: 1; transform: translate(-50%, 14px); }
.welt-etikett b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.welt-etikett span { display: block; font-size: 11px; font-weight: 550; color: var(--mute); }
.welt-absender {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft);
  font-size: 12.5px; font-weight: 650; color: var(--blue-deep);
  white-space: nowrap;
}
.welt-absender .i { width: 13px; height: 13px; }
.welt-text h3 {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px); font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.welt-punkte { margin-top: 22px; display: grid; gap: 14px; list-style: none; padding: 0; }
.welt-punkte li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.welt-punkte .i { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--ink-soft); }
@media (max-width: 899.98px) {
  .welt { grid-template-columns: 1fr; padding: 28px 22px 30px; gap: 20px; }
  .welt-buehne { width: min(100%, 340px); }
  .welt-text { text-align: center; }
  .welt-punkte li { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .welt-etikett { transition: none; }
}

.video-zeile { margin-top: 26px; display: grid; justify-items: center; gap: 16px; }
.stiller-weg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--blue-deep);
  text-decoration: none;
}
.stiller-weg .i { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.stiller-weg:hover .i { transform: translateX(3px); }
.video-knopf {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 22px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--glass-edge-in), var(--shadow-soft);
  font-family: var(--font-text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.video-knopf:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 100, 244, 0.3);
  box-shadow: inset 0 1px 0 var(--glass-edge-in), var(--shadow-deep);
}
.video-knopf:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Grau statt Blau: der Play-Knopf ist kein Kaufweg. */
.video-knopf-play {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--canvas-deep);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Das Play-Zeichen ist eine gefuellte Form, kein Strich. */
.video-knopf-play .i { width: 15px; height: 15px; fill: currentColor; stroke: none; margin-left: 2px; }
.video-knopf-text { display: grid; gap: 1px; }
.video-knopf-text b { font-size: var(--t-15); font-weight: 600; color: var(--ink); }
.video-knopf-text i { font-style: normal; font-size: var(--t-13); color: var(--mute); }
@media (prefers-reduced-motion: reduce) {
  .video-knopf { transition: none; }
  .video-knopf:hover { transform: none; }
}
.video-modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 24px;
}
/* Der [hidden]-Klassiker: display-Wert wuerde hidden ueberstimmen */
.video-modal[hidden] { display: none; }
.video-backdrop {
  position: absolute; inset: 0;
  background: rgba(16, 24, 40, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.video-frame {
  position: relative;
  width: min(880px, 100%);
  padding: 12px;
  border-radius: var(--r-l);
  --glass-tint: rgba(255, 255, 255, 0.85);
}
.video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--r-l) - 8px);
  background: #000;
}
.video-close {
  position: absolute; top: -14px; right: -14px;
  z-index: 1;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  font-size: 22px; line-height: 1;
  color: var(--ink-soft);
  transition: color 0.18s, transform 0.18s var(--ease);
}
.video-close:hover { color: var(--ink); transform: scale(1.06); }

/* ===== Fuer wen: eine ehrliche Zeile ===== */

/* ===== Voices ===== */
/* ===== Wer dahintersteht: Gruendungsgeschichte und drei Stimmen =====
   Vorher standen hier drei gleich grosse Karten ohne jede Hierarchie,
   und die Ueberschrift machte die ANZAHL zur Botschaft ("Drei Kunden").
   Jetzt traegt die Gruendungsgeschichte den Abschnitt, und die Stimmen
   belegen sie. Zwei Ebenen statt einer Reihe. */
.leute { position: relative; }

.gruender {
  padding-top: var(--sp-sec);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: 56px;
  align-items: center;
}
.gruender-text { max-width: 560px; }
.gruender-text h2 {
  font-size: clamp(var(--d-30), 2.8vw, var(--d-36));
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}
/* Die Erzaehlung darf etwas groesser sein als Fliesstext: sie ist der
   einzige Ich-Text der Seite und soll gelesen, nicht ueberflogen
   werden. */
.gruender-abs {
  margin-top: 16px;
  font-size: var(--t-17); line-height: 1.66;
  color: var(--ink-soft);
  max-width: 52ch;
}
.gruender-sig {
  margin-top: 20px;
  display: flex; align-items: center; gap: 14px;
}
.gruender-sig + .gruender-abs { margin-top: 24px; }
/* Rund und 96px, Zuschnitt mit Kragen und Schultern (Marius' Wahl,
   Variante A). Ein schmaler weisser Ring setzt die Aufnahme vom hellen
   Grund ab. */
.gruender-foto {
  width: 96px; height: 96px; flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-calm);
  box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1px rgba(16, 32, 64, 0.08), var(--shadow-soft);
}
.gruender-sig b { display: block; font-size: var(--t-15); font-weight: 600; color: var(--ink); }
.gruender-sig i { font-style: normal; font-size: var(--t-13); line-height: 1.45; color: var(--mute); }

/* Die Karte: dieselbe Machart wie in Hero und Schluss. Die offene Frage
   von damals und die Antwort von heute, das Bookend der Seite. */
.gruender-karte {
  position: relative; overflow: hidden;
  padding: 30px 30px 32px;
  /* Buehne, wie die Impressum-Karte im Hero und im Schluss. */
  border-radius: var(--karte-buehne-radius);
  background: var(--karte-buehne-grund);
  border: var(--karte-buehne-rand);
  box-shadow: var(--karte-buehne-schatten);
}
/* .gruender-karte-frage: siehe Label-Regel oben. */
.gruender-karte-zeile {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: var(--t-21); font-weight: 700; line-height: var(--lh-titel);
  color: var(--ink-soft);
}
.gruender-karte-antwort {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--t-13); color: var(--mute);
}
.gruender-karte-adresse {
  margin-top: 6px;
  font-size: var(--t-17); font-weight: 600; line-height: 1.5;
  color: var(--ink);
}

/* --- Die drei Stimmen ------------------------------------------------ */
.stimmen { padding-top: 72px; }
.stimmen-h { text-align: center; }  /* Schrift: Label-Regel oben */
.stimmen-weiter {
  margin-top: 28px;
  display: grid; justify-items: center; gap: 10px;
  text-align: center;
  font-size: var(--t-13); color: var(--mute);
}
.stimmen-grid {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.stimme {
  display: grid; gap: 16px;
  padding: 26px;
  /* Karte */
  border-radius: var(--karte-radius);
  background: var(--karte-grund);
  border: var(--karte-rand);
  box-shadow: var(--karte-schatten);
}
/* Name und Firma ZUERST: der Abschnitt verspricht Nachpruefbarkeit, und
   dafuer muss man die Namen ueberfliegen koennen, ohne drei Zitate zu
   lesen. figcaption steht deshalb vor dem blockquote im Markup. */
.stimme figcaption { display: flex; align-items: center; gap: 13px; }
.stimme img { border-radius: 50%; flex-shrink: 0; }
.stimme b { display: block; font-size: var(--t-15); font-weight: 600; color: var(--ink); }
.stimme i { font-style: normal; font-size: var(--t-13); line-height: 1.4; color: var(--mute); }
.stimme blockquote {
  position: relative;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--t-15); line-height: 1.7;
  color: var(--ink-soft);
}

/* Keine Anhebung unter dem Zeiger: die Stimme ist kein Link, die Flaeche
   ist still. (Die Regel griff ohnehin nur halb: .bereit .reveal.in schlug
   das transform, nur der Schatten sprang.) */
@media (max-width: 1023.98px) {
  .gruender { grid-template-columns: 1fr; gap: 36px; }
  .gruender-karte { max-width: 420px; }
  .stimmen-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .stimmen-grid { grid-template-columns: 1fr; }
  .stimmen { padding-top: 52px; }
  .gruender-abs { font-size: 16px; }
  .gruender-karte { padding: 24px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .stimme { transition: none; }
  .stimme:hover { transform: none; }
}

/* ===== Warum wir: vier Pruefkriterien =====
   Vier opake Karten auf der silbernen Aura, dem wiederkehrenden
   Lichtmotiv der Seite. Darunter der Standort als ruhige Zeile. */
/* Der Schein ragt bewusst 80px ueber den Rahmen hinaus. Auf breiten Schirmen
   fiel er damit aus dem Viewport und liess die ganze Seite 4px seitlich
   scrollen. overflow-x: clip schneidet ihn seitlich ab, ohne ihn oben und
   unten zu beschneiden; overflow-x: hidden wuerde hier zusaetzlich einen
   Scroll-Kontext aufmachen. */
.trust { overflow-x: clip; overflow-y: visible; }
/* Der Schein beginnt 60px oberhalb seines Rahmens und lag damit ueber der
   Unterzeile des Abschnitts (gemessen: Schein ab y=343, Unterzeile 333 bis
   359, beide ohne z-index). Sein dritter Verlauf ist 85 Prozent Weiss, der
   Text blich sichtbar aus. Der Kopf kommt jetzt darueber zu liegen. */
.trust .sec-head { position: relative; z-index: 1; }
.trust-wrap { position: relative; margin-top: 44px; }
.trust-shine {
  position: absolute;
  inset: -60px -80px -50px -80px;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(46% 52% at 22% 28%, rgba(11, 100, 244, 0.14), transparent 68%),
    radial-gradient(40% 46% at 80% 72%, rgba(76, 178, 255, 0.12), transparent 70%),
    radial-gradient(30% 34% at 58% 10%, rgba(255, 255, 255, 0.85), transparent 72%);
}
.trust-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.trust-item {
  position: relative;
  padding: 26px 28px;
  /* Karte */
  border-radius: var(--karte-radius);
  background: var(--karte-grund);
  border: var(--karte-rand);
  box-shadow: var(--karte-schatten);
}
/* Das Pruefsiegel: die Fragen werden beim Hineinscrollen abgehakt */
.trust-seal {
  position: absolute; top: 22px; right: 22px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.5, 0.64, 1), opacity 0.3s var(--ease);
}
.trust-seal .i { width: 14px; height: 14px; stroke-width: 2.5; }
.trust-item.sealed .trust-seal { transform: scale(1); opacity: 1; }
html:not(.bereit) .trust-seal { transform: none; opacity: 1; }
/* Der Icon-Kasten ist gestrichen, das Siegel bleibt. Der Titel traegt
   Schibsted wie jeder Kartentitel; rechts bleibt Platz fuer das Siegel. */
.trust-item h3 { margin-top: 2px; padding-right: 36px; font-size: var(--t-17); font-weight: 700; line-height: var(--lh-titel); }
.trust-item p { margin-top: 8px; font-size: var(--t-14); line-height: 1.65; color: var(--mute); }
.trust-item a { color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.trust-item a:hover { color: var(--blue); }
/* ===== Die Buehne: Telefon zuerst, Portal danach =====
   Die Benachrichtigung klebte vorher auf dem Desktop-Portalfenster. Eine
   Push kommt aber auf ein Handy. Jetzt ist das Telefon der Einstieg, und
   wer tippt, entscheidet selbst, wo er weitersieht.

   GERAET: Masse, Radien und Verlaeufe stammen eins zu eins aus dem
   Mockup in vorlagen/Phone.dc.html (iPhone 15 Pro, Black Titanium,
   390 × 822, Schirm mit inset 10px und 50px Radius). Die Vorlage selbst
   braucht die Design-Components-Laufzeit, die diese statische Seite
   nicht hat; uebernommen ist deshalb die Geometrie, nicht der Code.
   Wird die Vorlage geaendert, gehoeren diese Werte nachgezogen
   (siehe vorlagen/README.md).

   Das Geraet ist dunkel, und das ist kein Bruch mit der lichten
   Grundstimmung: es stellt einen Gegenstand dar, keine Bedienflaeche
   der Seite. Ein schwarzes Telefon auf hellem Grund liest sich wie ein
   Produktfoto, und die helle Benachrichtigung darauf gewinnt dadurch. */
.buehne { margin-top: 44px; display: grid; justify-items: center; }
.buehne > * { grid-area: 1 / 1; width: 100%; }
.buehne .fon { justify-self: center; width: auto; }

.fon {
  --fon-skala: 1;
  display: grid; justify-items: center; gap: 22px;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
/* Alle Masse des Geraets sind absolut. Damit die Vorlage auf schmalen
   Schirmen nicht bricht, wird das ganze Geraet skaliert statt neu
   vermessen; der Halter traegt die gerechnete Hoehe. */
.fon-halter {
  width: calc(390px * var(--fon-skala));
  height: calc(822px * var(--fon-skala));
}
.fon-koerper {
  position: relative;
  width: 390px; height: 822px;
  transform: scale(var(--fon-skala));
  transform-origin: top left;
  border-radius: 60px;
  background: linear-gradient(145deg, #2a2a2d 0%, #0c0c0e 30%, #161618 70%, #070708 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 0 0 1.5px #050506,
    0 1px 2px rgba(255, 255, 255, 0.06),
    0 55px 90px -22px rgba(0, 0, 0, 0.55),
    0 30px 55px -28px rgba(0, 0, 0, 0.5);
}
/* Die Tasten, mit den Positionen der Vorlage. */
.fon-taste { position: absolute; }
.fon-taste-aktion,
.fon-taste-laut,
.fon-taste-leise {
  left: -2.5px; width: 3px; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #4c4c4f 0%, #27272a 60%, #161618 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.fon-taste-aktion { top: 148px; height: 31px; }
.fon-taste-laut { top: 204px; height: 58px; }
.fon-taste-leise { top: 277px; height: 58px; }
.fon-taste-an {
  right: -2.5px; top: 244px; width: 3px; height: 91px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #161618 0%, #27272a 40%, #4c4c4f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.fon-schirm {
  position: absolute; inset: 10px;
  border-radius: 50px;
  overflow: hidden;
  /* Hintergrundbild des Sperrbildschirms: dasselbe Lichtfeld wie die
     Seite selbst (siehe .light-field), nur dichter, damit es auf der
     kleinen Flaeche noch traegt. Die Rezeptur ist eins zu eins die der
     Seite: zwei blaue und ein hellblauer Radialverlauf auf dem Canvas. */
  background:
    radial-gradient(58% 46% at 22% 14%, rgba(11, 100, 244, 0.30) 0%, transparent 68%),
    radial-gradient(52% 42% at 84% 26%, rgba(76, 178, 255, 0.26) 0%, transparent 70%),
    radial-gradient(64% 50% at 58% 96%, rgba(11, 100, 244, 0.18) 0%, transparent 72%),
    linear-gradient(168deg, #FBFCFE 0%, #EDF1F6 58%, #E4EAF3 100%);
}
.fon-insel {
  position: absolute; z-index: 30;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 117px; height: 34px;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.04);
}
/* Die Kameralinse in der Insel, wie in der Vorlage. */
.fon-insel::after {
  content: "";
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b3b66 0%, #10131f 55%, #05060a 100%);
  box-shadow: inset 0 0 0 0.5px rgba(120, 150, 220, 0.25);
}
.fon-home {
  position: absolute; z-index: 30;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 5px; border-radius: 3px;
  background: rgba(16, 32, 64, 0.26);
}

/* --- Sperrbildschirm ------------------------------------------------- */
.fon-sperre {
  position: absolute; left: 0; right: 0; top: 76px;
  padding: 0 24px;
  text-align: center;
  transition: opacity 0.4s var(--ease);
}
.fon-datum {
  font-size: 15px; font-weight: 550;
  color: var(--ink-soft);
}
.fon-uhr {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 76px; font-weight: 400;
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fon-fuss {
  /* Auf dem Geraet sitzen die beiden ganz aussen, nicht mittig
     beieinander: Taschenlampe unten links, Kamera unten rechts. */
  position: absolute; left: 34px; right: 34px; bottom: 54px;
  display: flex; align-items: center; justify-content: space-between;
  transition: opacity 0.34s var(--ease);
}
.fon-rund {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 0 0 1px rgba(16, 32, 64, 0.07);
  color: var(--ink-soft);
}
.fon-rund .i { width: 19px; height: 19px; }

/* --- Die Benachrichtigung ------------------------------------------- */
/* Der iOS-Look auf hellem Hintergrundbild: weisses Frostglas mit
   dunkler Schrift, so wie iOS die Benachrichtigung auf einem hellen
   Bild zeigt. */
.fon-push {
  position: absolute; left: 14px; right: 14px; top: 272px; z-index: 20;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 15px;
  border: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 0.5px rgba(16, 32, 64, 0.07),
    0 14px 30px -14px rgba(16, 32, 64, 0.28);
  text-align: left;
  cursor: pointer;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.bereit .fon-push { opacity: 0; transform: translateY(-16px) scale(0.96); }
.fon-push[hidden] { display: none; }
.fon-push.ist-da { opacity: 1; transform: none; }
.fon-push:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.fon-push-ico {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.fon-push-text { display: grid; gap: 2px; min-width: 0; }
.fon-push-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fon-push-kopf b {
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--mute);
}
.fon-push-kopf i { font-style: normal; font-size: 11.5px; color: var(--mute); }
.fon-push-winkel {
  align-self: center; flex-shrink: 0;
  width: 15px; height: 15px;
  margin-left: 2px;
  /* i-winkel zeigt bereits nach rechts (m9 18 6-6-6-6). Ein erster
     Versuch drehte ihn um -90 Grad und machte daraus ein Dach. */
  color: var(--mute);
}
.fon-push-titel { font-size: 15.5px; font-weight: 650; color: var(--ink); }
.fon-push-zeile { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }

/* --- Die Wahl -------------------------------------------------------- */
/* Hier wechselt der Schirm ins Helle: das ist die App, die sich oeffnet. */
.fon-wahl {
  position: absolute; left: 18px; right: 18px; top: 250px; z-index: 20;
  display: grid; gap: 10px;
  padding: 22px 20px 20px;
  border-radius: 26px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -18px rgba(16, 32, 64, 0.34);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.bereit .fon-wahl { opacity: 0; transform: scale(0.94); }
.fon-wahl[hidden] { display: none; }
.fon-wahl.ist-da { opacity: 1; transform: none; }
.fon-wahl-h {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; text-align: center;
  color: var(--ink); margin-bottom: 4px;
}
.fon-wahl .btn { width: 100%; height: 46px; font-size: 15px; }
.fon-wahl-note { margin-top: 3px; text-align: center; font-size: 12px; color: var(--mute); }

/* --- Die App auf dem Telefon ----------------------------------------
   Nachgebaut aus der echten App (Portal im Demo-Modus aufgenommen).
   Vorher stand hier eine erfundene Liste mit einer Leiste, die es im
   Produkt nicht gibt: das Echte hat vier Ziele in einer SCHWEBENDEN
   Bodenleiste (Cloud, Adresse, Konto, Abo), eine grosse Displayzeile
   als Titel, ein Suchfeld darunter und den Posteingang IN der Cloud.

   Die Benachrichtigung handelt von neuer Post, deshalb oeffnet die App
   auf dem Posteingang und der Zurueck-Knopf fuehrt in die Cloud. */
.fon-portal {
  position: absolute; inset: 0; z-index: 10;
  /* Kein eigener Grund: die App traegt dasselbe Lichtfeld wie der
     Sperrbildschirm, so wie im Produkt. */
  padding: 62px 18px 0;
  display: grid;
  grid-template-rows: auto 1fr auto;  /* Kopf, Blatt, Bodenleiste */
  gap: 14px;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.fon-portal[hidden] { display: none; }
.fon-portal.ist-da { opacity: 1; }

.app-kopf { display: grid; gap: 10px; }
.app-zurueck {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0;
  font-family: var(--font-text);
  font-size: 15px; font-weight: 550;
  color: var(--blue-deep);
  cursor: pointer;
}
.app-zurueck .i { width: 17px; height: 17px; }
.app-zurueck:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.app-zurueck[hidden] { display: none; }
.app-titel {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700;
  line-height: 1.08; letter-spacing: -0.025em;
  color: var(--ink);
}
.app-suche {
  display: flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px; color: var(--mute);
}
.app-suche .i { width: 16px; height: 16px; color: var(--mute); }
/* display: flex schlaegt das display: none der Browser-Vorgabe fuer
   [hidden]. Ohne diese Zeile blieb das Suchfeld auf Adresse, Konto und
   Abo stehen, obwohl das Produkt dort keines hat. */
.app-suche[hidden] { display: none; }

.app-blatt {
  display: grid; align-content: start; gap: 12px;
  /* max-content, sonst stauchen die Zeilen: das Blatt hat im Raster der
     App eine feste Hoehe (1fr), und ohne diese Zeile wurde die
     Anschriftenkarte unten abgeschnitten statt zu scrollen. */
  grid-auto-rows: max-content;
}
.app-blatt[hidden] { display: none; }

/* Eine Karte, viele Zeilen, Trennlinien dazwischen: so sieht die App aus. */
.app-karte {
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow: hidden;
}
.app-zeile {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border: 0; background: none;
  font-family: var(--font-text);
  text-align: left;
  cursor: pointer;
}
.app-zeile + .app-zeile { box-shadow: inset 0 1px 0 var(--line); }
.app-zeile-still { cursor: default; }
.app-zeile:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.app-ico {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--blue-wash);
  color: var(--blue);
}
.app-ico .i { width: 18px; height: 18px; }
.app-ico-blau { background: var(--blue); color: #fff; }
.app-ico-gruen { background: var(--green-soft); color: var(--green); }
.app-zeile-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.app-zeile-text b { font-size: 15px; font-weight: 600; color: var(--ink); }
.app-zeile-text i { font-style: normal; font-size: 12.5px; color: var(--mute); }
.app-pille {
  flex-shrink: 0;
  padding: 3px 9px; border-radius: 999px;
  background: var(--blue-wash);
  font-size: 11.5px; font-weight: 700; color: var(--blue-deep);
}
.app-pfeil { width: 15px; height: 15px; flex-shrink: 0; color: #B6C0D0; }

.app-gruppe {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--mute);
}

/* Der Posteingang: Punkt fuer ungelesen, Vorschaubild, Titel, Datum. */
.app-liste {
  display: grid;
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow: hidden;
}
.app-liste li {
  /* Raster statt Flex: als Flex-Zeile blieb der Titel auf seiner
     Inhaltsbreite stehen und schob das Datum 14px aus der Karte heraus
     (gemessen: Karte endet bei 887, Datum ebenfalls bei 887, also ohne
     das rechte Polster). minmax(0, 1fr) erzwingt das Kuerzen. */
  display: grid;
  grid-template-columns: 7px 34px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 12px 14px;
}
.app-liste li + li { box-shadow: inset 0 1px 0 var(--line); }
.app-neu-punkt {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.app-neu-punkt.app-leer { background: transparent; }
.app-bild {
  width: 34px; height: 44px;
  border-radius: 6px;
  background: linear-gradient(160deg, #EEF1F6, #E3E8F0);
  box-shadow: inset 0 0 0 1px rgba(16, 32, 64, 0.05);
}
.app-name {
  min-width: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-datum { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.app-datum-neu { color: var(--blue); font-weight: 600; }
.app-fuss { font-size: 12px; color: var(--mute); }

.app-speicher { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--mute); }
.app-balken {
  width: 74px; height: 4px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--canvas-deep);
  box-shadow: inset 0 0 0 1px rgba(16, 32, 64, 0.06);
  overflow: hidden;
}
.app-balken i { display: block; width: 2%; height: 100%; background: var(--blue); }

/* Die Bodenleiste SCHWEBT, so wie im Produkt: eine Pille mit Abstand
   zum Rand, nicht eine Leiste am Boden. */
.app-leiste {
  align-self: end;
  margin: 0 0 26px;
  padding: 9px 6px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px -12px rgba(16, 32, 64, 0.3);
}
.app-leiste > * {
  display: grid; justify-items: center; gap: 3px;
  font-size: 12px; font-weight: 550; color: var(--mute);
}
.app-leiste .i { width: 18px; height: 18px; }
/* Das aktive Ziel liegt auf einer eigenen weissen Kapsel, wie im Produkt. */
.app-leiste-an { color: var(--blue) !important; position: relative; }
.app-leiste-ico {
  display: grid; place-items: center;
  width: 46px; height: 26px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* Der Wechsel zum Desktop steht UNTER dem Telefon, nicht darin: eine
   Aufforderung an den Betrachter der Seite ist keine Funktion der App
   und hat im Bildschirm des Geraets nichts verloren. Im Geraet lag er
   ausserdem auf der gerundeten Kante. */
.app-wechsel {
  border: 0; background: none;
  font-family: var(--font-text);
  font-size: 13px; font-weight: 550;
  color: var(--blue-deep);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.app-wechsel:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-leiste { background: #FBFCFE; }
}
@media (prefers-reduced-transparency: reduce) {
  .app-leiste { background: #FBFCFE; backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* --- Die drei weiteren Ziele: Adresse, Konto, Abo -------------------- */
/* Die Blaetter sind laenger als der Schirm, so wie im Produkt: sie
   scrollen im Geraet, der Rahmen und die Bodenleiste bleiben stehen. */
.app-blatt { overflow-y: auto; overscroll-behavior: contain; }
.app-blatt::-webkit-scrollbar { width: 0; }

.app-karte-innen { padding: 4px 14px; display: grid; }
.app-trenner { height: 1px; background: var(--line); margin: 0 -14px; }

.app-feld { display: grid; gap: 3px; padding: 12px 0; }
.app-feld-zeile {
  grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: 10px;
}
.app-feld-zeile > span:first-child { font-size: 13.5px; color: var(--mute); }
.app-feld-zeile > b { justify-self: end; font-size: 14px; font-weight: 600; color: var(--ink); }
.app-feld-block > span:first-child { font-size: 13.5px; color: var(--mute); }
.app-feld-block > b { font-size: 14.5px; font-weight: 600; color: var(--ink); }

.app-kap {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--mute);
}
.app-kennzahl {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Ohne :has() (aeltere Browser) steht die Kennzahl schlicht
   untereinander, was ebenfalls lesbar ist. */
.app-feld:has(> .app-kennzahl) {
  grid-template-columns: 1fr auto;
  grid-template-areas: "kap knopf" "zahl knopf";
  align-items: center; column-gap: 10px;
}
.app-feld:has(> .app-kennzahl) > .app-kap { grid-area: kap; }
.app-feld:has(> .app-kennzahl) > .app-kennzahl { grid-area: zahl; }
.app-feld:has(> .app-kennzahl) > .app-kopieren { grid-area: knopf; }

/* Das Tuerschild: gravierte Versalien, wie im Produkt und im Hero. */
.app-schild {
  font-family: var(--font-display) !important;
  font-size: 15px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.app-anschrift { font-size: 14px; line-height: 1.55; color: var(--ink); }
.app-lang { font-size: 13.5px !important; word-break: break-all; }
.app-mono { font-variant-numeric: tabular-nums; }

.app-kopieren {
  justify-self: end;
  border: 0; background: none; padding: 0;
  font-family: var(--font-text);
  font-size: 13.5px; font-weight: 600;
  color: var(--blue);
  cursor: pointer;
}
.app-kopieren-zeile { justify-self: start; margin-top: 8px; }
.app-kopieren:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.app-kopieren[data-fertig="1"] { color: var(--green); }

.app-auge {
  justify-self: end;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 0; border-radius: 8px;
  background: none;
  color: var(--mute);
  cursor: pointer;
}
.app-auge:hover { color: var(--ink-soft); }
.app-auge:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.app-zeile-breit { min-width: 0; }
.app-wert {
  justify-self: end; text-align: right;
  font-size: 13px; line-height: 1.45; color: var(--mute);
}
.app-notiz { font-size: 12px; line-height: 1.5; color: var(--mute); }
.app-notiz-innen { padding: 0 0 12px; }
.app-gruppe-zeile {
  display: flex; justify-content: space-between; align-items: baseline;
}
.app-gruppe-zeile span { text-transform: none; letter-spacing: 0; font-weight: 500; }

.app-tarif {
  font-family: var(--font-display) !important;
  font-size: 20px !important; font-weight: 700 !important;
  color: var(--ink) !important;
}
.app-tarif-preis { font-size: 13px; color: var(--mute); }

/* "Abo kuendigen" steht im Produkt in Rot: die einzige Stelle der App,
   die eine Warnfarbe traegt. */
.app-kuendigen { width: 100%; }
.app-kuendigen .app-zeile-text b { color: #B42318; }
.app-kuendigen .app-pfeil { color: #E3B0AB; }

.app-zeile-aktuell .app-zeile-text b { color: var(--mute); }
.app-haken { width: 16px; height: 16px; color: var(--blue); }

.app-bild-geprueft { position: relative; }
.app-bild-geprueft::after {
  /* Haekchen als Zeichen statt als Bild: eine leere gruene Scheibe sah
     unfertig aus. */
  content: "✓";
  position: absolute; right: -5px; bottom: -5px;
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-soft);
  box-shadow: inset 0 0 0 1px rgba(21, 122, 76, 0.22);
  font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--green);
}

.app-balken-breit { width: 100%; height: 6px; margin: 12px 0 10px; }

/* Die Bodenleiste als Knoepfe: gleiche Optik, jetzt bedienbar. */
.app-leiste > button {
  border: 0; background: none; padding: 0;
  font-family: var(--font-text);
  cursor: pointer;
}
.app-leiste > button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 999px; }
.app-leiste .app-leiste-ico {
  background: transparent;
  box-shadow: none;
  transition: background 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.app-leiste .app-leiste-an .app-leiste-ico {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
@media (prefers-reduced-motion: reduce) {
  .app-leiste .app-leiste-ico { transition: none; }
}

/* Sobald die App offen ist, verschwindet der Sperrbildschirm. */
.buehne[data-stufe="handy"] .fon-fuss,
.buehne[data-stufe="handy"] .fon-sperre { opacity: 0; }

.fon-hinweis {
  font-size: 13.5px; color: var(--mute); text-align: center;
  transition: opacity 0.3s var(--ease);
}
.fon-hinweis[hidden] { display: none; }

/* --- Die Stufen der Buehne ------------------------------------------- */
.buehne[data-stufe="desktop"] .fon { opacity: 0; transform: scale(0.94); pointer-events: none; }
.fon[hidden] { display: none; }
.buehne .pdemo[hidden] { display: none; }
.buehne .pdemo {
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.bereit .buehne .pdemo { opacity: 0; transform: translateY(12px); }
.buehne .pdemo.ist-da { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .fon { --fon-skala: 0.84; }
}
@media (max-width: 460px) {
  .fon { --fon-skala: 0.88; }
}
@media (max-width: 360px) {
  .fon { --fon-skala: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .fon, .fon-push, .fon-wahl, .fon-portal, .buehne .pdemo, .fon-sperre, .fon-fuss, .fon-hinweis { transition: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fon-push { background: #FBFCFE; }
}
@media (prefers-reduced-transparency: reduce) {
  .fon-push { background: #FBFCFE; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===== Der Standort, gezeigt statt behauptet ===== */
.standort {
  position: relative;
  margin: 30px 0 0;
  /* Karte */
  border: var(--karte-rand);
  border-radius: var(--karte-radius);
  box-shadow: var(--karte-schatten);
  background: var(--canvas-deep);
  overflow: hidden;
}
.standort img {
  display: block;
  width: 100%; height: auto;
  /* Der Lageplan traegt seinen eigenen hellen Grund; ohne Rahmenlinie
     unten stiesse er hart auf die Bildunterschrift. */
  border-bottom: 1px solid var(--line);
}
.standort figcaption {
  display: grid; gap: 4px;
  padding: 16px 20px 18px;
  background: var(--surface);
  text-align: center;
  font-size: var(--t-13); color: var(--mute);
}
.standort-ort { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Grau statt Blau: Blau gehoert den Kaufwegen. */
.standort-ort .i { width: 15px; height: 15px; color: var(--ink-soft); }
.standort-ort b { font-weight: 600; font-size: var(--t-15); color: var(--ink); }
.standort-quelle { font-size: var(--t-12); color: #6A7488; }  /* war #7C879A = 3,63:1 */

/* Stille Flaechen bleiben still: Warum-Karten und Stimmen sind keine
   Links, nur die Ratgeber-Karte (ein Link) hebt sich unter dem Zeiger. */

/* ===== Pricing (Data Surface: ruhig, fast opak) ===== */
.toggle-wrap { margin-top: 36px; display: grid; justify-items: center; gap: 14px; }
.toggle {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 5px rgba(16, 24, 40, 0.05);
}
.toggle-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  min-height: 44px;
  border-radius: 99px;
  font-size: var(--t-14); font-weight: 600;
  color: var(--mute);
  transition: color 0.22s;
}
.toggle-btn.on { color: var(--ink); }
.toggle.ready .toggle-btn.on { color: #fff; }
.toggle-btn em {
  font-style: normal; font-size: var(--t-12); font-weight: 600;
  padding: 2.5px 9px; border-radius: 99px;
  background: var(--green-soft); color: var(--green);
  white-space: nowrap;
  transition: background 0.22s, color 0.22s;
}
/* Bei 360px ist die Pille 338px breit und die Shell nur 328px innen: der
   Chip "2 Monate gratis" brach in zwei Zeilen, der Umschalter wurde 75px
   hoch. Schmaler gepolstert passt er einzeilig (314px), Hoehe bleibt 56px. */
@media (max-width: 379.98px) {
  .toggle-btn { padding-inline: 16px; gap: 6px; }
}
.toggle.ready .toggle-btn.on em { background: #fff; color: var(--blue-deep); }
.toggle-thumb {
  position: absolute; top: 5px; bottom: 5px;
  border-radius: 99px;
  background: var(--blue);
  box-shadow: 0 8px 20px -8px rgba(11, 100, 244, 0.8);
  transition: left 0.3s var(--ease), width 0.3s var(--ease);
  opacity: 0;
}
.toggle.ready .toggle-thumb { opacity: 1; }
.toggle-note { font-size: var(--t-13); color: var(--mute); min-height: 44px; max-width: 560px; text-align: center; }

.plans-personal {
  margin-top: 26px;
  text-align: center;
  font-size: var(--t-14);
  color: var(--ink-soft);
}
.nowrap { white-space: nowrap; }
.plans-enthalten {
  margin: 10px auto 0; max-width: 620px;
  text-align: center;
  font-size: var(--t-14); line-height: 1.55;
  color: var(--mute);
}
.js-company-inline { font-weight: 700; }
.js-company-inline::after { content: " · "; font-weight: 400; }
.js-company-inline[hidden] { display: none; }
.quiet-link { color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.quiet-link:hover { color: var(--blue); }
.plans {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 28px 28px;
  /* Buehne: die Tarife sind der Kaufpunkt, sie stehen wie die
     Impressum-Karte auf tiefem Schatten. */
  border-radius: var(--karte-buehne-radius);
  background: var(--karte-buehne-grund);
  border: var(--karte-buehne-rand);
  box-shadow: var(--karte-buehne-schatten);
}
/* Featured: opake Data Surface mit Blaukante. Kein Blur ueber flachem
   Canvas, kein scale: die Preistypografie bleibt gestochen scharf. */
.plan-featured {
  background: var(--surface-calm);
  border: 1.5px solid rgba(11, 100, 244, 0.55);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-in),
    0 0 0 5px rgba(11, 100, 244, 0.07),
    var(--shadow-deep);
  margin-block: -14px;
  padding-block: 44px 42px;
}
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 5px 16px; border-radius: 99px;
  background: var(--blue); color: #fff;
  font-size: var(--t-12); font-weight: 700; letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(11, 100, 244, 0.8);
}
.plan-name { text-align: center; }  /* Schrift: Label-Regel oben */
.plan-tagline { margin-top: 5px; text-align: center; font-size: var(--t-14); color: var(--mute); }
.plan-price {
  margin-top: 18px;
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
}
/* Kein tabular-nums: das ziffernbreite Komma reisst "19 , 90" auseinander */
.plan-price b {
  font-family: var(--font-display);
  font-size: var(--d-46); font-weight: 700; letter-spacing: -0.02em;
}
.plan-price span { font-size: var(--t-15); color: var(--mute); }
.plan-billing { margin-top: 4px; text-align: center; font-size: var(--t-13); color: var(--mute); min-height: 19px; }
/* Die Passt-Zeile: sagt, fuer wen die Karte gedacht ist */
.plan-anchor { margin-top: 3px; text-align: center; font-size: var(--t-13); font-weight: 600; color: var(--ink-soft); }
.plan-saving {
  margin: 10px auto 0;
  display: none;
  width: fit-content;
  font-size: var(--t-12); font-weight: 600;
  padding: 4px 12px; border-radius: 99px;
  background: var(--green-soft); color: var(--green);
}
.plans[data-cycle="yearly"] .plan-saving { display: block; }
.plan-metrics { margin-top: 20px; flex: 1; }
.plan-metric {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.plan-metric:first-child { border-top: 0; }
.plan-metric b {
  width: 62px; flex-shrink: 0; text-align: right;
  font-family: var(--font-display);
  font-size: var(--t-19); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.plan-metric b small { font-size: var(--t-12); font-weight: 600; color: var(--mute); }
.plan-metric span { font-size: var(--t-14); color: var(--mute); }
/* Extras als stille Zeilen statt Chip-Suppe */
.plan-extras { display: block; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); }
.plan-extras i {
  display: block;
  font-style: normal;
  font-size: var(--t-13); font-weight: 500;
  padding: 3px 0;
  color: var(--ink-soft);
}
/* Das Plus in Grau: Blau gehoert den Kaufwegen. */
.plan-extras i::before { content: "+ "; color: var(--mute); font-weight: 700; }
.plan-cta {
  margin-top: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; border-radius: 999px;
  font-weight: 600; font-size: var(--t-15);
  /* Waren var(--ink), also fast schwarz. Eine Suche ueber jedes Element der
     Seite ergab: das waren die EINZIGEN zwei dunklen Flaechen des ganzen
     Entwurfs, und sie standen ausgerechnet in der Preiszone.
     DIRECTION.md, Control: "Primaer-CTA opak Adress-Blau; Sekundaer Satin
     mit sichtbarer Kontur." Und Punkt 6: kein Dark Mode, eine lichte
     Grundstimmung. Jetzt Satin mit Kontur, der blaue Knopf der
     hervorgehobenen Karte bleibt dadurch der einzige Blickfang. */
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-edge-in);
  transition: transform 0.24s cubic-bezier(0.34, 1.3, 0.64, 1),
              background 0.18s, border-color 0.18s;
}
.plan-cta:hover { border-color: #CBD4E1; box-shadow: inset 0 1px 0 var(--glass-edge-in), var(--shadow-soft); }
.plan-cta:active { transform: scale(0.97); }
.plan-cta:hover { transform: translateY(-2px); }
.plan-featured .plan-cta {
  background: var(--blue);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px -10px rgba(11, 100, 244, 0.8);
}
.plan-featured .plan-cta:hover { box-shadow: 0 12px 28px -10px rgba(11, 100, 244, 0.85); }
.plan-featured .plan-cta:hover { background: var(--blue-deep); }

.plans-after { margin: 22px auto 0; max-width: 620px; text-align: center; font-size: var(--t-14); line-height: 1.55; color: var(--mute); }
/* Der einzige variable Kostenpunkt steht offen direkt unter den Karten */
.plans-after-scans { margin-top: 6px; }
/* ===== FAQ: Liste links, Kontakt-Karte rechts ===== */
.faq-cols {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}
/* Zeile: die FAQ ist EINE Flaeche mit Haarlinien, keine 19 Pillen. Die
   Kaufzeile am Ende ist die letzte Zeile derselben Flaeche. */
.faq-list {
  display: grid;
  border-radius: var(--zeile-radius);
  background: var(--zeile-grund);
  border: 1px solid var(--zeile-linie);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow: hidden;
}
.faq-weiter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  padding: 18px 22px;
  border-top: 1px solid var(--zeile-linie);
  background: var(--surface-calm);
}
.faq-weiter > span { font-size: var(--t-15); font-weight: 600; color: var(--ink); }
.faq-contact-mail { color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* WhatsApp in seinem eigenen Gruen: das Zeichen kennt jeder, und die
   Farbe gehoert nicht PostCloud, also bleibt sie auf Zeichen und Knopf. */
.faq-contact .faq-contact-ico-wa { background: rgba(37, 211, 102, 0.14); color: #1DA851; }
.faq-contact .faq-contact-ico-wa .i { width: 20px; height: 20px; }
.btn-wa { gap: 9px; }
.btn-wa .i { width: 19px; height: 19px; color: #25D366; }
.faq-aside { position: sticky; top: 96px; }
.faq-contact {
  /* Karte */
  border-radius: var(--karte-radius);
  background: var(--karte-grund);
  border: var(--karte-rand);
  box-shadow: var(--karte-schatten);
  padding: 28px 26px;
}
/* Der Kasten ist grau; WhatsApp faerbt ihn darunter in sein eigenes Gruen. */
.faq-contact-ico {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-soft);
}
.faq-contact-ico .i { width: 18px; height: 18px; }
.faq-contact h3 { margin-top: 14px; font-size: var(--t-19); font-weight: 700; }
.faq-contact p { margin-top: 8px; font-size: var(--t-14); line-height: 1.65; color: var(--mute); }
.faq-contact .btn { margin-top: 18px; width: 100%; }
.faq-contact .faq-contact-note { margin-top: 12px; font-size: var(--t-12); }
.faq-item { border-top: 1px solid var(--zeile-linie); }
.faq-item:first-child { border-top: 0; }
.faq-item[open] { background: var(--surface-calm); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 22px;
  font-weight: 600; font-size: var(--t-15);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Die Flaeche schneidet aussen ab; der Fokusring liegt deshalb innen. */
.faq-item summary:focus-visible { outline-offset: -3px; border-radius: 8px; }
/* Ein Winkel in Grau statt eines Plus im Kreis. Offen zeigt er nach oben. */
.faq-icon {
  position: relative; flex-shrink: 0;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  color: var(--mute);
}
.faq-icon::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.22s var(--ease);
}
.faq-item[open] .faq-icon::before { transform: translateY(2px) rotate(-135deg); }
.faq-item p { padding: 0 22px 20px; color: var(--mute); font-size: var(--t-15); max-width: 680px; }
.faq { padding-bottom: 8px; }

/* ===== Ratgeber: das Verzeichnis =====
   Zwischen der letzten Frage und dem Abschluss. Wer bis hierher gelesen hat
   und noch zoegert, dem fehlt meist eine Antwort, die auf dieser Seite nicht
   steht. Sechs Karten fuer die haeufigsten Faelle, darunter das ganze
   Verzeichnis nach Themen sortiert.

   Fachlich zaehlt an dieser Sektion vor allem eins: sie ist der einzige Weg
   von der Startseite zu den 144 Beitraegen. Vorher gab es genau einen Link
   im Fuss. */
/* Unten Luft: der Knopf "Alle Beitraege ansehen" stand sonst direkt auf
   der Fusszeilenkante. Vorher gab der Rahmen der Chip-Wolke den Abstand. */
.ratgeber { position: relative; padding-bottom: var(--sp-sec-tight); }
.ratgeber .sec-head { padding-top: var(--sp-sec-tight); }

.ratgeber-karten {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* start statt stretch: jede Karte ist so hoch wie ihr Text. */
  align-items: start;
}
.ratgeber-karte {
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px 24px 26px;
  /* Karte */
  border-radius: var(--karte-radius);
  background: var(--karte-grund);
  border: var(--karte-rand);
  box-shadow: var(--karte-schatten);
  text-decoration: none;
  color: inherit;
  /* Zustandsuebergang im Band 160 bis 240 ms (DIRECTION.md), nicht 400. */
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* Der Winkel steht hinter dem Titel, in Grau, auf Hoehe der ersten Zeile.
   Der Pfeilkreis unten links ist gestrichen. */
.ratgeber-karte h3 {
  position: relative;
  padding-right: 26px;
  font-size: var(--t-19); font-weight: 700; line-height: var(--lh-titel);
  color: var(--ink);
  text-wrap: balance;
}
.ratgeber-karte-winkel {
  position: absolute; right: 0; top: 0.2em;
  width: 16px; height: 16px;
  color: var(--mute);
  transition: transform 0.4s var(--ease), color 0.4s var(--ease);
}
.ratgeber-karte p {
  margin-top: 9px;
  font-size: var(--t-14); line-height: 1.55;
  color: var(--mute);
}
.ratgeber-karte:hover { transform: translateY(-3px); box-shadow: var(--karte-schatten-hoch); }
.ratgeber-karte:hover .ratgeber-karte-winkel { transform: translateX(3px); color: var(--ink); }
.ratgeber-karte:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Das Verzeichnis nach Thema: eine stille Zeile aus Textlinks mit grauer
   Zahl, keine Chip-Wolke. Die Zahl sagt vor dem Klick, wie viel dort
   wartet. */
.ratgeber-themen-h { margin-top: 40px; text-align: center; }  /* Schrift: Label-Regel oben */
.ratgeber-themen {
  margin: 8px auto 0; max-width: 880px;
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 26px; row-gap: 0;
}
.ratgeber-thema {
  display: inline-flex; align-items: baseline; gap: 6px;
  min-height: 44px; padding: 10px 0;
  font-size: var(--t-15); font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.ratgeber-thema:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ratgeber-thema:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.ratgeber-zahl {
  font-size: var(--t-13); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
}
.ratgeber-alle { margin-top: 20px; text-align: center; }

@media (max-width: 940px) {
  .ratgeber-karten { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ratgeber-karten { grid-template-columns: 1fr; gap: 12px; }
  .ratgeber-karte { padding: 20px 20px 22px; }
  .ratgeber-themen { column-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ratgeber-karte, .ratgeber-karte-winkel, .ratgeber-thema { transition: none; }
  .ratgeber-karte:hover { transform: none; }
  .ratgeber-karte:hover .ratgeber-karte-winkel { transform: none; }
}

/* ===== Outro ===== */
.outro { overflow: hidden; }
.outro-inner {
  position: relative;
  padding-top: 110px; padding-bottom: 120px;
  display: grid; justify-items: center; text-align: center;
}
/* Das Bookend: dieselbe Karte wie in der Hero-Buehne, nur der Endzustand */
.outro-card {
  width: min(460px, 100%);
  margin-top: 30px;
  text-align: left;
}
/* .outro-card-caption: siehe Label-Regel oben. */
.outro-card-name {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: var(--t-21); font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.outro-card-lines {
  margin-top: 6px;
  font-size: var(--t-17); line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
}
.outro-card-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--t-13);
  color: var(--mute);
}
.outro h2 {
  margin-top: 0;
  font-size: clamp(var(--d-30), 3.6vw, var(--d-46));
  font-weight: 700;
}
.outro-sub { margin-top: 14px; font-size: var(--t-17); color: var(--mute); max-width: 480px; }
.outro-actions { margin-top: 30px; display: grid; justify-items: center; gap: 14px; }
.outro-vergleich { font-size: var(--t-14); color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.outro-vergleich:hover { color: var(--ink); }
.outro-legal { margin-top: 20px; font-size: var(--t-13); color: var(--mute); }

/* ===== Footer ===== */
.footer { background: var(--canvas-deep); border-top: 1px solid var(--line); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 0.9fr;
  gap: 36px;
  padding-top: 56px; padding-bottom: 36px;
}
.footer-id { margin-top: 16px; font-size: var(--t-13); line-height: 1.85; color: var(--mute); }
.footer-h { margin-bottom: 4px; }  /* Schrift: Label-Regel oben */
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: var(--t-14); color: var(--mute); width: fit-content; }
.footer-col a:hover { color: var(--ink); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  padding-top: 20px; padding-bottom: 28px;
  border-top: 1px solid var(--line);
  font-size: var(--t-13); color: var(--mute);
}

/* ===== Responsive ===== */
@media (max-width: 1023.98px) {
  .hero-center { padding-top: 100px; }
  .capabilities { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .capabilities li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .capabilities { grid-template-columns: 1fr; }
  .capabilities li:nth-child(odd) { border-right: 0; padding-right: 0; }
  .capabilities li:nth-child(even) { padding-left: 0; }
  .faq-cols { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brandcol { grid-column: 1 / -1; }
  .faq-aside { position: static; }
  .faq-contact { max-width: 480px; margin-inline: auto; }
  .plans { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  /* Gestapelt: der Anker (Business) zuerst, kein negativer Ueberstand */
  .plan-featured { margin-block: 0; padding-block: 30px 28px; order: -1; }
}
@media (max-width: 767.98px) {
  .nav-links, .nav-login { display: none; }
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
  .nav-burger { display: flex; }
  .nav { padding: 10px 10px 0; }
  .nav-pill { height: 56px; padding: 0 8px 0 16px; gap: 10px; }
  .nav-actions { margin-left: auto; }
  /* Der Abstandsrhythmus wird an den Tokens gedreht, nicht an einzelnen
     Selektoren: .start .sec-head ist spezifischer als .sec-head und hat
     diesen Kampf hier vorher gewonnen. */
  :root { --sp-sec: 76px; --sp-sec-tight: 56px; --label-groesse: var(--t-12); }
  .hero-actions .btn { width: 100%; }
  .capabilities { grid-template-columns: 1fr; }
  .capabilities li { padding-right: 0; }
  .capabilities li + li { padding-left: 0; border-left: 0; }
  .ss-num { font-size: 26px; width: 46px; }
  .imprint-card { padding: 22px 20px 20px; }
  .imprint-form { flex-direction: column; }
  .imprint-form .btn { width: 100%; }
  .imprint-head { flex-wrap: wrap; }
  .trust-grid { grid-template-columns: 1fr; gap: 14px; }

  /* --- Tippziele ------------------------------------------------------
     Am Bildschirm reicht eine Textzeile als Ziel, am Daumen nicht. Alles,
     was angetippt wird, bekommt hier mindestens 44 Pixel Hoehe. Die
     Vergroesserung liegt im Innenabstand, damit sich das Layout nicht
     verschiebt. */
  .footer-col a,
  .quiet-link,
  .brand { min-height: 44px; }

  /* --- Schriftgroessen -------------------------------------------------
     Unter 13 Pixel wird auf einem Telefon in der Hand geraten statt
     gelesen. Reine Marken- und Kapitaelchenzeilen duerfen kleiner bleiben,
     Fliesstext nicht. */
  /* Die Portal-Attrappe bleibt ausgenommen: sie soll wie eine App
     aussehen, und App-Oberflaechen setzen kleiner. */
  .dp-hint,
  .plan-billing,
  .plan-tagline,
  .plan-anchor,
  .faq-contact-note,
  .outro-legal,
  .outro-card-note,
  .footer-id,
  .footer-base,
  .footer-base span,
  .faq-contact .faq-contact-note { font-size: var(--t-14); }
  /* Labels: das Token steht oben in dieser Abfrage auf 12px. */
  .imprint-frost-chip { font-size: var(--t-12); }

}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .trust-seal { transform: none; opacity: 1; transition: none; }
  .light-field::before, .light-field::after { animation: none; }
  .btn, .plan-cta, .toggle-thumb, .nav-burger i,
  .faq-icon::before, .app-leiste > * { transition: none; }
}

/* ===== Einwilligung =====
   Kein Vorhang ueber der Seite und kein Sperrbildschirm: ein ruhiges
   Satin-Panel unten, das die Seite lesbar laesst. Beide Knoepfe sind gleich
   gross und gleich leicht zu treffen; das ist die rechtlich saubere Form und
   passt ausserdem zu einer Marke, die mit Datenschutz wirbt. */
/* ===== Einwilligung =====
   Vorher eine Leiste ueber die ganze Breite mit zwei gleich grossen
   Knoepfen. Die Live-Seite hatte stattdessen eine kleine Karte unten
   rechts, kurzen Text und einen breiten Zusage-Knopf, und dort haben
   deutlich mehr Menschen zugestimmt. Diese Form ist wieder da.

   Bewusst so gebaut und nicht anders: "Nur notwendige" ist ein sichtbarer
   Knopf mit Kontur, gleich hoch und einen Klick entfernt, kein
   verstecktes Textlink. Die Angaben zu Empfaenger und Drittland stehen
   hinter "Details", damit die Entscheidung schnell bleibt und die
   Auskunft trotzdem da ist. */
.consent {
  position: fixed; right: 0; bottom: 0; z-index: 80;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.consent-panel {
  pointer-events: auto;
  width: min(384px, calc(100vw - 32px));
  max-height: 80svh; overflow-y: auto;
  border-radius: var(--r-m);
  padding: 16px 16px 12px;
  opacity: 0; transform: translateY(14px) scale(0.98);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.consent.ist-da .consent-panel { opacity: 1; transform: none; }
/* KEIN Fokusring auf dem Panel: es bekommt den Fokus programmatisch,
   damit ein Vorleser die Frage hoert, und Chrome zeichnet dafuer einen
   Ring um die ganze Karte, der wie ein Fehlerzustand aussieht. Die
   Knoepfe darin haben ihren eigenen sichtbaren Fokus. */
.consent-panel:focus { outline: none; }
.consent-h {
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  color: var(--ink); letter-spacing: -0.01em;
}
.consent-text { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--mute); }
/* Beide Entscheidungen gleich gross: vorher stand 'Nur notwendige' mit
   38px und 13px unter einem 48px-Knopf. */
.consent-knoepfe { margin-top: 14px; display: flex; gap: 8px; }
.consent-ja {
  flex: 1; min-width: 0;
  height: 48px; padding: 0 12px;
  font-size: 15px; font-weight: 650;
}
.consent-zweite {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
}
.consent-nein, .consent-mehr {
  flex: 1; min-width: 0;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-text);
  font-size: 15px; font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.consent-nein:hover, .consent-mehr:hover { border-color: #CBD4E1; color: var(--ink); }
.consent-nein:focus-visible, .consent-mehr:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* "Details" steht in der Textzeile, nicht als dritter Knopf: so bleibt
   das Panel auf dem Handy unter 160px und verdeckt weniger vom Hero. */
.consent-mehr {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0; height: auto; padding: 0 2px;
  border: 0; border-radius: 4px; background: none;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.consent-pfeil {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.22s var(--ease);
}
.consent-mehr[aria-expanded="true"] .consent-pfeil { transform: translateY(1px) rotate(-135deg); }
.consent-details {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid; gap: 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--mute);
}
.consent-details[hidden] { display: none; }
.consent-details b { font-weight: 650; color: var(--ink-soft); }
.consent-fuss { font-size: 12.5px; }
.consent-fuss a { color: var(--mute); }

/* ===== Sehr schmale Schirme =====
   Der kleinste Bruchpunkt der Datei war bisher 520px. Bei 320px, also auf
   einem iPhone SE und zugleich bei 400 Prozent Zoom (WCAG 1.4.10), lag der
   CTA ueber dem Logo, das Menuesymbol ragte 26px aus dem Fenster, und
   Ueberschrift, Unterzeile und Impressum-Karte waren rechts abgeschnitten.
   Gemessen bei 320px: H1 von 24 bis 339 in einem 320 breiten Fenster. */
@media (max-width: 400px) {
  /* padding-inline, nicht padding: die Kurzschreibweise nahm Schluss und
     Footer bis 400px ihr gesamtes vertikales Padding weg. */
  .shell { padding-inline: 16px; }
  .nav { padding: 8px 8px 0; }
  .nav-pill { height: 52px; padding: 0 6px 0 12px; gap: 6px; }
  .brand span { font-size: 17px; }
  .brand img { width: 24px; height: 17px; }
  /* Der Kaufknopf bleibt, wird aber kompakt: er ist der einzige Weg zum
     Tarif, der oben immer sichtbar ist. */
  .nav-actions .btn { padding: 0 14px; font-size: 14px; }
  .nav-burger { margin-left: 2px; }

  .hero h1 { font-size: clamp(29px, 8.6vw, 38px); }
  /* Der feste Umbruch komponiert die Zeile auf breiten Schirmen. Auf einem
     320er Fenster zwingt er "nicht ins Impressum." in eine Zeile, die dort
     nicht mehr hineinpasst. Schmal entscheidet der Textfluss. */
  .umbruch-breit { display: none; }
  .hero-sub { font-size: 15.5px; }
  .hero-center { padding-top: 88px; padding-bottom: 56px; }

  .imprint { padding: 20px 18px; }
  .imprint-company { font-size: var(--t-19); }
  /* Die Adresszeile unter den Tarifen ist breiter als 328px Inhalt und
     schob die ganze Seite seitlich (gemessen: 379px bei 360px Fenster).
     Hier darf sie am Mittelpunkt umbrechen. */
  .plans-personal .nowrap { white-space: normal; }

  .mobile-menu { inset: 76px 8px auto 8px; padding: 18px 16px 20px; }
  .mobile-menu nav a { font-size: 21px; padding: 13px 2px; }
}

@media (max-width: 520px) {
  /* Zentrierte Flex-Punkte richten sich auf schmalen Schirmen einzeln aus,
     die Haken standen dadurch treppenfoermig statt untereinander. */
}
@media (prefers-reduced-motion: reduce) {
  .consent-panel { transition: none; opacity: 1; transform: none; }
}

/* ===== Durchschuss-Skala =====
   body steht auf 1.6, richtig fuer Fliesstext. Alles ab 18px, das nicht h1
   oder .sec-head h2 ist, erbte das ebenfalls, und dafuer gab es keinen
   Grund: grosse Schrift braucht WENIGER Durchschuss, nicht mehr.

   Gemessene Folgen: die Schluss-Ueberschrift bekam bei 46px einen
   Zeilenabstand von 73px, waehrend jede andere Ueberschrift der Seite bei
   1.12 steht; auf dem Telefon bricht sie um und stand dann mit 43 Prozent
   mehr Abstand da als alles andere. Und um jeden Preis in den Tarifkarten
   lagen bei 42px rund 12px Phantomraum, den kein margin erklaert, weshalb
   die 18px margin-top der Preiszeile wie 30px wirkten.

   Vier Stufen, an die Groesse gebunden, nicht ans Element. */
:root {
  --lh-display: 1.12;  /* ab 30px */
  --lh-titel: 1.22;    /* 18 bis 29px */
  --lh-zahl: 1;        /* Zahlen, die fuer sich stehen */
}
.outro h2 { line-height: var(--lh-display); }
.mobile-menu nav a,
.imprint-company,
.outro-card-name,
.plan-metric b,
.v2-node-num,
.brand span,
.faq-contact h3,
.app-titel { line-height: 1.08; }
.plan-price b { line-height: var(--lh-zahl); }