/* ==================================================================
   KredPal — Stylesheet der Webseite
   Ausgelagert aus der Einzeldatei in v229 (2026-09-16), damit
   Unterseiten (Impressum, Datenschutz, AGB, Cookies) dasselbe
   Designsystem laden. Reihenfolge und Inhalt entsprechen exakt den
   beiden <style>-Bloecken der vorherigen Version; nichts wurde
   umsortiert, damit die Kaskade unveraendert bleibt.
   ================================================================== */

  /* Ersatzschrift, die Roboto in Breite und Höhe nachempfunden ist.
     Ohne sie springt die Schrift, sobald Roboto nachgeladen ist. */
  @font-face{
    font-family:'Roboto-Ersatz';
    src:local('Arial');
    size-adjust:100%;
    ascent-override:93%;
    descent-override:24%;
    line-gap-override:0%;
  }

  /* v342: Token stehen jetzt in kredpal-token.css (gemeinsam mit dem Partnerbereich). */
  *{box-sizing:border-box;margin:0;padding:0;}
  /* overflow-x:hidden macht html und body zu Scroll-Containern und bricht
     damit position:sticky. clip verhindert dasselbe seitliche Scrollen,
     ohne einen Scroll-Container zu erzeugen; ältere Browser ignorieren es
     und behalten hidden. */
  html{overflow-x:hidden;overflow-x:clip;}
