/* =====================================================================
   EIGHTPROMPTS – GESTALTUNG «Mitternachtsblau» (Entscheid 25.08.2026)
   Farbpsychologie nach Wunsch des Eigentümers: Tiefblau = Vertrauen,
   Tinten-Anthrazit = Macht, entsättigte helle Flächen = Ruhe.
   GOLD gibt es nur noch an EINER Stelle: im Logo (--gold-marke) – die
   Marken-Signatur; Premium entsteht durch diese Zurückhaltung.
   Hell ist der Standard; dunkel folgt AUTOMATISCH der Geräte-Einstellung
   (prefers-color-scheme). Farben & Masse nur hier als Variablen ändern.
   Rollen: --acc = Tinten-Blau (Text/Linien/Fokus, liest sich auf Weiss),
   --acc-btn = Aktionsfläche (Knöpfe, weisser Text --acc-dunkel darauf).
   ===================================================================== */
/* Inter LOKAL (web/schrift/, latin, variabel 400–800, v20 – 25.08.): kein Google-Aufruf mehr.
   font-display:swap = Text erscheint sofort in der Systemschrift, Inter blendet nach. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('schrift/inter-latin.woff2') format('woff2');
}
:root{
  color-scheme:light;
  --bg:#f1f3f7;          /* Hintergrund: kühles Off-White (Ruhe) – bewusst eine Stufe dunkler als die Karten */
  --bg2:#ffffff;         /* Flächen (Karten, Felder) – heben sich klar vom Hintergrund ab */
  --bg3:#e7ebf1;         /* Flächen, gehoben */
  --line:#d7dde6;        /* Linien – kräftig genug, dass ein Kasten wie ein Kasten aussieht (Wunsch 25.08.) */
  --line2:#b7c2d1;       /* Linien, gehoben (Hover) */
  --txt:#1c2430;         /* Text: Tinten-Anthrazit (Macht) */
  --mut:#5d6a7d;         /* gedämpfter Text */
  --acc:#23517e;         /* Tiefblau (Vertrauen): Text-Akzente, Linien, Fokus */
  --acc-rgb:35,81,126;   /* Blau als R,G,B für rgba(var(--acc-rgb), …)-Tönungen */
  --acc-btn:#24557f;     /* Aktionsfläche: Knöpfe, gewählte Chips (weisser Text darauf) */
  --acc-dunkel:#ffffff;  /* Text auf der Aktionsfläche */
  --acc2:#16324f;        /* Zweitakzent: tiefstes Nachtblau – Kauf, Hinweise */
  --gold-hell:#2f6ba3;   /* helleres Blau für Verläufe (Name historisch) */
  --gold-marke:#e0b53a;  /* Gold NUR fürs Logo – die einzige Goldstelle der Seite (Entscheid 25.08.) */
  --warn:#8a5700;
  --err:#c22745; --err-rgb:194,39,69;
  --ok:#1e6b48;
  --deck:rgba(248,250,252,.88);       /* durchscheinende Deckflächen: Kopf, Antworten-Spalte */
  --deck-stark:rgba(248,250,252,.97); /* fast deckend: Aktions-Leiste am Handy */
  --schleier:rgba(16,24,36,.5);       /* Abdunkelung hinter Fenstern */
  --raster:rgba(28,52,84,.05);        /* feines Hintergrund-Raster */
  --platzhalter:#93a0b2;
  --code-txt:#2a3444;                 /* Prompt-Text im Ergebnis-Kasten */
  --karte-schatten:0 1px 2px rgba(20,35,60,.06),0 4px 14px rgba(20,35,60,.07);   /* Karten stehen sichtbar auf der Fläche */
  /* RUNDUNGS-SKALA (Grammatik, 26.08.): 8 (Kleinstteile) · --radius-klein 10 (Chips, Knöpfe,
     Felder) · --radius 14 (Karten, Blöcke) · --radius-gross 18 (Modal, Bühne, Blasen) · 999 (Pillen).
     AUSWAHL-GRAMMATIK (dokumentiert 26.08., bewusst so): getönte Fläche = gewählter CONTAINER
     (Chip, Karte, Option); VOLLE Akzentfläche = kleines BESTÄTIGUNGS-Element (✓-Box, finale
     KI-Pille in der Karte). Neue Bausteine folgen dieser Regel. */
  --radius:14px;
  --radius-klein:10px;
  --radius-gross:18px;
  /* ABSTANDS-RASTER (26.08.): vertikale Abschnittsabstände nur aus dieser 8er-Reihe – die
     unsichtbare 8 als Grundeinheit der ganzen Seite. */
  --r1:8px; --r2:16px; --r3:24px; --r4:32px;
  --schrift:16px;        /* Grundschrift – nie unter 16 */
  --tipp:44px;           /* minimale Tippfläche */
  --kopf:64px;           /* Höhe der Kopfzeile */
  --schatten:0 10px 30px rgba(20,35,60,.12);
}
/* Dunkel: automatisch nach Gerät ODER von Hand über den Kopf-Umschalter (Sonne/Mond).
   ACHTUNG: die zwei Dunkel-Blöcke unten müssen IDENTISCH bleiben – einer greift bei
   Geräte-Dunkel (solange der Kunde nicht «hell» erzwungen hat), einer bei Hand-Wahl. */
