/* Gemeinsame Stile aller Seiten von www.freightly.io.
   Stand bis Oktober 2026 als <style> in index.html, als es nur die eine Seite gab. */
  :root{
    color-scheme: only light;
    --paper:#FFFFFF;--paper-soft:#F4F6FB;--paper-warm:#FFF9F4;--ink:#12172B;--ink-2:#272D45;
    --slate:#464C63;--slate-2:#6B7288;--line:#E7EAF3;
    --brand:#2F6BFF;--brand-ink:#1E54E8;--brand-soft:#EAF0FF;
    --emerald:#0FB981;--emerald-soft:#E7F8F1;--emerald-ink:#0a8f63;
    --amber:#F5A623;--amber-soft:#FFF4E0;--coral:#FF7A45;--coral-soft:#FFEDE7;
    --radius:15px;--maxw:1180px;--ease:cubic-bezier(.22,1,.36,1);
    --font-display:'Outfit',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;--font-mono:'Space Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px;color-scheme:only light;background:#fff;forced-color-adjust:none}
  body{font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}
  img,svg{max-width:100%}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--brand);color:#fff}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:10px}
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--brand);display:inline-block}
  h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;line-height:1.07;color:var(--ink)}
  .c-brand{color:var(--brand)}
  .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .rv.in{opacity:1;transform:none}

  /* NAV */
  header.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s, backdrop-filter .35s, box-shadow .35s, border-color .35s;border-bottom:1px solid transparent}
  header.nav.scrolled{background:rgba(255,255,255,0.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:0 10px 34px -26px rgba(18,23,43,0.5)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
  .logo{display:flex;align-items:center;gap:11px;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-0.01em}
  .logo .mark{width:32px;height:32px;display:grid;place-items:center;background:var(--brand);border-radius:9px}
  /* 20px statt 28: Bei 28 brauchte die Leiste 1126px, der Container gibt aber
     hoechstens 1124 her (--maxw 1180 minus 2x28 Polster). Sie passte damit bei
     KEINER Breite — auch nicht auf einem 27-Zoll-Monitor. */
  .nav-links{display:flex;align-items:center;gap:20px}
  /* nowrap: Ohne das schrumpfen die Flex-Kinder unter ihre Textbreite und
     brechen mitten im Namen um — „Fuer/wen", „Live-/Demo", „Wer/dahintersteckt".
     Genau das war am Bildschirm zu sehen. */
  .nav-links a{color:var(--slate);font-size:14.5px;font-weight:500;white-space:nowrap;transition:color .2s}
  .nav-links a:hover{color:var(--ink)}
  .nav-cta{background:var(--ink);color:#fff!important;padding:11px 20px;border-radius:10px;font-size:14px;font-weight:600;transition:background .2s, transform .2s}
  .nav-cta:hover{background:#000;transform:translateY(-1px)}
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--ink)}

  .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:600;font-size:15px;cursor:pointer;padding:15px 26px;border-radius:11px;border:0;transition:transform .2s var(--ease), background .2s, box-shadow .2s}
  .btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 26px -12px rgba(47,107,255,0.7)}
  .btn-primary:hover{background:var(--brand-ink);transform:translateY(-2px)}
  .btn-primary svg{transition:transform .2s var(--ease)}
  .btn-primary:hover svg{transform:translateX(3px)}
  .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
  .btn-ghost:hover{border-color:var(--slate-2);transform:translateY(-2px)}

  /* HERO */
  .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:140px 0 60px;background:radial-gradient(90% 120% at 88% 10%, rgba(47,107,255,0.10) 0%, rgba(47,107,255,0) 55%), linear-gradient(180deg,#FFFFFF 0%, #F4F6FB 100%)}
  .hero-inner{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:1.04fr 0.96fr;gap:52px;align-items:center}
  .hero-copy{max-width:640px}
  .hero h1{font-size:clamp(2.3rem,5vw,3.9rem);margin:22px 0 20px;overflow-wrap:break-word}
  .hero h1 .u{color:var(--brand)}
  .hero p.lead{font-size:clamp(1.05rem,1.6vw,1.26rem);color:var(--slate);max-width:560px;margin-bottom:32px}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
  .hero-trust{margin-top:24px;display:flex;flex-direction:column;gap:9px}
  /* Fließtext, nicht Flexbox.
     Vorher war das span ein display:flex mit nowrap. Damit wurden Fettdruck und
     der Text danach zu ZWEI Flex-Elementen, die auf schmalen Schirmen
     nebeneinander standen und jedes für sich umbrachen — auf dem iPhone sah
     "Von einem Logistiker gebaut — täglich im echten Speditionsbetrieb" wie
     zwei zerrissene Spalten aus. Als Fließtext bricht es normal um. */
  .hero-trust span{display:block;font-size:14px;line-height:1.5;color:var(--slate)}
  .hero-trust svg{color:var(--emerald);display:inline-block;vertical-align:-2px;margin-right:7px}

  /* hero savings card */
  .hv{position:relative;display:flex;justify-content:center}
  .hv-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 44px 90px -46px rgba(18,23,43,0.5);padding:24px;width:100%;max-width:420px;animation:floaty 6s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .hv-head{display:flex;align-items:center;gap:9px;font-weight:600;font-size:0.88rem;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
  .hv-head .dot{width:9px;height:9px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 4px var(--emerald-soft)}
  .hv-head .lbl{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--slate-2)}
  .hv-line{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:0.9rem;color:var(--ink-2)}
  .hv-line .before{color:var(--slate-2);text-decoration:line-through;font-family:var(--font-mono);font-size:0.85rem}
  .hv-line .after{font-family:var(--font-mono);font-weight:700;color:var(--emerald-ink)}
  .hv-foot{margin-top:14px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:12px}
  .hv-foot>div{flex:1;background:var(--paper-soft);border-radius:12px;padding:13px 14px}
  .hv-foot b{display:block;font-family:var(--font-display);font-size:1.4rem;font-weight:600;letter-spacing:-0.01em}
  .hv-foot b.g{color:var(--emerald-ink)}
  .hv-foot span{font-size:11px;color:var(--slate)}
  .hv-badge{position:absolute;bottom:-14px;right:0;background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:11.5px;font-weight:700;padding:9px 14px;border-radius:11px;box-shadow:0 20px 44px -20px rgba(18,23,43,0.65)}

  /* SECTIONS */
  section.block{padding:112px 0}
  .block.soft{background:var(--paper-soft)}
  /*
    DIE PAKET-MARKE.

    Warum es sie gibt: Die Preistabelle listete jede Funktion samt Erklaerung —
    376 Woerter in drei Karten, einzelne Punkte mit 39 Woertern. Wer dort liest,
    liest nicht die Abschnitte darueber, in denen dasselbe schon erklaert wird.

    Die Erklaerung gehoert in den Abschnitt, die Zugehoerigkeit daneben. Diese
    Marke sagt, in welchem Paket das Gezeigte enthalten ist — damit niemand erst
    in der Tabelle nachschlagen muss, und damit kein Abschnitt etwas verspricht,
    das im guenstigsten Paket gar nicht drin ist. Genau das war naemlich der
    Fall: „Wo ist meine Ware?" warb mit automatischen Mails, die es erst ab
    Wachstum gibt.
  */
  .inpaket{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:5px 12px;border-radius:20px;background:var(--brand-soft);color:var(--brand-ink,var(--brand));font-size:12px;font-weight:600;letter-spacing:0.01em}
  .inpaket.hoch{background:var(--ink);color:#fff}
  .sec-head .inpaket{margin-top:18px}
  .sec-head{max-width:720px;margin-bottom:52px}
  .sec-head h2{font-size:clamp(2rem,4vw,3.05rem);margin:16px 0 16px}
  .sec-head p{color:var(--slate);font-size:1.1rem}

  /* USP */
  /* FRISTEN — fuenf Karten mit farbiger Kante nach Dringlichkeit */
  .frist-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:26px}
  .frist{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:14px;padding:22px 20px}
  .frist.r{border-top-color:#E5484D}
  .frist.o{border-top-color:#F5A524}
  .frist.b{border-top-color:var(--brand)}
  .frist h3{font-size:1.02rem;margin-bottom:7px}
  .frist p{color:var(--slate);font-size:0.9rem}
  .frist-note{background:var(--ink);color:#fff;border-radius:16px;padding:24px 30px;font-size:1rem;line-height:1.6}
  .frist-note b{color:#fff}
  @media(max-width:1000px){.frist-grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:640px){.frist-grid{grid-template-columns:1fr 1fr;gap:12px}.frist-note{padding:20px 22px;font-size:0.94rem}}

  .usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .usp{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 28px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
  .usp:hover{transform:translateY(-5px);box-shadow:0 32px 64px -42px rgba(18,23,43,0.42);border-color:#d7ddef}
  .usp .icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);margin-bottom:18px}
  .usp h3{font-size:1.14rem;margin-bottom:9px}
  .usp p{color:var(--slate);font-size:0.94rem}
  .usp .win{margin-top:14px;font-size:0.85rem;font-weight:600;color:var(--emerald-ink);display:flex;gap:7px;align-items:center}
  /* wide USP: Nutzerstruktur */
  .usp.wide{grid-column:1/-1}
  .usp.wide .whead{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
  .usp.wide .whead .icon{margin-bottom:0}
  .usp.wide h3{font-size:1.24rem;margin-bottom:6px}
  .usp.wide .lead{color:var(--slate);font-size:0.97rem;max-width:640px}
  .levels{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
  .lvl{border:1px solid var(--line);border-radius:14px;padding:20px 20px;background:#fbfbfe}
  .lvl .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:4px 10px;border-radius:20px;display:inline-block;margin-bottom:11px}
  .lvl h4{font-family:var(--font-display);font-size:1.02rem;font-weight:600;margin-bottom:7px}
  .lvl p{color:var(--slate);font-size:0.9rem;margin-bottom:13px}
  .avatars{display:flex;gap:6px;flex-wrap:wrap}
  .avatars span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:10.5px;font-weight:700;background:var(--brand-soft);color:var(--brand);border:1px solid #dbe3ff}
  .avatars span.adm{background:var(--ink);color:#fff;border-color:var(--ink)}
  .avatars span.more{background:transparent;color:var(--slate-2);border-style:dashed}
  .lvl-arrow{color:var(--slate-2);display:grid;place-items:center}
  @media(max-width:640px){.levels{grid-template-columns:1fr;gap:12px}.lvl-arrow{transform:rotate(90deg)}}

  /* DEMO */
  .tabs{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:22px}
  .tab{border:1px solid var(--line);background:#fff;padding:11px 19px;border-radius:12px;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--slate);display:flex;gap:9px;align-items:center;transition:all .2s var(--ease)}
  .tab:hover{border-color:var(--slate-2)}
  .tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
  .tab .dt{width:7px;height:7px;border-radius:50%;background:var(--brand)}
  .panel{display:none}
  .panel.active{display:block;animation:fade .4s var(--ease)}

  /*
    DIE LAUFENDE DEMO.

    Warum keine Videodatei: Die Bildschirme der App sind Schrift und feine
    Linien. Video verwischt beides, waere mehrere Megabyte schwer (die ganze
    Seite ist heute unter einem), und viele Telefone spielen es nicht von selbst
    ab — der Besucher saehe einen Abspielknopf statt der Demo. Ausserdem zeigte
    eine echte Aufnahme echte Kundennamen.

    Die vier Bildschirme lagen ohnehin schon fertig in der Seite und wurden per
    Klick umgeschaltet. Sie laufen jetzt von selbst ab, mit einem Mauszeiger, der
    sich durch die Anwendung bewegt wie ein Mitarbeiter: auf eine Sendung
    klicken, dort auf „Dokumente", am Ende die Sicht des Kunden.

    Der Zeiger ist der ganze Trick. Ohne ihn wirkt es wie eine Diaschau, mit ihm
    wie eine Bildschirmaufnahme.
  */
  .demo-buehne{position:relative}
  .demo-maus{position:absolute;top:0;left:0;width:22px;height:22px;z-index:6;pointer-events:none;opacity:0;
    transition:transform 1.05s cubic-bezier(.33,.9,.35,1), opacity .3s;
    filter:drop-shadow(0 2px 5px rgba(18,23,43,0.35))}
  .demo-buehne.laeuft .demo-maus{opacity:1}
  /* Der Klickring: kurz aufblitzen, wo der Zeiger gedrueckt hat. */
  .demo-klick{position:absolute;width:34px;height:34px;margin:-6px 0 0 -6px;border-radius:50%;
    border:2px solid var(--brand);opacity:0;z-index:5;pointer-events:none}
  .demo-klick.an{animation:klickring .55s ease-out}
  @keyframes klickring{
    0%{opacity:.85;transform:scale(.35)}
    100%{opacity:0;transform:scale(1.25)}
  }

  /*
    Die Reiter zeigen nur noch an, welcher Bildschirm laeuft — anklickbar sind
    sie nicht mehr. Der Balken darunter laeuft mit der Zeit voll, damit der
    Besucher sieht, dass es weitergeht und wie lange noch.
  */
  .tabs.laeuft{pointer-events:none}
  .tabs.laeuft .tab{position:relative;overflow:hidden}
  .tabs.laeuft .tab .fuell{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--brand);border-radius:2px}
  .tabs.laeuft .tab.active .fuell{width:100%;transition:width linear}

  /* Kleine Bewegungen IN den Bildschirmen, damit es lebt statt steht. */
  @keyframes meldungRein{
    0%{opacity:0;transform:translateY(-7px) scale(.97)}
    100%{opacity:1;transform:none}
  }
  .demo-meldung{position:absolute;top:60px;right:20px;z-index:4;display:flex;align-items:center;gap:9px;
    background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:11px;
    box-shadow:0 18px 40px -20px rgba(18,23,43,0.6);opacity:0;pointer-events:none;max-width:78%}
  .demo-meldung.an{animation:meldungRein .45s var(--ease) forwards}
  .demo-meldung .pkt{width:7px;height:7px;border-radius:50%;background:#34D399;flex:0 0 auto}

  /* ── WAS DIE DEMO VON EINER DIASHOW UNTERSCHEIDET ──────────────────────────
     Ein Bildwechsel alle vier Sekunden ist eine Diashow. Nutzung sieht anders
     aus: Man scrollt, Zahlen laufen hoch, ein Balken fuellt sich, eine Meldung
     faehrt ein, das Schiff bewegt sich. Genau das passiert hier — je Bildschirm
     eine eigene kleine Szene, die startet, wenn er an der Reihe ist.
     ────────────────────────────────────────────────────────────────────────── */

  /*
    EIN FENSTER MIT FESTER HOEHE.

    Der erste Entwurf stapelte vier Kaesten untereinander, jeder so hoch wie sein
    Inhalt. Wer die Demo sehen wollte, musste die Seite mitscrollen — und sah nie
    alles auf einmal. Das ist der Grund fuer die feste Hoehe: Der Ausschnitt
    passt ins Bild, und gescrollt wird INNERHALB des Fensters, so wie ein
    Mitarbeiter es auch tut.

    62vh, hoechstens 560 Pixel: hoch genug fuer eine Kopfzeile plus Inhalt,
    niedrig genug, dass daneben noch Ueberschrift und Text ins Bild passen.
  */
  /*
    Die Laufzeile statt der vier Knoepfe.

    Vier Knoepfe nebeneinander sagen „hier gibt es vier getrennte Bilder" —
    genau der Eindruck, der nicht entstehen sollte. Eine Zeile, die mitlaeuft und
    benennt, was gerade zu sehen ist, sagt stattdessen „das hier ist EIN
    Vorgang"; der Balken daneben zeigt, dass es weitergeht.
  */
  .demo-zeile{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:14px;font-weight:600;color:var(--slate)}
  .demo-zeile .pkt{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto;animation:pulsPkt 2s ease-in-out infinite}
  @keyframes pulsPkt{0%,100%{opacity:1}50%{opacity:.35}}
  .demo-zeile .txt{min-width:0;flex:0 1 auto;transition:opacity .25s}
  .demo-zeile .txt.wechselt{opacity:0}
  .demo-zeile .bahn{flex:1 1 auto;height:3px;border-radius:3px;background:var(--line);overflow:hidden;min-width:40px}
  .demo-zeile .bahn i{display:block;height:100%;width:0;background:var(--brand);border-radius:3px}
  @media(max-width:640px){ .demo-zeile{font-size:12.5px;gap:9px} }

  /*
    Das Fenster. Hoeher als der erste Versuch (62vh/560 waren zu knapp): Der
    Inhalt wurde mitten in einer Kachel gekappt — Beschriftung oben, Zahl
    darunter, Rahmen abgeschnitten. Das liest sich als Fehler, nicht als
    Ausschnitt.
  */
  .panel .rx{height:min(74vh,660px);overflow:hidden;position:relative}
  .panel .rx-body{will-change:transform}

  /*
    Der Verlauf an der Unterkante.

    Eine harte Kante sagt „hier ist es kaputt", ein weicher Auslauf sagt „hier
    geht es weiter" — und genau das stimmt ja auch, es wird gleich
    weitergescrollt. Zwei Zeilen, die den Unterschied zwischen abgeschnitten und
    abgeblendet machen.
  */
  .panel .rx::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:56px;
    background:linear-gradient(to bottom, rgba(241,244,251,0) 0%, rgba(241,244,251,.92) 78%, #F1F4FB 100%);
    pointer-events:none;z-index:2;
  }
  /*
    Die Erklaertexte unter den vier Kaesten entfallen — sie gehoerten zur alten
    Aufteilung. Was zu sehen ist, sagt jetzt die Laufzeile darueber.
  */
  .panel .cap{display:none}

  .panel.spielt .rx{animation:rxRein .45s var(--ease) both}
  @keyframes rxRein{from{opacity:0}to{opacity:1}}

  /*
    Das Scrollen im Fenster. Die Strecke ist je Bildschirm anders — die
    Uebersicht hat eine Karte darunter, die Sendung eine lange Akte. Der Wert
    kommt deshalb aus dem Skript als --scroll, nicht fest aus dem Stilblatt.
  */
  .panel.spielt .rx-body{animation:rxScroll var(--scrollzeit,4s) 1.2s var(--ease) both}
  @keyframes rxScroll{
    0%,14%{transform:translateY(0)}
    100%{transform:translateY(var(--scroll,-120px))}
  }

  /*
    Die Kennzahlen zaehlen hoch. Der Zaehler steht im Skript; hier bekommt die
    Ziffer nur den kurzen Sprung, den eine sich aendernde Zahl im Auge macht.
  */
  .panel.spielt .rx-kpi .n{animation:zahlTick .45s var(--ease) both}
  @keyframes zahlTick{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
  .rx-kpi .n{display:inline-block}

  /*
    Die Schiffe kriechen ueber die Karte — langsam, wie in echt.

    Nur die mit Signal. `.sh.grey` sind in diesem Nachbau die Schiffe, deren
    Position aelter als sechs Stunden ist; die stehen in der Anwendung still und
    muessen es hier auch. Eine Demo, in der ein Schiff ohne Position faehrt,
    behauptet etwas, das die Software nicht tut.
  */
  .panel.spielt .rx-map .sh:not(.grey){animation:schiffZieht 11s linear infinite alternate both}
  .panel.spielt .rx-map .sh:not(.grey):nth-of-type(2n){animation-duration:14s}
  .panel.spielt .rx-map .sh:not(.grey):nth-of-type(3n){animation-duration:17s}
  @keyframes schiffZieht{
    0%{transform:translate(0,0)}
    50%{transform:translate(9px,-4px)}
    100%{transform:translate(18px,-7px)}
  }

  /* Der Sendungsfortschritt laeuft voll, statt schon voll dazustehen. */
  .panel.spielt .rx-prog > span,
  .panel.spielt .rx-prog i{animation:balkenVoll 1.9s .5s var(--ease) both;transform-origin:left center}
  @keyframes balkenVoll{from{transform:scaleX(.18)}to{transform:scaleX(1)}}

  /* Dokumente trudeln nacheinander ein, nicht alle auf einmal. */
  .panel.spielt .rx-doc{animation:zeileRein .42s var(--ease) both}
  .panel.spielt .rx-doc:nth-of-type(1){animation-delay:.7s}
  .panel.spielt .rx-doc:nth-of-type(2){animation-delay:.95s}
  .panel.spielt .rx-doc:nth-of-type(3){animation-delay:1.2s}
  .panel.spielt .rx-doc:nth-of-type(4){animation-delay:1.45s}
  .panel.spielt .rx-doc:nth-of-type(5){animation-delay:1.7s}
  @keyframes zeileRein{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}

  /*
    Der Reiter IN der Anwendung wandert mit, wenn der Zeiger ihn trifft. Das ist
    die Bewegung, die den Eindruck macht, dass jemand wirklich klickt — nicht der
    Bildwechsel, sondern dass die Oberflaeche darauf antwortet.
  */
  .rx-tabs span{transition:background .25s, color .25s}

  /*
    Wer im Betriebssystem „Bewegung reduzieren" eingeschaltet hat, bekommt keine
    Animation — das ist kein Komfort, sondern eine Zugaenglichkeitsregel: Bewegte
    Oberflaechen loesen bei manchen Menschen Schwindel aus. Fuer sie bleiben die
    Reiter anklickbar, damit die vier Bildschirme erreichbar bleiben.
  */
  @media(prefers-reduced-motion:reduce){
    .demo-maus,.demo-klick,.demo-meldung{display:none}
    .panel.spielt *{animation:none!important}
    .tabs.laeuft{pointer-events:auto}
    .tabs.laeuft .tab .fuell{display:none}
  }
  @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .cap{margin-top:20px;display:flex;gap:14px;align-items:flex-start;max-width:800px}
  .cap .ci{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-top:2px}
  .cap p{color:var(--slate);font-size:0.99rem}
  .cap p b{color:var(--ink)}

  .mk-frame{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 44px 90px -52px rgba(18,23,43,0.45)}
  .mk-chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#F7F8FC;border-bottom:1px solid var(--line)}
  .mk-dot{width:11px;height:11px;border-radius:50%}
  .mk-url{margin-left:14px;font-family:var(--font-mono);font-size:12px;color:var(--slate-2);background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px 14px}
  .mk-scroll{overflow-x:auto}
  .mk-inner{min-width:880px}
  /* app chrome */
  .ap-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
  .ap-logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:15px}
  .ap-logo .lg{width:25px;height:25px;border-radius:7px;background:var(--brand);display:grid;place-items:center}
  .ap-sel{font-size:11.5px;color:var(--slate);border:1px solid var(--line);border-radius:8px;padding:6px 11px}
  .ap-right{margin-left:auto;display:flex;gap:9px;align-items:center}
  .ap-search{font-size:12px;color:var(--slate-2);border:1px solid var(--line);border-radius:8px;padding:7px 15px;min-width:190px}
  .ap-av{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
  .kpis{display:flex;gap:11px;padding:18px 20px}
  .kpi{flex:1;border:1px solid var(--line);border-radius:12px;padding:14px 15px}
  .kpi .l{font-family:var(--font-mono);font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:var(--slate-2)}
  .kpi .n{font-family:var(--font-display);font-size:1.6rem;font-weight:600;margin-top:5px}
  .kpi .n small{font-size:0.68rem;color:var(--slate-2);font-family:var(--font-body);font-weight:500}
  .kpi.dark{background:var(--ink);border-color:var(--ink)} .kpi.dark .l{color:#8b90a8} .kpi.dark .n{color:#fff}
  .kpi.blue{background:var(--brand-soft);border-color:#dbe3ff} .kpi.blue .n{color:var(--brand)}
  .kpi.green{background:var(--emerald-soft);border-color:#cdeede} .kpi.green .n{color:var(--emerald-ink)}
  .kpi.amber{background:var(--amber-soft);border-color:#f6e4bd} .kpi.amber .n{color:#c67c0a}
  .split{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;padding:2px 20px 20px}
  .box{border:1px solid var(--line);border-radius:12px;padding:16px 17px}
  .box h5{font-family:var(--font-display);font-size:0.95rem;font-weight:600;margin-bottom:14px}
  .bar-row{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-size:11.5px;color:var(--slate)}
  .bar-row .nm{width:52px;flex:0 0 auto;color:var(--ink-2);font-weight:600}
  .bar{flex:1;height:8px;border-radius:6px;background:var(--paper-soft);overflow:hidden}
  .bar i{display:block;height:100%;border-radius:6px;background:var(--brand)}
  .bar-row .v{font-family:var(--font-mono);font-size:11px;color:var(--slate-2);width:26px;text-align:right}
  .eta{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f0f1f6;font-size:11.5px}
  .eta:last-child{border-bottom:0}
  .eta .d{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
  .eta .co{font-weight:600;color:var(--ink)}
  .eta .rt{color:var(--slate-2);margin-left:auto;font-family:var(--font-mono);font-size:10.5px}
  /* list */
  .filters{display:flex;gap:7px;padding:4px 20px 14px;align-items:center}
  .fp{padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--slate);border:1px solid var(--line)}
  .fp.on{background:var(--brand);color:#fff;border-color:var(--brand)}
  .fp.ghost{margin-left:auto;background:var(--ink);color:#fff;border-color:var(--ink)}
  .th,.tr{display:grid;grid-template-columns:0.5fr 1.7fr 1.3fr 0.9fr 0.9fr 1.1fr;gap:12px;align-items:center;padding:12px 20px}
  .th{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--slate-2);border-top:1px solid var(--line)}
  .tr{border-top:1px solid var(--line);font-size:12.5px}
  .tr .co{font-weight:600;font-size:13px}
  .tr .sub{font-size:11px;color:var(--slate-2)}
  .tr .mut{color:var(--slate)}
  .dir{font-family:var(--font-mono);font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:5px}
  .dir.imp{background:var(--brand-soft);color:var(--brand)}
  .dir.exp{background:var(--coral-soft);color:#d1502a}
  .st{display:inline-block;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:20px}
  .st.wait{background:#F1F2F7;color:var(--slate)}
  .st.roll{background:var(--brand-soft);color:var(--brand)}
  .st.late{background:var(--amber-soft);color:#c67c0a}
  .st.done{background:var(--emerald);color:#fff}
  /* portal */
  .pt-top{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);background:#0F1B33}
  .pt-top .brandbox{width:26px;height:26px;border-radius:7px;background:#fff;color:#0F1B33;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:13px}
  .pt-top .nm{color:#fff;font-family:var(--font-display);font-weight:600;font-size:14.5px}
  .pt-top .tagp{color:#9BA8C4;font-size:11.5px}
  .pt-top .out{margin-left:auto;color:#9BA8C4;font-size:11.5px}
  .pt-wel{padding:18px 20px 6px}
  .pt-wel h5{font-family:var(--font-display);font-size:1.1rem;font-weight:600}
  .pt-wel p{font-size:12px;color:var(--slate)}
  .pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 20px 20px}
  .pcard{border:1px solid var(--line);border-radius:12px;padding:15px 16px}
  .pcard .hd{display:flex;align-items:center;gap:8px;margin-bottom:9px}
  .pcard .ref{font-family:var(--font-mono);font-size:10.5px;color:var(--slate-2)}
  .pcard h6{font-family:var(--font-display);font-size:0.98rem;font-weight:600;margin-bottom:4px}
  .pcard .rt{font-size:11.5px;color:var(--slate);margin-bottom:12px}
  .prog{display:flex;align-items:center;gap:5px;margin-bottom:12px}
  .prog i{height:5px;flex:1;border-radius:4px;background:var(--paper-soft)}
  .prog i.on{background:var(--brand)}
  .prog i.done{background:var(--emerald)}
  .pcard .docs{display:flex;gap:6px;flex-wrap:wrap}
  .doc{font-size:10px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;color:var(--slate);display:flex;gap:5px;align-items:center}
  .pcard .etaline{font-size:11.5px;color:var(--ink-2);margin-bottom:10px}
  .pcard .etaline b{color:var(--brand)}

  /* live vessel tracking banner */
  .lvt{margin:2px 20px 16px;border:1px solid #dbe3ff;background:var(--brand-soft);border-radius:12px;padding:13px 15px;display:flex;align-items:center;gap:12px}
  .lvt .ic{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;flex:0 0 auto}
  .lvt .t{font-weight:600;font-size:12.5px}
  .lvt .s{font-size:11px;color:var(--slate)}
  .lvt .btn-s{margin-left:auto;background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:8px 13px;border-radius:8px;letter-spacing:0.03em}
  .lvt-ok{margin:-8px 20px 16px;background:var(--emerald-soft);border:1px solid #cdeede;border-radius:9px;padding:8px 13px;font-size:11.5px;color:var(--emerald-ink);font-weight:600}
  /* customer group + shipment cards */
  .cust-hd{display:flex;align-items:center;gap:11px;padding:6px 20px 12px}
  .cust-hd .av{width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
  .cust-hd .nm{font-family:var(--font-display);font-size:1.05rem;font-weight:600}
  .cust-hd .cnt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate-2)}
  .scards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 20px 20px}
  .scard{border:1px solid var(--line);border-radius:13px;padding:15px 16px;background:#fbfbfe}
  .scard .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
  .scard .box{width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center}
  .scard .mode{font-family:var(--font-mono);font-size:9px;letter-spacing:0.07em;text-transform:uppercase;color:var(--slate-2)}
  .scard .proj{font-size:12px;color:var(--slate);margin:6px 0 2px}
  .scard .proj b{color:var(--ink);font-family:var(--font-display);font-size:0.98rem}
  .scard .meta{display:flex;gap:14px;border-top:1px solid var(--line);margin-top:12px;padding-top:10px;flex-wrap:wrap}
  .scard .meta div .l{font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--slate-2)}
  .scard .meta div .v{font-size:11.5px;font-weight:600}
  .scard .meta .eta .v{color:var(--brand)}
  /* stepper + tracking */
  .sd-cust{margin:16px 20px 0;background:var(--ink);color:#fff;border-radius:12px;padding:13px 16px;display:flex;align-items:center;gap:11px}
  .sd-cust .av{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:11px;font-weight:700}
  .sd-cust .l{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:#9BA8C4}
  .sd-cust .n{font-family:var(--font-display);font-weight:600;font-size:0.95rem}
  .sd-back{padding:12px 20px 4px;font-size:12px;color:var(--slate)}
  .sd-box{margin:6px 20px 14px;border:1px solid var(--line);border-radius:13px;padding:18px 18px 14px}
  .sd-box .l{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate-2);margin-bottom:16px}
  .steps-line{display:flex;align-items:flex-start;justify-content:space-between;position:relative}
  .stp{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
  .stp .c{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid var(--line);color:var(--slate-2);font-size:12px}
  .stp.on .c{background:var(--ink);border-color:var(--ink);color:#fff}
  .stp .t{font-size:10px;margin-top:7px;color:var(--slate-2);text-align:center;line-height:1.3}
  .stp.on .t{color:var(--ink);font-weight:600}
  .steps-line::before{content:"";position:absolute;top:14px;left:8%;right:8%;height:1.5px;background:var(--line);z-index:1}
  .steps-line .fill{position:absolute;top:14px;left:8%;width:36%;height:1.5px;background:var(--ink);z-index:1}
  .eta-b{margin-top:16px;background:var(--emerald-soft);border-radius:9px;padding:9px 13px;display:flex;align-items:center;font-size:11.5px;color:var(--emerald-ink);font-weight:600}
  .eta-b .dt{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--slate)}
  .vmap{margin:0 20px 20px;border-radius:13px;overflow:hidden;background:#0F1B33}
  .vmap .vh{display:flex;align-items:center;gap:10px;padding:12px 15px}
  .vmap .vh .ic{width:26px;height:26px;border-radius:8px;background:var(--brand);display:grid;place-items:center}
  .vmap .vh .l{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:#9BA8C4}
  .vmap .vh .n{color:#fff;font-weight:600;font-size:12.5px}
  .vmap .vh .live{background:rgba(15,185,129,.2);color:#5FE3B0;font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px}
  .vmap .vh .upd{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;color:#9BA8C4}
  /* customs + docs */
  .cust-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
  .cf .l{font-family:var(--font-mono);font-size:9px;letter-spacing:0.07em;text-transform:uppercase;color:var(--slate-2);margin-bottom:5px}
  .cf .i{border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:12px;background:#fbfbfe}
  .cf .i.ph{color:var(--slate-2)}
  .docgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:6px}
  .dslot{border:1px solid var(--line);border-radius:11px;padding:13px 13px 12px;min-height:96px;display:flex;flex-direction:column}
  .dslot .l{font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--slate-2)}
  .dslot .n{font-size:12px;font-weight:600;margin-top:4px}
  .dslot .file{margin-top:auto;background:var(--paper-soft);border-radius:7px;padding:6px 9px;font-size:10px;color:var(--slate);display:flex;align-items:center;gap:6px}
  .dslot .none{margin-top:auto;font-size:10px;color:var(--slate-2)}
  .dslot .plus{margin-left:auto;color:var(--slate-2);font-size:14px}
  .dfile{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:flex;align-items:center;gap:10px;font-size:11.5px}
  .dfile .ic{width:24px;height:24px;border-radius:7px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
  .dfile .dt{font-family:var(--font-mono);font-size:9.5px;color:var(--slate-2)}

  /* FOUNDER */
  .founder{background:var(--ink);color:#fff}
  .founder-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:52px;align-items:center}
  .founder-photo{position:relative}
  .founder-photo img{width:100%;max-width:330px;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 35%;border-radius:20px;display:block;border:1px solid #2A3050}
  .founder-photo .tagf{position:absolute;bottom:-14px;left:18px;background:var(--brand);color:#fff;font-size:12px;font-weight:700;padding:9px 15px;border-radius:11px;box-shadow:0 18px 40px -18px rgba(47,107,255,.8)}
  .founder .eyebrow{color:#8FA9FF}.founder .eyebrow::before{background:#8FA9FF}
  .founder h2{color:#fff;font-size:clamp(1.9rem,3.8vw,2.85rem);margin:16px 0 20px}
  .founder h2 span{color:#8FA9FF}
  .founder p{color:#AEB4CC;font-size:1.03rem;margin-bottom:15px}
  .founder p b{color:#fff;font-weight:600}
  .founder-meta{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:24px;border-top:1px solid #2A3050;flex-wrap:wrap}
  .founder-meta .who b{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:#fff}
  .founder-meta .who span{font-size:0.86rem;color:#9BA2BC}
  .li-btn{margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;padding:11px 18px;border-radius:10px;transition:transform .2s var(--ease)}
  .li-btn:hover{transform:translateY(-2px)}

  /* PAPIERAKTE */
  .paper-cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch}
  .pcol{border-radius:18px;padding:30px 28px;display:flex;flex-direction:column}
  .pcol .ptag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.09em;text-transform:uppercase;display:inline-block;padding:5px 11px;border-radius:20px;margin-bottom:16px;align-self:flex-start}
  .pcol h3{font-size:1.28rem;margin-bottom:6px}
  .pcol .psub{font-size:0.92rem;margin-bottom:20px}
  .pcol ul{list-style:none;display:flex;flex-direction:column;gap:11px;flex:1}
  .pcol li{display:flex;gap:11px;align-items:flex-start;font-size:0.95rem;line-height:1.45}
  .pcol li .m{flex:0 0 auto;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;margin-top:2px}
  .pcol .pfoot{margin-top:22px;padding-top:16px;border-top:1px dashed rgba(0,0,0,.14);font-size:0.86rem}
  /* links: Papier */
  .pcol.old{background:#F6F3EC;border:1px solid #E6DFD1}
  .pcol.old .ptag{background:#EDE6D6;color:#8A7A5A}
  .pcol.old .psub{color:#7E735F}
  .pcol.old li{color:#6B6250}
  .pcol.old li .m{background:#E6DFD1;color:#8A7A5A}
  .pcol.old .pfoot{color:#8A7A5A}
  /* rechts: digital */
  .pcol.new{background:#fff;border:1px solid var(--line);box-shadow:0 34px 70px -50px rgba(18,23,43,.4)}
  .pcol.new .ptag{background:var(--brand-soft);color:var(--brand)}
  .pcol.new .psub{color:var(--slate)}
  .pcol.new li{color:var(--ink-2)}
  .pcol.new li .m{background:var(--emerald-soft);color:var(--emerald-ink)}
  .pcol.new .pfoot{border-top-color:var(--line);color:var(--slate)}
  .pcmp-arrow{display:grid;place-items:center;color:var(--brand)}
  /* ZIELGRUPPEN — zwei gleichwertige Spalten, sonst dieselbe Karte wie oben.
     Keine "besser/schlechter"-Gegenüberstellung: Spedition und Handelsunternehmen
     sind zwei Wege in dasselbe Produkt, nicht Vorher und Nachher. */
  .who-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
  .pcol.trade .ptag{background:var(--emerald-soft);color:var(--emerald-ink)}
  .who-note{margin-top:26px;font-size:0.9rem;color:var(--slate);text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
  .pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
  .pstat b{display:block;font-family:var(--font-display);font-size:1.75rem;font-weight:600;letter-spacing:-0.02em;color:var(--brand)}
  .pstat span{font-size:0.9rem;color:var(--slate);display:block;margin-top:4px}
  .pnote{margin-top:20px;font-size:0.86rem;color:var(--slate-2)}
  /* Chat in der Demo */
  .chatbox{margin:0 20px 20px;border:1px solid var(--line);border-radius:13px;padding:15px 16px}
  .chatbox .ch{display:flex;align-items:center;gap:9px;margin-bottom:13px}
  .chatbox .ch .l{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate-2)}
  .chatbox .ch .cnt{margin-left:auto;font-size:10px;color:var(--slate-2)}
  .msg{display:flex;gap:9px;margin-bottom:10px}
  .msg .av{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:9px;font-weight:700;flex:0 0 auto;background:var(--ink);color:#fff}
  .msg.cust .av{background:var(--brand-soft);color:var(--brand)}
  .msg .bub{background:var(--paper-soft);border-radius:9px;padding:8px 11px;font-size:11px;line-height:1.45;max-width:78%}
  .msg.cust .bub{background:var(--brand-soft)}
  .msg .who{font-weight:700;font-size:9.5px;color:var(--slate-2);display:block;margin-bottom:2px}
  .chat-in{border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:10.5px;color:var(--slate-2);margin-top:12px;display:flex;align-items:center}
  .chat-in .snd{margin-left:auto;background:var(--brand);color:#fff;font-size:9.5px;font-weight:700;padding:5px 10px;border-radius:6px}

  /* PORTAL HIGHLIGHT */
  .hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
  .hl-copy h2{font-size:clamp(1.9rem,3.7vw,2.8rem);margin:16px 0 18px}
  .hl-copy p{color:var(--slate);font-size:1.05rem;margin-bottom:16px}
  .hl-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:22px}
  .hl-list li{display:flex;gap:12px;align-items:flex-start;font-size:0.99rem}
  .hl-list .dot{flex:0 0 auto;width:23px;height:23px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:12px;margin-top:2px}
  .hl-vis{background:var(--ink);border-radius:20px;padding:34px 32px;color:#fff}
  .hl-vis .big{font-family:var(--font-display);font-size:2.5rem;font-weight:600;letter-spacing:-0.02em;line-height:1.1}
  .hl-vis .big span{color:#8FA9FF}
  .hl-vis p{color:#AEB4CC;margin-top:14px;font-size:0.97rem}
  .hl-vis .sep{height:1px;background:#2A3050;margin:24px 0}
  .hl-vis .mini{display:flex;gap:20px;flex-wrap:wrap}
  .hl-vis .mini div b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:600}
  .hl-vis .mini div span{font-size:12px;color:#9BA2BC}

  /* CALC + PRICING */
  .calc-shell{display:grid;grid-template-columns:1.02fr 0.98fr;border-radius:20px;overflow:hidden;box-shadow:0 44px 90px -52px rgba(18,23,43,0.45);border:1px solid var(--line)}
  .calc-in{background:#fff;padding:44px 40px}
  .calc-in h3{font-size:1.4rem;margin-bottom:6px}
  .calc-in .sub{color:var(--slate);font-size:0.94rem;margin-bottom:30px}
  .field{margin-bottom:26px}
  .field label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:0.9rem;font-weight:600;margin-bottom:11px;line-height:1.35}
  .field label .val{font-family:var(--font-mono);color:var(--brand);font-size:0.95rem;white-space:nowrap;flex:0 0 auto;margin-left:12px}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--paper-soft);outline:none;cursor:pointer;border:1px solid var(--line)}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--brand);border:3px solid #fff;cursor:pointer;box-shadow:0 2px 10px rgba(47,107,255,0.5);transition:transform .15s}
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
  input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--brand);border:3px solid #fff;cursor:pointer}
  input[type=range]:focus-visible{box-shadow:0 0 0 3px var(--brand-soft)}
  .rmeta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--slate-2);margin-top:7px}
  .calc-out{background:linear-gradient(150deg,#2F6BFF 0%, #1E54E8 55%, #163fc4 100%);color:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
  .calc-out .k{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:#c3d0ff}
  .calc-out .big{font-family:var(--font-display);font-weight:600;letter-spacing:-0.03em;font-size:clamp(2.6rem,6vw,3.9rem);line-height:1;margin:12px 0 4px}
  .calc-out .per{color:#c3d0ff;font-size:0.92rem;margin-bottom:26px}
  .brk{border-top:1px solid rgba(255,255,255,0.22);padding-top:20px;display:flex;flex-direction:column;gap:12px}
  .brk .row{display:flex;justify-content:space-between;font-size:0.92rem}
  .brk .row span:first-child{color:#c3d0ff}
  .brk .row span:last-child{font-family:var(--font-mono)}
  .brk .row.hi span:last-child{font-weight:700}
  .calc-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
  /* ckpi und nicht kpi: Die Klasse .kpi ist auf dieser Seite schon vergeben und
     steht in der Dunkelmodus-Härtung, die alle weißen Karten auf #fff zwingt —
     mit !important. Meine blauen Kästen erbten dadurch weißen Hintergrund, und
     der weiße Wert darin war unsichtbar. Auf dem iPhone standen nur die grauen
     Beschriftungen da. Eigener Name statt Kampf gegen !important. */
  .calc-kpi .ckpi{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.22);border-radius:12px;padding:13px 12px}
  .calc-kpi .ckpi b{display:block;font-family:var(--font-display);font-size:1.4rem;font-weight:600;letter-spacing:-0.02em;line-height:1.15}
  .calc-kpi .ckpi span{display:block;margin-top:3px;font-size:11.5px;line-height:1.35;color:#c3d0ff}
  .calc-note{margin-top:16px;background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.28);border-radius:12px;padding:13px 15px}
  .calc-note b{display:block;font-size:0.95rem;font-weight:600}
  .calc-note span{display:block;margin-top:2px;font-size:12px;color:#c3d0ff}
  .planbox{margin-top:22px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.22);border-radius:13px;padding:15px 17px;display:flex;align-items:center;gap:13px}
  .planbox .pl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:#c3d0ff}
  .planbox b{font-family:var(--font-display);font-size:1.16rem;font-weight:600;display:block}
  .planbox .pr{margin-left:auto;text-align:right}
  .planbox .pr b{font-size:1.4rem}
  .planbox .pr span{font-size:11px;color:#c3d0ff}
  .disc{font-size:11.5px;color:#b0bcf0;margin-top:20px;line-height:1.55}

  .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:12px}
  .price-grid.three{grid-template-columns:repeat(3,1fr);gap:20px}
  .plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 24px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
  .plan:hover{transform:translateY(-5px);box-shadow:0 32px 64px -42px rgba(18,23,43,0.42)}
  .plan.best{border-color:var(--brand);box-shadow:0 32px 64px -44px rgba(47,107,255,0.6)}
  /* Verweis aus der Karte in den Abschnitt, der die Funktion wirklich erklaert.
     Die Karte nennt nur noch, der Abschnitt verkauft. */
  .plan-mehr{margin:14px 0 0;font-size:0.88rem}
  .plan-mehr a{color:var(--brand-ink);font-weight:600}
  .plan-mehr a:hover{text-decoration:underline}
  .plan .flag{position:absolute;top:-11px;left:24px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:0.02em}
  .plan h3{font-size:1.16rem;margin-bottom:4px}
  .plan .band{font-family:var(--font-mono);font-size:11.5px;color:var(--slate-2);margin-bottom:16px}
  .plan .price{font-family:var(--font-display);font-size:2.2rem;font-weight:600;letter-spacing:-0.02em;line-height:1}
  .plan .price small{font-family:var(--font-body);font-size:0.85rem;font-weight:500;color:var(--slate)}
  .plan .note{font-size:11.5px;color:var(--slate-2);margin:8px 0 18px}
  .plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;flex:1}
  /* Fließtext statt Flexbox — sonst reißt jede Zeile mit Fettdruck in zwei
     Spalten. Auf dem iPhone stand "Alle Dokumente an der Sendung" links und
     "inkl. Ihrem Angebot" rechts daneben. */
  .plan ul li{display:block;font-size:0.9rem;line-height:1.5;color:var(--ink-2)}
  .plan ul li svg{display:inline-block;vertical-align:-2px;margin-right:7px;flex:0 0 auto}
  .plan ul li svg{flex:0 0 auto;margin-top:3px;color:var(--brand)}
  .plan .pbtn{display:block;text-align:center;padding:12px;border-radius:10px;font-weight:600;font-size:14px;border:1.5px solid var(--line);color:var(--ink);transition:all .2s}
  .plan .pbtn:hover{border-color:var(--slate-2)}
  .plan.best .pbtn{background:var(--brand);color:#fff;border-color:var(--brand)}
  .plan.best .pbtn:hover{background:var(--brand-ink)}
  .price-foot{margin-top:26px;font-size:0.92rem;color:var(--slate);display:flex;gap:22px;flex-wrap:wrap}
  .price-foot span{display:inline-flex;gap:8px;align-items:center}
  .price-foot svg{color:var(--emerald)}

  /* Konditionen */
  .terms{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
  .term{border-left:2px solid var(--brand);padding-left:16px}
  .term b{display:block;font-family:var(--font-display);font-size:1.14rem;font-weight:600;margin-bottom:3px}
  .term span{font-size:0.88rem;color:var(--slate)}
  .price-note{margin-top:24px;font-size:0.9rem;color:var(--slate-2);max-width:720px}
  .adv{margin-top:6px;border-top:1px solid var(--line);padding-top:14px}
  .adv summary{list-style:none;cursor:pointer;font-size:0.88rem;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:9px;padding:6px 0}
  .adv summary::-webkit-details-marker{display:none}
  .adv summary .pl{width:16px;height:16px;position:relative;flex:0 0 auto}
  .adv summary .pl::before,.adv summary .pl::after{content:"";position:absolute;background:var(--brand);border-radius:2px}
  .adv summary .pl::before{top:7px;left:0;right:0;height:2px}
  .adv summary .pl::after{left:7px;top:0;bottom:0;width:2px;transition:opacity .25s}
  .adv[open] summary .pl::after{opacity:0}
  .advnote{font-size:11.5px;color:var(--slate-2);line-height:1.55;margin-top:12px}

  .pdots{display:none;justify-content:center;gap:8px;margin-top:4px}
  .pdots span{width:7px;height:7px;border-radius:50%;background:#cfd6e6;transition:all .25s var(--ease)}
  .pdots span.on{background:var(--brand);width:22px;border-radius:20px}

  /* FAQ */
  .faq-list{max-width:820px}
  .faq-list details{border-bottom:1px solid var(--line);padding:4px 0}
  .faq-list summary{list-style:none;cursor:pointer;padding:19px 4px;font-family:var(--font-display);font-weight:600;font-size:1.1rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq-list summary::-webkit-details-marker{display:none}
  .faq-list summary .pl{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .3s var(--ease)}
  .faq-list summary .pl::before,.faq-list summary .pl::after{content:"";position:absolute;background:var(--brand);border-radius:2px}
  .faq-list summary .pl::before{top:10px;left:2px;right:2px;height:2px}
  .faq-list summary .pl::after{left:10px;top:2px;bottom:2px;width:2px;transition:opacity .3s}
  .faq-list details[open] summary .pl{transform:rotate(90deg)}
  .faq-list details[open] summary .pl::after{opacity:0}
  .faq-list details p{color:var(--slate);font-size:0.99rem;padding:0 4px 20px;max-width:730px}

  /* CONTACT */
  .contact{background:var(--paper-warm);padding:112px 0}
  .contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:52px;align-items:start}
  .contact-copy h2{font-size:clamp(2rem,4vw,3rem);margin:16px 0 18px}
  .contact-copy p{color:var(--slate);font-size:1.06rem;margin-bottom:24px}
  .contact-points{list-style:none;display:flex;flex-direction:column;gap:14px}
  .contact-points li{display:flex;gap:12px;align-items:flex-start;font-size:0.98rem}
  .contact-points .dot{flex:0 0 auto;width:23px;height:23px;border-radius:50%;background:var(--emerald-soft);color:var(--emerald-ink);display:grid;place-items:center;font-size:12px;margin-top:2px}
  .form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 32px;box-shadow:0 34px 70px -46px rgba(18,23,43,0.4)}
  .lf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .lf{margin-bottom:14px;display:flex;flex-direction:column}
  .lf label{font-size:13px;font-weight:600;margin-bottom:6px}
  .form-card input,.form-card textarea,.form-card select{font-family:var(--font-body);font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;transition:border-color .2s, box-shadow .2s}
  .form-card input::placeholder,.form-card textarea::placeholder{color:var(--slate-2)}
  .form-card input:focus,.form-card textarea:focus,.form-card select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
  .form-card textarea{resize:vertical;min-height:86px}
  .fsub{width:100%;justify-content:center;margin-top:6px;cursor:pointer}
  .falt{text-align:center;font-size:13px;color:var(--slate);margin-top:13px}
  .falt a{color:var(--brand);font-weight:600}
  .hp{position:absolute;left:-9999px}

  /* FOOTER */
  footer{background:var(--ink);color:#fff;padding:60px 0 38px}
  .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid #2A3050}
  .foot-top .logo{margin-bottom:15px;color:#fff}
  .foot-brand p{color:#9BA2BC;font-size:0.94rem;max-width:300px}
  .foot-cols{display:flex;gap:64px;flex-wrap:wrap}
  .foot-col h4{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:#727a97;margin-bottom:15px}
  .foot-col a{display:block;color:#C3C8DB;font-size:0.94rem;margin-bottom:9px;transition:color .2s}
  .foot-col a:hover{color:#fff}
  .foot-legal{padding-top:22px;color:#9BA2BC;font-size:0.85rem;max-width:660px;line-height:1.6}
  .foot-legal b{color:#C3C8DB;font-weight:600}
  .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;color:#727a97;font-size:0.85rem}

  /* RESPONSIVE */
  /*
    980 — WIEDER, SEIT DER ANMELDEN-LINK IN DIE FUSSZEILE GEZOGEN IST.

    Mit ihm brauchte die Leiste 993 Pixel, der Umbruch lag deshalb eine Woche
    lang bei 1060. Ohne ihn sind es wieder 902 — bei 981 Pixeln Fensterbreite
    bleiben 23 Pixel Luft (siehe unten).

    MUSS MIT NAV_UMBRUCH IM SKRIPT UEBEREINSTIMMEN (siehe unten).
  */
  @media(max-width:980px){
    /*
      Die Navigation schaltet beim SELBEN Punkt um wie der Rest der Seite — und
      das ist gerade eben erreicht, nicht selbstverstaendlich.

      Mit zehn Eintraegen ging es nicht: Die Leiste brauchte 1126 Pixel, der
      Container gibt 1124 her. Sie passte bei KEINER Breite und brauchte
      voruebergehend einen eigenen Umbruch bei 1150. Seit „Fristen" und
      „Papierlos" nicht mehr im Menue stehen, sind es 902 Pixel.

      Bei 981 Pixeln — knapp ueber diesem Umbruch — bleiben davon 23 Pixel Luft.
      Das reicht, ist aber kein Polster: Ein weiterer Menuepunkt oder ein
      laengeres Wort sprengt es wieder. Wer hier etwas ergaenzt, misst nach.

      Beide Abschnitte gibt es weiterhin; man scrollt hin und findet sie im
      Fussbereich unter „Produkt".
    */
    .nav-links{display:none}
    .nav-links.open{display:flex;position:fixed;top:76px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;align-items:stretch;padding:18px 22px calc(28px + env(safe-area-inset-bottom));gap:4px;overflow-y:auto;z-index:60}
    .nav-links.open a{padding:15px 4px;font-size:17px;border-bottom:1px solid var(--line);color:var(--ink)}
    .nav-links.open a.nav-cta{margin-top:16px;text-align:center;border-bottom:0;padding:16px;font-size:16px}
    .nav-toggle{display:block}
    .hero{padding:118px 0 56px}
    .hero-inner{grid-template-columns:1fr;gap:44px}
    .hv{display:none}
    .usp-grid{grid-template-columns:1fr 1fr}
    .hl-grid{grid-template-columns:1fr;gap:36px}
    .paper-cmp{grid-template-columns:1fr;gap:14px}
    .who-grid{grid-template-columns:1fr;gap:14px}
    .pcmp-arrow{transform:rotate(90deg);padding:2px 0}
    .calc-shell{grid-template-columns:1fr}
    .price-grid,.price-grid.three{grid-template-columns:1fr 1fr}
    .terms{grid-template-columns:1fr 1fr;gap:22px}
    .contact-grid{grid-template-columns:1fr;gap:36px}
    .founder-grid{grid-template-columns:1fr;gap:34px}
    .pstats{grid-template-columns:1fr;gap:16px;text-align:left}
    .pcol{padding:24px 20px}
    .founder-photo img{max-width:250px}
    section.block,.contact{padding:80px 0}
  }
  @media(max-width:640px){
    .wrap{padding:0 20px}
    section.block,.contact{padding:58px 0}
    .sec-head{margin-bottom:30px}
    .sec-head h2{font-size:1.72rem;line-height:1.14}
    .sec-head p{font-size:1rem}
    .hero{padding:104px 0 46px;min-height:auto}
    .hero h1{font-size:2.05rem;line-height:1.12;margin:16px 0 14px}
    .hero p.lead{font-size:1rem;margin-bottom:24px}
    .hero-actions{gap:10px}
    .hero-actions .btn{flex:1 1 100%;justify-content:center;padding:15px 18px}
    .hero-trust span{font-size:13px;align-items:flex-start}
    .eyebrow{font-size:11px;letter-spacing:0.12em}
    .eyebrow::before{width:16px}
    /* Touch-Ziele */
    .tab{padding:13px 16px;font-size:13.5px;min-height:46px}
    .faq-list summary{padding:17px 2px;font-size:1.02rem;min-height:52px}
    .plan .pbtn{padding:15px;min-height:50px}
    .btn{min-height:50px}
    input[type=range]{height:8px}
    input[type=range]::-webkit-slider-thumb{width:28px;height:28px}
    input[type=range]::-moz-range-thumb{width:28px;height:28px}
    /* Schriftgröße >=16px verhindert iOS-Zoom */
    .form-card input,.form-card textarea,.form-card select{font-size:16px;padding:14px}
    .calc-out .big{font-size:2.9rem}
    .calc-out .brk .row{font-size:0.88rem;gap:12px}
    .brk .row span:last-child{white-space:nowrap}
    .planbox{flex-wrap:wrap;gap:8px}
  .calc-kpi{grid-template-columns:1fr;gap:8px}
  .calc-kpi .ckpi b{font-size:1.25rem}
    .plan .price{font-size:1.95rem}
    .terms{gap:16px}
    .founder h2,.hl-copy h2,.contact-copy h2{font-size:1.72rem}
    .founder p,.hl-copy p,.contact-copy p{font-size:0.98rem}
    .story-quote{font-size:1.24rem}
    .hl-vis .big{font-size:1.72rem}
    .cap{gap:11px}
    .cap p{font-size:0.94rem}
    .mk-chrome{padding:9px 12px}
    .mk-url{font-size:10.5px;padding:4px 9px;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
    .foot-cols{gap:32px}
    /* ruhiger + sparsamer auf dem Handy */
    .hv-card{animation:none}
    .usp:hover,.plan:hover,.addon:hover,.step:hover,.prob-card:hover,.founder-card:hover{transform:none;box-shadow:none}
    /* Platz für den Sticky-CTA */
    footer{padding-bottom:calc(38px + 76px + env(safe-area-inset-bottom))}
    .usp-grid{grid-template-columns:1fr 1fr;gap:10px}
    .usp{padding:18px 15px;border-radius:14px}
    .usp:hover{transform:none;box-shadow:none}
    .usp .icon{width:38px;height:38px;margin-bottom:12px}
    .usp .icon svg{width:19px;height:19px}
    .usp h3{font-size:0.98rem;line-height:1.25}
    .usp p{font-size:0.82rem}
    .usp .win{font-size:0.78rem}
    .price-grid,.price-grid.three{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 20px;gap:14px;margin:0 -20px;padding:20px 20px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
    .price-grid::-webkit-scrollbar{display:none}
    .plan{flex:0 0 87%;scroll-snap-align:center;padding:26px 22px}
    .plan:hover{transform:none;box-shadow:none}
    .plan .flag{top:-9px}
    .pdots{display:flex}
    .terms{grid-template-columns:1fr}
    .lf-row{grid-template-columns:1fr}
    .calc-in,.calc-out{padding:32px 24px}
    .form-card{padding:28px 22px}
    .hl-vis{padding:28px 24px}
  }
  /* Sticky-CTA mobil */
  .mcta{display:none}
  @media(max-width:640px){
    .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:11px 16px calc(11px + env(safe-area-inset-bottom));gap:11px;align-items:center;transform:translateY(120%);transition:transform .3s var(--ease)}
    .mcta.show{transform:none}
    .mcta .mav{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 30%;flex:0 0 auto;border:2px solid #fff;box-shadow:0 3px 10px -3px rgba(18,23,43,.4);background:var(--paper-soft)}
    .mcta .t{font-size:11.5px;line-height:1.35;color:var(--slate);min-width:0}
    .mcta .t b{display:block;color:var(--ink);font-size:13.5px;font-weight:600}
    .mcta .t span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .mcta .t span.save{color:var(--emerald-ink);font-weight:600}
    .mcta a{margin-left:auto;background:var(--brand);color:#fff;font-weight:600;font-size:14px;padding:13px 17px;border-radius:10px;white-space:nowrap;min-height:48px;display:inline-flex;align-items:center;box-shadow:0 8px 20px -8px rgba(47,107,255,.9)}
    .mcta a:active{transform:scale(.97)}
  }

  /* === HELL-HÄRTUNG: verhindert Abdunkeln durch Browser/In-App-Ansichten === */
  html,body{background-color:#FFFFFF !important;background-image:linear-gradient(#FFFFFF,#FFFFFF) !important}
  main{background-color:#FFFFFF !important;background-image:linear-gradient(#FFFFFF,#FFFFFF) !important}
  section.block:not(.founder),#demo,#rechner,#faq{
    background-color:#FFFFFF !important;background-image:linear-gradient(#FFFFFF,#FFFFFF) !important}
  section.block.soft,.problem,.proof,.calc{
    background-color:#F1F4FB !important;background-image:linear-gradient(#F1F4FB,#F1F4FB) !important}
  .contact{background-color:#FFF6EF !important;background-image:linear-gradient(#FFF6EF,#FFF6EF) !important}
  /* Karten und Flächen */
  .usp,.plan,.prob-card,.mk-frame,.form-card,.calc-in,.incl,.lvl,.pcol.new,.hv-card,.founder-card,
  .kpi,.box,.scard,.sd-box,.chatbox,.dslot,.dfile,.pcard,.mk-inner{
    background-color:#FFFFFF !important;background-image:linear-gradient(#FFFFFF,#FFFFFF) !important}
  .mk-chrome{background-color:#F5F7FC !important;background-image:linear-gradient(#F5F7FC,#F5F7FC) !important}
  .pcol.old{background-color:#F6F3EC !important;background-image:linear-gradient(#F6F3EC,#F6F3EC) !important}
  /* bewusst dunkle Flächen bleiben dunkel */
  section.block.founder{background-color:#12172B !important;background-image:none !important}
  .hl-vis{background-color:#12172B !important;background-image:none !important}
  footer{background-color:#12172B !important;background-image:none !important}
  .kpi.dark{background-color:#12172B !important;background-image:none !important}
  .sd-cust{background-color:#12172B !important;background-image:none !important}
  .pt-top{background-color:#0F1B33 !important;background-image:none !important}
  .vmap{background-color:#0F1B33 !important;background-image:none !important}
  .mkd-new,.fp.ghost,.scard .box,.cust-hd .av,.msg .av,.mcta a,.plan.best .pbtn{background-image:none !important}
  /* Textfarben absichern – helle Flächen */
  h1,h2,h3{color:var(--ink)}
  .sec-head h2,.plan h3,.usp h3,.pcol h3,.faq-list summary,.calc-in h3{color:var(--ink) !important}
  .faq-list details p,.usp p,.plan .band,.prob-card p{color:var(--slate) !important}
  /* Textfarben absichern – bewusst dunkle Flächen */
  .founder h2{color:#FFFFFF !important}
  .founder p{color:#AEB4CC !important}
  .founder p b{color:#FFFFFF !important}
  .founder-meta .who b{color:#FFFFFF !important}
  .hl-vis .big{color:#FFFFFF !important}
  .hl-vis p{color:#AEB4CC !important}
  .calc-out,.calc-out .big{color:#FFFFFF !important}
  .calc-out .k,.calc-out .per,.brk .row span:first-child,.disc{color:#C3D0FF !important}
  footer{color:#FFFFFF !important}
  .foot-brand p{color:#9BA2BC !important}
  .foot-col h4{color:#8891AB !important}
  .foot-col a,.foot-legal,.foot-bottom{color:#C3C8DB !important}
  .kpi.dark .n{color:#FFFFFF !important}
  .sd-cust .n,.pt-top .nm{color:#FFFFFF !important}

  @media (prefers-color-scheme: dark){
    :root{color-scheme:only light}
    html,body{background:#FFFFFF !important;color:var(--ink) !important}
    section.block{background:#FFFFFF !important}
    section.block.soft{background:#F1F4FB !important}
    .contact{background:#FFF6EF !important}
    h1,h2,h3{color:var(--ink) !important}
    .founder h2{color:#fff !important}
    p,li,summary{color:var(--ink-2) !important}
    .founder p{color:#C3C8DB !important}
    footer,footer p,footer a{color:#C3C8DB !important}
    .calc-out,.calc-out .big,.hl-vis,.hl-vis .big{color:#fff !important}
  }
  @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.rv{opacity:1;transform:none}.mcta{transform:none}}

/* ─── Startmonat / Angebot (gso-) ─── */
  /* ---- Angebotskasten in der Hero ---- */
  .gso-hero{
    background:#fff;border:1.5px solid var(--brand);border-radius:var(--radius);
    padding:20px 22px;margin:0 0 26px;max-width:560px;
    box-shadow:0 18px 44px -30px rgba(47,107,255,0.65);
  }
  .gso-hero-top{display:flex;gap:20px;align-items:flex-start}
  .gso-hero-price{flex:0 0 auto;text-align:center;padding-right:20px;border-right:1px solid var(--line)}
  .gso-hero-price .lbl{
    display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.11em;
    text-transform:uppercase;color:var(--brand);margin-bottom:4px;
  }
  .gso-hero-price b{
    display:block;font-family:var(--font-display);font-size:2.5rem;font-weight:700;
    line-height:1;letter-spacing:-0.03em;color:var(--ink);
  }
  .gso-hero-price .was{
    display:block;font-size:11px;color:var(--slate-2);margin-top:5px;
  }
  .gso-hero-txt p{font-size:0.92rem;line-height:1.5;color:var(--ink-2)}
  .gso-hero-txt p.sub{font-size:0.83rem;color:var(--slate);margin-top:6px}
  .gso-hero-pts{
    display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;padding:14px 0 0;
    border-top:1px solid var(--line);list-style:none;
  }
  .gso-hero-pts li{
    font-size:12.5px;font-weight:600;color:var(--emerald-ink);
    display:flex;align-items:center;gap:6px;
  }
  .gso-hero-pts li::before{
    content:"";width:13px;height:13px;flex:0 0 auto;border-radius:50%;
    background:var(--emerald-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%230a8f63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat;
  }
  /* Laptop-Hoehen: Angebot und CTA muessen ohne Scrollen sichtbar sein.
     Auf 1366x768 und 1280x800 bleiben sonst beide unter der Falzlinie —
     dann closet die Hero nicht, sondern verweist nur nach unten. */
  @media(min-width:901px) and (max-height:900px){
    .hero{padding:104px 0 40px}
    .hero h1{font-size:clamp(2rem,3.5vw,2.95rem);margin:14px 0 14px}
    .hero p.lead{font-size:1rem;margin-bottom:18px}
    .gso-hero{padding:16px 18px;margin-bottom:18px}
    .gso-hero-price b{font-size:2.15rem}
    .gso-hero-txt p{font-size:0.88rem}
    .gso-hero-pts{margin-top:12px;padding-top:11px}
    .hero-trust{margin-top:16px;gap:6px}
  }

  @media(max-width:640px){
    .gso-hero{padding:17px 18px}
    .gso-hero-top{flex-direction:column;gap:12px}
    .gso-hero-price{
      display:flex;align-items:baseline;gap:10px;text-align:left;
      padding:0 0 12px;border-right:0;border-bottom:1px solid var(--line);width:100%;
    }
    .gso-hero-price .lbl{margin-bottom:0}
    .gso-hero-price b{font-size:2.1rem}
  }

  #angebot .gso-head{max-width:760px;margin-bottom:44px}
  #angebot .gso-head h2{font-size:clamp(2rem,4vw,3.05rem);margin:16px 0;line-height:1.07}
  #angebot .gso-head p{color:var(--slate);font-size:1.1rem}

  .gso-promise{
    background:var(--ink);color:#fff;border-radius:var(--radius);
    padding:38px 36px;margin-bottom:26px;
    display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:center;
  }
  #angebot .gso-promise h3{font-size:clamp(1.5rem,2.7vw,2.05rem);line-height:1.14;margin-bottom:14px}
  #angebot .gso-promise h3 em{font-style:normal}
  #angebot .gso-promise p{font-size:1rem;line-height:1.62}
  #angebot .gso-promise p b{font-weight:600}
  .gso-seal{
    background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
    border-radius:14px;padding:24px;text-align:center;
  }
  .gso-seal .big{
    font-family:var(--font-display);font-size:3.1rem;font-weight:700;
    line-height:1;color:#fff;letter-spacing:-0.03em;
  }
  .gso-seal .lbl{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.13em;
    text-transform:uppercase;color:#7FA6FF;margin-top:9px;
  }
  .gso-seal .txt{font-size:12.5px;color:#AEB6CC;margin-top:13px;line-height:1.5}

  .gso-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}
  .gso-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .gso-card .hd{
    padding:16px 24px;border-bottom:1px solid var(--line);background:var(--paper-soft);
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  }
  .gso-card .hd b{font-family:var(--font-display);font-size:1.06rem;font-weight:600;color:var(--ink)}
  .gso-card .hd span{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--slate-2);
  }
  .gso-card .bd{padding:8px 24px 22px}

  .gso-row{
    display:flex;gap:16px;justify-content:space-between;align-items:baseline;
    padding:13px 0;border-bottom:1px solid #F0F1F6;font-size:0.93rem;color:var(--slate);
  }
  .gso-row:last-of-type{border-bottom:0}
  .gso-row b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}
  .gso-row .val{
    font-family:var(--font-mono);font-size:0.85rem;color:var(--slate-2);
    white-space:nowrap;flex:0 0 auto;
  }
  .gso-sum{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    margin-top:6px;padding-top:16px;border-top:1.5px solid var(--ink);
    font-family:var(--font-display);font-weight:600;font-size:1.06rem;color:var(--ink);
  }
  .gso-sum .val{font-family:var(--font-mono);font-size:1.06rem}
  .gso-you{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    margin-top:11px;background:var(--emerald-soft);border:1px solid #cdeede;
    border-radius:11px;padding:14px 16px;
  }
  .gso-you b{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--emerald-ink)}
  .gso-you .val{font-family:var(--font-mono);font-weight:700;font-size:1.06rem;color:var(--emerald-ink)}

  .gso-why{display:flex;flex-direction:column;gap:14px}
  .gso-why .item{padding:15px 17px;border:1px solid var(--line);border-radius:13px;background:#fff}
  .gso-why .item .t{
    display:flex;align-items:center;gap:9px;font-family:var(--font-display);
    font-size:0.99rem;font-weight:600;color:var(--ink);margin-bottom:6px;
  }
  .gso-why .item .t svg{color:var(--brand);flex:0 0 auto}
  .gso-why .item p{font-size:0.88rem;color:var(--slate);line-height:1.55}
  .gso-why .item.urg{border-color:#f6e4bd;background:var(--amber-soft)}
  .gso-why .item.urg .t svg{color:#c67c0a}

  .gso-foot{
    margin-top:22px;padding:20px 24px;border:1px dashed var(--line);
    border-radius:var(--radius);font-size:0.9rem;color:var(--slate);line-height:1.6;
  }
  .gso-foot b{color:var(--ink)}

  /* Garantie-Zeile in den Paketkarten */
  .gso-guar{
    display:flex;align-items:center;gap:7px;margin:-6px 0 16px;
    font-size:12px;font-weight:600;color:var(--emerald-ink);line-height:1.35;
  }
  .gso-guar svg{flex:0 0 auto}

  @media(max-width:900px){
    .gso-promise{grid-template-columns:1fr;gap:26px;padding:30px 26px}
    .gso-cols{grid-template-columns:1fr}
  }
  @media(max-width:640px){
    .gso-card .bd{padding:6px 18px 18px}
    .gso-card .hd{padding:14px 18px}
    .gso-row{flex-direction:column;gap:3px}
    .gso-row .val{font-size:0.9rem;color:var(--ink-2)}
  }

  /* === HELL-HÄRTUNG für diesen Abschnitt ===
     Die Seite härtet sich weiter oben gegen Dark-Mode-Umfärbung ab und
     erzwingt dabei h1,h2,h3{color:var(--ink)!important} sowie
     p,li{color:var(--ink-2)!important}. Ohne die folgenden Ausnahmen steht
     die Überschrift des dunklen Kastens navy auf navy — unlesbar. Genau so
     verfährt die Seite bereits bei .founder, .hl-vis und footer. */
  .gso-promise{background-color:#12172B !important;background-image:none !important}
  .gso-card,.gso-why .item,.gso-ent{
    background-color:#FFFFFF !important;background-image:linear-gradient(#FFFFFF,#FFFFFF) !important}
  .gso-why .item.urg{
    background-color:#FFF4E0 !important;background-image:linear-gradient(#FFF4E0,#FFF4E0) !important}
  .gso-you{background-color:#E7F8F1 !important;background-image:linear-gradient(#E7F8F1,#E7F8F1) !important}
  .gso-card .hd{background-color:#F4F6FB !important;background-image:linear-gradient(#F4F6FB,#F4F6FB) !important}

  /* Text auf der bewusst dunklen Fläche */
  #angebot .gso-promise h3{color:#FFFFFF !important}
  #angebot .gso-promise h3 em{color:#7FA6FF !important}
  #angebot .gso-promise p{color:#AEB6CC !important}
  #angebot .gso-promise p b{color:#FFFFFF !important}
  #angebot .gso-seal .big{color:#FFFFFF !important}
  #angebot .gso-seal .lbl{color:#7FA6FF !important}
  #angebot .gso-seal .txt{color:#AEB6CC !important}

  /* Hero-Angebotskasten */
  .gso-hero{background-color:#FFFFFF !important;background-image:linear-gradient(#FFFFFF,#FFFFFF) !important}
  .hero .gso-hero-price b{color:var(--ink) !important}
  .hero .gso-hero-price .lbl{color:var(--brand) !important}
  .hero .gso-hero-price .was{color:var(--slate-2) !important}
  .hero .gso-hero-txt p{color:var(--ink-2) !important}
  .hero .gso-hero-txt p.sub{color:var(--slate) !important}
  .hero .gso-hero-pts li{color:var(--emerald-ink) !important}

  /* Text auf den hellen Flächen */
  #angebot .gso-head h2,#angebot .gso-ent h3{color:var(--ink) !important}
  #angebot .gso-head p,#angebot .gso-why .item p,#angebot .gso-ent p{color:var(--slate) !important}
  #angebot .gso-you b,#angebot .gso-you .val{color:var(--emerald-ink) !important}

/* ══════════════════════════════════════════════════════════════════════════
   SEIT DER AUFTEILUNG IN MEHRERE SEITEN (Oktober 2026)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Kopfleiste: aktuelle Seite und Menue auf dem Telefon ─── */
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}

/*
  DAS MENUE KLAPPTE NACH DEM SCROLLEN ALS STREIFEN AUF.

  Die Kopfleiste bekommt beim Scrollen einen Weichzeichner (backdrop-filter).
  Ein Element mit backdrop-filter wird fuer seine Kinder zum Bezugsrahmen von
  position:fixed — das aufgeklappte Menue war damit nicht mehr am Bildschirm
  festgemacht, sondern an der 76 Pixel hohen Leiste, und zeigte nur einen
  Streifen mit "Fuer wen". Ganz oben auf der Seite (ohne Weichzeichner) ging es,
  deshalb fiel es erst beim Benutzen auf.

  Solange das Menue offen ist, hat die Leiste deshalb keinen Weichzeichner,
  sondern eine deckende Flaeche. Die untere Leiste mit dem Knopf verschwindet,
  sonst laege sie ueber dem letzten Menuepunkt.
*/
header.nav.menu-offen{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fff!important}
body.menu-offen .mcta{display:none!important}

/* ─── Startseite: Hero ─── */
.hero-pkt{list-style:none;display:grid;gap:10px;margin:22px 0 28px}
.hero-pkt li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--slate)}
.hero-pkt li svg{flex:none;margin-top:3px;color:var(--emerald)}
.hero-pkt b{color:var(--ink);font-weight:600}
.hero-trust.hero-trust-kurz{flex-direction:row;flex-wrap:wrap;gap:8px 18px}
.hero-trust.hero-trust-kurz span{display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.hero-trust.hero-trust-kurz svg{color:var(--emerald);flex:none}

.mehr-link{margin-top:30px;font-weight:600}
.mehr-link a{color:var(--brand)}
.mehr-link a:hover{text-decoration:underline}

/* ─── Startseite: Preise kurz ─── */
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.pk{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.pk:hover{transform:translateY(-3px);box-shadow:0 26px 50px -36px rgba(18,23,43,.45)}
.pk h3{font-size:1.3rem}
.pk-band{font-size:13px;color:var(--slate-2);margin-top:2px}
.pk-preis{font-family:var(--font-display);font-size:2rem;font-weight:700;letter-spacing:-.02em;margin:12px 0 8px}
.pk-preis small{font-size:14px;font-weight:500;color:var(--slate-2);letter-spacing:0}
.pk p{font-size:14.5px;color:var(--slate);line-height:1.55;flex:1}
.pk p b{color:var(--ink)}
.pk-weiter{margin-top:16px;font-weight:600;font-size:14px;color:var(--brand)}
.pk-top{border-color:var(--brand);box-shadow:0 30px 60px -44px rgba(47,107,255,.65)}
.pk-flag{position:absolute;top:-11px;left:22px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px}
.pk-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.pk-cta span{font-size:13.5px;color:var(--slate-2)}

/* ─── Abschluss-Band ─── */
.schluss{padding:88px 0;background:linear-gradient(135deg,#12172B 0%,#1c2547 100%);color:#fff}
.schluss-inner{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.schluss .eyebrow{color:#8FA9FF}
.schluss h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.15;margin:14px 0 14px;color:#fff}
.schluss p{color:#C3C8DB;font-size:16.5px;line-height:1.6;max-width:560px}
.schluss-pkt{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px}
.schluss-pkt li{display:inline-flex;gap:7px;align-items:center;font-size:14px;color:#E3E7F3}
.schluss-pkt svg{color:#5BE0AE}
.schluss-knoepfe{display:flex;flex-direction:column;gap:12px}
.schluss-knoepfe .btn{justify-content:center}
.schluss .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.schluss .btn-ghost:hover{border-color:#fff}

/* ─── Unterseiten: Kopf und Sprungleiste ─── */
.seitenkopf{padding:148px 0 40px;background:linear-gradient(180deg,#F4F7FF 0%,#fff 100%)}
.seitenkopf h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.1;letter-spacing:-.02em;margin:16px 0 16px;max-width:860px}
.seitenkopf p{font-size:17.5px;color:var(--slate);max-width:720px;line-height:1.6}
.seitenkopf p a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.seiten-sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.seiten-sprung a{font-size:13.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 15px;transition:border-color .2s,color .2s}
.seiten-sprung a:hover{border-color:var(--brand);color:var(--brand)}
.seitenkopf + section.block{padding-top:72px}

/* ─── Preise: Vergleich ─── */
.vg-rahmen{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.vg{width:100%;border-collapse:collapse;font-size:14.5px}
.vg th,.vg td{padding:13px 18px;text-align:center;border-bottom:1px solid var(--line)}
.vg th[scope="row"]{text-align:left;font-weight:500;color:var(--ink)}
.vg thead th{font-family:var(--font-display);font-size:17px;font-weight:700;padding:20px 18px;background:#FAFBFE}
.vg thead th:first-child{width:46%}
.vg-top{background:var(--brand-soft)!important;color:var(--brand-ink)}
.vg-top span{display:block;font-family:var(--font-body);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.vg td:last-child{background:#F7F9FF}
.vg .ja{color:var(--emerald);font-weight:700;font-size:17px}
.vg .nein{color:#C3C8D6}
.vg-gruppe th{text-align:left!important;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--slate-2);background:var(--paper-soft);padding:9px 18px!important;font-weight:700}
.vg tfoot td{border-bottom:0;padding:18px}
.vg-knopf{display:inline-block;padding:10px 16px;border-radius:10px;border:1.5px solid var(--line);font-weight:600;font-size:13.5px}
.vg-knopf:hover{border-color:var(--ink)}
.vg-knopf-top{background:var(--brand);border-color:var(--brand);color:#fff}
.vg-knopf-top:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.vg-warum{margin-top:22px;max-width:820px;font-size:15px;line-height:1.65;color:var(--slate);background:var(--brand-soft);border-radius:14px;padding:16px 20px}
.vg-warum b{color:var(--ink)}
.plan .pbtn.pbtn-top{background:var(--brand);color:#fff;border-color:var(--brand)}

@media(max-width:980px){
  .pk-grid{grid-template-columns:1fr}
  .schluss-inner{grid-template-columns:1fr;gap:28px}
  .seitenkopf{padding:118px 0 28px}
}
@media(max-width:640px){
  .hero-pkt li{font-size:15px}
  .schluss{padding:64px 0 96px}
  .seitenkopf p{font-size:16px}
  /* Die Tabelle bleibt eine Tabelle; auf dem Telefon kleiner und mit festen
     Spalten, damit "Professional" nicht aus dem Bild laeuft. */
  .vg{font-size:12.5px}
  .vg th,.vg td{padding:10px 6px}
  .vg thead th{font-size:13px;padding:14px 4px}
  .vg thead th:first-child{width:40%}
  .vg th[scope="row"]{padding-left:12px}
  .vg-gruppe th{padding-left:12px!important}
  .vg-top span{font-size:9px;letter-spacing:.04em}
  .vg-knopf{padding:8px 6px;font-size:11.5px}
  .vg tfoot td{padding:12px 4px}
}

/* ─── Bestellen ─── */
.bs-kopf{padding-bottom:12px}
section.block.bs{padding-top:36px}
.bs-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;align-items:start}
.bs-form{padding:8px 32px 30px}
.bs-teil{border:0;border-top:1px solid var(--line);padding:26px 0 6px;margin:0}
.bs-teil:first-child{border-top:0}
.bs-teil legend{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-size:19px;font-weight:600;padding:0;margin-bottom:12px;float:left;width:100%}
.bs-teil legend + *{clear:both}
.bs-nr{width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;font-size:14px;font-weight:700;font-family:var(--font-body)}
.bs-hilfe{font-size:13.5px;color:var(--slate-2);margin:0 0 14px;line-height:1.5}
.bs-sicher{display:flex;gap:8px;align-items:flex-start;background:var(--emerald-soft);color:#07684a;border-radius:10px;padding:10px 12px}
.bs-sicher svg{flex:none;margin-top:2px}
.opt{font-weight:400;color:var(--slate-2)}
.bs-pakete{display:grid;gap:10px}
.bs-paket{position:relative;display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:13px;padding:14px 16px;cursor:pointer;transition:border-color .2s,background .2s}
.bs-paket:hover{border-color:#c8d2ea}
.bs-paket input,.bs-zahlweise input{width:18px;height:18px;flex:none;accent-color:var(--brand);margin:0}
.bs-paket-k{flex:1;min-width:0}
.bs-paket-k b{display:flex;align-items:center;gap:8px;font-size:15.5px}
.bs-paket-k b em{font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--brand);color:#fff;border-radius:20px;padding:2px 8px}
.bs-paket-k small{display:block;font-size:13px;color:var(--slate-2);margin-top:1px}
.bs-paket-p{font-family:var(--font-display);font-weight:700;font-size:18px;white-space:nowrap;text-align:right}
.bs-paket-p small{display:block;font-family:var(--font-body);font-weight:500;font-size:11.5px;color:var(--slate-2)}
.bs-paket:has(input:checked){border-color:var(--brand);background:#F7F9FF;box-shadow:0 0 0 3px var(--brand-soft)}
.bs-vergleich{font-size:13.5px;margin:10px 0 16px}
.bs-vergleich a{color:var(--brand);font-weight:600}
.bs-zahlweise{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.bs-zahlweise label{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer}
.bs-zahlweise label:has(input:checked){border-color:var(--brand);background:#F7F9FF}
.bs-zahlweise b{display:block;font-size:14.5px}
.bs-zahlweise small{display:block;font-size:12.5px;color:var(--slate-2);line-height:1.4}
.bs-zahlweise input{margin-top:2px}
.bs-plz{grid-template-columns:140px 1fr}
.form-card input.bs-iban{font-family:var(--font-mono);letter-spacing:.04em}
.form-card input.bs-iban.ok{border-color:var(--emerald)}
.form-card input.bs-iban.falsch{border-color:#d92d20}
.bs-iban-info{font-size:12.5px;margin-top:6px;min-height:18px;color:var(--slate-2)}
.bs-iban.ok + .bs-iban-info{color:#07684a;font-weight:600}
.bs-iban.falsch + .bs-iban-info{color:#b42318;font-weight:600}
.bs-check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--slate);margin:4px 0 14px;cursor:pointer}
.bs-check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--brand)}
.bs-check b{color:var(--ink)}
.bs-check a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.bs-falle{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.bs-meldung{margin:4px 0 14px;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.45;background:#fdecec;color:#b42318;border:1px solid #f5c9c5}
.bs-los{width:100%;justify-content:center;font-size:16px;padding:17px 22px}
.bs-los.laedt{opacity:.75;cursor:wait}
.bs-klein{font-size:12.5px;color:var(--slate-2);line-height:1.5;margin-top:12px}
.bs-seite{position:sticky;top:100px;display:grid;gap:16px}
.bs-summe{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 22px 18px;box-shadow:0 30px 60px -46px rgba(18,23,43,.5)}
.bs-summe h2{font-size:18px;margin-bottom:10px}
.bs-zeile{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}
.bs-zeile span{color:var(--ink);font-weight:600}
.bs-zeile small{display:block;font-weight:400;font-size:12.5px;color:var(--slate-2);line-height:1.4;margin-top:2px}
.bs-zeile b{font-family:var(--font-display);white-space:nowrap}
.bs-danach b{color:var(--slate)}
.bs-heute{font-size:16px}
.bs-heute b{color:var(--emerald-ink);font-size:18px}
.bs-summe-klein{font-size:12px;color:var(--slate-2);line-height:1.5;margin-top:4px}
.bs-vertrauen{list-style:none;display:grid;gap:12px;background:var(--paper-soft);border-radius:16px;padding:18px 20px}
.bs-vertrauen li{font-size:13.5px;line-height:1.5;color:var(--slate);padding-left:24px;position:relative}
.bs-vertrauen li::before{content:"✓";position:absolute;left:0;top:0;color:var(--emerald);font-weight:700}
.bs-vertrauen b{color:var(--ink)}
.bs-person{display:flex;gap:12px;align-items:flex-start;padding:4px 4px 0}
.bs-person img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 30%;flex:none}
.bs-person p{font-size:13.5px;line-height:1.5;color:var(--ink);font-style:italic}
.bs-person span{display:block;font-style:normal;font-size:12px;color:var(--slate-2);margin-top:4px}
.bs-frage{font-size:13px;color:var(--slate-2);padding:0 4px}
.bs-frage a{color:var(--brand);font-weight:600}

/* ─── Danke nach der Bestellung ─── */
.bt{min-height:70vh;padding-bottom:90px}
.bt-inner{max-width:760px}
.bt-haken{width:60px;height:60px;border-radius:18px;background:var(--emerald);display:grid;place-items:center;margin-bottom:22px;box-shadow:0 20px 40px -20px rgba(15,185,129,.7)}
.bt-schritte{list-style:none;counter-reset:s;display:grid;gap:14px;margin:30px 0}
.bt-schritte li{counter-increment:s;position:relative;padding:16px 18px 16px 58px;background:#fff;border:1px solid var(--line);border-radius:14px}
.bt-schritte li::before{content:counter(s);position:absolute;left:18px;top:16px;width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;font-size:13px;display:grid;place-items:center}
.bt-schritte b{display:block;font-size:15px}
.bt-schritte span{font-size:14.5px;color:var(--slate);line-height:1.5}
.bt-knoepfe{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:980px){
  .bs-grid{grid-template-columns:1fr}
  .bs-seite{position:static;order:-1}
  .bs-vertrauen,.bs-person,.bs-frage{display:none}
}
@media(max-width:640px){
  .bs-form{padding:4px 20px 24px}
  .bs-zahlweise{grid-template-columns:1fr}
  .bs-plz{grid-template-columns:110px 1fr}
  .bs-paket{padding:12px 13px;gap:11px}
  .bs-paket-p{font-size:16px}
}

/* Das Abschluss-Band ist eine bewusst dunkle Flaeche — wie .founder muss es
   gegen die Hell-Haertung oben (h1,h2,h3 / p, li mit !important) abgesichert
   werden, sonst steht dunkle Schrift auf dunklem Grund. */
.schluss{background:linear-gradient(135deg,#12172B 0%,#1c2547 100%)!important}
.schluss h2{color:#FFFFFF!important}
.schluss p{color:#C3C8DB!important}
.schluss-pkt li{color:#E3E7F3!important}
.schluss .eyebrow{color:#8FA9FF!important}
.schluss .btn-ghost{color:#FFFFFF!important;background:transparent!important}