/* Ω0.1 · Die Schriften lagen nie am angegebenen Ort: `url('fonts/…')` löst relativ
   zu dieser Datei auf, also nach /css/fonts/ — dort ist nichts. Seit dem Umzug auf
   /de|/en|/es fiel das auf, weil die Seite in Georgia statt Cormorant rendert.
   Jetzt: eigener Web-Ordner mit gekürzten WOFF2-Fassungen (3123 KB → 288 KB).
   `packages/engine/themes/_fonts/` bleibt unangetastet — das ist der PDF-Satz.
   `font-display:swap` zeigt sofort Text statt einer leeren Fläche. */
@font-face{font-family:'Cormorant';src:url('../fonts/CormorantGaramond-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../fonts/CormorantGaramond-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'InterV';src:url('../fonts/Inter-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* U9 „Hell & einladend" — die Werkstatt bei Tageslicht.
   Die Variablen-NAMEN bleiben (jede Ansicht nutzt sie), die SEMANTIK ist neu:
   --tinte   = der helle Werkstatt-Raum (Seitenhintergrund, ehem. dunkel)
   --werkbank= helle Karten/Flächen („Papier auf dem Holztisch")
   --leiste  = etwas tiefere helle Fläche (aktiv, Blasen)
   --schrift = Buchdruckfarbe (dunkles Warmbraun)
   --gold    = Messing-Beschlag (Knöpfe/Kanten) · --gold-hell = Messing-TEXT (dunkler, lesbar)
   --holz    = die geölte Werkbank-Kante (Signatur oben) */
:root{
  --tinte:#f3eee1; --werkbank:#faf7ee; --leiste:#eee7d4;
  --papier:#fdfbf4; --buetten:#efe9db; --papier-schatten:#e3dbc8;
  --gold:#a97b3f; --gold-hell:#8a662a; --stempel:#b3472e;
  --schrift:#2b2620; --grau:#6d6355; --linie:#e0d7c1;
  --ink:#25231e; --ink-soft:#5a5548;
  --holz:#b0794a; --druckgruen:#2e6b4f;
}
*{box-sizing:border-box;margin:0}
html{-webkit-font-smoothing:antialiased;height:100%}
/* Z1a · Die Seite ist ein Gitter aus drei Zeilen: Holzkante · Inhalt · Fußzeile.
   Dadurch kennt der Inhalt seine echte Resthöhe — früher wurde sie geraten
   (calc(100vh - 252px)) und die Seite war immer ~197 px zu hoch. */
body{background:var(--tinte);background-image:radial-gradient(ellipse at 50% -10%, #faf6ea 0%, var(--tinte) 58%);color:var(--schrift);font-family:'InterV',system-ui,sans-serif;font-size:15.5px;line-height:1.6;
  min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
/* Vollbild-Ansichten (Studio, Schmiede, Blättern): genau EINE Bildschirmseite,
   gescrollt wird nur innen — im Buch, in der Liste, im Chat. */
body.voll{height:100dvh;min-height:0;overflow:hidden}
body.voll .rahmen{padding-bottom:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
body.voll .rahmen>*{flex:0 0 auto;min-height:0}
body.voll .rahmen>.st-arena,
body.voll .rahmen>.st-buehne,
body.voll .rahmen>.hf-studio,
body.voll .rahmen>.bl-buehne{flex:1 1 auto;min-height:0}
body.voll .fusszeile{margin-top:8px;padding:5px 22px 7px}
body.voll .fusszeile a{font-size:11.5px;margin:0 7px}
h1,h2,h3,.serif{font-family:'Cormorant',Georgia,serif;font-weight:500;letter-spacing:.01em}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:var(--ink)}
a{color:var(--gold-hell)}
::selection{background:var(--gold);color:#fffdf6}

/* ---------- Rahmen */
.rahmen{max-width:1200px;margin:0 auto;padding:0 28px 80px}
/* Die Signatur der Werkstatt: eine geölte Holzkante oben am Raum */
body::before{content:"";display:block;height:6px;background:linear-gradient(90deg,#8a5f36,#b0794a 18%,#96693c 41%,#b57e4e 63%,#8f6338 82%,#a9744a);box-shadow:0 1px 0 rgba(120,85,45,.35)}
header.kopf{display:flex;align-items:baseline;gap:18px;padding:24px 0 16px;border-bottom:1px solid var(--linie)}
.marke{font-family:'Cormorant',serif;font-weight:600;font-size:26px;letter-spacing:.32em;color:var(--gold-hell)}
.marke small{display:block;font-family:'InterV';font-weight:400;font-size:10.5px;letter-spacing:.18em;color:var(--grau);margin-top:2px}
.kopf .status{margin-left:auto;font-size:12px;color:var(--grau)}

/* ---------- Tor (Zugangscode) */
.tor{max-width:380px;margin:14vh auto;text-align:center}
.tor h1{font-size:34px;margin-bottom:6px;color:var(--schrift)}
.tor p{color:var(--grau);margin-bottom:26px}
.tor input{width:100%;padding:13px 16px;border-radius:4px;border:1px solid var(--linie);background:var(--papier);text-align:center;letter-spacing:.3em;font-size:16px}
.tor button{margin-top:14px;width:100%}

/* ---------- Knöpfe */
.kn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:5px;background:var(--gold);color:#fffdf6;font-weight:600;font-size:13.5px;letter-spacing:.04em;transition:transform .12s ease, box-shadow .12s ease;box-shadow:0 1px 2px rgba(110,80,40,.25)}
.kn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(150,110,60,.3)}
.kn:disabled{opacity:.45;transform:none;box-shadow:none;cursor:default}
.kn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.kn.leise{background:#fffdf6;color:var(--schrift);border:1px solid #cdc2a8;box-shadow:none}
.kn.leise:hover{border-color:var(--gold);color:var(--gold-hell);box-shadow:none}
.blatt .kn.leise{color:var(--ink);border-color:#b5ad99;background:#fffdf7}
.blatt .kn.leise:hover{border-color:var(--gold);color:#7a5c1e}
.kn.klein{padding:5px 10px;font-size:12px}
.kn.rot{background:transparent;border:1px solid var(--stempel);color:var(--stempel);box-shadow:none}

/* ---------- Projektliste — Bücher wie Blätter auf dem Tisch */
.regal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:26px}
.buchkarte{background:var(--werkbank);border:1px solid var(--linie);border-radius:7px;padding:20px 18px;text-align:left;transition:border-color .15s, box-shadow .15s, transform .15s;box-shadow:0 1px 3px rgba(120,95,55,.1)}
.buchkarte:hover{border-color:var(--gold);box-shadow:0 6px 18px rgba(130,100,55,.16);transform:translateY(-1px)}
.buchkarte .t{font-family:'Cormorant',serif;font-size:21px;line-height:1.25;color:var(--schrift)}
.buchkarte .a{font-size:12.5px;color:var(--grau);margin-top:6px}
.buchkarte.neu{border-style:dashed;color:var(--grau);display:flex;align-items:center;justify-content:center;min-height:110px;font-size:14px;background:transparent;box-shadow:none}
.buchkarte.neu:hover{color:var(--gold-hell);transform:none}
.kindzeile{cursor:pointer;border-radius:5px;padding:2px 4px}
.kindzeile:hover{background:rgba(169,123,63,.1)}

/* ---------- Arbeitsgänge — der Setzkasten */
.gaenge{display:flex;gap:0;margin:26px 0 30px;border:1px solid var(--linie);border-radius:7px;overflow:hidden;background:var(--werkbank);box-shadow:0 1px 3px rgba(120,95,55,.1)}
.gang{flex:1;padding:12px 10px 11px;text-align:center;font-size:12px;letter-spacing:.08em;color:var(--grau);background:transparent;border-right:1px solid var(--linie);transition:background .15s;position:relative}
.gang:last-child{border-right:none}
.gang b{display:block;font-family:'Cormorant',serif;font-size:17.5px;letter-spacing:.02em;font-weight:600;color:inherit}
.gang.aktiv{background:#fffdf6;color:var(--gold-hell);box-shadow:inset 0 -3px 0 var(--gold)}
.gang.fertig{color:var(--schrift)}
.gang .nr{color:var(--gold);font-size:10.5px}
/* Weg-Leiste v2: Status-Zeile je Station + ⌂-Zuhause + Job-Puls */
.gang .stand{display:block;font-size:10.5px;letter-spacing:.02em;text-transform:none;color:var(--grau);margin-top:3px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gang.st-fertig .stand{color:var(--druckgruen)}
.gang.st-warn .stand{color:#a06a10;font-weight:600}
.gang.zuhause{flex:0 0 84px;min-width:72px}
.gang.zuhause b{font-size:20px;line-height:1.1}
.gang .stand .laeuft{width:8px;height:8px;margin-right:5px}

/* ---------- Werkstatt-Layout */
.blatt{background:var(--papier);color:var(--ink);border-radius:6px;padding:26px 28px;border:1px solid #e7dfcb;box-shadow:0 1px 0 var(--papier-schatten), 0 10px 28px rgba(140,110,65,.14)}
.blatt h2{font-size:24px;margin-bottom:4px;color:var(--ink)}
.blatt .unter{color:var(--ink-soft);font-size:13.5px;margin-bottom:18px}
.blatt + .blatt{margin-top:22px}
.blatt input,.blatt select{padding:9px 12px;border:1px solid #c9c2b1;border-radius:4px;background:#fffdf7;width:100%}
.feld{margin-bottom:14px}
.feld label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.zeile{display:flex;gap:14px}.zeile>*{flex:1}

/* ---------- Satzfahne (Kapitelliste) */
.fahne{border-left:3px solid var(--gold);margin-top:8px}
.fahne .kap{display:flex;align-items:baseline;gap:12px;padding:7px 12px;border-bottom:1px dashed #d8d1bf}
.fahne .kap:last-child{border-bottom:none}
.fahne .nr{font-family:'Cormorant',serif;font-weight:600;color:var(--gold);min-width:2em;text-align:right}
.fahne .kt{flex:1;font-family:'Cormorant',serif;font-size:17.5px}
.fahne .kt input{border:none;background:transparent;width:100%;font-family:'Cormorant',serif;font-size:17.5px;padding:0}
.fahne .kt input:focus{outline:1px dashed var(--gold);background:#fffdf7}
.fahne .kt input.ut{font-size:14px;font-style:italic;color:#8a7f6d;margin-top:2px}
.fahne .w{font-size:11.5px;color:var(--ink-soft)}

/* ---------- Buchdeckel (Theme-Wahl) */
.deckelreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:12px 0 4px}
.deckel{border-radius:4px 8px 8px 4px;padding:22px 14px;min-height:150px;display:flex;flex-direction:column;justify-content:center;text-align:center;border:2px solid transparent;box-shadow:inset 6px 0 0 rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.18);transition:transform .12s}
.deckel:hover{transform:translateY(-2px)}
.deckel.gewaehlt{border-color:var(--gold);box-shadow:inset 6px 0 0 rgba(0,0,0,.18), 0 0 0 3px rgba(201,163,92,.25)}
.deckel .dn{font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.deckel .db{font-size:11px;opacity:.75;line-height:1.4}
.deckel.klassik{background:#fdfcf9;color:#1c1a17}.deckel.klassik .dn{color:#8a6d2f}
.deckel.roman{background:#171310;color:#efe7da}.deckel.roman .dn{color:#d4b48c}
.deckel.modern{background:#ffffff;color:#16181c;font-family:'InterV'}.deckel.modern .dn{color:#1f4e5f}

/* ---------- Lektorat */
.fund{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #ddd6c4;border-radius:4px;margin-bottom:8px;background:#fffdf7}
.fund .typ{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:var(--buetten);color:var(--ink-soft);white-space:nowrap;margin-top:2px}
.fund .diff{flex:1;font-size:14px}
.fund .diff s{color:var(--stempel);text-decoration-color:rgba(179,71,46,.6)}
.fund .diff b{color:#1e6b45;font-weight:600}
.fund .beg{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
.fund .tasten{display:flex;gap:6px}
.fund button{width:30px;height:30px;border-radius:4px;border:1px solid #c9c2b1;font-size:14px;background:#fff}
.fund button:hover{border-color:var(--gold)}
.fund.akzeptiert{border-color:#1e6b45;background:#f3faf3}
.fund.abgelehnt{opacity:.45}
.fund.angewendet{border-color:#1e6b45;background:#eef6ee;opacity:.7}

/* ---------- Hinweise */
.recht{border:1px solid var(--stempel);border-radius:4px;padding:10px 14px;background:#fdf3ef;color:#7a2f1d;font-size:12.5px;margin-bottom:14px}
.hinweis{padding:9px 12px;border-left:3px solid var(--stempel);background:#fffdf7;margin-bottom:8px;font-size:13.5px}
.hinweis .ht{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--stempel)}
.hinweis .ha{color:var(--ink-soft);font-style:italic}

/* ---------- Ausgabe */
.pdfreihe{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.pdfkarte{border:1px solid #c9c2b1;border-radius:4px;padding:14px 18px;background:#fffdf7;min-width:220px}
.pdfkarte .pn{font-weight:600;font-size:14px}
.pdfkarte .pm{font-size:12px;color:var(--ink-soft);margin:2px 0 10px}

/* ---------- Log/Job */
/* Die Druckerkonsole bleibt bewusst dunkel — das einzige dunkle Ding in der hellen Werkstatt */
.log{font-family:ui-monospace,monospace;font-size:12px;background:#241f19;color:#cfc8b8;border-radius:4px;padding:12px 14px;white-space:pre-wrap;max-height:220px;overflow:auto;margin-top:12px}
.laeuft{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gold);animation:puls 1s infinite alternate;margin-right:8px;vertical-align:baseline}
@keyframes puls{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.laeuft{animation:none}.kn:hover,.deckel:hover{transform:none}}
.meldung{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#fffdf6;border:1px solid var(--gold);color:var(--schrift);padding:10px 20px;border-radius:6px;font-size:13.5px;box-shadow:0 10px 30px rgba(120,90,50,.3);opacity:0;pointer-events:none;transition:opacity .2s;z-index:200}
.meldung.zeigen{opacity:1}
.zurueck{color:var(--grau);font-size:13px;background:none;padding:0;margin:18px 0 0;letter-spacing:.04em}
.zurueck:hover{color:var(--gold-hell)}
.leer{color:var(--ink-soft);font-size:13.5px;font-style:italic}
@media (max-width:720px){.zeile{flex-direction:column}.gaenge{flex-wrap:wrap}.gang{min-width:33%}
  header.kopf{flex-wrap:wrap}.nav{flex-wrap:wrap;margin-left:0;gap:12px}
  .sw-zeile{flex-direction:column}.sw-baum{position:static;width:100%;max-height:180px}
  .hf-eingabe{flex-direction:column;align-items:stretch}}

/* ================= V2: Navigation, Landing, Regal v2, Dashboard, Konto/Admin */
.nav{display:flex;gap:18px;align-items:center;margin-left:auto;font-size:13px}
.nav a{color:var(--grau);text-decoration:none;letter-spacing:.04em}
.nav a:hover,.nav a.hier{color:var(--gold-hell)}
.guthaben{border:1px solid var(--linie);border-radius:20px;padding:4px 12px;color:var(--gold-hell);font-size:12.5px;white-space:nowrap}
.guthaben.unl{border-color:var(--gold)}

.held{padding:70px 0 50px;max-width:760px}
.held h1{font-size:44px;line-height:1.15;font-weight:500;color:var(--schrift)}
.held h1 em{font-style:italic;color:var(--gold-hell)}
.held p.gross{font-size:17px;color:var(--grau);margin:16px 0 28px;line-height:1.6}
.gangkarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:34px 0}
.gangkarte{border:1px solid var(--linie);border-radius:6px;padding:16px;background:var(--werkbank)}
.gangkarte .gn{font-size:10.5px;letter-spacing:.18em;color:var(--gold)}
.gangkarte b{display:block;font-family:'Cormorant',serif;font-size:18px;margin:4px 0 6px;font-weight:600}
.gangkarte span{font-size:12.5px;color:var(--grau);line-height:1.5}

/* Status als echte Werkstatt-Stempel — leicht verkantet, wie von Hand gedrückt */
.siegel{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:3px;border:1.5px solid;transform:rotate(-1.6deg);font-weight:600;background:rgba(255,255,255,.5)}
.siegel.entwurf{color:var(--grau);border-color:#c9bfa8}
.siegel.arbeit{color:var(--gold-hell);border-color:var(--gold)}
.siegel.gesetzt{color:var(--druckgruen);border-color:var(--druckgruen)}

.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:20px}
.dashkarte{background:var(--werkbank);border:1px solid var(--linie);border-radius:6px;padding:18px}
.dashkarte h3{font-size:19px;font-weight:600;margin-bottom:4px;display:flex;align-items:baseline;gap:10px}
.dashkarte .du{font-size:12.5px;color:var(--grau);margin-bottom:12px;line-height:1.5}
.dashkarte.papier{background:var(--papier);color:var(--ink);border:1px solid #e7dfcb;box-shadow:0 8px 24px rgba(140,110,65,.16)}
.dashkarte.papier h3{color:var(--ink)}
.dashkarte.papier .du{color:var(--ink-soft)}
.pdfgross{display:flex;align-items:center;gap:14px;border:1px solid #c9c2b1;border-radius:5px;background:#fffdf7;padding:12px 14px;margin-bottom:10px}
.pdfgross .icon{font-family:'Cormorant',serif;font-size:26px;color:var(--gold)}
.pdfgross .pi{flex:1}.pdfgross .pi b{font-size:14px}.pdfgross .pi span{display:block;font-size:11.5px;color:var(--ink-soft)}

.tabelle{width:100%;border-collapse:collapse;font-size:13px}
.tabelle th{text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);padding:6px 10px;border-bottom:1px solid var(--linie)}
.tabelle td{padding:7px 10px;border-bottom:1px solid var(--linie);color:var(--schrift)}
.tabelle td.geld{text-align:right;font-variant-numeric:tabular-nums}
.plus{color:var(--druckgruen)}.minus{color:#a53d27}

.formzeile{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.formzeile .feld{margin-bottom:0;min-width:140px}
.dunkelfeld label{color:var(--grau)!important}
.dunkelfeld input,.dunkelfeld select{background:#fffdf6;border:1px solid #cdc2a8;color:var(--schrift);padding:9px 12px;border-radius:4px;width:100%}

/* ================= U2.9: Fortschrittsbalken */
.balkenrahmen{height:10px;border-radius:5px;background:#e6ddc8;overflow:hidden;margin:10px 0 6px;border:1px solid #d5c9ad}
.blatt .balkenrahmen{background:#e8e1cf}
.balken{height:100%;background:linear-gradient(90deg,var(--holz),var(--gold));border-radius:5px;transition:width .8s ease}
.balken.unbestimmt{width:38%;animation:wandern 1.6s ease-in-out infinite alternate}
@keyframes wandern{from{margin-left:0}to{margin-left:62%}}
@media (prefers-reduced-motion: reduce){.balken.unbestimmt{animation:none;width:100%}}
.balkeninfo{font-size:12.5px;color:var(--ink-soft)}
.dashkarte .balkeninfo{color:var(--grau)}
.veraltet-band{border:1px solid var(--gold);border-radius:4px;padding:8px 12px;background:#fbf6ea;color:#6b5322;font-size:12.5px;margin-bottom:12px}

/* --- Fein-Werkstatt (Struktur-Editor, U3b) --- */
.sw-zeile{display:flex;gap:18px;align-items:flex-start;margin-top:14px}
.sw-baum{position:sticky;top:14px;width:220px;flex:none;background:var(--werkbank);border:1px solid var(--linie);border-radius:10px;padding:10px;max-height:78vh;overflow:auto}
.sw-baum-titel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hell);margin-bottom:6px}
.sw-eintrag{display:block;padding:3px 6px;border-radius:6px;color:var(--schrift);text-decoration:none;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-eintrag:hover{background:rgba(169,123,63,.1)}
.sw-eintrag.teil-marker{color:var(--gold-hell);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.sw-eintrag.front-kopf{font-style:italic;opacity:.85}
.sw-liste{flex:1;min-width:0}
.sw-kopf{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.sw-vz{color:var(--gold-hell);font-size:13.5px}
.sb-teil{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hell);margin:18px 0 6px}
.sb-kap{background:var(--werkbank);border:1px solid var(--gold);border-radius:10px;padding:10px 14px;margin:14px 0 8px;display:flex;gap:10px;align-items:baseline}
.sb-kap .nr{color:var(--gold-hell);font-size:13px}
.sb-kap .ut{opacity:.75;font-size:13.5px}
.sb-front{background:var(--werkbank);border:1px solid var(--linie);border-radius:10px;padding:8px 14px;margin:12px 0 8px;font-style:italic}
.sb{background:var(--werkbank);border:1px solid var(--linie);border-radius:10px;padding:10px 14px;margin:8px 0}
.sb.hat-vorschlag{border-color:var(--gold)}
.sb.geaendert{border-color:#7fa073;box-shadow:0 0 0 1px #7fa07344}
.sb-kopfzeile{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.sb-kopfzeile select{background:#fffdf6;color:var(--schrift);border:1px solid #cdc2a8;border-radius:6px;padding:3px 6px;font-size:13px}
.sb-wo{margin-left:auto;font-size:12px;opacity:.6}
.sb-text{font-size:14px;line-height:1.55;opacity:.92;white-space:pre-wrap}
.sb-vorschlag{margin-top:8px;padding:8px 10px;border-radius:8px;background:#fbf6ea;color:#5c4a1e;font-size:13.5px;line-height:1.5}
.sb-vk{margin-left:8px;white-space:nowrap}
.kn.mini{font-size:12px;padding:3px 10px}
.sw-leiste{position:sticky;bottom:12px;display:flex;gap:12px;align-items:center;background:#fffdf6;border:1px solid var(--gold);border-radius:12px;padding:10px 16px;margin-top:14px;box-shadow:0 6px 24px rgba(130,100,55,.25)}
.sw-leiste[hidden]{display:none}

/* --- Autorenhelfer (Chat, U7) --- */
.hf-chat{max-width:760px;background:var(--werkbank);border:1px solid var(--linie);border-radius:12px;padding:16px;max-height:56vh;overflow-y:auto}
.hf-n{display:flex;flex-direction:column;margin-bottom:12px;align-items:flex-start}
.hf-n.nutzer{align-items:flex-end}
.hf-blase{max-width:85%;padding:10px 14px;border-radius:12px;background:var(--leiste);font-size:14px;line-height:1.55}
.hf-n.nutzer .hf-blase{background:var(--gold);color:#fffdf6}
.hf-preis{font-size:11px;color:var(--grau);margin-top:3px}
.hf-eingabe{max-width:760px;display:flex;gap:10px;margin-top:12px;align-items:flex-end}
.hf-eingabe textarea{flex:1;padding:10px 12px;border:1px solid var(--linie);border-radius:8px;background:#fffdf7;font:inherit;resize:vertical}

/* --- Preisseite (Werkstatt-Pass, V4) --- */
.preisreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.preiskarte{position:relative;background:var(--werkbank);border:1px solid var(--linie);border-radius:10px;padding:20px 18px;box-shadow:0 1px 3px rgba(120,95,55,.1)}
.preiskarte.beliebt{border-color:var(--gold);box-shadow:0 6px 20px rgba(150,110,60,.18)}
.pk-badge{position:absolute;top:-11px;left:16px;background:var(--gold);color:#fffdf6;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:3px 10px;border-radius:10px}
.pk-name{font-family:'Cormorant',serif;font-size:20px;font-weight:600}
.pk-preis{font-family:'Cormorant',serif;font-size:34px;color:var(--gold-hell);margin:4px 0 8px}
.pk-preis span{font-size:15px;color:var(--grau)}
.pk-du{font-size:13px;color:var(--grau);line-height:1.55;min-height:64px}
.pk-fuer{font-size:12px;color:var(--gold-hell);margin-top:8px;font-style:italic}

/* --- Helfer-STUDIO (V3/B): Chat | Resizer | lebendes Buch --- */
.hf-studio{display:grid;grid-template-columns:minmax(360px,45%) 6px 1fr;gap:0;margin-top:14px;height:auto;min-height:0}
.hf-links{display:flex;flex-direction:column;min-width:0}
.hf-links .hf-chat{flex:1;max-width:none;max-height:none;overflow-y:auto}
.hf-trenner{cursor:col-resize;background:linear-gradient(180deg,transparent,var(--linie),transparent);border-radius:3px;margin:0 0;touch-action:none}
.hf-trenner:hover{background:var(--gold)}
.hf-rechts{display:flex;flex-direction:column;min-width:0;background:var(--werkbank);border:1px solid var(--linie);border-radius:12px;overflow:hidden}
.hf-tabs{display:flex;gap:0;border-bottom:1px solid var(--linie);background:var(--leiste)}
.hf-tab{padding:9px 14px;font-size:13px;color:var(--grau);border-right:1px solid var(--linie)}
.hf-tab.aktiv{background:var(--werkbank);color:var(--gold-hell);font-weight:600}
.hf-pane{flex:1;overflow:auto;display:flex;flex-direction:column;min-height:0}
.hf-pane[hidden]{display:none}
#pane-pdf iframe{width:100%;height:100%;border:0;flex:1}
.hf-kapnav{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--linie);max-height:110px;overflow:auto}
.hf-kap{font-size:12px;padding:3px 10px;border:1px solid #cdc2a8;border-radius:12px;background:#fffdf6;color:var(--schrift);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.hf-kap.aktiv{border-color:var(--gold);color:var(--gold-hell);font-weight:600}
.hf-lese{padding:16px 18px;font-size:14.5px;line-height:1.65;overflow:auto;flex:1}
.hf-leer{color:var(--grau);font-size:13.5px;padding:22px;text-align:center}
.hf-modi{display:flex;gap:6px;flex-wrap:wrap;padding:8px 2px 0}
.hf-modus{font-size:12px;padding:3px 11px;border:1px solid #cdc2a8;border-radius:12px;background:#fffdf6;color:var(--grau)}
.hf-modus.aktiv{border-color:var(--gold);background:var(--gold);color:#fffdf6;font-weight:600}
.hf-anker{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:10px;background:var(--leiste);border:1px solid var(--gold);color:var(--gold-hell);font-weight:600;margin:0 2px;vertical-align:baseline}
.hf-anker:hover{background:var(--gold);color:#fffdf6}
.hf-chips{display:flex;flex-direction:column;gap:8px;padding:4px 10px}
.hf-chip{text-align:left;font-size:13px;padding:10px 14px;border:1px dashed #cdc2a8;border-radius:10px;background:#fffdf6;color:var(--schrift)}
.hf-chip:hover{border-color:var(--gold);color:var(--gold-hell)}
.hf-entwurf{max-width:85%;margin-top:6px;border:1px solid var(--gold);border-radius:10px;background:#fffdf6;padding:10px 12px}
.he-kopf{font-size:13.5px}.he-kopf span{color:var(--grau);font-size:12px;margin-left:6px}
.he-auszug{font-size:12.5px;color:var(--grau);font-style:italic;margin:6px 0 8px;line-height:1.5}
.he-aktionen{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:860px){
  .hf-studio{grid-template-columns:1fr;height:auto}
  .hf-trenner{display:none}
  .hf-rechts{margin-top:12px;height:60vh}
  .hf-links .hf-chat{max-height:52vh}
}

/* --- Blätter-Vorschau (V5, Sabber Nr. 1) --- */
.bl-buehne{margin-top:18px;display:flex;justify-content:center;align-items:center;min-height:60vh;background:#e7e0d0;border:1px solid var(--linie);border-radius:14px;padding:26px;overflow:hidden}
.bl-lade{color:var(--grau);font-size:14px;text-align:center}
.bl-buch{max-width:100%}
.bl-seite{background:#fffdf6;box-shadow:0 0 6px rgba(90,70,40,.2)}
.bl-seite img{width:100%;height:100%;object-fit:contain;display:block}
.satz-vorschau{width:100%;height:460px;border:1px solid #d8d1bf;border-radius:8px;background:#4a4238;margin-top:8px}

/* --- 3D-Bücher im Regal + Stempel-Zeremonie (V5, Sabber Nr. 5) --- */
.regal{perspective:1400px}
.buchkarte{transform-style:preserve-3d;border-left:7px solid #8a5f36;border-radius:3px 8px 8px 3px;
  background:linear-gradient(90deg,#f2ecdd 0%,var(--werkbank) 7%);position:relative}
.buchkarte::after{content:"";position:absolute;top:4px;right:-4px;bottom:4px;width:4px;
  background:repeating-linear-gradient(180deg,#fffdf6 0 2px,#e8e0cc 2px 3px);border-radius:0 2px 2px 0;
  transform:translateZ(-1px)}
.buchkarte:hover{transform:translateY(-2px) rotateY(-4deg)}
@media (prefers-reduced-motion: reduce){.buchkarte:hover{transform:none}}

.stempel-zeremonie{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(43,38,32,.45);z-index:60}
.stempel-blatt{background:var(--papier);border-radius:8px;padding:52px 64px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.4);position:relative}
.stempel-abdruck{display:inline-block;font-family:'Cormorant',serif;font-weight:600;font-size:44px;
  letter-spacing:.18em;color:var(--stempel);border:4px solid var(--stempel);border-radius:8px;
  padding:10px 26px;transform:rotate(-7deg);opacity:.92;
  animation:stempeln .5s cubic-bezier(.2,2.2,.4,1) both;mix-blend-mode:multiply}
@keyframes stempeln{0%{transform:rotate(-7deg) scale(2.6);opacity:0}70%{transform:rotate(-7deg) scale(.96);opacity:1}100%{transform:rotate(-7deg) scale(1);opacity:.92}}
@media (prefers-reduced-motion: reduce){.stempel-abdruck{animation:none}}
.stempel-blatt .su{color:var(--ink-soft);font-size:14px;margin-top:18px}

/* --- Admin: Nutzer-Zeilen statt gesprengter Tabelle (Fix 23.07.) --- */
.nutzerzeile{border:1px solid var(--linie);border-radius:8px;padding:10px 14px;margin-bottom:10px;background:#fffdf6}
.nz-kopf{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.nz-kopf b{font-size:15px}
.nz-kopf>span:first-of-type{color:var(--grau);font-size:13px}
.nz-tag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--linie);border-radius:9px;padding:1px 8px;color:var(--grau)}
.nz-tag.gruen{color:var(--druckgruen);border-color:var(--druckgruen)}
.nz-tag.rot{color:var(--stempel);border-color:var(--stempel)}
.nz-geld{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--schrift);font-weight:600}
.nz-aktionen{display:flex;gap:6px;flex-wrap:wrap}

/* Fußzeile (W2): Rechtslinks auf jeder Seite — dezent, immer erreichbar. */
.fusszeile { max-width: 1060px; margin: 40px auto 0; padding: 16px 22px 26px;
  border-top: 1px solid var(--linie, #d8cdb4); text-align: center; }
.fusszeile a { color: var(--grau, #6b6558); font-size: 12.5px; margin: 0 9px;
  text-decoration: none; letter-spacing: .02em; }
.fusszeile a:hover { color: var(--gold, #a8823c); text-decoration: underline; }

/* Frühere Fassungen (W3): Lese- und Vergleichs-Ansicht */
.vlese p, .vdiff-gleich { font-size: 14px; line-height: 1.65; }
.vlese p { margin: 0 0 10px; }
.vdiff-gleich { color: var(--grau, #6b6558); text-align: center; margin: 10px 0;
  font-style: italic; font-size: 12.5px; }
#v-text ins { background: #e4efdd; color: #2f5c2f; text-decoration: none;
  border-radius: 3px; padding: 0 2px; }
#v-text del { background: #f6e2dc; color: #8c3b2e; border-radius: 3px; padding: 0 2px; }

/* Fein-Werkstatt-Werkzeuge (W4): Fokus/Alles, Suche, Etikett-Filter */
.sw-werkzeuge { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 12px 0 6px; }
.sw-schalter { display: flex; gap: 4px; }
#sw-suche { flex: 1; min-width: 180px; padding: 8px 12px; border: 1px solid #cdc2a8;
  border-radius: 8px; background: #fffdf6; font-size: 13.5px; }
#sw-rolle { padding: 8px 10px; border: 1px solid #cdc2a8; border-radius: 8px;
  background: #fffdf6; font-size: 13px; max-width: 240px; }
.sw-zaehler { color: var(--grau, #6b6558); font-size: 12.5px; margin: 4px 0 10px; }
.sw-acc { border: 1px solid var(--linie, #d8cdb4); border-radius: 10px;
  margin: 0 0 10px; background: #fbf8ef; }
.sw-acc > summary { cursor: pointer; padding: 10px 14px; font-weight: 600;
  font-size: 14.5px; list-style-position: inside; }
.sw-acc[open] > summary { border-bottom: 1px solid var(--linie, #d8cdb4); }
.sw-acc > div { padding: 10px 12px; }
.sw-acc-anz { color: var(--grau, #6b6558); font-weight: 400; font-size: 12px; }

/* Samen→Baum (W4) + Tour */
.gang.zuhause .wuchs { display: block; color: var(--gold, #a8823c); margin-top: 2px; }
.gang.zuhause .wuchs svg { display: block; margin: 0 auto; }
.tour-liste { margin: 0 0 0 18px; padding: 0; font-size: 14px; line-height: 1.6; }
.tour-liste li { margin-bottom: 8px; }

/* Neue Buchdeckel (W5) + Farb-Paletten */
.deckel.literata { background: linear-gradient(160deg, #fffefa 55%, #f0ded2); border-color: #c7a58e; }
.deckel.literata .dn { color: #a4593a; }
.deckel.lesefreund { background: linear-gradient(160deg, #fffefb 55%, #ddeee7); border-color: #a9c3b8; }
.deckel.lesefreund .dn { color: #2f7a68; }
.palettenreihe { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.palette { display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  border: 1px solid #cdc2a8; border-radius: 999px; background: #fffdf6;
  font-size: 12.5px; cursor: pointer; color: var(--schrift, #2b2620); }
.palette span { width: 15px; height: 15px; border-radius: 50%; display: inline-block;
  border: 1px solid rgba(0,0,0,.15); }
.palette.gewaehlt { border-color: var(--gold, #a8823c); box-shadow: 0 0 0 2px rgba(168,130,60,.25); }
.palette.eigene input[type=color] { width: 22px; height: 22px; border: none; padding: 0;
  background: none; cursor: pointer; }

/* Öffentliche Willkommens-Seite (W7) */
.wk-held { text-align: center; padding: 56px 20px 30px; max-width: 780px; margin: 0 auto; }
.wk-held h1 { font-size: clamp(28px, 4.5vw, 44px); line-height: 1.22; margin-bottom: 14px; }
.wk-held p { color: var(--grau, #6b6558); font-size: 16.5px; line-height: 1.65; }
.wk-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.wk-probe, .wk-stationen, .wk-mehr, .wk-vertrauen, .wk-preise { max-width: 980px; margin: 0 auto; padding: 26px 20px; }
.wk-probe h2, .wk-stationen h2, .wk-mehr h2, .wk-vertrauen h2, .wk-preise h2 { font-size: 26px; margin-bottom: 14px; text-align: center; }
.wk-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .wk-vergleich { grid-template-columns: 1fr; } }
.wk-etikett { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grau, #6b6558); margin-bottom: 8px; }
.wk-roh pre { background: #f1ece0; border: 1px solid #d8cdb4; border-radius: 10px; padding: 18px;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; color: #4c463b; min-height: 260px; }
.wk-seite { background: #fffdf6; border: 1px solid #d8cdb4; border-radius: 4px; padding: 30px 34px 18px;
  box-shadow: 0 10px 26px rgba(60,48,28,.14); min-height: 260px; position: relative; }
.wk-kapnr { font-size: 10.5px; letter-spacing: .28em; color: #a8823c; text-align: center; }
.wk-kaptitel { font-size: 25px; text-align: center; margin: 4px 0 18px; }
.wk-seite p { font-size: 13.5px; line-height: 1.72; text-align: justify; margin: 0 0 8px; hyphens: manual; }
.wk-dropcap { float: left; font-family: 'Cormorant', Georgia, serif; font-size: 44px; line-height: .82;
  padding: 4px 6px 0 0; color: #a8823c; }
.wk-seitenzahl { text-align: center; color: #a8823c; font-size: 11px; margin-top: 14px; }
/* Y1c · Look-Umschalter der Willkommen-Demo (Ref 2) */
.wk-etikettzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wk-pfeil { font: inherit; font-size: 20px; line-height: 1; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #d8cdb4; background: #fbf8ef; color: #7a6a4a; cursor: pointer; flex: 0 0 auto; }
.wk-pfeil:hover { background: #f1ece0; color: #2b2620; }
.wk-lookhinweis { text-align: center; font-size: 11.5px; margin-top: 8px; }
.wk-seite { transition: background .25s, color .25s; }
/* Roman: dunkles, elegantes Serifen-Buch */
.wk-seite.wk-look-roman { background: #171310; border-color: #2c2620; box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.wk-seite.wk-look-roman .wk-kapnr, .wk-seite.wk-look-roman .wk-seitenzahl { color: #c9a86a; }
.wk-seite.wk-look-roman .wk-kaptitel { color: #efe7da; }
.wk-seite.wk-look-roman p { color: #d8cfc0; }
.wk-seite.wk-look-roman .wk-dropcap { color: #c9a86a; }
/* Modern: weißes Blatt, klare Grotesk */
.wk-seite.wk-look-modern { background: #ffffff; border-color: #e2e2e2; }
.wk-seite.wk-look-modern .wk-kaptitel { font-family: 'InterV', system-ui, sans-serif; font-weight: 700; color: #1a1d22; }
.wk-seite.wk-look-modern p { font-family: 'InterV', system-ui, sans-serif; text-align: left; color: #26292f; }
.wk-seite.wk-look-modern .wk-kapnr, .wk-seite.wk-look-modern .wk-seitenzahl { color: #2f7d90; }
.wk-seite.wk-look-modern .wk-dropcap { color: #2f7d90; }
/* Bildschirm-Ansicht: satt-dunkle Tinte auf warmweiß (wie die neue Screen-Vorschau) */
.wk-seite.wk-look-screen { background: #f4efe3; border-color: #d8cdb4; }
.wk-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.wk-karte { background: #fbf8ef; border: 1px solid #e2d9c2; border-radius: 12px; padding: 14px 16px;
  font-size: 13.5px; line-height: 1.6; color: #4c463b; }
.wk-karte b { display: block; margin-bottom: 4px; color: var(--schrift, #2b2620); }
.wk-vertrauen p { text-align: center; max-width: 640px; margin: 0 auto; font-size: 14.5px; line-height: 1.7; }
.wk-cta-ende { text-align: center; padding: 10px 0 44px; }

/* ============ Vorschau-Panel (X0) — lebendes Buch in allen Studio-Tabs ============ */
.vp-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0;
  background: #efe9dc; border: 1px solid var(--linie, #d8cdb4); border-radius: 12px; overflow: hidden; }
.vp-leiste { display: flex; align-items: center; gap: 12px; padding: 7px 12px;
  background: #f6f1e6; border-bottom: 1px solid var(--linie, #d8cdb4); flex: 0 0 auto; }
.vp-modi { display: flex; gap: 4px; }
.vp-modi button { padding: 5px 12px; border: 1px solid #cdc2a8; background: #fffdf6;
  border-radius: 999px; font-size: 12.5px; cursor: pointer; color: var(--schrift, #2b2620); }
.vp-modi button.an { background: var(--gold, #a8823c); color: #fff; border-color: var(--gold, #a8823c); }
.vp-hinweis { font-size: 12px; color: var(--grau, #6b6558); margin-left: auto; }
.vp-buehne { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; justify-content: center;
  align-items: flex-start; padding: 12px; background: #e7e0d0; }
.vp-frame { width: 100%; height: 100%; min-height: 0; border: 0; background: #fff;
  border-radius: 4px; box-shadow: 0 8px 30px rgba(60,48,28,.16); }
.vp-lade { padding: 40px 16px; text-align: center; color: var(--grau, #6b6558); font-size: 14px; }
.vp-fort { margin-top: 6px; font-size: 12px; }
.vp-pdfroll { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 100%; }
.vp-pdfseite { max-width: 100%; box-shadow: 0 6px 20px rgba(60,48,28,.18); border-radius: 3px; }
.vp-buehne .bl-buch { margin: auto; }
/* Erklär-Karte zu einer Markierung (schwebt über dem Panel) */
.vp-karte { position: absolute; z-index: 40; max-width: 340px; background: #fffdf6;
  border: 1px solid var(--gold, #a8823c); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 12px 34px rgba(60,48,28,.28); font-size: 13.5px; }
.vp-karte h4 { margin: 0 0 5px; font-size: 14.5px; }
.vp-karte .vp-akt { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ==================== Das STUDIO (X1/X2) — 4 Tabs über lebendem Buch ==================== */
.st-kopf { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.st-kopf-fuell { flex: 1 1 auto; }
.st-zurueck { color: var(--grau, #6b6558); text-decoration: none; font-size: 13.5px; }
.st-titel { font-size: 26px; flex: 1 1 0; min-width: 0; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* Z1a: langer Titel bricht nie um */
.st-zahn { width: 40px; height: 40px; border: 1px solid var(--linie, #d8cdb4); background: #fffdf6;
  border-radius: 10px; font-size: 19px; cursor: pointer; }
.st-zahn:hover { border-color: var(--gold, #a8823c); }
.st-tabs { display: flex; gap: 8px; margin: 14px 0 12px; flex-wrap: wrap; }
.st-tab { flex: 1 1 auto; min-width: 150px; display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: 10px 16px; border: 1px solid var(--linie, #d8cdb4); background: #f6f1e6;
  border-radius: 12px; cursor: pointer; color: var(--schrift, #2b2620); transition: all .12s; }
.st-tab b { font-size: 15px; white-space: nowrap; }   /* Z1a: EN/ES brechen die Reiter nicht auf 2 Zeilen */
.st-tab .st-tn { font-family: 'Cormorant', serif; font-size: 13px; color: var(--gold, #a8823c); letter-spacing: .1em; }
.st-tab.an { background: #fffdf6; border-color: var(--gold, #a8823c); box-shadow: 0 4px 14px rgba(168,130,60,.18); }
.st-buehne { height: auto; min-height: 0; }   /* Z1a */
.st-buehne.st-split { display: grid; grid-template-columns: minmax(320px, 42%) 1fr; gap: 14px; }
.st-buehne.st-stack { display: flex; flex-direction: column; gap: 12px; }
/* Chat-Spalte */
.st-chat { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--linie, #d8cdb4);
  border-radius: 12px; background: #fbf8ef; overflow: hidden; }
.st-chatkopf { padding: 8px 10px; border-bottom: 1px solid var(--linie, #d8cdb4); }
.st-verlauf { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.st-eingabe { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--linie, #d8cdb4); align-items: flex-end; }
.st-eingabe textarea { flex: 1; resize: none; border: 1px solid #cdc2a8; border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 14px; background: #fffdf6; }
.st-panel { min-height: 0; }
.st-panel-unten { flex: 1 1 auto; }
.st-werkzeug { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px;
  background: #f6f1e6; border: 1px solid var(--linie, #d8cdb4); border-radius: 12px; }
.st-wz-text { flex: 1; font-size: 13.5px; color: var(--schrift, #2b2620); min-width: 220px; }
/* ⚙ Menü */
.st-zahnmenu { position: fixed; inset: 0; background: rgba(40,32,20,.32); z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px; overflow: auto; }
/* Z1a: Ein Menü darf nie unten aus dem Bild laufen — es scrollt in sich selbst. */
.st-zahnkarte { background: #fffdf6; border: 1px solid var(--gold, #a8823c); border-radius: 14px;
  padding: 20px 24px; max-width: 380px; width: 100%; box-shadow: 0 18px 50px rgba(60,48,28,.3);
  max-height: calc(100dvh - 40px); overflow: auto; }
.st-zahnkarte h3 { font-size: 20px; margin: 0 0 12px; }
.st-zahnpunkt { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none;
  color: var(--schrift, #2b2620); font-size: 14.5px; }
.st-zahnpunkt:hover { background: #f1ece0; color: var(--gold, #a8823c); }
@media (max-width: 780px) {
  .st-buehne.st-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .st-buehne { height: auto; }
}

/* Studio-Tabs II-IV: Inline-Werkzeuge (X3/X4/X6) */
.st-wz-spalten { align-items: flex-end; gap: 16px; }
.st-wz-gruppe { display: flex; flex-direction: column; gap: 4px; }
.st-wz-gruppe > label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grau, #6b6558); }
.st-wz-gruppe input, .st-werkzeug select { padding: 7px 10px; border: 1px solid #cdc2a8; border-radius: 8px; background: #fffdf6; font: inherit; font-size: 13.5px; }
.st-looks, .st-akz { display: flex; gap: 5px; }

/* ===== Y2a · Studio-Neuarchitektur: Karussell-Reiter + persistente Vorschau ===== */
.st-karussell { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; }
.st-karussell .st-tabs { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; justify-content: center;
  margin: 0; padding: 8px 4px; scrollbar-width: none; }
.st-karussell .st-tabs::-webkit-scrollbar { display: none; }
.st-karussell .st-tab { flex: 0 0 auto; min-width: 148px;
  transform: scale(calc(1 - min(var(--d, 0), 3) * 0.07)); opacity: calc(1 - min(var(--d, 0), 3) * 0.26);
  transition: transform .22s ease, opacity .22s ease, background .12s, border-color .12s, box-shadow .12s; }
.st-karussell .st-tab.an { transform: scale(1.04); opacity: 1; z-index: 1; }
.st-kpfeil { flex: 0 0 auto; font: inherit; font-size: 22px; line-height: 1; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--linie, #d8cdb4); background: #fbf8ef; color: #7a6a4a; cursor: pointer; }
.st-kpfeil:hover { color: #2b2620; border-color: var(--gold, #a8823c); }
/* Arena: links Reiter-Inhalt (tauscht), rechts die STEHENDE Vorschau */
.st-arena { display: grid; grid-template-columns: minmax(300px, 38%) 1fr; gap: 14px;
  height: auto; min-height: 0; }   /* Z1a: Höhe kommt aus dem Seiten-Gitter, nicht aus einer Konstante */
.st-links { min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.st-links.st-rein { animation: st-rein .22s ease; }
@keyframes st-rein { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.st-rechts { position: relative; min-height: 0; display: flex; }
.st-panelhost { flex: 1 1 auto; min-height: 0; display: flex; }
.st-panelhost[hidden] { display: none; }
.st-obsidian { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Werkzeugleiste, wenn sie in der linken Spalte steht: vertikal statt horizontal */
.st-werkzeug-links { flex-direction: column; align-items: stretch; gap: 12px; }
.st-werkzeug-links.st-wz-spalten { align-items: stretch; }
.st-links .st-chat { flex: 1 1 auto; }
.st-grafik-ergebnis { margin-top: 4px; }
/* Z4 · Handy: Chat und Buch teilen sich EINE Zelle — je Wisch bekommt eines die
   volle Fläche. Vorher standen sie untereinander und die Seite wurde zum Scroller. */
@media (max-width: 900px) {
  .st-arena, .st-arena.oben-leiste { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr); }
  .st-arena > .st-links, .st-arena > .st-rechts { grid-area: 1 / 1; min-height: 0; }
  .st-arena:not(.zeigt-buch) > .st-rechts { display: none; }
  .st-arena.zeigt-buch > .st-links { display: none; }
  .st-arena.oben-leiste #st-links { max-height: none; }
  .st-mobil { display: flex !important; }
  /* Am Handy zählt jeder Millimeter fürs Buch: Kopf und Reiter schlanker. */
  body.voll header.kopf { padding: 10px 0 8px; gap: 10px; }
  body.voll .marke { font-size: 19px; letter-spacing: .22em; }
  body.voll .marke small { display: none; }
  body.voll .st-kopf { margin-top: 4px; }
  body.voll .st-titel { font-size: 19px; }
  body.voll .st-karussell { margin: 8px 0 6px; }
  body.voll .st-tab { min-width: 122px; padding: 7px 12px; }
  body.voll .st-tab .st-tn { display: none; }
  body.voll .st-kpfeil { display: none; }
  body.voll .fusszeile { margin-top: 4px; padding: 3px 10px 5px; }
  body.voll .fusszeile a { font-size: 10.5px; margin: 0 5px; }
}
/* Der Umschalter selbst — am PC unsichtbar */
.st-mobil { display: none; gap: 4px; flex: 0 0 auto; }
.st-mobil button { padding: 5px 13px; border: 1px solid var(--linie, #d8cdb4); background: #fffdf6;
  border-radius: 999px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--schrift, #2b2620); }
.st-mobil button.an { background: var(--gold, #a8823c); color: #fff; border-color: var(--gold, #a8823c); }
/* Autorenhelfer-Unterreiter CHAT/DESIGNER */
.st-subtabs { display: flex; gap: 6px; margin-bottom: 10px; flex: 0 0 auto; }
.st-subtab { flex: 1; padding: 7px 10px; border: 1px solid var(--linie, #d8cdb4); background: #f6f1e6;
  border-radius: 8px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--schrift, #2b2620); }
.st-subtab.an { background: #fffdf6; border-color: var(--gold, #a8823c); box-shadow: 0 3px 10px rgba(168,130,60,.14); }
.st-subhost { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.st-subhost .st-chat { flex: 1 1 auto; }
.hf-uebergabe { display: flex; align-items: center; gap: 8px; }
/* Designer: Bild-Feed oben, Eingabe unten */
.st-designer { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; gap: 10px; }
.st-feed { flex: 1 1 auto; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; align-content: start; padding: 2px; }
.st-feedkarte { border: 1px solid var(--linie, #d8cdb4); border-radius: 8px; overflow: hidden; background: #fff; }
.st-feedkarte img { width: 100%; display: block; }
.st-feedwarte { display: flex; align-items: center; justify-content: center; min-height: 100px; }
.st-feedakt { display: flex; gap: 4px; padding: 5px; flex-wrap: wrap; }
.st-desu { border-top: 1px solid var(--linie, #d8cdb4); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.st-desu-zeile { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.st-desu input, .st-desu select { padding: 7px 9px; border: 1px solid #cdc2a8; border-radius: 8px; background: #fffdf6; font: inherit; font-size: 13.5px; }
/* Schmiede-Reiter: Obsidian-Board rechts */
.sm-board { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 20px; }
.sm-boardtitel { font-size: 19px; margin: 0 0 4px; }
/* Y3 · Block-Editor: Popover am angeklickten Absatz */
.dr-pop { position: fixed; z-index: 120; min-width: 250px; max-width: 320px; background: #fffdf6;
  border: 1px solid var(--gold, #a8823c); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 16px 42px rgba(60,48,28,.28); display: flex; flex-direction: column; gap: 8px; }
.dr-poptitel { font-family: 'Cormorant', serif; font-size: 17px; color: var(--schrift, #2b2620); }
.dr-popz { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--grau, #6b6558); }
.dr-popz select { padding: 5px 8px; border: 1px solid #cdc2a8; border-radius: 7px; background: #fffdf6; font: inherit; font-size: 12.5px; }
.dr-popcheck { justify-content: flex-start; }
.dr-popakt { display: flex; gap: 6px; margin-top: 2px; }
.st-look { padding: 6px 11px; border: 1px solid #cdc2a8; background: #fffdf6; border-radius: 999px; font-size: 12.5px; cursor: pointer; color: var(--schrift, #2b2620); }
.st-look.an { background: var(--gold, #a8823c); color: #fff; border-color: var(--gold, #a8823c); }
.st-akzbtn { width: 30px; height: 30px; border: 1px solid #cdc2a8; border-radius: 50%; background: #fffdf6; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.st-akzbtn span { width: 16px; height: 16px; border-radius: 50%; display: block; }
.st-akzbtn.an { border-color: var(--gold, #a8823c); box-shadow: 0 0 0 2px rgba(168,130,60,.28); }
.st-grafik-ergebnis:not(:empty) { padding: 10px 14px; background: #fbf8ef; border: 1px solid var(--linie, #d8cdb4); border-radius: 10px; font-size: 13px; }
.st-prompt { line-height: 1.5; }
.st-motive { display: flex; gap: 8px; flex-wrap: wrap; }
.st-motiv { padding: 8px 14px; border: 1px solid var(--gold, #a8823c); background: #fffdf6; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--schrift, #2b2620); }
.st-motiv:hover { background: #f6efdd; }

/* Stimmen-Satz-Overlay (X5) */
.sti-zeile { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--linie, #d8cdb4); flex-wrap: wrap; }
.sti-name { flex: 1; min-width: 110px; padding: 6px 9px; border: 1px solid #cdc2a8; border-radius: 7px; background: #fffdf6; font: inherit; font-size: 13.5px; }
.sti-farben { display: flex; gap: 3px; }
.sti-farbe { width: 24px; height: 24px; border: 1px solid #cdc2a8; border-radius: 50%; background: #fffdf6; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.sti-farbe span { width: 13px; height: 13px; border-radius: 50%; display: block; }
.sti-farbe.an { border-color: var(--gold, #a8823c); box-shadow: 0 0 0 2px rgba(168,130,60,.3); }
.sti-kursiv { font-size: 12.5px; color: var(--grau, #6b6558); display: flex; align-items: center; gap: 3px; }
.sti-weg { border: none; background: none; color: #b04a3a; cursor: pointer; font-size: 15px; }

/* ==================== IdeenSchmiede (X7) ==================== */
.buchkarte.schmiede { border-left-color: #b5602f; background: linear-gradient(160deg, #fffaf4 55%, #f3ddc9); }
.buchkarte.schmiede .t { color: #a4491f; }
/* Struktur-Spalte rechts */
.sm-struktur { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.sm-karte { background: #fbf8ef; border: 1px solid var(--linie, #d8cdb4); border-radius: 12px; padding: 12px 14px; }
.sm-kh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sm-kh b { font-size: 14.5px; }
.sm-edit, .sm-add { border: 1px solid #cdc2a8; background: #fffdf6; border-radius: 7px; font-size: 12px; padding: 3px 9px; cursor: pointer; color: var(--grau, #6b6558); }
.sm-add { width: 26px; height: 26px; font-size: 16px; line-height: 1; padding: 0; }
.sm-edit:hover, .sm-add:hover { border-color: var(--gold, #a8823c); color: var(--gold, #a8823c); }
.sm-text { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.sm-text.leer { color: var(--grau, #6b6558); font-style: italic; }
.sm-figur { position: relative; padding: 7px 26px 7px 0; border-bottom: 1px solid var(--linie, #d8cdb4); cursor: pointer; font-size: 13.5px; }
.sm-figur:last-child { border-bottom: none; }
.sm-rolle { font-size: 11px; color: var(--gold, #a8823c); }
.sm-fb { font-size: 12.5px; color: var(--grau, #6b6558); margin-top: 2px; }
.sm-weg { position: absolute; right: 0; top: 6px; border: none; background: none; color: #b04a3a; cursor: pointer; font-size: 13px; }
/* Roter Faden — vertikale Linie mit Kapitel-Stationen */
.sm-faden { position: relative; padding-left: 6px; }
.sm-kapstation { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 8px 26px 8px 18px; }
.sm-faden::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: var(--gold, #a8823c); opacity: .4; }
.sm-knr { position: relative; z-index: 1; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--gold, #a8823c); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-left: -6px; }
.sm-kapstation { cursor: pointer; font-size: 13.5px; }
.sm-cluster { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-chip { background: #f1e7d3; border: 1px solid #d8cdb4; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; color: #4c463b; }
.sm-chip b { color: #b04a3a; margin-left: 3px; }
@media (max-width: 780px) { .st-buehne.st-split .sm-struktur { max-height: 50vh; } }

/* Autor-Profil (X8) */
.profil-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linie, #d8cdb4); font-size: 13.5px; }
.profil-zeile:last-child { border-bottom: none; }
.kn.mini { padding: 3px 9px; font-size: 11.5px; }

/* X11 · Sprachwahl-Chips im Kopf (DE/EN/ES) */
.sprachwahl { display: inline-flex; gap: 2px; margin: 0 4px; vertical-align: middle; }
.sprbtn { font: inherit; font-size: 11px; letter-spacing: .04em; padding: 2px 6px; border: 1px solid var(--linie, #d8cdb4); background: transparent; color: var(--grau, #8a7d63); border-radius: 5px; cursor: pointer; line-height: 1.4; }
.sprbtn:hover { color: var(--schrift, #2c2417); }
.sprbtn.an { background: var(--gold, #b8973f); color: #fff; border-color: var(--gold, #b8973f); }
/* Y3b · Etiketten-Regeln-Overlay */
.rg-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 0;
  border-bottom: 1px solid var(--linie, #e6ddcf); font-size: 13px; }
.rg-zeile:last-child { border-bottom: none; }
.rg-zeile b { min-width: 92px; }
.rg-zeile label { display: flex; align-items: center; gap: 5px; color: var(--grau, #6b6558); }
.rg-farbe input[type=color] { width: 30px; height: 22px; border: 1px solid #cdc2a8; border-radius: 5px; background: none; padding: 0; }
/* Y5 · Schwebende Schreib-Werkzeugleiste über dem bearbeiteten Absatz */
.dr-leiste { position: fixed; z-index: 130; display: flex; align-items: center; gap: 3px;
  background: #fffdf6; border: 1px solid var(--gold, #a8823c); border-radius: 10px;
  padding: 5px 7px; box-shadow: 0 12px 34px rgba(60,48,28,.30); }
.dr-leiste button { font: inherit; font-size: 14px; min-width: 30px; height: 28px; line-height: 1;
  border: 1px solid transparent; background: none; border-radius: 7px; cursor: pointer; color: var(--schrift, #2b2620); }
.dr-leiste button:hover { background: #f1ece0; border-color: var(--linie, #d8cdb4); }
.dr-tr { width: 1px; height: 18px; background: var(--linie, #d8cdb4); margin: 0 3px; }

/* Z1c · Bearbeiten-Stift in der Vorschau-Leiste — in JEDEM Reiter erreichbar */
.vp-stift { margin-left: 10px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: 1px solid #cdc2a8; background: #fffdf6; border-radius: 999px;
  font-size: 12.5px; cursor: pointer; color: var(--schrift, #2b2620); }
.vp-stift:hover:not(:disabled) { border-color: var(--gold, #a8823c); }
.vp-stift.an { background: var(--gold, #a8823c); color: #fff; border-color: var(--gold, #a8823c); }
.vp-stift:disabled { opacity: .4; cursor: default; }
.vp-hinweis { margin-left: auto; }
/* Z1d · Eigene Akzentfarbe — der Farbkreis IST der Wähler */
.st-akzeigen { position: relative; overflow: hidden; }
.st-akzeigen input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* ===== Z2 · Lektorats-Werkbank: Leiste + Fundliste OBEN, Buch darunter vollbreit ===== */
.st-arena.oben-leiste { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
.st-arena.oben-leiste #st-links { overflow: auto; max-height: 46vh; gap: 10px; }
.st-arena.oben-leiste .st-rechts { min-height: 0; }
.lk-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lk-zahlen { font-size: 13.5px; }
.lk-zahlen b { font-size: 16px; }
.lk-filter { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.lk-chip { padding: 4px 11px; border: 1px solid var(--linie, #d8cdb4); background: #fffdf6;
  border-radius: 999px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--schrift, #2b2620); }
.lk-chip.an { background: var(--gold, #a8823c); color: #fff; border-color: var(--gold, #a8823c); }
.lk-liste { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.lk-fund { display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border-radius: 8px;
  font-size: 13px; line-height: 1.5; cursor: pointer; border: 1px solid transparent; }
.lk-fund:hover { background: #f6f1e6; }
.lk-fund.an { background: #fff8e8; border-color: var(--gold, #a8823c); }
.lk-fund s { color: #8c3b2e; text-decoration-thickness: 1px; }
.lk-fund b { color: var(--druckgruen, #2e6b4f); }
.lk-typ { flex: 0 0 auto; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: #efe9db; color: var(--grau, #6b6558); }
.lk-typ.typ-rechtschreibung { background: rgba(140,59,46,.14); color: #8c3b2e; }
.lk-typ.typ-grammatik { background: rgba(47,70,104,.14); color: #2f4668; }
.lk-typ.typ-zeichensetzung { background: rgba(107,90,42,.14); color: #6b5a2a; }
.lk-typ.typ-stil { background: rgba(58,99,73,.14); color: #3a6349; }
.lk-text { flex: 1; min-width: 0; }
.lk-beg { display: block; color: var(--grau, #6b6558); font-size: 12px; margin-top: 2px; }
.lk-warn { color: #a4491f; font-size: 11.5px; }
.lk-bearbeitet { color: var(--gold-hell, #8a662a); font-size: 11.5px; }
.lk-tasten { flex: 0 0 auto; display: flex; gap: 3px; }
.lk-tasten button { width: 26px; height: 26px; border: 1px solid var(--linie, #d8cdb4); background: #fffdf6;
  border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; color: var(--schrift, #2b2620); }
.lk-tasten button:hover { border-color: var(--gold, #a8823c); }
.lk-tasten button.rot:hover { border-color: #a4491f; color: #a4491f; }
/* Karte an der Fundstelle */
.lk-karte { position: fixed; z-index: 70; width: min(420px, calc(100vw - 24px)); background: #fffdf6;
  border: 1px solid var(--gold, #a8823c); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 16px 44px rgba(60,48,28,.32); font-size: 13.5px; }
.lk-karte h4 { margin: 0 0 8px; font-size: 15px; }
.lk-karte textarea { width: 100%; min-height: 66px; resize: vertical; border: 1px solid #cdc2a8;
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: #fff; }
.lk-karte .lk-akt { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ==================== Z3 · Schmiede-Board: Cluster + Mindmap ==================== */
.st-obsidian[hidden] { display: none !important; }   /* muss die UA-Regel schlagen, sobald flex gesetzt ist */
.st-obsidian { display: flex; flex-direction: column; }
.smb-kopf { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 2px 2px 10px;
  position: sticky; top: 0; z-index: 3; background: linear-gradient(#f3eee1 72%, rgba(243,238,225,0)); }
.smb-umschalter { margin: 0; flex: 0 0 auto; width: 220px; }
.smb-suche { flex: 1 1 auto; min-width: 90px; padding: 6px 11px; border: 1px solid #cdc2a8;
  border-radius: 999px; background: #fffdf6; font: inherit; font-size: 13px; }
.smb-zaehler { flex: 0 0 auto; font-size: 11.5px; color: var(--grau, #6b6558); }
.smb-buehne { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ---- Cluster-Akkordeon: aufklappen ohne Höhenmessung (0fr → 1fr) ---- */
.smc-liste { display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; }
.smc-punkt { border: 1px solid var(--linie, #d8cdb4); border-radius: 12px; background: #fbf8ef; overflow: hidden; }
.smc-punkt.offen { border-color: #d9a679; box-shadow: 0 6px 22px rgba(150,90,40,.13); }
.smc-kopf { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--schrift, #2b2620); }
.smc-punkt.offen .smc-kopf { position: sticky; top: 0; z-index: 2; background: #fffaf2;
  border-bottom: 1px solid var(--linie, #d8cdb4); }
.smc-titel { font-family: 'Cormorant', Georgia, serif; font-size: 18px; flex: 0 0 auto; }
.smc-anz { flex: 0 0 auto; font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  background: #f1e7d3; color: #8a5f36; }
.smc-vor { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--grau, #6b6558);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smc-chev { flex: 0 0 auto; font-size: 18px; color: #b08a52; transition: transform .3s; }
.smc-punkt.offen .smc-chev { transform: rotate(90deg); }
.smc-huelle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.2,.7,.2,1); }
.smc-punkt.offen .smc-huelle { grid-template-rows: 1fr; }
.smc-inhalt { overflow: hidden; min-height: 0; }
.smc-punkt.offen .smc-inhalt { padding: 12px 14px 14px; }
@media (prefers-reduced-motion: reduce) { .smc-huelle { transition: none; } .smc-chev { transition: none; } }

.smb-textkarte { display: flex; gap: 10px; align-items: flex-start; }
.smb-textkarte .sm-text { flex: 1; }
.smb-edit { width: 100%; min-height: 120px; resize: vertical; border: 1px solid #cdc2a8;
  border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13.5px; background: #fff; }
.smb-editakt { margin-top: 8px; display: flex; gap: 6px; }
.smb-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-bottom: 10px; }
.smb-figur { position: relative; border: 1px solid var(--linie, #d8cdb4); border-radius: 10px;
  padding: 9px 30px 9px 11px; background: #fffdf6; cursor: pointer; }
.smb-figur:hover { border-color: var(--gold, #a8823c); }
.smb-figur .sm-weg { position: absolute; top: 6px; right: 7px; }
.smb-rolle { margin-left: 6px; font-size: 11px; padding: 1px 5px; border: 1px solid #d8cdb4;
  border-radius: 6px; background: #f6f1e6; }
.smb-kaptext { flex: 1; min-width: 0; }
.smb-szauf { display: inline-block; margin-top: 4px; border: 1px solid var(--linie, #d8cdb4);
  background: #f6f1e6; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 11.5px;
  cursor: pointer; color: var(--grau, #6b6558); }
.smb-szauf.auf { background: #f1e2c8; color: #7a5a2a; }
.smb-szenen { margin: 6px 0 2px; display: flex; flex-direction: column; gap: 4px; }
.smb-szene { position: relative; display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 5px 26px 5px 10px; border-left: 2px solid #d9c7a4; background: #fffdf6; border-radius: 0 8px 8px 0; }
.smb-szene .sm-weg { position: absolute; right: 4px; top: 3px; }
.smb-zuordnen { font-size: 11.5px; padding: 2px 6px; border: 1px solid #d8cdb4; border-radius: 6px; background: #f6f1e6; }
.smb-mini { border: 0; background: none; color: var(--gold-hell, #8a662a); font: inherit;
  font-size: 11.5px; cursor: pointer; padding: 2px 0; }

/* ---- Mindmap: EIN transformierter Container, Linien als SVG darunter ---- */
.smm-flaeche { position: absolute; inset: 0; overflow: hidden; background:
  radial-gradient(circle at 1px 1px, rgba(150,120,70,.16) 1px, transparent 0) 0 0/26px 26px, #f7f2e6;
  border: 1px solid var(--linie, #d8cdb4); border-radius: 12px; cursor: grab; touch-action: none; }
.smb-buehne { position: relative; }
.smm-flaeche.schiebt { cursor: grabbing; }
.smm-welt { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.smm-linien { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.smm-linie { fill: none; stroke: #c9a97a; stroke-width: 1.6; }
.smm-linie.faden { stroke: var(--gold, #a8823c); stroke-width: 2.2; opacity: .55; }
.smm-linie.szene { stroke: #b9a888; stroke-dasharray: 4 3; }
.smm-knoten { position: absolute; width: 220px; padding: 8px 11px; background: #fffdf6;
  border: 1px solid var(--linie, #d8cdb4); border-left: 4px solid var(--gold, #a8823c);
  border-radius: 4px 10px 10px 4px; box-shadow: 0 3px 10px rgba(120,95,55,.13); cursor: grab;
  font-size: 12.5px; line-height: 1.4; touch-action: none; content-visibility: auto;
  contain-intrinsic-size: 220px 56px; }
.smm-knoten b { display: block; font-size: 13px; }
.smm-knoten span { display: block; color: var(--grau, #6b6558); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smm-knoten.zieht { cursor: grabbing; box-shadow: 0 10px 26px rgba(120,95,55,.3); z-index: 5; }
.smm-knoten.typ-fix { border-left-color: #8a5f36; background: #fffaf0; }
.smm-knoten.typ-figur { border-left-color: #6b4a86; }
.smm-knoten.typ-kapitel { border-left-color: #b5602f; }
.smm-knoten.typ-szene { border-left-color: #3a6349; width: 190px; }
.smm-knoten.typ-idee { border-left-color: #2f4668; }
.smm-auf { margin-top: 3px; border: 1px solid var(--linie, #d8cdb4); background: #f6f1e6;
  border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 11px; cursor: pointer; color: var(--grau, #6b6558); }
.smm-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; z-index: 4; }
.smm-zoom button { width: 30px; height: 30px; border: 1px solid var(--linie, #d8cdb4);
  background: #fffdf6; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--schrift, #2b2620); }
.smm-zoom button:hover { border-color: var(--gold, #a8823c); }
@media (max-width: 900px) { .smb-umschalter { width: 160px; } .smb-zaehler { display: none; } }