@media (prefers-color-scheme:dark){
  :root:not([data-thema="hell"]){
    color-scheme:dark;
    --bg:#0b1017; --bg2:#131c28; --bg3:#1a2534;
    --line:#293a52; --line2:#3d5273;
    --txt:#e9edf3; --mut:#94a2b5;
    --acc:#7fa8d9; --acc-rgb:127,168,217;
    --acc-btn:#2f6ba3; --acc-dunkel:#ffffff;
    --acc2:#234f79; --gold-hell:#3f7fbd;
    --gold-marke:#e8c15a;
    --warn:#e0a63f; --err:#ff7b8f; --err-rgb:255,123,143; --ok:#57c690;
    --deck:rgba(14,20,29,.85); --deck-stark:rgba(14,20,29,.96);
    --schleier:rgba(4,8,14,.72); --raster:rgba(255,255,255,.035);
    --platzhalter:#6e7d92; --code-txt:#d5deea;
    /* Mondlicht-Kante (Idee 29, 26.08.): dunkle Flächen zeigen Erhebung durch LICHT, nicht
       Schatten – die hauchfeine helle Oberkante lässt Karten auf Nachtblau «stehen» */
    --karte-schatten:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    --schatten:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-thema="dunkel"]{
  color-scheme:dark;
  --bg:#0b1017; --bg2:#131c28; --bg3:#1a2534;
  --line:#293a52; --line2:#3d5273;
  --txt:#e9edf3; --mut:#94a2b5;
  --acc:#7fa8d9; --acc-rgb:127,168,217;
  --acc-btn:#2f6ba3; --acc-dunkel:#ffffff;
  --acc2:#234f79; --gold-hell:#3f7fbd;
  --gold-marke:#e8c15a;
  --warn:#e0a63f; --err:#ff7b8f; --err-rgb:255,123,143; --ok:#57c690;
  --deck:rgba(14,20,29,.85); --deck-stark:rgba(14,20,29,.96);
  --schleier:rgba(4,8,14,.72); --raster:rgba(255,255,255,.035);
  --platzhalter:#6e7d92; --code-txt:#d5deea;
  /* Mondlicht-Kante (Idee 29, 26.08.): dunkle Flächen zeigen Erhebung durch LICHT, nicht
     Schatten – die hauchfeine helle Oberkante lässt Karten auf Nachtblau «stehen» */
  --karte-schatten:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --schatten:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.35);
}
/* Scrollbalken in Designfarben – der weisse Windows-Balken passte nicht (gemessen 25.08.) */
html{scrollbar-color:var(--line2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--mut)}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:var(--schrift)/1.55 "Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.005em
}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
kbd{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}

/* --- Hintergrund: ein feines Raster, ein weicher Lichtfleck – mehr nicht --- */
.raster{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 70%)}
/* Lichtflecken: im Hellen kaum sichtbar (edel & ruhig), im Dunkeln wie gehabt */
/* Lichtflecken: STATISCH (Entscheid 25.08., «ruhig & präzise» – nichts wandert von allein) */
.glow{position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(110px);opacity:.10}
.glow.a{width:55vw;height:55vw;background:var(--acc2);top:-30vw;left:-15vw}
.glow.b{width:40vw;height:40vw;background:var(--acc);bottom:-25vw;right:-12vw;opacity:.07}
@media (prefers-color-scheme:dark){ :root:not([data-thema="hell"]) .glow{opacity:.28} :root:not([data-thema="hell"]) .glow.b{opacity:.16} }
[data-thema="dunkel"] .glow{opacity:.28}
[data-thema="dunkel"] .glow.b{opacity:.16}

/* --- Grundlayout --- */
.app{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column}
header.kopf{height:var(--kopf);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;
  border-bottom:1px solid var(--line);background:var(--deck);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:14px;color:var(--txt)}
/* Logo-Zeichen: liegende 8 in Gold auf Nachtblau-Kachel – passt zum Favicon und zur neuen
   Farbwelt (Wunsch 25.08.: «Gold auf Schwarz passte nicht mehr zur Webseite») */
.logo .logo-mark{width:42px;height:24px;padding:3px 5px;background:var(--acc2);border-radius:8px;color:var(--gold-marke);flex:none;box-sizing:border-box}
/* Lebendiges Logo (Wunsch 26.08.): Basis-8 gedimmt, ein Glanz-Segment (26 von 100 Streckenteilen)
   wandert in 3.8 s einmal um die Acht – zeichnet sie endlos nach, ruhig und gleichmässig.
   Zweite bewusste Loop-Ausnahme neben der KI-Laufschleife. */
.logo-mark .logo-basis{opacity:.32}
.logo-mark .logo-lauf{stroke-dasharray:26 74;animation:logoLauf 3.8s linear infinite}
@keyframes logoLauf{to{stroke-dashoffset:-100}}
.kopf .rechts{display:flex;gap:10px;align-items:center}
/* Universelle SVG-Zeichen (Person, Abmelden, Globus) */
.ikon{width:20px;height:20px;display:block;flex:none}
.ikon-btn{display:inline-flex;align-items:center;gap:6px}
[dir=rtl] .ikon.spiegel{transform:scaleX(-1)}   /* Abmelde-Pfeil zeigt bei Arabisch nach links (aus der Tür hinaus) */
/* Sprachwahl: ein Globus-Knopf, darunter die Liste in Eigenschreibweise */
.sprachen{position:relative}
#btnSprache,#btnThema{display:inline-flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-klein);min-height:var(--tipp);min-width:var(--tipp);color:var(--mut)}
#btnSprache:hover,#btnSprache[aria-expanded="true"],#btnThema:hover{color:var(--txt);border-color:var(--line2)}
.sprachmenu{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--radius-klein);box-shadow:var(--schatten);display:grid;min-width:160px;padding:4px;z-index:20}
.sprachmenu[hidden]{display:none!important}   /* siehe bekannte Falle: hidden verliert sonst gegen display:grid */
.sprachmenu button{background:transparent;border:0;border-radius:8px;min-height:var(--tipp);padding:0 14px;text-align:left;color:var(--txt);font-size:15px}
.sprachmenu button:hover{background:var(--bg2)}
.sprachmenu button.on{color:var(--acc-dunkel);background:var(--acc-btn);font-weight:600}
[dir=rtl] .sprachmenu{right:auto;left:0}
[dir=rtl] .sprachmenu button{text-align:right}
.konto{display:flex;gap:6px;align-items:center}

