:root {
    --ground: #FFFFFF;
    --band: #F6F5FB;
    --surface: #FFFFFF;
    --ink: #101223;
    --ink-soft: #4A4E66;
    --ink-faint: #7C819B;
    --accent: #5B3DF5;
    --accent-deep: #4A2FE0;
    --accent-soft: #EDEAFE;
    /* Violett auf dunklem Grund (Business-Karte, Abschlussband): accent-deep
       waere dort fast unlesbar, deshalb ein eigener, hellerer Ton. */
    --accent-hell: #9B87FF;
    --on-accent: #FFFFFF;
    --dark: #12121C;
    --on-dark: #F4F3F9;
    --on-dark-soft: rgba(244, 243, 249, 0.66);
    --dark-line: rgba(244, 243, 249, 0.14);
    --line: #E6E5F0;
    --line-soft: #F0EFF6;
    --gruen: #16875C;
    --gruen-soft: #E2F4EC;
    --blau: #2563C9;
    --blau-soft: #E4EDFB;
    --bernstein: #A9700A;
    --bernstein-soft: #FCF0DA;
    --schatten: 0 1px 2px rgba(16, 18, 35, 0.04), 0 12px 32px rgba(16, 18, 35, 0.07);
    --schatten-hoch: 0 2px 4px rgba(16, 18, 35, 0.05), 0 24px 60px rgba(16, 18, 35, 0.13);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #0B0B12;
      --band: #12121C;
      --surface: #16161F;
      --ink: #F3F2F8;
      --ink-soft: #B4B3C6;
      --ink-faint: #8A89A0;
      --accent: #8B72FF;
      --accent-deep: #A08CFF;
      --accent-soft: rgba(139, 114, 255, 0.16);
      --accent-hell: #A594FF;
      --on-accent: #0B0B12;
      --dark: #221F33;
      --on-dark: #F3F2F8;
      --on-dark-soft: rgba(243, 242, 248, 0.66);
      --dark-line: rgba(243, 242, 248, 0.14);
      --line: #262633;
      --line-soft: #1C1C27;
      --gruen: #4FC194;
      --gruen-soft: rgba(79, 193, 148, 0.15);
      --blau: #6EA4F5;
      --blau-soft: rgba(110, 164, 245, 0.15);
      --bernstein: #E0AC4B;
      --bernstein-soft: rgba(224, 172, 75, 0.15);
      --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
      --schatten-hoch: 0 2px 4px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.6);
    }
  }

  :root[data-theme="dark"] {
    --ground: #0B0B12;
    --band: #12121C;
    --surface: #16161F;
    --ink: #F3F2F8;
    --ink-soft: #B4B3C6;
    --ink-faint: #8A89A0;
    --accent: #8B72FF;
    --accent-deep: #A08CFF;
    --accent-soft: rgba(139, 114, 255, 0.16);
    --accent-hell: #A594FF;
    --on-accent: #0B0B12;
    --dark: #221F33;
    --on-dark: #F3F2F8;
    --on-dark-soft: rgba(243, 242, 248, 0.66);
    --dark-line: rgba(243, 242, 248, 0.14);
    --line: #262633;
    --line-soft: #1C1C27;
    --gruen: #4FC194;
    --gruen-soft: rgba(79, 193, 148, 0.15);
    --blau: #6EA4F5;
    --blau-soft: rgba(110, 164, 245, 0.15);
    --bernstein: #E0AC4B;
    --bernstein-soft: rgba(224, 172, 75, 0.15);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
    --schatten-hoch: 0 2px 4px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.6);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

  h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 800; letter-spacing: -0.03em; }
  h1 { font-size: clamp(46px, 7.4vw, 78px); line-height: 0.98; letter-spacing: -0.045em; }
  h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; }
  h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
  p { margin: 0; }

  a { color: var(--accent); }

  section { padding: 92px 0; }
  .band { background: var(--band); }

  /* ---------- Kopfleiste ---------- */
  header.top {
    position: sticky; top: 0; z-index: 20;
    background: var(--ground);
    border-bottom: 1px solid var(--line-soft);
  }
  .top-inner {
    display: flex; align-items: center; gap: 20px;
    padding: 15px 0;
  }
  .marke {
    font-size: 27px; font-weight: 800; letter-spacing: -0.055em;
    color: var(--ink); text-decoration: none; line-height: 1;
  }
  .nav { display: none; gap: 30px; margin: 0 auto; }
  @media (min-width: 940px) { .nav { display: flex; } }
  .nav a {
    color: var(--ink-soft); text-decoration: none;
    font-size: 15px; font-weight: 500;
  }
  .nav a:hover { color: var(--ink); }
  .top-rechts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
  @media (min-width: 940px) { .top-rechts { margin-left: 0; } }
  .login-link {
    color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 600;
  }
  .login-link:hover { color: var(--ink); }

  /* ---------- Knoepfe ---------- */
  .knopf {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
    text-decoration: none; padding: 12px 20px; border-radius: 10px;
    border: 1px solid transparent; cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
  }
  .knopf-voll { background: var(--accent); color: var(--on-accent); }
  .knopf-voll:hover { background: var(--accent-deep); }
  .knopf-dunkel { background: var(--dark); color: var(--on-dark); }
  .knopf-rand { border-color: var(--line); color: var(--ink); background: var(--surface); }
  .knopf-gross { padding: 16px 26px; font-size: 16.5px; border-radius: 12px; }
  .knopf:hover { transform: translateY(-1px); }
  .knopf:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .knopf, .knopf:hover { transform: none; transition: none; }
  }

  /* ---------- Hero ---------- */
  .hero { padding: 64px 0 88px; overflow: hidden; }
  .hero-raster { display: grid; gap: 56px; align-items: center; }
  @media (min-width: 1000px) {
    .hero-raster { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 40px; }
  }

  .plakette {
    display: inline-block;
    background: var(--accent-soft); color: var(--accent-deep);
    font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 7px 13px; border-radius: 7px; margin-bottom: 26px;
  }
  .hero h1 span { color: var(--accent); display: block; }
  .hero-unter {
    font-size: clamp(20px, 2.4vw, 25px); font-weight: 700; letter-spacing: -0.025em;
    line-height: 1.25; margin-top: 26px; color: var(--ink);
  }
  .hero-text {
    margin-top: 18px; color: var(--ink-soft); font-size: 17px; max-width: 44ch;
  }
  .hero .knopf-gross { margin-top: 32px; }

  .punkte { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 30px; }
  .punkt { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.35; }
  .punkt svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
  .punkt b { display: block; font-weight: 700; color: var(--ink); }
  .punkt span { color: var(--ink-faint); }

  /* ---------- Geraetebild ---------- */
  .geraete { position: relative; }
  .laptop {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: var(--schatten-hoch);
    overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr);
    font-size: 11px;
  }
  @media (min-width: 620px) { .laptop { grid-template-columns: 132px minmax(0, 1fr); } }
  .lp-seite {
    background: var(--band); border-right: 1px solid var(--line);
    padding: 14px 10px; display: none;
  }
  @media (min-width: 620px) { .lp-seite { display: block; } }
  .lp-marke { font-size: 17px; font-weight: 800; letter-spacing: -0.05em; padding: 0 6px 14px; }
  .lp-punkt {
    display: flex; align-items: center; gap: 8px;
    padding: 6px; border-radius: 6px; color: var(--ink-faint); font-weight: 500;
  }
  .lp-punkt.aktiv { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
  .lp-icon { width: 13px; height: 13px; border-radius: 3px; background: currentColor; opacity: 0.32; flex-shrink: 0; }
  .lp-punkt.aktiv .lp-icon { opacity: 0.85; }

  .lp-inhalt { padding: 14px 16px 16px; min-width: 0; }
  .lp-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .lp-titel { font-size: 15px; font-weight: 800; letter-spacing: -0.03em; }
  .lp-datum {
    display: flex; align-items: center; gap: 6px;
    color: var(--ink-soft); font-weight: 600; font-size: 10.5px;
  }
  .lp-pfeil {
    width: 19px; height: 19px; border: 1px solid var(--line); border-radius: 5px;
    display: grid; place-items: center; color: var(--ink-faint);
  }
  .lp-schalter { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .lp-schalter span { padding: 3px 9px; color: var(--ink-faint); font-weight: 600; font-size: 10px; }
  .lp-schalter span.an { background: var(--ink); color: var(--ground); }
  .lp-neu {
    background: var(--accent); color: var(--on-accent);
    padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 10px;
  }

  .brett-huelle { overflow-x: auto; }
  .brett { border: 1px solid var(--line); border-radius: 9px 9px 0 0; overflow: hidden; min-width: 420px; }
  .brett-zeile {
    display: grid; grid-template-columns: 84px repeat(8, minmax(0, 1fr));
    border-bottom: 1px solid var(--line-soft); min-height: 34px; align-items: center;
  }
  .brett-zeile:last-child { border-bottom: none; }
  .brett-zeile.kopf { min-height: 26px; background: var(--band); }
  .brett-zeile.grau { background: var(--line-soft); }
  .zeit {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px; color: var(--ink-faint); text-align: center;
    border-left: 1px solid var(--line-soft); line-height: 26px;
  }
  .fzg {
    display: flex; align-items: center; gap: 6px; padding: 0 9px;
    border-right: 1px solid var(--line-soft); min-width: 0;
  }
  .fzg-punkt { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; }
  .fzg b {
    font-family: "IBM Plex Mono", monospace; font-size: 9.5px; font-weight: 600;
    display: block; line-height: 1.25; color: var(--ink);
  }
  .fzg small { font-size: 8.5px; color: var(--ink-faint); display: block; line-height: 1.2; }
  .balken {
    margin: 3px; padding: 4px 7px; border-radius: 5px; min-width: 0;
    border-left: 2.5px solid currentColor;
  }
  .balken b { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .balken span {
    font-family: "IBM Plex Mono", monospace; font-size: 8.5px; opacity: 0.75; white-space: nowrap;
  }
  .b-lila { background: var(--accent-soft); color: var(--accent-deep); }
  .b-blau { background: var(--blau-soft); color: var(--blau); }
  .b-gruen { background: var(--gruen-soft); color: var(--gruen); }
  .b-bernstein { background: var(--bernstein-soft); color: var(--bernstein); }
  .b-grau { background: var(--line-soft); color: var(--ink-soft); }

  .kennzahlen {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--line-soft); border: 1px solid var(--line);
    border-top: none; border-radius: 0 0 9px 9px; overflow: hidden; min-width: 420px;
  }
  .kennzahl { background: var(--surface); padding: 9px 11px; }
  .kennzahl small { display: block; font-size: 8.5px; color: var(--ink-faint); font-weight: 600; }
  .kennzahl b {
    display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums; margin-top: 1px;
  }

  .handy {
    /* Haengt bewusst ueber die rechte Kante des Laptops hinaus, statt mitten
       auf dem Dispoplan zu liegen - sonst verdeckt es genau die Spalten und
       Kennzahlen, die das Bild zeigen soll. */
    position: absolute; right: -34px; bottom: -58px; width: 176px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 22px; box-shadow: var(--schatten-hoch);
    padding: 8px 8px 12px; display: none;
  }
  @media (min-width: 760px) { .handy { display: block; } }
  .handy-leiste {
    display: flex; justify-content: space-between; align-items: center;
    font-family: "IBM Plex Mono", monospace; font-size: 8px;
    color: var(--ink-faint); padding: 0 6px 6px;
  }
  .handy-kopf {
    display: flex; align-items: center; gap: 6px; padding: 5px 6px 9px;
    border-bottom: 1px solid var(--line-soft); font-size: 10px;
    font-weight: 600; color: var(--ink-soft);
  }
  .handy-inhalt { padding: 11px 6px 0; }
  .handy-inhalt h4 {
    margin: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: -0.035em;
  }
  .stelle { margin-bottom: 9px; }
  .stelle small {
    display: block; font-size: 8.5px; color: var(--ink-faint); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .stelle b { display: block; font-size: 10.5px; font-weight: 700; margin-top: 1px; }
  .stelle span {
    display: block; font-family: "IBM Plex Mono", monospace;
    font-size: 8.5px; color: var(--ink-faint);
  }
  .fortschritt {
    height: 5px; border-radius: 3px; background: var(--line-soft);
    overflow: hidden; margin-top: 4px;
  }
  .fortschritt i { display: block; height: 100%; width: 58%; background: var(--accent); border-radius: 3px; }
  .handy-zeile {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 0; border-top: 1px solid var(--line-soft);
    font-size: 9.5px; font-weight: 600; color: var(--ink-soft);
  }
  .handy-zeile span:last-child { margin-left: auto; color: var(--ink-faint); }
  .handy-knopf {
    display: block; text-align: center; background: var(--accent); color: var(--on-accent);
    border-radius: 8px; padding: 8px; font-size: 10.5px; font-weight: 700; margin-top: 10px;
  }

  /* ---------- Prozess ---------- */
  .mitte { text-align: center; max-width: 620px; margin: 0 auto; }
  .mitte p { color: var(--ink-soft); margin-top: 14px; }

  .schritte {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 34px 10px; margin-top: 52px;
  }
  @media (min-width: 700px) { .schritte { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1000px) { .schritte { grid-template-columns: repeat(6, 1fr); gap: 10px; } }
  .schritt { position: relative; text-align: center; padding: 0 4px; }
  .schritt-kreis {
    width: 62px; height: 62px; margin: 0 auto 16px;
    border: 1px solid var(--line); border-radius: 50%;
    display: grid; place-items: center; color: var(--accent); background: var(--surface);
  }
  .schritt h3 { margin-bottom: 8px; }
  .schritt p { font-size: 13.5px; color: var(--ink-faint); line-height: 1.5; }
  /* Verbindungspfeil nur dort, wo die Schritte wirklich nebeneinander stehen */
  @media (min-width: 1000px) {
    .schritt:not(:last-child)::after {
      content: ""; position: absolute; top: 27px; right: -5px; width: 8px; height: 8px;
      border-top: 1px solid var(--line); border-right: 1px solid var(--line);
      transform: rotate(45deg);
    }
  }

  /* ---------- Fahrer-App ---------- */
  .zwei { display: grid; gap: 48px; align-items: center; }
  @media (min-width: 900px) { .zwei { grid-template-columns: 1fr 1fr; gap: 64px; } }
  .liste { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
  .liste li { display: flex; gap: 12px; align-items: flex-start; }
  .liste svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }
  .liste b { display: block; font-weight: 700; }
  .liste span { color: var(--ink-soft); font-size: 15px; }

  .app-bild {
    background: var(--band); border: 1px solid var(--line); border-radius: 16px;
    padding: 40px 20px; display: grid; place-items: center; min-height: 340px;
  }
  .app-bild .handy { position: static; display: block; width: 220px; }

  /* ---------- Preise ---------- */
  .preis-raster { display: grid; gap: 20px; margin-top: 44px; align-items: start; }
  @media (min-width: 860px) { .preis-raster { grid-template-columns: repeat(3, 1fr); } }
  /* Vorteile und der Kasten "mehr als 50 Fahrzeuge" stehen jetzt UNTER den
     drei Tarifen und teilen sich die Breite - als vierte Spalte daneben
     waere jede Karte zu schmal fuer den Preis geworden. */
  .preis-raster .neben { grid-column: 1 / -1; display: grid; gap: 20px; }
  @media (min-width: 860px) { .preis-raster .neben { grid-template-columns: 1fr 1fr; align-items: start; } }
  .tarif {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 28px 26px; box-shadow: var(--schatten);
  }
  .tarif.hervor { background: var(--dark); border-color: var(--dark); box-shadow: var(--schatten-hoch); }
  .tarif-name {
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent); text-align: center;
  }
  .tarif.hervor .tarif-name { color: var(--accent-hell); }
  /* Deutlich sichtbare Begrenzung des Angebots. Bewusst in der
     Aufmerksamkeitsfarbe (Bernstein), nicht in Rot: Es ist ein Hinweis, keine
     Warnung. */
  .founding-hinweis {
    max-width: 620px; margin: 22px auto 0; text-align: center;
    background: var(--bernstein-soft); color: var(--bernstein);
    border-radius: 11px; padding: 12px 18px;
    font-size: 14.5px; line-height: 1.55; font-weight: 600;
  }
  .founding-marke {
    display: inline-block; margin-bottom: 12px;
    background: var(--accent-soft); color: var(--accent-deep);
    font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 6px;
  }
  .tarif.hervor .founding-marke { background: rgba(155, 135, 255, 0.2); color: var(--accent-hell); }
  .danach {
    margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-faint);
  }
  .tarif.hervor .danach { color: var(--on-dark-soft); }

  /* Regulaerer Preis, durchgestrichen ueber dem Einstiegspreis. Ohne diese
     Zahl bleibt "Einstiegspreis" eine Behauptung - erst der Vergleich macht
     sichtbar, was die Founding 100 wert sind. */
  .preis-vorher {
    text-align: center; font-size: 16px; font-weight: 600;
    color: var(--ink-faint); text-decoration: line-through;
    text-decoration-thickness: 1.5px; margin-top: 14px;
  }
  .tarif.hervor .preis-vorher { color: var(--on-dark-soft); }

  .preis { text-align: center; margin-top: 2px; }
  .preis b {
    font-size: clamp(38px, 4.6vw, 48px); font-weight: 800; letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
  }
  .preis i { font-style: normal; font-size: 15px; font-weight: 600; color: var(--ink-faint); }
  .tarif.hervor .preis b { color: var(--on-dark); }
  .tarif.hervor .preis i { color: var(--on-dark-soft); }
  .flotte {
    text-align: center; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  }
  .tarif.hervor .flotte { color: var(--on-dark-soft); }

  .enthalten {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin: 24px 0 22px; padding-top: 22px; border-top: 1px solid var(--line);
  }
  .tarif.hervor .enthalten { border-top-color: var(--dark-line); }
  .enthalten div { text-align: center; font-size: 10.5px; line-height: 1.35; color: var(--ink-faint); }
  .enthalten b { display: block; font-weight: 700; color: var(--ink); font-size: 11px; }
  .tarif.hervor .enthalten div { color: var(--on-dark-soft); }
  .tarif.hervor .enthalten b { color: var(--on-dark); }
  .enthalten svg { color: var(--accent); margin-bottom: 5px; }
  .tarif.hervor .enthalten svg { color: var(--accent-hell); }
  .tarif .knopf { width: 100%; justify-content: center; }

  .neben { display: grid; gap: 22px; }
  .vorteile { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
  .vorteile li { display: flex; gap: 11px; align-items: center; font-size: 14.5px; color: var(--ink-soft); }
  .vorteile svg { flex-shrink: 0; color: var(--accent); }
  .gross-kasten {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 20px 22px;
  }
  .gross-kasten h3 { margin-bottom: 8px; }
  .gross-kasten p { font-size: 14.5px; color: var(--ink-soft); }
  .gross-kasten a { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14.5px; text-decoration: none; }

  /* ---------- Platzhalter-Flaeche ---------- */
  .platzhalter-flaeche {
    margin-top: 30px; border: 2px dashed var(--line);
    border-radius: 14px; padding: 30px 24px; text-align: center;
  }
  .platzhalter-marke {
    display: inline-block; background: var(--bernstein-soft); color: var(--bernstein);
    font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 6px; margin-bottom: 14px;
  }
  .platzhalter-flaeche p { font-size: 14.5px; color: var(--ink-soft); max-width: 62ch; margin: 0 auto; }
  .logo-reihe {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px;
  }
  .logo-platz {
    width: 132px; height: 40px; border-radius: 8px; background: var(--line-soft);
    display: grid; place-items: center; color: var(--ink-faint);
    font-size: 10.5px; font-weight: 600;
  }

  /* ---------- Abschlussband ---------- */
  .abschluss {
    background: var(--dark); color: var(--on-dark);
    border-radius: 18px; padding: 34px;
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  }
  .abschluss-pfeil {
    width: 52px; height: 52px; border-radius: 13px; background: var(--accent);
    display: grid; place-items: center; color: var(--on-accent); flex-shrink: 0;
  }
  .abschluss-text { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
  .abschluss-text span { display: block; color: var(--on-dark-soft); font-weight: 600; }
  .abschluss-rechts { margin-left: auto; text-align: right; }
  .abschluss-rechts small {
    display: block; margin-top: 10px; font-size: 12.5px; color: var(--on-dark-soft);
  }

  .herkunft {
    margin-top: 30px; padding: 22px 24px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--line);
    text-align: center; display: grid; gap: 6px;
  }
  .herkunft b { font-size: 16.5px; font-weight: 700; }
  .herkunft span { font-size: 14.5px; color: var(--ink-soft); max-width: 62ch; margin: 0 auto; }

  /* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
  .rechtstext { margin-top: 22px; max-width: 68ch; display: grid; gap: 18px; }
  .rechtstext p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
  .rechtstext b { color: var(--ink); font-weight: 700; }
  .rechtstext .klein { font-size: 14px; }
  /* Fehlende Pflichtangaben deutlich sichtbar - sie duerfen nicht
     versehentlich uebersehen werden, bevor die Seite beworben wird. */
  .rechtstext .fehlt {
    background: var(--bernstein-soft); color: var(--bernstein);
    border-left: 4px solid var(--bernstein);
    border-radius: 0 8px 8px 0; padding: 14px 16px; font-size: 14.5px;
  }
  .rechtstext .fehlt b { color: var(--bernstein); }
  .rechtstext .fehlt-inline { color: var(--bernstein); }

  /* ---------- Sprachwahl ---------- */
  /* Steht im Fuss, nicht oben im Kopf: Wer die Seite auf Deutsch oeffnet
     und Deutsch liest, soll nicht ueber eine Sprachliste stolpern. Wer
     eine andere Sprache sucht, scrollt ohnehin oder kommt ueber Google
     direkt auf seiner Sprachfassung an. */
  .sprachwahl {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft);
    font-size: 13.5px;
  }
  .sprachwahl-titel {
    font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .sprachwahl a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
  .sprachwahl a:hover { color: var(--accent); text-decoration: underline; }
  .sprachwahl-aktiv { color: var(--accent-deep); font-weight: 700; }
  .recht-hinweis {
    margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink-faint);
    max-width: 70ch;
  }

  /* ---------- Themenseiten ---------- */
  .themen-liste {
    margin-top: 26px; display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  }
  .themen-liste a {
    display: block; text-decoration: none; background: var(--surface);
    border: 1px solid var(--line); border-radius: 13px; padding: 17px 19px;
    transition: border-color 0.15s ease;
  }
  .themen-liste a:hover { border-color: var(--accent); }
  .themen-liste b { display: block; font-size: 16px; color: var(--ink); font-weight: 700; }
  .themen-liste span {
    display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-faint);
  }

  /* ---------- Fuss ---------- */
  footer {
    border-top: 1px solid var(--line-soft); margin-top: 92px;
    padding: 34px 0 44px;
  }
  .fuss-inner {
    display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
    font-size: 13.5px; color: var(--ink-faint);
  }
  .fuss-inner nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
  .fuss-inner a { color: var(--ink-faint); text-decoration: none; }
  .fuss-inner a:hover { color: var(--ink); }
  .offen {
    margin-top: 22px; font-size: 12.5px; color: var(--bernstein);
    background: var(--bernstein-soft); border-radius: 8px; padding: 10px 14px;
  }

  @media (max-width: 620px) {
    section { padding: 68px 0; }
    .hero { padding: 40px 0 64px; }
    .abschluss { padding: 26px 22px; }
    .abschluss-rechts { margin-left: 0; text-align: left; }
    .enthalten { grid-template-columns: repeat(2, 1fr); gap: 14px 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }
  /* ---------- Rechtstexte als eigene Ebene ---------- */
  /* Ohne JavaScript greift keine dieser Regeln: Dann stehen Impressum,
     Datenschutz und AGB sichtbar am Seitenende - so wie bisher. */
  html.js .rechts-schicht { display: none; }
  html.js .rechts-schicht.offen {
    display: block; position: fixed; inset: 0; z-index: 100;
    background: var(--ground); overflow-y: auto; overscroll-behavior: contain;
  }
  html.js body.rechts-offen { overflow: hidden; }
  .rechts-kopf {
    position: sticky; top: 0; z-index: 2; background: var(--ground);
    border-bottom: 1px solid var(--line); padding: 13px 0;
  }
  .rechts-kopf-inner { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
  .rechts-kopf strong {
    font-size: 15px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink);
  }
  .rechts-kopf nav { display: flex; gap: 18px; flex-wrap: wrap; }
  .rechts-kopf nav a {
    font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  }
  .rechts-kopf nav a:hover { color: var(--accent); }
  .rechts-zu {
    margin-left: auto; font-family: inherit; font-size: 14px; font-weight: 700;
    color: var(--ink); background: var(--band); border: 1px solid var(--line);
    border-radius: 9px; padding: 9px 15px; cursor: pointer;
  }
  .rechts-zu:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-deep); }
  .rechts-zu:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  html.js .rechts-schicht section { padding: 54px 0; }

  /* ---------- Fussleiste: Rechtliches unten links ---------- */
  .fuss-recht {
    display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px;
    padding-top: 18px; border-top: 1px solid var(--line-soft);
  }
  .fuss-recht a, .fuss-recht button {
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--ink-soft); text-decoration: none;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .fuss-recht a:hover, .fuss-recht button:hover { color: var(--accent); text-decoration: underline; }
  .fuss-recht a:focus-visible, .fuss-recht button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

  /* ---------- Einwilligung ---------- */
  .einwilligung-grund {
    position: fixed; inset: 0; z-index: 90; padding: 20px;
    background: rgba(16, 18, 35, 0.5);
    display: grid; place-items: center;
    animation: einblenden 0.2s ease;
  }
  @keyframes einblenden { from { opacity: 0 } to { opacity: 1 } }
  @media (prefers-reduced-motion: reduce) { .einwilligung-grund { animation: none } }
  .einwilligung {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; box-shadow: var(--schatten-hoch);
    width: 100%; max-width: 520px; padding: 26px 26px 22px;
    /* Auf kleinen Handys wird die Einzelansicht hoeher als der Bildschirm.
       Ohne diese beiden Zeilen waeren die Schaltflaechen dann unerreichbar. */
    max-height: calc(100vh - 40px); overflow-y: auto;
  }
  .einwilligung h2 { font-size: 22px; }
  .einwilligung p { margin-top: 13px; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
  .einwilligung-knoepfe { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
  /* Beide Schaltflaechen bewusst gleich gross und gleich auffaellig. Eine
     Ablehnung darf nicht schwerer zu finden sein als eine Zustimmung - genau
     das beanstanden die Aufsichtsbehoerden an den ueblichen Bannern. */
  .einwilligung-knoepfe .knopf { flex: 1 1 190px; justify-content: center; }
  .einwilligung .knopf-rand { border-color: var(--ink-faint); }
  .einwilligung-fuss { margin-top: 15px; font-size: 13px; color: var(--ink-faint); }
  .knopf-breit { flex: 1 1 100% !important; }
  .zweck-liste { display: grid; gap: 10px; margin-top: 20px; }
  .zweck {
    display: flex; gap: 14px; align-items: flex-start;
    border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px;
    background: var(--band);
  }
  .zweck-text { flex: 1; }
  .zweck-text b { font-size: 14.5px; color: var(--ink); }
  .zweck-text span {
    display: block; margin-top: 3px; font-size: 13px; line-height: 1.5;
    color: var(--ink-faint);
  }
  /* Bewusst gewoehnliche Kaestchen statt nachgebauter Schieberegler: Sie
     funktionieren mit Tastatur und Vorlesesoftware ohne Zutun, und jeder
     erkennt auf einen Blick, was an und was aus ist. */
  .zweck input {
    width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent);
    cursor: pointer; flex: none;
  }
  .zweck input:disabled { cursor: default; opacity: 0.5; }
  .zweck-fest {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ink-faint); margin-top: 4px;
    flex: none;
  }
  .einwilligung-fuss a { color: var(--ink-soft); }