@media (hover:hover){ html{scroll-behavior:smooth;} }
  body{font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeSpeed;overflow-x:hidden;overflow-x:clip;max-width:100vw;}
  @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;} }
  /* height:auto: sonst verzerrt ein Bild mit width/height-Attributen, sobald
     max-width es schmaler macht als seine Datei. Alle Bildklassen setzen
     heute eigene Hoehen; das hier ist das Netz fuer das naechste Bild. */
  img{max-width:100%;height:auto;display:block;}

  /* Fokus fuer Tastaturnutzer (v251). Vorher hatten 9 Bauteile einen eigenen
     Ring, rund 30 Elemente (Buttons, Navigations- und Footer-Links, Logo,
     Burger, Chat-Eingabe) liefen auf dem Browser-Standard — auf dunklen
     Karten unsichtbar. Diese Grundregel gilt fuer alles ohne eigene Regel;
     die bestehenden bauteilspezifischen Ringe gewinnen ueber Spezifitaet.
     Farbe ueber --fokus-farbe: Blau auf hellem Grund (5,8:1 auf --paper),
     helles Grau auf dunklem (9,9:1 auf der Karte). Gold ist der Sonderfall:
     Weiss erreicht dort nur 2:1, Navy 5:1. */
  :focus-visible{outline:2px solid var(--fokus-farbe,var(--accent-500));outline-offset:2px;}
  header.site-nav:not(.nav-solid),header.site-nav.menu-open,
  .hero,.stapel-dunkel,.stapel-blau,.bento-card,.konfig-section,footer{--fokus-farbe:var(--auf-dunkel-stark);}
  .stapel-gold{--fokus-farbe:var(--navy-dunkel);}
  a{color:inherit;text-decoration:none;}
  /* Ueberschriften im Markenblau, fett, ohne Unterschneidung — Formensprache
     von kredpal.de (08.09.), seit v242 direkt hier statt in einem
     nachgelagerten Ueberschreibungsblock. */
  h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:normal;color:var(--accent-500);}
  h1{font-weight:900;}
  .wrap{max-width:var(--breite-inhalt);margin:0 auto;padding:0 var(--abstand-rand);}
  section{padding:var(--abstand-section) 0;position:relative;overflow:hidden;}
  .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dauer-lang) var(--kurve), transform var(--dauer-lang) var(--kurve);}
  /* Sicherheitsnetz: ohne Skript bleibt sonst alles unsichtbar */
  .reveal.in{opacity:1;transform:none;will-change:auto;}
  @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }
  @media (max-width:640px){ section{padding:var(--abstand-section) 0;} .wrap{padding:0 20px;} }

  /* v343: nach kredpal-bauteile.css verschoben */

  .btn-gold{background:var(--gold-cta);color:#fff;font-family:var(--disp);font-weight:800;font-size:var(--text-button);padding:16px 26px;border-radius:30px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all var(--dauer-kurz) var(--kurve);}
  /* Buttons: Marke A (v242) — Pill-Form, Flaeche statt Verlauf, kein Anheben,
     kein Leuchten. Hover nur ueber Deckkraft bzw. dunklere Flaeche. */
  .btn-gold:hover{background:var(--gold-cta);opacity:.9;}
  /* v302: "Call to Action Button Medium" als Modifier fuer jeden Knopftyp (.btn-gold, .btn-navy, .btn-ghost-light).
     Regel (25.09.2026): Die Startseite bleibt, wie sie ist; auf allen anderen Seiten sind Knoepfe Medium.
     Ausnahmen: Knoepfe in der Kopfleiste (sollen auf jeder Seite aussehen wie auf der Startseite)
     und der zweizeilige Wechselknopf der Anmeldeseite (braucht zwei Zeilen Hoehe).
     Sichtbar 30px, Trefferflaeche 44px: das unsichtbare ::after ragt 7px nach oben und unten.
     Gold behaelt 700, Navy und Ghost ihr Gewicht 500. Vorgaenger: kompakte Gold-Variante (v289), Gold-Medium (v301). */
  /* Selektor mit Knopftyp, weil .btn-navy und .btn-ghost-light weiter unten eigene min-height/padding setzen
     und sonst bei gleicher Spezifitaet gewinnen wuerden. */
  .btn-gold.btn--medium,.btn-navy.btn--medium,.btn-ghost-light.btn--medium{position:relative;min-height:30px;height:30px;padding:0 16px;font-size:var(--text-small);line-height:1;}
  .btn--medium::after{content:"";position:absolute;inset:-7px 0;}
  .btn--medium svg{width:14px;height:14px;}
  .btn-gold.btn--medium{font-weight:700;}
  .btn-ghost-light{border:1px solid var(--accent-500);color:var(--accent-500);font-family:var(--disp);font-weight:500;font-size:var(--text-button);padding:14px 22px;border-radius:var(--radius-voll);transition:all var(--dauer-sofort) var(--kurve);min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .btn-ghost-light:hover{background:var(--accent-500);color:#fff;border-color:var(--accent-500);}
  .btn-navy{background:var(--accent-500);color:#fff;font-family:var(--disp);font-weight:500;font-size:var(--text-button);padding:10px 18px;border-radius:var(--radius-voll);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all var(--dauer-kurz) var(--kurve);min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .btn-navy:hover{background:var(--accent-600);}

  /* ---------- Nav ---------- */
  /* Navigation liegt im Bild (Variante B). Sobald das Hero-Foto durchgelaufen
     ist, wechselt sie über die Klasse .nav-solid auf hell. */
  header.site-nav{position:sticky;top:0;z-index:var(--ebene-kopf);margin-bottom:-79px;
    background:transparent;border-bottom:1px solid rgba(255,255,255,0);
    transition:background var(--dauer-kurz) var(--kurve), border-color var(--dauer-kurz) var(--kurve);}
  /* Logo (SVG aus Kredpal-Logo=weiß-grau.svg / schwarz-blau.svg):
     auf dunklem Grund weiss/grau, auf hellem Grund schwarz/blau. */
  header.site-nav .logo{--logo-kred:#fff;--logo-pal:#C6C8CC;}
  header.site-nav .nav-links{color:#fff;}
  header.site-nav .btn-ghost-light{color:#fff;border-color:rgba(255,255,255,.7);}
  header.site-nav .btn-ghost-light:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;}
  header.site-nav .nav-burger{color:#fff;}
  header.site-nav.nav-solid{background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom-color:var(--line);}
  header.site-nav.nav-solid .logo{--logo-kred:var(--navy-dunkel);--logo-pal:#405B85;}
  header.site-nav.nav-solid .nav-links{color:var(--accent-500);}
  header.site-nav.nav-solid .btn-ghost-light{color:var(--accent-500);border-color:var(--accent-500);}
  header.site-nav.nav-solid .btn-ghost-light:hover{background:var(--accent-500);color:#fff;}
  header.site-nav.nav-solid .nav-burger{color:var(--accent-500);}
  /* Im Entwurf wechselt der Partner-Button beim Scrollen auf Gold.
     Hier auf --gold-cta statt --gold-500: mit #B2833C erreicht weiße
     Schrift nur 3,4:1, mit #83602C sind es 5,7:1. */
  header.site-nav.nav-solid .btn-navy{background:var(--gold-cta-hero);}
  header.site-nav.nav-solid .btn-navy:hover{background:var(--gold-cta-hero);opacity:.9;}
  /* Solange das Mobile-Menü offen ist, trägt die Kopfleiste selbst
     (nav-row mit Logo und Burger) unser dunkles Navy — unabhängig davon,
     ob .nav-solid gerade aktiv ist. Steht bewusst NACH den nav-solid-Regeln,
     damit .menu-open bei gleicher Spezifität gewinnt. Das aufklappbare
     Panel darunter bleibt hell, siehe .nav-links-mobile. */
  header.site-nav.menu-open{background:var(--bento-grund);border-bottom-color:transparent;}
  header.site-nav.menu-open .logo{--logo-kred:#fff;--logo-pal:#C6C8CC;}
  header.site-nav.menu-open .nav-burger{color:#fff;}
  header.site-nav.menu-open .nav-actions a.btn-navy{display:none !important;} /* bei offenem Menue steht er dort schon (v217) */
  /* Das Menü-Panel ist immer hell, unabhaengig vom Scroll-Zustand des
     Headers. Ohne diese Regel erben die Buttons hier die transparente
     Kopfleisten-Farbe (weiss) und waeren auf dem hellen Panel unsichtbar,
     solange .nav-solid noch nicht aktiv ist. */
  header.site-nav .nav-links-mobile__actions .btn-ghost-light{color:var(--accent-500);}
  @media (max-width:640px){ header.site-nav{margin-bottom:-69px;} }
  .nav-row{display:flex;align-items:center;justify-content:space-between;padding:16px var(--abstand-rand);max-width:var(--breite-inhalt);margin:0 auto;}
  .logo{--logo-kred:var(--navy-dunkel);--logo-pal:#405B85;display:flex;align-items:center;line-height:0;}
  /* v343: nach kredpal-bauteile.css verschoben */
  .nav-links{display:flex;gap:28px;font-size:var(--text-small);font-weight:600;color:var(--ink);}
  .nav-actions{display:flex;align-items:center;gap:16px;}
  @media (max-width:640px){
    .nav-row{padding:14px 16px;}
    .logo-svg{height:15px;}
    .nav-actions{gap:6px;}
    /* Mehr Ruhe im Kopf: Anmelden und Partner werden wandern ab hier
       ins Burger-Menü, oben bleiben nur Logo und Burger-Icon. Die Buttons
       existieren im Markup doppelt (oben ausgeblendet, im Menü sichtbar) —
       siehe .nav-links-mobile__actions. */
    .nav-actions a.btn-ghost-light,
    .nav-actions a.btn-navy{display:none;}
    /* Sobald die Leiste beim Scrollen hell wird, kommt "Partner werden" in
       Gold zurueck in den Kopf (v217). Anmelden bleibt im Menue. */
    header.site-nav.nav-solid .nav-actions a.btn-navy{display:inline-flex;padding:8px 14px;min-height:40px;}
  }
  .nav-burger{display:none;background:none;border:none;color:var(--ink);padding:4px;cursor:pointer;align-items:center;}
  /* Die vier Story-Punkte sind laenger als die alten Links: bis 1100px
     reicht der Platz neben den Buttons nicht mehr, dort gilt das Menue. */
  /* Hauptnavigation ohne Hover-Effekt: normal und Hover sehen gleich aus. */
  .nav-links a{white-space:nowrap;}
  @media (max-width:1100px){
    .nav-links{display:none;}
    .nav-burger{display:flex;}
  }
  .nav-links-mobile{display:none;flex-direction:column;padding:6px 16px 14px;border-top:1px solid var(--line);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
  .nav-links-mobile a{padding:10px 0;font-size:var(--text-body);font-weight:600;color:var(--accent-500);border-bottom:1px solid var(--line);}
  .nav-links-mobile a:last-child{border-bottom:none;}
  .nav-links-mobile.open{display:flex;}
  /* Anmelden/Partner werden im Menü: nur bei ≤640px sichtbar, siehe
     Media Query oben. Bleiben optisch Buttons statt schlichter Links,
     damit sie sich von der Story-Navigation darunter abheben. */
  .nav-links-mobile__actions{display:none;flex-direction:row;gap:10px;
    padding-bottom:14px;margin-bottom:6px;border-bottom:1.5px solid var(--line);}
  .nav-links-mobile__actions a{padding:0;text-align:center;flex:1 1 0;
    min-height:44px;justify-content:center;}
  /* Bewusst KEIN border-bottom:none hier: das wuerde als Einzeleigenschaft
     auch die untere Rahmenkante von .btn-ghost-light kappen (beide teilen
     sich dieselbe CSS-Eigenschaft, unabhaengig davon welche Regel sie
     gesetzt hat). Stattdessen unten der volle Rahmen je Button explizit
     neu mit hoeherer Spezifitaet, das gewinnt zuverlaessig gegen die
     Trennlinie aus .nav-links-mobile a. */
  header.site-nav .nav-links-mobile__actions .btn-ghost-light{border:1px solid var(--accent-500);font-size:var(--text-button);}
  header.site-nav .nav-links-mobile__actions .btn-gold{border:none;font-size:var(--text-button);}
  /* .nav-links-mobile a (weiter oben) setzt Markenblau für ALLE Links im
     Menü und ist dabei spezifischer als .btn-gold allein (zwei Klassen vs.
     eine). Ohne diese Zeile faerbt das den weissen CTA-Text blau. Bei
     Anmelden faellt das nicht auf, weil dort Blau ohnehin gewollt ist. */
  .nav-links-mobile__actions .btn-gold{color:#fff;}
  @media (max-width:640px){
    .nav-links-mobile__actions{display:flex;}
  }

  /* ---------- Hero ---------- */
  .hero{padding:0;position:relative;overflow:hidden;background:var(--paper);}

  /* --- Hero nach Variante B (Claude Design, 2026-09-08) ----------------
     Der Schleier liegt nicht über allem, sondern läuft von links aus und
     endet vor dem Laptop: bei 1440 px bei 66 %, bei 820 px bei 72 %.
     Unter 640 px kippt er nach unten. Foto retuschiert. */
  .hero-claim-overlay{position:absolute;inset:0;display:flex;flex-direction:column;line-height:normal;}
  .hero-scrim-seite{position:absolute;inset:0;
    /* Entwurf B, Deckkraft zweimal um 20 % reduziert (2026-09-08):
       .72 -> .461, .67 -> .429, .48 -> .307, .19 -> .122 — insgesamt 36 %
       weniger Maske als im Entwurf. */
    background:linear-gradient(90deg,rgba(10,16,26,.4608) 0%,rgba(10,16,26,.4288) 26%,
      rgba(10,16,26,.3072) 44%,rgba(10,16,26,.1216) 56%,rgba(10,16,26,0) 66%);}
  .hero-scrim-oben{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,16,26,.2816) 0%,rgba(10,16,26,.0512) 22%,
      rgba(10,16,26,0) 40%);}
  .hero-claim-spacer-oben{flex:2;}
  .hero-claim-spacer-unten{flex:1;}
  .hero-claim-inner{max-width:var(--breite-inhalt);margin:0 auto;padding:0 var(--abstand-rand);width:100%;position:relative;z-index:1;}
  /* Typo-Stufen des Claims. 68px ist der Zielwert am Desktop; darunter
     skaliert er mit der Fensterbreite, damit die drei gesetzten Zeilen
     überall im dunklen Bildbereich bleiben und nie über den Laptop laufen.
       ab ~1447px  68px   (Zielwert)
       1280px      60px
       1100px      52px
       901px       42px  */
  .hero-claim{max-width:57%;line-height:var(--zeile-hero);letter-spacing:-0.005em;
    font-size:var(--heading-hero);font-weight:800;color:#fff;
    text-shadow:0 2px 18px rgba(8,13,22,.55);}
  /* Zweite Zeile der Subline: eigene Zeile, kraeftiger, gleiche Groesse —
     klar abgesetzt, aber keine zweite Headline. */
  .hero-claim-sub strong{display:block;font-weight:700;margin-top:4px;}
.hero-claim-sub{text-wrap:balance;}
  .hero-claim-sub{max-width:50%;margin-top:22px;font-size:var(--heading-hero-sub);
    font-weight:500;line-height:var(--zeile-text-eng);color:#fff;
    text-shadow:0 2px 14px rgba(8,13,22,.6);}
  .hero-claim-cta{display:flex;gap:14px;margin-top:var(--abstand-block);flex-wrap:wrap;}
  .hero-claim-cta .btn-gold,.bento-cta .btn-gold{background:var(--gold-cta-hero);
    font-size:var(--text-button);font-weight:800;padding:16px 26px;
    min-height:44px;letter-spacing:.8px;line-height:var(--zeile-kompakt);}
  .hero-claim-cta .btn-gold:hover,.bento-cta .btn-gold:hover{background:var(--gold-cta-hero);opacity:.9;}
  /* v304: "Erste Finanzierung anbieten" sieht bis auf die Farbe aus wie "Jetzt Partner werden"
     (Entscheidung 25.09.2026): gleiches Gewicht 800, Laufweite, Innenabstand und Pfeil rechts.
     Bewusste Ausnahme von der Regel "Navy-Knoepfe Gewicht 500": beide Wege sind gleichwertige Einstiege. */
  .hero-claim-cta .hero-finanzierung-knopf{font-size:var(--text-button);font-weight:800;padding:16px 26px;
    min-height:44px;letter-spacing:.8px;line-height:var(--zeile-kompakt);gap:8px;}
  /* Zentraler CTA unter den vier Bento-Boxen, ohne eigene Karte */
  .bento-cta{display:flex;justify-content:center;margin-top:var(--abstand-block-gross);}
  @media (max-width:640px){ .bento-cta{margin-top:40px;} }

  /* Tablet: 641–900px — 44px am oberen Rand, 34px am unteren */
  @media (max-width:900px){
    .hero-claim{max-width:70%;line-height:var(--zeile-hero);letter-spacing:-.01em;}
    .hero-claim-sub{max-width:56%;margin-top:18px;}
    .hero-claim .br-b{display:none;}
  }
  @media (max-width:640px){
    .hero-claim-overlay{justify-content:flex-end;}
    .hero-scrim-seite{background:linear-gradient(0deg,rgba(14,20,30,.4736) 0%,rgba(14,20,30,.4416) 34%,
      rgba(14,20,30,.2816) 58%,rgba(14,20,30,.0896) 78%,rgba(14,20,30,.0256) 100%);}
    .hero-scrim-oben{background:linear-gradient(180deg,rgba(10,16,26,.3072) 0%,rgba(10,16,26,.0512) 18%,
      rgba(10,16,26,0) 32%);}
    .hero-claim-spacer-oben,.hero-claim-spacer-unten{display:none;}
    .hero-claim-inner{padding:0 var(--abstand-rand) var(--abstand-karte);}
    /* Mobil: bis 640px — 34px am oberen Rand, 30px bei 375px */
    .hero-claim{max-width:100%;line-height:var(--zeile-titel);letter-spacing:-.01em;}
    .hero-claim .br-a,.hero-claim .br-b{display:none;}
    .hero-claim-sub{max-width:100%;line-height:var(--zeile-text-eng);margin-top:14px;}
    .hero-claim-cta{margin-top:22px;}
    .hero-claim-cta .btn-gold,.hero-claim-cta .hero-finanzierung-knopf{width:100%;justify-content:center;
      padding:16px 22px;min-height:48px;}
  }

  /* Wiederhergestellt: diese Regeln gingen beim Umbau des Hero-Claims (v5)
     verloren. Der CTA im blauen Band war dadurch blau auf blau, also unsichtbar. */

  /* Fließtext im blauen Band — hatte nie eine eigene Regel und erbte
     dadurch Schwarz auf Blau (3,1:1). */
  .hero-photo{border:none;border-radius:0;background:#EFF1F4;padding:0;width:100%;position:relative;overflow:hidden;line-height:0;}
  /* Foto wird vollständig gezeigt, nichts beschnitten und nichts verzerrt */
  .hero-photo img{width:100%;height:800px;display:block;object-fit:cover;object-position:52% 0%;}
  @media (max-width:900px){ .hero-photo img{height:560px;object-position:56% 45%;} }
  @media (max-width:640px){ .hero-photo img{height:620px;object-position:60% 40%;} }
  /* Zweites Foto über die volle Breite */
  .hero-photo + .hero-photo img{aspect-ratio:16/9;}
  .hero-photo code{font-family:var(--mono);font-size:var(--text-caption);color:var(--ink-muted);position:relative;z-index:1;}


  /* ---------- Rechner ---------- */
  .rechner-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-flaeche);padding:var(--abstand-karte-gross);box-shadow:var(--schatten-karte);position:relative;overflow:hidden;}
  input[type=range]{accent-color:var(--gold-500);} /* Rechner-Slider in Markengold */
  .rechner-head{text-align:center;margin-bottom:var(--abstand-gitter);}
  .rechner-head p{font-size:var(--text-small);color:var(--ink-muted);}
  /* v343: nach kredpal-bauteile.css verschoben */
  /* Schmale Geraete: Jahresangabe ausblenden, damit nichts umbricht */
  @media (max-width:480px){ .term-btn{padding-right:12px;padding-left:44px;} .term-btn .check{left:14px;} .term-btn .years{display:none;} }

  .preview-card{background:var(--navy-900);border-radius:0;padding:10px 12px;}
  .preview-card .months{font-size:var(--text-caption);color:#AEB9C9;}
  .preview-card .amount{font-family:var(--mono);font-size:var(--text-body);font-weight:500;color:var(--live-accent-400);margin-top:4px;}
  .preview-card .amount span{font-size:var(--text-caption);color:#AEB9C9;}

  /* ---------- Was bedeutet das fuer Ihren Betrieb? ----------
     Reine Typo-Section auf Weiss: keine Karten, keine Icons, keine Eyebrow.
     Drei gleich breite Spalten, getrennt nur durch feine Linien. */
  .betrieb{background:var(--card);border-top:1px solid var(--line);}
  .betrieb-kopf{margin:0 0 var(--abstand-kopf);}
  /* Gleicher H2-Style wie „So einfach wird Finanzierung Teil Ihres Angebots."
     (.bento-head h2), Farbe wie die uebrigen H2 auf Weiss. */
  .betrieb-kopf h2{font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);
    color:var(--accent-500);}
  .betrieb-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .betrieb-spalte{padding:4px 40px;}
  .betrieb-spalte:first-child{padding-left:0;}
  .betrieb-spalte:last-child{padding-right:0;}
  .betrieb-spalte + .betrieb-spalte{border-left:1px solid var(--line);}
  .betrieb-spalte h3{font-family:var(--disp);font-size:var(--heading-h3);font-weight:700;
    line-height:var(--zeile-normal);color:var(--navy-900);margin:0 0 14px;}
  .betrieb-spalte p{font-size:var(--text-body);line-height:var(--zeile-lesen);color:var(--ink-muted);margin:0;}
  @media (max-width:900px){
    .betrieb-spalten{grid-template-columns:1fr;}
    .betrieb-spalte,.betrieb-spalte:first-child,.betrieb-spalte:last-child{padding:var(--abstand-karte) 0;}
    .betrieb-spalte:first-child{padding-top:0;}
    .betrieb-spalte:last-child{padding-bottom:0;}
    .betrieb-spalte + .betrieb-spalte{border-left:0;border-top:1px solid var(--line);}
  }
  /* Kundenflaeche: EINE helle Flaeche (--paper), Radius 20px wie die
     uebrigen Karten, volle Content-Breite. Links Label und Ueberschrift,
     rechts die vier Punkte in zwei Spalten. Keine Icons, keine Linien. */
  .betrieb-vergleich{margin-top:72px;background:var(--paper);border-radius:var(--radius-flaeche);
    padding:var(--abstand-block) var(--abstand-spalten);display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:56px;align-items:center;}
  .betrieb-seite .eyebrow{margin-bottom:12px;}
  .betrieb-seite h3{font-family:var(--disp);font-size:var(--heading-h3);font-weight:700;
    line-height:var(--zeile-normal);color:var(--navy-900);margin:0;}
  /* Zwei Spalten in Textbreite, damit keine Zeile umbricht */
  .betrieb-liste{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(2,max-content);gap:12px 56px;}
  /* Reine Textzeilen ohne Aufzaehlungszeichen */
  .betrieb-liste li{font-size:var(--text-body);line-height:var(--zeile-lesen);color:var(--ink-muted);}
  @media (max-width:1100px){
    .betrieb-vergleich{grid-template-columns:1fr;gap:24px;}
  }
  @media (max-width:900px){
    .betrieb-vergleich{margin-top:48px;padding:24px;gap:16px;}
    .betrieb-liste{grid-template-columns:1fr;gap:6px;}
  }





  /* Ohne Rahmen — die Logos laufen frei vorbei, das wirkt ruhiger als eine Kachelreihe.
     Feste Breite behalten wir, damit beim Laufen nichts springt. */
  /* Jedes Logo bekommt denselben Platz. Das ergibt in der Bewegung den ruhigsten
   Rhythmus. Damit die Lücken nicht zu unterschiedlich wirken, sind die Logos
   vorher auf eine ähnliche Breite gebracht worden. */

  /* ---------- Price compare ---------- */
  .section-head{text-align:center;max-width:640px;margin:0 auto var(--abstand-kopf);}
  .section-head h2{font-weight:500;letter-spacing:-0.02em;font-size:var(--heading-section-h2);}
  .section-head p{color:var(--ink-muted);margin-top:12px;font-size:var(--text-body);}

  /* ---------- Angebot-Mockup ---------- */
  /* Konfigurator links, Angebotsvorschau rechts (v96): beide gleichzeitig
     sichtbar. Nur Anordnung, die Komponenten selbst sind unveraendert. */
  /* Gemeinsame H2 ueber beiden Boxen, Stil wie .betrieb-kopf / .bento-head h2 */
  .konfig-kopf{margin:0 0 var(--abstand-kopf);}
  /* Eyebrow auf Navy im Gold wie bei „KredPal auf einen Blick" (.bento-head) */
  .konfig-kopf .eyebrow{color:#D9A63C;}
  .konfig-kopf h2{font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);
    color:#fff;}
  /* v101: dunkle Schwester von „KredPal auf einen Blick" — gleicher Grund,
     Angebot links in derselben Breite wie oben (Spiegel des Rasters
     41 % / Rest), schlankes Einstellpanel rechts ohne eigene Box. */
  .konfig-section{background:var(--verlauf-navy);}
  .konfig-duo{display:grid;grid-template-columns:minmax(0,1fr) 41%;gap:var(--abstand-spalten);
    align-items:start;}
  .konfig-duo .angebot-live{order:-1;}
  .konfig-duo .rechner-card{background:none;border:0;border-radius:0;box-shadow:none;
    padding:0;overflow:visible;}
  /* Nur Textfarben fuer Navy; Controls behalten ihre hellen Flaechen */
  .konfig-duo .rechner-head p{color:var(--auf-dunkel);}
  /* Angebotssumme als Pille: Name links, Eingabe rechts */
  .wert-pille{margin-bottom:18px;}
  .wert-feld{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;
    border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);}
  .wert-feld input{width:96px;border:0;background:none;padding:0;text-align:right;
    font-family:var(--disp);font-size:var(--text-input);font-weight:600;color:#fff;-moz-appearance:textfield;}
  .wert-feld input::-webkit-outer-spin-button,.wert-feld input::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0;}
  /* Kein Ring am Eingabefeld selbst: der Rahmen des umgebenden Feldes
     (.wert-feld:focus-within) ist der sichtbare Fokuszustand. */
  .wert-feld input:focus-visible{outline:none;}
  .wert-feld:focus-within{border-color:rgba(255,255,255,.55);}
  .wert-feld em{font-style:normal;font-family:var(--disp);font-size:var(--text-body);font-weight:600;color:var(--auf-dunkel);}
  /* v343: nach kredpal-bauteile.css verschoben */
  /* v343: nach kredpal-bauteile.css verschoben */
  /* Zweite Instanz des Kunden-Angebots aus „KredPal auf einen Blick":
     dieselben Klassen und Stile, nur im normalen Fluss statt im 4:3-Display. */
  .solo-display.angebot-live{height:auto;}
  .angebot-live .solo-screen{position:relative;inset:auto;opacity:1;visibility:visible;
    pointer-events:auto;}
  /* Raten-Kacheln der Live-Vorschau in den Farben der urspruenglichen
     Vorschau (.preview-card): Kachel = --navy-900, Rate = --live-accent-400,
     Beschriftung hellgrau. Beide Werte setzt der Konfigurator live. */
  .angebot-live .qk-option,.angebot-live .qk-option.gewaehlt{background:var(--navy-900);
    border-color:transparent;box-shadow:none;}
  .angebot-live .qk-option b,.angebot-live .qk-option.gewaehlt b,
  .angebot-live .qk-option em{color:var(--auf-dunkel);}
  .angebot-live .qk-option strong,.angebot-live .qk-option.gewaehlt strong{color:var(--live-accent-400);}
  /* Button: KredPal-Blau, bis im Konfigurator eine Akzentfarbe gewaehlt wird */
  .angebot-live .qk-cta{background:var(--marke-akzent,var(--accent-500));}
  @media (max-width:1100px){ .konfig-duo{gap:36px;grid-template-columns:minmax(0,1fr) 45%;} }
  /* Tablet 641-900px (v213): Angebot links, Rechner rechts bleiben
     nebeneinander — gestapelt waere der Rechner beim Aendern nicht mehr im
     Bild. Die Bedienelemente passen sich per auto-fit an die schmalere
     Spalte an. Erst unter 640px wird gestapelt. */
  @media (max-width:900px){ .konfig-duo{grid-template-columns:minmax(0,1fr) 48%;gap:22px;}
    /* Rechner-Pills in der schmaleren Tablet-Spalte (v214): Labels und Werte
       von body (16) auf small (14). Nur Rechner, nur 641-900px. */
    .rechner-card .farb-pille span,.rechner-card .wert-feld em,.rechner-card .term-btn .months{font-size:var(--text-small);}
  }
  /* Farb-Pillen auch bei 390px nebeneinander (v216): je Pille bleiben rund
     170px. Dafuer Label auf xs (13px), Innenabstand und Luecke zum Farbkreis
     enger. Ohne diese drei Eingriffe passt „Hintergrundfarbe" nicht. */
  @media (max-width:480px){
    .farb-pillen{grid-template-columns:1fr 1fr;gap:8px;}
    .farb-pillen .farb-pille{gap:8px;padding:9px 10px 9px 14px;}
    .farb-pillen .farb-pille span{font-size:var(--text-xs);white-space:nowrap;}
  }
  /* Unter 640px gestapelt, Angebot zuerst (v215): der Kunde sieht das Ergebnis,
     darunter die Einstellungen — wie auf Desktop von links nach rechts. */
  @media (max-width:640px){ .konfig-duo{grid-template-columns:1fr;gap:28px;} }

  /* ---------- Branchen (v93) ----------
     Grosse Bildkarten im horizontalen Slider: Desktop 3, Tablet 2, Mobil
     ca. 1,2 Karten sichtbar. Hoehe 2/3 der Breite, Radius 20px wie die
     uebrigen Karten. Laeuft langsam in Endlosschleife von rechts nach links
     (v94); dezente Fortschrittsanzeige. Kein Einrasten, sonst stoert es
     das gleichmaessige Laufen. */
  /* Kopf der Branchen-Section: grosser H2-Stil wie die uebrigen Sections,
     ab Tablet einzeilig. */
  /* Section-Grund fuer Moment und Branchen; Moment ohne unteren Abstand,
     weil die Bildkomposition direkt an die Branchen-Section anschliesst.
     Vorher Inline-Styles im Markup (v166). */
  .moment{background:var(--card);padding-bottom:0;}
  #branchen{background:var(--card);}
  #branchen .section-head,.moment .section-head{max-width:none;}
  #branchen .section-head h2,.moment .section-head h2{font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);
    letter-spacing:-0.01em;color:var(--accent-500);}
  @media (min-width:901px){ #branchen .section-head h2{white-space:nowrap;} }
  .branchen-grid{display:flex;gap:var(--abstand-gitter);overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .branchen-grid::-webkit-scrollbar{display:none;}
  .branchen-grid.ziehen{cursor:grabbing;}
  .branch-tile{flex:0 0 calc((100% - 48px) / 3);aspect-ratio:3/2;
    position:relative;overflow:hidden;border-radius:var(--radius-flaeche);display:flex;align-items:flex-end;
    padding:var(--abstand-gitter) var(--abstand-karte);background:linear-gradient(155deg,var(--accent-400),var(--navy-900));
    user-select:none;}
  .branch-tile .branch-icon{display:none;}
  .branch-foto{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
    display:block;z-index:0;filter:brightness(1.1) saturate(1.04);transition:transform var(--dauer-lang) var(--kurve);
    pointer-events:none;}
  .branch-tile:hover .branch-foto{transform:scale(1.03);}
  /* Nur fuer die Lesbarkeit des Namens: leichter Verlauf von unten */
  .branch-tile:before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(0deg,rgba(11,18,32,.52) 0%,rgba(11,18,32,.14) 42%,rgba(11,18,32,0) 66%);}
  .branch-tile span{position:relative;z-index:2;font-family:var(--disp);font-weight:700;
    font-size:var(--heading-h3);line-height:var(--zeile-normal);color:#fff;
    text-shadow:0 1px 8px rgba(0,0,0,.35);}
  .branchen-fortschritt{max-width:240px;margin:var(--abstand-block) auto 0;padding:8px 0;cursor:pointer;}
  .branchen-fortschritt[hidden]{display:none;}
  .bf-spur{position:relative;height:2px;border-radius:2px;background:var(--line);overflow:hidden;}
  .bf-spur span{position:absolute;top:0;left:0;height:100%;border-radius:2px;
    background:var(--accent-400);transition:left .15s linear;}
  @media (max-width:900px){ .branch-tile{flex-basis:calc((100% - 24px) / 2);} }
  /* War 600px — angehoben auf 640px, die tragende Kante zu Smartphone-Panorama
     im Rest des Codes. Zwischen 600 und 640px lief die Karte sonst noch mit der
     zwei-Spalten-Regel aus der 900px-Stufe: bei 601–639px zu schmal für zwei
     Kacheln nebeneinander, ohne dass die Einzelkarten-Ansicht schon griff. */
  @media (max-width:640px){ .branchen-grid{gap:16px;} .branch-tile{flex-basis:82%;padding:20px 22px;} }


  /* ---------- Registration ---------- */

  /* ---------- FAQ ---------- */
  /* ---------- FAQ, Editorial-Accordion mit zwei Tabs (2026-09-09) ----------
     Feste Maße nach Vorgabe: Inhaltsbreite 1180px, geschlossene Zeile 86px,
     Fragen 19px/600 in Dunkelblau, Antworten 17px in Blaugrau. */
  #faq{padding:var(--abstand-section-gross) 0 110px; /* unten bewusst 110: Luft vor dem Footer */background:var(--card);border-top:1px solid var(--line);}
  /* eigene Spalte: der Rest der Seite läuft auf 1120px, dieser Block auf 1180px */
  .faq-wrap{max-width:1244px;margin:0 auto;padding:0 var(--abstand-rand);}
  .faq-kopf{max-width:760px;}
  .faq-kopf h2{font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);
    color:var(--accent-600);letter-spacing:-.015em;}
  .faq-intro{margin-top:18px;font-size:var(--text-lead);line-height:var(--zeile-text);color:#54677E;}

  .faq-tabs{display:flex;gap:36px;margin-top:var(--abstand-block);
    border-bottom:1px solid var(--line);}
  .faq-tab{background:none;border:0;padding:0 0 14px;cursor:pointer;position:relative;
    font-family:var(--disp);font-size:var(--text-button);font-weight:600;color:#5F7288;
    transition:color var(--dauer-kurz) var(--kurve);}
  .faq-tab:hover{color:var(--accent-600);}
  .faq-tab[aria-selected="true"]{color:var(--accent-600);}
  .faq-tab[aria-selected="true"]:after{content:"";position:absolute;left:0;right:0;
    bottom:-1px;height:2px;background:var(--accent-500);}
  .faq-tab:focus-visible{outline:2px solid var(--gold-500);outline-offset:4px;}

  .faq-list{margin-top:22px;}
  .faq-panel[hidden]{display:none;}
  .faq-item{border-bottom:1px solid var(--line);padding:var(--abstand-gitter) 0;}
  .faq-item.open{padding-bottom:20px;}
  .faq-h{margin:0;}
  .faq-q{width:100%;background:none;border:0;padding:0 10px;text-align:left;
    display:flex;justify-content:space-between;align-items:center;gap:var(--abstand-gitter);
    cursor:pointer;font-family:var(--disp);font-weight:600;font-size:var(--heading-h3);
    line-height:var(--zeile-normal);color:var(--accent-600);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height var(--dauer) var(--kurve);
    padding:0 10px;color:#54677E;font-size:var(--text-lead);line-height:var(--zeile-text);max-width:820px;}
  /* max-height ist nur die Obergrenze der Aufklapp-Animation, nicht die
     gemessene Höhe — sie muss über der längsten Antwort liegen. */
  /* max-height ist nur die Obergrenze der Aufklapp-Animation, nicht die
     gemessene Hoehe. Die laengste Antwort ist die Projektliste im Kunden-Tab;
     der Wert muss darueber liegen, sonst wird sie beschnitten. */
  .faq-item.open .faq-a{max-height:640px;padding-top:12px;}
  /* Listen in den Antworten: das globale Reset nimmt Aufzaehlungszeichen und
     Einzug, beides wird hier fuer den Antworttext wiederhergestellt. */
  .faq-liste{margin:10px 0 0;padding-left:22px;}
  .faq-liste li{margin-bottom:5px;}
  ul.faq-liste{list-style:disc;}
  ol.faq-liste{list-style:decimal;}
  .faq-absatz{margin-top:12px;}
  /* Icons: Font Awesome Free 6.7.2, https://fontawesome.com — Icons CC BY 4.0.
     Die beiden Chevron-Pfade sind unveraendert aus dem Paket uebernommen. */
  /* Accordion-Icon: Font-Awesome-Chevron (6.7.2, CC BY 4.0) in einem feinen
     Kreis. Kreis 26px, damit die Zeilenhoehe unveraendert bei 75px bleibt. */
  .faq-icon{position:relative;width:28px;height:28px;min-width:28px;min-height:28px;
    flex:0 0 28px;flex-shrink:0;aspect-ratio:1 / 1;border-radius:var(--radius-kreis);box-sizing:border-box;
    border:1px solid var(--accent-500);background:transparent;
    display:inline-flex;align-items:center;justify-content:center;}
  .faq-icon svg{position:absolute;width:11px;height:11px;fill:var(--accent-500);
    transition:opacity var(--dauer-kurz) var(--kurve), transform var(--dauer-kurz) var(--kurve);}
  .faq-icon .fa-chevron-up{opacity:0;transform:rotate(-180deg);}
  .faq-item.open .faq-icon .fa-chevron-down{opacity:0;transform:rotate(180deg);}
  .faq-item.open .faq-icon .fa-chevron-up{opacity:1;transform:rotate(0);}
  @media (prefers-reduced-motion: reduce){ .faq-icon svg{transition:none;} }
  @media (max-width:640px){
    #faq{padding:64px 0 72px;}
    .faq-wrap{padding:0 var(--abstand-rand);}
    .faq-tabs{gap:24px;margin-top:var(--abstand-block);}
  }
  .faq-q:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;}

  /* ---------- Footer ---------- */
  /* Footer: exakt der Grund der Bento-Section (Variable), beginnt direkt
     auf dem weissen Bereich darueber — keine Linie, kein Schatten. */
  footer{background:var(--bento-grund);padding:var(--abstand-section) 0 var(--abstand-block-gross);color:var(--auf-dunkel);}
  .footer-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:40px;}
  /* Logo wie im Header auf dunklem Grund (weiss, „Pal" leicht zurueckgenommen), nur groesser */
  footer .logo{--logo-kred:#fff;--logo-pal:#C6C8CC;}
  footer .logo-svg{height:34px;}
  .footer-links{display:flex;gap:14px 36px;flex-wrap:wrap;padding-top:10px;}
  .footer-links a{font-size:var(--text-body);font-weight:500;color:var(--auf-dunkel-stark);}
  .footer-links a:hover{color:#fff;}
  .footer-bottom{margin-top:var(--abstand-block);font-size:var(--text-caption);color:var(--auf-dunkel);}
  @media (max-width:640px){
    footer{padding:56px 0 44px;}
    footer .logo-svg{height:28px;}
    .footer-row{flex-direction:column;gap:28px;}
    .footer-links{padding-top:0;gap:12px 24px;order:2;}
    /* Copyright auf dem Telefon zuletzt, unter den Links */
    .footer-marke{display:contents;}
    .footer-bottom{order:3;margin-top:0;}
  }

  /* ---------- Chat ----------
     v261: Das Panel war bis v260 fuer genau eine Nachricht gebaut — ohne
     Hoehenbegrenzung und ohne Scrollbereich waere es ab der zweiten Antwort
     ueber den Bildschirmrand hinausgewachsen. Jetzt traegt es einen festen
     Rahmen: Kopf und Eingabe stehen, nur der Verlauf dazwischen scrollt.
     Aufbau uebernommen aus dem laufenden Chat der Bestandsseite (Kopf mit
     KI-Kennzeichnung, Zuruecksetzen, Schliessen), Formensprache aus den
     Token dieser Seite. */
  .chat-bubble{border:0;padding:0;position:fixed;bottom:22px;right:22px;z-index:var(--ebene-chat);width:48px;height:48px;border-radius:var(--radius-karte);background:var(--accent-500);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 22px -8px rgba(27,44,74,.4);opacity:0;transform:scale(.6);pointer-events:none;transition:opacity var(--dauer-lang) cubic-bezier(.34, 1.56, .64, 1), transform var(--dauer-lang) cubic-bezier(.34, 1.56, .64, 1);}
  .chat-bubble.show{opacity:1;transform:scale(1);pointer-events:auto;}
  .chat-bubble:focus-visible{outline:2px solid var(--navy-900);outline-offset:3px;}
  .chat-bubble img{width:44px;height:44px;border-radius:11px;object-fit:cover;}

  /* Feste Hoehe, damit der Verlauf einen Scrollbereich bekommt: 560px ist die
     Wunschhoehe, auf kleinen Fenstern begrenzt sie die Fensterhoehe minus
     Blase und Rand. dvh statt vh wegen der iOS-Adressleiste. */
  .chat-panel{position:fixed;bottom:90px;right:22px;z-index:var(--ebene-chat);width:320px;max-width:88vw;height:min(560px, calc(100dvh - 140px));background:var(--card);border-radius:0;box-shadow:var(--schatten-schweben);display:none;overflow:hidden;border:1px solid var(--line);--fokus-farbe:var(--auf-dunkel-stark);}
  .chat-panel.open{display:flex;flex-direction:column;}

  /* Kopf und Eingabe schrumpfen nicht — sonst frisst ein langer Verlauf sie auf. */
  .chat-head{flex:0 0 auto;background:var(--accent-500);color:#fff;padding:16px 18px;display:flex;gap:12px;align-items:center;}
  .chat-head img{width:36px;height:36px;border-radius:9px;object-fit:cover;flex-shrink:0;}
  .chat-head .name{font-weight:600;font-size:var(--text-xs);font-family:var(--disp);display:flex;align-items:center;gap:8px;}
  .chat-head .status{font-size:var(--text-caption);color:var(--auf-dunkel-stark);}  /* --auf-dunkel waere auf dem Kopfblau nur 3,6:1; -stark liegt bei 5,1:1 */
  .chat-head__text{min-width:0;flex:1;}

  /* Kennzeichnung nach EU AI Act: dauerhaft sichtbar, nicht nur in der
     Begruessung, die beim Scrollen verschwindet. */
  .chat-ki-badge{font-size:10px;font-weight:700;letter-spacing:.06em;line-height:var(--zeile-zahl);padding:3px 6px;border-radius:4px;background:#fff;color:var(--accent-500);flex-shrink:0;}  /* weisse Flaeche statt aufgehelltem Blau: #fff auf 22%-Schleier ergaebe nur 4,1:1 */

  /* Zuruecksetzen und Schliessen. 34px wie der Schliessknopf der
     Detailansichten (Entscheidung 16.09.) — die Trefferflaeche waechst
     ueber ein Pseudoelement auf 44px, ohne das Layout zu veraendern. */
  .chat-head__aktionen{display:flex;gap:4px;flex-shrink:0;margin-left:auto;}
  .chat-aktion{position:relative;width:34px;height:34px;border:0;padding:0;background:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-kreis);transition:background var(--dauer-sofort) var(--kurve);}
  .chat-aktion::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
  @media (hover:hover){.chat-aktion:hover{background:rgba(255,255,255,.16);}}
  .chat-aktion svg{width:16px;height:16px;pointer-events:none;}

  /* Der einzige Bereich, der scrollt. Eigener Scrollbereich, damit die Seite
     dahinter nicht mitzieht. */
  .chat-verlauf{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--paper);}

  /* Zwei Rollen, unterschieden durch Farbe und Ausrichtung — nicht durch eine
     abgeschnittene Ecke: die Seite rundet Flaechen nicht an (Formensprache
     08.09.), eine Blasenform waere hier der einzige Ausreisser. */
  .chat-msg{max-width:86%;padding:10px 14px;font-size:var(--text-xs);line-height:var(--zeile-text-mittel);border-radius:0;}
  .chat-msg--assistent{align-self:flex-start;background:var(--card);border:1px solid var(--line);color:var(--ink);}
  .chat-msg--nutzer{align-self:flex-end;background:var(--accent-500);color:#fff;}
  .chat-msg p{margin:0 0 8px;}
  .chat-msg p:last-child{margin-bottom:0;}
  .chat-msg strong{font-weight:700;}

  /* Hinweis unter der Begruessung, zusaetzlich zum Badge im Kopf. */
  .chat-ki-hinweis{font-size:var(--text-caption);line-height:var(--zeile-text-mittel);color:var(--ink-muted);text-align:center;padding:0 8px;}
  .chat-ki-hinweis a{color:var(--gold-text);text-decoration:underline;}

  /* Eingabe (v262). Die Zeile traegt jetzt eine Textarea statt eines
     einzeiligen Feldes: 500 Zeichen passen nicht in eine Zeile, und wer
     seinen Text nicht sieht, tippt ihn nicht zu Ende. Sie waechst mit dem
     Inhalt bis fuenf Zeilen, danach scrollt sie in sich. */
  /* ---------- Chat: Laufzustaende (v263) ----------
     Tippanzeige, Abbrechen, Fehler und Rate-Limit. Alle vier sind Zustaende
     des laufenden Gespraechs und liegen im Verlauf, nicht in der Leiste. */

  /* Drei Punkte in einer Assistenten-Karte: die Wartezeit gehoert an die
     Stelle, an der die Antwort erscheinen wird. */
  .chat-tippt{align-self:flex-start;display:flex;gap:5px;align-items:center;background:var(--card);border:1px solid var(--line);padding:14px;}
  .chat-tippt span{width:7px;height:7px;border-radius:var(--radius-kreis);background:var(--accent-400);}
  /* Gleichmaessige Bewegung wie das Branchen-Laufband — deshalb linear und
     laenger als die vier Zustandsdauern. Kein Zustandswechsel, keine --kurve. */
  @media (prefers-reduced-motion: no-preference){
    .chat-tippt span{animation:chat-tippt 1.4s linear infinite;}
    .chat-tippt span:nth-child(2){animation-delay:.2s;}
    .chat-tippt span:nth-child(3){animation-delay:.4s;}
  }
  @keyframes chat-tippt{0%,60%,100%{opacity:.3;}30%{opacity:1;}}

  /* Stoerungen. Kein Rot im Markensystem — die Unterscheidung traegt der
     Rahmen in Gold und die zentrierte Stellung im Verlauf. */
  .chat-stoerung{align-self:stretch;background:var(--gold-050);border:1px solid var(--gold-500);padding:12px 14px;font-size:var(--text-xs);line-height:var(--zeile-text-mittel);color:var(--gold-text);display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
  .chat-stoerung__knopf{font-family:var(--body);font-size:var(--text-xs);font-weight:700;color:var(--gold-text);background:none;border:0;padding:6px 0;min-height:32px;text-decoration:underline;cursor:pointer;}
  .chat-stoerung__knopf::after{content:"";position:absolute;}

  /* Der Senden-Knopf wird waehrend einer laufenden Antwort zum Stopp-Knopf.
     Zwei Knoepfe nebeneinander waeren in 320px Breite zu eng, und nur einer
     von beiden ist je bedienbar. */
  .send-btn__stopp{display:none;}
  .send-btn.laeuft .send-btn__senden{display:none;}
  .send-btn.laeuft .send-btn__stopp{display:block;}

  .chat-input-row{flex:0 0 auto;display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--card);align-items:flex-end;}
  .chat-input-row input{flex:1;border:1px solid var(--line);border-radius:0;padding:10px 14px;font-size:var(--text-input);font-family:var(--body);background:var(--paper);color:var(--ink);}
  .chat-eingabe{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
  .chat-eingabe__feld{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:0;padding:10px 14px;font-size:var(--text-input);font-family:var(--body);line-height:var(--zeile-text-mittel);background:var(--paper);color:var(--ink);resize:none;max-height:calc(var(--text-input) * var(--zeile-text-mittel) * 5 + 20px);overflow-y:auto;}
  .chat-eingabe__feld::placeholder{color:var(--ink-muted);}

  /* Zeichenzaehler erscheint erst kurz vor der Grenze — ein dauerhaft
     mitlaufender Zaehler macht aus einer Frage eine Pruefung. Die Schwelle
     setzt das Skript ueber .sichtbar. */
  .chat-zaehler{align-self:flex-end;font-size:var(--text-caption);line-height:var(--zeile-normal);color:var(--ink-muted);opacity:0;transition:opacity var(--dauer-kurz) var(--kurve);}
  .chat-zaehler.sichtbar{opacity:1;}
  .chat-zaehler.knapp{color:var(--gold-text);font-weight:700;}

  /* Vorschlagsfragen (v262). Liegen im Verlauf und scrollen mit — sie sind
     Teil der Begruessung, nicht Teil der Bedienleiste. */
  .chat-vorschlaege{display:flex;flex-direction:column;gap:8px;}
  .chat-vorschlag{width:100%;text-align:left;font-family:var(--body);font-size:var(--text-xs);line-height:var(--zeile-text-mittel);color:var(--accent-500);background:var(--card);border:1px solid var(--line);border-radius:0;padding:11px 14px;min-height:44px;cursor:pointer;transition:background var(--dauer-sofort) var(--kurve),border-color var(--dauer-sofort) var(--kurve);}
  @media (hover:hover){.chat-vorschlag:hover{background:var(--paper);border-color:var(--accent-400);}}
  .chat-teaser{position:fixed;bottom:22px;right:22px;z-index:var(--ebene-chat-teaser);width:280px;max-width:88vw;background:var(--card);border:1px solid var(--line);border-radius:0;padding:20px;box-shadow:var(--schatten-schweben);opacity:0;transform:scale(.85);transform-origin:bottom right;pointer-events:none;transition:opacity var(--dauer) cubic-bezier(.34, 1.56, .64, 1), transform var(--dauer) cubic-bezier(.34, 1.56, .64, 1);cursor:pointer;text-align:center;}
  .chat-teaser.show{opacity:1;transform:scale(1);pointer-events:auto;}
  .chat-teaser img{width:64px;height:64px;border-radius:var(--radius-karte);object-fit:cover;margin-bottom:12px;}
  .chat-teaser .teaser-text{font-size:var(--text-xs);color:var(--ink);line-height:var(--zeile-text-mittel);}
  .chat-teaser .teaser-text b{color:var(--ink);font-family:var(--disp);}
  /* Sichtbar bleiben die 34px aus dem Entwurf; die Trefferflaeche waechst
     ueber ein Pseudoelement auf 44px, ohne das Layout zu veraendern. */
  .mic-btn,.send-btn{position:relative;width:34px;height:34px;border-radius:0;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background var(--dauer-sofort) var(--kurve),opacity var(--dauer-sofort) var(--kurve);}
  .mic-btn::after,.send-btn::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
  .mic-btn{background:var(--gold-050);color:var(--gold-500);}
  .send-btn{background:var(--gold-500);color:#fff;}
  /* Leeres Feld: der Knopf bleibt sichtbar, nimmt aber keine Eingabe an.
     Kein display:none — ein verschwindender Knopf laesst die Zeile springen. */
  .send-btn:disabled{opacity:.45;cursor:default;}
  @media (hover:hover){.send-btn:not(:disabled):hover{background:var(--gold-400);}}

  /* Auf dem Telefon nimmt das Panel das ganze Fenster ein: 320px neben dem
     Daumen sind zu schmal fuer ein Gespraech, und die Tastatur schoebe das
     schwebende Panel aus dem Bild. */
  @media (max-width:640px){
    .chat-panel{inset:0;width:auto;max-width:none;height:100dvh;border:0;}
    .chat-panel.open ~ .chat-bubble,.chat-panel.open ~ .chat-teaser{display:none;}
    .chat-msg{max-width:90%;font-size:var(--text-small);}
  }

  /* Reduzierte Bewegung: Blase und Teaser blenden nur, sie federn nicht. */
  @media (prefers-reduced-motion: reduce){
    .chat-bubble,.chat-teaser{transition:opacity var(--dauer-kurz) var(--kurve);transform:none;}
    .chat-bubble.show,.chat-teaser.show{transform:none;}
    .chat-aktion{transition:none;}
  }

  /* ---------- Gestapelte Karten (Vorbild: PayPal-Startseite) ----------
     Jede Karte klebt beim Scrollen oben fest, die nächste schiebt sich
     darüber. Die dahinterliegenden schrumpfen leicht und treten zurück. */
  /* overflow:visible ist nötig: die globale section-Regel setzt overflow:hidden,
     und das schaltet position:sticky bei den Karten ab. */
  .stapel{background:var(--card);padding:var(--abstand-section) 0 var(--abstand-section-gross);overflow:visible;}
  .stapel-kopf{max-width:none;margin:0 0 var(--abstand-kopf);}
  /* Typografie wie .bento-head h2 (obere Section), Farbe bleibt. */
  .stapel-kopf h2{font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);
    color:var(--accent-500);}
  .stapel-kopf p{margin-top:14px;font-size:var(--text-lead);line-height:var(--zeile-text);color:var(--ink-muted);}
  .stapel-liste{position:relative;}
  .stapel-karte{position:sticky;top:calc(104px + var(--i) * 16px);
    border-radius:22px;overflow:hidden;margin-bottom:var(--abstand-karte);
    display:grid;grid-template-columns:1fr 1fr;min-height:400px;
    transform-origin:center top;will-change:transform;
    box-shadow:0 30px 60px -34px rgba(16,24,40,.55);}
  .stapel-karte:last-child{margin-bottom:0;}
  .stapel-inhalt{padding:var(--abstand-karte-gross);display:flex;flex-direction:column;}
  .stapel-eyebrow{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;opacity:.75;}
  .stapel-karte h3{font-size:var(--heading-stapel-h3);font-weight:800;line-height:var(--zeile-ueberschrift);
    letter-spacing:-.01em;margin-bottom:16px;}
  .stapel-karte p{font-size:var(--text-body);line-height:var(--zeile-text);margin-bottom:16px;max-width:420px;}
  .stapel-nebensatz{font-size:var(--text-body);font-weight:600;opacity:.85;margin-bottom:var(--abstand-gitter);}
  .stapel-cta{margin-top:auto;align-self:flex-start;border-radius:var(--radius-voll);
    padding:13px 24px;font-size:var(--text-button);font-weight:700;min-height:44px;
    display:inline-flex;align-items:center;gap:8px;}
  /* Keine eigene Fläche mehr: der Verlauf der Karte läuft durch beide Hälften. */
  .stapel-bild{display:flex;align-items:center;
    justify-content:center;font-family:var(--mono);font-size:var(--text-caption);letter-spacing:.08em;
    text-transform:uppercase;}

  /* Farbstellungen aus dem Markenkanon.
     Der Verlauf ist derselbe wie bei den Bento-Karten weiter unten:
     Winkel 152deg, Stopps 0/46/100, dazu dieselbe radiale Aufhellung
     von links oben. Die Endpunkte sind aus der jeweiligen Grundfarbe
     gerechnet — gleicher Farbton, nur heller und dunkler, mit exakt der
     Helligkeitsspanne der Bento-Karten (+0.036 / −0.056 in OKLCH). */
  .stapel-dunkel{color:#fff;
    background:
      var(--verlauf-licht),
      var(--verlauf-dunkel);}
  .stapel-dunkel .stapel-eyebrow{color:#9DBBDD;}
  .stapel-dunkel h3{color:#fff;}
  .stapel-dunkel p{color:var(--auf-dunkel);}
  .stapel-dunkel .stapel-cta{background:var(--gold-cta);color:#fff;}
  .stapel-dunkel .stapel-bild{color:rgba(255,255,255,.5);}

  .stapel-blau{color:#fff;
    background:
      var(--verlauf-licht),
      var(--verlauf-blau);}
  .stapel-blau .stapel-eyebrow{color:#D6E4F4;}
  .stapel-blau h3{color:#fff;}
  .stapel-blau p{color:#E2EAF3;}
  .stapel-blau .stapel-cta{background:#fff;color:var(--accent-500);}
  .stapel-blau .stapel-bild{color:rgba(255,255,255,.6);}

  .stapel-gold{color:#14202F;
    background:
      var(--verlauf-licht),
      var(--verlauf-gold);}
  .stapel-gold .stapel-eyebrow{color:#4A3403;}
  .stapel-gold h3{color:#14202F;}
  .stapel-gold p{color:#3A2C08;}
  .stapel-gold .stapel-cta{background:#14202F;color:#fff;}
  .stapel-gold .stapel-bild{color:rgba(20,32,47,.55);}

  @media (max-width:900px){
    .stapel{padding:56px 0 64px;}
    .stapel-karte{grid-template-columns:1fr;min-height:0;
      top:calc(92px + var(--i) * 12px);}
    .stapel-inhalt{padding:30px 24px;}
    .stapel-bild{min-height:200px;}
    /* Goldene Karte gestapelt (v185): der Button steht ganz unten, unter der
       Preisanzeige. Dafuer loesen sich die Textkinder aus ihrem Wrapper
       (display:contents) und werden direkt Rasterkinder der Karte — dann
       laesst sich die Reihenfolge per order setzen. Der Innenabstand des
       Wrappers wandert dafuer auf die Karte. */
    .stapel-gold{padding:30px 24px;}
    .stapel-gold .stapel-inhalt{display:contents;}
    .stapel-gold .stapel-bild{order:1;min-height:0;}
    .stapel-gold .stapel-preis{padding:8px 0 20px;}
    .stapel-gold .stapel-cta{order:2;justify-self:start;margin-top:4px;}
  }
  /* Ohne Bewegung: kein Kleben, kein Schrumpfen — einfach untereinander. */
  @media (prefers-reduced-motion: reduce){
    .stapel-karte{position:static;transform:none !important;}
  }

  /* Bildflächen der gestapelten Karten */
  /* Die Zahl trägt die rechte Hälfte allein: sehr groß, sehr leicht gesetzt.
     Keine Icons, keine Verläufe, keine Schatten — nur Typografie und Weißraum. */
  .stapel-zahl{flex-direction:column;gap:18px;text-transform:none;letter-spacing:normal;
    padding:var(--abstand-karte-gross);}
  .stapel-zahl-wert{font-family:var(--disp);font-size:var(--stat-zahl);font-weight:300;
    line-height:.86;color:#fff;letter-spacing:-.045em;display:flex;align-items:baseline;}
  .stapel-zahl-wert span{font-size:var(--stat-zahl-suffix-scale);font-weight:400;margin-left:.10em;
    letter-spacing:-.01em;}
  .stapel-zahl-label{font-size:var(--text-xs);font-weight:400;color:rgba(255,255,255,.55);
    letter-spacing:.01em;}
  /* Foto-Collage: Auto groß links (55 %), Küche und Möbel rechts übereinander. */
  .stapel-collage{display:grid;grid-template-columns:55fr 45fr;grid-template-rows:1fr 1fr;
    gap:8px;padding:var(--abstand-karte);text-transform:none;letter-spacing:normal;font-family:var(--body);
    align-items:stretch;}
  .stapel-foto{position:relative;margin:0;border-radius:var(--radius-kachel);overflow:hidden;
    background:rgba(255,255,255,.10);min-height:120px;}
  .stapel-foto-gross{grid-row:span 2;}
  .stapel-foto img{width:100%;height:100%;object-fit:cover;display:block;}
  .stapel-foto:after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;
    background:linear-gradient(180deg,rgba(10,16,26,0) 0%,rgba(10,16,26,.28) 55%,
      rgba(10,16,26,.66) 100%);
    pointer-events:none;}
  .stapel-foto figcaption{position:absolute;left:14px;bottom:12px;z-index:1;color:#fff;}
  .stapel-foto figcaption b{display:block;font-size:var(--text-small);font-weight:700;line-height:var(--zeile-kompakt);}
  .stapel-foto figcaption span{display:block;font-size:var(--text-caption);font-weight:400;
    color:rgba(255,255,255,.86);margin-top:2px;}

  /* Preis-Transformation direkt auf der Goldfläche — keine Karte, kein Rahmen,
     keine zusätzliche Farbe. Nur Dunkelblau auf Gold und viel freie Fläche. */
  .stapel-preis{flex-direction:column;justify-content:center;gap:4px;padding:var(--abstand-karte-gross);
    text-transform:none;letter-spacing:normal;font-family:var(--disp);background:none;}
  .stapel-preis-alt{font-size:var(--price-alt);font-weight:400;line-height:var(--zeile-zahl);
    color:rgba(20,32,47,.52);position:relative;display:inline-block;}
  .stapel-preis-alt:after{content:"";position:absolute;left:-3%;right:-3%;top:52%;
    height:1.5px;background:rgba(20,32,47,.52);}
  .stapel-preis-pfeil{color:rgba(20,32,47,.42);display:flex;margin:10px 0 4px;}
  .stapel-preis-neu{display:flex;flex-direction:column;align-items:center;
    color:#14202F;line-height:var(--zeile-zahl);}
  .stapel-preis-neu em{font-style:normal;font-size:var(--price-neu-suffix);font-weight:500;
    color:rgba(20,32,47,.66);letter-spacing:.01em;}
  .stapel-preis-neu strong{font-size:var(--price-neu);font-weight:800;
    line-height:var(--zeile-zahl);letter-spacing:-.035em;margin:2px 0 6px;}
  @media (max-width:900px){
    .stapel-collage{padding:20px;grid-template-rows:160px 160px;}
    .stapel-preis{padding:28px 24px 32px;}
    .stapel-zahl{padding:28px 0;}
  }

  /* ---------- Bento-Band unter dem Hero ---------- */
  /* Die Leiste klebt jetzt oben — Sprungziele brauchen Abstand,
     sonst verschwindet die Überschrift darunter. */
  section[id]{scroll-margin-top:96px;} /* Ankerversatz fuer die klebende Kopfleiste — kein Abstand-Token, andere Rolle */

  /* Fläche in abgedunkeltem Markenblau statt Schwarz — alle Töne sind
     Abstufungen von --accent-500 (#3B5C87), damit der Farbton stimmt. */
  .bento{padding:88px 0; /* bewusst 8px mehr Luft als --abstand-section */
    background:var(--bento-grund);}
  .bento-head{max-width:none;margin:0 0 var(--abstand-kopf);}
  .bento-head p{max-width:640px;}
  .bento-head .eyebrow{color:#D9A63C;}
  .bento-head h2{color:#fff;font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);}
  .bento-head p{color:#A9B8C9;font-size:var(--text-lead);line-height:var(--zeile-text);margin-top:14px;}
  .bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;}

  /* ---------- Detailansicht der ersten Bento-Karte (Prototyp) ----------
     Die Karte wird beim Oeffnen absolut ueber das Raster gelegt und nimmt
     genau dessen Flaeche ein. Dadurch bleibt die Sektionshoehe konstant und
     die Seite wird nicht laenger. Geometrie wird animiert, nicht skaliert —
     sonst verzerren Radien und Schrift. */
  /* Die Buehne ist der Bezugsrahmen der aufgeklappten Karte. Das Raster
     selbst darf es NICHT sein: ein absolut positioniertes Grid-Item mit
     fester Spaltenangabe wird in manchen Browsern relativ zu seiner
     Grid-Area statt zum Raster positioniert — die Karte springt dann. */
  .bento-buehne{position:relative;}
  .bento-grid.detail-offen > .bento-card:not(.detail-aktiv){
    opacity:0;visibility:hidden;transition:opacity var(--dauer) var(--kurve), visibility 0s linear var(--dauer);}
  /* Ganze Karte klickbar; auf Desktop mit Maus hebt sie sich beim Hover
     um 10px und kehrt beim Verlassen auf ihre Position zurueck. */
  .bento-card.detail-faehig{cursor:pointer;
    transition:transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);}
  .bento-card.detail-faehig.detail-aktiv{cursor:auto;}
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .bento-grid:not(.detail-offen) > .bento-card.detail-faehig:hover{transform:translateY(-10px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 56px -34px rgba(0,0,0,.9);}
  }
  .bento-card.detail-aktiv{position:absolute;z-index:3;margin:0;grid-area:auto;
    transition:top var(--dauer-lang) var(--kurve), left var(--dauer-lang) var(--kurve), width var(--dauer-lang) var(--kurve), height var(--dauer-lang) var(--kurve);}
  .bento-card.detail-aktiv > .bento-text,
  .bento-card.detail-aktiv > .bento-visual{opacity:0;transition:opacity var(--dauer-kurz) var(--kurve);
    pointer-events:none;}

  .bento-detail{position:absolute;inset:0;display:grid;
    grid-template-columns:41% 59%;gap:var(--abstand-spalten);padding:36px var(--abstand-karte-gross);
    opacity:0;transition:opacity .26s var(--kurve) .1s;}
  .bento-detail.sichtbar{opacity:1;}
  /* Autor-CSS mit display:grid schlaegt sonst das UA-[hidden] */
  .bento-detail[hidden]{display:none;}
  /* Gehoert zur Navy-Karte, nicht zum Angebot: liegt darum ueber allem. */
  .bento-detail-zu{position:absolute;top:20px;right:20px;z-index:var(--ebene-detail);
    width:34px;height:34px;min-width:34px;min-height:34px;flex:0 0 34px;
    aspect-ratio:1/1;border-radius:var(--radius-kreis);box-sizing:border-box;
    border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .18s var(--kurve), border-color .18s var(--kurve);}
  .bento-detail-zu:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);}
  .bento-detail-zu svg{width:12px;height:12px;fill:#DCE6F2;}
  .bento-detail-zu:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px;}

  /* Linke Spalte: rein typografische Themenauswahl, nur eines offen.
     Titel und Erklaerung liegen in EINER Flaeche — die Flaeche gehoert dem
     .bento-thema, Kopf und Text sind darin transparent. Sonst liest es sich
     als zwei gestapelte Boxen. */
  /* Feste Hoehe fuer die Liste: sonst waechst sie beim Oeffnen in beide
     Richtungen, weil sie vertikal zentriert steht. Mit fester Hoehe bleibt
     die Oberkante stehen und nur die Elemente darunter rutschen nach. */
  .bento-detail-themen{display:flex;flex-direction:column;gap:10px;
    align-self:center;min-width:0;height:344px;justify-content:flex-start;}
  /* Fester Radius von 23px statt einer Pill (9999px): bei 46px Hoehe sieht
     das identisch aus, aber die Box zieht sich beim Wachsen nicht seitlich
     ein. Mit 9999px werden die Seiten bei wachsender Hoehe zu Halbkreisen —
     die Box wirkt dann kurz schmaler. Der Radius wird deshalb auch nicht
     animiert. */
  .bento-thema{background:rgba(255,255,255,.05);border-radius:var(--radius-pille);
    overflow:hidden;flex-shrink:0;
    transition:background var(--dauer) var(--kurve);}
  .bento-thema:hover{background:rgba(255,255,255,.1);}
  .bento-thema.aktiv{background:rgba(255,255,255,.12);}
  .bento-thema-kopf{width:100%;background:none;border:0;
    padding:13px 20px;display:flex;align-items:center;gap:14px;
    cursor:pointer;text-align:left;min-height:46px;}
  .bento-thema-kopf:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:-3px;}
  .bento-thema-titel{flex:1;min-width:0;font-family:var(--disp);font-size:var(--text-body);
    font-weight:600;color:#fff;line-height:var(--zeile-normal);}
  .bento-thema-plus{width:14px;height:14px;flex:0 0 14px;display:inline-flex;
    align-items:center;justify-content:center;transition:opacity var(--dauer-kurz) var(--kurve);}
  .bento-thema-plus svg{width:11px;height:11px;fill:#9DBBDD;}
  /* Geoeffnet verschwindet das Plus ersatzlos — kein Minus, kein Kreuz. */
  .bento-thema.aktiv .bento-thema-plus{opacity:0;}
  .bento-thema-text{max-height:0;overflow:hidden;opacity:0;
    transition:max-height var(--dauer) var(--kurve), opacity var(--dauer-kurz) var(--kurve);}
  .bento-thema.aktiv .bento-thema-text{max-height:260px;opacity:1;}
  .bento-thema-text p{margin:0;padding:0 20px 18px;color:#C3D2E2;
    font-size:var(--text-small);line-height:var(--zeile-text);}

  /* Rechte Spalte: das bestehende Angebot, stark vergroessert und
     vom Kartenrand angeschnitten. Es ist dasselbe Element wie im
     Ausgangszustand, nur verschoben — kein zweites Angebot. */
  .bento-detail-visual{position:relative;min-width:0;}
  .bento-detail-visual .bento-offer{left:auto;right:-4%;top:54%;
    transform:translateY(-50%) perspective(4200px) rotateY(-6deg) rotateZ(-3deg) scale(1.87);
    transform-origin:right center;
    transition:transform .4s var(--kurve);}
  /* ---------- Bankenwand (Detailansicht Karte 2) ----------
     Drei Spalten aus denselben Logos wie im kleinen Stream — sie werden
     beim Oeffnen geklont, nicht ein zweites Mal in die Datei geschrieben.
     Jede Spalte laeuft in eine Richtung, oben und unten weich ausgeblendet. */
  /* Oben bleibt ein Navy-Streifen frei, damit der Schliessen-Knopf nicht auf
     einem Logo liegt; unten laeuft die Wand ueber den Kartenrand hinaus.
     Seitlich buendig, sonst werden die aeusseren Kacheln beschnitten. */
  .bento-wand{position:absolute;inset:56px 0 -36px 0;display:grid;
    grid-template-columns:repeat(3,1fr);gap:18px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);}
  /* Punkte 2 und 3 der Bankenvergleich-Box: statt der Logo-Wand ein weisser
     Produkt-Screen. Punkt 2 „Beste Konditionen" zeigt die Angebotsauswahl aus
     Schritt 4 (geklont), Punkt 3 „Mehr Chancen auf eine Zusage" ein Raster
     aus Banklogos, von denen fuenf als passend markiert werden. */
  #bentoDetailBank .bento-wand{transition:opacity .3s var(--kurve), visibility 0s linear 0s;}
  #bentoDetailBank[data-fokus="angebote"] .bento-wand,
  #bentoDetailBank[data-fokus="zusage"] .bento-wand{opacity:0;visibility:hidden;
    transition:opacity .3s var(--kurve), visibility 0s linear .3s;}
  /* right:48px — die Bildspalte laeuft um die Rasterluecke (48px) ueber den
     Innenrand hinaus; so endet der Screen buendig mit dem Innenabstand. */
  .bk-screen{position:absolute;left:0;right:48px;top:50%;transform:translateY(-50%);
    background:linear-gradient(170deg,#fff 0%,#F7F9FC 100%);border-radius:var(--radius-karte);padding:26px 30px;
    box-shadow:var(--schatten-geraet);
    opacity:0;visibility:hidden;transition:opacity .3s var(--kurve), visibility 0s linear .3s;}
  #bentoDetailBank[data-fokus="angebote"] .bk-angebote,
  #bentoDetailBank[data-fokus="zusage"] .bk-zusage{opacity:1;visibility:visible;
    transition:opacity .3s var(--kurve) .1s, visibility 0s linear 0s;}
  /* .bento-card p / .bento-detail p schlagen sonst in den Kopf durch */
  .bk-screen .qp-kopf .qp-titel{font-family:var(--disp);font-size:var(--mock-17);font-weight:800;color:#0F1720;margin:0;line-height:1.3;}
  .bk-screen .qp-kopf p{font-size:var(--mock-12);color:#7A8797;margin:4px 0 0;line-height:1.45;padding:0;}
  .bk-screen .qp-hinweis{font-size:var(--mock-10-5);color:#7A8797;margin:12px 0 0;padding:0;}
  /* Raster Punkt 3: gleichwertige, hellgraue Kacheln, Logo mittig. */
  .bk-raster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:18px;}
  .bk-kachel{position:relative;height:54px;border-radius:var(--radius-kachel);background:#F2F4F7;
    display:flex;align-items:center;justify-content:center;padding:0 10px;}
  .bk-kachel img{max-height:20px;max-width:100%;width:auto;object-fit:contain;display:block;}
  .bk-haken{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:var(--radius-kreis);
    background:var(--gold-cta-hero);display:none;align-items:center;justify-content:center;}
  .bk-haken svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;
    stroke-linecap:round;stroke-linejoin:round;}
  /* Endzustand (gilt auch ohne Animation): fuenf Banken zurueckgenommen,
     fuenf mit goldenem Haken. */
  #bentoDetailBank[data-fokus="zusage"] .bk-kachel.leise{opacity:.25;filter:grayscale(1);}
  #bentoDetailBank[data-fokus="zusage"] .bk-kachel.passt .bk-haken{display:flex;}
  /* Sequenz beim Wechsel in Punkt 3 (ab Klick): Raster sichtbar, ab 200 ms
     fuenf Banken leiser (300 ms), Haken ab 300 ms im Abstand von 90 ms,
     je 220 ms — fertig nach rund 880 ms. */
  #bentoDetailBank.zusage-rein .bk-kachel.leise{animation:bkLeise .3s var(--kurve) .2s both;}
  #bentoDetailBank.zusage-rein .bk-kachel.passt .bk-haken{animation:bkHaken .22s var(--kurve) both;
    animation-delay:calc(.3s + var(--n) * 90ms);}
  @keyframes bkLeise{from{opacity:1;filter:grayscale(0);}to{opacity:.25;filter:grayscale(1);}}
  @keyframes bkHaken{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion: reduce){
    #bentoDetailBank.zusage-rein .bk-kachel.leise,
    #bentoDetailBank.zusage-rein .bk-kachel.passt .bk-haken{animation:none;}
  }
  @media (min-width:901px) and (max-width:1100px){
    .bk-screen{padding:20px 22px;}
    .bk-raster{gap:8px;}
    .bk-kachel{height:48px;padding:0 8px;}
    .bk-kachel img{max-height:17px;}
  }
  @media (max-width:900px){
    .bk-screen{position:relative;top:auto;transform:none;padding:18px 18px;}
    #bentoDetailBank:not([data-fokus="angebote"]) .bk-angebote,
    #bentoDetailBank:not([data-fokus="zusage"]) .bk-zusage{display:none;}
    #bentoDetailBank[data-fokus="angebote"] .bento-wand,
    #bentoDetailBank[data-fokus="zusage"] .bento-wand{display:none;}
  }
  @media (max-width:640px){
    .bk-screen{padding:16px 14px;}
    .bk-screen .qp-kopf .qp-titel{font-size:var(--mock-15);}
    .bk-screen .qp-kopf p{font-size:var(--mock-11);}
    /* Schmale Karte: Logo, Zins und Rate oben, Button darunter rechts. */
    .bk-angebote .qp-zeile{grid-template-columns:54px minmax(0,1fr) minmax(0,1fr);
      grid-template-areas:"logo zins rate" "btn btn btn";row-gap:6px;padding:8px 8px 8px 10px;}
    .bk-angebote .qp-zeile img{grid-area:logo;}
    .bk-angebote .qp-zeile .qp-wert:nth-of-type(1){grid-area:zins;}
    .bk-angebote .qp-zeile .qp-wert:nth-of-type(2){grid-area:rate;}
    .bk-angebote .qp-zeile .qp-wahl{grid-area:btn;justify-self:end;}
    .bk-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .bk-kachel{height:48px;}
  }
  .bento-wand-spalte{overflow:hidden;position:relative;}
  .bento-wand-lauf{display:flex;flex-direction:column;gap:18px;
    will-change:transform;position:absolute;left:0;right:0;top:0;}
  .bento-wand-lauf.hoch{animation:wandHoch var(--dauer var(--kurve), 64s) linear infinite;}
  .bento-wand-lauf.runter{animation:wandRunter var(--dauer var(--kurve), 72s) linear infinite;}
  @keyframes wandHoch{
    from{transform:translateY(0);}
    to{transform:translateY(calc(-50% - 9px));}
  }
  @keyframes wandRunter{
    from{transform:translateY(calc(-50% - 9px));}
    to{transform:translateY(0);}
  }
  .bento-wand-tile{background:#fff;border:none;box-shadow:none;border-radius:var(--radius-kachel);
    height:76px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    padding:0 16px;}
  .bento-wand-tile img{max-height:28px;max-width:100%;width:auto;object-fit:contain;
    display:block;}
  @media (prefers-reduced-motion: reduce){
    .bento-wand-lauf{animation:none;}
  }
  @media (max-width:900px){
    .bento-wand{position:relative;inset:auto;height:320px;gap:12px;}
    .bento-wand-tile{height:64px;}
    .bento-wand-tile img{max-height:24px;}
  }

  /* ---------- Prozess-Screens (Detailansicht Karte 3) ----------
     Drei freigestellte Smartphones, raeumlich gestaffelt. Gesteuert wird
     ueber data-fokus am Detail-Container: das aktive Geraet steht gross und
     vorne, die folgenden kleiner dahinter, bereits gezeigte laufen nach
     links aus. Hoehe gesetzt, Breite auto — das Seitenverhaeltnis bleibt.
     Tiefe nur ueber Groesse, Position, Ueberlagerung und Schatten: alle
     sichtbaren Geraete sind voll deckend (keine Transparenz). */
  .bento-phones{position:relative;height:100%;min-height:0;}
  .bento-phone{position:absolute;top:50%;left:50%;height:88%;width:auto;
    transform-origin:center;
    filter:drop-shadow(0 30px 46px rgba(0,0,0,.5));
    transition:transform var(--dauer-lang) var(--kurve), opacity var(--dauer-lang) var(--kurve);}
  /* Ausgangslage: bereits durchlaufen, links ausserhalb */
  .bento-phone{transform:translate(calc(-50% - 78%),-50%) scale(.68);opacity:0;z-index:0;}
  .bento-detail[data-fokus="0"] .bento-phone[data-i="0"],
  .bento-detail[data-fokus="1"] .bento-phone[data-i="1"],
  .bento-detail[data-fokus="2"] .bento-phone[data-i="2"]{
    transform:translate(calc(-50% - 44%),-50%) scale(1);opacity:1;z-index:3;}
  .bento-detail[data-fokus="0"] .bento-phone[data-i="1"],
  .bento-detail[data-fokus="1"] .bento-phone[data-i="2"]{
    transform:translate(calc(-50% + 16%),-50%) scale(.85);opacity:1;z-index:2;}
  .bento-detail[data-fokus="0"] .bento-phone[data-i="2"]{
    transform:translate(calc(-50% + 64%),-50%) scale(.74);opacity:1;z-index:1;}
  @media (prefers-reduced-motion: reduce){ .bento-phone{transition:none;} }
  @media (max-width:900px){
    .bento-phones{height:400px;}
    .bento-phone{height:96%;}
    .bento-detail[data-fokus="0"] .bento-phone[data-i="0"],
    .bento-detail[data-fokus="1"] .bento-phone[data-i="1"],
    .bento-detail[data-fokus="2"] .bento-phone[data-i="2"]{
      transform:translate(calc(-50% - 12%),-50%) scale(1);}
    .bento-detail[data-fokus="0"] .bento-phone[data-i="1"],
    .bento-detail[data-fokus="1"] .bento-phone[data-i="2"]{
      transform:translate(calc(-50% + 46%),-50%) scale(.8);}
    .bento-detail[data-fokus="0"] .bento-phone[data-i="2"]{
      transform:translate(calc(-50% + 86%),-50%) scale(.7);}
  }

  /* ---------- HTML-Handyscreens in den Bento-Detailansichten (v169) ----------
     Ersetzen seit v173 alle drei frueheren Rasterbilder (440x896 WebP). .bp traegt Groesse und
     Container, .bp-frame den Rahmen. Alle Masse sind
     "Design-Pixel" des 440 px breiten Screens, ueber --u an die tatsaechliche
     Geraetebreite gebunden (Container-Query-Einheit cqw). Darum bewusst NICHT
     die --mock-*-Tokens: die sind feste px und wuerden bei skaliertem Geraet
     nicht mitwachsen. Browser: Chrome 105+, Safari 16+, Firefox 110+.
     role="img" macht den Inhalt fuer Screenreader zu einer Grafik. */
  .bento-phone{aspect-ratio:440/896;}
  .bp{container-type:inline-size;}
  .bp .bp-frame{position:absolute;top:0;right:0;bottom:0;left:0;--u:calc(100cqw/440);
    background:var(--ink);border-radius:calc(62*var(--u));
    box-shadow:inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.14);
    font-family:var(--body);color:var(--navy-dunkel);line-height:1.25;}
  /* Die Detailansicht liegt in .bento-card, deren p-Regel (Farbe, 16px,
     Abstand) sonst in den Screen durchschlaegt. Alle .bp-Regeln sind darum
     mit .bp praefixiert (0,2,0), und p/ol/li werden mit .bp div p (0,1,2) neutral
     gestellt — .bento-card p (0,1,1) steht spaeter im Stylesheet und wuerde
     bei gleicher Spezifitaet gewinnen (v172). */
  .bp div p,.bp div ol,.bp div li{margin:0;padding:0;color:inherit;line-height:inherit;font-size:inherit;max-width:none;}
  .bp .bp-titel,.bp .bp-lead{color:var(--navy-dunkel);}
  .bp .bp-lead{color:var(--ink-muted);}
  .bp .bp-screen{position:absolute;top:calc(14*var(--u));right:calc(14*var(--u));bottom:calc(14*var(--u));left:calc(14*var(--u));background:var(--card);
    border-radius:calc(48*var(--u));overflow:hidden;padding:0 calc(34*var(--u));}
  .bp .bp-screen::before{content:"";position:absolute;top:calc(18*var(--u));left:50%;
    transform:translateX(-50%);width:calc(134*var(--u));height:calc(40*var(--u));
    background:var(--ink);border-radius:calc(20*var(--u));}
  .bp .bp-status{display:flex;justify-content:space-between;align-items:center;
    padding:calc(30*var(--u)) calc(14*var(--u)) 0;font-size:calc(17*var(--u));font-weight:700;color:var(--ink);}
  .bp .bp-status svg{height:calc(12*var(--u));width:auto;fill:var(--ink);}
  .bp .bp-status-icons{display:inline-flex;gap:calc(6*var(--u));align-items:center;}
  .bp .bp-kopf{display:flex;align-items:center;justify-content:space-between;margin-top:calc(34*var(--u));}
  .bp .bp-marke{display:inline-flex;align-items:center;gap:calc(14*var(--u));font-family:var(--disp);
    font-weight:800;font-size:calc(24*var(--u));color:var(--navy-dunkel);}
  .bp .bp-marke-k{display:inline-flex;align-items:center;justify-content:center;line-height:1;width:calc(46*var(--u));height:calc(46*var(--u));
    border-radius:calc(11*var(--u));background:var(--navy-900);color:var(--card);font-size:calc(26*var(--u));}
  .bp .bp-burger{width:calc(26*var(--u));height:calc(2*var(--u));background:var(--accent-600);position:relative;margin-right:calc(4*var(--u));}
  .bp .bp-burger::before,.bp-burger::after{content:"";position:absolute;left:0;right:0;height:inherit;background:inherit;}
  .bp .bp-burger::before{top:calc(-8*var(--u));} .bp-burger::after{top:calc(8*var(--u));}
  .bp .bp-stepper{list-style:none;display:flex;justify-content:space-between;margin:calc(40*var(--u)) calc(10*var(--u)) 0;
    position:relative;font-size:calc(15*var(--u));color:var(--ink-muted);}
  .bp .bp-stepper::before{content:"";position:absolute;top:calc(16*var(--u));left:calc(60*var(--u));right:calc(60*var(--u));
    height:calc(2*var(--u));background:var(--line);}
  .bp .bp-stepper li{display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--u));width:calc(90*var(--u));position:relative;}
  .bp .bp-stepper li span{display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1;width:calc(32*var(--u));height:calc(32*var(--u));border-radius:var(--radius-kreis);
    background:var(--card);border:calc(2*var(--u)) solid var(--line);font-weight:700;font-size:calc(14*var(--u));color:var(--ink-muted);}
  .bp .bp-stepper[data-schritt="1"] li:nth-child(1){color:var(--ink);}
  .bp .bp-stepper[data-schritt="1"] li:nth-child(1) span{background:var(--accent-600);border-color:var(--accent-600);color:var(--card);}
  .bp .bp-titel{font-family:var(--disp);font-weight:800;font-size:calc(29*var(--u));margin-top:calc(34*var(--u));letter-spacing:-.01em;}
  .bp .bp-lead{font-size:calc(20*var(--u));color:var(--ink-muted);margin-top:calc(8*var(--u));line-height:1.35;}
  .bp .bp-feld{display:flex;align-items:center;gap:calc(14*var(--u));background:var(--paper);border-radius:calc(12*var(--u));
    padding:calc(15*var(--u)) calc(16*var(--u));margin-top:calc(10*var(--u));}
  .bp .bp-lead + .bp-feld{margin-top:calc(26*var(--u));}
  .bp .bp-feld svg{width:calc(22*var(--u));height:calc(22*var(--u));flex:none;fill:none;stroke:var(--accent-600);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .bp .bp-feld-text{flex:1;display:flex;flex-direction:column;gap:calc(6*var(--u));font-size:calc(19*var(--u));color:var(--ink);}
  .bp .bp-feld-text small{font-size:calc(13*var(--u));color:var(--ink-muted);}
  .bp .bp-feld-rechts{font-size:calc(19*var(--u));color:var(--ink);}
  .bp .bp-button{display:flex;align-items:center;justify-content:center;gap:calc(10*var(--u));margin-top:calc(26*var(--u));
    height:calc(62*var(--u));border-radius:calc(12*var(--u));background:var(--gold-cta-hero);color:var(--card);
    font-family:var(--disp);font-weight:700;font-size:calc(20*var(--u));}
  .bp .bp-button svg{width:calc(20*var(--u));height:calc(20*var(--u));fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .bp .bp-hinweis{display:flex;align-items:center;justify-content:center;gap:calc(6*var(--u));margin-top:calc(18*var(--u));
    font-size:calc(12*var(--u));color:var(--ink-muted);}
  .bp .bp-hinweis svg{width:calc(13*var(--u));height:calc(13*var(--u));fill:none;stroke:currentColor;stroke-width:1.8;}

  /* Screen 2: Bankenpruefung */
  .bp .bp-stepper[data-schritt="2"] li:nth-child(-n+2){color:var(--ink);}
  .bp .bp-stepper[data-schritt="2"] li:nth-child(1) span{background:var(--gold-cta-hero);border-color:var(--gold-cta-hero);color:var(--card);}
  .bp .bp-stepper[data-schritt="2"] li:nth-child(2) span{background:var(--accent-600);border-color:var(--accent-600);color:var(--card);}
  .bp .bp-stepper[data-schritt="2"]::after{content:"";position:absolute;top:calc(16*var(--u));left:calc(60*var(--u));width:calc(50% - 60*var(--u));height:calc(2*var(--u));background:var(--gold-cta-hero);}
  .bp .bp-banken{margin-top:calc(26*var(--u));display:flex;flex-direction:column;gap:calc(10*var(--u));}
  .bp .bp-bank{display:flex;align-items:center;justify-content:space-between;height:calc(56*var(--u));
    padding:0 calc(14*var(--u)) 0 calc(18*var(--u));background:var(--paper);border-radius:calc(12*var(--u));}
  .bp .bp-bank img{height:calc(28*var(--u));width:auto;max-width:calc(130*var(--u));object-fit:contain;}
  .bp .bp-status-pill{display:inline-flex;align-items:center;gap:calc(8*var(--u));height:calc(34*var(--u));padding:0 calc(14*var(--u));
    border-radius:calc(17*var(--u));background:var(--card);border:1px solid var(--line);font-size:calc(14*var(--u));color:var(--ink);}
  .bp .bp-status-pill i{width:calc(14*var(--u));height:calc(14*var(--u));border-radius:var(--radius-kreis);
    border:calc(2*var(--u)) solid var(--line);border-top-color:var(--ink-muted);}
  .bp .bp-info{display:flex;align-items:center;gap:calc(14*var(--u));margin-top:calc(26*var(--u));padding:calc(20*var(--u)) calc(22*var(--u));
    background:var(--paper);border-radius:calc(12*var(--u));font-size:calc(14*var(--u));line-height:1.4;color:var(--ink-muted);}
  .bp .bp-info svg{width:calc(22*var(--u));height:calc(22*var(--u));flex:none;fill:none;stroke:var(--accent-600);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

  /* Screen 3: Ergebnis */
  .bp .bp-stepper[data-schritt="3"] li{color:var(--ink);}
  .bp .bp-stepper[data-schritt="3"] li span{background:var(--gold-cta-hero);border-color:var(--gold-cta-hero);color:var(--card);}
  .bp .bp-stepper[data-schritt="3"]::before{background:var(--gold-cta-hero);}
  .bp .bp-haken{display:flex;align-items:center;justify-content:center;width:calc(130*var(--u));height:calc(130*var(--u));
    margin:calc(30*var(--u)) auto 0;border-radius:var(--radius-kreis);background:var(--gold-cta-hero);}
  .bp .bp-haken svg{width:calc(64*var(--u));height:calc(64*var(--u));fill:none;stroke:var(--card);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
  .bp .bp-titel--mitte{text-align:center;margin-top:calc(22*var(--u));}
  .bp .bp-lead--mitte{text-align:center;padding:0 calc(20*var(--u));}
  .bp .bp-rate{display:flex;align-items:center;justify-content:space-between;margin-top:calc(24*var(--u));
    padding:calc(18*var(--u)) calc(22*var(--u));background:var(--paper);border-radius:calc(12*var(--u));}
  .bp .bp-rate-text{display:flex;flex-direction:column;gap:calc(6*var(--u));}
  .bp .bp-rate-text small{font-size:calc(15*var(--u));color:var(--ink-muted);}
  .bp .bp-rate-text strong{font-family:var(--disp);font-size:calc(34*var(--u));font-weight:800;color:var(--navy-dunkel);letter-spacing:-.01em;}
  .bp .bp-rate > svg{width:calc(22*var(--u));height:calc(22*var(--u));fill:none;stroke:var(--navy-dunkel);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .bp .bp-vorteile{list-style:none;margin:calc(22*var(--u)) 0 0;padding:0 calc(8*var(--u));display:flex;flex-direction:column;gap:calc(10*var(--u));
    font-size:calc(16*var(--u));color:var(--ink);}
  .bp .bp-vorteile li{display:flex;align-items:center;gap:calc(14*var(--u));}
  .bp .bp-vorteile svg{width:calc(22*var(--u));height:calc(22*var(--u));flex:none;fill:none;stroke:var(--gold-cta-hero);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
  .bp .bp-vorteile + .bp-button{margin-top:calc(28*var(--u));}

  /* ---------- Abschlussfoto (Detailansicht Karte 4) ----------
     Anders als bei Karte 1 bis 3 ist das Foto nicht die rechte Spalte,
     sondern der komplette Grund der aufgeklappten Karte. Die Themen liegen
     als Overlay darauf. Das Bild bleibt in jedem Zustand unveraendert —
     keine Bewegung, kein Scale, kein Fade. */
  .bento-detail-foto{display:block;padding:0;}
  .bento-foto{position:absolute;inset:0;max-width:none;width:100%;height:100%;
    object-fit:cover;object-position:52% 42%;border:none;border-radius:0;
    z-index:0;}
  /* Nur fuer die Lesbarkeit der Themen, ohne harte Kante zur Bildmitte. */
  .bento-foto-lesbarkeit{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(96deg, rgba(9,15,26,.66) 0%, rgba(9,15,26,.46) 22%,
      rgba(9,15,26,.16) 40%, rgba(9,15,26,0) 56%);}
  /* 42 % statt der Mitte: so bleibt das Tablet im Foto weitgehend frei.
     Die Hoehe deckt den laengsten Text ab, damit die Liste beim Wechsel
     nicht ueberlaeuft. */
  .bento-detail-foto .bento-detail-themen{position:absolute;z-index:2;
    left:40px;top:42%;transform:translateY(-50%);height:356px;
    width:324px;max-width:calc(100% - 80px);align-self:auto;}
  .bento-detail-foto .bento-thema{background:rgba(12,20,33,.62);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    box-shadow:none;border:none;}
  .bento-detail-foto .bento-thema:hover{background:rgba(12,20,33,.74);}
  .bento-detail-foto .bento-thema.aktiv{background:rgba(12,20,33,.8);}
  .bento-detail-foto .bento-thema-text p{color:var(--auf-dunkel-stark);}
  /* Der Knopf liegt auf dem Foto und braucht mehr Eigenkontrast. */
  .bento-detail-foto .bento-detail-zu{z-index:var(--ebene-detail);background:rgba(11,18,32,.55);
    border-color:rgba(255,255,255,.45);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
  .bento-detail-foto .bento-detail-zu:hover{background:rgba(11,18,32,.78);
    border-color:rgba(255,255,255,.75);}
  /* Zustaende 2–4 der Karte 4 („Kein finanzielles Risiko", „Kein
     zusaetzlicher Aufwand", „Ihr Geld bekommen Sie wie gewohnt"): rechts eine
     leise Navy-Zone und je eine reduzierte Grafik aus Typografie und duennen
     Linien. Das Foto selbst bleibt unangetastet. */
  .bf-risiko-grund{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
    background:linear-gradient(90deg, rgba(14,24,36,0) 42%, rgba(14,24,36,.38) 58%,
      rgba(14,24,36,.62) 76%, rgba(14,24,36,.7) 100%);
    transition:opacity .35s var(--kurve);}
  #bentoDetailVorteile[data-fokus="1"] .bf-risiko-grund, #bentoDetailVorteile[data-fokus="2"] .bf-risiko-grund, #bentoDetailVorteile[data-fokus="3"] .bf-risiko-grund{opacity:1;}
  .bf-grafik{position:absolute;z-index:2;right:56px;top:42%;width:340px;
    transform:translateY(calc(-50% + 5px));opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--kurve), transform .3s var(--kurve), visibility 0s linear .3s;
    color:#fff;text-align:center;}
  #bentoDetailVorteile[data-fokus="1"] .bf-grafik[data-zustand="1"], #bentoDetailVorteile[data-fokus="2"] .bf-grafik[data-zustand="2"], #bentoDetailVorteile[data-fokus="3"] .bf-grafik[data-zustand="3"]{opacity:1;visibility:visible;transform:translateY(-50%);
    transition:opacity .3s var(--kurve) .08s, transform .3s var(--kurve) .08s, visibility 0s linear 0s;}
  /* Zustand 2: Kunde — Finanzierung — Bank, „Sie" bewusst ausserhalb. */
  .bf-beziehung{display:flex;align-items:center;}
  .bf-knoten{flex:0 0 82px;width:82px;height:82px;border-radius:var(--radius-kreis);
    border:1px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;
    font-family:var(--disp);font-size:var(--mock-15);font-weight:600;color:#fff;}
  .bf-linie{flex:1;position:relative;height:1px;background:rgba(255,255,255,.6);margin:0 10px;}
  .bf-linie em{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
    font-style:normal;font-size:var(--mock-12);letter-spacing:.02em;color:var(--auf-dunkel-stark);white-space:nowrap;}
  .bf-sie{margin-top:44px;}
  .bf-sie strong{display:block;font-family:var(--disp);font-size:var(--mock-17);font-weight:700;color:#fff;}
  .bf-sie span{display:block;margin-top:4px;font-size:var(--mock-13-5);color:var(--auf-dunkel-stark);}
  /* Zustaende 3 und 4: drei Begriffe mit duennen Pfeillinien, danach die
     Notiz. Die Sequenz startet bei jedem Wechsel in den Zustand neu, weil die
     Animation erst mit dem passenden data-fokus greift (ca. 670 ms). */
  .bf-grafik.bf-ablauf{width:380px;}
  .bf-reihe{display:flex;align-items:center;justify-content:center;}
  .bf-wort{font-family:var(--disp);font-size:var(--mock-17);font-weight:600;color:#fff;white-space:nowrap;}
  .bf-wort.bf-stark{font-size:var(--mock-19);font-weight:800;letter-spacing:-.01em;}
  .bf-pfeil{flex:1 1 auto;min-width:22px;max-width:64px;height:1px;margin:0 10px;position:relative;
    background:rgba(255,255,255,.6);}
  .bf-pfeil::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
    border-top:1px solid rgba(255,255,255,.75);border-right:1px solid rgba(255,255,255,.75);
    transform:translateY(-50%) rotate(45deg);}
  .bf-notiz{margin:30px 0 0;padding:0;font-size:var(--mock-14);line-height:var(--zeile-text-eng);color:var(--auf-dunkel-stark);}
  .bf-notiz small{display:block;margin-top:4px;font-size:var(--mock-12);color:var(--auf-dunkel);}
  #bentoDetailVorteile[data-fokus="2"] .bf-ablauf[data-zustand="2"] .bf-wort,
  #bentoDetailVorteile[data-fokus="3"] .bf-ablauf[data-zustand="3"] .bf-wort,
  #bentoDetailVorteile[data-fokus="2"] .bf-ablauf[data-zustand="2"] .bf-notiz,
  #bentoDetailVorteile[data-fokus="3"] .bf-ablauf[data-zustand="3"] .bf-notiz{animation:bfWort .22s var(--kurve) both;
    animation-delay:calc(80ms + var(--s) * 90ms);}
  #bentoDetailVorteile[data-fokus="2"] .bf-ablauf[data-zustand="2"] .bf-pfeil,
  #bentoDetailVorteile[data-fokus="3"] .bf-ablauf[data-zustand="3"] .bf-pfeil{animation:bfLinie .22s var(--kurve) both;
    animation-delay:calc(80ms + var(--s) * 90ms);}
  @keyframes bfWort{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
  @keyframes bfLinie{from{clip-path:inset(-6px 100% -6px 0);}to{clip-path:inset(-6px 0 -6px 0);}}
  @media (min-width:901px) and (max-width:1100px){
    .bf-grafik{right:36px;width:290px;}
    .bf-grafik.bf-ablauf{width:320px;}
    .bf-knoten{flex-basis:70px;width:70px;height:70px;font-size:var(--mock-14);}
    .bf-wort{font-size:var(--mock-15);} .bf-wort.bf-stark{font-size:var(--mock-17);}
    .bf-pfeil{margin:0 8px;min-width:20px;}
  }
  @media (max-width:900px){
    /* gestapelt: die Grafik steht unten auf hellem Tisch/Papier — dort
       dunkelt die Zone von unten nach oben ab statt von rechts */
    .bf-risiko-grund{background:linear-gradient(180deg, rgba(14,24,36,0) 50%,
      rgba(14,24,36,.62) 68%, rgba(14,24,36,.74) 100%);}
    .bf-grafik,.bf-grafik.bf-ablauf{position:relative;right:auto;top:auto;width:auto;max-width:360px;
      margin:0 auto 30px;padding:0 22px;transform:translateY(5px);display:none;}
    #bentoDetailVorteile[data-fokus="1"] .bf-grafik[data-zustand="1"], #bentoDetailVorteile[data-fokus="2"] .bf-grafik[data-zustand="2"], #bentoDetailVorteile[data-fokus="3"] .bf-grafik[data-zustand="3"]{display:block;transform:none;}
    .bf-wort{font-size:var(--mock-15);} .bf-wort.bf-stark{font-size:var(--mock-16);}
    .bf-pfeil{margin:0 8px;min-width:18px;}
  }
  @media (prefers-reduced-motion: reduce){
    .bf-grafik{transform:translateY(-50%);}
    .bf-risiko-grund,.bf-grafik{transition-duration:.2s !important;}
    #bentoDetailVorteile[data-fokus="2"] .bf-ablauf[data-zustand="2"] .bf-wort,
  #bentoDetailVorteile[data-fokus="3"] .bf-ablauf[data-zustand="3"] .bf-wort, #bentoDetailVorteile[data-fokus="2"] .bf-ablauf[data-zustand="2"] .bf-notiz,
  #bentoDetailVorteile[data-fokus="3"] .bf-ablauf[data-zustand="3"] .bf-notiz, #bentoDetailVorteile[data-fokus="2"] .bf-ablauf[data-zustand="2"] .bf-pfeil,
  #bentoDetailVorteile[data-fokus="3"] .bf-ablauf[data-zustand="3"] .bf-pfeil{animation:none;}
  }
  @media (max-width:900px){
    /* Gestapelt liegt das Detail im Fluss; ohne das Kartenpolster zu
       neutralisieren, bliebe rund um das Foto ein Navy-Rahmen stehen. */
    .bento-card-vorteile.detail-aktiv{padding:0;}
    .bento-detail-foto{padding:0;}
    .bento-foto{object-position:56% 42%;}
    .bento-foto-lesbarkeit{background:linear-gradient(178deg, rgba(9,15,26,.72) 0%,
      rgba(9,15,26,.58) 46%, rgba(9,15,26,.34) 72%, rgba(9,15,26,.18) 100%);}
    .bento-detail-foto .bento-detail-themen{position:relative;top:auto;left:auto;
      transform:none;width:auto;max-width:none;height:auto;margin:66px 22px 26px;}
  }

  /* ---------- Prozess-Sektion unter dem Hero (v75) ----------
     Basis ist die bisherige erste Variante: weisse Flaeche, helle
     Accordion-Flaechen links, grosses Visual rechts. Fuenf Schritte links,
     rechts ein einziges Tablet — Rahmen, Groesse und Position bleiben immer
     gleich, nur der Displayinhalt wechselt. Ab 901px laeuft die Abfolge beim
     Scrollen automatisch durch (Klasse .scroll-an, per Skript gesetzt). */
  /* overflow:visible — die globale section-Regel wuerde sticky brechen. */
  /* Section-Grund: dunkles Navy mit sehr leisem Verlauf in derselben Familie
     wie die dunkle Stapel-Karte (#0E1824 / #182536 / #1F2E42) — nur in der
     Mitte minimal heller, keine Glows. */
  /* Abschluss-CTA der Section, vorher zwei Inline-Styles im Markup (v163).
     Der Titel ist Lead-Zeile zum Button, keine Gliederungsebene — darum <p>,
     Groesse aber aus der h3-Rolle, damit er sich wie die Kartentitel verhaelt. */
  .prozess-cta{text-align:center;margin-top:var(--abstand-block);}
  .prozess-cta__titel{font-family:var(--disp);font-weight:800;font-size:var(--heading-h3);color:#fff;margin-bottom:16px;}
  .prozess-solo{padding:72px 0;overflow:visible;
    background:var(--verlauf-navy);}
  /* Vorlage: die geoeffnete Bento-Box (Karte 1). Die Karte traegt direkt
     die .bento-card-Regeln — Navy-Verlauf, Radius 14px, Schatten, overflow.
     Hier nur, was das Aufklappen sonst per Skript setzt: Blockfluss statt
     Flex, Innenabstand im .bento-detail. */
  /* Keine Box mehr: die .bento-card-Flaeche, ihr Radius und Schatten sind
     abgeschaltet, Accordion und Produkt stehen direkt auf dem Section-Grund. */
  .prozess-solo .prozess-solo-karte{position:relative;padding:0;display:block;
    background:none;box-shadow:none;border-radius:0;overflow:visible;}
  /* Klebt waehrend der Scrollstrecke: Ueberschrift, Accordion und Tablet
     als EIN Block. top = Hoehe der Navigation + 32px, per Skript gesetzt.
     Keine vertikale Zentrierung im Viewport — der Block bleibt beim
     Einfrieren genau dort stehen, wo er im normalen Fluss war. */
  /* Scrollstrecke als leerer Block, nicht als padding — sticky darf nicht
     in den Innenabstand des Elternelements laufen. */
  /* Feste Strecke in px statt vh: 4 Wechsel x 160px. Nach dem letzten
     Wechsel bleiben nur 80px, bevor sich der Block loest — kein
     Nachlauf ueber einen halben Viewport mehr. */
  .solo-buehne.scroll-an::after{content:"";display:block;height:640px;}
  .solo-buehne.scroll-an .solo-sticky{position:sticky;}
  /* Niedrige Fenster: ohne Mindesthoehe, damit der Block ganz hineinpasst */
  .solo-buehne.kompakt .prozess-solo-karte,.solo-buehne.kompakt .bento-detail{min-height:0;}
  /* Accordion: keine eigenen Farben mehr — es gelten die .bento-thema-Regeln
     der Detailansicht unveraendert. */
  /* Ruhiger Wechsel: zu- und aufklappen gleichzeitig, 420ms, ohne Bounce */
  .prozess-solo .bento-thema-text{transition:max-height .42s var(--kurve), opacity .32s var(--kurve);}
  /* Raster und Innenabstand wie .bento-detail (41% / Rest, gap 48px,
     36px 40px). Zweite Spalte als minmax(0,1fr), damit nichts ueberlaeuft. */
  /* Oberkanten von Accordion und weissem Screen buendig (v179): vorher
     beides vertikal zentriert, dadurch stand der kuerzere Screen tiefer. */
  .prozess-solo .bento-detail{position:relative;inset:auto;opacity:1;height:100%;
    align-content:start;align-items:start;
    grid-template-columns:41% minmax(0,1fr);gap:var(--abstand-spalten);padding:0;}
  /* Hoehe der Liste wird per Skript auf den groessten Zustand gesetzt — so
     bleibt die Oberkante stehen, egal welcher Punkt offen ist. */
  .prozess-solo .bento-detail-themen{height:auto;}
  .prozess-solo .bento-detail-visual{height:auto;display:flex;align-items:flex-start;
    justify-content:center;}
  /* Kopf nutzt .bento-head (Eyebrow Gold, Ueberschrift weiss). */

  /* Kein Geraet mehr: der weisse Produkt-Screen steht direkt auf der
     Navy-Flaeche. Radius, Flaeche und Schatten wie .bento-offer.
     Frontal, ohne Perspektive. Groesse und Position fuer alle fuenf
     Schritte gleich. */
  .solo-tablet{width:100%;aspect-ratio:4/3;}
  .solo-display{position:relative;width:100%;height:100%;border-radius:var(--radius-karte);overflow:hidden;
    background:linear-gradient(170deg,#fff 0%,#F7F9FC 100%);
    box-shadow:var(--schatten-geraet);}
  /* Nur Ueberblenden, keine Bewegung — das Geraet steht still. */
  .solo-screen{position:absolute;inset:0;padding:26px 30px;
    display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .42s var(--kurve), visibility 0s linear .42s;}
  .solo-screen.aktiv{opacity:1;visibility:visible;
    transition:opacity .42s var(--kurve), visibility 0s var(--kurve);}
  /* Die globale .bento-card-p-Regel wuerde sonst in das Display durchschlagen. */
  .prozess-solo .solo-display p{margin:4px 0 0;font-size:var(--mock-12);line-height:1.5;color:#7A8797;}

  /* Angebot */
  .qa-kopf{display:flex;justify-content:space-between;align-items:flex-start;
    padding-bottom:14px;border-bottom:1px solid #E6EBF2;}
  .qa-firma{display:flex;gap:10px;align-items:center;}
  /* Logo Müller Sanitär & Heizung (erfunden, v118): Dach mit Schornstein und Tropfen */
  .qa-logo{width:26px;height:26px;border-radius:7px;flex:0 0 26px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64'%3E %3Crect width='64' height='64' rx='14' fill='%231F5FA6'/%3E %3Cpath d='M12 33 L32 15 L52 33' fill='none' stroke='%23fff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M42.5 24 V17.5 H47.5 V28.5' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M32 28 C32 28 24 38.5 24 43.5 A8 8 0 0 0 40 43.5 C40 38.5 32 28 32 28 Z' fill='%23fff'/%3E %3C/svg%3E") center/100% no-repeat;}
  .qa-firma b{display:block;font-size:var(--mock-14);color:#0F1720;font-family:var(--disp);}
  .qa-firma em{display:block;font-style:normal;font-size:var(--mock-10-5);color:#7A8797;margin-top:1px;}
  .qa-meta{text-align:right;}
  .qa-meta b{display:block;font-size:var(--mock-13-5);color:#0F1720;font-family:var(--disp);}
  .qa-meta em{display:block;font-style:normal;font-size:var(--mock-10-5);color:#7A8797;}
  .qa-posten{list-style:none;margin:14px 0 0;padding:0;}
  .qa-posten li{display:flex;justify-content:space-between;gap:16px;
    font-size:var(--mock-12-5);color:#3D4756;padding:7px 0;border-bottom:1px solid #F0F3F7;}
  .qa-posten li span:last-child{color:#0F1720;font-weight:500;white-space:nowrap;}
  .qa-summe{display:flex;justify-content:space-between;align-items:baseline;
    margin-top:12px;font-family:var(--disp);font-weight:700;font-size:var(--mock-15);color:#0F1720;}
  .qa-summe em{font-style:normal;font-weight:400;font-size:var(--mock-11);color:#7A8797;}
  /* Der KredPal-Block belegt in Schritt 1 denselben Platz, ist aber leer —
     so springt das Dokument beim Wechsel nicht. */
  .qa-kredpal{margin-top:16px;flex:1;min-height:150px;transition:opacity var(--dauer-lang) var(--kurve);}
  .qa-kredpal[data-zustand="aus"]{background:none;}
  .qk-titel{font-family:var(--disp);font-weight:700;font-size:var(--mock-13);color:#0F1720;
    margin-bottom:10px;}
  .qk-raster{display:grid;grid-template-columns:repeat(3,1fr) 1.25fr;gap:10px;align-items:stretch;}
  .qk-option{position:relative;border:1px solid #E1E7F0;border-radius:9px;padding:9px 10px;text-align:center;
    background:#fff;transition:border-color .3s var(--kurve), box-shadow .3s var(--kurve), background .3s var(--kurve);}
  .qk-option b{display:block;font-size:var(--mock-10-5);color:#7A8797;font-weight:500;}
  .qk-option strong{display:block;font-size:var(--mock-14);color:#0F1720;margin-top:3px;font-family:var(--disp);}
  .qk-option em{display:block;font-style:normal;font-size:var(--mock-9-5);color:#7A8797;margin-top:1px;}
  .qk-option.gewaehlt{border-color:var(--accent-500);background:#F2F7FF;}
  .qk-option.gewaehlt strong,.qk-option.gewaehlt b{color:var(--accent-500);}
  .qk-vorteile{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
    gap:5px;justify-content:center;}
  .qk-vorteile li{font-size:var(--mock-10-5);color:#3D4756;display:flex;gap:6px;align-items:center;}
  .qk-vorteile li:before{content:"";width:5px;height:5px;border-radius:var(--radius-kreis);
    background:var(--accent-500);flex:0 0 5px;}
  .qk-fuss{display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
  .qk-cta{background:var(--accent-500);color:#fff;border-radius:8px;padding:9px 16px;
    font-size:var(--mock-11-5);font-weight:600;font-family:var(--disp);position:relative;}
  .qk-marke{font-size:var(--mock-10);color:#7A8797;}

  /* Schritt 4: Angebotsauswahl aus Kundensicht — Logo, Zins, Rate, Button.
     Schlanke graue Zeilen ohne Rahmen und Schatten. */
  /* War <h4>: reine Bildunterschrift in einer simulierten Handy-Screen-
     Grafik, kein echter Seitenabschnitt. Auf <p class="qp-titel"> herab-
     gestuft, damit Screenreader-Nutzer sie nicht mit einer echten
     Unterüberschrift der Seite verwechseln (v154). */
  .qp-kopf .qp-titel{font-family:var(--disp);font-size:var(--mock-17);font-weight:800;color:#0F1720;margin:0;}
  .qp-kopf p{font-size:var(--mock-12);color:#7A8797;margin:4px 0 0;line-height:1.45;}
  .qp-liste{display:flex;flex-direction:column;gap:6px;margin-top:14px;}
  .qp-zeile{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) auto;
    align-items:center;gap:14px;background:#F6F8FB;border-radius:var(--radius-karte);padding:7px 8px 7px 16px;}
  .qp-zeile img{max-height:16px;max-width:84px;width:auto;justify-self:start;}
  .qp-wert strong{display:block;font-family:var(--disp);font-size:var(--mock-13);font-weight:700;color:#0F1720;
    font-variant-numeric:tabular-nums;white-space:nowrap;}
  .qp-wert small{display:block;font-size:var(--mock-9-5);color:#7A8797;margin-top:1px;white-space:nowrap;}
  .qp-wahl{background:var(--gold-cta-hero);color:#fff;border-radius:8px;padding:7px 12px;
    font-family:var(--disp);font-size:var(--mock-10-5);font-weight:600;white-space:nowrap;}
  .qp-hinweis{font-size:var(--mock-10-5);color:#7A8797;margin-top:10px;}
  /* Schritt 4 wird neu aktiv: Kopf, dann die fuenf Angebote von oben nach
     unten, zuletzt der Hinweis — wie eintreffende Suchergebnisse.
     Ablauf gesamt ca. 840 ms, ruhige Ease-Out-Kurve, kein Ueberschwingen.
     Die Klasse qp-rein setzt das JS nur beim Wechsel in Schritt 4. */
  #soloDisplay.qp-rein .qp-kopf,
  #soloDisplay.qp-rein .qp-zeile,
  #soloDisplay.qp-rein .qp-hinweis{animation:qpRein .34s var(--kurve) both;}
  #soloDisplay.qp-rein .qp-kopf{animation-duration:.32s;}
  #soloDisplay.qp-rein .qp-zeile:nth-child(1){animation-delay:120ms;}
  #soloDisplay.qp-rein .qp-zeile:nth-child(2){animation-delay:210ms;}
  #soloDisplay.qp-rein .qp-zeile:nth-child(3){animation-delay:300ms;}
  #soloDisplay.qp-rein .qp-zeile:nth-child(4){animation-delay:390ms;}
  #soloDisplay.qp-rein .qp-zeile:nth-child(5){animation-delay:480ms;}
  #soloDisplay.qp-rein .qp-hinweis{animation-name:qpFade;animation-duration:.28s;animation-delay:560ms;}
  @keyframes qpRein{from{opacity:0;transform:translateY(10px) scale(.99);}to{opacity:1;transform:none;}}
  @keyframes qpFade{from{opacity:0;}to{opacity:1;}}

  /* Abschluss */
  .qe-inhalt{margin:auto;width:100%;max-width:340px;text-align:center;}
  .qe-marke{font-family:var(--mono);font-size:var(--mock-11);font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--gold-text);}
  .qe-status{font-family:var(--disp);font-size:var(--mock-22);font-weight:800;color:#0F1720;
    margin-top:8px;}
  .qe-werte{margin:20px 0 0;display:flex;flex-direction:column;gap:1px;
    background:#E6EBF2;border-radius:10px;overflow:hidden;}
  .qe-werte > div{display:flex;justify-content:space-between;align-items:baseline;background:#fff;
    padding:10px 14px;}
  .qe-werte dt{font-size:var(--mock-11-5);color:#7A8797;margin:0;}
  .qe-werte dd{font-size:var(--mock-12-5);color:#0F1720;font-weight:600;margin:0;font-family:var(--disp);}
  .qe-fuss{font-size:var(--mock-10-5);color:#93A4B8;margin-top:14px;}
  /* Schritt 5: flacher Goldkreis mit weissem Check — kein Verlauf, kein Glow. */
  .qe-kreis{width:68px;height:68px;border-radius:var(--radius-kreis);background:var(--gold-cta-hero);
    margin:0 auto 16px;display:flex;align-items:center;justify-content:center;}
  .qe-kreis svg{width:42px;height:42px;fill:none;stroke:#fff;stroke-width:2.6;
    stroke-linecap:round;stroke-linejoin:round;}
  .qe-kreis path{stroke-dasharray:1;stroke-dashoffset:0;}
  /* Schritt 5 wird neu aktiv: Kreis (0-340 ms), Check zeichnen (280-580),
     Texte (420-770), Werte und Fusszeile gemeinsam (560-860). Klasse qe-rein
     setzt das JS nur beim Wechsel in Schritt 5. */
  #soloDisplay.qe-rein .qe-kreis{animation:qeKreis .34s var(--kurve) both;}
  #soloDisplay.qe-rein .qe-kreis path{animation:qeHaken .3s var(--kurve) .28s both;}
  #soloDisplay.qe-rein .qe-marke,
  #soloDisplay.qe-rein .qe-status,
  #soloDisplay.qe-rein .qe-werte,
  #soloDisplay.qe-rein .qe-fuss{animation:qeText .3s var(--kurve) both;}
  #soloDisplay.qe-rein .qe-marke{animation-delay:.42s;}
  #soloDisplay.qe-rein .qe-status{animation-delay:.47s;}
  #soloDisplay.qe-rein .qe-werte,
  #soloDisplay.qe-rein .qe-fuss{animation-name:qeFade;animation-delay:.56s;}
  @keyframes qeKreis{from{opacity:0;transform:scale(.88);}to{opacity:1;transform:none;}}
  @keyframes qeHaken{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
  @keyframes qeText{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
  @keyframes qeFade{from{opacity:0;}to{opacity:1;}}

  /* Schritt 1: Angebot ohne KredPal. Schritte 2 und 3 sind dasselbe
     Dokument, der KredPal-Block kommt nur hinzu. */
  .solo-display[data-schritt="0"] .qa-kredpal{opacity:0;}
  /* Schritt 1 -> 2: Das KredPal-Modul tritt kurz hervor (105 %, 6px tiefer)
     und rastet ohne Ueberschwingen auf 100 % ein. Nur das Modul bewegt sich,
     das Angebot bleibt stehen. Ursprung = Mitte des sichtbaren Inhalts,
     nicht der (hoeheren) Flex-Flaeche. Klasse kp-rein setzt das JS nur beim
     Wechsel aus Schritt 1 heraus. */
  #soloKredpal{transform-origin:50% 64px;}
  #soloKredpal.kp-rein{animation:kpRein .5s var(--kurve) both;}
  #soloKredpal.kp-rein .qk-titel,
  #soloKredpal.kp-rein .qk-option,
  #soloKredpal.kp-rein .qk-vorteile,
  #soloKredpal.kp-rein .qk-fuss{animation:kpTeil .36s var(--kurve) both;}
  #soloKredpal.kp-rein .qk-option{animation-delay:40ms;}
  #soloKredpal.kp-rein .qk-vorteile{animation-delay:90ms;}
  #soloKredpal.kp-rein .qk-fuss{animation-delay:140ms;}
  /* Zurueck zu Schritt 1: leise ausblenden, minimal auf 98 %. */
  .solo-display[data-schritt="0"] #soloKredpal{transform:scale(.98);
    transition:opacity .26s var(--kurve), transform .26s var(--kurve);}
  @keyframes kpRein{from{opacity:0;transform:translateY(6px) scale(1.05);}
    to{opacity:1;transform:none;}}
  @keyframes kpTeil{from{opacity:0;}to{opacity:1;}}
  @keyframes kpFade{from{opacity:0;}to{opacity:1;}}
  /* Schritt 3: 72 Monate fokussiert, dezenter Zeiger mit einem Klick */
  /* Schritt 3: Die Raten sind nur Beispielraten — keine ist ausgewaehlt,
     alle drei gleichwertig. Der Fokus liegt auf dem Button: KredPal-Gold,
     Zeiger direkt darauf, ein einmaliger Klickring. Kein Glow, kein Scale. */
  .solo-display[data-schritt="2"] .qk-option.gewaehlt{border-color:#E1E7F0;background:#fff;}
  .solo-display[data-schritt="2"] .qk-option.gewaehlt strong{color:#0F1720;}
  .solo-display[data-schritt="2"] .qk-option.gewaehlt b{color:#7A8797;}
  #soloKredpal .qk-cta{transition:background-color .3s var(--kurve);}
  .solo-display[data-schritt="2"] #soloKredpal .qk-cta{background:var(--gold-cta-hero);color:#fff;}
  .qk-zeiger{position:absolute;left:62%;top:52%;width:19px;height:24px;
    opacity:0;transition:opacity .3s var(--kurve);pointer-events:none;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}
  .qk-klick{position:absolute;left:calc(62% - 9px);top:calc(52% - 9px);width:20px;height:20px;
    border-radius:var(--radius-kreis);border:1.5px solid rgba(255,255,255,.85);opacity:0;pointer-events:none;}
  .solo-display[data-schritt="2"] .qk-zeiger{opacity:1;transition-delay:.2s;}
  .solo-display[data-schritt="2"] .qk-klick{animation:qkKlick .6s var(--kurve) .5s 1 both;}
  @keyframes qkKlick{0%{opacity:.55;transform:scale(.4);}100%{opacity:0;transform:scale(1.5);}}

  @media (prefers-reduced-motion: reduce){
    .solo-screen,.qa-kredpal,.qk-zeiger{transition:none;}
    .solo-display[data-schritt="2"] .qk-klick{animation:none;}
    /* Reduzierte Bewegung: nur kurzes Fade, kein Scale, kein Versatz. */
    /* !important, weil die globale Regel oben alle Dauern auf 0 setzt. */
    #soloKredpal.kp-rein{animation:kpFade .2s var(--kurve) both;animation-duration:.2s !important;}
    #soloDisplay.qe-rein .qe-kreis,#soloDisplay.qe-rein .qe-marke,#soloDisplay.qe-rein .qe-status,
    #soloDisplay.qe-rein .qe-werte,#soloDisplay.qe-rein .qe-fuss{
      animation-name:qeFade;animation-duration:.2s !important;animation-delay:0s !important;}
    #soloDisplay.qe-rein .qe-kreis path{animation:none;}
    #soloDisplay.qp-rein .qp-kopf,#soloDisplay.qp-rein .qp-zeile,#soloDisplay.qp-rein .qp-hinweis{
      animation-name:qpFade;animation-duration:.2s !important;animation-delay:0s !important;}
    #soloKredpal.kp-rein .qk-titel,#soloKredpal.kp-rein .qk-option,
    #soloKredpal.kp-rein .qk-vorteile,#soloKredpal.kp-rein .qk-fuss{animation:none;}
    .solo-display[data-schritt="0"] #soloKredpal{transform:none;transition:opacity .2s var(--kurve);
      transition-duration:.2s !important;}
  }
  @media (max-width:1100px){
    .prozess-solo .bento-detail{grid-template-columns:45% minmax(0,1fr);gap:36px;padding:0;}
    /* Kleineres Tablet: Inhalt verdichtet, sonst wird Schritt 2/3 unten
       abgeschnitten. Die Vorteilsliste entfaellt, die drei Laufzeiten bleiben. */
    .solo-screen{padding:18px 22px;}
    .qp-kopf p{font-size:var(--mock-11);}
    .qp-liste{margin-top:10px;gap:5px;}
    .qp-zeile{padding:5px 6px 5px 14px;}
    .qp-hinweis{margin-top:8px;}
    .qe-kreis{width:54px;height:54px;margin-bottom:12px;}
    .qe-kreis svg{width:34px;height:34px;}
    .qe-werte{margin-top:14px;}
    .qe-werte > div{padding:8px 14px;}
    .qe-fuss{margin-top:10px;}
    .qa-kopf{padding-bottom:10px;}
    .qa-posten{margin-top:8px;}
    .qa-posten li{font-size:var(--mock-11-5);padding:5px 0;}
    .qa-summe{margin-top:8px;font-size:var(--mock-14);}
    .qa-kredpal{margin-top:12px;min-height:0;}
    .qk-raster{grid-template-columns:repeat(3,1fr);}
    .qk-vorteile{display:none;}
    .qk-fuss{margin-top:10px;}
  }
  @media (max-width:900px){
    .prozess-solo{padding:52px 0;}
    .prozess-solo .prozess-solo-karte{min-height:0;}
    .prozess-solo .bento-detail{grid-template-columns:1fr;gap:24px;padding:0;min-height:0;}
    /* Ohne Scroll-Automatik: Tablet oben, darunter das Accordion — so ist
       der Wechsel beim Antippen sofort sichtbar. */
    /* Unter 900px klebt die Box unter der Navigation, waehrend das Accordion
       darunter scrollt (v183): Antippen eines Schritts bleibt so sichtbar.
       --solo-oben setzt das Skript aus der Nav-Hoehe. Kein Hintergrund —
       die Box schwebt mit ihrem Schatten ueber der Liste. */
    .prozess-solo .bento-detail-visual{order:-1;position:sticky;top:var(--solo-oben,72px);z-index:var(--ebene-detail);}
    .prozess-solo .bento-detail-themen{align-self:stretch;}
    /* Unter 900px keine feste Proportion mehr (v182): die drei Schritt-
       Screens teilen sich eine Rasterzelle, die Box wird so hoch wie der
       hoechste Schritt — kein Leerraum, nichts abgeschnitten. Unsichtbare
       Screens bleiben ueber opacity/visibility ausgeblendet. */
    .solo-tablet{aspect-ratio:auto;}
    .solo-display{height:auto;display:grid;}
    .solo-screen{position:relative;inset:auto;grid-area:1/1;padding:16px 18px;}
    .qa-firma b{font-size:var(--mock-12-5);}
    .qa-meta b{font-size:var(--mock-12);}
    .qa-summe{font-size:var(--mock-13-5);}
    .qa-posten li{font-size:var(--mock-11);padding:5px 0;}
    .qk-option strong{font-size:var(--mock-12-5);}
    .qk-titel{font-size:var(--mock-12);}
    .qk-raster{grid-template-columns:repeat(3,1fr);}
    .qk-vorteile{display:none;}
    .qp-kopf .qp-titel{font-size:var(--mock-15);}
    .qp-kopf p{font-size:var(--mock-11);}
    .qp-zeile{gap:8px;padding:6px 6px 6px 12px;border-radius:var(--radius-kachel);}
    .qp-zeile img{max-width:62px;max-height:14px;}
    .qp-wert strong{font-size:var(--mock-12);}
    .qp-wahl{padding:6px 9px;font-size:var(--mock-10);}
  }
  @media (max-width:640px){
    /* Schmales Telefon: vier Spalten bleiben, alles etwas enger. */
    .qp-zeile{grid-template-columns:54px minmax(0,1fr) minmax(0,1fr) auto;gap:6px;padding:6px 5px 6px 10px;}
    .qp-zeile img{max-width:52px;max-height:13px;}
    .qp-wert strong{font-size:var(--mock-11);}
    .qp-wert small{font-size:var(--mock-8-5);}
    .qp-wahl{padding:6px 8px;font-size:var(--mock-9-5);}
    .qe-status{font-size:var(--mock-19);}
  }

  /* Sehr zurueckhaltende Hervorhebung, gesteuert vom aktiven Thema */
  .bento-offer-rate{transition:box-shadow var(--dauer) var(--kurve);}
  .bento-offer-cta{transition:background-color var(--dauer) var(--kurve);}
  .bento-detail[data-fokus="rate"] .bento-offer-rate{box-shadow:0 0 0 2px rgba(205,146,0,.6);}
  /* Zustand 3: CTA vollflaechig im KredPal-Gold wie die anderen Primary-CTAs —
     kein Rahmen, kein Glow, kein Verlauf. */
  .bento-detail[data-fokus="cta"] .bento-offer-cta{background:var(--gold-cta-hero);color:#fff;}


  /* ---------- Karte 1, Zustand 4 „Mehr Chancen auf den Auftrag." ----------
     Ergebnis statt Produkt: die Flaeche blendet auf Weiss, das Angebot
     verschwindet, rechts erscheint der Success-State aus Schritt 5.
     Weiss ueber eine eigene Ebene, weil sich der Navy-Verlauf nicht
     animieren laesst. Gilt nur, solange die Detailansicht sichtbar ist. */
  .bento-card-angebot::before{content:"";position:absolute;inset:0;z-index:0;background:#fff;
    opacity:0;pointer-events:none;transition:opacity var(--dauer-lang) var(--kurve);}
  .bento-card-angebot:has(#bentoDetail.sichtbar[data-fokus="erfolg"])::before{opacity:1;}
  #bentoDetail{z-index:1;}
  #bentoDetail .bento-thema-titel{transition:color .4s var(--kurve);}
  #bentoDetail .bento-thema-text p{transition:color .4s var(--kurve);}
  #bentoDetail .bento-thema-plus svg{transition:fill .4s var(--kurve);}
  #bentoDetail .bento-detail-zu svg{transition:fill .4s var(--kurve);}
  #bentoDetail[data-fokus="erfolg"] .bento-thema{background:#F2F4F7;}
  #bentoDetail[data-fokus="erfolg"] .bento-thema:hover{background:#ECEFF3;}
  #bentoDetail[data-fokus="erfolg"] .bento-thema.aktiv{background:#E9EDF2;}
  #bentoDetail[data-fokus="erfolg"] .bento-thema-titel{color:var(--karte-grund);}
  #bentoDetail[data-fokus="erfolg"] .bento-thema-text p{color:#4A5A6E;}
  #bentoDetail[data-fokus="erfolg"] .bento-thema-plus svg{fill:var(--karte-grund);}
  #bentoDetail[data-fokus="erfolg"] .bento-thema-kopf:focus-visible{outline-color:rgba(31,48,70,.5);}
  /* Schliessen-Knopf bleibt, wo er ist — nur auf Weiss sichtbar gemacht. */
  #bentoDetail[data-fokus="erfolg"] .bento-detail-zu{border-color:rgba(31,48,70,.22);background:rgba(31,48,70,.04);}
  #bentoDetail[data-fokus="erfolg"] .bento-detail-zu:hover{background:rgba(31,48,70,.09);border-color:rgba(31,48,70,.4);}
  #bentoDetail[data-fokus="erfolg"] .bento-detail-zu svg{fill:var(--karte-grund);}
  /* Angebot aus- und wieder einblenden, Position bleibt unangetastet. */
  #bentoDetail .bento-detail-visual .bento-offer{
    transition:transform .4s var(--kurve), opacity .3s var(--kurve), visibility 0s linear 0s;}
  #bentoDetail[data-fokus="erfolg"] .bento-detail-visual .bento-offer{opacity:0;visibility:hidden;
    transition:transform .4s var(--kurve), opacity .3s var(--kurve), visibility 0s linear .3s;}
  /* Success-State: mittig in der rechten Spalte, ohne eigene Karte. */
  .bd-erfolg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s var(--kurve), visibility 0s linear .25s;}
  #bentoDetail[data-fokus="erfolg"] .bd-erfolg{opacity:1;visibility:visible;transition:opacity .2s var(--kurve);}
  .bd-erfolg .qe-inhalt{max-width:360px;margin:0;}
  .bd-erfolg .qe-kreis{width:76px;height:76px;margin-bottom:18px;}
  .bd-erfolg .qe-kreis svg{width:46px;height:46px;}
  .bd-erfolg .qe-status{font-size:var(--mock-28);}
  .bd-erfolg .qe-werte{margin-top:22px;background:#E6EBF2;}
  .bd-erfolg .qe-werte > div{background:#F6F8FB;}
  /* Sequenz beim Oeffnen von Zustand 4 (ab Klick): Kreis 150-490 ms,
     Haken 400-700, Texte 520-870, Werte und Fusszeile 660-960.
     Klasse erfolg-rein setzt das JS bei jedem Wechsel in Zustand 4. */
  #bentoDetail.erfolg-rein .bd-erfolg .qe-kreis{animation:qeKreis .34s var(--kurve) .15s both;}
  #bentoDetail.erfolg-rein .bd-erfolg .qe-kreis path{animation:qeHaken .3s var(--kurve) .4s both;}
  #bentoDetail.erfolg-rein .bd-erfolg .qe-marke,
  #bentoDetail.erfolg-rein .bd-erfolg .qe-status{animation:qeText .3s var(--kurve) .52s both;}
  #bentoDetail.erfolg-rein .bd-erfolg .qe-status{animation-delay:.57s;}
  #bentoDetail.erfolg-rein .bd-erfolg .qe-werte,
  #bentoDetail.erfolg-rein .bd-erfolg .qe-fuss{animation:qeFade .3s var(--kurve) .66s both;}
  @media (max-width:900px){
    .bd-erfolg{position:relative;inset:auto;padding:12px 0 4px;}
    #bentoDetail:not([data-fokus="erfolg"]) .bd-erfolg{display:none;}
    #bentoDetail[data-fokus="erfolg"] .bento-detail-visual{min-height:0;}
    #bentoDetail[data-fokus="erfolg"] .bento-detail-visual .bento-offer{display:none;}
    .bd-erfolg .qe-status{font-size:var(--mock-24);}
  }
  @media (prefers-reduced-motion: reduce){
    /* Nur Farbwechsel und kurze Fades. !important gegen die globale Regel. */
    .bento-card-angebot::before{transition-duration:var(--dauer) !important;}
    #bentoDetail .bento-thema-titel,#bentoDetail .bento-thema-text p,
    #bentoDetail .bento-thema-plus svg,#bentoDetail .bento-thema{transition-duration:.3s !important;}
    #bentoDetail .bento-detail-visual .bento-offer,.bd-erfolg{transition-duration:.2s !important;}
    #bentoDetail.erfolg-rein .bd-erfolg .qe-kreis,#bentoDetail.erfolg-rein .bd-erfolg .qe-marke,
    #bentoDetail.erfolg-rein .bd-erfolg .qe-status,#bentoDetail.erfolg-rein .bd-erfolg .qe-werte,
    #bentoDetail.erfolg-rein .bd-erfolg .qe-fuss{animation:qeFade .2s var(--kurve) both;
      animation-duration:.2s !important;animation-delay:0s !important;}
    #bentoDetail.erfolg-rein .bd-erfolg .qe-kreis path{animation:none;}
  }

  /* Zwischenbreiten 901-1100px, nur Karte 1: fuer das grosse Desktop-Layout
     reicht der Platz nicht — das Angebot lief sonst ueber die Themenspalte.
     Schmalere Bildspalte, Angebot rund ein Fuenftel kleiner. */
  @media (min-width:901px) and (max-width:1100px){
    #bentoDetail{grid-template-columns:45% 55%;gap:36px;padding:32px 32px;}
    #bentoDetail .bento-detail-visual{overflow:hidden;}
    /* Alle Werte explizit: die aeltere Regel fuer den normalen Kartenzustand
       (@media max-width:1100px) setzt das Angebot sonst auf position:relative
       mit voller Breite — dann wirkt top als Fluss-Versatz und es rutscht
       nach links ueber die Themenspalte. */
    #bentoDetail .bento-offer{position:absolute;left:auto;right:-2%;top:52%;
      width:252px;max-width:none;transform-origin:right center;
      transform:translateY(-50%) perspective(4200px) rotateY(-5deg) rotateZ(-2.5deg) scale(1.45);}
  }
  @media (max-width:900px){
    /* Gestapeltes Raster: die Karte bleibt im Fluss und waechst mit dem
       Inhalt. Absolut positioniert wuerde sie das Raster verkuerzen. */
    .bento-grid.detail-offen > .bento-card:not(.detail-aktiv){display:none;}
    .bento-card.detail-aktiv{position:relative;
      top:auto !important;left:auto !important;width:auto !important;height:auto !important;}
    .bento-card.detail-aktiv > .bento-text,
    .bento-card.detail-aktiv > .bento-visual{display:none;}
    /* oben Platz fuer den Schliessen-Knopf, sonst liegt er auf dem
       ersten Thema */
    .bento-detail{grid-template-columns:1fr;gap:20px;padding:66px 22px 26px;
      position:relative;inset:auto;}
    /* Die feste Listenhoehe ist nur noetig, solange die Liste vertikal
       zentriert steht. Gestapelt bricht sie sonst in die Flaeche darunter. */
    .bento-detail-themen{height:auto;align-self:stretch;}
    /* Gestapelt steht das Angebot unter den Themen, mittig und ohne
       Ueberstand — sonst laeuft es in die Themenliste. */
    .bento-detail-visual{min-height:330px;overflow:hidden;}
    /* Box 1 gestapelt (v186): das Angebot steht ueber den vier Pill-Themen,
       nicht darunter. Nur #bentoDetail, die anderen Boxen bleiben unberuehrt. */
    #bentoDetail .bento-detail-visual,#bentoDetailBank .bento-detail-visual,#bentoDetailProzess .bento-detail-visual{order:-1;}
    .bento-detail-visual .bento-offer{position:absolute;left:50%;right:auto;top:50%;
      width:252px;max-width:none;transform-origin:center;
      transform:translate(-50%,-50%) perspective(4200px) rotateY(-6deg) rotateZ(-3deg) scale(1.15);}
  }
  /* Sehr schmale Geraete: das gekippte, skalierte Angebot ragte hier seitlich
     aus der Karte und wurde beschnitten. Darum im Fluss, volle Breite,
     ohne Kippung — nichts wird mehr abgeschnitten. */
  /* War 425px — auf den festen Breakpoint 480px angehoben, damit alle
     Sonderfälle unter derselben Kante liegen wie der Smartphone-Porträt-Bruch
     an anderer Stelle im Code (term-btn). Der Fix greift dadurch bei 426–480px
     zusätzlich, verschwindet nirgends. */
  /* Box 1 unter 640px (v188): weniger Luft zwischen Kartenrand und Inhalt,
     Schliessknopf rueckt in die Ecke. Nur #bentoDetail. */
  @media (max-width:640px){
    /* Geoeffnet wird Box 1 randlos (v190): um den .wrap-Innenabstand (20px
       bei <=640) nach aussen gezogen, ohne Radius — eine Ansicht, keine
       Karte. Geschlossen bleibt sie eine Karte mit Abstand. Der Wert ist
       an .wrap{padding:0 20px} gekoppelt. */
    /* Geoeffnete Box als Modal (v199): feste Ebene ueber allem, auch ueber
       der Navigation, eigener Scroll. Damit ist das Modal selbst der
       Scroll-Container — Knopf und Bild kleben relativ dazu, unabhaengig von
       Section-Overflow oder Nav-Hoehe. Die !important-Angaben ueberstimmen
       die Inline-Geometrie des Oeffnen-Skripts und die <=900-Regel.
       100dvh statt 100vh: sonst schneidet die iOS-Adressleiste unten ab. */
    .bento-card.detail-als-modal.detail-aktiv{position:fixed !important;top:0 !important;left:0 !important;
      width:100vw !important;height:100vh !important;height:100dvh !important;margin:0;border-radius:0;
      overflow:auto;-webkit-overflow-scrolling:touch;z-index:var(--ebene-modal);
      background:var(--karte-grund);transition:none;}
    /* Seite darunter friert ein, solange das Modal offen ist (Klasse per Skript). */
    html.detail-modal-offen{overflow:hidden;}
    /* Die weisse Erfolgs-Ebene der Karte muss im Modal das ganze Fenster fuellen. */
    .bento-card.detail-als-modal.detail-aktiv::before{position:fixed;}
    /* Flex statt Grid (v197): in einem Grid ist der Klebe-Raum eines Elements
       nur seine eigene Zelle — Sticky wirkt dort nicht. In der Flex-Spalte
       ist es der ganze Container, also die volle Laenge der Pill-Liste. */
    #bentoDetail{display:flex;flex-direction:column;padding:10px 0 10px;gap:8px;}
    #bentoDetail[hidden]{display:none;} /* display:flex darf das hidden-Attribut nicht aufheben (v202) */

    /* ---- Uebertragung auf Box 2 (Banken) und Box 3 (Prozess), v203 ----
       Gleiches Muster wie Box 1: Flex-Spalte, Knopf und Visual kleben oben,
       Themen scrollen darunter, kompakte Pills. */
    #bentoDetailBank,#bentoDetailProzess{display:flex;flex-direction:column;padding:10px 0 10px;gap:8px;}
    #bentoDetailBank[hidden],#bentoDetailProzess[hidden]{display:none;}
    #bentoDetailBank .bento-detail-zu,#bentoDetailProzess .bento-detail-zu{position:sticky;top:10px;order:-2;
      align-self:flex-end;margin:0 10px 18px 0;z-index:var(--ebene-detail-zu);}
    #bentoDetailBank .bento-detail-visual,#bentoDetailProzess .bento-detail-visual{position:sticky;top:62px;z-index:var(--ebene-detail-visual);
      flex:none;background:var(--karte-grund);padding-bottom:8px;margin-bottom:-8px;}
    #bentoDetailBank .bento-detail-themen,#bentoDetailProzess .bento-detail-themen{flex:none;}
    /* Box 2, Thema 1: Logo-Wand auf 70 % der Tablet-Hoehe (320 -> 224px),
       Kacheln und Logos entsprechend kleiner (v204). */
    #bentoDetailBank .bento-wand{height:224px;gap:10px;}
    #bentoDetailBank .bento-wand-tile{height:50px;}
    #bentoDetailBank .bento-wand-tile img{max-height:20px;}
    #bentoDetailBank .bento-wand-lauf{gap:10px;}
    /* Box 2, Thema 2 (v205): jede Bank in EINER Zeile — Logo, Zins, Rate,
       Button. Der Button darf zweizeilig umbrechen, damit die Zeile schmal
       bleibt. Vorher lag der Button in einer zweiten Zeile, was den Screen
       fast doppelt so hoch machte. */
    #bentoDetailBank .bk-angebote .qp-zeile{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) auto;
      grid-template-areas:"logo zins rate btn";row-gap:0;column-gap:6px;padding:6px 6px 6px 8px;align-items:center;}
    #bentoDetailBank .bk-angebote .qp-zeile img{max-height:18px;max-width:40px;}
    #bentoDetailBank .bk-angebote .qp-wahl{white-space:normal;max-width:76px;text-align:center;line-height:1.15;
      padding:5px 7px;font-size:var(--mock-9-5);}
    /* Box 2, Thema 3 (v206): Logo-Raster in drei Spalten statt zwei, flachere
       Kacheln — 10 Logos in vier Reihen statt fuenf, Screen etwa so hoch wie
       der Angebots-Screen aus Thema 2. */
    #bentoDetailBank .bk-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 6px;margin-top:12px;}
    #bentoDetailBank .bk-kachel{height:38px;padding:0 6px;border-radius:9px;}
    #bentoDetailBank .bk-kachel img{max-height:14px;}
    #bentoDetailBank .bk-haken{top:-5px;right:-5px;width:16px;height:16px;}
    /* Box 3 (v207): Handys auf 70 % der Tablet-Hoehe (400 -> 280px). Die
       Geraete skalieren ueber ihre Hoehe mit, Inhalte ueber cqw — nichts weiter noetig. */
    #bentoDetailProzess .bento-phones{height:280px;}
    #bentoDetailBank .bento-thema-text p,#bentoDetailProzess .bento-thema-text p,
    #bentoDetailVorteile .bento-thema-text p{font-size:var(--text-xs);line-height:var(--zeile-text-mittel);padding-bottom:6px;}

    /* ---- Box 4 (Foto), v203: Modal mit fest stehendem Foto. Das Foto ist
       hier Hintergrund, kein Bild ueber den Themen — es fuellt im Modal das
       ganze Fenster (fixed), die Themen scrollen darueber; Knopf klebt. ---- */
    .bento-card-vorteile.detail-als-modal.detail-aktiv .bento-foto,
    .bento-card-vorteile.detail-als-modal.detail-aktiv .bento-foto-lesbarkeit{position:fixed;}
    /* Box 4, v208: die Zusatzgrafiken (Kunde/Bank/Finanzierung usw.) stehen
       in einer festen Buehne von 220px OBERHALB der Pills, absolut im Detail
       positioniert. Die Pills beginnen immer bei 62 + 220px — egal, welches
       Thema aktiv ist und ob es eine Grafik hat — und springen nicht. */
    #bentoDetailVorteile{position:relative;}
    /* Buehne = Hoehe der groessten Grafik (156px gemessen bei 390px), Grafiken
       mittig; Pills folgen mit 24px Luft. Ergibt fuer die kleineren Grafiken
       rund 60-70px Abstand, fuer die groesste 24px (v211). */
    #bentoDetailVorteile .bf-grafik,#bentoDetailVorteile .bf-grafik.bf-ablauf{position:absolute;top:70px;left:0;right:0;
      width:auto;max-width:360px;margin:0 auto;padding:0 22px;height:160px;display:none;
      flex-direction:column;justify-content:center;transform:none;}
    #bentoDetailVorteile[data-fokus="1"] .bf-grafik[data-zustand="1"],#bentoDetailVorteile[data-fokus="2"] .bf-grafik[data-zustand="2"],
    #bentoDetailVorteile[data-fokus="3"] .bf-grafik[data-zustand="3"]{display:flex;transform:none;}
    /* Abdunklung fuer die Grafik liegt jetzt oben statt unten, fest wie das Foto. */
    .bento-card-vorteile.detail-als-modal.detail-aktiv .bf-risiko-grund{position:fixed;
      background:linear-gradient(180deg, rgba(14,24,36,.78) 0%, rgba(14,24,36,.66) 34%, rgba(14,24,36,0) 56%);}
    /* Knopf wie in den anderen Boxen (v212): Flex-Spalte statt float, Knopf
       klebt bei 10px oben rechts, Grafik-Buehne beginnt darunter bei 70px. */
    #bentoDetailVorteile{display:flex;flex-direction:column;padding:10px 0 10px;}
    #bentoDetailVorteile[hidden]{display:none;}
    #bentoDetailVorteile .bento-detail-zu{position:sticky;top:10px;align-self:flex-end;margin:0 10px 0 0;z-index:var(--ebene-detail-zu);}
    #bentoDetailVorteile .bento-detail-themen{margin:210px 0 0;} /* Knopf 34 + 10 + Buehne 160 + 24 Luft = Pills bei 254px */
    /* Kopf klebt am oberen Rand des Modals (v196/v199): erst der Schliessknopf,
       darunter das Angebot. Die Themen scrollen darunter durch; der Kopf
       traegt den Kartengrund. */
    #bentoDetail .bento-detail-zu{position:sticky;top:10px;order:-2;
      align-self:flex-end;margin:0 10px 18px 0;z-index:var(--ebene-detail-zu);}
    #bentoDetail .bento-detail-visual{position:sticky;top:62px;z-index:var(--ebene-detail-visual);
      flex:none;background:var(--karte-grund);padding-bottom:8px;margin-bottom:-8px;}
    #bentoDetail .bento-detail-themen{flex:none;}
    /* Im Erfolgs-Zustand wird die Karte weiss — der klebende Kopf zieht mit (v200). */
    #bentoDetail[data-fokus="erfolg"] .bento-detail-visual{background:var(--card);}
    /* Der grosse Desktop-Schatten (30px Versatz, 56px Weichzeichnung) laege
       gestapelt ueber der ersten Themenbox — hier ein kurzer Schatten. */
    #bentoDetail .bento-offer{box-shadow:0 6px 18px -10px rgba(0,0,0,.45);}
    /* Text in den geoeffneten Themen-Pills kompakter (v192/v193): xs-Rolle (13px)
       statt Small, Zeilenabstand 1.5. Bewusst nur Box 1 und nur <=640 —
       Test, ob das fuer alle Boxen uebernommen werden soll. */
    #bentoDetail .bento-thema-text p{font-size:var(--text-xs);line-height:var(--zeile-text-mittel);padding-bottom:6px;}
    #bentoDetail .bento-detail-zu{top:10px;right:10px;}
  }
  @media (max-width:480px){
    #bentoDetail .bento-detail-visual{min-height:0;height:auto;overflow:visible;}
    #bentoDetail .bento-offer{position:relative;left:0;right:auto;top:0;
      width:100%;max-width:100%;height:auto;margin:0;
      transform:none;transform-origin:center;}
    #bentoDetail{padding-bottom:34px;}
  }
  @media (prefers-reduced-motion: reduce){
    .bento-card.detail-aktiv,.bento-detail,.bento-thema-text,
    .bento-detail-visual .bento-offer{transition:none;}
  }
  /* Designsystem-Regel: große Karten und Story-Flächen tragen keine
     sichtbare Outline. Sie heben sich allein über ihren Verlauf vom
     Sektionsgrund ab. Kleinere funktionale Elemente darin behalten
     ihre Rahmen. */
  .bento-card{border:none;border-radius:var(--radius-karte);overflow:hidden;
    padding:var(--abstand-karte);display:flex;gap:var(--abstand-gitter);align-items:flex-start;position:relative;
    /* Licht von links oben, nach rechts unten auslaufend — dazu eine feine
       helle Kante an der Oberseite und ein weicher Schlagschatten. */
    background:
      var(--verlauf-licht),
      var(--verlauf-karte);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
               0 26px 52px -34px rgba(0,0,0,.85);
    transition:transform var(--dauer-kurz) var(--kurve);}
  .bento-card.w7{grid-column:span 7;}
  .bento-card.w5{grid-column:span 5;}
  .bento-card.w6{grid-column:span 6;}
  .bento-text{flex:1 1 56%;min-width:0;display:flex;flex-direction:column;}
  .bento-eyebrow{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:#9DBBDD;margin-bottom:14px;}
  /* Eine Größe für alle vier Karten — vorher hatte jede Spaltenbreite ihre
     eigene, das fiel als Unwucht auf. */
  .bento-card h3{color:#fff;font-size:var(--heading-h3);font-weight:800;line-height:var(--zeile-ueberschrift);
    letter-spacing:-.01em;margin-bottom:14px;}
  .bento-card p{color:var(--auf-dunkel);font-size:var(--text-body);line-height:var(--zeile-text);margin-bottom:22px;}
  /* Gold wie der Haupt-Button, an denselben Token gehängt. */
  /* Auch als <button> verwendet: die Browser-Voreinstellungen fuer Buttons
     (Flaeche, Rahmen, eigene Schrift, volle Breite im Flex-Container)
     muessen dafuer zurueckgesetzt werden. */
  .bento-link{margin-top:auto;color:#9CC3EE;font-size:var(--text-button);font-weight:700;
    display:inline-flex;align-items:center;gap:8px;min-height:44px;
    background:none;border:0;padding:0;width:auto;align-self:flex-start;
    font-family:var(--disp);line-height:var(--zeile-normal);text-align:left;cursor:pointer;
    -webkit-appearance:none;appearance:none;}
  .bento-link:focus-visible{outline:2px solid var(--gold-500);outline-offset:4px;
    border-radius:4px;}
  .bento-link:hover{color:#C6DDF7;}
  .bento-visual{flex-shrink:0;}

  /* Karte 1: das Angebot liegt gekippt im Raum und wird vom Kartenrand
     angeschnitten — deshalb overflow:hidden auf .bento-card. */
  .bento-card-angebot .bento-visual{position:relative;width:230px;align-self:center;min-height:236px;}
  /* Sehr flache Kippung: großer perspective-Wert und kleiner Winkel, damit die
     Schrift nicht verzerrt. Drehpunkt in der Mitte, sonst zieht eine Seite auf. */
  .bento-offer{position:absolute;left:28px;top:0;width:252px;
    border-radius:var(--radius-karte);padding:16px 14px 14px;
    background:linear-gradient(170deg,#fff 0%,#F7F9FC 100%);
    box-shadow:var(--schatten-geraet);
    transform:perspective(2600px) rotateY(-6deg) rotateZ(-3deg);
    transform-origin:center;}
  .bento-offer-title{font-weight:800;font-size:var(--mock-14-5);color:#0F1720;margin-bottom:11px;}
  .bento-offer-row{display:flex;justify-content:space-between;align-items:center;
    font-size:var(--mock-11);color:#5B6472;background:#F1F4F7;border-radius:6px;
    padding:7px 9px;margin-bottom:5px;}
  .bento-offer-row span:last-child{color:#0F1720;font-weight:500;}
  .bento-offer-sum{display:flex;justify-content:space-between;font-size:var(--mock-11-5);font-weight:700;
    color:#0F1720;padding:8px 9px 11px;}
  .bento-offer-rate{background:#EDF2FA;border-radius:9px;padding:9px 10px;
    display:flex;justify-content:space-between;align-items:center;gap:8px;}
  .bento-offer-marke{display:flex;align-items:center;gap:7px;}
  .bento-offer-logo{width:22px;height:22px;border-radius:6px;background:var(--accent-500);
    color:#fff;font-weight:800;font-size:var(--mock-12);display:flex;align-items:center;
    justify-content:center;flex-shrink:0;}
  .bento-offer-rate b{display:block;font-size:var(--mock-11-5);color:#0F1720;line-height:var(--zeile-hero);}
  .bento-offer-rate em{display:block;font-style:normal;font-size:var(--mock-8-5);color:#7A8797;margin-top:2px;line-height:var(--zeile-kompakt);}
  .bento-offer-rate .bento-offer-preis{text-align:right;flex-shrink:0;}
  .bento-offer-rate .bento-offer-preis em{margin:0 0 1px;}
  .bento-offer-rate strong{font-size:var(--mock-13);color:var(--accent-500);white-space:nowrap;}
  .bento-offer-cta{margin-top:10px;background:var(--accent-500);color:#fff;border-radius:9px;
    height:34px;display:flex;align-items:center;justify-content:center;
    font-size:var(--mock-11-5);font-weight:600;position:relative;}
  .bento-offer-cursor{position:absolute;right:14px;bottom:-8px;color:#0F1720;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}

  /* Karte 2: Banken */
  /* Banklogos laufen langsam von unten nach oben durch, oben und unten
     weich ausgeblendet. Ohne Bewegung (Systemeinstellung) steht die Liste still. */
  /* Breite bleibt bei 110px: jede Verbreiterung nimmt der Textspalte Platz,
     die Headline bricht dann vierzeilig und die Karte wächst. */
  .bento-banks{width:110px;height:238px;overflow:hidden;position:relative;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 17%,#000 83%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 17%,#000 83%,transparent 100%);}
  /* gap und die Verschiebung im Keyframe hängen zusammen: der Streifen enthält
     die elf Logos zweimal, verschoben wird um genau eine Sequenz, also um die
     halbe Streifenhöhe plus die Hälfte eines Abstands. Sonst springt es. */
  .bento-bank-track{display:flex;flex-direction:column;gap:6px;
    animation:bankLauf 34s linear infinite;will-change:transform;}
  .bento-banks:hover .bento-bank-track{animation-play-state:paused;}
  @keyframes bankLauf{
    from{transform:translateY(0);}
    to{transform:translateY(calc(-50% - 3px));}
  }
  @media (prefers-reduced-motion: reduce){
    .bento-bank-track{animation:none;}
  }
  /* Reines Weiß, kein Verlauf und kein Rahmen — die Fläche soll wie Papier
     wirken, nicht wie ein Knopf. */
  .bento-bank{background:#fff;border:none;
    border-radius:8px;height:52px;display:flex;
    box-shadow:0 6px 14px -10px rgba(0,0,0,.7);
    align-items:center;justify-content:center;padding:0 12px;}
  .bento-bank img{max-height:24px;width:auto;object-fit:contain;}

  /* Karte 3: Prozess */
  .bento-steps{display:flex;flex-direction:column;gap:20px;width:196px;}
  .bento-step{display:flex;gap:14px;align-items:flex-start;position:relative;}
  .bento-step:not(:last-child):after{content:"";position:absolute;left:13px;top:30px;
    width:1px;height:calc(100% + 6px);background:#33507A;}
  .bento-step-num{width:27px;height:27px;border-radius:var(--radius-kreis);background:var(--accent-500);
    color:#fff;font-size:var(--text-caption);font-weight:700;display:flex;align-items:center;
    justify-content:center;flex-shrink:0;position:relative;z-index:1;}
  .bento-step-txt{font-size:var(--text-xs);line-height:var(--zeile-text-eng);color:#C3D0DE;padding-top:4px;}

  /* Karte 4: Vorteile */
  .bento-benefits{border:1px solid #33507A;border-radius:var(--radius-kachel);padding:18px 18px;width:222px;
    background:linear-gradient(160deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 55%);
    display:flex;flex-direction:column;gap:16px;}
  .bento-benefit{display:flex;gap:12px;align-items:center;font-size:var(--text-xs);color:#C3D0DE;}
  .bento-benefit svg{flex-shrink:0;color:#9DBBDD;}

  @media (max-width:1100px){
    .bento-card{flex-direction:column;}
    .bento-card-angebot .bento-visual{width:100%;min-height:0;height:auto;}
    .bento-offer{position:relative;left:0;top:0;width:100%;max-width:300px;
      transform:perspective(2600px) rotateY(-4deg) rotateZ(-1.5deg);}
    .bento-visual{width:100%;}
    .bento-offer,.bento-banks,.bento-steps,.bento-benefits{width:100%;}
    .bento-banks{height:196px;}
  }
  @media (max-width:900px){
    .bento{padding:64px 0;}
    .bento-card.w7,.bento-card.w5,.bento-card.w6{grid-column:span 12;}
  }
  @media (max-width:640px){
    .bento{padding:48px 0;}
    .bento-grid{gap:14px;}
    .bento-card{padding:22px 20px;}
  }

/* ==================================================================
   UNTERSEITEN — Rechtstexte (Impressum, Datenschutz, AGB, Cookies)
   Eingefuehrt in v230. Die Hauptseite ist auf Bilder und Karten
   gebaut, die Unterseiten auf langen Fliesstext. Deshalb eine eigene
   Zeilenlaenge: 760px sind rund 75 Zeichen, die Obergrenze fuer
   ermuedungsfreies Lesen. Der Container selbst ist so breit wie die
   Kopfleiste, damit Text und Logo eine Linie bilden.
   Farben ausschliesslich aus den Token; keine neuen Werte.
   ================================================================== */

  /* Die Kopfleiste ist fuer das Hero-Foto gebaut: transparent, mit
     negativem Rand, damit das Bild darunter beginnt. Unterseiten haben
     kein Foto. Sie tragen .nav-solid statisch im Markup und heben den
     negativen Rand auf, sonst laege der Seitentitel unter der Leiste. */
  .seite-unterseite header.site-nav{margin-bottom:0;}

  /* Aussenmass wie .nav-row (1120px + 32px Rand), damit der Text mit dem
     Logo buendig steht. Die Zeilenlaenge begrenzen die Kindelemente selbst
     auf 760px — linksbuendig, nicht zentriert (v231). */
  .rechtstext{max-width:var(--breite-inhalt);margin:0 auto;padding:56px var(--abstand-rand) var(--abstand-section-gross);}
  .rechtstext h1,.rechtstext h2,.rechtstext h3,.rechtstext p,.rechtstext ul,
  .rechtstext address,.rechtstext__stand,.rechtstext__tabelle{max-width:760px;}
  .rechtstext h1{font-size:var(--heading-h2);line-height:var(--zeile-ueberschrift);margin:0 0 8px;}
  /* Stand/Meta direkt unter dem Titel, optisch zurueckgenommen. */
  .rechtstext__stand{font-size:var(--text-small);color:var(--ink-muted);margin:0 0 var(--abstand-kopf);}
  .rechtstext h2{font-size:var(--heading-h3);line-height:var(--zeile-normal);margin:var(--abstand-kopf) 0 12px;}
  .rechtstext h3{font-size:var(--text-lead);line-height:var(--zeile-normal);margin:var(--abstand-block) 0 10px;}
  .rechtstext p,.rechtstext li,.rechtstext address{font-size:var(--text-body);line-height:var(--zeile-lesen);color:var(--ink);}
  .rechtstext p{margin:0 0 14px;}
  .rechtstext address{font-style:normal;margin:0 0 14px;}
  .rechtstext ul{margin:0 0 14px;padding-left:22px;}
  .rechtstext li{margin:0 0 6px;}
  /* Links im Fliesstext unterstrichen: Farbe allein reicht als
     Kennzeichnung nicht (Barrierefreiheit). */
  .rechtstext a{color:var(--accent-500);text-decoration:underline;text-underline-offset:2px;}
  .rechtstext a:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px;border-radius:2px;}
  @media (hover:hover){ .rechtstext a:hover{color:var(--accent-600);} }
  /* Tabellen (Datenschutz, Cookies) scrollen in ihrem eigenen Bereich,
     damit die Seite auf 390px nie seitlich scrollt. */
  .rechtstext__tabelle{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch;}
  .rechtstext table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--text-small);line-height:var(--zeile-text-mittel);}
  .rechtstext th,.rechtstext td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line);}
  .rechtstext th{font-weight:700;color:var(--accent-500);}
  .rechtstext code{font-family:var(--mono);font-size:var(--text-xs);}
  @media (max-width:640px){
    .rechtstext{padding:36px var(--abstand-rand) 72px;}
    .rechtstext h2{margin-top:36px;}
  }

/* ==================================================================
   FORMULARE — Anmelden, Registrieren (v252)
   Formularkarte auf hellem Seitengrund, dunkel wie die Bento-Karten.
   Alle Masse aus den Token; neu sind nur die Formular-Bauteile selbst:
   Feld, Label, Hinweis, Checkbox mit Links, Trennzeile.
   Die Formulare im Prototyp senden nichts (kein Backend); das Markup
   traegt data-platzhalter, ein Dreizeiler unterdrueckt das Absenden.
   ================================================================== */

  .formular-buehne{max-width:var(--breite-inhalt);margin:0 auto;
    padding:var(--abstand-block-gross) var(--abstand-rand) var(--abstand-section-gross);
    display:flex;justify-content:center;}
  /* 520px: breit genug fuer zwei Ghost-Buttons nebeneinander, schmal genug,
     dass ein Feld nicht ueber 60 Zeichen misst. */
  .formular-karte{width:100%;max-width:520px;
    background:var(--verlauf-licht),var(--verlauf-karte);
    border-radius:var(--radius-flaeche);padding:var(--abstand-karte-gross);
    box-shadow:var(--schatten-karte);
    /* Fokusringe auf dunklem Grund, wie in den anderen dunklen Containern */
    --fokus-farbe:var(--auf-dunkel-stark);}
  /* Weiss statt --accent-500 fuer h1: die Karte ist dunkel. #fff ist im
     Projekt die eingespielte Konvention fuer Weiss (kein Token). */
  .formular-karte h1{font-size:var(--heading-h2);line-height:var(--zeile-titel);color:#fff;margin:0 0 8px;}
  .formular-karte__unter{font-size:var(--text-lead);line-height:var(--zeile-text-eng);color:var(--auf-dunkel-stark);margin:0 0 var(--abstand-karte);}
  /* v290: Abschnitte und Feldreihen im Registrierungsformular */
  .formular-karte__abschnitt{font-size:var(--text-lead);font-weight:700;color:#fff;margin:var(--abstand-karte) 0 14px;padding-top:var(--abstand-karte);border-top:1px solid rgba(255,255,255,.12);}
  .formular-karte__abschnitt:first-of-type{border-top:none;padding-top:0;margin-top:0;}
  .feld-reihe{display:grid;gap:16px;}
  .feld-reihe--strasse{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
  .feld-reihe--ort{grid-template-columns:minmax(0,1fr) minmax(0,2fr);}
  @media (max-width:480px){.feld-reihe{grid-template-columns:1fr;gap:0;}}
  select.feld__eingabe{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px;}
  /* Erklaerender Absatz unter dem Untertitel (Passwort vergessen): der
     Untertitel rueckt dann naeher, der Absatz uebernimmt den Kartenabstand. */
  .formular-karte__unter:has(+ .formular-karte__erklaerung){margin-bottom:12px;}
  .formular-karte__erklaerung{font-size:var(--text-small);line-height:var(--zeile-text-eng);color:var(--auf-dunkel);margin:0 0 var(--abstand-karte);}

  .feld{display:block;margin:0 0 20px;}
  .feld__label{display:block;font-size:var(--text-small);font-weight:500;color:var(--auf-dunkel-stark);margin:0 0 8px;}
  .feld__pflicht{color:var(--gold-400);margin-left:2px;}
  .feld__eingabe{display:block;width:100%;box-sizing:border-box;
    font-family:var(--body);font-size:var(--text-input);color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-kachel);
    padding:13px 16px;min-height:48px;
    transition:border-color var(--dauer-sofort) var(--kurve);}
  .feld__eingabe::placeholder{color:var(--ink-muted);}
  .feld__eingabe:focus-visible{border-color:var(--gold-400);}
  .feld__hinweis{font-size:var(--text-small);line-height:var(--zeile-text-eng);color:var(--auf-dunkel-stark);margin:-8px 0 20px;}

  .formular-karte__nebenlink{display:flex;justify-content:flex-end;margin:-8px 0 var(--abstand-karte);}
  /* Nur Textlinks unterstrichen — die Ghost-Buttons sind auch <a>, deshalb
     gezielt statt .formular-karte a (v253). */
  .formular-karte__nebenlink a,.zustimmung a{color:var(--auf-dunkel-stark);text-decoration:underline;text-underline-offset:2px;font-size:var(--text-small);}
  @media (hover:hover){ .formular-karte__nebenlink a:hover,.zustimmung a:hover{color:#fff;} }

  .zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:var(--text-small);line-height:var(--zeile-text-eng);color:var(--auf-dunkel-stark);margin:0 0 var(--abstand-karte);}
  .zustimmung input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:var(--gold-500);}
  .zustimmung a{font-size:inherit;}

  .formular-karte .btn-gold{width:100%;}
  .formular-karte__nachsatz{text-align:center;font-size:var(--text-small);font-weight:700;color:#fff;margin:14px 0 0;}

  /* Trennzeile mit Text: duenne Linie, Textzeile mittig darueber */
  .trenner{border:0;border-top:1px solid rgba(255,255,255,.2);margin:var(--abstand-karte) 0;}
  .formular-karte__frage{text-align:center;font-size:var(--text-small);color:var(--auf-dunkel);margin:0 0 16px;}
  .formular-karte__wechsel{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  /* v284: gestufter Wechsel auf anmelden.html. Handwerker als Knopf ueber die
     volle Breite mit Zeile, fuer wen er gilt (v370: Kunden-Nebensatz entfallen, Kunden registrieren sich nicht).
     Kein Gold: der Gold-Knopf der Seite ist "Anmelden". */
  .formular-karte__wechsel--gestuft{grid-template-columns:1fr;gap:14px;}
  .formular-karte__wechsel--gestuft .btn-ghost-light{flex-direction:column;gap:4px;min-height:56px;padding-top:10px;padding-bottom:10px;}
  .wechsel__zeile{display:block;font-size:var(--text-caption);font-weight:400;color:var(--auf-dunkel);line-height:var(--zeile-text-eng);}
  /* Ghost-Buttons auf dunkler Karte: heller Rand wie in der transparenten Kopfleiste */
  .formular-karte .btn-ghost-light{color:#fff;border-color:rgba(255,255,255,.7);justify-content:center;text-align:center;}
  @media (hover:hover){ .formular-karte .btn-ghost-light:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;} }
  .formular-karte__zeile{text-align:center;font-size:var(--text-small);color:var(--auf-dunkel);margin:0 0 10px;}
  .formular-karte__zeile a{font-weight:700;color:#fff;text-decoration:none;}
  /* v293: Bestaetigungsseite nach der Registrierung. Kein Formular, darum section statt form,
     aber dieselbe dunkle Karte, damit der Schritt als Teil der Registrierungsstrecke gelesen wird. */
  /* v301: Symbol ganz oben ueber der Ueberschrift, linksbuendig wie der Text der Karte */
  .bestaetigung__symbol{display:block;width:72px;height:48px;margin:0 0 var(--abstand-karte);color:#fff;}
  .bestaetigung__text{text-align:center;}
  .bestaetigung .btn-ghost-light{width:100%;margin-top:var(--abstand-karte);}
  /* Prototyp-Kasten: gestrichelt und beschriftet, damit niemand den Ersatzklick fuer ein echtes Bauteil haelt.
     Der Gold-Knopf ist hier erlaubt, weil die Seite sonst keinen hat (eine Gold-Aktion je Ansicht). */
  .prototyp-klick{margin-top:var(--abstand-karte-gross);padding:var(--abstand-karte);border:1px dashed rgba(255,255,255,.45);border-radius:var(--radius-karte);text-align:center;}
  .prototyp-klick__label{font-size:var(--text-small);color:var(--auf-dunkel);margin:0 0 12px;}
  .prototyp-klick .btn-gold{width:100%;}

  @media (max-width:640px){
    .formular-buehne{padding:var(--abstand-block) var(--abstand-rand) var(--abstand-block-gross);}
    .formular-karte{padding:var(--abstand-karte);}
  }
  /* "Als Handwerker registrieren" bricht auf einer 440px-Karte in zwei Zeilen;
     deshalb schon unter 640px untereinander (Projektkante), nicht erst 480. */
  @media (max-width:640px){
    .formular-karte__wechsel{grid-template-columns:1fr;gap:12px;}
  }

  /* v371: Elemente voruebergehend ausblenden, ohne den Code zu entfernen (z. B. "Jetzt Partner werden" im Hero).
     Zum Wiedereinblenden die Klasse im HTML entfernen. */
  .ausgeblendet{display:none !important;}