.fortschritt{height:3px;background:var(--line);position:relative;overflow:hidden}
.fortschritt i{display:block;height:100%;width:0;background:var(--acc);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.demo-band{background:rgba(var(--acc-rgb),.08);border-bottom:1px solid rgba(var(--acc-rgb),.25);color:var(--acc);text-align:center;padding:6px 12px;font-size:14px}
.demo-band[hidden],.modal-hinter[hidden]{display:none!important}

/* Eine Spalte (Antworten-Spalte am 25.08. entfernt); Desktop breiter, damit nichts
   eingeengt wirkt (Wunsch 25.08.) – minmax(0,…) gegen Überlauf am Handy (gemessen 23.08.) */
main{flex:1;display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.buehne{padding:40px 24px 110px;max-width:920px;width:100%;margin:0 auto;justify-self:center}
@media (min-width:981px){.buehne{padding:56px 56px 120px}}
.fuss{padding:20px 24px;color:var(--mut);font-size:14px;text-align:center;border-top:1px solid var(--line)}
.fuss-link{font-size:14px;color:var(--mut);text-decoration:none;padding:0 6px}
.fuss-link:hover{color:var(--acc);text-decoration:underline}
.recht-text{max-height:60vh;overflow:auto;color:var(--mut);font-size:14px;line-height:1.65;padding-right:6px;white-space:normal}

/* --- Bildschirmwechsel --- */
.screen{animation:rein .4s cubic-bezier(.2,.8,.2,1) both}
.screen.raus{animation:raus .2s ease-in both}
@keyframes rein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes raus{to{opacity:0;transform:translateY(-8px)}}
/* Handy: nur Deckkraft animieren – ein transform auf .screen würde die fixe Aktions-Leiste
   während der Animation an die Karte statt an den Bildschirm heften */
@keyframes reinFlach{from{opacity:0}to{opacity:1}}
@keyframes rausFlach{to{opacity:0}}
@media (max-width:640px){ .screen{animation-name:reinFlach} .screen.raus{animation-name:rausFlach} }

/* --- Typografie --- */
.eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600;margin-bottom:14px;display:flex;gap:10px;align-items:center}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--acc)}
h1{font-size:clamp(32px,4.6vw,46px);line-height:1.1;margin:0 0 16px;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
h2.frage{font-size:clamp(24px,3.2vw,32px);line-height:1.2;margin:0 0 12px;letter-spacing:-.015em;font-weight:800;text-wrap:balance}   /* balance: gleichmässige Zeilen statt einzelner Wörter am Zeilenende */
b,strong{font-weight:700}   /* Fett muss fett wirken (Wunsch 25.08.) – Inter 700 statt Browser-Ermessen */
.hilfe{color:var(--mut);margin:0 0 20px;font-size:16px}
.hero>p{color:var(--mut);font-size:18px;max-width:58ch;margin:0 0 var(--r3)}   /* NUR der Untertitel – vorher frass diese Regel die Abstände aller Absätze im Hero (z. B. .vn-hinweis, gemessen 25.08.) */

/* --- KI-Laufschleife: ~35 Namen, nahtlose Dauerschleife, reine CSS-Animation (ruckelfrei) --- */
.ticker-block{margin-top:var(--r4)}
.ticker-label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600;margin:0 0 10px}
.ticker{overflow:hidden;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}   /* volle Bühnenbreite – vorher endete die Schleife bei 640 px und liess rechts Leere (Screenshot 25.08.) */
.ticker-spur{display:inline-flex;white-space:nowrap;animation:tickerLauf 90s linear infinite;will-change:transform}
.ticker-spur span{color:var(--mut);font-size:15px;flex:none}
.ticker-spur span::after{content:"·";padding:0 14px;color:var(--line2)}
@keyframes tickerLauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tipp-text span{opacity:0;animation:buchstabe .02s linear both}
@keyframes buchstabe{to{opacity:1}}

/* --- Chat-Blasen: Frage links (wir), letzte Antwort rechts (Kunde) – reine Optik --- */
.blase{position:relative;max-width:min(92%,60ch);border:1px solid var(--line);border-radius:var(--radius-gross);padding:14px 18px;margin:0 0 12px;animation:chipRein .35s cubic-bezier(.2,.8,.2,1) both}
.blase.links{background:var(--bg2);border-bottom-left-radius:5px;margin-right:auto}
.blase.links h2.frage{font-size:clamp(20px,2.7vw,27px);margin:0}
.blase.links .hilfe{margin:8px 0 0;font-size:15px}
.blase.rechts{background:rgba(var(--acc-rgb),.09);border-color:rgba(var(--acc-rgb),.35);border-bottom-right-radius:5px;margin-left:auto;font-size:15px;color:var(--txt);max-width:min(85%,52ch)}
[dir=rtl] .blase.links{margin-right:0;margin-left:auto;border-bottom-left-radius:18px;border-bottom-right-radius:5px}
[dir=rtl] .blase.rechts{margin-left:0;margin-right:auto;border-bottom-right-radius:18px;border-bottom-left-radius:5px}

/* --- Wissens-Zeile: was der Kunde schon gesagt hat --- */
.kontext{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 20px;color:var(--mut);font-size:14px;animation:rein .4s both}
.kontext q{quotes:none;color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:14px;font-style:normal}
[dir=rtl] .kontext{direction:rtl}

