/* ============================================================
Studio CMS — Design-System "Buehne" (Issue #64, drittes Redesign).
Identitaet: dunkles, fast monochromes Profi-Werkzeug — die Kundenwebsite
steht im weissen Scheinwerferlicht (Vorschau = Signatur). Zweiklang:
SATINIERTES ROSE-KUPFER handelt (Primaeraktionen), KOBALT identifiziert
(exakt zwei Marken-Funken, beide in der Topbar: Status-Dot + Avatar-Ring).
Gemeinsames Fundament fuer Studio UND /admin (admin.css baut darauf auf).
Schrift: Space Grotesk, self-hosted (public/assets/fonts/, SIL OFL) —
KEINE externen Font-Requests. Funktion + alle id-Hooks unveraendert.
============================================================ */
/* ---------- Space Grotesk (self-hosted, SIL OFL — Lizenz: assets/fonts/OFL.txt) ---------- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/space-grotesk-400.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/space-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2")}
:root{
/* ---------- Buehne: Grund, Panels, Linien ---------- */
--bg:#15171C; --panel:#1D2028; --line:#232630; --line-strong:#2C3040;
/* ---------- Text ---------- */
--text:#F4F2ED; --text-soft:#8E93A3; --muted:#5A5F70;
/* ---------- Eingabefelder: deutlich heller als Panels (man muss sehen, WO man eingibt) ---------- */
--input-bg:#262B36; --input-border:#3D4354; --placeholder:#9BA1B2;
/* ---------- Chat ---------- */
--bubble-user:#2A2E38; --bubble-user-text:#E8EAF0;
/* ---------- Satiniertes Rose-Kupfer (Uhrengehaeuse, nicht Bonbon) ----------
Schimmer-Layer bleibt in ALLEN Zustaenden identisch — Hover/Active aendern
NUR die Basis-Stops (~6% heller/dunkler). Text immer #2A1410, Fassung
immer rgba(58,26,16,.55). */
--satin:linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,240,232,0.10) 50%, rgba(255,255,255,0) 80%), linear-gradient(180deg,#CFA189 0%,#BC8A70 45%,#A5745C 100%);
--satin-hover:linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,240,232,0.10) 50%, rgba(255,255,255,0) 80%), linear-gradient(180deg,#D9AF98 0%,#C69880 45%,#B0806A 100%);
--satin-active:linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,240,232,0.10) 50%, rgba(255,255,255,0) 80%), linear-gradient(180deg,#C39678 0%,#B07F62 45%,#99684E 100%);
--satin-deep:linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,240,232,0.09) 50%, rgba(255,255,255,0) 82%), linear-gradient(180deg,#CB9D85 0%,#B8866C 45%,#9E6E56 100%);
--satin-deep-hover:linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,240,232,0.09) 50%, rgba(255,255,255,0) 82%), linear-gradient(180deg,#D5A98F 0%,#C29176 45%,#A87860 100%);
--satin-deep-active:linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,240,232,0.09) 50%, rgba(255,255,255,0) 82%), linear-gradient(180deg,#BF9179 0%,#AC7A60 45%,#92644C 100%);
--satin-text:#2A1410;
--satin-edge:rgba(58,26,16,0.55);
--satin-shadow:inset 0 1px 0 rgba(255,236,228,0.4), inset 0 -1px 0 rgba(58,26,16,0.25), 0 1px 4px rgba(0,0,0,0.3);
--satin-shadow-active:inset 0 1px 0 rgba(255,236,228,0.28), inset 0 2px 5px rgba(58,26,16,0.4), 0 1px 2px rgba(0,0,0,0.3);
--copper:#CFA189; --copper-mid:#BC8A70;
/* ---------- Zustaende ---------- */
--danger:#E89A8E; --danger-edge:rgba(232,154,142,0.4); --danger-bg:#2A1D1E; --danger-line:#4A2C2C;
--warn:#D9B36A; --warn-bg:#262117; --warn-line:#3A3220;
/* ---------- Typografie: Space Grotesk, System-Sans-Fallback ---------- */
--font:"Space Grotesk",-apple-system,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
/* ---------- Abstands-Raster (4er-Basis) ---------- */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
/* ---------- Radien: praeziser, gefasster als vorher ---------- */
--r-xs:6px; --r-sm:9px; --r-md:12px; --r-lg:14px; --r-pill:999px;
/* ---------- Bewegung: dezent, nur opacity/transform/background/border ---------- */
--ease:cubic-bezier(.2,.8,.2,1);
--dur:170ms;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--font);font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:0;color:var(--text)}
[hidden]{display:none !important}
img{max-width:100%}
::selection{background:rgba(207,161,137,.3);color:var(--text)}
button,input,select,textarea{font:inherit}
input[type=checkbox]{accent-color:#BC8A70}
/* Tastatur-Fokus: neutral heller Ring, ueberall sichtbar (WCAG) — bewusst KEIN
Kobalt und KEIN Kupfer, damit Fokus nie mit Marke/Aktion verwechselt wird. */
:focus-visible{outline:2px solid rgba(244,242,237,.75);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:0}
/* ---------- Dezente Scrollbars (Studio + Admin) ---------- */
.panel,.log,.table-wrap{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.panel::-webkit-scrollbar,.log::-webkit-scrollbar,.table-wrap::-webkit-scrollbar{width:8px;height:8px}
.panel::-webkit-scrollbar-track,.log::-webkit-scrollbar-track{background:transparent}
.panel::-webkit-scrollbar-thumb,.log::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box}
.panel::-webkit-scrollbar-thumb:hover,.log::-webkit-scrollbar-thumb:hover{background:var(--input-border);background-clip:content-box}
/* ---------- Marken-Lockup (Dots-Logo): monochrom — kein Kobalt, kein Kupfer ---------- */
.dots{display:inline-flex;gap:5px;align-items:center}
.dots .d{width:22px;height:22px;border-radius:50%;background:var(--bubble-user);box-shadow:inset 0 0 0 1px var(--line-strong)}
.dots .d.c{background:var(--input-border)}
.dots .d.b{background:var(--line)}
.dots.sm .d{width:12px;height:12px}
/* ---------- Buttons ----------
Primaer = satiniertes Rose-Kupfer, schlank gefasst (edel heisst schmal)
Sekundaer = transparent mit ruhiger Linie
Destruktiv = zurueckhaltendes Rot auf dunkel */
.btn{font-weight:600;font-size:12.5px;letter-spacing:.4px;line-height:1.2;border:1px solid transparent;border-radius:var(--r-sm);padding:9px 16px;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur) var(--ease),opacity var(--dur) var(--ease);display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);white-space:nowrap}
.btn-primary{background:var(--satin);color:var(--satin-text);border:1px solid var(--satin-edge);box-shadow:var(--satin-shadow)}
.btn-primary:hover{background:var(--satin-hover)}
.btn-primary:active{background:var(--satin-active);box-shadow:var(--satin-shadow-active)}
/* Veroeffentlichen: eine Nuance tiefer/gewichtiger als die uebrigen Primaeraktionen */
#publishBtn,#bPublishBtn,#panePublish{background:var(--satin-deep)}
#publishBtn:hover,#bPublishBtn:hover,#panePublish:hover{background:var(--satin-deep-hover)}
#publishBtn:active,#bPublishBtn:active,#panePublish:active{background:var(--satin-deep-active);box-shadow:var(--satin-shadow-active)}
.btn-ghost{background:transparent;color:var(--text-soft);border:1px solid var(--line-strong)}
.btn-ghost:hover{color:var(--text);border-color:var(--input-border);background:rgba(255,255,255,.03)}
.btn-ghost:active{background:rgba(255,255,255,.05)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger-edge)}
.btn-danger:hover{background:rgba(232,154,142,.08)}
.btn-danger:active{background:rgba(232,154,142,.13)}
.btn-sm{padding:6px 11px;font-size:11.5px;border-radius:var(--r-xs)}
.btn-block{width:100%}
/* Disabled: entsaettigt + gedimmt — klar als inaktiv erkennbar, kein Bonbon.
cursor:not-allowed sagt es auch dem Zeiger; Hover-Wechsel sind fuer deaktivierte
Knoepfe abgeschaltet, damit nichts "anspringt", das nicht klickbar ist. */
.btn:disabled{opacity:.45;filter:saturate(.35);cursor:not-allowed}
.btn-primary:disabled:hover{background:var(--satin)}
#publishBtn:disabled,#bPublishBtn:disabled,#panePublish:disabled{background:var(--satin-deep)}
.btn-ghost:disabled:hover{color:var(--text-soft);border-color:var(--line-strong);background:transparent}
.btn-danger:disabled:hover{background:transparent}
.btn[data-busy]{pointer-events:none;opacity:.7}
.btn[data-busy]::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- Formularfelder: deutlich heller als Panels, spuerbare Innentiefe ---------- */
.field{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.field-label{font-size:.72rem;font-weight:600;color:var(--text-soft);letter-spacing:.08em;text-transform:uppercase}
.muted{color:var(--text-soft);font-weight:400;text-transform:none;letter-spacing:normal}
input,textarea,select{font-size:.95rem;color:var(--text);background:var(--input-bg);border:1.5px solid var(--input-border);border-radius:var(--r-sm);padding:10px 13px;width:100%;box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:hover,textarea:hover,select:hover{border-color:#4A5164}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--placeholder)}
textarea{resize:vertical;min-height:88px;line-height:1.5}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;cursor:pointer}
/* Native File-Inputs bleiben funktional im DOM (gleiche id, gleiche Events),
nur visuell ersetzt (Upload-Zonen). KEIN display:none — sonst nicht fokussierbar. */
input.file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.check{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--text-soft);cursor:pointer}
.check input{width:18px;height:18px;accent-color:#BC8A70;box-shadow:none}
.err{color:var(--danger);min-height:1.2em;font-size:.87rem;margin:var(--sp-2) 0 0}
.hint{color:var(--text-soft);font-size:.83rem}
.hint strong{color:var(--text);font-weight:600}
/* ---------- Login: dunkle Buehne, selbstbewusste Karte ---------- */
.login-screen{min-height:100%;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);background:radial-gradient(ellipse 90% 70% at 50% 30%, #1B1E25 0%, var(--bg) 70%)}
.login-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02);padding:42px 40px 34px}
.brand-lockup{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-2)}
.wordmark{font-weight:700;font-size:1.9rem;line-height:1;color:var(--text);letter-spacing:-.02em;display:flex;align-items:center;gap:var(--sp-2)}
.wordmark .studio{color:var(--text-soft);background:var(--bubble-user);padding:5px 11px;border-radius:var(--r-xs);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.brand-by{font-size:.78rem;color:var(--text-soft);font-weight:500;letter-spacing:.04em;margin-top:calc(-1 * var(--sp-1))}
.lead{color:var(--text-soft);margin:var(--sp-4) 0 var(--sp-3);font-size:.98rem;line-height:1.6}
.login-props{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);padding:0;margin:0 0 var(--sp-5)}
.login-props li{font-size:.78rem;font-weight:500;color:var(--text-soft);display:inline-flex;align-items:center;gap:7px}
.login-props li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--bubble-user);color:var(--copper);font-size:.62rem;font-weight:700}
.login-card .field{margin-bottom:var(--sp-4)}
.login-foot{margin-top:var(--sp-5);text-align:center;font-size:.74rem;color:var(--muted);line-height:1.5}
/* ---------- App-Grundgeruest ---------- */
#app{display:flex;flex-direction:column;height:100%}
/* Topbar: feste Mindesthoehe (52px + 1px Linie = --topbar-h), damit die
Seitenleisten (.drawer) genau darunter ansetzen. position+z-index halten das
Konto-Menue UEBER einer offenen Seitenleiste. */
#app{--topbar-h:53px}
.topbar{position:relative;display:flex;align-items:center;gap:var(--sp-4);min-height:52px;padding:var(--sp-2) var(--sp-5);background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;z-index:35}
.topbar-brand{display:flex;align-items:center;gap:12px;min-width:0}
.topbar-name{font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;letter-spacing:-.01em}
.tenant-chip{font-size:.74rem;font-weight:500;color:var(--text-soft);background:var(--bg);border:1px solid var(--line);padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tabs{display:inline-flex;gap:var(--sp-1);background:var(--bg);border:1px solid var(--line);padding:3px;border-radius:var(--r-pill);margin:0 auto}
.tab{border:0;background:transparent;color:var(--text-soft);font-weight:500;font-size:.84rem;padding:7px 18px;border-radius:var(--r-pill);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.tab:hover{color:var(--text)}
.tab.active{background:var(--bubble-user);color:var(--text)}
.bubble.note{opacity:.72;font-size:.86rem} /* Modell-Kommentar, nicht die Vollzugsmeldung */
.topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto}
/* Status "Live · KI bereit": Marken-Funke 1 — der Kobalt-Status-Dot */
.status{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:var(--text-soft);font-weight:500;background:var(--bg);border:1px solid var(--line);padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap}
.status .dot{flex:none}
.status .dot{width:7px;height:7px;border-radius:50%;background:#4C6FFF;box-shadow:0 0 0 3px rgba(76,111,255,.18)}
.status .dot.amber{background:var(--warn);box-shadow:0 0 0 3px rgba(217,179,106,.16)}
/* Nur fuer Screenreader (Avatar-Button-Beschriftung) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- Profil-Menue: Avatar (Tenant-Initiale) — Marken-Funke 2: der Kobalt-Ring ---------- */
.profile{position:relative}
.avatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--bubble-user);color:var(--text);font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:0;box-shadow:0 0 0 1.5px #4C6FFF;transition:background var(--dur) var(--ease)}
.avatar:hover{background:var(--input-bg)}
.profile-dropdown{position:absolute;right:0;top:calc(100% + 10px);min-width:186px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:0 14px 36px rgba(0,0,0,.5);padding:5px;z-index:40}
.menu-item{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);font-size:.86rem;font-weight:500;padding:9px 12px;border-radius:var(--r-xs);cursor:pointer;transition:background var(--dur) var(--ease)}
.menu-item:hover{background:var(--bubble-user)}
.menu-sep{height:1px;background:var(--line);margin:5px 4px}
/* ---------- Arbeitsflaeche: Panel (Werkzeug) links, Scheinwerfer-Buehne rechts ---------- */
/* Arbeitsflaeche: Panel | Trennlinie | Buehne. Die Panel-Breite steckt in der
Variable --panel-w auf #app (Issue #68), damit BEIDE Ansichten (Bearbeiten
und Blog) dieselbe Breite teilen und JS nur eine Stelle setzen muss.
Default 472px = genau das, was das fruehere minmax(392px,472px) auf breiten
Schirmen ergab - die Ansicht startet also unveraendert. */
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:var(--panel-w,472px) 9px 1fr}
.panel{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-5);overflow:auto;background:var(--panel)}
.panel-head h2{margin:0 0 var(--sp-1);font-size:1.16rem}
.panel-sub{margin:0;color:var(--text-soft);font-size:.86rem;line-height:1.55}
/* ---------- Ziehbare Trennlinie (Issue #68) ----------
Bewusst zurueckhaltend im Sinne des CI: nur --line / --line-strong und
gedaempftes Grau. Rose-Kupfer ist Aktionen vorbehalten, Kobalt dem Live-Dot
und dem Avatar-Ring - eine Trennlinie ist weder das eine noch das andere.
Sie uebernimmt den frueheren border-right des .panel, damit keine doppelte
Linie entsteht.
Die 9px breite Spalte ist die Greifflaeche; sichtbar ist nur die 1px-Linie
in der Mitte (::before) - ohne Greifflaeche trifft die Maus die Linie nicht. */
.splitter{position:relative;cursor:col-resize;background:transparent;touch-action:none}
.splitter::before{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:var(--line);transition:background var(--dur) var(--ease)}
.splitter:hover::before,.splitter.is-active::before{background:var(--line-strong)}
/* Griff-Andeutung nur bei Hover/Fokus/Ziehen - im Ruhezustand bleibt es eine
schlichte Linie, damit die Oberflaeche ruhig wirkt. */
.splitter::after{content:"";position:absolute;top:50%;left:50%;width:3px;height:28px;transform:translate(-50%,-50%);border-radius:var(--r-pill);background:var(--muted);opacity:0;transition:opacity var(--dur) var(--ease)}
.splitter:hover::after,.splitter:focus-visible::after,.splitter.is-active::after{opacity:1}
.splitter:focus-visible{outline:2px solid rgba(244,242,237,.75);outline-offset:-2px}
/* Waehrend des Ziehens: das iframe darf keine Pointer-Events schlucken, sonst
bricht die Bewegung ab, sobald der Zeiger die Vorschau ueberquert.
Dazu ueberall der Resize-Cursor und keine Textauswahl. */
#app.is-resizing{cursor:col-resize;user-select:none}
#app.is-resizing iframe{pointer-events:none}
/* Seitenauswahl (Multi-Page) */
.panel-head-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-1)}
.panel-head-row h2{margin:0}
.page-nav{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.page-select{width:auto;min-width:14ch;max-width:28ch;font-size:.82rem;padding:7px 34px 7px 11px}
/* ---------- Chat ---------- */
.log{display:flex;flex-direction:column;gap:var(--sp-2);overflow:auto}
/* Linke Spalte "Seite bearbeiten": oben Seitenauswahl, darunter der Verlauf, der die
Hoehe fuellt, unten der Composer. Gerollt wird NUR der Verlauf, nicht das Panel -
so bleibt der Composer immer am unteren Rand. */
.panel-chat{overflow:hidden;gap:var(--sp-3)}
#viewEdit .log{flex:1;min-height:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4)}
.log.small{max-height:224px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-3)}
.log.small:empty{display:none}
.bubble{padding:10px 14px;border-radius:var(--r-md);max-width:92%;font-size:.9rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;animation:bubble-in 240ms var(--ease)}
@keyframes bubble-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.bubble.me{align-self:flex-end;background:var(--bubble-user);color:var(--bubble-user-text);border-bottom-right-radius:4px}
.bubble.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line-strong);color:var(--text);border-bottom-left-radius:4px}
/* Wiederhergestellter Entwurf: bewusst KEINE Bubble und keine Warnfarbe - eine
ruhige Statuszeile in gedaempftem Text, mit dezenter Linie links. */
.draft-restored{align-self:stretch;display:flex;align-items:center;gap:9px;padding:8px 0 8px 12px;border-left:2px solid var(--line-strong);color:var(--text-soft);font-size:.82rem;line-height:1.5;animation:bubble-in 240ms var(--ease)}
.draft-restored::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--text-soft);opacity:.7}
.bubble.err{align-self:flex-start;background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line);border-bottom-left-radius:4px}
/* Leerer Chat: kurze Begruessung + klickbare Vorschlaege (aus den Feld-Labels).
Ruhig und textnah - keine Karte, kein Kupfer: die Vorschlaege sind Angebote,
keine Aktionen. Ein Klick fuellt nur das Eingabefeld. */
.chat-intro{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-1) var(--sp-1) var(--sp-3)}
.chat-intro-title{margin:0;font-size:1rem;font-weight:700;color:var(--text);letter-spacing:-.01em}
.chat-intro-text{margin:0;font-size:.84rem;color:var(--text-soft);line-height:1.5}
.chat-suggest{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:var(--sp-3)}
.chat-suggest-label{font-size:.72rem;font-weight:500;color:var(--text-soft);letter-spacing:.04em}
.suggestion{max-width:100%;text-align:left;font-size:.84rem;font-weight:500;line-height:1.4;color:var(--text);background:transparent;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:7px 12px;cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.suggestion:hover{border-color:var(--input-border);background:var(--panel)}
/* Modus-Umschalter Umsetzen/Beraten: klein und NEUTRAL. Kupfer tragen jetzt nur
noch Senden (ohne Entwurf) und Veroeffentlichen - drei Kupferflaechen in einer
Zeile wuerden sich gegenseitig die Bedeutung nehmen. Was Senden gerade tut,
sagt zusaetzlich der Platzhalter im Eingabefeld. */
.mode-switch{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--line);padding:2px;border-radius:var(--r-xs);flex:none}
.mode-btn{border:1px solid transparent;background:transparent;color:var(--text-soft);font-weight:500;font-size:11.5px;letter-spacing:.2px;padding:4px 10px;border-radius:5px;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.mode-btn:hover{color:var(--text)}
.mode-btn.active{background:var(--input-bg);color:var(--text);border-color:var(--line-strong)}
/* Modellwahl (nur Admins): eigene schmale Zeile am Ende der Composer-Leiste -
neben Bueroklammer, Modus und Senden waere das select abgeschnitten. */
.modelbar{order:1;flex:1 1 100%;display:flex;align-items:center;gap:var(--sp-2);min-width:0;padding-top:6px;border-top:1px solid var(--line-strong)}
.modelbar .field-label{flex:none}
.modelbar select{flex:1;width:auto;min-width:0;font-size:.78rem;padding:5px 28px 5px 9px;background-position:right 9px center;box-shadow:none}
/* Berater-Antworten: klar als Beratung erkennbar — Kupfer-Kante + Etikett,
damit sie nie wie eine ausgefuehrte Aenderung aussehen. */
.bubble.advice{border-left:3px solid var(--copper-mid);padding-top:26px;position:relative}
.bubble.advice::before{content:"Beratung";position:absolute;top:8px;left:14px;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper)}
.advice-apply{margin-top:10px}
.bubble.nudge{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn)}
/* Chat-Eingabe: das prominenteste Eingabeelement — hell abgesetzt, mit Innentiefe */
.composer{display:flex;gap:var(--sp-2);background:var(--input-bg);border:1.5px solid var(--input-border);border-radius:var(--r-md);padding:5px 5px 5px 16px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);transition:border-color var(--dur) var(--ease)}
.composer:focus-within{border-color:var(--placeholder)}
.composer input{flex:1;border:0;padding:9px 0;background:transparent;font-size:.95rem;box-shadow:none}
.composer input:focus{outline:none}
/* Chat-Composer: mehrzeiliges Feld oben, darunter eine Leiste mit Bueroklammer,
Modus, (Admin-)Modellwahl und Senden. Darunter kommt nichts mehr. */
.composer-chat{flex-direction:column;gap:6px;padding:10px 8px 8px 14px;flex:none}
.composer-chat textarea{border:0;background:transparent;box-shadow:none;padding:2px 4px 2px 0;min-height:0;max-height:180px;resize:none;overflow-y:auto;font-size:.95rem;line-height:1.5}
.composer-chat textarea:focus{outline:none}
.composer-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);min-width:0}
.composer-bar .send-btn{margin-left:auto;flex:none}
/* Aktionszeile (nur noch im Blog-Entwurf) */
.actions{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3)}
.actions .btn-primary{flex:1;min-width:170px}
/* ---------- Kleine Knoepfe: Icons und Textlinks ----------
Sekundaere Aktionen stehen auf --text-soft (gut lesbar auf dem Panel), werden
beim Zeigen hell. Deaktiviert: deutlich gedimmt + cursor:not-allowed, ohne Hover. */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:var(--r-xs);background:transparent;color:var(--text-soft);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.icon-btn svg{width:17px;height:17px;display:block}
.icon-btn:hover{color:var(--text);background:var(--input-bg)}
.icon-btn[aria-expanded="true"]{color:var(--text);background:var(--input-bg);border-color:var(--line-strong)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed;background:transparent;color:var(--text-soft);border-color:transparent}
/* Kurzes Wort neben dem Icon: nur schmal (Touch - kein Hover, also kein Tooltip).
Breit bleibt es beim Icon mit Tooltip; aria-label traegt den Namen ueberall. */
.icon-label{display:none}
/* Kurzform schmal ("Verwerfen" statt "Entwurf verwerfen"), damit die drei Entwurfs-Aktionen in eine Zeile passen. */
.nur-schmal{display:none}
/* Tipp zum Tastatur-Diktat (#100): nur schmal sichtbar, siehe @media (max-width:900px). */
.diktat-hinweis{display:none;align-items:center;gap:6px;margin:-4px 2px 0;font-size:.76rem;line-height:1.35;color:var(--text-soft)}
.diktat-hinweis span{flex:1}
.diktat-hinweis-x{flex:none;background:none;border:0;color:var(--text-soft);font-size:1rem;line-height:1;padding:4px 6px;border-radius:var(--r-xs);cursor:pointer}
.diktat-hinweis-x:hover{color:var(--text);background:rgba(255,255,255,.05)}
.diktat-hinweis-x:focus-visible{outline:2px solid var(--copper-mid);outline-offset:1px}
.text-btn{flex:none;background:none;border:0;padding:6px 4px;color:var(--text-soft);font-size:.8rem;font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease)}
.text-btn:hover{color:var(--danger);text-decoration-color:currentColor}
.text-btn:disabled{opacity:.4;cursor:not-allowed;color:var(--text-soft);text-decoration-color:transparent}
.expert-tag{font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);border:1px solid var(--line-strong);padding:2px 8px;border-radius:var(--r-pill);vertical-align:middle;margin-left:6px}
/* ---------- Seitenleisten (Drawer): Versionen, Bild hochladen, Head-Code ----------
Am rechten Rand unter der Topbar, nicht-modal (kein Abdunkeln): Chat und
Vorschau bleiben bedienbar. Auf schmalen Fenstern bildschirmfuellend (siehe
900px-Breakpoint). */
.drawer{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:min(420px,100vw);z-index:30;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line-strong);box-shadow:-18px 0 48px rgba(0,0,0,.45);animation:drawer-in 200ms var(--ease)}
@keyframes drawer-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.drawer-head{display:flex;align-items:center;gap:var(--sp-2);padding:10px 10px 10px var(--sp-5);border-bottom:1px solid var(--line);flex:none}
.drawer-title{flex:1;min-width:0;font-weight:700;font-size:.95rem;color:var(--text)}
.drawer-body{flex:1;min-height:0;overflow:auto;padding:var(--sp-4) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.drawer-body .hint{margin:0}
.drawer-body .field{margin-bottom:0}
/* ---------- Rueckfrage (Entwurf verwerfen) ----------
Natives