/* ============================================================
   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{background:var(--satin-deep)}
#publishBtn:hover,#bPublishBtn:hover{background:var(--satin-deep-hover)}
#publishBtn:active,#bPublishBtn: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 */
.btn:disabled{opacity:.45;filter:saturate(.35);cursor:default}
.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,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%239BA1B2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");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{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-5);background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;z-index:5}
.topbar-brand{display:flex;align-items:center;gap:10px;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}
.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)}
.crumb{margin:0 auto;font-size:.82rem;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(42ch,38vw)}
.crumb:empty{display:none}
.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)}
.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;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)}

/* ---------- 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}
#viewEdit .log{flex:1;min-height:300px;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}
/* Meta-Zeile: links Modus-Umschalter, rechts Modellwahl */
.chat-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
/* Modus-Umschalter Beraten/Umsetzen: der AKTIVE Modus traegt das Rose-Kupfer
   (er bestimmt, was "Senden" tut — eine Primaerentscheidung). */
.mode-switch{display:inline-flex;gap:3px;background:var(--bg);border:1px solid var(--line);padding:3px;border-radius:var(--r-sm)}
.mode-btn{border:1px solid transparent;background:transparent;color:var(--text-soft);font-weight:600;font-size:11.5px;letter-spacing:.3px;padding:6px 13px;border-radius:7px;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.mode-btn:hover{color:var(--text)}
.mode-btn.active{background:var(--satin);color:var(--satin-text);border:1px solid var(--satin-edge);box-shadow:var(--satin-shadow)}
.mode-btn.active:hover{background:var(--satin-hover)}
/* Modellwahl: dezente Meta-Zeile */
.modelbar{display:flex;align-items:center;gap:var(--sp-2);flex:1;min-width:180px}
.modelbar .field-label{white-space:nowrap;flex:0 0 auto}
.modelbar select{width:auto;flex:1;min-width:0;font-size:.82rem;padding:7px 34px 7px 11px}
/* 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}
/* Veroeffentlichen-Moment: ruhig abgesetzte Aktionszeile direkt unter dem Chat */
.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}
#dirty:not(:empty)::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--copper);margin-right:7px;vertical-align:middle}

/* ---------- Direktzugriffe (Fruehere Versionen, Bild hochladen) ---------- */
.quick-tools{display:flex;gap:var(--sp-2);flex-wrap:wrap;padding-top:var(--sp-4);border-top:1px solid var(--line)}
.tool-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:transparent;color:var(--text-soft);font-size:.8rem;font-weight:500;padding:8px 13px;border-radius:var(--r-pill);cursor:pointer;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.tool-btn::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--input-border);transition:background var(--dur) var(--ease)}
.tool-btn:hover{border-color:var(--input-border);color:var(--text)}
.tool-btn:hover::before{background:var(--copper)}

/* ---------- Experten-Bereich (Tracking & Head-Code), standardmaessig zu ---------- */
.expert-zone{border-top:1px dashed var(--line-strong);padding-top:var(--sp-3)}
.expert-head{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;padding:6px 0;color:var(--muted);font-size:.78rem;font-weight:500;cursor:pointer;transition:color var(--dur) var(--ease)}
.expert-head::before{content:"▸";font-size:.7rem;transition:transform var(--dur) var(--ease)}
.expert-head[aria-expanded="true"]::before{transform:rotate(90deg)}
.expert-head:hover{color:var(--text-soft)}
.expert-tag{font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);padding:2px 8px;border-radius:var(--r-pill)}

/* Sektions-Karten ("group") */
.group{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:var(--sp-4)}
.group-title{font-weight:600;font-size:.92rem;color:var(--text);margin-bottom:var(--sp-3);display:flex;align-items:center;gap:9px}
.group-title.between{justify-content:space-between}
.draft{border-color:rgba(207,161,137,.5);box-shadow:0 0 0 3px rgba(207,161,137,.08)}

/* Blog: gefuehrte Schritt-Karten — der aktive Schritt traegt die Kupfer-Nummer */
.step-n{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;background:var(--bubble-user);color:var(--text-soft);font-size:.74rem;font-weight:700;flex:0 0 auto;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.group.step{transition:border-color var(--dur) var(--ease)}
.group.step:focus-within{border-color:var(--input-border)}
.group.step:focus-within .step-n{background:var(--satin);color:var(--satin-text)}
/* SEO & Links: erkennbar optional */
.group.optional{background:transparent;border-style:dashed}
.group.optional .group-title{color:var(--text-soft)}
.optional-tag{font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);padding:2px 8px;border-radius:var(--r-pill)}