/* --- Eingaben --- */
textarea.feld,input.feld{width:100%;min-height:var(--tipp);background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;font-size:17px;line-height:1.5;resize:vertical;transition:border-color .15s,box-shadow .15s}
textarea.feld{min-height:120px}
textarea.feld:focus,input.feld:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.12);outline:none}
textarea.feld::placeholder,input.feld::placeholder{color:var(--platzhalter)}
.feld.fehler{border-color:var(--err);box-shadow:0 0 0 4px rgba(var(--err-rgb),.14);animation:wackel .3s}   /* Token statt Alt-Pink (Zweitmeinung 25.08.) */
@keyframes wackel{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.zaehler{text-align:right;font-size:13px;color:var(--mut);margin-top:6px}
.zaehler.warn{color:var(--warn)}
.meldung{margin-top:10px;color:var(--err);font-size:15px;min-height:1.4em}
.meldung.ok{color:var(--ok)}

/* --- Chips (Auswahl) --- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px 10px 12px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--radius-klein);font-size:16px;text-align:left;transition:border-color .15s,background .15s,transform .15s;animation:chipRein .3s cubic-bezier(.2,.8,.2,1) both}
.chip:nth-child(2){animation-delay:.03s}.chip:nth-child(3){animation-delay:.06s}.chip:nth-child(4){animation-delay:.09s}.chip:nth-child(5){animation-delay:.12s}.chip:nth-child(6){animation-delay:.15s}
@keyframes chipRein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chip:hover{border-color:var(--line2);background:var(--bg3)}
.chip.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.1)}
.chip.ghost{border-style:dashed;color:var(--mut)}
.chip.ghost.on{color:var(--txt)}

/* --- Knöpfe --- */
.leiste{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px}
.btn{min-height:var(--tipp);padding:10px 18px;border-radius:var(--radius-klein);border:1px solid var(--line);background:var(--bg2);font-weight:600;font-size:16px;
  display:inline-flex;align-items:center;gap:8px;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{background:var(--bg3);border-color:var(--line2)}
.btn.primaer{background:var(--acc-btn);color:var(--acc-dunkel);border-color:var(--acc-btn)}
.btn.primaer:hover{filter:brightness(1.05)}
/* «violett» heisst aus historischen Gründen so – es ist der KAUF-Knopf: satter Gold-Verlauf */
.btn.violett{background:linear-gradient(135deg,var(--gold-hell),var(--acc2));color:var(--acc-dunkel);border-color:var(--acc2);text-shadow:none;box-shadow:0 4px 18px rgba(var(--acc-rgb),.25)}
.btn.violett:hover{filter:brightness(1.06)}
.btn.leise{background:transparent;color:var(--mut)}
.btn.leise:hover{color:var(--txt);background:var(--bg2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* Pfeil-Symmetrie: «Zurück» und «Weiter» tragen spiegelbildliche Pfeile – bei Arabisch umgekehrt.
   Zentral hier statt im HTML, damit kein Bildschirm sie vergessen kann. */
#btnZurueck::before{content:"←"}
#btnWeiter.primaer::after{content:"→"}
[dir=rtl] #btnZurueck::before{content:"→"}
[dir=rtl] #btnWeiter.primaer::after{content:"←"}
.btn.klein{min-height:var(--tipp);padding:6px 12px;font-size:15px}
.btn.gross{font-size:17px;padding:13px 24px}
.btn.breit{width:100%;justify-content:center}
.btn .g{font-weight:900;background:#fff;color:#4285f4;border-radius:8px;width:24px;height:24px;display:inline-grid;place-items:center}
#btnLogout{min-width:var(--tipp)}
.link{background:none;border:0;color:var(--acc);font-weight:600;padding:0 8px;min-height:var(--tipp);display:inline-flex;align-items:center;cursor:pointer;text-decoration:underline;vertical-align:middle}

/* --- Startseite --- */
.beispiele{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:10px 0 20px}
.karte{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-align:left;min-height:var(--tipp);transition:border-color .15s,background .15s;box-shadow:var(--karte-schatten)}
.karte:hover{border-color:var(--line2);background:var(--bg3)}
.karte small{display:block;color:var(--mut);font-size:14px;margin-top:4px}

/* --- Branchen-Auswahl: gewählte Karte hervor, andere blass, Erklärung klappt auf --- */
.branchen{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:8px 0 16px}
.branche-karte{flex-direction:column;align-items:stretch;gap:0;border-radius:var(--radius);padding:14px 16px;white-space:normal;transition:opacity .3s,transform .3s,border-color .2s,background .2s}
.branche-karte>span{display:flex;flex-direction:column;gap:3px}
.branche-karte b{font-size:17px}
.branche-karte em{font-style:normal;color:var(--acc);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;white-space:normal}
.branchen.gewaehlt .branche-karte:not(.on){opacity:.25}
.branchen.gewaehlt .branche-karte:not(.on):hover{opacity:.7}
.branche-karte.on{opacity:1;transform:scale(1.02);border-color:var(--acc);background:rgba(var(--acc-rgb),.07);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.12),var(--schatten);z-index:2}
.karte-info{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
.branche-karte.on .karte-info{grid-template-rows:1fr}
.karte-info>*{overflow:hidden}
.karte-info small{display:block;color:var(--txt);font-size:15px;line-height:1.45;padding-top:10px;animation:rein .4s both}
.ki-wahl{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;animation:rein .5s both}
.ki-wahl .chip{padding:6px 14px;min-height:var(--tipp);font-size:15px}   /* Tippfläche ≥ 44 px (Produktregel 7; vorher 40 px, gemessen 24.08.) */
.ki-wahl .chip.on{background:var(--acc-btn);color:var(--acc-dunkel);border-color:var(--acc-btn)}

/* (Die frühere Antworten-Spalte «Deine Antworten» wurde am 25.08. auf Wunsch des Eigentümers entfernt.) */

/* --- Schärfe-Anzeige --- */
.schaerfe{display:grid;grid-template-columns:1fr;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-klein);padding:10px 14px;margin:0 0 16px;font-size:14px;animation:chipRein .3s both}
.schaerfe .balken{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.schaerfe .balken i{display:block;height:100%;background:var(--acc);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.schaerfe b{color:var(--txt);font-weight:700}
.schaerfe span{color:var(--mut)}
/* Dopamin-Feinschliff (25.08.): kurzer Glanz nach jeder Antwort, satterer Balken kurz vor dem Ziel */
.schaerfe.sprung .balken i{animation:balkenGlanz .6s ease-out}
@keyframes balkenGlanz{0%{filter:brightness(1.6)}100%{filter:brightness(1)}}
.schaerfe.fast .balken i{background:linear-gradient(90deg,var(--acc),var(--gold-hell))}

/* --- Listen (Radar, Ideen) --- */
.liste{display:grid;gap:8px;margin:8px 0 8px}
.option{display:flex;gap:14px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-align:left;width:100%;min-height:var(--tipp);transition:border-color .15s,background .15s;animation:chipRein .3s both;box-shadow:var(--karte-schatten)}
.option:hover{border-color:var(--line2)}
.option .box{flex:0 0 24px;height:24px;border-radius:8px;border:2px solid var(--line2);display:grid;place-items:center;font-size:13px;color:var(--acc-dunkel);font-weight:900;margin-top:2px}
.option.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.07)}
.option.on .box{background:var(--acc-btn);border-color:var(--acc-btn)}
.option b{display:block;font-size:16px}
.option span.t{color:var(--mut);font-size:15px}
.radar-scan{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin:8px 0 16px;position:relative}
.radar-scan i{position:absolute;inset:0;width:30%;background:linear-gradient(90deg,transparent,var(--acc),transparent);animation:scan 1.4s linear infinite}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(400%)}}
.ideen-grid{display:grid;gap:8px}
.idee{display:flex;gap:12px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-align:left;width:100%;min-height:var(--tipp);animation:chipRein .3s both}
.idee:hover{border-color:var(--acc)}
.idee .nr{flex:none;width:28px;height:28px;border-radius:8px;background:var(--bg3);border:1px solid var(--line);color:var(--mut);display:grid;place-items:center;font-weight:700;font-size:13px}
.idee b{display:block;font-size:16px}
.idee em{font-style:normal;color:var(--acc);font-size:13px;text-transform:uppercase;letter-spacing:.08em}

/* --- Ergebnis --- */
.ergebnis-kopf{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.block{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;position:relative;overflow:hidden;box-shadow:var(--karte-schatten)}
.block h3{margin:0 0 6px;font-size:17px;font-weight:700}
.block p.t,.block .t{color:var(--mut);margin:0 0 12px;font-size:15px;font-weight:400}
.block pre{white-space:pre-wrap;word-break:break-word;font:14.5px/1.6 ui-monospace,"Cascadia Mono",Consolas,monospace;margin:0;color:var(--code-txt);max-height:520px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-klein);padding:14px}
.block .werkz{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.slash-liste{display:grid;gap:8px}
.slash{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-klein);padding:10px 12px}
.slash code{font-family:ui-monospace,Consolas,monospace;color:var(--acc);font-weight:700;font-size:15px;white-space:nowrap}
.slash small{display:block;color:var(--mut);font-size:15px}
.slash .wann{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2);font-weight:700}
/* Würdige Enthüllung (25.08., ersetzt das Kauf-Konfetti – Robinhood-Regel): der frische
   Prompt hebt sich ruhig auf die Seite, der Text wird von oben nach unten aufgedeckt. */
.block.enthuellung{animation:enthuellen .7s cubic-bezier(.2,.8,.2,1) both}
.block.enthuellung pre{animation:schleier 1.4s cubic-bezier(.3,.6,.2,1) .35s both}
@keyframes enthuellen{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes schleier{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0% 0)}}