/* Leere Container kollabieren */
.thumbs:empty,.links-list:empty,.faces-sel:empty,.posts-list:empty{display:none}

/* ---------- Bilder (Panel-Listen) ---------- */
.imgadd{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.imgadd input[type=text]{flex:1;min-width:150px}
.thumbs{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.thumb{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-2)}
.thumb img{width:72px;height:72px;object-fit:cover;border-radius:var(--r-xs);flex:0 0 auto}
.thumb.featured img{width:84px;height:84px}
.thumb .cap{flex:1;font-size:.84rem;color:var(--text-soft)}

/* ---------- SIGNATUR: die Scheinwerfer-Buehne ----------
   Radiales Licht faellt auf die Vorschau-Karte; die Kundenwebsite (der helle
   iframe-Inhalt) IST die Buehne — bewusst hell auf dunklem Werkzeug. */
.stage{padding:var(--sp-5);overflow:hidden;display:flex;background:radial-gradient(ellipse 90% 70% at 50% 38%, #262B38 0%, #15171C 70%)}
.browser{flex:1;display:flex;flex-direction:column;background:var(--panel);border-radius:var(--r-lg);box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 0 90px rgba(255,255,255,0.10), 0 24px 60px rgba(0,0,0,0.5);overflow:hidden;position:relative}
.browser-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-strong);background:var(--panel)}
.bdots{display:inline-flex;gap:6px}
.bdots i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.browser-bar .url{flex:1;font-size:.78rem;color:var(--text-soft);background:var(--bg);padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--line);text-align:center}
/* Teil der Signatur: dezentes LIVE-VORSCHAU-Label (mono, gesperrt, klein) */
.live-tag{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);border:1px solid var(--line-strong);padding:4px 9px;border-radius:var(--r-xs);white-space:nowrap}
iframe{flex:1;border:0;width:100%;background:#fff}
/* ---------- Viewport-Umschalter (Issue #77) ----------
   Modell (B): der Umschalter aendert NUR die iframe-Breite innerhalb der
   Buehne. Die Trennlinie aus #68 bleibt, wo der Nutzer sie hingezogen hat -
   sie ist eine Aussage ueber die Arbeitsflaeche, der Umschalter eine ueber
   das Geraet.

   WICHTIG (Falle 3 aus #77): Die Breite haengt am IFRAME, nicht an .browser.
   Der Versionshinweis #verBanner ist ein Geschwister des iframes innerhalb
   von .browser und gehoert zum Studio, nicht zur Kundenseite. Greift die
   Regel eine Ebene hoeher, schrumpft "Du siehst eine fruehere Version" mit
   dem Geraet mit - falsch, er soll die Buehne fuellen.

   max-width:100% ist die Notbremse fuer sehr schmale Buehnen: lieber ein
   schmaleres Geraet als ein waagerechter Rollbalken. */
.stage iframe{width:var(--preview-w,100%);max-width:100%;margin-inline:auto}
/* Die grosse Vorschau uebernimmt die Geraetewahl. Wer auf Mobil umschaltet
   und dann vergroessert, will das Handy groesser sehen - nicht ploetzlich
   wieder Desktop. #previewModal liegt AUSSERHALB von #app, erbt die Variable
   also nicht; app.js setzt sie dort zusaetzlich. */
.pv-modal iframe{width:var(--preview-w,100%);max-width:100%;margin-inline:auto}

/* Der Umschalter selbst: bewusst neutral. Nur --line-strong und gedaempfter
   Text, Typografie wie das LIVE-VORSCHAU-Label daneben. Rose-Kupfer bleibt
   Aktionen vorbehalten - eine Geraetewahl ist keine Aktion. */
.viewport-switch{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-xs);overflow:hidden;flex:none}
.vp-btn{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);background:transparent;border:0;padding:4px 9px;cursor:pointer;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.vp-btn+.vp-btn{border-left:1px solid var(--line-strong)}
.vp-btn:hover{color:var(--text);background:var(--input-bg)}
.vp-btn[aria-pressed="true"]{color:var(--text);background:var(--input-bg)}
.vp-btn:focus-visible{outline:2px solid rgba(244,242,237,.75);outline-offset:-2px}
.ver-banner{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;background:var(--bg);border-bottom:1px solid var(--line-strong);padding:10px var(--sp-4);font-size:.84rem;color:var(--text-soft)}
.ver-banner-text{flex:1;min-width:200px}
.ver-banner-text strong{color:var(--copper)}
.ver-banner .btn{flex-shrink:0}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);padding:12px 22px;border-radius:var(--r-sm);box-shadow:0 14px 36px rgba(0,0,0,.5);font-weight:500;font-size:.88rem;opacity:0;transition:opacity 260ms var(--ease),transform 260ms var(--ease);z-index:50;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  /* Gestapelt ergibt eine senkrechte Trennlinie keinen Sinn: display:none nimmt
     sie auch aus der Tab-Reihenfolge. Layout exakt wie vor Issue #68. */
  .workspace{grid-template-columns:1fr;grid-auto-rows:min-content}
  .splitter{display:none}
  .panel{border-bottom:1px solid var(--line);max-height:none}
  .stage{min-height:60vh}
  .topbar{gap:var(--sp-2) var(--sp-3)}
  .tabs{order:3;width:100%;margin:var(--sp-1) 0 0;justify-content:center}
  .topbar-right{order:2}
}
@media (max-width:480px){
  .panel,.stage{padding:var(--sp-4)}
  .login-card{padding:32px 24px}
  .wordmark{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---------- Link-Zeilen (Blog: Affiliate-Haken) ---------- */
.links-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.link-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.link-row .lr-url{flex:2;min-width:150px}
.link-row .lr-note{flex:1;min-width:110px}
.link-row .lr-aff{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-soft);white-space:nowrap;background:var(--bg);border:1px solid var(--line);padding:8px 12px;border-radius:var(--r-sm)}
.link-row .lr-aff input{width:15px;height:15px;accent-color:#BC8A70;box-shadow:none}

/* ---------- Listen: Beitraege / Versionen / Snippets / Uploads ---------- */
.posts-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.post-row{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;transition:border-color var(--dur) var(--ease)}
.post-row:hover{border-color:var(--line-strong)}
.post-info{flex:1;min-width:0}
.post-title{font-weight:600;font-size:.87rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-slug{font-size:.75rem;color:var(--text-soft)}

/* Versions-Zeile: Datum oben, Message darunter, Buttons als eigene Zeile */
.ver-row{flex-direction:column;align-items:stretch;gap:6px}
.ver-row .post-info{width:100%}
.ver-row .post-title{white-space:normal;overflow:visible;text-overflow:clip;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ver-row.ver-current{border-color:var(--copper-mid);box-shadow:inset 0 0 0 1px var(--copper-mid)}
.ver-badge{display:none;font-size:.64rem;font-weight:700;letter-spacing:.04em;color:var(--satin-text);background:var(--copper);padding:2px 9px;border-radius:var(--r-pill)}
.ver-row.ver-current .ver-badge{display:inline-block}
.ver-row .post-slug{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.ver-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;width:100%}

/* Bild hochladen: Pending-Upload-Zeilen */
.upl-row{align-items:flex-start}
.upl-thumb{width:56px;height:42px;object-fit:cover;border-radius:var(--r-xs);border:1px solid var(--line-strong);flex-shrink:0;background:var(--panel)}
.upl-controls{display:flex;flex-direction:column;gap:6px;align-items:stretch;flex-shrink:0;max-width:190px}
.upl-controls select{font-size:.78rem;padding:6px 30px 6px 9px}
.upl-controls .linkish{align-self:flex-end;padding:0}

/* ---------- Zweispaltige Reihe ---------- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.row2 .field{margin-bottom:0}

/* ---------- Upload-Zonen: gestaltete Drop-Areas statt nativer File-Inputs ---------- */
.dropzone{border:1.5px dashed var(--input-border);border-radius:var(--r-md);background:var(--bg);padding:var(--sp-4);display:flex;align-items:center;gap:var(--sp-3);position:relative;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.dropzone:hover{border-color:var(--placeholder)}
.dropzone.drag{border-color:var(--copper-mid);background:var(--panel)}
.dz-ico{width:32px;height:32px;flex:0 0 auto;color:var(--text-soft)}
.dz-body{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.dz-btn{display:inline-flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--text);background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--r-xs);padding:7px 12px;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.dz-btn:hover{background:var(--bubble-user);border-color:var(--placeholder)}
/* Fokus-Ring am Label, wenn das (visuell versteckte) Input per Tastatur fokussiert ist */
.dropzone .file:focus-visible ~ .dz-body .dz-btn,.dropzone .file:focus-visible + .dz-body .dz-btn{outline:2px solid rgba(244,242,237,.75);outline-offset:2px}
.dz-hint{font-size:.8rem;color:var(--text-soft)}
.dz-name{font-size:.76rem;font-weight:500;color:var(--text);background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:4px 11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* editierbare Bildunterschrift in der Bildliste */
.thumb .thumb-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.cap-input{width:100%;font-size:.84rem;padding:7px 10px;border:1.5px solid var(--input-border);border-radius:var(--r-xs);background:var(--input-bg);color:var(--text);box-shadow:inset 0 1px 3px rgba(0,0,0,0.3)}
.cap-input:focus{outline:none;border-color:var(--placeholder)}
.cap-hint{font-size:.73rem;color:var(--text-soft);line-height:1.4}

/* ---------- Bild-Werkzeuge: Gesichter-Blur & Zuschnitt ---------- */
.img-tools{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-2)}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--text);cursor:pointer}
.chk input{accent-color:#BC8A70;box-shadow:none}
.chk-sm{font-size:.78rem}
.crop-editor{margin-top:var(--sp-3);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-3)}
.crop-frame{width:260px;max-width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-sm);position:relative;background:#000;cursor:grab;touch-action:none;user-select:none}
.crop-frame:active{cursor:grabbing}
.crop-frame img{position:absolute;top:0;left:0;max-width:none;user-select:none;-webkit-user-drag:none}
.crop-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- Gesichts-Auswahl ---------- */
.faces-sel{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.faces-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.face-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;border:2px solid transparent;border-radius:var(--r-sm);padding:3px;background:var(--bg);transition:border-color var(--dur) var(--ease)}
.face-item:hover{border-color:var(--line-strong)}
.face-item.on{border-color:var(--copper-mid)}
.face-item img{width:56px;height:56px;object-fit:cover;border-radius:6px;display:block}
.face-item input{margin:0;box-shadow:none;accent-color:#BC8A70}
.face-tag{font-size:.66rem;color:var(--text-soft)}
.thumb-block{flex-direction:column;align-items:stretch}
.thumb-top{display:flex;align-items:center;gap:10px}

/* Hinweis: ohne Web-Recherche erstellt */
.web-note{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);border-radius:var(--r-sm);padding:9px 12px;font-size:.82rem;margin-bottom:var(--sp-3);line-height:1.45}

/* Auswahl-/Galerie-Panel fuer in der Vorschau angeklickte Bilder */
.img-panel{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:10px 13px}
.img-panel-text{font-size:.86rem;color:var(--text-soft)}
.img-panel-text code{font-family:var(--mono);background:var(--panel);color:var(--text);padding:2px 7px;border-radius:5px;font-size:.78rem;border:1px solid var(--line-strong)}
.img-panel-actions{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}

/* ---------- Vollbild-Overlay (Vorschau + Passwort-Dialog) ---------- */
.pv-modal{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
.pv-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);background:var(--panel);border-bottom:1px solid var(--line)}
.pv-title{font-weight:600;color:var(--text)}
.pv-modal iframe{flex:1;border:0;background:#fff}
.pw-modal-body{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);overflow:auto;background:radial-gradient(ellipse 90% 70% at 50% 30%, #1B1E25 0%, var(--bg) 70%)}
.pw-modal-card{width:100%;max-width:384px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.5);padding:32px}
.pw-modal-card .field{margin-bottom:var(--sp-4)}

/* Dezenter Text-Schalter (im Panel v. a. "Pfad kopieren") */
.linkish{align-self:flex-start;background:none;border:0;padding:4px 0;color:var(--text-soft);font-size:.8rem;font-weight:500;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)}
.linkish:hover{color:var(--text);text-decoration-color:currentColor}