/* --- Modal: Login, Aufladen, Kauf --- */
.modal-hinter{position:fixed;inset:0;background:var(--schleier);backdrop-filter:blur(6px);z-index:40;display:grid;place-items:center;padding:16px;animation:rein .2s both}
.modal{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius-gross);padding:24px;max-width:480px;width:100%;box-shadow:var(--schatten);position:relative;animation:rein .3s both;max-height:90vh;overflow:auto}
/* Kassen-Muster (gemessen 26.08.): Die Kaufknopf-Leiste KLEBT am unteren Fensterrand, der Rest
   scrollt darüber – der Kaufknopf ist damit auf jedem Handy sichtbar, egal wie lang die Vorschau
   ausfällt. Negative Ränder gleichen das Modal-Padding aus, damit die Leiste randbündig deckt. */
.modal .leiste:last-child{position:sticky;bottom:-24px;margin:12px -24px -24px;padding:12px 24px 20px;background:var(--bg2);border-top:1px solid var(--line)}
.modal h3{margin:0 0 6px;font-size:21px;font-weight:700}
.modal .t{color:var(--mut);font-size:15px;margin:0 0 14px}
.modal .t.klein,.modal .klein{font-size:13px;color:var(--mut)}
.modal #modalZu{position:absolute;top:10px;right:10px;min-width:var(--tipp)}
[dir=rtl] .modal #modalZu{right:auto;left:10px}
.modal .leiste .btn{width:100%;justify-content:center}
.login-liste{display:grid;gap:10px}
.login-liste .zeile{display:flex;gap:8px;flex-wrap:wrap}
.login-liste input{flex:1;min-width:180px;min-height:var(--tipp);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-klein);padding:0 12px;font-size:16px}
body.modal-offen{overflow:hidden}
.preis{font-size:24px;font-weight:700;color:var(--acc);letter-spacing:-.02em}
.vorschau{background:var(--bg);border:1px dashed var(--acc2);border-radius:var(--radius-klein);padding:12px 14px;margin:4px 0 12px}
.vorschau b{display:block;color:var(--acc2);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.vorschau p{margin:0 0 6px;font-size:15px;line-height:1.5}
.vorschau small{color:var(--mut);font-size:13px}
.zustimmung{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-klein);padding:12px;font-size:14px;cursor:pointer;margin:12px 0 8px}
/* Kauffenster-Zusätze (Ideen 8+9, 26.08.): verschlossene Struktur + «Im Preis enthalten» */
.struktur-liste{display:grid;gap:6px;margin-top:8px;font-size:13.5px;color:var(--txt)}
.kauf-inhalt{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:5px;font-size:13.5px}
.kauf-inhalt li{padding-inline-start:22px;position:relative}
.kauf-inhalt li::before{content:'✓';position:absolute;inset-inline-start:0;color:var(--acc);font-weight:700}
.login-ziel{margin:2px 0 6px}
.kauf-garantie{margin:8px 0 0;color:var(--acc)}

/* --- Neuzugänge 26.08. (Ideen 13/15/16/17/22/23/25/26) --- */
/* 16: ehrlicher Schärfe-Zuwachs («+12 %») – blendet einmalig ein und ruhig wieder aus;
   bei «Bewegung reduzieren» bleibt er bewusst unsichtbar (Grundzustand 0) */
.schaerfe .delta{opacity:0;color:var(--acc);font-weight:700;margin-inline-start:6px;animation:deltaZeig 1.8s ease both}
@keyframes deltaZeig{0%{opacity:0;transform:translateY(2px)}12%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
/* 17: der Frühkauf-Knopf tritt einmalig ruhig auf, mit erklärender Zeile */
.kauf-hinweis{animation:rein .4s cubic-bezier(.2,.8,.2,1) both}
/* 25: Enthüllung in zwei Akten – erst deckt sich das Werk auf, dann hebt sich die Handlung
   ins Bild (der Knopf ist während des Einblendens bereits klickbar) */
.enthuellung .werkz{animation:rein .45s cubic-bezier(.2,.8,.2,1) 1.75s both}
/* 26: der bezahlte Prompt ist das ranghöchste Element der Ergebnis-Seite – feine
   Verlaufslinie (Vertrauens-Blau, KEIN Gold) nur auf dem Prompt-Block; Hilfs-Titel
   treten als Versalien-Kicker zurück, nur der Prompt-Titel bleibt gross */
.prompt-block::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
#promptPre{font-size:15px;line-height:1.7;padding:18px}
[data-phase="ergebnis"] .block h3{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
[data-phase="ergebnis"] .block h3 .t{text-transform:none;letter-spacing:0;font-weight:400}
[data-phase="ergebnis"] .prompt-block h3.prompt-titel{font-size:17px;letter-spacing:0;text-transform:none;color:var(--txt)}
/* 15: Fortsetzen-Karte auf der Startseite – die eigenen Worte statt eines grauen Knopfs */
.karte.fortsetzen{display:block;width:100%;margin-top:var(--r2);text-align:start;border-color:var(--acc)}
.karte.fortsetzen b{display:block;color:var(--acc);font-size:14px}
.karte.fortsetzen span{display:block;margin:2px 0;overflow-wrap:anywhere}
.karte.fortsetzen small{color:var(--mut)}
/* 22: stille Vertrauens-Zeile unter den Start-Knöpfen */
.hero-vertrauen{color:var(--mut);font-size:13.5px;margin:var(--r2) 0 0}
/* 23: Prüf-Datum der Steckbriefe – echtes Kompetenz-Signal, kein Schmuck */
.leit-stand{display:block;color:var(--mut);font-size:12.5px;padding:0 0 12px}
.ticker-label .stand{color:var(--mut);font-weight:400}
.zustimmung input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--acc)}
.daumen{display:inline-flex;gap:6px;margin-inline-start:auto}   /* logisch statt physisch – landet auch bei Arabisch am Zeilenende (Befund 25.08.) */
.daumen button{min-width:var(--tipp);min-height:var(--tipp);border-radius:var(--radius-klein);border:1px solid var(--line);background:var(--bg);font-size:18px}
.daumen button.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.12)}

/* --- Kundenportal («Mein Bereich»): Dashboard – schlicht, aber mit Freude --- */
.stat-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 16px}
.stat-karte{position:relative;background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:6px;transition:transform .2s,border-color .2s;animation:chipRein .35s both}
.stat-karte:nth-child(2){animation-delay:.06s}.stat-karte:nth-child(3){animation-delay:.12s}
.stat-karte:hover{transform:translateY(-2px);border-color:var(--line2)}
.stat-karte>span{color:var(--mut);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.stat-karte .zahl{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--txt);font-variant-numeric:tabular-nums}
.stat-karte.guthaben-gross{border-color:rgba(var(--acc-rgb),.45);box-shadow:0 0 24px rgba(var(--acc-rgb),.12) inset}
.stat-karte.guthaben-gross .zahl{color:var(--acc);font-size:34px}
.stat-karte .btn{align-self:flex-start;margin-top:2px}
.zahl.geheim{filter:blur(9px);user-select:none}   /* Ausgaben nur auf Wunsch sichtbar (Schalter) */
.schalter{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin-top:4px}
.schalter input{position:absolute;opacity:0}
.schalter i{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;flex:none}
.schalter i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mut);transition:transform .2s,background .2s}
.schalter input:checked+i{background:rgba(var(--acc-rgb),.4)}
.schalter input:checked+i::after{transform:translateX(16px);background:var(--acc)}
.schalter em{font-style:normal;color:var(--mut);font-size:13px}
.kat-balken{display:grid;gap:8px}
.kb{display:grid;grid-template-columns:minmax(90px,130px) 1fr auto;gap:10px;align-items:center;font-size:14px}
.kb span{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-spur{height:10px;border-radius:5px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.kb-spur i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--acc2),var(--acc));animation:balkenRein .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes balkenRein{from{width:0}}   /* wächst von 0 auf die gesetzte Breite */
.kb b{font-variant-numeric:tabular-nums}
.portal-liste{display:grid;gap:10px}
.p-eintrag{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-klein);padding:12px 14px;display:grid;gap:6px;transition:border-color .15s}
.p-eintrag:hover{border-color:var(--line2)}
.p-kopf{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.p-kopf b{font-size:15.5px}
.ablauf{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--mut);flex:none}
.ablauf.knapp{color:var(--warn);border-color:rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.08)}   /* ≤ 2 Tage: jetzt herunterladen! */
.p-eintrag .werkz{margin-top:2px;align-items:center}

/* --- Toast --- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(30px);opacity:0;pointer-events:none;z-index:20;background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--acc);
  color:var(--txt);padding:12px 16px;border-radius:var(--radius-klein);max-width:min(92vw,520px);font-size:15px;transition:all .3s;box-shadow:var(--schatten)}
.toast.zeig{opacity:1;transform:translateX(-50%);pointer-events:auto}   /* unsichtbar fängt er keine Tipper mehr ab (Befund 25.08.) */
.toast.err{border-left-color:var(--err)}
.toast.warn{border-left-color:var(--warn)}
[dir=rtl] .toast{border-left:1px solid var(--line);border-right:3px solid var(--acc)}
@media (max-width:640px){ .toast{bottom:104px} }   /* über der fixen Weiter-Leiste (12px + ~84px + Luft) – vorher verdeckte er den Knopf 4 s lang (Befund 25.08.) */
body.ziehen::after{content:attr(data-drop);position:fixed;inset:12px;border:2px dashed var(--acc);border-radius:var(--radius-gross);display:grid;place-items:center;font-size:22px;font-weight:700;background:var(--deck-stark);z-index:30}

/* --- Handy: Karten, Wischen, kompakter Kopf --- */
@media (max-width:640px){
  header.kopf{padding:0 12px;gap:6px}
  .logo{font-size:13px;gap:6px}
  .konto .langtext{display:none}
  .btn.klein{padding:6px 8px;font-size:14px;min-width:var(--tipp)}
  .buehne{padding:20px 16px 140px;min-height:calc(100vh - 140px);display:flex;flex-direction:column;justify-content:center}
  .screen{background:var(--deck);border:1px solid var(--line);border-radius:var(--radius-gross);padding:18px 16px;box-shadow:var(--schatten)}
  /* Kein Doppelrahmen (Idee 30, 26.08.): Seiten, die selbst aus Karten bestehen, fliessen
     direkt auf dem Grund – die Bühnen-Karte bleibt nur dort, wo sie die Chat-Bühne IST
     (Fragen, Ziel, Beweis …). Karte-in-Karte-in-Karte war das stärkste Baukasten-Signal. */
  [data-phase="start"] .screen,[data-phase="ergebnis"] .screen,[data-phase="portal"] .screen{background:transparent;border:0;box-shadow:none;padding:0}
}
@media (max-width:400px){ .logo span{display:none} }
.konto .langtext{margin-left:4px}

/* --- Arabisch: rechts nach links --- */
[dir=rtl] body,[dir=rtl] .buehne{text-align:right}
[dir=rtl] .eyebrow::before{order:2}
[dir=rtl] .slash{direction:rtl}
[dir=rtl] pre{direction:ltr;text-align:left}
/* RTL-Spiegelungen der neuen Elemente (Befunde des Prüf-Teams, 25.08.) */
[dir=rtl] details.ki-leitfaden summary::before,[dir=rtl] details.kauf-mehr summary::before,[dir=rtl] details.mehr-start summary::before{margin-right:0;margin-left:6px}
[dir=rtl] .vn-chip{text-align:right}
[dir=rtl] .zaehler{text-align:left}
[dir=rtl] .vn-scroll{padding-right:0;padding-left:6px}
[dir=rtl] .recht-text{padding-right:0;padding-left:6px}
[dir=rtl] .schalter i::after{left:auto;right:3px}
[dir=rtl] .schalter input:checked+i::after{transform:translateX(-16px)}

/* --- Klebende Aktions-Leiste: «Weiter» ist am Handy IMMER sichtbar (vorher lag der Knopf
       auf 9 von 14 Bildschirmen unterhalb des Bildschirmrands – gemessen 23.08.) --- */
@media (max-width:640px){
  .leiste.aktionen{position:fixed;left:8px;right:8px;bottom:12px;z-index:5;background:var(--deck-stark);backdrop-filter:blur(8px);
    border:1px solid var(--line);border-radius:var(--radius);padding:10px;margin:0;flex-wrap:nowrap;overflow-x:auto}
  .leiste.aktionen .btn{flex:none}
  /* bottom:12px – der frühere Steckbrief-Griff darunter ist weg (25.08.); .buehne hält 110px Fussabstand frei */
}

/* --- Einfaches Kauffenster (25.08.): Preis-Zeile, Qualitäts-Schalter, Stufen-Aufklapper --- */
.kauf-preis{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.kauf-preis .t{margin:0;font-size:14px}
.kauf-preis .klein{flex-basis:100%;color:var(--mut);font-size:13px}
.kauf-quali{margin:10px 0 12px}
.kauf-quali em{font-size:14px;color:var(--txt)}
details.kauf-mehr summary{cursor:pointer;color:var(--mut);font-size:14px;min-height:var(--tipp);display:flex;align-items:center;list-style:none}
details.kauf-mehr+details.kauf-mehr{margin-top:4px;border-top:1px solid var(--line);padding-top:4px}   /* zwei Aufklapper direkt übereinander: feine Trennung (Zweitmeinung 25.08.) */
details.kauf-mehr summary::before{content:"▸ ";color:var(--acc);margin-right:6px}
details.kauf-mehr[open] summary::before{content:"▾ "}

/* --- Kauf-Fortschritt (eigenes Bau-Fenster, 25.08.): Balken läuft 60 s bis 92 % – ehrlich,
       nie «fertig» vor dem Ergebnis; die 4 echten Schritte werden nacheinander abgehakt --- */
.bau{margin:10px 0 4px}
.bau-balken{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin:0 0 14px}
.bau-balken i{display:block;height:100%;width:0;background:var(--acc);animation:bauLauf 60s cubic-bezier(.25,.6,.35,1) forwards}
@keyframes bauLauf{to{width:92%}}
.bau-schritte{display:grid;gap:8px}
.bau-schritt{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--mut);transition:color .3s}
.bau-schritt .haken{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--acc-dunkel);transition:all .3s}
.bau-schritt.aktiv{color:var(--txt)}
.bau-schritt.aktiv .haken{border-color:var(--acc);animation:hakenPuls 1.2s ease-in-out infinite}
.bau-schritt.fertig{color:var(--txt)}
.bau-schritt.fertig .haken{background:var(--acc-btn);border-color:var(--acc-btn)}
@keyframes hakenPuls{50%{box-shadow:0 0 0 4px rgba(var(--acc-rgb),.15)}}

/* --- Beweis-Bildschirm (Köder nach wenigen Antworten) --- */
.beweis{background:var(--bg2);border:1px dashed var(--acc2);border-radius:var(--radius);padding:16px;margin:4px 0 8px;box-shadow:var(--karte-schatten)}
.beweis p{margin:0 0 12px;font-size:16px;line-height:1.55}
.beweis-struktur{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.beweis-struktur span{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--mut);background:var(--bg)}
.beweis-struktur span.auf{color:var(--acc);border-color:rgba(var(--acc-rgb),.5)}
.beweis small{color:var(--mut);font-size:13px}
/* Steckbrief-Leitfaden «So benutzt du {KI} richtig» unter dem Schreibfeld (25.08.) */
details.ki-leitfaden{margin:10px 0 4px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:0 14px}
details.ki-leitfaden summary{cursor:pointer;color:var(--mut);font-size:14px;min-height:var(--tipp);display:flex;align-items:center;list-style:none}
details.ki-leitfaden summary::before{content:"▸ ";color:var(--acc);margin-right:6px}
details.ki-leitfaden[open] summary::before{content:"▾ "}
details.ki-leitfaden .leit-zeilen{display:flex;flex-direction:column;gap:6px;padding:8px 0 14px;font-size:14px;line-height:1.45}   /* klebte mit 2px an der Überschrift (gemessen 25.08.) */
details.ki-leitfaden .leit-zeilen .gut{color:var(--txt)}
details.ki-leitfaden .leit-zeilen .achtung{color:var(--mut)}
/* «Das brauchst du bei {KI}»-Checkliste auf der Ergebnis-Seite (Werkzeug-Wissen, 25.08.) */
.block .braucht-titel{margin:16px 0 8px}   /* .block h3 frass den Abstand per Spezifität (gemessen 25.08.); 8er-Raster */
.anleitung.braucht li{color:var(--txt)}
.anleitung.braucht{list-style:none;padding-left:4px}
.anleitung.braucht li::before{content:"✓ ";color:var(--acc);font-weight:700}
[dir=rtl] .anleitung.braucht{padding-left:0;padding-right:4px}
/* Tempo-Weiche (Schnellstart B+, 25.08.): zwei grosse Wahl-Karten unter dem Beweis */
.tempo-frage{font-size:17px;margin:16px 0 8px}
.liste.tempo .option b{font-size:16px}
.liste.tempo #btnSchnell{border-color:var(--acc);background:rgba(var(--acc-rgb),.07)}
.liste.tempo #btnSchnell:hover{background:rgba(var(--acc-rgb),.13)}
/* Vorher/Nachher auf der Startseite (25.08.): zeigen statt versprechen */
.vn-block{margin-top:var(--r4)}
.vn-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;align-items:stretch}
.vn{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;min-width:0;box-shadow:var(--karte-schatten)}
.vn small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:600;margin-bottom:8px}
.vn-chips{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.vn-chip{font-style:italic;color:var(--mut);text-align:left;justify-content:flex-start}
.vn-chip.on{color:var(--txt);font-style:normal}
.vn.nachher{border-color:rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),.05);position:relative;overflow:hidden}
.vn.nachher small em{font-style:normal;color:var(--acc);font-weight:700}
/* Scrollbarer Prompt-Kasten: der Fade unten zeigt «da kommt mehr» und verschwindet am Ende (CTA) */
.vn-scroll{max-height:230px;overflow-y:auto;padding-right:6px;scrollbar-width:thin}
.vn-fade{position:absolute;left:1px;right:1px;bottom:1px;height:70px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg2) 90%);border-radius:0 0 var(--radius) var(--radius);transition:opacity .35s}
.vn-fade.weg{opacity:0}
.vn-prompt{font-size:13px;line-height:1.5;display:flex;flex-direction:column;gap:2px}
.vn-prompt b{color:var(--acc);font-size:12px;letter-spacing:.04em;margin-top:8px}
.vn-prompt b:first-child{margin-top:0}
.vn-prompt span{color:var(--txt);opacity:.85}
.vn-cta{width:100%;margin:14px 0 6px}
.vn-hinweis{margin:16px 0 0;font-size:14px;color:var(--mut)}   /* Luft zum Kasten – der Satz klebte direkt daran (Screenshot 25.08.) */
@media (max-width:640px){ .vn-grid{grid-template-columns:1fr} .vn-chips{flex-direction:row;flex-wrap:wrap} .vn-chip{flex:1 1 45%} }   /* 640 statt 560: zwischen 561–640 waren zwei Spalten gequetscht (Befund 25.08.) */

/* --- Ergebnis: Anleitung, Erklärungen, «Mehr»-Bereich --- */
ol.anleitung,ul.anleitung{margin:0;padding-left:22px;display:grid;gap:8px;font-size:15.5px}   /* auch die ul der Braucht-Liste – vorher klebten deren Punkte ohne Abstand (gemessen 25.08.) */
[dir=rtl] ol.anleitung{padding-left:0;padding-right:22px}
ul.erkl{margin:8px 0 0;padding-left:16px;color:var(--mut);font-size:14px;display:grid;gap:4px}
[dir=rtl] ul.erkl{padding-left:0;padding-right:16px}   /* sonst 40px Browser-Einzug rechts (gleicher Mechanismus wie der bestätigte Braucht-Befund) */
details.block.mehr summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:var(--tipp)}
details.block.mehr summary::before{content:"▸";color:var(--acc);transition:transform .2s}
details.block.mehr[open] summary::before{transform:rotate(90deg)}
details.mehr-start{margin-top:var(--r4)}
details.mehr-start summary{cursor:pointer;color:var(--mut);font-size:15px;min-height:var(--tipp);display:flex;align-items:center;list-style:none}
details.mehr-start summary::before{content:"▸ ";color:var(--acc);margin-right:6px}
details.mehr-start[open] summary::before{content:"▾ "}
details.mehr-start .beispiele{margin-top:12px}

.chip .geb{color:var(--mut);font-size:12px;margin-left:2px}   /* kleine Gebühren-Angabe auf den Auflade-Chips */

/* --- Freie KI-Wahl: eigener KI-Name + Empfohlen-Abzeichen --- */
.ki-eigene{margin-top:8px;width:100%;min-height:var(--tipp);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-klein);padding:0 12px;font-size:15px}
.ki-eigene:focus{border-color:var(--acc);outline:none}
.ki-wahl .empf{font-style:normal;font-size:11px;color:var(--warn);font-weight:700;letter-spacing:.04em;margin-left:4px}

/* «Bewegung reduzieren»: ENTSCHEID DES EIGENTÜMERS 27.08.2026 – die Systemeinstellung
   prefers-reduced-motion wird bewusst NICHT beachtet; die wenigen, kleinen Animationen
   (Logo-Schleife, KI-Laufschleife, Status-Balken, Übergänge) laufen für ALLE Nutzer.
   Begründung: viele haben die iOS-Einstellung unwissentlich aktiv und erlebten die Seite
   als «tot» (sein eigener Fund am iPhone). Bewusste Abweichung von der Bedienbarkeits-Norm –
   NICHT «zurückreparieren» ohne neuen Entscheid des Eigentümers. Der frühere Block (alles aus
   + Endzustände für tipp-text/bau-balken/logo) liegt in der Chronik, falls je wieder nötig. */

/* ---- Testphasen-Vorhang (27.08.): Zugangswort-Bildschirm, solange plattform.testSperre gesetzt ist ---- */
.test-sperre{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--bg);padding:24px}
.test-sperre .ts-karte{width:min(380px,100%);background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-gross,18px);box-shadow:var(--karte-schatten);padding:36px 24px;text-align:center}
.test-sperre svg{color:var(--gold-marke,#c9a227);background:var(--acc2);border-radius:12px;padding:5px 9px}
.test-sperre h1{font-size:22px;margin:14px 0 4px;color:var(--txt)}
.test-sperre .ts-text{color:var(--mut);font-size:16px;margin:0 0 18px}
.test-sperre form{display:flex;flex-direction:column;gap:10px}
.test-sperre input{width:100%;box-sizing:border-box;font-size:16px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--txt);text-align:center}
.test-sperre input:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.test-sperre .btn{width:100%;min-height:48px}
.test-sperre .ts-fehl{color:#b3261e;font-size:14px;margin:12px 0 0}