:root {
  /* ── 1337BOT Console-Skin (Redesign 2026-07-22): Prototyp-Palette als EINE Token-Quelle.
     Alle bestehenden Klassen erben den Look ueber diese Variablen — kein Inline, kein Zweit-System. ── */
  --void: #0e0e10;        /* Seiten-Hintergrund */
  --void-2: #17171a;      /* Karten / Flaechen */
  --void-3: #1d1d21;      /* Einsatz / Innenflaeche (Rows, hellere Inputs) */
  --panel-bg: #111113;    /* Sidebar / Chrome */
  --bone: #f2f2f0;
  --maritime: #004272;
  --maritime-lt: #4a90c8;
  --trail: #f28a1e;
  --accent: #f28a1e; /* Orange als TEXT/Akzent — im Light-Theme abgedunkelt (A11y/WCAG-Kontrast) */
  --tattoo: #a91d3a;
  --labor: #6ee7b7;
  --muted: #9d9da5;
  --line: #26262b;
  --line-2: #2a2a30;      /* etwas hellere Kante auf Einsatz-Flaechen */
  --radius: 0;
  /* Radius-Skala — Console = scharfe Kanten (Prototyp). Pill bleibt fuer Schalter/Statuspunkte. */
  --radius-lg: 0;
  --radius-sm: 0;
  --radius-xs: 0;
  --radius-pill: 999px;
  /* 8px-Spacing-Rhythmus */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* Tiefe (flacher Console-Look) + Bewegung */
  --shadow-1: 0 1px 1px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.30);
  --focus-ring: 0 0 0 3px rgba(242, 138, 30, 0.40);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Politur: flache Console-Flaeche, Top-Innen-Highlight, weiche Trennlinie, Akzent-Glows */
  --surface: #17171a;
  --hi: rgba(255, 255, 255, 0.05);
  --line-soft: rgba(255, 255, 255, 0.06);
  --faint: #66666e;
  --glow-trail: 0 6px 22px rgba(242, 138, 30, 0.26);
  --glow-maritime: 0 6px 22px rgba(0, 66, 114, 0.42);
  /* ── Kanonische Brief-Namen (Design-Brief 2026-07-23, §2) — Aliase auf die EINE Quelle.
     Neue Styles duerfen die Brief-Namen nutzen; bestehende Variablen bleiben gueltig.
     Aliase zeigen per var() auf die Quelle → Themes spiegeln automatisch mit. ── */
  --bg: var(--void);
  --surface-2: var(--void-3);
  --border: var(--line);
  --border-2: var(--line-2);
  --divider: #202024;
  --text: var(--bone);
  --text-2: var(--muted);
  --text-3: var(--faint);
  --accent-2: #ffb45e;
  --ok: #5db36c;
  --warn: #f8ab55;
  --danger: #c96a6a;
}
:root[data-theme="light"] {
  --void: #f3f3f3;
  --void-2: #ffffff;
  --void-3: #ececec;
  --panel-bg: #ffffff;
  --bone: #1b1b1b;
  --line: #d4d4d4;
  --line-2: #e4e4e4;
  --muted: #666666;
  --accent: #92400e; /* dunkleres Orange: ~6:1 auf hellem BG (Trail-Orange waere nur ~2.8:1) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.12);
  --surface: #ffffff;
  --faint: #888888;
  --hi: rgba(0, 0, 0, 0.03);
  --line-soft: rgba(0, 0, 0, 0.07);
  --divider: #e4e4e4;
  --accent-2: #b45309; /* Hover-Orange hell: dunkler statt heller (Kontrast auf Weiss) */
}
:root[data-theme="black"] {
  --void: #080808;
  --void-2: #151515;
  --void-3: #1b1b1b;
  --panel-bg: #0b0b0b;
  --bone: #e8e8e8;
  --line: #2a2a2a;
  --line-2: #242424;
  --muted: #8a8a8a;
  --surface: #151515;
  --divider: #191919;
}

* { box-sizing: border-box; }

/* Kein Layout-Sprung, wenn eine Scrollbar dazukommt (Owner 2026-07-29): der Platz dafuer ist
   IMMER reserviert. Ohne das rutscht der ganze Inhalt um die Scrollbar-Breite zur Seite,
   sobald eine Seite laenger wird — und beim Wechsel auf eine kurze Seite wieder zurueck. */
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--ui-font, 'Instrument Sans', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
/* Atmosphäre: zwei sehr dezente Marken-Glows (Maritime kühl + Trail warm) + feines Grain.
   Gibt dem Panel Tiefe statt flacher Fläche. Liegt fix hinter dem Inhalt (z-index:-1,
   pointer-events:none) — die transparente .design-shell/.app-frame lassen es im
   Content-Bereich durchscheinen, ohne dass Klicks/Layout berührt werden. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 720px at 6% -8%, rgba(0, 66, 114, 0.26), transparent 58%),
    radial-gradient(900px 760px at 108% 112%, rgba(217, 118, 6, 0.10), transparent 56%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 720px at 6% -8%, rgba(0, 66, 114, 0.10), transparent 58%),
    radial-gradient(900px 760px at 108% 112%, rgba(217, 118, 6, 0.06), transparent 56%);
}

/* Schriftgröße (Erscheinungsbild) — skaliert die rem-Basis.
   3 Stufen: „standardminus" (kompakter, 15px), „standard" (16px Basis) und „standardplus" (17px).
   Gesetzt via data-fsize ODER data-fontsize (auf :root oder body) — egal welches Lane III
   verdrahtet, beide greifen. „standard" = Basis (kein Override nötig, hier explizit). */
:root[data-fsize="standardminus"], :root[data-fontsize="standardminus"],
body[data-fsize="standardminus"], body[data-fontsize="standardminus"] { font-size: 15px; }
:root[data-fsize="standard"], :root[data-fontsize="standard"],
body[data-fsize="standard"], body[data-fontsize="standard"] { font-size: 16px; }
:root[data-fsize="standardplus"], :root[data-fontsize="standardplus"],
body[data-fsize="standardplus"], body[data-fontsize="standardplus"] { font-size: 17px; }

/* Schriftart-/-größe-Umschalter */
.font-toggle, .fsize-toggle, .density-toggle { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.font-btn, .fsize-btn, .density-btn { padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--void-2); color: var(--bone); cursor: pointer; font-size: 0.82rem; transition: border-color .15s, background .15s, color .15s; }
.font-btn:hover, .fsize-btn:hover, .density-btn:hover { border-color: var(--accent); }
.font-btn.active, .fsize-btn.active, .density-btn.active { border-color: var(--accent); background: rgba(217, 118, 6, 0.12); color: var(--accent); }
/* Hervorgehobene Checkbox-Option (z. B. Simulcast im Live-Ticker) — sichtbarer als eine normale set-check. */
.set-check-hl { border: 1px solid var(--trail); background: rgba(217, 118, 6, 0.08); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; font-weight: 600; }

/* Dashboard: Erst-Einrichtung-Block (oben, bis setupDone) */
.dash-setup { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.2rem; padding: 1rem 1.3rem;
  background: rgba(217, 118, 6, 0.10); border: 1px solid var(--trail); border-left: 4px solid var(--trail); border-radius: var(--radius); }
.dash-setup-ico { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.dash-setup-text { flex: 1; min-width: 0; }
.dash-setup-text h2 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.dash-setup .btn { flex-shrink: 0; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.mono { font-family: 'Geist Mono', monospace; }
.error { color: var(--tattoo); }
.ok { color: var(--labor); }

.brand-mark {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brand-mark span { color: var(--accent); }
.brand-mark.sm { font-size: 1.3rem; }

/* ---- LOGIN (Screendesign B_centered) ---- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; position: relative; overflow: hidden; }
.login::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(232,232,232,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(232,232,232,.09) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(700px 520px at 50% 38%, #000, transparent 78%); mask-image: radial-gradient(700px 520px at 50% 38%, #000, transparent 78%); opacity: .6; }
.login::after { content: ""; position: absolute; inset: 0; background: radial-gradient(680px 420px at 50% 8%, rgba(0,66,114,.18), transparent 60%); pointer-events: none; }
.login-box { position: relative; z-index: 2; width: 100%; max-width: 400px; background: var(--void-2); border: 1px solid var(--line); padding: 40px 38px 32px; }
.login-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--trail); }
.login .brand { text-align: center; margin-bottom: 30px; }
.login .logo { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 2.1rem; letter-spacing: .02em; line-height: 1; }
.login .logo .lz { color: var(--accent); }
.login .logo-sub { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(232,232,232,.72); margin-top: 6px; }
.login .head { text-align: center; margin-bottom: 24px; }
.login .head h2 { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: .03em; text-transform: uppercase; }
.login .head p { font-size: 0.8rem; color: rgba(232,232,232,.6); margin-top: 6px; }
.login-err { display: none; align-items: center; gap: 8px; border: 1px solid rgba(255,93,93,.4); background: rgba(255,93,93,.08); color: #ff5d5d; font-family: 'Geist Mono', monospace; font-size: 0.75rem; padding: 10px 12px; margin-bottom: 18px; }
.login-err:not(:empty) { display: flex; }
.login-err.info { border-color: rgba(74,144,200,.45); background: rgba(74,144,200,.1); color: var(--maritime-lt); text-align: left; line-height: 1.5; }

/* ===== Pricing / Tarife + Aktion (Operator-Vorschau + Kunden-Upgrade) ===== */
/* Bewusst zurückhaltend („serious"), kein Shop-Geblinke: ein Akzent, Mono-Zahlen, klarer Strike. */
.pricing { display: grid; gap: 0.5rem; margin: 0.6rem 0; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.85rem; background: var(--void-2); }
.plan-name { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.plan-price { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--bone); line-height: 1.1; margin-top: 0.1rem; }
.plan.promo { border-color: var(--accent); background: rgba(217, 118, 6, 0.07); }
.plan.promo.inactive { opacity: 0.5; }
.plan-promo-eyebrow { display: flex; align-items: center; gap: 0.5rem; margin: 0.15rem 0 0.3rem; font-family: 'Geist Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.plan-cut { border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius-xs); padding: 0.02rem 0.34rem; font-size: 0.68rem; letter-spacing: 0.04em; }
.plan-prices { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.plan-old { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; font-size: 1rem; }
.plan-new { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.75rem; line-height: 1.05; color: var(--bone); }
.plan-promo-meta { margin-top: 0.3rem; font-family: 'Geist Mono', monospace; font-size: 0.64rem; letter-spacing: 0.05em; color: var(--accent); }
.op-promo-preview { margin: 0.6rem 0; padding: 0.6rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.op-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* FREE-Row-Cap-Badge (x/N) — sichtbare Seite der server-seitigen Limits */
.free-cap { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; padding: 0.25rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 0.74rem; color: var(--muted); background: var(--void-2); }
.free-cap .fc-tag { font-weight: 700; letter-spacing: 0.08em; color: var(--trail); }
.free-cap.at-limit { color: var(--trail); border-color: var(--trail); background: rgba(217, 118, 6, 0.08); }

/* FOUNDER-Badge (Gold) — erste Lizenz-Kohorte */
.tier-badge.founder { background: linear-gradient(135deg, #b8860b, #ffd770); color: #1b1b1b; border-color: #ffd770; }
.op-tier-founder { font-family: 'Geist Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: #1b1b1b; background: linear-gradient(135deg, #b8860b, #ffd770); border-radius: var(--radius-xs); padding: 0.05rem 0.34rem; white-space: nowrap; }

/* BETA-INSIDER-Badge (Violett) — erste 20 / Beta-Kohorte */
.tier-badge.beta { background: linear-gradient(135deg, #6d28d9, #a78bfa); color: #fff; border-color: #a78bfa; }
.op-tier-beta { font-family: 'Geist Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: linear-gradient(135deg, #6d28d9, #a78bfa); border-radius: var(--radius-xs); padding: 0.05rem 0.34rem; white-space: nowrap; }

/* NOSTREAMER-Badge (Cyan) — Community-Paket */
.tier-badge.nostreamer { background: linear-gradient(135deg, #22d3ee, #67e8f9); color: #053345; border-color: #67e8f9; }
.op-tier-nostreamer { font-family: 'Geist Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: #053345; background: linear-gradient(135deg, #22d3ee, #67e8f9); border-radius: var(--radius-xs); padding: 0.05rem 0.34rem; white-space: nowrap; }
/* Premium-Member-Chip (Operator-Codeliste) */
.op-tier-premium { font-family: 'Geist Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: linear-gradient(135deg, #1e3a8a, #3b82f6); border-radius: var(--radius-xs); padding: 0.05rem 0.34rem; white-space: nowrap; }

/* ===== Streamoverlay Builder (Modul) ===== */
/* Live-Steuerung (Cockpit) — von ovbuilder.js genutzt. (Die alten Modul-/Palette-/Tab-Styles
   .ovb-tabbar/.ovb-tab/.ovb-grid/.ovb-preview/.ovb-palette/.ovb-items/.ovb-ico/.ovb-soon/.ovb-chip
   wurden entfernt: ovbuilder.js injiziert seine eigenen Styles und nutzt .tabs/.tab + .ovb-preview-frame.) */
.ovb-live-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ovb-live-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ovb-live-name { flex: 1; font-weight: 600; }
.ovb-live-val { min-width: 2.5em; text-align: right; font-size: 1.1rem; color: var(--trail); }

/* ===== Befehle: Inline-Zeilen (volle Breite, Edit/Löschen rechts) ===== */
/* P4 (Owner): max-width entfernt → „Neuer Befehl" füllt die halbe content-grid-Spalte (1/2 1/2 mit Variablen). */
.cmd-rows { display: flex; flex-direction: column; gap: 0.4rem; }
.cmd-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--void-2); }
.cmd-row.cmd-off { opacity: 0.55; }
.cmd-trigger { font-weight: 700; color: var(--bone); flex: 0 0 auto; }
.cmd-row .cmd-tier { flex: 0 0 auto; }
.cmd-resp { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-meta { flex: 0 0 auto; white-space: nowrap; }
.cmd-actions { flex: 0 0 auto; margin-left: auto; display: flex; gap: 0.3rem; }
@media (max-width: 640px) { .cmd-form-card { max-width: none; } .cmd-row { flex-wrap: wrap; } .cmd-resp { flex-basis: 100%; white-space: normal; } .cmd-actions { margin-left: 0; } }
/* P6: Alerts & Sticker — rechte Spalte (Bibliothek + Upload gestapelt). content-grid liefert die 1/2 1/2-Aufteilung. */
.alerts-sticker-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ===== Operator-Backoffice (/operator) ===== */
/* /operator-Links erscheinen NUR im _DEV-Channel; offizielle _R-Version verlinkt /operator nirgendwo. */
html:not([data-channel="dev"]) .op-login-link { display: none; }
.op-app { min-height: 100vh; }

/* Sidebar-Layout + Dashboard (Operator-Overhaul 2026-06-06) */
.op-shell { display: flex; align-items: stretch; min-height: 100vh; }
.op-shell .op-sidebar { width: 234px; flex: 0 0 234px; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; background: var(--void-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 1.1rem 0.8rem; gap: 0.35rem; }
.op-shell .op-sidebar .op-brand { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.25rem; color: var(--bone); margin-bottom: 0.9rem; padding: 0 0.3rem; }
.op-shell .op-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.op-shell .op-sidebar .op-tab { display: block; width: 100%; text-align: left; padding: 0.6rem 0.7rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--bone); font-size: 0.92rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.op-shell .op-sidebar .op-tab:hover { background: rgba(217, 118, 6, 0.08); border-color: var(--line); }
.op-shell .op-sidebar .op-tab.active { background: rgba(217, 118, 6, 0.14); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.op-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.op-side-foot .btn { width: 100%; justify-content: center; }
.op-side-status { padding: 0 0.3rem 0.2rem; }
.op-shell .op-main { flex: 1 1 auto; min-width: 0; padding: 1.4rem 1.6rem; }
.op-dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; margin: 0.8rem 0 1.2rem; }
.op-dash-card { display: flex; align-items: center; gap: 0.7rem; text-align: left; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void-2); color: var(--bone); cursor: pointer; transition: border-color .15s, transform .1s; }
.op-dash-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.op-dash-card.ok { border-left: 3px solid #43b581; }
.op-dash-card.warn { border-left: 3px solid var(--trail); }
.op-dash-ic { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.op-dash-body { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; flex: 1 1 auto; }
.op-dash-title { font-family: 'Geist Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.op-dash-val { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.1; color: var(--bone); }
.op-dash-sub { font-size: 0.7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-dash-go { color: var(--muted); font-size: 1.1rem; flex: 0 0 auto; align-self: center; }
.op-dash-card:hover .op-dash-go { color: var(--accent); }
.op-note { background: rgba(217, 118, 6, 0.07); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; font-size: 0.82rem; color: var(--bone); margin: 0.3rem 0 0.7rem; }
@media (max-width: 720px) {
  .op-shell { flex-direction: column; }
  .op-shell .op-sidebar { width: auto; flex: none; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--line); }
  .op-shell .op-nav { flex-direction: row; flex-wrap: wrap; }
  .op-shell .op-sidebar .op-tab { width: auto; }
  .op-shell .op-main { padding: 1rem; }
}
.op-head { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--void-2); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.op-brand { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.3rem; color: var(--bone); }
.op-brand span { color: var(--accent); }
.op-tag { font-family: 'Geist Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: var(--tattoo); border: 1px solid var(--tattoo); border-radius: var(--radius-xs); padding: 0.1rem 0.4rem; vertical-align: middle; }
.op-nav { display: flex; gap: 0.3rem; flex-wrap: wrap; flex: 1; }
.op-tab { background: transparent; color: var(--bone); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0.45rem 0.75rem; cursor: pointer; font-family: 'Instrument Sans', sans-serif; font-size: 0.9rem; }
.op-tab:hover { background: var(--void); }
.op-tab.active { background: var(--void); border-color: var(--line); border-bottom: 2px solid var(--trail); }
.op-main { max-width: 920px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
.op-code-row { display: flex; align-items: center; gap: 0.6rem; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.4rem 0.65rem; margin-bottom: 0.35rem; }
.op-code { font-family: 'Geist Mono', monospace; font-weight: 700; letter-spacing: 0.06em; color: var(--bone); }
.op-code-row.used .op-code { color: var(--muted); }
.op-code-stat { font-family: 'Geist Mono', monospace; font-size: 0.72rem; }
.op-code-row.used { opacity: 0.7; }
.op-code-row .muted { margin-left: auto; }
.op-gen-out { margin-top: 0.7rem; }
.op-gen-codes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
.op-code-new { background: var(--void); border: 1px dashed var(--trail); border-radius: var(--radius-xs); padding: 0.3rem 0.55rem; cursor: pointer; user-select: all; }
.op-srv-row { display: flex; align-items: center; gap: 0.6rem; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin-bottom: 0.35rem; }
.op-srv-name { font-weight: 600; }
.op-srv-row .tier-badge { margin-left: auto; }

/* Kundenkarte (Operator → Kunden) */
.op-kunde { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; margin-bottom: 0.5rem; }
.op-kunde-free { opacity: 0.72; }
.op-kunde-head { display: flex; align-items: center; gap: 0.6rem; }
.op-kunde-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--line); }
.op-kunde-av-ph { display: grid; place-items: center; font-size: 18px; }
.op-kunde-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.op-kunde-id .op-srv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-kunde-head .tier-badge { margin-left: auto; flex: 0 0 auto; }
.op-kunde-srv, .op-kunde-meta, .op-kunde-code { margin-top: 0.32rem; }
.op-kunde-code .op-code { cursor: pointer; }
.op-warn { color: var(--trail); font-weight: 600; }
.op-key-row { display: flex; align-items: center; gap: 0.6rem; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin: 0.5rem 0; }
.op-key-row .op-code { word-break: break-all; }
.op-key-row .btn-mini { margin-left: auto; }
.op-adm-row { display: flex; align-items: center; gap: 0.6rem; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; margin-bottom: 0.35rem; }
.op-adm-row .mono { word-break: break-all; }
.op-adm-row .btn-mini, .op-adm-row .tier-badge { margin-left: auto; }
.op-gate-row { display: flex; align-items: center; gap: 0.75rem; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; margin-bottom: 0.4rem; cursor: pointer; transition: border-color 0.12s; }
.op-gate-row:hover { border-color: var(--maritime-lt); }
.op-gate-lbl { font-weight: 600; flex: 1; }
.op-toggle { position: relative; flex: 0 0 auto; width: 38px; height: 22px; }
.op-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.op-toggle-track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background 0.15s; }
.op-toggle-track::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--bone); border-radius: 50%; transition: transform 0.15s; }
.op-toggle input:checked + .op-toggle-track { background: var(--trail); }
.op-toggle input:checked + .op-toggle-track::before { transform: translateX(16px); }
.op-gate-pill { flex: 0 0 auto; font-family: 'Geist Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.op-gate-pill.free { background: rgba(110, 231, 183, 0.14); color: var(--labor); }
.op-gate-pill.sup { background: var(--trail); color: #1b1b1b; }
.op-switch { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0.7rem; cursor: pointer; font-weight: 600; }
.op-audit-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; border-bottom: 1px solid var(--line); padding: 0.4rem 0; font-size: 0.85rem; }
.op-audit-act { font-family: 'Geist Mono', monospace; font-weight: 700; color: var(--accent); }
.op-audit-det { color: var(--bone); }
.op-audit-row .muted { margin-left: auto; }
#maint-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: var(--trail); color: var(--void); text-align: center; padding: 0.5rem 1rem; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em; }
.side-logout { color: var(--muted); }
.side-logout:hover { color: var(--tattoo); border-color: var(--tattoo); }
.view-info-btn { background: none; border: none; cursor: pointer; font-size: 0.95rem; opacity: 0.55; margin-left: 0.4rem; vertical-align: middle; padding: 0.1rem 0.2rem; line-height: 1; transition: opacity 0.15s, transform 0.15s; }
.view-info-btn:hover { opacity: 1; transform: scale(1.15); }
.btn-disc { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 16px; font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 0.78rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border: none; background: #5865F2; color: #fff; text-decoration: none; transition: filter .15s; }
.btn-disc:hover { filter: brightness(1.1); }
.btn-disc .g { width: 18px; height: 18px; }
.login .sep { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: rgba(232,232,232,.72); font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: .18em; text-transform: uppercase; }
.login .sep::before, .login .sep::after { content: ""; flex: 1; height: 1px; background: rgba(232,232,232,.09); }
.login .field { margin-bottom: 14px; }
.login .field label { display: block; font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(232,232,232,.6); margin-bottom: 7px; }
.login .field input { width: 100%; background: var(--void); border: 1px solid var(--line); color: var(--bone); font-family: 'Geist Mono', monospace; font-size: 0.85rem; padding: 13px 14px; outline: none; transition: border-color .15s; }
.login .field input:focus { border-color: var(--accent); }
.login .field input::placeholder { color: rgba(232,232,232,.72); }
.btn-pw { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 16px; font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 0.78rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border: none; background: var(--trail); color: #111; margin-top: 4px; transition: filter .15s; }
.btn-pw:hover { filter: brightness(1.08); }
/* Invite-Button (Einstieg für Neue) — echter Button im Login-Stil statt nacktem Link. Sekundär zur Discord-Anmeldung: warmer Outline statt Vollfläche. */
.invite-wrap { margin-top: 14px; }
.invite-hint { font-family: 'Geist Mono', monospace; font-size: 0.66rem; line-height: 1.55; letter-spacing: 0.01em; color: rgba(232, 232, 232, 0.55); text-align: center; margin-bottom: 9px; }
.btn-invite { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 16px; font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; text-decoration: none; color: var(--bone); background: rgba(217, 118, 6, 0.10); border: 1px solid rgba(217, 118, 6, 0.45); transition: background 0.15s, border-color 0.15s, transform 0.04s; }
.btn-invite:hover { background: rgba(217, 118, 6, 0.20); border-color: var(--accent); }
.btn-invite:active { transform: translateY(1px); }
.btn-invite .bi-ico { font-size: 1.05rem; line-height: 1; }
.login .status { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 24px; font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(232,232,232,.6); }
.login .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--labor); box-shadow: 0 0 8px rgba(110,231,183,.6); animation: login-pulse 2s infinite; }
@keyframes login-pulse { 50% { opacity: .45; } }
.login .foot { text-align: center; margin-top: 8px; font-family: 'Geist Mono', monospace; font-size: 0.72rem; letter-spacing: .08em; color: rgba(232,232,232,.72); line-height: 1.8; }
.login .foot a { color: #4a90c8; text-decoration: none; }
.login .foot a:hover { text-decoration: underline; }

/* ---- APP ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--void);
  z-index: 10;
}
.topbar-right { display: flex; align-items: center; gap: 0.75rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--surface, var(--void-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--hi);
}
.card h2 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 1rem;
  font-size: 1.25rem;
  border-left: 3px solid var(--trail);
  padding-left: 0.6rem;
}
.card h3 {
  font-size: 0.95rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* form controls */
input, select, textarea {
  width: 100%;
  background: var(--void);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 118, 6, 0.35);
}
select:disabled, input:disabled { opacity: 0.4; cursor: not-allowed; }
.row { display: flex; gap: 0.6rem; }
/* Flex-Kinder duerfen schrumpfen (verhindert horizontales Ueberlaufen bei langen Select-/Input-Inhalten,
   z. B. die zwei Selects in „Post erstellen"). Auf schmalen Viewports umbrechen statt quetschen. */
.row > input, .row > select { min-width: 0; }
@media (max-width: 560px) { .row { flex-wrap: wrap; } .row > input, .row > select { flex: 1 1 100%; } }
.row > * { margin-bottom: 0.6rem; }

/* buttons — Hierarchie: primary (gefuellt) · secondary (Akzent-getoent) · base/ghost (neutral) · danger */
.btn {
  font-family: var(--ui-font, 'Instrument Sans', system-ui, sans-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--void);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.05s var(--ease);
}
.btn:hover { border-color: var(--accent); background: var(--void-2); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }

/* A11y (additiv): „Zum Inhalt springen" — visuell versteckt, bei :focus sichtbar. Token-basiert. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 200;
  padding: 0.55rem 0.9rem;
  background: var(--void);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--focus-ring);
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 8px; outline: none; }
.btn-primary { background: var(--trail); color: #1b1b1b; border-color: var(--accent); font-weight: 700; box-shadow: var(--glow-trail), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.06); }
.btn-secondary { background: rgba(217, 118, 6, 0.10); color: var(--bone); border-color: rgba(217, 118, 6, 0.45); }
.btn-secondary:hover { background: rgba(217, 118, 6, 0.20); border-color: var(--accent); }
.btn-danger { background: var(--tattoo); color: #fff; border-color: var(--tattoo); }
.btn-danger:hover { border-color: var(--tattoo); filter: brightness(1.1); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--line); }

/* Karten-Links (z. B. stage-link-card): Tiefe + dezente Hebung beim Hover */
a.card { display: block; text-decoration: none; color: inherit;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.08s var(--ease); }
a.card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-1px); }

/* Content-Links ohne eigene Klasse: intentional (Akzent) statt nacktem Browser-Unterstrich */
.content a:not([class]) { color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(217, 118, 6, 0.40); transition: border-color 0.15s var(--ease); }
.content a:not([class]):hover { border-bottom-color: var(--accent); }

/* badge */
.badge {
  font-family: 'Geist Mono', monospace;
  font-size: 0.66rem;
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.badge.on { color: var(--labor); border-color: var(--labor); }
.badge.off { color: var(--tattoo); border-color: var(--tattoo); }

/* status */
.feat { display: grid; gap: 0.4rem; margin-bottom: 0.5rem; }
.feat-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
/* Status-Bullets am Desktop in 2 Spalten — hält den Status-Block kompakt, damit er
   den Community-Radar in derselben Row nicht unnötig hochzieht. */
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem; margin-top: 0.45rem; }
/* „in Arbeit"-Markierung an Nav-Punkten (dezent, rechtsbündig). */
.nav-wip { margin-left: auto; font-size: 0.72rem; opacity: 0.65; flex-shrink: 0; }
@media (max-width: 600px) { .feat { grid-template-columns: 1fr; } }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dot.on { background: var(--labor); }
.dot.off { background: transparent; box-shadow: inset 0 0 0 2px var(--tattoo); }

/* member list */
.list { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.6rem; max-height: 180px; overflow-y: auto; }
.member {
  text-align: left;
  background: var(--void);
  border: 1px solid var(--line);
  color: var(--bone);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.member:hover { border-color: var(--maritime-lt); }
.m-name { color: var(--muted); font-weight: 400; }
.member.sel { border-color: var(--accent); background: rgba(217, 118, 6, 0.12); }

.mappings div { padding: 0.15rem 0; border-bottom: 1px dashed var(--line); }
.mappings span { color: var(--maritime-lt); }

code {
  font-family: 'Geist Mono', monospace;
  background: var(--void);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  font-size: 0.85em;
}

.brand-block { display: flex; align-items: baseline; gap: 0.5rem; }
.brand-by {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.login-status { display: block; font-family: 'Geist Mono', monospace; font-size: 0.64rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Server-Kontext / Switcher (Multi-Server, ProBot-Stil) ---- */
.server-ctx { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; user-select: none;
  background: var(--void-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.6rem; margin-bottom: 1rem; transition: border-color 0.15s; }
.server-ctx:hover { border-color: var(--accent); }
.srv-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--maritime); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.1rem; color: #fff; }
.srv-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.srv-label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.srv-name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-chev { color: var(--muted); font-size: 0.8rem; }
.srv-menu { background: var(--void-2); border: 1px solid var(--line); border-radius: var(--radius); margin: -0.6rem 0 1rem; padding: 0.35rem; display: flex; flex-direction: column; gap: 0.15rem; }
.srv-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: transparent; border: 0; cursor: pointer;
  padding: 0.4rem 0.45rem; border-radius: var(--radius-sm); color: var(--bone); text-align: left; font: inherit; }
.srv-item:hover { background: rgba(255,255,255,0.05); }
.srv-item.on { background: rgba(217,119,6,0.16); }
.srv-item-ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--maritime); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; color: #fff; }
.srv-item-name { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-item-meta { font-size: 0.66rem; white-space: nowrap; }
.srv-add { display: block; text-align: center; padding: 0.4rem; border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--accent); text-decoration: none; border: 1px dashed var(--line); margin-top: 0.2rem; }
.srv-add:hover { border-color: var(--accent); }
.srv-hint { font-size: 0.64rem; text-align: center; padding: 0.35rem 0.2rem 0.1rem; margin: 0; }

/* Globales Konto-Chip (über den Servern) */
.account-chip { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none;
  background: var(--void-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.45rem 0.55rem; margin-bottom: 0.6rem; transition: border-color 0.15s; }
.account-chip:hover { border-color: var(--labor); }
.acc-chip-ava { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--void); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem; border: 1px solid var(--line); }
.acc-chip-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.acc-chip-label { font-size: 0.55rem; letter-spacing: 0.12em; color: var(--muted); }
.acc-chip-name { font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Konto-Ansicht: aktiver Server + Lizenzen */
.acc-server { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.5rem 0.6rem; background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lic-list { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.3rem; }
.lic-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* P10 (Owner): volle boxed-Breite — höhere Spezifität schlägt das generische .accordion{max-width:880px} weiter unten. */
.accordion.sys-accordion { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
/* Konto-Block: „Deine Lizenzen" + „Erworbene Gegenstände" nebeneinander (schmal -> untereinander). */
.acc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; align-items: start; }
@media (max-width: 760px) { .acc-cols { grid-template-columns: 1fr; } }
.sys-accordion .acc-item { grid-column: span 2; } /* Standard = volle Breite (1/1) */
.sys-accordion .acc-item[data-span="half"]:not(.open) { grid-column: span 1; } /* halbe Breite (1/2) — Paare nebeneinander; aufgeklappt zieht .acc-item.open (weiter unten) auf volle Breite */
@media (max-width: 640px) { .sys-accordion { grid-template-columns: 1fr; } .sys-accordion .acc-item { grid-column: span 1; } }
.theme-swatches { display: flex; gap: 0.5rem; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.swatch:hover { border-color: var(--bone); }

/* Sanftes oranges Hover-Glow (dezent) */
.btn, .nav-item, .acc-head, .ga-plat, .snip, .setup-opt, .member, .tpl-tok, .swatch, .lang-btn, .doc-expand {
  transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.btn:hover, .nav-item:hover, .acc-head:hover, .ga-plat:hover, .snip:hover, .setup-opt:hover, .member:hover, .tpl-tok:hover, .swatch:hover, .lang-btn:hover, .doc-expand:hover {
  box-shadow: 0 0 9px rgba(217, 118, 6, 0.22);
}

/* Sprache — 2 Buttons */
.lang-toggle { display: flex; gap: 0.5rem; }
.lang-btn { flex: 1; background: var(--void); color: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.55rem; cursor: pointer; font-family: inherit; font-size: 0.92rem; }
.lang-btn.active { border-color: var(--accent); background: rgba(217, 118, 6, 0.12); color: var(--accent); }
.bg-toggle { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bg-btn { flex: 1; min-width: 90px; background: var(--void); color: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem; cursor: pointer; font-family: inherit; font-size: 0.85rem; }
.bg-btn.active { border-color: var(--accent); background: rgba(217, 118, 6, 0.12); color: var(--accent); }

.sys-import-btn { display: inline-block; margin-left: 0.5rem; }

/* Dokument-Boxen (Datenschutz) */
.doc-box { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 0.6rem; overflow: hidden; }
.doc-head { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--line); font-size: 0.82rem; font-family: 'Geist Mono', monospace; }
.doc-expand { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--bone); cursor: pointer; padding: 0.1rem 0.45rem; font-size: 0.9rem; }
.doc-content { padding: 0.6rem 0.7rem; font-size: 0.82rem; line-height: 1.5; max-height: 110px; overflow-y: auto; color: var(--muted); white-space: pre-line; }

/* Dokument-Modal (vergrößert) */
.doc-modal-card { max-width: 640px; width: 100%; }
.doc-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.doc-modal-head h2 { margin: 0; }
.doc-x { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--bone); cursor: pointer; padding: 0.2rem 0.55rem; font-size: 0.95rem; }
.doc-x:hover { border-color: var(--tattoo); color: var(--tattoo); }
.doc-modal-body { max-height: 60vh; overflow-y: auto; font-size: 0.9rem; line-height: 1.6; white-space: pre-line; }

.modules { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.4rem; }
.mod { padding: 0.4rem 0; border-bottom: 1px dashed var(--line); }
.mod-name {
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* Format-Leiste */
.fmt-bar { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin-bottom: 0.5rem; }
.fmt {
  background: var(--void);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  min-width: 30px;
  height: 30px;
  padding: 0 0.45rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: 'Geist Mono', monospace;
}
.fmt:hover { border-color: var(--maritime-lt); }
.fmt.b { font-weight: 800; }
.fmt.i { font-style: italic; }
.fmt.u { text-decoration: underline; }
.fmt.s { text-decoration: line-through; }
.fmt-sep { width: 1px; height: 20px; background: var(--line); margin: 0 0.2rem; }
/* A11y (additiv): Touch-Ziele auf Mobile vergrößern. .fmt-bar bricht um (flex-wrap),
   daher kein Layout-Bruch. .help bleibt visuell 15px, bekommt nur eine größere Trefferfläche. */
@media (max-width: 860px) {
  .fmt { min-width: 40px; height: 40px; }
  .help::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
}

.emoji-pop {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  max-height: 150px;
  overflow-y: auto;
}
.emoji {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  padding: 0.15rem 0.3rem;
  border-radius: var(--radius-xs);
}
.emoji:hover { background: var(--void); filter: brightness(1.6); }

/* Bausteine */
.snippets { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.7rem; }
.snippets-label {
  font-size: 0.7rem;
  color: var(--muted);
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.snip {
  background: var(--void);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  font-size: 0.8rem;
}
.snip:hover { border-color: var(--accent); background: rgba(217, 118, 6, 0.12); }

/* ===== Sidebar-Layout ===== */
/* --shell-max: EINE Stellschraube fuer die boxed-Breite des Inhalts. Hier drehen = ueberall.
   „boxed" = der Content wird gedeckelt + zentriert, statt auf Ultra-Widescreen voll zu laufen. */
.app { display: flex; min-height: 100vh; --shell-max: 1500px; } /* Design-Brief §5: Content-Cap 1500 px */
.sidebar {
  width: 222px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.9rem;
  position: sticky;
  top: 0;
  height: 100vh;
}
.side-brand { padding: 0 0.4rem 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: 0.8rem; flex-shrink: 0; }
/* Konto-Chip am unteren Rand der Sidebar (aus der Topbar umgezogen). margin-top:auto schiebt ihn
   unter die scrollende Nav; volle Breite im Sidebar-Kontext. */
.side-account { margin-top: auto; flex-shrink: 0; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.side-account .account-chip { width: 100%; }
/* Mitglieder-Suche (view-members) — flache Console-Zeilen. */
.ui2 .members-list { display: flex; flex-direction: column; gap: 8px; }
.ui2 .member-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); background: var(--void-3); }
.ui2 .member-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--maritime); color: var(--bone); font-family: 'Geist Mono', monospace; font-weight: 700; flex: none; }
.ui2 .member-meta { display: flex; flex-direction: column; min-width: 0; }
.ui2 .member-meta strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2 .member-roles { margin-left: auto; flex: none; }
/* Buendel-Unterleiste (Widgets / Auto-Posts, Design-Brief §6) — kw-subnav-Look, sitzt direkt
   unter der Studio-Leiste bzw. dem View-Kopf; deshalb ohne eigenen oberen Abstand. */
.ui2 .kw-bundle-strip { margin-top: 0; }
.account-chip, .server-ctx { flex-shrink: 0; }
/* Nav scrollt zwischen Kontext (oben) und Footer (unten) */
.nav { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0.3rem -0.2rem 0; padding: 0 0.2rem; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-xs); }
.nav { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* Gruppen */
.nav-group { display: flex; flex-direction: column; }
.nav-group-h {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; cursor: pointer;
  color: var(--faint); font-family: var(--ui-font, 'Instrument Sans', system-ui, sans-serif); font-weight: 600;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.7rem 0.5rem 0.35rem; user-select: none;
}
.nav-group-h:hover { color: var(--bone); }
.nav-group-chev { font-size: 0.7rem; transition: transform 0.18s; opacity: 1; color: var(--trail); }
.nav-group.collapsed .nav-group-chev { transform: rotate(-90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; }
.nav-group.collapsed .nav-group-items { display: none; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  color: var(--bone);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.92rem;
  text-align: left;
}
.nav-item:hover { background: var(--void); }
.nav-item.active { background: var(--void); border-color: var(--line); border-left: 3px solid var(--trail); }
/* Feste Icon-Breite -> alle Nav-Texte starten buendig in einer Spalte (Emoji-Glyphen sind unterschiedlich breit, z. B. BotDeck) */
.nav-ico { font-size: 1.05rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.4em; text-align: center; }
.side-foot { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.side-credit { font-family: 'Geist Mono', monospace; font-size: 0.65rem; color: var(--muted); line-height: 1.5; text-align: center; margin: 0.3rem 0 0; }
.side-credit a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line); }
.side-credit a:hover { color: var(--accent); border-color: var(--accent); }

/* BOXED (Owner 2026-07-17): Content auf --shell-max gedeckelt + zentriert. Auf Ultra-Widescreen
   lief er sonst voll aus. Breite global an .app{--shell-max} drehen. */
.content { flex: 1; padding: 1.5rem 2rem; min-width: 0; max-width: var(--shell-max); margin-inline: auto; }
/* Handy: 2rem Seitenrand frisst auf 360px-Schirmen 18 % der Breite und drueckt jede
   Mindestkachel ab 280px an die Kante. Gleiche Stufe, die .op-main laengst hat. */
@media (max-width: 860px) { .content { padding: 1rem; } }
/* CSS-Fallback fuers Sidebar-Verstecken: das Ausblenden macht app.js (applyMobileShell,
   Inline-Style) — faellt das JS aus, stand bisher eine 250px-Spalte im Handy-Bild.
   .mobile-open (der Burger-Zustand) bleibt davon unberuehrt: beim Oeffnen setzt app.js
   Inline display:flex, das gewinnt ohnehin gegen jede Klassen-Regel. */
@media (max-width: 860px) { .app > .sidebar:not(.mobile-open) { display: none; } }
/* Drawer offen -> Deckel weg: sonst klafft auf breiten Schirmen eine Luecke zwischen dem
   zentrierten Content und dem rechts angedockten Drawer (genau der alte Grund fuer max-width:none).
   :has am .app-Flexrow; steht allein, nicht in einer Selektor-Liste (dort waere :has nicht nachsichtig). */
.app:has(.drawer.open) .content { max-width: none; margin-inline: 0; }
.view-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.8rem;
  margin: 0 0 0.3rem;
}
.settings-hint { margin-bottom: 1.2rem; }

/* Transparenz-Block — bewusst auffällig ÜBER den Settings (z. B. Server-Status) */
.transparency { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0 0 1.2rem; padding: 0.85rem 1rem;
  background: rgba(74,144,200,0.08); border: 1px solid rgba(74,144,200,0.35); border-left: 3px solid var(--maritime-lt); border-radius: var(--radius); }
.transparency .tp-ico { font-size: 1.25rem; line-height: 1.4; flex-shrink: 0; }
.transparency .tp-body strong { display: block; margin-bottom: 0.2rem; color: var(--maritime-lt); font-size: 0.92rem; }
.transparency .tp-body p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--bone); opacity: 0.9; }

/* Loadouts — 3 Speicherplätze (Counter & Give-Away) */
.loadouts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0 0 0.9rem; padding: 0.5rem 0.6rem;
  background: rgba(217,118,6,0.06); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.lo-title { font-size: 0.78rem; font-weight: 600; margin-right: 0.15rem; }
.lo-slot { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.lo-slot.filled { border-color: var(--accent); }
.lo-slot button { border: none; background: var(--void-2); color: var(--bone); cursor: pointer; font-size: 0.78rem; padding: 0.32rem 0.5rem; transition: background .15s; }
.lo-slot button + button { border-left: 1px solid var(--line); }
.lo-main { font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-slot.filled .lo-main { color: var(--accent); }
.lo-main:disabled { opacity: 0.5; cursor: default; }
.lo-slot button:not(:disabled):hover { background: rgba(217,118,6,0.18); }
.lo-clear { color: var(--tattoo); }

/* ===== Accordion ===== */
/* Owner-CSS-Fix (gilt ueber ALLE Views): align-items: stretch -> Bloecke einer 2er-Reihe gleich hoch,
   Unterkanten auf EINER Linie (kein versetztes Item wie "Ueber & Updates"); gap = Abstand zwischen + nach unten. */
.accordion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; max-width: 880px; align-items: stretch; }
.acc-item.open { grid-column: 1 / -1; border-color: var(--accent); }
@media (max-width: 640px) { .accordion { grid-template-columns: 1fr; } }
.acc-item { background: var(--void-2); border: 1px solid var(--line); border-radius: var(--radius); }
.acc-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem; }
.acc-title-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--bone);
  cursor: pointer;
  text-align: left;
  padding: 0.3rem 0;
}
.acc-ico { font-size: 1.1rem; flex: 0 0 auto; }
.acc-title { font-family: var(--ui-font, 'Instrument Sans', system-ui, sans-serif); font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; flex: 1; }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .post-grid { grid-template-columns: 1fr; } }
.post-preview { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.8rem 1rem; min-height: 6rem; line-height: 1.55; font-size: 0.92rem; word-break: break-word; }
/* Spiel-Update-Vorschau (Discord-Embed-Attrappe) — erbt den Look der .post-preview, ergaenzt nur Embed-Spezifisches */
#gn-preview, .gn-preview { background: var(--void); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 0.8rem 1rem; min-height: 6rem; line-height: 1.55; font-size: 0.92rem; word-break: break-word; }
#gn-preview .gn-title, .gn-preview .gn-title { font-weight: 700; color: var(--accent); margin: 0 0 0.25rem; }
#gn-preview .gn-meta, .gn-preview .gn-meta { font-family: 'Geist Mono', monospace; font-size: 0.72rem; color: var(--muted); }
.bugreports-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.bugrep { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; }
.bugrep.done { opacity: 0.55; }
.bugrep-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.bugrep-id { font-family: 'Geist Mono', monospace; font-weight: 700; color: var(--accent); }
.bugrep-toggle { margin-left: auto; font-size: 0.74rem; padding: 0.2rem 0.6rem; }
.bugrep.done .bugrep-toggle { border-color: var(--labor); color: var(--labor); }
.bugrep-text { white-space: pre-wrap; line-height: 1.45; word-break: break-word; }
.bugrep-dbg { font-size: 0.72rem; background: rgba(0,0,0,0.3); padding: 0.5rem; border-radius: var(--radius-xs); overflow-x: auto; margin: 0.3rem 0 0; }
.bugrep-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.bugrep-filter.active { border-color: var(--labor); color: var(--labor); }
.bugrep-filter b { opacity: 0.75; }
/* Counter-Modul */
.counter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
@media (max-width: 860px) { .counter-grid { grid-template-columns: 1fr; } }
/* Counter „Neuer Counter + Vorschau": eigenes, ausgewogenes Grid (NICHT die geteilte .content-grid),
   damit das Formular nicht ueberbreit wird und die Vorschau klar sichtbar bleibt. */
.cnt-new-grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(280px, 360px); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.cnt-new-grid .cnt-preview-card { max-width: 360px; }
@media (max-width: 860px) { .cnt-new-grid { grid-template-columns: 1fr; } .cnt-new-grid .cnt-preview-card { max-width: none; } }
.obs-preview {
  background: repeating-conic-gradient(#2b2b2b 0% 25%, #232323 0% 50%) 0 / 22px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem; padding: 1.2rem; text-align: center; overflow: hidden;
}
.obs-label { font-family: 'Geist Mono', monospace; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.8rem; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.75);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-num { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 4rem; line-height: 0.85;
  color: #fff; text-shadow: 0 6px 18px rgba(0,0,0,.6); -webkit-text-stroke: 2px rgba(0,0,0,.3); }
.obs-num .accent { color: var(--accent); }
.pv-sub { margin: 0.7rem 0 0.2rem; }
.cnt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.6rem; }
.cnt-item { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; }
.cnt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.cnt-name { font-weight: 700; font-size: 0.95rem; }
.cnt-count { font-family: 'Geist Mono', monospace; font-size: 1.2rem; font-weight: 800; color: var(--accent); }
.cnt-cmds { margin: 0.2rem 0; }
.cnt-out { background: rgba(0,0,0,0.25); border-radius: var(--radius-xs); padding: 0.4rem 0.6rem; margin: 0.4rem 0; white-space: pre-wrap; }
.cnt-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cnt-actions { gap: 0.3rem; margin-top: 0.4rem; }
.cnt-actions .btn { font-size: 0.7rem; padding: 0.22rem 0.5rem; }
.cnt-out { font-size: 0.78rem; padding: 0.3rem 0.5rem; margin: 0.35rem 0; }
.cnt-obs-url { font-size: 0.66rem; }
.help-list { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.6rem; }
.help-row { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(232,232,232,.06); }
.help-cmd { font-family: 'Geist Mono', monospace; color: var(--accent); white-space: nowrap; min-width: 12rem; }
.help-desc { color: var(--muted); font-size: 0.9rem; }
.cnt-count { cursor: pointer; }
/* Counter -> OBS-Overlay-Link */
.cnt-obs { margin-top: 0.55rem; border-top: 1px solid rgba(232,232,232,.08); padding-top: 0.5rem; }
.cnt-obs-row { display: flex; gap: 0.4rem; margin-top: 0.25rem; }
.cnt-obs-url { flex: 1; min-width: 0; font-size: 0.72rem; padding: 0.35rem 0.5rem; background: rgba(0,0,0,.3);
  border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--bone); }
.cnt-copy { font-size: 0.75rem; padding: 0.3rem 0.6rem; white-space: nowrap; }
.cmd-off { opacity: 0.5; }

/* ---- Leveling / Bestenliste ---- */
.lvl-state { margin-bottom: 0.8rem; font-size: 0.85rem; }
.lvl-on { color: var(--labor); font-weight: 600; }
.lvl-off { color: var(--muted); }
.lvl-board { display: flex; flex-direction: column; gap: 0.3rem; }
/* Bestenliste in eigenem Scrollfeld → die Einstellungen darunter bleiben sichtbar */
.lvl-scroll { max-height: 52vh; overflow-y: auto; }
.lvl-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); background: var(--void); border: 1px solid var(--line); }
.lvl-row.top3 { border-color: var(--accent); }
.lvl-pos { width: 1.8rem; text-align: center; font-size: 1.05rem; }
.lvl-rank { font-family: 'Geist Mono', monospace; font-weight: 700; color: var(--muted); font-size: 0.9rem; }
.lvl-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl-lvl { font-family: 'Geist Mono', monospace; font-weight: 700; color: var(--accent); }
.lvl-xp { font-size: 0.8rem; min-width: 5rem; text-align: right; }
/* ---- Benachrichtigungen ---- */
.notify-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.notify-card h2 { margin: 0; }
/* Quellen-Konfig (Live-Ticker · YouTube · Homepage) als 2-Spalten-Grid — je Card 1/2, 2 nebeneinander, Reihenfolge bleibt. */
.ui2 #notify-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: start; max-width: none; }
.ui2 #notify-config > .acc-item { margin: 0; }
@media (max-width: 760px) { .ui2 #notify-config { grid-template-columns: 1fr; } }
/* Grundeinstellungen: 4 Karten als 2x2-Raster (Branding | Bot · Bot-Zugriff | Erst-Einrichtung).
   #view-settings-gescopet + ID-Spezifitaet, um das generische .ui2 .settings-cards (3/4/5-Raster) zu schlagen. */
#view-settings .settings-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: start; }
#view-settings .settings-cards > .panel { margin: 0; }
@media (max-width: 760px) { #view-settings .settings-cards { grid-template-columns: 1fr; } }
.notify-head { display: flex; align-items: center; justify-content: space-between; }

/* ---- Konto & Lizenz ---- */
.xsmall { font-size: 0.72rem; }
.account-box { display: flex; flex-direction: column; gap: 0.7rem; }
.acc-id { display: flex; align-items: center; gap: 0.7rem; }
.acc-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--void); }
.acc-who { font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tier-badge { font-family: 'Geist Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem; border-radius: 999px; text-transform: uppercase; }
.tier-badge.sup { background: var(--trail); color: #1b1b1b; }
.tier-badge.lite { background: var(--line); color: var(--muted); }
.lic-redeem { display: flex; flex-direction: column; gap: 0.5rem; background: rgba(0,0,0,.2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem; }
.lic-agb { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.85rem; cursor: pointer; }
.lic-agb input { width: auto; margin-top: 0.16rem; flex: 0 0 auto; } /* sonst greift global input{width:100%} -> Checkbox gestreckt/„buggy" */
.lic-agb a { color: var(--accent); }
.lic-have { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.lic-code { font-family: 'Geist Mono', monospace; color: var(--accent); background: rgba(0,0,0,.3);
  padding: 0.15rem 0.5rem; border-radius: var(--radius-xs); letter-spacing: 0.05em; }
.acc-sig { margin: 0; }
.acc-donate { display: inline-block; margin-top: 0.7rem; padding: 0.35rem 0.85rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 0.78rem; color: var(--accent); text-decoration: none; opacity: 0.82; transition: opacity 0.15s, border-color 0.15s; }
.acc-donate:hover { opacity: 1; border-color: var(--accent); }
/* Konto-Sektor „Erworbene Gegenstände" — Overlays / Sticker / Alerts (Operator: KW Main, Kunden: Platzhalter). */
.acc-owned { margin: 0.8rem 0 0.2rem; padding: 0.85rem 1rem; background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: var(--radius); }
.acc-owned-h { margin: 0 0 0.5rem; font-size: 0.95rem; }
.acc-owned .owned-cat { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid rgba(255,255,255,.06); flex-wrap: wrap; }
.acc-owned .owned-cat:first-of-type { border-top: 0; }
.acc-owned .owned-label { flex: 0 0 6.5rem; font-weight: 700; font-size: 0.85rem; color: var(--bone); }
.acc-owned .owned-items { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.acc-owned .owned-chip { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--maritime); color: var(--bone); font-size: 0.8rem; font-weight: 700; }
.acc-owned .owned-empty { font-size: 0.8rem; color: var(--muted); opacity: 0.85; }
.acc-owned .owned-set-list { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 0; }
/* Erworbene Gegenstaende: lange Overlay-Liste in eine scrollbare Box (Seite sonst ewig lang). Nur diese Liste, nicht die kurze Add-ons-Liste. */
.acc-owned .owned-set-list.owned-scroll { max-height: 380px; overflow-y: auto; padding-right: .35rem; }
.acc-owned .owned-set { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(0,0,0,.18); flex-wrap: wrap; }
.acc-owned .owned-set.active { border-color: var(--maritime); }
.acc-owned .owned-set-name { font-weight: 700; font-size: 0.85rem; }
.acc-owned .owned-badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--maritime); }
/* „Quellen anzeigen"-Dialog (OBS-Links je Ebene + umschaltbare Hauptquelle). */
.owned-src-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: 1rem; }
.owned-src-card { background: var(--void-2, #15171b); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; max-width: 640px; width: 100%; max-height: 85vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.owned-src-card h3 { margin: 0 0 0.6rem; }
.owned-src-lbl { flex: 0 0 6.5rem; font-size: 0.76rem; font-weight: 700; color: var(--bone); }
/* SUPPORTER-Status-Banner (prominent) + maskierte Lizenzcodes */
.sup-banner { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0.2rem 0 0.5rem; padding: 0.85rem 1rem;
  background: rgba(217,119,6,0.08); border: 1px solid var(--trail); border-left: 3px solid var(--trail); border-radius: var(--radius); }
.sup-banner .sb-ico { font-size: 1.35rem; line-height: 1.25; color: var(--trail); flex-shrink: 0; }
.sup-banner .sb-body { min-width: 0; }
.sup-banner .sb-body strong { display: block; margin-bottom: 0.2rem; color: var(--trail); font-size: 0.95rem; }
.sup-banner .sb-body p { margin: 0 0 0.45rem; font-size: 0.85rem; line-height: 1.5; color: var(--bone); opacity: 0.92; }
.sb-lic { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.82rem; }
.lic-codewrap { display: inline-flex; align-items: center; gap: 0.4rem; }
.lic-reveal { font-family: 'Geist Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.14rem 0.5rem; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--muted);
  cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.lic-reveal:hover { color: var(--accent); border-color: var(--accent); }
.sys-donate { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--void-2); border: 1px solid var(--line); border-left: 3px solid var(--trail); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin: 0.2rem 0 1.1rem; }
.sys-donate-txt { display: flex; flex-direction: column; gap: 0.15rem; }
.sys-donate-txt strong { font-size: 0.98rem; }
.sys-donate .btn { flex: 0 0 auto; }
.perm-card { background: var(--void); border: 1px solid var(--line); border-left: 3px solid var(--labor); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; margin-bottom: 0.5rem; }
.perm-card.bad { border-left-color: var(--accent); }
.perm-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.perm-feat { font-weight: 600; }
.perm-status { font-family: 'Geist Mono', monospace; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.perm-card.ok .perm-status { color: var(--labor); }
.perm-card.bad .perm-status { color: var(--accent); }
.perm-perms { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.perm-pill { font-size: 0.74rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--void-2); border: 1px solid var(--line); }
.perm-pill.ok { color: var(--labor); }
.perm-pill.bad { color: var(--accent); border-color: var(--accent); }
.set-autosave { margin: 0.6rem 0 0; transition: color 0.15s; }
.set-autosave.ok { color: var(--labor); }
.set-autosave.err { color: var(--accent); }
.drops-search-row { display: flex; gap: 0.5rem; align-items: center; }
.drops-search-row input { flex: 1; }
.drops-search-row .btn { flex: 0 0 auto; }
.view-info-tip { position: fixed; z-index: 200; max-width: 320px; max-height: 50vh; overflow: auto; background: var(--void-2); border: 1px solid var(--line); border-left: 3px solid var(--maritime-lt); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; font-size: 0.82rem; line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,0.45); pointer-events: none; }
.view-info-tip strong { display: block; margin-bottom: 0.3rem; color: var(--bone); }
.drop-legend { margin-bottom: 0.7rem; }
.drop-game { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; }
.drop-game.has-drops { border-left: 3px solid var(--trail); }
.drop-game.notfound { opacity: 0.65; }
.drop-game-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.drop-game-name { font-weight: 700; }
.drop-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.drop-badge { font-family: 'Geist Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.18rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.drop-badge.live { background: var(--void-2); color: var(--muted); border: 1px solid var(--line); }
.drop-badge.drops { background: var(--trail); color: #1b1b1b; }
.drop-badge.nodrops { background: var(--void-2); color: var(--muted); border: 1px solid var(--line); }
.drop-streams { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.5rem; }
.drop-stream { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.22rem 0.5rem; border-radius: var(--radius-xs); text-decoration: none; color: var(--bone); font-size: 0.82rem; transition: background 0.12s; }
.drop-stream:hover { background: var(--void-2); }
.drop-stream-name { color: var(--maritime-lt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-stream-viewers { color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
/* Rechte-Zeile als Aktion: Button-Affordance statt nacktem Unterstrich (Vorbild .btn-invite) */
.feat-perms { cursor: pointer; border-radius: var(--radius-xs); padding: 0.15rem 0.35rem; margin: -0.15rem -0.35rem; transition: background 0.12s var(--ease), color 0.12s var(--ease); }
.feat-perms:hover { text-decoration: none; background: rgba(217, 118, 6, 0.12); color: var(--accent); }
.scene-switcher { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.scene-title { font-family: 'Geist Mono', monospace; font-size: 0.74rem; font-weight: 700; color: var(--muted); margin-right: 0.3rem; }
.scene-btn { font-weight: 600; font-size: 0.85rem; padding: 0.4rem 0.8rem; border-radius: var(--radius-sm); background: var(--void); border: 1px solid var(--line); color: var(--bone); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.scene-btn:hover { border-color: var(--maritime-lt); }
.scene-btn.active { background: var(--trail); color: #1b1b1b; border-color: var(--accent); }
/* Szenen-Umschaltung im Overlays-Cockpit als kleine Karten (schmale Variante zum BotDeck-Look). */
#scene-switcher-cockpit { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .55rem; }
#scene-switcher-cockpit .scene-title { display: none; }
/* BotDeck-Pad-Optik, aber dezenter: Gradient + leichter 3D-Druck + dünne LED-Leiste; aktiv = Maritime/Blau. */
#scene-switcher-cockpit .scene-btn { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 56px; padding: .6rem .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(0,0,0,.14) 72%); font-family: 'Big Shoulders Display', system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; line-height: 1.1; box-shadow: 0 2px 0 rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045); transition: transform .06s ease, box-shadow .1s, border-color .12s, background .12s; }
#scene-switcher-cockpit .scene-btn::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: var(--radius-xs); background: var(--accent); opacity: .16; transition: opacity .15s, box-shadow .15s; }
#scene-switcher-cockpit .scene-btn:hover { border-color: var(--ash, #6b7280); }
#scene-switcher-cockpit .scene-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 2px 5px rgba(0,0,0,.4); }
#scene-switcher-cockpit .scene-btn.active { border-color: var(--maritime, #004272); background: linear-gradient(180deg, #15242f 0%, #112030 72%); }
#scene-switcher-cockpit .scene-btn.active::before { opacity: 1; background: #3f8fd1; box-shadow: 0 0 8px rgba(63,143,209,.7); }
/* Custom-Szenen (Owner 2026-06-28): "+"-Pad zum Anlegen + ⋯-Knopf (umbenennen/loeschen) auf eigenen Szenen. */
#scene-switcher-cockpit .scene-btn.scene-add { font-size: 1.9rem; font-weight: 400; color: var(--muted); border-style: dashed; background: rgba(255,255,255,.02); }
#scene-switcher-cockpit .scene-btn.scene-add:hover { color: var(--accent); border-color: var(--accent); }
#scene-switcher-cockpit .scene-btn.scene-add::before { display: none; }
.scene-btn.custom .scene-edit, .ovb-scene-tab.custom .scene-edit { position: absolute; top: 2px; right: 5px; font-size: .95rem; opacity: .5; line-height: 1; padding: 1px 3px; border-radius: var(--radius-xs); cursor: pointer; }
.scene-btn.custom .scene-edit:hover, .ovb-scene-tab.custom .scene-edit:hover { opacity: 1; color: var(--accent); background: rgba(0,0,0,.35); }
/* Builder-Reiter: "+"-Reiter im selben Look (die Tabs erben sonst die Cockpit-Pad-Optik). */
.ui2 .ovb-scene-tab.ovb-scene-add { font-size: 1.9rem; font-weight: 400; color: var(--muted); border-style: dashed; background: rgba(255,255,255,.02); }
.ui2 .ovb-scene-tab.ovb-scene-add:hover { color: var(--accent); border-color: var(--accent); }
.ui2 .ovb-scene-tab.ovb-scene-add::before { display: none; }
.upgrade-price { font-family: 'Geist Mono', monospace; font-weight: 700; color: var(--accent); margin: 0.2rem 0 0.4rem; }
.codes-box { margin-top: 0.4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; }
.codes-box summary { cursor: pointer; font-weight: 600; }
.codes-table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.8rem; }
.codes-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--line); }
.codes-table td { padding: 0.3rem 0.4rem; border-bottom: 1px solid rgba(232,232,232,.06); }
.codes-table tr.used { opacity: 0.65; }
.codes-table code { color: var(--accent); }

/* ---- Changelog / Patchnotes ---- */
.changelog-box { display: flex; flex-direction: column; gap: 0.9rem; max-height: 460px; overflow-y: auto; padding-right: 0.4rem; scrollbar-width: thin; }
.cl-current { margin: 0 0 0.2rem; font-size: 0.82rem; color: var(--muted); }
.cl-current b { color: var(--accent); font-family: 'Geist Mono', monospace; }
.cl-ver { border-left: 2px solid var(--line); padding: 0.1rem 0 0.1rem 0.85rem; }
.cl-ver.latest { border-left-color: var(--accent); }
.cl-vhead { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.cl-vnum { font-family: 'Geist Mono', monospace; font-weight: 700; color: var(--accent); }
.cl-vtitle { font-weight: 700; }
.cl-vdate { font-size: 0.74rem; margin-left: auto; }
.cl-badge-new { background: var(--labor); color: #1b1b1b; font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.4rem; border-radius: 999px; }
.cl-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.cl-changes li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.86rem; line-height: 1.4; }
.cl-tag { flex-shrink: 0; font-family: 'Geist Mono', monospace; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.05em; padding: 0.12rem 0.4rem; border-radius: var(--radius-xs); margin-top: 0.05rem; }
.cl-tag.cl-new { background: rgba(110,231,183,.18); color: var(--labor); }
.cl-tag.cl-improved { background: rgba(74,144,200,.2); color: var(--maritime-lt); }
.cl-tag.cl-fixed { background: rgba(217,119,6,.2); color: var(--accent); }

/* ---- Live-Giveaway ---- */
.ga-live { border: 1px solid var(--trail); margin-bottom: 1.25rem; }
.ga-live-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.ga-live-head h2 { margin: 0; }
.ga-live-status { font-family: 'Geist Mono', monospace; font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; }
.ga-live-status.off { background: var(--line); color: var(--muted); }
.ga-live-status.on { background: var(--trail); color: #1b1b1b; }
.ga-live-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ga-live-count { font-family: 'Geist Mono', monospace; color: var(--accent); font-weight: 700; }
.ga-live-draw { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
/* Kontextabhängige Optionen der Ziehungs-Show (Ring-Design / Namens-Listen-Anordnung + OBS-Quelle).
   Nur die zur gewählten Ziehungsart wird per .hidden ein-/ausgeblendet (gaDrawModeSync). */
.ga-draw-ctx { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.7rem; }
.set-field.inline { flex-direction: row; align-items: center; gap: 0.5rem; }
.set-field.inline input { width: 5rem; }
.ga-live-winners { margin-top: 0.7rem; }
.ga-live-win-head { font-weight: 700; color: var(--accent); margin-bottom: 0.3rem; }
.ga-live-win { font-size: 1.05rem; font-weight: 700; padding: 0.15rem 0; }
.acc-desc { display: block; color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-caret { color: var(--trail); transition: transform 0.2s; cursor: pointer; user-select: none; }
.acc-caret.open { transform: rotate(180deg); }
.acc-body { padding: 0.5rem 0.9rem 0.9rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.6rem; }
.acc-body.hidden { display: none; }
.set-field { display: flex; flex-direction: column; gap: 0.25rem; }
.set-field span { font-size: 0.78rem; color: var(--muted); }
.set-field input, .set-field select, .set-field textarea { margin: 0; }
.set-info, .set-lock { font-size: 0.85rem; margin: 0; color: var(--muted); }
.set-lock { color: var(--accent); }
.set-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.set-check input { width: auto; margin: 0; }
.range-in { width: 100%; accent-color: var(--accent); margin: 0; cursor: pointer; }
.range-val { color: var(--accent); font-family: 'Geist Mono', monospace; font-size: 0.8rem; }
.save-set { align-self: flex-start; margin-top: 0.3rem; }

/* Hilfe-Tooltip (? neben Feld-Titeln) */
.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  cursor: help;
  position: relative;
  vertical-align: middle;
}
.help:hover, .help:focus-visible { border-color: var(--maritime-lt); color: var(--maritime-lt); }
.help:hover::after, .help:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--void);
  border: 1px solid var(--maritime-lt);
  border-radius: var(--radius-xs);
  padding: 0.45rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--bone);
  width: max-content;
  max-width: 230px;
  white-space: normal;
  line-height: 1.4;
  text-align: left;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ===== Modal (Bug-Report) ===== */
.bug-btn { color: var(--accent); }
/* Bug-Button feste Breite: rotiert „Bug" / „Vorschlag" / „Feedback" — min-width am laengsten
   Wort („Vorschlag" inkl. 🐞-Icon), damit der Button beim Wechsel nicht springt. */
#bug-btn { min-width: 9.5rem; text-align: center; }
.bug-debug { margin: 0.7rem 0 0.2rem; }
.bug-echo { margin: 0 0 0.5rem; }
.bug-echo.on { color: var(--labor); }
.bug-hint { font-size: 0.72rem; line-height: 1.5; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.privacy-link { color: var(--muted); font-size: 0.78rem; }
.account-btn { color: var(--maritime-lt); }
.acc-sec { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.acc-sec:last-of-type { border-bottom: none; }
.acc-sec h3 { font-size: 0.9rem; margin: 0 0 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}
.modal.hidden { display: none; }
.modal-card {
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  width: 100%;
  max-width: 440px;
  /* Hoehen-Klemme wie bei .cnt-modal-card: ohne sie zentriert Flex eine zu hohe Karte
     (Bug-Melden auf kleinen/quer gehaltenen Handys) MITTIG — Kopf und Senden-Knopf ragen
     dann beide unerreichbar aus dem Bild. */
  max-height: 90vh;
  overflow: auto;
}
.modal-card h2 {
  font-family: 'Big Shoulders Display', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
}

/* Erst-Einrichtung */
.setup-opts { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.8rem 0; }
.setup-opt {
  text-align: left;
  background: var(--void);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.setup-opt:hover { border-color: var(--accent); background: rgba(217, 118, 6, 0.1); }
.setup-open-btn { margin-bottom: 1rem; color: var(--accent); }
.setup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.setup-progress { font-family: 'Geist Mono', monospace; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.setup-nav { display: flex; justify-content: space-between; margin-top: 0.6rem; }
.setup-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; margin: 0.9rem 0; cursor: pointer; }
.setup-check input { width: auto; margin: 0; }
#setup-finish { width: 100%; }

/* ===== Give Away ===== */
.ga-end { max-width: 540px; }
/* Statische Block-Reihenfolge (kein JS-Umsortieren mehr):
   1) #ga-live volle Breite  2) .ga-grid „Setup | Vorschau"  3) .ga-wheel-block volle Breite. */
.ga-live-block { margin-bottom: 1.25rem; }
.ga-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.ga-setup { grid-column: 1; grid-row: 1; }
.ga-preview { grid-column: 2; grid-row: 1; }
.ga-setup-note { margin: -0.2rem 0 0.8rem; }
/* Glücksrad-Links: OBS-Teil + Discord-Teil im selben Block, leicht separiert. */
.ga-wheel-block { margin-bottom: 1.25rem; }
.ga-wheel-sub { margin: 0 0 0.5rem; font-size: 0.98rem; }
.ga-wheel-part-sep { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
/* wheelview.js rendert seine Karte in #ga-wheelview-host — dort als flache Sub-Sektion
   (ohne eigene Panel-Box, da der umgebende ga-wheel-block schon die Box ist). */
#ga-wheelview-host > #wv-card { border: 0; background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
#ga-wheelview-host > #wv-card .panel-head { margin-bottom: 0.5rem; }
@media (max-width: 860px) {
  .ga-grid { grid-template-columns: 1fr; }
  .ga-setup, .ga-preview { grid-column: 1; grid-row: auto; }
}
.ga-pv-block { margin-bottom: 0.7rem; }
.ga-pv-label { display: block; font-family: 'Geist Mono', monospace; font-size: 0.68rem; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.ga-pv-msg { background: var(--void); border: 1px solid var(--line); border-left: 3px solid var(--maritime-lt); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-size: 0.85rem; line-height: 1.45; white-space: pre-line; min-height: 1.4rem; }
.ga-platforms { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.ga-plat { display: flex; align-items: center; gap: 0.4rem; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; cursor: pointer; font-size: 0.9rem; }
.ga-plat input { width: auto; margin: 0; }
.ga-start { width: 100%; margin-top: 0.7rem; font-size: 1.05rem; padding: 0.85rem; }
.dur-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.dur-btn { background: var(--void); color: var(--bone); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer; font-size: 0.85rem; font-family: 'Geist Mono', monospace; }
.dur-btn.active { border-color: var(--accent); background: rgba(217, 118, 6, 0.12); color: var(--accent); }
.dur-custom { display: flex; align-items: center; gap: 0.5rem; }
.dur-custom input { width: 100px; margin: 0; }
.ga-timer-opts { margin: 0.3rem 0 0.6rem; padding: 0.7rem 0.8rem; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: opacity 0.2s; }
.ga-timer-opts.off { opacity: 0.4; pointer-events: none; }
.rem-msg { margin: 0.2rem 0 0.7rem; transition: opacity 0.2s; }
.rem-msg.off { opacity: 0.4; pointer-events: none; }
.rem-msg textarea { width: 100%; }
.set-field.off { opacity: 0.4; pointer-events: none; transition: opacity 0.2s; }

.ga-live { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 2.5rem 1rem; text-align: center; }
.ga-timer {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, 18vw, 9rem);
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.ga-timer.dramatic { color: var(--tattoo); animation: ga-pulse 0.55s infinite; }
@keyframes ga-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.09); opacity: 0.65; } }
/* Live-Giveaway-Timer: kompakter als der grosse Countdown + immer sichtbar (kein Sprung beim Start). */
#ga-live-timer.ga-timer-live { font-size: clamp(1.8rem, 6vw, 2.8rem); }
.ga-count { font-family: 'Geist Mono', monospace; font-size: 1.3rem; color: var(--accent); }
.ga-count span { font-weight: 700; }

.ga-end { text-align: center; }
.ga-datastatus { margin: 0.8rem 0 1rem; text-align: left; display: inline-block; }
.ga-ds-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; padding: 0.2rem 0; }
.ga-draw { font-size: 1.15rem; padding: 0.9rem 1.6rem; }
.ga-roulette { margin: 1.5rem auto 0; padding: 1.5rem 2rem; background: var(--void); border: 2px solid var(--trail); border-radius: var(--radius); display: inline-block; min-width: 260px; }
.ga-roulette-name { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: clamp(1.8rem, 6vw, 3rem); color: var(--accent); }
.ga-winner { margin-top: 1.2rem; font-size: 1.4rem; }
.ga-winner strong { color: var(--labor); }
.ga-wheel { display: block; margin: 1rem auto; max-width: 100%; } /* transparenter BG → OBS-Browser-Source tauglich */
.ga-winner-verify { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.5; }
.ga-winner-verify a { color: var(--accent); font-weight: 600; }
.ga-draw-opt { margin-top: 1rem; border-top: 1px dashed var(--line); padding-top: 0.85rem; }
.draw-opt-btn { background: var(--void); color: var(--bone); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.82rem; font-family: 'Geist Mono', monospace; display: inline-flex; align-items: center; gap: 0.35rem; }
.draw-opt-btn.active { border-color: var(--accent); background: rgba(217, 118, 6, 0.12); color: var(--accent); }
.pro-tag { font-size: 0.6rem; font-weight: 700; background: var(--trail); color: var(--void); border-radius: var(--radius-xs); padding: 0.05rem 0.32rem; letter-spacing: 0.05em; }
/* (Login-Buttons/Separator sind jetzt im LOGIN-Block oben definiert) */
.ga-stats { display: flex; gap: 0.8rem; margin: 0.8rem 0 0.4rem; }
.ga-stat { flex: 1; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.5rem; text-align: center; }
.ga-stat-num { display: block; font-family: 'Geist Mono', monospace; font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1; }
.ga-stat-lbl { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.35rem; }
/* PRO-Gating: Give Away in LITE gesperrt */
.nav-item.locked { opacity: 0.5; }
.nav-item.locked .nav-ico { filter: grayscale(1); }
.nav-lock { margin-left: auto; font-size: 0.78rem; }
.ga-quick.locked { opacity: 0.55; position: relative; }
.ga-quick.locked::after { content: '🔒 Premium Member'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-weight: 700; color: var(--accent); background: rgba(0,0,0,0.4); border-radius: inherit; pointer-events: none; }
#pro-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--void); border: 1px solid var(--trail); color: var(--bone); padding: 0.7rem 1.1rem; border-radius: var(--radius); font-size: 0.9rem; box-shadow: 0 8px 26px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 9500; }
#pro-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== OBS Overlay · Scene-Layout-Editor ===== */
.stage-link-card { margin-bottom: 1rem; }
.stage-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; } /* minmax: Canvas-Spalte darf schrumpfen (REGEL 1) */
@media (max-width: 980px) { .stage-editor { grid-template-columns: 1fr; } }
.stage-canvas-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  /* Hoehe deckeln: auf breiten/Ultrawide-Monitoren wuerde die 1fr-Spalte die 16:9-Buehne zu hoch machen.
     max-height = grobes Safety-Net (falls JS nicht laeuft); die exakte Einpassung macht stgScale() in app.js
     (misst die echte Oberkante + Spaltenbreite und skaliert in Breite UND Hoehe). margin-inline zentriert die schmalere Buehne. */
  max-height: calc(100vh - 200px); margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    linear-gradient(45deg, rgba(232,232,232,0.06) 25%, transparent 25%, transparent 75%, rgba(232,232,232,0.06) 75%) 0 0 / 40px 40px,
    linear-gradient(45deg, rgba(232,232,232,0.06) 25%, transparent 25%, transparent 75%, rgba(232,232,232,0.06) 75%) 20px 20px / 40px 40px,
    var(--void);
}
.stage-canvas { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: top left; }
.sw { position: absolute; outline: 1px dashed rgba(232,232,232,0.3); }
.sw.sel { outline: 3px solid var(--trail); z-index: 5; }
.sw.off { opacity: 0.35; }
.sw iframe { width: 100%; height: 100%; border: 0; background: transparent; pointer-events: none; }
.sw-drag { position: absolute; inset: 0; cursor: move; }
.sw-eye { position: absolute; top: 4px; right: 4px; z-index: 6; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm); background: rgba(0,0,0,0.6); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.85; transform: scale(var(--inv, 1)); transform-origin: top right; }
.sw-eye:hover { opacity: 1; background: var(--trail); }
.sw.off .sw-eye { background: var(--trail); opacity: 1; }
.sw.off iframe { opacity: 0.25; }
.stage-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: 0.95rem; text-align: center; padding: 1rem; }
.stage-side { display: flex; flex-direction: column; gap: 0.8rem; }
.stage-side .card { margin: 0; }
.stage-prop-h { font-family: 'Geist Mono', monospace; font-weight: 700; margin-bottom: 0.5rem; }
.stage-prop-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; }
.stage-prop-row label { width: 1.4rem; text-align: center; font-family: 'Geist Mono', monospace; color: var(--muted); flex: 0 0 auto; }
.stage-size-row { margin-top: 0.2rem; }
.stage-size-row label.stage-size-lbl { width: auto; min-width: 3.1rem; text-align: left; color: var(--bone); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.03em; }
.stage-prop-row input[type=range] { flex: 1 1 auto; min-width: 0; }
.stage-prop-row input[type=color] { width: 2.2rem; height: 1.7rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--void); cursor: pointer; }
.stage-prop-row .val { width: 3rem; text-align: right; font-family: 'Geist Mono', monospace; font-size: 0.8rem; color: var(--bone); flex: 0 0 auto; }
.stage-vis { margin: 0.5rem 0; }
.stage-del { width: 100%; margin-top: 0.4rem; }
.stage-save-btn { width: 100%; }

/* ===== Bot-Name (SUPPORTER-Feature) ===== */
.botname-card { position: relative; }
.botname-card.locked .botname-body { opacity: 0.45; pointer-events: none; filter: grayscale(0.3); }
.botname-lock { margin-top: 0.6rem; padding: 0.6rem 0.85rem; border: 1px dashed var(--trail); border-radius: var(--radius-sm); color: var(--bone); font-size: 0.85rem; background: rgba(217,118,6,0.08); }
.botname-upgrade { margin-top: 0.7rem; padding: 0.7rem 0.85rem; border: 1px solid var(--trail); border-radius: var(--radius-sm); background: rgba(217,118,6,0.08); }
.botname-upgrade p { margin: 0 0 0.5rem; }

/* ===== F1 · Sidebar-Scroll-Hinweis (Fade an der Kante = es geht weiter) ===== */
.sidebar.scroll-more .nav { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); }
.sidebar.scroll-up.scroll-more .nav { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 30px), transparent); }
.sidebar.scroll-up:not(.scroll-more) .nav { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px); mask-image: linear-gradient(to bottom, transparent, #000 22px); }

/* ===== F2 · Bug/Vorschlag/Feedback-Typ ===== */
.bug-types { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.bug-type { flex: 1; padding: 0.45rem 0.3rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--void); color: var(--bone); font-size: 0.82rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.bug-type:hover { border-color: var(--accent); }
.bug-type.active { border-color: var(--accent); background: rgba(217,118,6,0.15); color: var(--accent); font-weight: 700; }
.bug-buildup-note { margin: 0.2rem 0 0.6rem; line-height: 1.4; }

/* ===== F3 · Bot-Zugriff (Channels) ===== */
.ba-summary { color: var(--accent); font-size: 0.82rem; margin: 0 0 0.6rem; }
.ba-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; background: var(--void); }
.ba-row.ba-warn { border-color: var(--accent); }
.ba-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.ba-label { font-weight: 700; font-size: 0.88rem; }
.ba-ch { font-family: 'Geist Mono', monospace; font-size: 0.8rem; color: var(--maritime-lt); }
.ba-perms { display: block; margin-top: 0.3rem; font-family: 'Geist Mono', monospace; font-size: 0.76rem; color: var(--muted); }
.ba-ok { color: var(--labor, #6ee7b7); font-weight: 700; }
.ba-no { color: var(--accent); font-weight: 700; }

/* ===== F4 · Build it up ===== */
.buildup-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.buildup-filter { display: flex; gap: 0.3rem; margin-left: auto; }
.bf-chip { padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--void); color: var(--muted); font-size: 0.78rem; cursor: pointer; }
.bf-chip:hover { border-color: var(--accent); }
.bf-chip.active { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.bu-type { font-family: 'Geist Mono', monospace; font-size: 0.78rem; font-weight: 700; color: var(--bone); margin-right: 0.4rem; }
.ga-cond { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; }
.ga-cond p { margin: 0.25rem 0; }
.ga-file { display: inline-block; margin: 0 0.5rem 0.6rem 0; }
.ga-announce { margin-top: 1.2rem; font-size: 1.05rem; }
.ga-chat { max-width: 560px; margin-top: 1.25rem; }
.ga-chatlog { display: flex; flex-direction: column; gap: 0.5rem; max-height: 340px; overflow-y: auto; }
.ga-chatmsg { background: var(--void); border: 1px solid var(--line); border-left: 3px solid var(--maritime-lt); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-size: 0.88rem; line-height: 1.45; display: flex; gap: 0.5rem; }
.ga-chat-plat { flex-shrink: 0; }
.ga-chat-body { white-space: normal; }
.ga-quick-status { font-family: 'Geist Mono', monospace; font-size: 0.95rem; margin-bottom: 0.5rem; }
.ga-q-live { color: var(--tattoo); font-weight: 700; }
.ga-q-ready { color: var(--labor); }
.ga-quick-info { line-height: 1.6; margin-bottom: 0.9rem; }
.ga-quick > .btn-primary { width: 100%; }

/* ===== Template-Editor (Vorlagen mit Tokens) ===== */
.tpl-tokens { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.tpl-tok {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  background: var(--void);
  color: var(--maritime-lt);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.tpl-tok:hover { border-color: var(--maritime-lt); filter: brightness(1.2); }
/* Lock/Edit: 2 quadratische Kacheln links neben dem Textfeld (feste Höhe, wachsen NICHT mit) */
.tpl-editrow { display: flex; gap: 0.5rem; align-items: flex-start; }
.tpl-lockcol { display: flex; flex-direction: column; gap: 0.4rem; flex: 0 0 auto; }
.lock-btn {
  width: 2.2rem; height: 2.2rem; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--void); color: var(--bone);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1rem; line-height: 1; cursor: pointer; position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.lock-btn:hover { border-color: var(--accent); }
.tpl-lockcol.unlocked .lock-btn { border-color: var(--accent); }
.tpl-lockcol.unlocked .tpl-edit { background: rgba(217, 118, 6, 0.15); color: var(--accent); }
.lock-btn:hover::after {
  content: attr(data-tip);
  position: absolute; top: 112%; left: 0;
  background: var(--void); border: 1px solid var(--trail); border-radius: var(--radius-xs);
  padding: 0.45rem 0.6rem; font-size: 0.72rem; color: var(--bone);
  width: max-content; max-width: 200px; white-space: normal; line-height: 1.4;
  text-align: left; z-index: 60; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.tpl-editrow textarea { flex: 1 1 auto; width: auto; margin: 0; }
.tpl-area { flex: 1 1 auto; width: auto; font-family: 'Geist Mono', monospace; font-size: 0.82rem; margin: 0; }
.tpl-area[readonly] { opacity: 0.7; }
.tpl-hint { font-size: 0.72rem; color: var(--muted); margin: 0.3rem 0 0; line-height: 1.4; }

/* Vorschau */
.tpl-preview {
  margin-top: 0.5rem;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
}
.tpl-preview-label {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.tpl-preview-body { font-size: 0.88rem; line-height: 1.5; }
.tpl-preview-body .ph { color: var(--accent); font-style: italic; opacity: 0.9; }
.tpl-preview-body code { font-size: 0.85em; background: var(--void-2); padding: 0.05rem 0.3rem; border-radius: var(--radius-xs); }
.tpl-preview-body blockquote { border-left: 3px solid var(--line); margin: 0.2rem 0; padding-left: 0.6rem; color: var(--muted); }
.tpl-preview-body a { color: var(--maritime-lt); }

.foot {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 1.5rem;
  font-family: 'Geist Mono', monospace;
}

/* ===== Tickets & Community-Radar ===== */
.tk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .tk-grid { grid-template-columns: 1fr; } }
.row-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.hl-stats { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.hl-stat { flex: 1; min-width: 110px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.5rem; text-align: center; }
.hl-stat-num { display: block; font-family: 'Geist Mono', monospace; font-size: 1.5rem; font-weight: 800; color: var(--accent); line-height: 1; }
.hl-stat-lbl { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 0.35rem; }
.hl-hint { background: var(--void); border: 1px solid var(--line); border-left: 3px solid var(--labor); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.9rem; line-height: 1.5; }
.hl-hint strong { color: var(--bone); }
.tk-row { display: flex; align-items: center; gap: 0.6rem; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; margin-bottom: 0.4rem; }
.tk-num { color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.tk-cat { font-weight: 600; }
.tk-open { margin-left: auto; }
.tk-badge { flex: 0 0 auto; font-family: 'Geist Mono', monospace; font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-xs); border: 1px solid var(--line); }
.tk-badge.tk-open { color: var(--labor); border-color: var(--labor); margin-left: 0; }
.tk-badge.tk-claimed { color: var(--maritime-lt); border-color: var(--maritime-lt); }
.tk-badge.tk-closed { color: var(--muted); }
#view-tickets textarea, #view-health textarea { width: 100%; resize: vertical; }

/* ===== Umfragen / Geburtstage / Game-Server / FAQ ===== */
.btn-mini { padding: 0.2rem 0.5rem; font-size: 0.75rem; }
#view-polls textarea, #view-faq textarea { width: 100%; resize: vertical; }
.pl-card { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; margin-bottom: 0.7rem; }
.pl-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.pl-q { font-weight: 600; }
.pl-opt { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0; font-size: 0.85rem; }
.pl-opt-l { flex: 0 0 32%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bar { flex: 1; height: 8px; background: var(--line); border-radius: var(--radius-xs); overflow: hidden; }
.pl-bar > span { display: block; height: 100%; background: var(--trail); }
.pl-opt-c { flex: 0 0 auto; font-family: 'Geist Mono', monospace; font-size: 0.72rem; color: var(--muted); }
.pl-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.gm-row { display: flex; align-items: center; gap: 0.6rem; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin-bottom: 0.45rem; }
.gm-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.gm-dot.on { background: var(--labor); box-shadow: 0 0 7px rgba(110,231,183,.6); }
.gm-dot.off { background: var(--tattoo); }
.gm-info { display: flex; flex-direction: column; min-width: 0; }
.gm-label { font-weight: 600; }
.gm-stat { margin-left: auto; white-space: nowrap; }
.gm-host-row { display: flex; gap: 0.5rem; }
.gm-host-row .set-field:first-child { flex: 1; }
.fq-item { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; margin-bottom: 0.55rem; }
.fq-item.fq-off { opacity: 0.55; }
.fq-q { font-weight: 600; }
.fq-kw { margin: 0.2rem 0; }
.fq-a { color: var(--muted); margin-bottom: 0.4rem; white-space: pre-wrap; }
.faq-auto { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }

/* ===== Konto/Login: Security · 2FA · Upgrade · Recht ===== */
.legal-links { margin-top: 0.7rem; text-align: center; font-size: 0.7rem; color: var(--muted); }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--accent); text-decoration: underline; }
.legal-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
.sec-h { font-size: 0.95rem; margin: 0.2rem 0 0.5rem; }
.sec-hr { border: none; border-top: 1px solid var(--line); margin: 1rem 0; }
.sec-on { color: var(--labor); }
.twofa-enroll { background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; margin-top: 0.6rem; }
.twofa-secret { display: block; font-family: 'Geist Mono', monospace; font-size: 1.05rem; letter-spacing: 0.12em; background: var(--void); border: 1px dashed var(--trail); color: var(--bone); padding: 0.55rem 0.7rem; border-radius: var(--radius-xs); margin: 0.4rem 0; text-align: center; user-select: all; }
.upgrade-box { background: var(--void); border: 1px solid var(--trail); border-radius: var(--radius); padding: 0.7rem 0.85rem; margin: 0.7rem 0; }
.upgrade-h { font-family: 'Geist Mono', monospace; font-weight: 700; color: var(--accent); font-size: 0.85rem; letter-spacing: 0.04em; }
.upgrade-list { list-style: none; padding: 0; margin: 0.45rem 0 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
/* Zwei BEZAHL-Tarife nebeneinander (No-Streamer vs Full-Package) — Tokens/Font-Lock wie bestehende .plan/.upgrade-* */
.tier-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin: 0.55rem 0 0.5rem; }
@media (max-width: 560px) { .tier-pricing { grid-template-columns: 1fr; } }
.tp-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.75rem; background: var(--void-2); display: flex; flex-direction: column; gap: 0.4rem; }
.tp-card-full { border-color: var(--accent); background: rgba(217, 118, 6, 0.07); }
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tp-name { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--bone); letter-spacing: 0.01em; }
.tp-flag { font-family: 'Geist Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-xs); padding: 0.05rem 0.32rem; }
.tp-tag { margin: -0.15rem 0 0.1rem; }
.tp-price { display: flex; align-items: baseline; gap: 0.3rem; }
.tp-amount { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.55rem; line-height: 1.05; color: var(--bone); }
.tp-per { font-size: 0.78rem; color: var(--muted); }
.tp-price-tbd { font-family: 'Geist Mono', monospace; font-size: 0.8rem; color: var(--muted); }
.tp-price-alt { font-size: 0.74rem; color: var(--bone); margin-top: -0.1rem; }
.tp-feats { list-style: none; padding: 0; margin: 0.1rem 0 0.2rem; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; line-height: 1.35; }
.tp-feats li { color: var(--bone); }
.tp-feat-extra { color: var(--accent); font-weight: 600; }
.tp-cta { margin-top: auto; align-self: flex-start; }
.tp-note { margin: 0.1rem 0 0.2rem; }
.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.82rem; }
/* Recht-Modal-Inhalt (HTML) */
.doc-modal-body h3 { font-size: 1rem; margin: 1rem 0 0.35rem; color: var(--bone); }
.doc-modal-body p { margin: 0.4rem 0; line-height: 1.55; }
.doc-modal-body ul { margin: 0.4rem 0 0.4rem 1.1rem; line-height: 1.5; }
.doc-modal-body a { color: var(--maritime-lt); }
.doc-modal-body .legal-note { background: rgba(217,118,6,0.12); border-left: 3px solid var(--trail); padding: 0.5rem 0.7rem; border-radius: var(--radius-xs); font-size: 0.85rem; }
#login-2fa-field input { letter-spacing: 0.3em; text-align: center; font-family: 'Geist Mono', monospace; }

/* ===== Timer-Card / Goal / Poll-Overlay ===== */
.tmr-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 0.4rem; }
.tmr-row .set-field { flex: 1; min-width: 130px; }
.tmr-row .set-field.inline { flex: 0 0 auto; min-width: 90px; }
.tmr-state { margin-left: auto; font-family: 'Geist Mono', monospace; }
.pl-overlay { margin-bottom: 0.7rem; }

/* ===== Befehls-Kategorien (Admin / Mods / Community) ===== */
.help-cat { margin-bottom: 0.9rem; }
.help-cat-h { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--line); margin-bottom: 0.3rem; }
.help-cat-admin { color: var(--tattoo); }
.help-cat-mods { color: var(--maritime-lt); }
.help-cat-community { color: var(--labor); }
.cmd-tier { font-family: 'Geist Mono', monospace; font-size: 0.6rem; font-weight: 700; padding: 0.08rem 0.4rem; border-radius: var(--radius-xs); border: 1px solid var(--line); white-space: nowrap; }
.cmd-tier-admin { color: var(--tattoo); border-color: var(--tattoo); }
.cmd-tier-mods { color: var(--maritime-lt); border-color: var(--maritime-lt); }
.cmd-tier-community { color: var(--labor); border-color: var(--labor); }

/* ===== Bug-Board ===== */
.bb-badge { font-family: 'Geist Mono', monospace; font-size: 0.62rem; font-weight: 700; padding: 0.08rem 0.4rem; border-radius: var(--radius-xs); border: 1px solid var(--line); }
.bb-badge.bb-open { color: var(--muted); }
.bb-badge.bb-conf { color: var(--accent); border-color: var(--accent); }
.bb-badge.bb-done { color: var(--labor); border-color: var(--labor); }
.bb-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.bb-confirm b { color: var(--accent); }
.bb-confirm.confirmed { opacity: 0.6; }
.bb-notes { margin: 0.45rem 0 0.2rem; display: flex; flex-direction: column; gap: 0.25rem; }
.bb-note { background: var(--void); border: 1px solid var(--line); border-left: 3px solid var(--maritime-lt); border-radius: var(--radius-xs); padding: 0.3rem 0.55rem; font-size: 0.82rem; }
.bb-note-form { display: flex; gap: 0.4rem; margin-top: 0.45rem; }
.bb-note-form input { flex: 1; }

/* ===== Operator-DEV-Childtheme (kleiner Skin, NUR Operator im _DEV-Channel) ===== */
html[data-devtheme] body { box-shadow: inset 0 3px 0 0 var(--maritime-lt); }
#dev-badge {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 9998;
  font-family: 'Geist Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--maritime-lt); background: rgba(0,66,114,0.22); border: 1px solid var(--maritime-lt);
  border-radius: 999px; padding: 0.14rem 0.7rem; pointer-events: none;
}

/* ===== A11y: deutlich sichtbarer Tastatur-Fokus (Buttons/Links/Nav/Tabs/?-Hilfe) ===== */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== A11y: Bewegung reduzieren, wenn das Betriebssystem es verlangt ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RECHTES KONTEXT-PANEL (Drawer) — „Erweiterte Einstellungen"
   Flex-Sibling von .content im .app-Flexrow. Breite 0 → offen min(440px,92vw);
   der Content schrumpft weich mit. Inhalt behaelt volle Breite (min-width) und
   wird vom Drawer (overflow:hidden) sauber abgeschnitten -> kein Quetschen.
   ═══════════════════════════════════════════════════════════════════════ */
.drawer {
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  background: var(--void-2);
  border-left: 1px solid transparent;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer.open { width: min(440px, 92vw); border-left-color: var(--line); }
.drawer-head {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 1.05rem 1.1rem;
  border-bottom: 1px solid var(--line);
  min-width: min(440px, 92vw);
}
.drawer-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 1.2rem; color: var(--bone);
}
.drawer-x {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--void); border: 1px solid var(--line); color: var(--bone);
  font-size: 0.82rem; line-height: 1; transition: border-color 0.15s, color 0.15s;
}
.drawer-x:hover { border-color: var(--accent); color: var(--accent); }
.drawer-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 1.1rem 1.1rem 2rem;
  min-width: min(440px, 92vw);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.drawer-body::-webkit-scrollbar { width: 6px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-xs); }
.drawer-panel { display: none; }
.drawer-panel.active { display: block; }
/* Wiederverwendbar (Brief-Declutter): Einstellungs-Block liegt NICHT auf der Seite, nur im ⚙-Popup (Drawer).
   Auf der Seite versteckt; sichtbar erst, wenn openDrawerHost ihn in ein aktives Drawer-Panel schiebt. */
.drawer-hosted-config { display: none; }
.drawer-panel.active .drawer-hosted-config { display: flex; flex-direction: column; gap: 0.6rem; }
/* c-row-Kontrakt (Brief): Icon · Name · Meta · Status · ⚙ · Toggle — feste Reihenfolge.
   .nt-card IST die Zeile und hat die Reihenfolge bereits; hier nur per order abgesichert,
   damit kein Renderer abweichen kann. Kein display/flex-Eingriff -> kein Layout-Risiko. */
.ui2 .nt-card .nt-ico { order: 1; }
.ui2 .nt-card .nt-main { order: 2; }
.ui2 .nt-card .status-pill, .ui2 .nt-card .nt-status { order: 3; }
.ui2 .nt-card .nt-gear, .ui2 .nt-card .ovs-gear, .ui2 .nt-card [data-gear] { order: 4; }
.ui2 .nt-card .nt-toggle { order: 5; }
.settings-open-row { margin-top: 16px; }
.settings-open-btn { display: inline-flex; align-items: center; gap: 8px; }
/* Backdrop nur auf schmalen Screens (Drawer ist dort Overlay); Desktop = Push, kein Backdrop */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 60; }
@media (min-width: 901px) { .drawer-backdrop { display: none !important; } }
@media (max-width: 900px) {
  .drawer {
    position: fixed; top: 0; right: 0; z-index: 61;
    height: 100vh;
    height: 100dvh; /* dvh: auf iOS ragte das untere Drawer-Ende hinter die Browser-Leiste (100vh misst ohne sie) */
    width: min(440px, 92vw);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  }
  .drawer.open { transform: translateX(0); }
}
/* Sehr schmale Screens: Drawer = Vollbild-Overlay (kein Seiten-Split, deckt die ganze Breite) */
@media (max-width: 560px) {
  .drawer { width: 100vw; border-left: none; }
  .drawer.open { width: 100vw; }
  .drawer-head, .drawer-body { min-width: 100vw; }
}

/* Design-Umschalter (2 komplette Themes) */
.skin-toggle { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.skin-btn {
  flex: 1; min-width: 90px; cursor: pointer;
  background: var(--void); color: var(--bone);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; font-family: inherit; font-size: 0.85rem; font-weight: 600;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.skin-btn:hover { border-color: var(--accent); }
.skin-btn.active { border-color: var(--accent); background: rgba(217, 118, 6, 0.12); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════
   THEME „SOFT" — komplettes Alternativ-Design (data-skin="soft").
   Aendert Layout-Dichte, Rundungen, Flaechen (Schatten statt harter Linien),
   Typo-Charakter & Border-Behandlung. BEWUSST helligkeits-agnostisch:
   setzt NICHT --void/--void-2/--bone -> komponiert sauber mit data-theme
   (hell/grau/dunkel). „Studio" = Basis (:root), braucht keine Overrides.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-skin="studio"] { --radius: 0; --radius-lg: 0; --radius-sm: 0; --radius-xs: 0; } /* Edged — scharfe Console-Kanten (Prototyp) */
:root[data-skin="soft"] { --radius: 18px; --radius-lg: 24px; --radius-sm: 14px; --radius-xs: 10px; --line: rgba(255, 255, 255, 0.08); } /* Curved — runde Kacheln */
:root[data-skin="soft"][data-theme="light"] { --line: rgba(0, 0, 0, 0.09); }

:root[data-skin="soft"] .content { padding: 2rem 2.6rem; }
:root[data-skin="soft"] .card {
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.20);
  padding: 1.55rem 1.7rem;
}
:root[data-skin="soft"][data-theme="light"] .card { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07); }
/* weichere Karten-Ueberschrift: humanistisch statt condensed-uppercase, ohne harten Akzent-Balken */
:root[data-skin="soft"] .card h2 {
  font-family: 'Instrument Sans', sans-serif; font-weight: 700; text-transform: none;
  letter-spacing: 0; border-left: none; padding-left: 0; font-size: 1.18rem;
}
:root[data-skin="soft"] .view-title {
  font-family: 'Instrument Sans', sans-serif; font-weight: 800;
  text-transform: none; letter-spacing: 0; font-size: 1.7rem;
}
:root[data-skin="soft"] .drawer-title {
  font-family: 'Instrument Sans', sans-serif; font-weight: 800;
  text-transform: none; letter-spacing: 0;
}
:root[data-skin="soft"] .nav-group-h { letter-spacing: 0.08em; }
/* runde, gefuellte Bedienelemente */
:root[data-skin="soft"] .btn,
:root[data-skin="soft"] .skin-btn,
:root[data-skin="soft"] .bg-btn,
:root[data-skin="soft"] input,
:root[data-skin="soft"] select,
:root[data-skin="soft"] textarea { border-radius: var(--radius); }
:root[data-skin="soft"] .btn { font-family: 'Instrument Sans', sans-serif; font-weight: 600; }
:root[data-skin="soft"] .nav-item { border-radius: var(--radius); }
:root[data-skin="soft"] .nav-item.active { border-color: transparent; border-left: none; background: rgba(217, 118, 6, 0.14); }
/* Linien -> weiche Schatten an den Spalten-Kanten */
:root[data-skin="soft"] .sidebar { border-right: none; box-shadow: 1px 0 0 var(--line); }
:root[data-skin="soft"] .drawer.open { border-left-color: transparent; box-shadow: -1px 0 0 var(--line); }

/* Benachrichtigungen — aufklappbare Nachricht-Vorlage (synchron mit Konfiguration 2.0/3.0) */
.notify-tpl { margin: 0.2rem 0 0.5rem; }
.notify-tpl summary { cursor: pointer; font-size: 0.82rem; color: var(--muted); user-select: none; }
.notify-tpl summary:hover { color: var(--accent); }
.notify-tpl-pre {
  white-space: pre-wrap; word-break: break-word; margin: 0.45rem 0 0.3rem;
  background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem; font-size: 0.8rem; line-height: 1.45;
  font-family: 'Geist Mono', ui-monospace, monospace; color: var(--bone);
}
.notify-tpl-link { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); white-space: nowrap; }
.notify-tpl-link:hover { border-bottom-style: solid; }

/* Nav: nicht-klickbares Unter-Label in einer Gruppe (z. B. „Overlay-Widgets" → hier einrichten, im Editor platzieren) */
.nav-sublabel {
  display: flex; flex-direction: column; gap: 0.05rem;
  margin: 0.5rem 0.2rem 0.1rem; padding: 0.35rem 0.5rem 0.15rem;
  border-top: 1px solid var(--line);
  font-family: 'Geist Mono', monospace; font-weight: 700;
  font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); user-select: none;
}
.nav-sublabel-hint {
  font-family: 'Instrument Sans', sans-serif; font-weight: 400;
  font-size: 0.62rem; letter-spacing: 0.01em; text-transform: none;
  color: var(--muted); opacity: 0.72;
}

/* Discord Builder — Plan-/Ergebnis-Liste */
.db-plan, .db-result, .db-roles { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.4rem; }
.db-result { margin-top: 0.7rem; }
/* Discord-Builder Preset-Picker — waehlbare Karten je Sample (Rollen + Kategorien + Kanaele). */
.db-sample-card { display: flex; flex-direction: column; gap: 0.3rem; text-align: left; width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(128, 128, 128, 0.04); color: var(--bone); font: inherit; cursor: pointer; transition: border-color 0.12s; }
.db-sample-card:hover { border-color: var(--accent); }
.db-sample-card.active { border-color: var(--trail); background: rgba(217, 118, 6, 0.08); }
.db-sample-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.db-sample-name { font-weight: 700; }
.db-sample-badge { font-size: 0.62rem; font-weight: 800; color: var(--trail); white-space: nowrap; }
.db-sample-roles { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.db-role-chip { font-size: 0.66rem; padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); background: rgba(128, 128, 128, 0.14); border: 1px solid var(--line); white-space: nowrap; }
.db-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--void); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.45rem 0.7rem; font-size: 0.9rem;
}
.db-item > span:first-child { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
/* Eigener Abschnitt „Rollen" in der Builder-Vorschau (unter den Kanälen). */
.db-subhead { margin-top: 0.8rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.db-rolecolor {
  flex: 0 0 auto; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ════════════════════════════════════════════════════════════════════════
   PANEL-REDESIGN · Design-System v2  (PHASE 1 — ADDITIV & INERT)
   Quelle: Mockup C:\Users\patri\Documents\1337BOT\control-panel-design.
   Aktiv NUR unter einem `.ui2`-Vorfahren → bestehende Views (ohne .ui2) bleiben
   100 % unberührt. P2/P3 setzt `.ui2` auf Shell/Container, um eine Ansicht aufs
   neue System umzustellen. Mockup-Tokens auf UNSERE Variablen gemappt
   (--void/--void-2/--bone/--maritime/--trail/--accent/--muted/--line/--radius*/
   --shadow-2/--focus-ring) — KEINE neuen Tokens, KEIN prefers-color-scheme
   (Light-/Black-Theme erben über die bestehenden data-theme-Tokens).
   `.compact-ui` (Body) verkleinert die Kopf-Headline.
   ════════════════════════════════════════════════════════════════════════ */
.ui2 { color: var(--bone); }
.ui2 h1 { margin: 0 0 8px; font-family: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif; font-size: 4.75rem; line-height: 0.9; text-transform: uppercase; }
.ui2 h2 { margin: 0 0 6px; font-size: 1.05rem; }
.ui2 p { margin-top: 0; color: var(--muted); line-height: 1.55; }
.ui2 :focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* — Shell: Grid + Sidebar — */
.ui2 .design-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 100vh; }
.ui2 .sidebar { position: sticky; top: 0; height: 100vh; overflow: auto; padding: 22px 18px; border-right: 1px solid var(--line); background: var(--void-2); box-shadow: var(--shadow-2); }
.ui2 .brand-lockup { display: flex; align-items: center; gap: 10px; }
.ui2 .brand-lockup .brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(217, 118, 6, 0.52); border-radius: var(--radius); background: linear-gradient(145deg, rgba(217, 118, 6, 0.16), rgba(0, 66, 114, 0.22)); color: var(--accent); font-family: 'Geist Mono', monospace; font-weight: 800; font-size: 1rem; }
.ui2 .brand-lockup strong { display: block; font-family: 'Big Shoulders Display', sans-serif; font-size: 1.55rem; line-height: 1; text-transform: uppercase; }
.ui2 .brand-lockup span { color: var(--accent); }
/* Brand-Lockup v2: Wortmarke „1337BOT" + rechts zweizeilig „CONTROL/PANEL" (additiv, inert bis Markup-Tausch) */
.ui2 .brand-lockup .brand-word { font-family: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif; font-weight: 900; font-size: 1.55rem; line-height: 1; color: var(--bone); text-transform: uppercase; white-space: nowrap; }
.ui2 .brand-lockup .brand-word span { color: var(--trail); }
.ui2 .brand-lockup .brand-sub { font-family: 'Geist Mono', monospace; font-size: 0.56rem; line-height: 1.08; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); opacity: 0.55; }
/* Dezente Versionsnummer neben „CONTROL PANEL" im Sidebar-Lockup */
.brand-version { font-family: 'Geist Mono', monospace; font-size: .7rem; color: var(--muted); }
.ui2 .brand-lockup small, .ui2 .server-select small, .ui2 .account-chip small, .ui2 .metric-card small { color: var(--muted); font-size: 0.74rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
/* Eyebrow: orange Mono-Kicker wie im Prototyp (galt bisher grau) — global ueber alle View-/Feature-Koepfe. */
.ui2 .eyebrow { margin-bottom: 3px; color: var(--trail); font-family: 'Geist Mono', monospace; font-weight: 600; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }
.ui2 .search-box { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: 100%; margin: 14px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(128, 128, 128, 0.10); }
.ui2 .search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--bone); font: inherit; }
/* STRG+K-Hinweis (<kbd>) bleibt mit dem Suchfeld in EINER Zeile — kein Umbruch, schrumpft nicht weg */
.ui2 .search-box kbd { flex: 0 0 auto; white-space: nowrap; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: rgba(128, 128, 128, 0.12); color: var(--muted); font-family: 'Geist Mono', monospace; font-size: 0.68rem; line-height: 1.4; }
.ui2 .nav-groups { display: grid; gap: 8px; }
.ui2 .nav-groups details { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.ui2 .nav-groups summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; color: var(--muted); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; list-style: none; text-transform: uppercase; cursor: pointer; }
.ui2 .nav-groups summary::-webkit-details-marker { display: none; }
.ui2 .nav-item { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 38px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--bone); text-align: left; font: inherit; white-space: nowrap; }
.ui2 .nav-item .nav-ico { flex: 0 0 auto; opacity: .62; transition: opacity .12s ease; } /* Symbole dezenter als der Text */
.ui2 .nav-item.active .nav-ico, .ui2 .nav-item:hover .nav-ico { opacity: .92; } /* aktiv/hover wieder voll */
.ui2 .nav-item .nav-trail { margin-left: auto; flex: 0 0 auto; }
.ui2 .nav-item.active { border-color: rgba(242, 138, 30, 0.38); background: rgba(242, 138, 30, 0.16); }
/* ── Console-Nav (Redesign 2026-07-22): feste, immer-offene Sidebar mit flachen Mono-Sektionen
   (Prototyp). Reuse der bestehenden Nav-Klassen — kein Parallel-System, nur Skin + Immer-offen. ── */
.console-nav .nav-group-items { display: flex !important; }            /* nie einklappen */
.console-nav .nav-group-chev { display: none; }                        /* kein Aufklapp-Pfeil */
.console-nav .nav-group-h { cursor: default; padding: 13px 10px 5px; color: var(--faint); font-family: 'Geist Mono', monospace; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.console-nav .nav-group-h:hover { color: var(--faint); }
.console-nav .nav-group-h .nav-grp-count { color: var(--faint); font-weight: 600; }
.console-nav .nav-subhead { padding: 8px 10px 3px; color: var(--faint); font-family: 'Geist Mono', monospace; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.console-nav .nav-item { min-height: 30px; padding: 6px 10px; gap: 9px; }
/* Einheitliche SVG-Line-Icons (Prototyp) — currentColor erbt die dezente .nav-ico-Opazitaet. */
.console-nav .nav-ico-svg { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.console-nav .nav-ico-svg svg { display: block; }
/* Sidebar entschachteln (Prototyp = flache Sektionen): Unter-Überschriften ausblenden,
   die data-subcat-Container bleiben (Injektoren-Anker unberührt), nur die Labels weg. */
.console-nav .nav-subhead { display: none; }
/* Zusammengelegte Community-Tabs: die Sekundaer-View sitzt unter der Primaer-View (eigener Kopf weg, Trennlinie davor). */
.merged-secondary { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.view.merged-secondary > .feature-head, .view.merged-secondary > .view-head { display: none; }
/* View-Kopf-Icon als Linien-SVG (Emoji ersetzt): mittig in der bestehenden .feature-icon-Box. */
.ui2 .feature-icon.feature-icon-svg { display: grid; place-items: center; }
.ui2 .feature-icon.feature-icon-svg svg { display: block; }
.ui2 .nav-item.locked { color: var(--muted); }
.ui2 .nav-item.locked span:last-child { margin-left: auto; flex: 0 0 auto; color: #e4bf67; font-family: 'Geist Mono', monospace; font-size: 0.68rem; }
.ui2 .operator-entry { margin-top: 18px; border-color: rgba(0, 66, 114, 0.58); background: rgba(0, 66, 114, 0.18); }

/* — Shell: App-Frame + Topbar + Bottom-Nav — */
.ui2 .app-frame { min-width: 0; padding: 22px; }
.ui2 .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; margin-bottom: 16px; padding: 0 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.ui2 .topbar-actions { display: flex; align-items: center; gap: 8px; }
/* Topbar schlanker (Prototyp): dezente Text-/Icon-Knoepfe statt kraeftiger Kaesten. */
.ui2 .topbar-actions .ghost-button { min-height: 30px; padding: 5px 9px; border-color: transparent; background: transparent; color: var(--muted); font-size: 0.82rem; }
.ui2 .topbar-actions .ghost-button:hover { color: var(--bone); border-color: var(--line-2); background: rgba(128, 128, 128, 0.06); }
.ui2 .tb-conn { display: inline-flex; align-items: center; font-family: 'Geist Mono', monospace; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ok, #5db36c); white-space: nowrap; }
.ui2 .tb-conn.off { color: var(--danger, #c96a6a); }
.ui2 .server-select { display: flex; align-items: center; gap: 10px; }
.ui2 .server-select strong, .ui2 .account-chip strong { display: block; }
.ui2 .account-chip { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(128, 128, 128, 0.10); }
.ui2 .account-chip > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--maritime); color: var(--bone); font-family: 'Geist Mono', monospace; font-weight: 800; }
.ui2 .account-chip > span.has-img { background-size: cover; background-position: center; }
/* Mittige, dezente Versionsanzeige in der Topbar. margin:0 auto schiebt sie als Flex-Kind zwischen Server-Switcher (links) und Topbar-Actions (rechts) zentriert, ohne die anderen Elemente zu verschieben. */
.ui2 .topbar-version { margin: 0 auto; font-family: 'Geist Mono', monospace; font-size: 0.8rem; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
.ui2 .mobile-menu { display: none; }
/* Desktop (>860px): Hamburger NIE einblenden. .ui2 .icon-button (display:inline-flex, weiter unten, gleiche Specificity) wuerde ihn sonst zeigen; sein Klick-Handler legt dann ein auf Desktop nicht schliessbares Overlay an (box-shadow-Scrim, Schliessen ist mqMobile-gegated). ID+!important schlaegt den .icon-button-Default, nur >860px. */
@media (min-width: 861px) { #mobile-menu { display: none !important; } }
.ui2 .bottom-nav { display: none; }

/* — View-/Feature-Kopf — */
/* flex-wrap: zwischen 861 und ~1000px Fensterbreite passen Titeltext und Status-Pill nicht
   nebeneinander (gemessen: Grundeinstellungen, Pill ragte 70px aus dem Bild) — die Pill
   rutscht dann in eine zweite Zeile, statt rechts hinauszulaufen. */
.ui2 .kw-titlebar, .ui2 .view-head, .ui2 .feature-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.ui2 .kw-titlebar, .ui2 .view-head, .ui2 .feature-head { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void-2); }
.ui2 .stage-backbar { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.ui2 .stage-backbar .stage-back-btn { min-height: 32px; padding: 0 12px; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.ui2 .stage-backbar .stage-back-btn:hover { color: var(--bone); border-color: var(--accent); }
.ui2 .feature-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ui2 .feature-title > div:last-child { min-width: 0; }
.ui2 .feature-title p { overflow-wrap: anywhere; }
.ui2 .feature-icon { display: grid; place-items: center; flex: 0 0 auto; width: 58px; height: 58px; border-radius: var(--radius); background: rgba(0, 66, 114, 0.38); color: var(--accent); font-family: 'Geist Mono', monospace; font-weight: 900; }
.ui2 .status-pill, .ui2 .small-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); font-family: 'Geist Mono', monospace; font-size: 0.78rem; white-space: nowrap; }
.ui2 .status-pill.active, .ui2 .small-pill.live { border-color: rgba(110, 231, 183, 0.45); color: var(--labor); background: rgba(110, 231, 183, 0.10); }
.ui2 .status-pill.operator { border-color: rgba(0, 66, 114, 0.8); color: var(--bone); background: rgba(0, 66, 114, 0.22); }
.ui2 .status-line { color: var(--muted); font-size: 0.85rem; }
.ui2 .status-line.ok, .ui2 .status-dot.ok { color: var(--labor); }
.ui2 .status-line.warn, .ui2 .status-dot.warn { color: #e4bf67; }
.ui2 .status-dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: currentColor; color: var(--muted); }

/* — Grids + Karten — */
.ui2 .metric-grid, .ui2 .content-grid, .ui2 .feature-layout, .ui2 .settings-cards, .ui2 .state-grid { display: grid; gap: 14px; }
.ui2 .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
/* Durchgaengiger 50/50-Standard (Geburtstage/FAQ/Gameserver/Leveling/HEALTH/…).
   feature-layout zieht mit. Auf ≤860px → 1 Spalte (Mobile-Breakpoint weiter unten). */
.ui2 .content-grid, .ui2 .feature-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Dashboard-eigenes 50/50-Raster (NICHT die geteilte .content-grid) — zwei gleich breite Spalten, Inhalte stapeln je Spalte. */
.ui2 .dash-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ui2 .dash-col { display: flex; flex-direction: column; gap: 14px; }
.ui2 .settings-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui2 .state-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* DIE Karte im .ui2-Design. `.card` gehoert hier dazu: sie hatte bisher nur padding, und
   drei Views (#view-ovbuilder/-ovwidgets/-ovactive) haben sich den Rahmen deshalb jeweils
   selbst nachgebaut. Einmal hier = ueberall richtig, auch im Operator-Bereich. */
.ui2 .metric-card, .ui2 .panel, .ui2 .card, .ui2 .state-card, .ui2 .lock-preview { border: 1px solid var(--line); border-radius: var(--radius); background: var(--void-2); box-shadow: none; }
.ui2 .metric-card { min-height: 132px; padding: 16px; }
.ui2 .metric-card strong { display: block; margin: 12px 0 8px; font-family: 'Geist Mono', monospace; font-size: 2.2rem; }
.ui2 .premium-preview { background: linear-gradient(145deg, rgba(217, 118, 6, 0.14), var(--void-2)); }
.ui2 .panel { padding: 18px; }
.ui2 .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ui2 .quick-actions { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui2 .state-card { min-height: 180px; padding: 18px; }
.ui2 .state-card span { color: var(--muted); font-family: 'Geist Mono', monospace; font-size: 0.75rem; text-transform: uppercase; }
.ui2 .state-card strong { display: block; margin: 26px 0 8px; font-size: 1.15rem; }
.ui2 .state-card.loading { background-image: linear-gradient(90deg, transparent, rgba(128, 128, 128, 0.12), transparent); }
.ui2 .state-card.error { border-color: rgba(223, 125, 125, 0.4); }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD · Prototyp-Angleichung (2026-07-23)
   Alles #view-dashboard-gescopt → ID-Specificity schlaegt die generischen
   .ui2-Regeln, ohne andere Views zu beruehren. Klassenbasiert (kein Inline).
   ═══════════════════════════════════════════════════════════════════════════ */
/* Kopf: flach (kein Karten-Rahmen), Titel links + Setup-Knopf rechts (Prototyp). */
#view-dashboard .view-head { margin-bottom: 18px; padding: 0; border: 0; background: transparent; align-items: flex-end; gap: 16px; }
#view-dashboard .view-head h1 { font-size: 2.15rem; line-height: 1; }
#view-dashboard .view-head > div > p { margin-top: 4px; font-size: 0.82rem; }

/* KPIs: 6 in EINER Reihe, kompakt (Prototyp). */
#view-dashboard .metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
#view-dashboard .metric-card { min-height: 0; padding: 12px 14px; }
#view-dashboard .metric-card small { font-family: 'Geist Mono', monospace; font-size: 0.6rem; letter-spacing: 0.09em; }
#view-dashboard .metric-card strong { margin: 6px 0 3px; font-size: 1.4rem; }
#view-dashboard .metric-card .status-line { font-size: 0.66rem; }

/* Hauptbereich: Features (breit) | Dienste + Radar (schmal 330px). */
#view-dashboard .dash-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; margin-bottom: 16px; }
#view-dashboard .dash-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#view-dashboard .dash-side .panel { padding: 15px 16px; }
#view-dashboard .dash-side .panel-head { margin-bottom: 10px; }
#view-dashboard .dash-side .panel-head h2 { font-size: 0.9rem; }

/* Dienste-Karte: Server/Mitglieder-Zahlen doppeln die KPIs oben → hier ausblenden.
   Uebrig bleibt die kompakte Dienst-Liste (= „Dienste" im Prototyp) + Server/Public. */
#view-dashboard .dash-dienste .ga-stats { display: none; }
#view-dashboard .dash-dienste .feat { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; margin: 2px 0 8px; }
#view-dashboard .dash-dienste .feat-row { font-size: 0.72rem; }
#view-dashboard .dash-dienste p.small.mono { margin: 4px 0 0; font-size: 0.62rem; word-break: break-word; }

/* Overflow-Schutz (Owner 2026-07-27): kein Inhalt ragt aus den Dashboard-Karten heraus — Panels
   clippen ihren Inhalt, lange Pills/Texte brechen um statt ueber den Rand zu laufen. */
#view-dashboard .panel { overflow: hidden; }
#view-dashboard .small-pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Features-Panel (linke Spalte). */
#view-dashboard .dash-features-sec { margin: 0; padding: 16px 18px; border: 1px solid var(--line); background: var(--void-2); }
#view-dashboard .dash-features-sec > .panel-head { margin-bottom: 12px; }
#view-dashboard .dash-features-sec > .panel-head h2 { font-size: 0.95rem; }
#view-dashboard .features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* Filter-Pills (Alle / Stream / Community / Automatik). */
#view-dashboard .feat-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
#view-dashboard .feat-filter button { padding: 4px 12px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: inherit; font-size: 0.72rem; line-height: 1.3; cursor: pointer; }
#view-dashboard .feat-filter button:hover { color: var(--bone); }
#view-dashboard .feat-filter button.on { background: var(--trail); border-color: var(--trail); color: #141414; font-weight: 600; }
#view-dashboard .feat-card.filtered-out { display: none; }
#view-dashboard .feat-card.feat-more-hidden { display: none; }
#view-dashboard .feat-more-btn { grid-column: 1 / -1; padding: 10px; border: 1px dashed var(--line-2); background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; }
#view-dashboard .feat-more-btn:hover { color: var(--bone); border-color: var(--faint); }

/* Feature-Karte horizontal (Prototyp): Icon-Box · Name+Kategorie · Toggle rechts. */
#view-dashboard .feat-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); background: var(--void-3); cursor: pointer; transition: border-color 0.12s; }
#view-dashboard .feat-card:hover { border-color: #3a3a42; }
#view-dashboard .feat-card .fov-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; background: rgba(242, 138, 30, 0.12); color: var(--trail); font-size: 0.95rem; opacity: 1; }
#view-dashboard .feat-card .fov-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
#view-dashboard .feat-card .fov-name { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-dashboard .feat-card .fov-cat { font-family: 'Geist Mono', monospace; font-size: 0.6rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; }
#view-dashboard .feat-card .feat-card-foot { margin-left: auto; flex: none; display: flex; align-items: center; }
#view-dashboard .feat-card .feat-card-open { font-size: 0.66rem; color: var(--faint); white-space: nowrap; }

/* Community-Radar als Balken-Verlauf (Prototyp) statt Linien-Chart. */
#view-dashboard .radar-bars { display: flex; align-items: flex-end; gap: 5px; height: 62px; margin-bottom: 8px; }
#view-dashboard .radar-bars .radar-bar { flex: 1; min-height: 4px; background: var(--line-2); }
#view-dashboard .radar-bars .radar-bar.hot { background: var(--trail); }
#view-dashboard .radar-now { margin: 0; }

/* Responsive-Stufen fuer das dichte Dashboard. */
@media (max-width: 1240px) {
  #view-dashboard .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #view-dashboard .dash-main { grid-template-columns: 1fr; }
  #view-dashboard .dash-side { flex-direction: row; }
  #view-dashboard .dash-side .panel { flex: 1; }
}
@media (max-width: 720px) {
  #view-dashboard .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-dashboard .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-dashboard .dash-side { flex-direction: column; }
}
@media (max-width: 480px) {
  #view-dashboard .features-grid { grid-template-columns: 1fr; }
}
.ui2 .state-card.offline { border-color: var(--line); opacity: 0.85; }
.ui2 .state-card.locked { opacity: 0.72; }

/* — Controls: Buttons / Tabs / Toggle — */
.ui2 .primary-button, .ui2 .secondary-button, .ui2 .ghost-button, .ui2 .mini-button, .ui2 .icon-button, .ui2 .tab, .ui2 .link-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; border-radius: var(--radius); border: 1px solid var(--line); color: var(--bone); background: rgba(128, 128, 128, 0.10); font: inherit; }
.ui2 .primary-button { padding: 0 14px; border-color: var(--trail); background: var(--trail); color: #141414; font-weight: 700; box-shadow: none; }
.ui2 .secondary-button, .ui2 .ghost-button, .ui2 .mini-button { padding: 0 12px; }
.ui2 .ghost-button { background: transparent; }
.ui2 .danger-soft { border-color: rgba(223, 125, 125, 0.38); color: #f0a5a5; }
.ui2 .mini-button { min-height: 30px; padding: 0 10px; font-size: 0.82rem; }
.ui2 .icon-button { width: 38px; padding: 0; }
.ui2 .link-button { border: 0; background: transparent; color: var(--muted); }
.ui2 .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.ui2 .tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ui2 .tab { padding: 0 14px; }
.ui2 .tab.active { border-color: rgba(217, 118, 6, 0.58); background: rgba(217, 118, 6, 0.16); }
/* An/Aus-Schalter: siehe .nt-toggle (EINE Klasse, ungescopet) — hier bewusst nichts.
   Der frueher hier stehende .ui2 .switch-Block war eine ZWEITE Schalter-Generation neben
   .switch .track und brauchte zwei Neutralisier-Hacks, weil er per Element-Selektor
   ('.ui2 .switch span') JEDEN span traf — auch Text-Spans. Genau das ist mit .nt-toggle weg:
   dort haengt alles an Klassen (.nt-knob/.nt-state). */

/* — Formulare — */
.ui2 .form-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ⚠ minmax(0,1fr), NICHT 1fr (Projektregel): 1fr = minmax(auto,1fr) — der Track kann nicht unter
   die Wunschbreite seines Inhalts schrumpfen. Ein Textarea traegt ~500px Wunschbreite (cols-Default)
   und sprengte damit auf dem Handy die Spalte (gemessen: Gratis-Spiele -> Nachricht-Vorlage, 195px
   Seiten-Ueberlauf bei Handybreite). Gleiches Muster fuer .field selbst eine Zeile darunter. */
.ui2 .form-grid.single { grid-template-columns: minmax(0, 1fr); }
.ui2 .field, .ui2 .check-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; color: var(--muted); font-size: 0.88rem; }
/* flex-wrap: der Label-Kopf traegt oft Beschriftung LINKS + Hinweis RECHTS. Ohne Umbruch
   schob eine lange Hinweiszeile (z. B. die Token-Liste bei den Gratis-Spielen) den Inhalt
   auf dem Handy 100px aus dem Bild — mit Umbruch steht der Hinweis dann einfach darunter. */
.ui2 .field span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; min-width: 0; }
.ui2 .field em { color: var(--labor); font-family: 'Geist Mono', monospace; font-size: 0.72rem; font-style: normal; }
.ui2 .field input, .ui2 .field select, .ui2 .field textarea { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void); color: var(--bone); font: inherit; }
.ui2 .field textarea { min-height: 96px; resize: vertical; }
.ui2 .field.wide, .ui2 .check-row { grid-column: 1 / -1; }
.ui2 .check-row { display: flex; align-items: center; gap: 10px; }
.ui2 .check-row input { width: 18px; height: 18px; accent-color: var(--trail); }
/* Anklickbare Auswahl-Cards (z. B. Plattformen): ganze Card togglet eine versteckte, aber
   fokussierbare Checkbox. Aktiv = Trail-Akzent + Haken (nicht nur Farbe → barrierefrei).
   Auto-Grid → kompakt, kein langer Scroll. data-fgplat/Settings-Logik bleibt unveraendert. */
.ui2 .kw-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.ui2 .sticker-card { display: grid; gap: 6px; padding: 6px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; }
.ui2 .sticker-card img { width: 100%; height: 96px; object-fit: contain; background: transparent; border-radius: var(--radius-xs); }
.ui2 .sticker-name { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v631: Sticker-Auswahl-Button im Kanalpunkte-Popup (oeffnet die Bibliothek als Bild-Popup statt Dropdown). */
.ui2 .stk-pickbtn { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void); color: var(--muted); font: inherit; cursor: pointer; text-align: left; }
.ui2 .stk-pickbtn:hover { border-color: var(--acc); }
.ui2 .stk-pickbtn.has-pick { color: inherit; }
.ui2 .stk-pickbtn img { width: 30px; height: 30px; object-fit: contain; border-radius: var(--radius-xs); background: transparent; flex: none; }
/* v633: Fertige Katzen-Belohnungen — prominente Sektion mit Checkbox-Auswahl. */
.ui2 .cat-preset-box { background: rgba(128, 128, 128, 0.06); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 4px 0; }
.ui2 .cat-preset-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ui2 .cat-preset-title { font-size: 1.05rem; font-weight: 600; }
.ui2 .cat-preset-badge { font-size: 0.7rem; color: var(--acc); background: rgba(217, 118, 6, 0.12); padding: 2px 9px; border-radius: 999px; }
.ui2 .cat-preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 4px 0 10px; }
.ui2 .cat-preset-card { position: relative; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; cursor: pointer; }
.ui2 .cat-preset-card:hover { border-color: var(--acc); }
.ui2 .cat-preset-card img { width: 100%; height: 92px; object-fit: contain; background: transparent; }
.ui2 .cat-preset-name { font-size: 0.74rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui2 .cat-preset-cb { position: absolute; top: 7px; left: 7px; width: 18px; height: 18px; accent-color: var(--acc); cursor: pointer; }
.ui2 .cat-preset-card.is-done { opacity: 0.5; }
.ui2 .cat-preset-tag { position: absolute; top: 7px; left: 7px; font-size: 0.62rem; color: #7ac77a; background: rgba(0, 0, 0, 0.5); padding: 1px 6px; border-radius: var(--radius-xs); }
.ui2 .cat-preset-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* v633: freigestellte Sticker ohne grauen Vorschau-Hintergrund zeigen. */
/* Sticker sind freigestellt (echtes Alpha) — nie eine Flaeche hinter das Bild legen, egal wo im Panel. */
.ui2 .sticker-card img,
.ui2 .stk-pickbtn img,
.ui2 .sticker-opt img,
.ui2 .cat-preset-card img,
.ui2 .sticker-lib img,
#stk-lib-grid .stk-pick img,
#stk-rew-pick img,
#stk-m-img { background: transparent !important; }
.ui2 .tab-panel { display: grid; gap: 16px; }
.ui2 .tab-panel[hidden] { display: none; }
.ui2 .sticker-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ui2 .sticker-opt { position: relative; display: grid; gap: 4px; padding: 6px; border: 1.5px solid transparent; border-radius: var(--radius); background: transparent; cursor: pointer; }
.ui2 .sticker-opt img { width: 100%; height: 72px; object-fit: contain; background: transparent; border-radius: var(--radius-xs); }
.ui2 .sticker-opt:hover { border-color: rgba(217, 118, 6, 0.5); }
.ui2 .sticker-opt.sel { border-color: var(--trail); background: rgba(217, 118, 6, 0.12); }
.ui2 .sticker-opt:focus-visible { outline: 2px solid var(--trail); outline-offset: 2px; }
.ui2 .sticker-opt-none { display: flex; align-items: center; justify-content: center; min-height: 72px; color: var(--muted); }
.ui2 .sticker-opt-none-ic { font-size: 1.4rem; }
/* Sticker-Bibliothek-View: Verwaltungs-Grid (Bild + Name + optionaler Lösch-Knopf je Karte). */
.ui2 .sticker-lib .sticker-card .sticker-del { margin-top: 2px; width: 100%; }

/* v637: Themen-Filter der Sticker-Bibliothek (Chips) */
.ui2 .stk-lib-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ui2 .stk-lib-filter:empty { display: none; }
.ui2 .stk-chip { font: inherit; font-size: 0.8rem; padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--void); color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.ui2 .stk-chip:hover { border-color: var(--acc); color: inherit; }
.ui2 .stk-chip.on { background: rgba(217, 118, 6, 0.14); border-color: var(--trail, #d97706); color: inherit; }

/* v637: Inline-Feldfehler beim Sticker-Befehl (dezent rot + kleine Info darunter) */
.ui2 #stk-m-cmd.field-err { border-color: #e0524d !important; box-shadow: 0 0 0 2px rgba(224, 82, 77, 0.18); }
.ui2 .field-err-msg { margin: 4px 0 0; font-size: 0.74rem; color: #e0847f; }

/* v637: GESPEICHERT-Badge rechts oben im View-Kopf */
.ui2 .feature-head > .view-saved { position: absolute; top: 2px; right: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ok, #6ee7b7); background: rgba(110, 231, 183, 0.12); border: 1px solid rgba(110, 231, 183, 0.3); border-radius: 999px; padding: 3px 11px; opacity: 0; transform: translateY(-3px); transition: opacity 0.18s, transform 0.18s; pointer-events: none; z-index: 3; }
.ui2 .feature-head > .view-saved.on { opacity: 1; transform: translateY(0); }

/* v637: größeres Sticker-Auswahl-Popup — engeres Raster, kompaktere Kacheln (4–5+ pro Reihe) */
.ui2 .stk-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.ui2 .stk-pick-grid .sticker-card img { height: 80px; }

/* v640: ▶-Vorhör-Button neben Ton-Auswahl / Lautstärke-Regler */
.ui2 .snd-row { display: flex; gap: 6px; align-items: center; }
.ui2 .snd-row select, .ui2 .snd-row input[type="range"] { flex: 1; min-width: 0; }
.ui2 .snd-play { flex: none; padding: 6px 11px; line-height: 1; }
/* v640: Sticker-Befehl-Name nie abschneiden (voll anzeigen, z. B. !gizmo statt !g…) */
.ui2 .stk-card .ovs-name { overflow: visible; text-overflow: clip; white-space: normal; word-break: break-word; }

/* v641: Sticker-/Kanalpunkte-Raster einheitlich 3 pro Reihe (1/3); „+"-Anlege-Karte gleich groß */
#view-sticker .ovs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; align-items: stretch; }
@media (max-width: 900px) { #view-sticker .ovs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #view-sticker .ovs-grid { grid-template-columns: 1fr; } }
.ui2 .stk-add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 62px; border: 1px dashed var(--line); border-radius: var(--radius, 12px); background: transparent; color: var(--muted); cursor: pointer; font: inherit; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.ui2 .stk-add-card:hover { border-color: var(--trail, #d97706); color: inherit; background: rgba(217, 118, 6, 0.06); }
.ui2 .stk-add-plus { font-size: 1.5rem; line-height: 1; font-weight: 400; }
.ui2 .stk-add-lbl { font-size: 0.8rem; font-weight: 600; }
/* v641: Katzen-Preset-Karte (Trigger fürs Auswahl-Popup) — Vorschau + Label + Zähler */
.ui2 .stk-preset-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 62px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: rgba(217, 118, 6, 0.06); color: inherit; cursor: pointer; font: inherit; transition: border-color 0.15s, background 0.15s; }
.ui2 .stk-preset-card:hover { border-color: var(--trail, #d97706); background: rgba(217, 118, 6, 0.12); }
.ui2 .stk-preset-card img { width: 40px; height: 40px; object-fit: contain; }
.ui2 .stk-preset-lbl { font-size: 0.82rem; font-weight: 600; }
.ui2 .stk-preset-badge { font-size: 0.66rem; color: var(--acc, #d97706); }
/* v655: Counter Schnell-Anlegen-Karten (Death-Count / Neuer Count) am Reihenanfang — wie Studio → Sticker. */
.ui2 .cnt-quick-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.ui2 .cnt-quick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 150px; min-height: 66px; padding: 10px 16px; border: 1px dashed var(--line); border-radius: var(--radius, 12px); background: transparent; color: var(--muted); cursor: pointer; font: inherit; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.ui2 .cnt-quick:hover { border-color: var(--trail, #d97706); color: inherit; background: rgba(217, 118, 6, 0.06); }
.ui2 .cnt-quick[data-cnt-preset] { border-style: solid; background: rgba(217, 118, 6, 0.06); color: inherit; }
.ui2 .cnt-quick-plus { font-size: 1.5rem; line-height: 1; font-weight: 400; }
.ui2 .cnt-quick-ico { font-size: 1.3rem; line-height: 1; }
.ui2 .cnt-quick-lbl { font-size: 0.85rem; font-weight: 600; }

/* v642: klare Abschnitts-Header im Sticker-/Studio-Bereich (eigener Block, wie im restlichen Design) */
.ui2 .stk-sec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 1.5rem 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.ui2 .stk-sec:first-child { margin-top: 0.4rem; }
.ui2 .stk-sec-title { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acc, #d97706); }
.ui2 .stk-sec-desc { font-size: 0.78rem; color: var(--muted); }

/* v648: Goals-View — Inline-Sub-Nav (Tab-Leiste) + Panes */
/* Inline-Sub-Nav (.goals-subnav/.goals-tab) — Definition ENTFERNT (war eine wortgleiche
   Kopie der Studio-Nav). Beide sind jetzt Aliasse der EINEN Sub-Nav im KW-UI-Block
   („SUBNAV", weiter unten). Groesse aendern: --kw-subnav-size. Nur dort. */
.ui2 .goals-pane.hidden { display: none; }
/* Kurzer Hinweis auf externe Overlays (StreamElements/Streamlabs) — dezent, eigene Zeile über dem Inhalt. */
.ui2 .ext-overlay-note { margin: -8px 0 14px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--void-2); }
.ui2 .kw-selcard { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--void); cursor: pointer; user-select: none;
  transition: border-color .12s var(--ease), background .12s var(--ease), transform .08s var(--ease); }
.ui2 .kw-selcard:hover { border-color: rgba(217, 118, 6, 0.5); }
.ui2 .kw-selcard:active { transform: scale(0.98); }
.ui2 .kw-selcard input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ui2 .kw-selcard:has(input:checked) { border-color: var(--trail); background: rgba(217, 118, 6, 0.12); }
.ui2 .kw-selcard:has(input:focus-visible) { outline: 2px solid var(--trail); outline-offset: 2px; }
.ui2 .kw-selcard:has(input:checked)::after { content: '✓'; position: absolute; top: 5px; right: 9px; color: var(--trail); font-weight: 700; font-size: 0.8rem; }
.ui2 .kw-selcard-ic { flex: 0 0 auto; font-size: 1.2rem; line-height: 1; filter: grayscale(0.5) opacity(0.7); transition: filter .12s var(--ease); }
.ui2 .kw-selcard:has(input:checked) .kw-selcard-ic { filter: none; }
.ui2 .kw-selcard-tx { display: flex; flex-direction: column; min-width: 0; font-size: 0.92rem; color: var(--bone); }
.ui2 .kw-selcard-tx small { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
/* ⚡ Schnell-Antworten: ein Befehl = eine kompakte Karte. Auto-Grid → Desktop 2–3 Spalten,
   Mobil 1 (Breakpoint unten). Schreibt ins versteckte CHAT_QA-Feld (data-skey), kein eigener Speicher. */
.ui2 .chatqa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ui2 .chatqa-card { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void); }
.ui2 .chatqa-card-head { display: flex; align-items: center; gap: 6px; }
.ui2 .chatqa-cmd { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void); color: var(--trail); font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 0.84rem; }
.ui2 .chatqa-text { width: 100%; min-height: 56px; padding: 8px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void); color: var(--bone); font: inherit; font-size: 0.86rem; resize: vertical; }
.ui2 .chatqa-cmd:focus, .ui2 .chatqa-text:focus { outline: none; border-color: var(--trail); }
.ui2 .chatqa-del { flex: 0 0 auto; width: 28px; height: 28px; line-height: 1; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void); color: var(--muted); cursor: pointer; transition: color .12s var(--ease), border-color .12s var(--ease); }
.ui2 .chatqa-del:hover { color: var(--bone); border-color: var(--trail); }
.ui2 .chatqa-actions { margin-top: 10px; }
.ui2 .btn.chatqa-add { padding: 0.42rem 0.8rem; font-size: 0.82rem; }
.ui2 .settings-accordion { margin-top: 14px; padding: 8px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void-2); }
.ui2 .settings-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 0; color: var(--bone); list-style: none; cursor: pointer; }
.ui2 .settings-accordion summary::-webkit-details-marker { display: none; }
.ui2 .settings-accordion summary::after { content: '▾'; margin-left: auto; color: var(--trail); font-size: 0.72rem; transition: transform 0.18s; }
.ui2 .settings-accordion[open] summary::after { transform: rotate(180deg); }
.ui2 .settings-accordion[open] summary { margin-bottom: 12px; }

/* — Tabellen + Copy + Lock-Vorschau — */
.ui2 .table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ui2 .table-search { width: min(360px, 100%); margin: 0; }
.ui2 .data-table { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
/* minmax(0,…)-Spalten + min-width:0 (REGEL 1): nackte fr-Spalten koennen nicht unter die
   Wunschbreite ihres Inhalts — lange Nutzernamen/Betreffs in der Tickets-Liste blaehten die
   Spalten auf und .data-table (overflow:hidden) schnitt sie wortlos ab. */
.ui2 .table-row { display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.6fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ui2 .table-row > * { min-width: 0; }
.ui2 .table-row:first-child { border-top: 0; }
.ui2 .compact .table-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto; }
.ui2 .table-head { color: var(--muted); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ui2 .copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 10px; }
.ui2 .copy-row code { overflow: hidden; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--bone); font-family: 'Geist Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.ui2 .lock-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 16px; background: repeating-linear-gradient(135deg, rgba(128, 128, 128, 0.06) 0 8px, transparent 8px 16px), var(--void-2); }
.ui2 .lock-preview button:disabled { cursor: not-allowed; opacity: 0.55; }

/* — Overlay-Builder + Canvas/OBS (Screen-Sim bewusst dunkel, themen-unabhängig) — */
.ui2 .overlay-builder { display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; gap: 14px; }
.ui2 .widget-list { display: grid; align-content: start; gap: 8px; }
.ui2 .widget { display: flex; justify-content: space-between; min-height: 52px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void-2); color: var(--bone); }
.ui2 .widget.active { border-color: rgba(217, 118, 6, 0.58); }
.ui2 .widget span { color: var(--muted); font-size: 0.8rem; }
.ui2 .canvas-panel { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #0f1114; }
.ui2 .canvas-stage { position: relative; min-height: 440px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(rgba(232, 232, 232, 0.035) 1px, transparent 1px) 0 0 / 100% 36px, linear-gradient(90deg, rgba(232, 232, 232, 0.03) 1px, transparent 1px) 0 0 / 36px 100%, radial-gradient(circle at 70% 30%, rgba(0, 66, 114, 0.42), transparent 34%), #15181c; }
.ui2 .canvas-badge, .ui2 .canvas-chat, .ui2 .canvas-counter { position: absolute; border: 1px solid rgba(232, 232, 232, 0.16); border-radius: var(--radius); background: rgba(17, 19, 21, 0.78); backdrop-filter: blur(12px); }
.ui2 .canvas-badge { top: 18px; left: 18px; padding: 10px 12px; }
.ui2 .canvas-chat { left: 18px; bottom: 18px; width: 45%; padding: 14px; }
.ui2 .canvas-counter { right: 18px; bottom: 18px; padding: 18px; color: var(--accent); font-family: 'Geist Mono', monospace; font-size: 1.3rem; }
.ui2 .obs-preview { min-height: 178px; padding: 14px; border-radius: var(--radius); background: #0d1013; }
.ui2 .obs-widget { display: grid; align-content: center; width: 100%; height: 150px; padding: 16px; border: 1px solid rgba(217, 118, 6, 0.46); border-radius: var(--radius); background: linear-gradient(135deg, rgba(0, 66, 114, 0.55), rgba(217, 118, 6, 0.18)); }
.ui2 .obs-widget strong { font-family: 'Big Shoulders Display', sans-serif; font-size: 2.4rem; line-height: 1; }
.ui2 .draw-stage { display: grid; place-items: center; min-height: 280px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(rgba(232, 232, 232, 0.035) 1px, transparent 1px) 0 0 / 100% 28px, radial-gradient(circle at center, rgba(217, 118, 6, 0.2), transparent 60%), #121416; }
.ui2 .draw-number { font-family: 'Big Shoulders Display', sans-serif; font-size: 7rem; line-height: 0.9; }
.ui2 .draw-feed { display: flex; gap: 10px; }
.ui2 .draw-feed p { margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(128, 128, 128, 0.08); }

/* — Login (zentriert) — */
.ui2 .login-frame { display: grid; place-items: center; min-height: calc(100vh - 120px); }
.ui2 .login-card { display: grid; gap: 14px; width: min(420px, 100%); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void-2); box-shadow: var(--shadow-2); }
.ui2 .login-brand { margin-bottom: 10px; }

/* — Operator-Akzent + Listen — */
.ui2 .operator-screen .panel { border-color: rgba(0, 66, 114, 0.38); }
.ui2 .setup-list, .ui2 .security-list { display: grid; gap: 10px; }
.ui2 .setup-list { margin: 0; padding-left: 22px; color: var(--muted); }
.ui2 .setup-list .done { color: var(--labor); }
.ui2 .security-list p { margin: 0; }

/* — Interaktions-States (P3-Audit: Hover/Active fuer echte Bedienung) — */
.ui2 .nav-item:hover { background: rgba(128, 128, 128, 0.06); }
.ui2 .primary-button:hover { filter: brightness(1.06); }
.ui2 .secondary-button:hover, .ui2 .ghost-button:hover, .ui2 .mini-button:hover, .ui2 .icon-button:hover, .ui2 .tab:hover, .ui2 .widget:hover { border-color: var(--accent); }
.ui2 .table-row:not(.table-head):hover { background: rgba(128, 128, 128, 0.04); }

/* — Kompakt-Modus (Body-Klasse): kleinere Kopf-Headline — */
.compact-ui .ui2 .view-head h1, .compact-ui .ui2 .feature-head h1, .ui2.compact-ui .view-head h1, .ui2.compact-ui .feature-head h1 { font-size: 3.05rem; }
.compact-ui .ui2 .feature-head, .ui2.compact-ui .feature-head { padding: 14px; }

/* ════════════════════════════════════════════════════════════════════════
   KOMPAKT-MODUS · Dichte-Pass (additiv, NUR unter .compact-ui)
   Macht den „Kompakt"-Toggle sichtbar wirksam: ~25-35% weniger Padding/Gaps/
   vertikale Abstaende ueber das ganze Panel. Jede Regel ist .compact-ui-gescopet
   → Normal-Modus bleibt byte-identisch. Tokens an P1 angelehnt (8px-Raster,
   --radius bleibt). Schriftgroessen nur leicht reduziert (lesbar).
   ──────────────────────────────────────────────────────────────────────── */

/* Rahmen + Topbar: weniger Aussenluft */
.compact-ui .ui2 .app-frame { padding: 14px; }
.compact-ui .ui2 .topbar { margin-bottom: 14px; padding: 8px; }

/* View-/Feature-Kopf: engerer Abstand zum Inhalt + zur Headline */
.compact-ui .ui2 .view-head, .compact-ui .ui2 .feature-head { gap: 14px; margin-bottom: 14px; }
.compact-ui .ui2 .feature-head, .ui2.compact-ui .feature-head { padding: 12px; }
.compact-ui .ui2 .feature-title { gap: 12px; }
.compact-ui .ui2 .feature-icon { width: 48px; height: 48px; }

/* Grids: kleinere Luecken + weniger Trennabstand */
.compact-ui .ui2 .metric-grid,
.compact-ui .ui2 .content-grid,
.compact-ui .ui2 .feature-layout,
.compact-ui .ui2 .settings-cards,
.compact-ui .ui2 .state-grid { gap: 10px; }
.compact-ui .ui2 .metric-grid { margin-bottom: 10px; }
.compact-ui .ui2 .quick-actions { gap: 8px; }

/* Karten: kompaktere Innenraender + niedrigere Mindesthoehen */
.compact-ui .ui2 .panel { padding: 12px; }
.compact-ui .ui2 .panel-head { margin-bottom: 10px; }
.compact-ui .ui2 .metric-card { min-height: 104px; padding: 12px; }
.compact-ui .ui2 .metric-card strong { margin: 8px 0 6px; font-size: 1.9rem; }
.compact-ui .ui2 .state-card { min-height: 140px; padding: 12px; }
.compact-ui .ui2 .state-card strong { margin: 16px 0 6px; }

/* Ueberschriften: dezent kleiner (bleibt klar lesbar) */
.compact-ui .ui2 h2 { font-size: 0.98rem; }

/* Buttons / Tabs: engere Reihen */
.compact-ui .ui2 .button-row { gap: 8px; margin-top: 10px; }
.compact-ui .ui2 .tabs { margin-bottom: 10px; }

/* Formulare: weniger vertikaler Abstand, flachere Felder */
.compact-ui .ui2 .form-grid { gap: 8px; }
.compact-ui .ui2 .field, .compact-ui .ui2 .check-row { gap: 5px; }
.compact-ui .ui2 .field input,
.compact-ui .ui2 .field select,
.compact-ui .ui2 .field textarea { min-height: 36px; padding: 7px 9px; }
.compact-ui .ui2 .field textarea { min-height: 76px; }

/* Settings-Akkordeon (.ui2) + In-View-Konfig (Legacy-Klassen): enger stapeln */
.compact-ui .ui2 .settings-accordion { margin-top: 10px; padding: 6px 12px 12px; }
.compact-ui .ui2 .settings-accordion[open] summary { margin-bottom: 8px; }
.compact-ui .set-field { gap: 0.15rem; }
.compact-ui .acc-head { padding: 0.4rem 0.7rem; }
.compact-ui .acc-body { padding: 0.4rem 0.8rem 0.7rem; gap: 0.45rem; }
.compact-ui .view-config { gap: 0.45rem; margin-top: 12px; }

/* Sidebar-Nav: flachere Zeilen (klar sicher: nur Hoehe/Padding) */
.compact-ui .ui2 .nav-item { min-height: 32px; padding: 6px 10px; }

/* — Responsive (Mockup-Breakpoints ≤1180 / ≤860) — */
@media (max-width: 1180px) {
  .ui2 h1 { font-size: 3.8rem; }
  .ui2 .metric-grid, .ui2 .settings-cards, .ui2 .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui2 .overlay-builder { grid-template-columns: 200px minmax(0, 1fr); }
  .ui2 .overlay-builder .inspector { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ui2 .design-shell { display: block; padding-bottom: 64px; }
  .ui2 .sidebar { display: none; }
  .ui2 .app-frame { padding: 12px; }
  .ui2 .topbar { align-items: stretch; }
  .ui2 .mobile-menu { display: block; width: auto; padding-inline: 10px; }
  .ui2 .topbar-actions .ghost-button { display: none; }
  .ui2 .account-chip div, .ui2 .server-select small { display: none; }
  .ui2 .kw-titlebar, .ui2 .view-head, .ui2 .feature-head, .ui2 .lock-preview, .ui2 .panel-head { display: grid; min-width: 0; }
  .ui2 .feature-title { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; }
  .ui2 .feature-title p { max-width: min(24ch, calc(100vw - 130px)); }
  .ui2 h1 { font-size: 2.45rem; line-height: 0.96; }
  .ui2 .metric-grid, .ui2 .content-grid, .ui2 .feature-layout, .ui2 .form-grid, .ui2 .settings-cards, .ui2 .state-grid, .ui2 .overlay-builder, .ui2 .quick-actions, .ui2 .dash-2col, .ui2 .chatqa-grid { grid-template-columns: 1fr; }
  .ui2 .draw-feed, .ui2 .table-toolbar { display: grid; }
  .ui2 .data-table { gap: 10px; border: 0; }
  .ui2 .table-row, .ui2 .compact .table-row { grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: var(--radius); }
  .ui2 .table-head { display: none; }
  .ui2 .canvas-stage { min-height: 360px; }
  .ui2 .canvas-chat { width: calc(100% - 36px); }
  .ui2 .bottom-nav { position: fixed; right: auto; bottom: 10px; left: 10px; z-index: 20; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: min(360px, calc(100% - 20px)); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void-2); }
  .ui2 .bottom-nav button { min-width: 0; min-height: 30px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(128, 128, 128, 0.08); color: var(--bone); font: inherit; font-size: 0.78rem; }
  .ui2 .bottom-nav button.active { border-color: rgba(217, 118, 6, 0.58); background: rgba(217, 118, 6, 0.16); }
}

/* ════════════════════════════════════════════════════════════════════════
   PANEL-REDESIGN · P3-Komponenten (additiv, .ui2-gescopet)
   Fehlende Primitive fuer die P3-Views (Auftrag Chat II/Design-Lane). Markup-
   Kontrakt je Komponente im Lieferbericht. Tokens wie P1 (--radius=12, Trail/
   Maritime). srv-ava = exakte Spec; live-pill/scenes-grid/inspector = mit III
   abstimmbare Primitive (additiv/inert, degradieren graceful).
   ════════════════════════════════════════════════════════════════════════ */

/* Topbar: rundes Server-Icon — <img class="srv-ava"> im .server-select */
.ui2 .srv-ava { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--void); }

/* Overlay-Builder: Inspector-Spalte (3. Spalte ~270px) — Panel-artig, oben buendig */
.ui2 .inspector { display: grid; align-content: start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void-2); }

/* Stream-Overlays: Szenen-Raster (START/BRB/LIVE/END) — auto-fill; Kinder = .panel o. eigene Karte */
.ui2 .scenes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

/* Giveaway/Stream: LIVE-Pill (Trail-orange Marken-Konvention, dezenter Puls) */
.ui2 .live-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 10px; border: 1px solid rgba(217, 118, 6, 0.55); border-radius: var(--radius-pill); color: var(--accent); background: rgba(217, 118, 6, 0.10); font-family: 'Geist Mono', monospace; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.ui2 .live-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--trail); animation: ui2-livepulse 1.4s ease-in-out infinite; }
@keyframes ui2-livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .ui2 .live-pill::before { animation: none; } }

/* Feature-Übersicht (Start → Features): Modul-Zeile mit Icon, klickbarem Namen, An/Aus-Schalter. */
.ui2 .fov-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void); margin-bottom: 8px; }
.ui2 .fov-ico { flex: 0 0 auto; font-size: 1.15rem; line-height: 1; }
.ui2 .fov-name { flex: 1 1 auto; min-width: 0; text-align: left; padding: 0; border: none; background: none; color: var(--bone); font: inherit; font-size: 0.95rem; cursor: pointer; }
.ui2 .fov-name:hover { color: var(--trail); }
.ui2 .fov-sw { flex: 0 0 auto; }

/* ════ Dashboard-Erweiterungen (.ui2): #6 Broadcast-Banner · #2 „Das ist neu" · #3 Radar-Diagramm ════ */
/* #6 Broadcast-Banner: prominent oben, Maritime/Trail-Akzent (Operator → Kunden-Info). */
.ui2 .dash-broadcast { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; padding: 14px 18px; border: 1px solid rgba(217, 118, 6, 0.55); border-left: 4px solid var(--trail); border-radius: var(--radius); background: linear-gradient(135deg, rgba(217, 118, 6, 0.14), rgba(0, 66, 114, 0.20)); }
.ui2 .dash-broadcast-ico { flex: 0 0 auto; font-size: 1.4rem; line-height: 1.4; }
.ui2 .dash-broadcast-body { min-width: 0; }
.ui2 .dash-broadcast-text { margin: 0; color: var(--bone); font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.ui2 .dash-broadcast-until { margin: 4px 0 0; color: var(--muted); font-family: 'Geist Mono', monospace; font-size: 0.74rem; }

/* #2 „Das ist neu": Stichpunktliste + hervorgehobene Frage. */
.ui2 .dash-whatsnew { margin: 0; padding-left: 1.15rem; color: var(--bone); line-height: 1.6; }
.ui2 .dash-whatsnew:empty { display: none; }
.ui2 .dash-whatsnew li { margin: 0.2rem 0; overflow-wrap: anywhere; }
.ui2 .dash-whatsnew li::marker { color: var(--trail); }
.ui2 .dash-whatsnew-q { margin: 12px 0 0; padding: 10px 12px; border: 1px solid rgba(0, 66, 114, 0.55); border-radius: var(--radius); background: rgba(0, 66, 114, 0.18); color: var(--bone); font-weight: 600; overflow-wrap: anywhere; }
/* Roadmap (rechte Spalte): GLEICHE Optik wie „Das ist neu" (vorher muted/small → wirkte wie ein anderes Feld). */
.ui2 .dash-roadmap { margin: 0; padding-left: 1.15rem; color: var(--bone); line-height: 1.6; }
.ui2 .dash-roadmap:empty { display: none; }
.ui2 .dash-roadmap li { margin: 0.2rem 0; overflow-wrap: anywhere; }
.ui2 .dash-roadmap li::marker { color: var(--trail); }
/* Oranger Trenner zwischen „Das ist neu" (links) und Roadmap (rechts); mobil als Oberkante. */
.ui2 .dash-footer-road { border-left: 2px solid var(--trail); padding-left: 16px; }
@media (max-width: 760px) { .ui2 .dash-footer-road { border-left: 0; border-top: 2px solid var(--trail); padding-left: 0; padding-top: 14px; } }

/* Mini-Markdown in Banner/„Das ist neu"/Frage (renderMarkdown): Links Akzent + Unterstrich, fett/kursiv dezent. */
#dash-broadcast-text a, #dash-whatsnew-list a, #dash-whatsnew-q a { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; }
#dash-broadcast-text strong, #dash-whatsnew-list strong, #dash-whatsnew-q strong { font-weight: 700; }
#dash-broadcast-text em, #dash-whatsnew-list em, #dash-whatsnew-q em { font-style: italic; }

/* #3 Radar-Diagramm: handgemachtes SVG (Maritime = Nachrichten, Trail = Aktive). */
.ui2 .radar-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; color: var(--muted); }
.ui2 .radar-legend .rl-msgs { color: var(--maritime-lt); }
.ui2 .radar-legend .rl-act { color: var(--trail); }
.ui2 .radar-chart { display: block; width: 100%; height: 130px; }
.ui2 .radar-axis { stroke: var(--line); stroke-width: 1; }
.ui2 .radar-line-msgs { stroke: var(--maritime-lt); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ui2 .radar-line-act { stroke: var(--trail); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ui2 .radar-dot-msgs { fill: var(--maritime-lt); }
.ui2 .radar-dot-act { fill: var(--trail); }
.ui2 .radar-now { margin: 8px 0 0; }

/* P3: Host für feature-eigene Konfig-Sections, die per mountSettingsGroup() in eine View
   gerendert werden (gleiche .acc-item-Sections wie im Konfig-Tab — hier vertikal gestapelt,
   damit es als „Einstellungen"-Block der View liest). Additiv, kollidiert mit nichts. */
.view-config { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 18px; max-width: none; } /* v642: volle Breite (Owner-Wunsch, jede Seite 100%) */
.view-config:empty { display: none; }
.view-config .acc-item.open { grid-column: auto; }

/* P3-Angleich: alte Konfig-Sektionen (.acc-item, z. B. „14.0 Onboarding & Verify") ans neue ui2-Panel-Design.
   Additiv + .ui2-scoped (kein Markup-/JS-Eingriff) -> trifft ALLE Inline-Konfigs (onboarding/post/notify/
   commands/alerts/multichat) UND die zentrale Konfiguration auf einmal. */
.ui2 .acc-item { border-radius: var(--radius); background: var(--surface, var(--void-2)); box-shadow: var(--shadow-1), inset 0 1px 0 var(--hi); }
.ui2 .acc-item.open { border-color: var(--accent); }
.ui2 .acc-caret { color: var(--trail); transition: transform 0.18s; }
.ui2 .acc-caret.open { transform: rotate(180deg); }
/* Sektion-Titel wie eine Panel-Überschrift (Big Shoulders, uppercase) — damit Konfig-Sektionen wie „Onboarding & Verify" optisch zu den .panel-Karten passen. */
.ui2 .acc-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.05rem; }
/* Konto-/System-Menü: restliche Alt-Controls ans neue Design (die Menü-Punkte selbst deckt .ui2 .acc-item ab). */
.ui2 .set-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface, var(--void-2)); }
/* P3-Angleich (Layout-Sweep): alte Formular-Felder (.set-field) in den .ui2-Views (z. B. „Auto-Nachrichten"
   in Benachrichtigungen, „Neuer Befehl") auf die Maße der neuen .ui2 .field-Felder ziehen — gleicher Input-Look
   (Radius/Höhe/Padding), gleicher Label-Stil, einheitlicher Vertikalabstand. Additiv + .ui2-gescopet, kein
   Markup-/JS-Eingriff, keine IDs/data-skey angefasst. .set-check bleibt unberührt (eigener Box-Look oben). */
.ui2 .set-field { gap: 7px; margin-bottom: 12px; color: var(--muted); font-size: 0.88rem; }
.ui2 .set-field > span { font-size: 0.88rem; color: var(--muted); }
.ui2 .set-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.ui2 .set-field select,
.ui2 .set-field textarea { min-height: 42px; padding: 9px 10px; border-radius: var(--radius); margin: 0; }
.ui2 .set-field textarea { min-height: 96px; resize: vertical; }
/* Inline-Variante (z. B. „Alle … Min") behält ihre Reihen-Ausrichtung — nur Höhe/Radius mitgenommen. */
.ui2 .set-field.inline { gap: 0.5rem; margin-bottom: 0; }
.ui2 .legal-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0; }
/* Server-Switcher: Dropdown-Pfeil — signalisiert das Menü und dreht beim Öffnen (CSS-only via :has; ohne :has bleibt er statisch sichtbar). */
.ui2 .srv-caret { display: inline-block; align-self: center; margin-left: 0.4rem; color: var(--muted); font-size: 0.7rem; transition: transform 0.18s; }
.ui2 .server-select-wrap:has(#srv-menu:not(.hidden)) .srv-caret { transform: rotate(180deg); color: var(--trail); }
/* Features-View: Live-Ticker (laufende Leiste aller Features; aktive in Trail-Farbe). a11y: reduced-motion stoppt. */
.ui2 .feat-ticker { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface, var(--void-2)); padding: 0.5rem 0; margin-bottom: 1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ui2 .feat-tick-track { display: inline-flex; gap: 1.5rem; white-space: nowrap; padding-left: 1.5rem; will-change: transform; animation: featTick 40s linear infinite; }
.ui2 .feat-ticker:hover .feat-tick-track { animation-play-state: paused; }
.ui2 .feat-tick-item { font-size: 0.82rem; color: var(--muted); }
.ui2 .feat-tick-item.on { color: var(--trail); font-weight: 600; }
@keyframes featTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ui2 .feat-tick-track { animation: none; } }
/* Kachel-Konsistenz: .card unter ui2 exakt auf .panel-Maß. Padding war var(--sp-5) + ohne Compact-Override
   -> uneinheitlich ggü. .panel (18px / compact 12px). Box (Border/Radius/Surface/Shadow) war bereits gleich. */
.ui2 .card { padding: 18px; }
.compact-ui .ui2 .card { padding: 12px; }
/* Einheitlicher Stapel-Abstand fuer direkt gestapelte Kacheln UND Layout-Container (Grids/Inline-Konfig)
   auf View-Ebene (= Grid-Gap 14px); Full-Height-Views ausgenommen. Schliesst die „mal Abstand, mal keiner"-
   Luecke zwischen z. B. #notify-cards (.content-grid) und der folgenden „Auto-Nachrichten"-Karte sowie vor
   der Inline-Konfig (.view-config). Additiv, .ui2-gescopet. */
.ui2 .view:not(.dash-100vh) > .panel,
.ui2 .view:not(.dash-100vh) > .card,
.ui2 .view:not(.dash-100vh) > .content-grid,
.ui2 .view:not(.dash-100vh) > .post-grid,
.ui2 .view:not(.dash-100vh) > .notify-cards,
.ui2 .view:not(.dash-100vh) > .settings-accordion,
.ui2 .view:not(.dash-100vh) > .view-config { margin-bottom: 14px; }
/* .view-config brachte zusaetzlich margin-top:18px mit -> mit dem 14px-Vorgaenger-Abstand doppelt.
   Im .ui2-View-Kontext den Oberabstand auf die einheitliche Linie ziehen (kein Doppel-Gap). */
.ui2 .view:not(.dash-100vh) > .view-config { margin-top: 0; }
/* Letztes Block-Element der View braucht keinen Nachlauf (vermeidet ueberschuessigen Bodenabstand). */
.ui2 .view:not(.dash-100vh) > .panel:last-child,
.ui2 .view:not(.dash-100vh) > .card:last-child,
.ui2 .view:not(.dash-100vh) > .view-config:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════════
   ULTRAWIDE (≥1900px / ≥2560px) — rein additiv, .ui2-/Content-gescopet
   ────────────────────────────────────────────────────────────────────────
   Problem auf sehr breiten Monitoren: der Content-Host (.content, flex:1)
   streckt sich voll bis ~2500px+, Karten/Tabellen werden einzeln extrem
   breit, viel Whitespace. Loesung = HYBRID, nur ab Ultrawide:
   1) Lese-Spalte deckeln + zentrieren  → .content (live) + .ui2 .app-frame
      (P2-Shell, falls gemountet) bekommen max-width + margin-inline:auto.
      Sidebar (250px / 292px, flex-shrink:0 bzw. eigene Grid-Spalte) bleibt
      fix links daneben; der Drawer (flex-Sibling, push) recentert weich.
   2) Grids dichter  → mehr Spalten / groessere min-Spaltenbreite, damit
      Karten in der (immer noch breiten) Spalte nicht vereinzelt riesig sind.
   Keine bestehende Regel veraendert, keine Schrift-/Radius-Tokens angefasst.
   Normal-/Mobil-Layout (<1900px) bleibt unberuehrt.
   ════════════════════════════════════════════════════════════════════════ */
/* ULTRAWIDE: Die frueheren min-1900/min-2560-Dichte-Stufen (metric 6-spaltig, settings 4/5-spaltig)
   stammten aus der „full content 100%"-Aera (Owner 2026-07-14). Seit v713 (Owner 2026-07-17,
   die JUENGERE Entscheidung) ist der Content per --shell-max auf 1440px GEDECKELT — die Stufen
   feuerten aber weiter auf die VIEWPORT-Breite und quetschten 6 Karten in die 1440er-Spalte
   (~215px je Karte). Ersatzlos raus: im Deckel gilt die normale Dichte auf jeder Schirmbreite.
   Ebenfalls raus: Regeln auf .notify-cards — die Klasse existiert im Markup nicht mehr. */

/* ════════════════════════════════════════════════════════════════════════
   PANEL-UMBAU · Lane II — neue, additive Primitive (Markup-Kontrakt mit Lane III)
   Klassen: dash-100vh · dash-footerbar · ovb-cards3 · health-split.
   Bewusst NICHT .ui2-gescopet (Lane III haengt sie gezielt an Wrapper) — kollidiert
   mit nichts Bestehendem. Tokens wie Rest des Files (--radius/--line/--muted).
   ════════════════════════════════════════════════════════════════════════ */

/* #2 Dashboard fuellt exakt die Hoehe: min-height (kein height-Cut) + Flex-Spalte,
   damit der Inhalt die Hoehe fuellt und der Abschluss unten sitzt; bei kleinen
   Aufloesungen wird nichts abgeschnitten (waechst ueber 100vh hinaus). */
.dash-100vh { display: flex; flex-direction: column; }

/* #3 Dashboard-Abschluss: 50/50, dezent/abgerundet/flach (gedaempft). →1 Spalte schmal. */
.dash-footerbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(128, 128, 128, 0.05); }
@media (max-width: 760px) { .dash-footerbar { grid-template-columns: 1fr; } }

/* Sticky Notes in „Das ist neu" — fest angepinnte Highlights (📌), oben + hervorgehoben.
   Die dynamische Patchnotes-Liste darunter bleibt unberuehrt. Trail-Akzent, Post-it-Anmutung.
   Container ist leer → display:none (kein Leerabstand, wenn keine Notes gesetzt sind). */
.dash-sticky-wrap { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.dash-sticky-wrap:empty { display: none; }
.dash-sticky-note { position: relative; padding: 10px 12px 10px 34px; border: 1px solid rgba(217, 118, 6, 0.40); border-left: 3px solid var(--trail); border-radius: var(--radius); background: rgba(217, 118, 6, 0.09); color: var(--bone); font-size: 0.9rem; line-height: 1.45; }
.dash-sticky-note::before { content: '📌'; position: absolute; left: 11px; top: 9px; font-size: 0.95rem; line-height: 1; }
.dash-sticky-note strong { color: var(--trail); font-weight: 800; }

/* #4 3er-Card-Raster (Quellen & Links + Overlays): gleiche Hoehe (stretch + height:100% auf Karten).
   ≤1100px → 2 Spalten, ≤760px → 1 Spalte. */
.ovb-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.ovb-cards3 > * { height: 100%; }
/* Die alte Eigen-Leiter 1100/760 ist raus: .ovb-cards3 haengt immer an .tk-grid in einer
   .ui2-View (ovbuilder.js), und dort gewinnt der spezifischere Alias-Block mit der
   kanonischen 1180/860-Leiter ohnehin — zwei Leitern fuer dieselbe Klasse waren nur Verwirrung. */

/* #9 1337HEALTH 50/50 (falls eigene Klasse statt content-grid genutzt wird) — analog content-grid. */
.health-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 860px) { .health-split { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   KW UI · DIE LINIE — Shells & Cards. EINZIGE Quelle fuer Breite + Raster.
   ────────────────────────────────────────────────────────────────────────
   VOKABULAR — mehr gibt es nicht, mehr braucht es nicht:

     .kw-titlebar                  Titelleiste der View   (alle Views gleich hoch)
     .kw-subnav > .kw-subnav-tab   Reiterleiste           (EINE Groesse, ueberall)
     .kw-content                   Content-Block          — IMMER 100% breit
     .kw-content.half              content 1/2 1/2        → ≤860  1/1
     .kw-content.third             content 1/3 1/3 1/3    → ≤1180 1/2 → ≤860 1/1
     .kw-content.quarter           content 1/4 ×4         → ≤1180 1/2 → ≤860 1/1
     .kw-content.auto              selbstfuellend (keine feste Spaltenzahl)
     .kw-card                      DIE Karte (Rahmen/Radius/Padding/Stack)
     Zusatz: .stretch = alle Karten einer Reihe gleich hoch.

   RESPONSIVE ist Teil der Klasse — NICHT der Seite. Eine Karte 1/3 bricht von
   allein auf 1/2 und dann auf 1/1. Nie wieder pro Seite nachbauen.

   STELLSCHRAUBEN (Tokens, direkt darunter) — hier drehen, nirgends sonst:
     --kw-gap · --kw-titlebar-min · --kw-subnav-size · --kw-subnav-pad
   Beispiel: „Sub-Nav groesser" = --kw-subnav-size aendern. EIN Wert, alle Seiten.

   REGEL 1 — Spalten IMMER minmax(0, 1fr). Ein nacktes `1fr` heisst in Wahrheit
     minmax(AUTO, 1fr): der auto-Boden verbietet der Spalte, schmaler als ihr
     Inhalt zu werden. Ein <input>, eine mono-OBS-URL oder ein nowrap-Chip
     drueckt sie dann breiter → daher kam „das erste Feld ist immer groesser".
   REGEL 2 — In neuen Bloecken NIE ein eigenes grid-template-columns, nie ein
     Inline-Flex-Layout. Nur dieses Vokabular. Cards sind Cards, Shells sind Shells.
   REGEL 3 — Alt-Klassen unten sind ALIASSE auf exakt dieselben Definitionen
     (kw-row cols-N, content-grid, feature-layout, dash-2col, ovs-card …).
     Dadurch erben sie den korrekten Boden, ohne dass Markup angefasst wird.
   ════════════════════════════════════════════════════════════════════════ */
.ui2 .kw-row { display: grid; gap: var(--kw-gap, 14px); align-items: start; width: 100%; }
.ui2 .kw-row > * { min-width: 0; }
.ui2 .kw-row.auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ui2 .kw-row.cols-1 { grid-template-columns: 1fr; }
.ui2 .kw-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui2 .kw-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui2 .kw-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui2 .kw-row.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ui2 .kw-row.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ui2 .kw-row.stretch { align-items: stretch; }
.ui2 .kw-row.stretch > * { height: 100%; }
@media (max-width: 1180px) {
  .ui2 .kw-row.cols-6, .ui2 .kw-row.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui2 .kw-row.cols-4, .ui2 .kw-row.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ui2 .kw-row.cols-2, .ui2 .kw-row.cols-3, .ui2 .kw-row.cols-4,
  .ui2 .kw-row.cols-5, .ui2 .kw-row.cols-6, .ui2 .kw-row.auto { grid-template-columns: 1fr; }
}

/* ── STELLSCHRAUBEN — hier drehen, nicht in den Views. „Sub-Nav groesser" = EIN Wert. ── */
.ui2 {
  --kw-gap: 14px;            /* Abstand zwischen Karten/Spalten */
  --kw-titlebar-min: 150px;  /* Hoehe der Titelleiste (alle Views gleich) */
  --kw-subnav-size: 1.12rem; /* Schriftgroesse Sub-Nav Ebene 1 (Hub-Tabs) — EINZIGER Ort */
  --kw-subnav-pad: 0.6rem 1.25rem 0.8rem;
  --kw-subnav2-size: 0.98rem; /* Ebene 2 (Buendel-Leiste) — hier drehen, nicht in den Views */
  --kw-subnav3-size: 0.86rem; /* Ebene 3 (z. B. Goals) */
  --kw-tile: 260px;          /* Mindest-Kachel fuer .auto-Listen — pro Liste ueberschreibbar */
}

/* ── TITLEBAR: die Titelleiste einer View. Ueberall gleich hoch. ── */
.ui2 .kw-titlebar, .ui2 .view-head, .ui2 .feature-head { min-height: var(--kw-titlebar-min); }
@media (max-width: 860px) { .ui2 .kw-titlebar { min-height: 0; } }

/* ── SUBNAV: EINE Definition fuer alle Reiterleisten. Aliasse: .goals-subnav (.on)
      und .studio-nav (.active) — beide lagen doppelt und identisch in der Datei. ── */
.ui2 .kw-subnav, .ui2 .goals-subnav, .ui2 .studio-nav {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.3rem;
  margin: 1.25rem 0 1.3rem; padding: 0; border-bottom: 1px solid var(--line); background: transparent; }
.ui2 .kw-subnav-tab, .ui2 .goals-tab, .ui2 .studio-nav .studio-tab {
  appearance: none; border: 0; background: transparent; color: var(--muted, #9aa3ad); font: inherit;
  font-size: var(--kw-subnav-size); font-weight: 700; letter-spacing: 0.015em; padding: var(--kw-subnav-pad);
  cursor: pointer; line-height: 1; border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 0;
  transition: color 0.15s, border-color 0.15s; }
.ui2 .kw-subnav-tab:hover, .ui2 .goals-tab:hover, .ui2 .studio-nav .studio-tab:hover {
  color: var(--ink, #e8e8e8); border-bottom-color: var(--ash, #6b7280); }
.ui2 .kw-subnav-tab.on, .ui2 .kw-subnav-tab.active,
.ui2 .goals-tab.on, .ui2 .studio-nav .studio-tab.active {
  color: var(--trail, #d97706); border-bottom-color: var(--trail, #d97706); font-weight: 800;
  text-shadow: 0 0 16px rgba(217, 119, 6, 0.35); }

/* ── SUBNAV-HIERARCHIE (Owner 2026-07-27): drei Ebenen, drei klar verschiedene Formsprachen —
      Ebene 1 .studio-nav       = grosse Unterstrich-Tabs (Definition oben, unveraendert),
      Ebene 2 .kw-bundle-strip  = eingerueckte Chip-Leiste mit ↳-Marker, aktiv = GEFUELLTER Chip,
      Ebene 3 .goals-subnav     = kleinste Mono-Chips, aktiv = OUTLINE + Tint (keine Fuellung).
   So liest sich die Leiste als Untermenue der aktiven Ebene darueber — nicht als verrutschtes Hauptmenue. */
.ui2 .kw-bundle-strip {
  border: 1px solid var(--line); background: var(--void-2);
  padding: 0.4rem 0.6rem; gap: 0.35rem; margin: -0.5rem 0 1.3rem; align-items: center; }
.ui2 .kw-bundle-strip::before {
  content: '↳'; font-family: 'Geist Mono', monospace; font-size: 1rem; color: var(--faint);
  padding: 0 0.5rem 0 0.2rem; opacity: 0.75; }
.ui2 .kw-bundle-strip .kw-subnav-tab {
  font-size: var(--kw-subnav2-size); font-weight: 700; letter-spacing: 0.005em;
  padding: 0.5rem 1.05rem; border: 1px solid var(--line); background: var(--void);
  margin-bottom: 0; color: var(--muted); transition: color 0.15s, background 0.15s, border-color 0.15s; }
.ui2 .kw-bundle-strip .kw-subnav-tab:hover {
  color: var(--bone); border-color: var(--line-2); background: var(--void-3, var(--void-2)); }
.ui2 .kw-bundle-strip .kw-subnav-tab.on {
  color: var(--void); background: var(--trail); border-color: var(--trail); text-shadow: none; }
.ui2 .goals-subnav { border-bottom: 0; margin: 0.25rem 0 1.1rem; gap: 0.4rem; }
.ui2 .goals-tab {
  font-family: 'Geist Mono', monospace; font-size: var(--kw-subnav3-size); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 0.42rem 0.9rem; border: 1px solid var(--line); margin-bottom: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s; }
.ui2 .goals-tab:hover { color: var(--bone); border-color: var(--line-2); border-bottom-color: var(--line-2); }
.ui2 .goals-tab.on {
  color: var(--trail); border-color: var(--trail); background: rgba(217, 118, 6, 0.10);
  font-weight: 700; text-shadow: none; }
@media (max-width: 860px) {
  .ui2 { --kw-subnav2-size: 0.92rem; --kw-subnav3-size: 0.8rem; }
  .ui2 .kw-bundle-strip .kw-subnav-tab { padding: 0.44rem 0.85rem; }
}

/* ── CONTENT: der Content-Block. IMMER 100% breit, kein Deckel.
      .kw-shell bleibt Alias (Vorgaenger-Name). ── */
.ui2 .kw-content, .ui2 .kw-shell { width: 100%; min-width: 0; }

/* ── CONTENT 1/2 · 1/3 · 1/4 — das EINE Raster.
      Greift auf .kw-content (dein Wording) UND .kw-cards (Karten-Reihe). ── */
.ui2 .kw-content.half, .ui2 .kw-content.third, .ui2 .kw-content.quarter, .ui2 .kw-content.auto,
.ui2 .kw-cards { display: grid; gap: var(--kw-gap); align-items: start; width: 100%; }
.ui2 .kw-content.half > *, .ui2 .kw-content.third > *, .ui2 .kw-content.quarter > *,
.ui2 .kw-content.auto > *, .ui2 .kw-cards > * { min-width: 0; }
.ui2 .kw-content.stretch, .ui2 .kw-cards.stretch { align-items: stretch; }
.ui2 .kw-content.stretch > *, .ui2 .kw-cards.stretch > * { height: 100%; }
/* Selbstfuellend (keine feste Spaltenzahl) — auch der Default von .kw-cards.
   Kachelgroesse ueber --kw-tile: eine Liste mit kleineren Kacheln setzt NICHT eine
   neue Klasse, sondern nur den Token (z. B. .ovb-scenebar { --kw-tile: 104px }). */
.ui2 .kw-content.auto, .ui2 .kw-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kw-tile)), 1fr)); }
/* Desktop-Stufe — exakt gleich breite Spalten (REGEL 1: immer minmax(0,1fr)). */
.ui2 .kw-content.half,    .ui2 .kw-cards.half    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui2 .kw-content.third,   .ui2 .kw-cards.third   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui2 .kw-content.quarter, .ui2 .kw-cards.quarter { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── ALIASSE (REGEL 3): Alt-Klassen = dieselbe Definition. Behebt den 50/50-Bug
      GLOBAL — .content-grid/.feature-layout/.dash-2col standen auf `1fr 1fr`
      (= minmax(AUTO,1fr)) und wurden dadurch ungleich. Kein Markup-Umbau noetig. ── */
/* HALF — alles, was in Wahrheit „zwei Haelften" ist. Ein Name waere genug gewesen; es
   sind historisch 14 geworden. Sie zeigen jetzt alle auf DIESE Definition. */
.ui2 .content-grid, .ui2 .feature-layout, .ui2 .dash-2col, .ui2 .acc-cols, .ui2 .post-grid,
.ui2 .counter-grid, .ui2 .ga-grid, .ui2 .tk-grid, .ui2 .tier-pricing, .ui2 .form-grid,
.ui2 .quick-actions, .ui2 .health-split, .ui2 .dash-footerbar, .ui2 #notify-config,
.ui2 .accordion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui2 .content-grid > *, .ui2 .feature-layout > *, .ui2 .dash-2col > *, .ui2 .acc-cols > *,
.ui2 .post-grid > *, .ui2 .counter-grid > *, .ui2 .ga-grid > *, .ui2 .tk-grid > *,
.ui2 .tier-pricing > *, .ui2 .form-grid > *, .ui2 .quick-actions > *, .ui2 .health-split > *,
.ui2 .dash-footerbar > *, .ui2 #notify-config > *, .ui2 .accordion > * { min-width: 0; }

/* THIRD — alles, was in Wahrheit „Drittel" ist.
   ⚠ NICHT dabei: .metric-grid und .settings-cards. Die haben ab 1900px bewusst 6 bzw.
   4 Spalten (Ultrawide-Dichte, weiter oben). Das ist eine gewollte Variante — wuerde ich
   sie hier aliasen, schluege mein Block (steht spaeter) diese Dichte tot. */
.ui2 .ovb-cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui2 .ovb-cards3 > * { min-width: 0; }

/* ── RESPONSIVE-LEITER:  1/3 → 1/2 → 1/1   ·   1/2 → 1/1  ── */
@media (max-width: 1180px) {
  .ui2 .kw-content.third, .ui2 .kw-content.quarter,
  .ui2 .kw-cards.third, .ui2 .kw-cards.quarter,
  .ui2 .ovb-cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ui2 .kw-content.half, .ui2 .kw-content.third, .ui2 .kw-content.quarter, .ui2 .kw-content.auto,
  .ui2 .kw-cards.half, .ui2 .kw-cards.third, .ui2 .kw-cards.quarter, .ui2 .kw-cards.auto, .ui2 .kw-cards,
  .ui2 .content-grid, .ui2 .feature-layout, .ui2 .dash-2col, .ui2 .acc-cols, .ui2 .post-grid,
  .ui2 .counter-grid, .ui2 .ga-grid, .ui2 .tk-grid, .ui2 .tier-pricing, .ui2 .form-grid,
  .ui2 .quick-actions, .ui2 .health-split, .ui2 .dash-footerbar, .ui2 #notify-config,
  .ui2 .accordion, .ui2 .ovb-cards3 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   CARD — DIE Karte. Kontrakt aus ovbuilder.js hierher geholt: er lag dort als
   JS-String und wurde zur Laufzeit injiziert → in der CSS unauffindbar, darum
   hat jeder Block sein eigenes Layout gebaut. Ab jetzt steht er HIER.
   .ovs-* bleiben Aliasse → bestehendes Markup unveraendert gueltig.
   Bewusst UNSCOPED (wie zuvor): Karten stehen auch ausserhalb von .ui2.
   ════════════════════════════════════════════════════════════════════════ */
.kw-card, .ovs-card { display: flex; flex-direction: column; gap: .5rem; background: var(--surface, var(--void-2, #101114)); border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: .85rem .95rem; margin: 0; min-width: 0; }
.kw-card-full, .ovs-full { grid-column: 1 / -1; }
.kw-card-head, .ovs-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kw-card-ico, .ovs-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: var(--radius-sm, 8px); background: rgba(255, 157, 46, .14); color: #ffb85c; display: grid; place-items: center; font-size: .9rem; }
.kw-card-name, .ovs-name { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-card-chip, .ovs-chip { font-size: .62rem; color: var(--muted, #8b8b95); background: rgba(255, 255, 255, .06); padding: 3px 7px; border-radius: var(--radius-xs, 4px); white-space: nowrap; }
.kw-card-gear, .ovs-gear { margin-left: auto; flex: 0 0 30px; width: 30px; height: 30px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--line); background: transparent; color: var(--muted, #8b8b95); cursor: pointer; display: grid; place-items: center; font-size: .95rem; line-height: 1; transition: color .15s, border-color .15s; }
.kw-card-gear:hover, .ovs-gear:hover { color: var(--trail, #d97706); border-color: var(--trail, #d97706); }
.kw-card-sub, .ovs-sub { font-size: .76rem; min-height: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-card-full .kw-card-sub, .ovs-full .ovs-sub { white-space: normal; }
/* Teaser-Streifen im Kartenkopf (Owner 2026-07-19: „mehr an appstore apple store etc.
   orientieren … da immer kurzes teaser pic schmall dezent"). KEIN neues Karten-Bauteil:
   die Karte bleibt .kw-card/.ovs-card, der Teaser ist ihr erstes Kind und zieht sich per
   negativem Rand bis an die Kartenkante — dadurch erbt jede Karte, die einen bekommt, den
   restlichen Kartenstil unveraendert. Der Abstand nach unten kommt aus dem gap der Karte.
   ⚠ Die Rundung oben ist die der Karte MINUS Rahmenstaerke, sonst blitzt in den oberen
   Ecken ein heller Zwickel zwischen Bild und Rahmen durch.
   5:1 haelt den Streifen flach — bei rund 340 px Kartenbreite sind das etwa 68 px. */
.kw-card-teaser, .ovs-teaser { display: block; position: relative; overflow: hidden; aspect-ratio: 5 / 1;
  margin: -.85rem -.95rem 0; background: var(--void-2, #0d1014);
  border-radius: calc(var(--radius, 12px) - 1px) calc(var(--radius, 12px) - 1px) 0 0; }
.kw-card-teaser img, .ovs-teaser img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Weicher Ausklang nach unten: der Streifen laeuft in die Karte aus, statt als Bildkante
   abzubrechen — das ist der „dezent"-Teil, ohne den das Bild die Karte dominiert. */
.kw-card-teaser::after, .ovs-teaser::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55)); }
.kw-card-url, .ovs-url { display: flex; gap: 8px; margin-top: auto; min-width: 0; }
.kw-card-url .cnt-obs-url, .ovs-url .cnt-obs-url { flex: 1; min-width: 0; }
.ovs-copy { flex: 0 0 40px; width: 40px; padding: 0; border: 0; border-radius: var(--radius-sm, 8px); background: var(--trail, #d97706); color: #1b1207; font-size: 1rem; cursor: pointer; display: grid; place-items: center; }
.ovs-copy:hover { filter: brightness(1.1); }
.ovs-save { flex: 0 0 auto; border-radius: var(--radius-sm, 8px); background: var(--trail, #d97706); border: 0; color: #1b1207; font-weight: 700; padding: 0 1.1rem; cursor: pointer; }
.ovs-save:hover { filter: brightness(1.1); }
.ovs-ext { max-width: 820px; }
/* Sektions-Kopf + Legacy-Raster der OBS-Quellen-Seite — 1:1 uebernommen. */
.ovs-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 .9rem; }
.ovs-key { font-size: .62rem; letter-spacing: .06em; color: var(--faint, #5f5f6a); text-transform: uppercase; white-space: nowrap; }
.ovs-sec { display: flex; align-items: baseline; gap: 8px; margin: 1.2rem 0 .55rem; min-width: 0; }
.ovs-sec:first-of-type { margin-top: .2rem; }
.ovs-sec-t { font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; color: #ffb85c; text-transform: uppercase; }
.ovs-sec-d { font-size: .74rem; }
.ovs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; align-items: stretch; }
@media (max-width: 640px) { .ovs-grid { grid-template-columns: 1fr; } }

/* — P7: Nav-Eintraege + Abschnitte mit mehr Luft (war optisch zu eng) — */
.ui2 .nav-group-items { gap: 0.45rem; }
.ui2 .nav-group + .nav-group { margin-top: 0.45rem; }
.ui2 .nav-item { min-height: 42px; padding-top: 12px; padding-bottom: 12px; }
/* Nav-Zwischenüberschrift („Overlays & Alerts", „Werkzeuge", „Mitmachen" …).
   Die Klasse gab es — ihr Aussehen stand 9× INLINE im Markup daneben; die Klasse selbst
   enthielt nur margin-top. Jetzt steht alles hier. `.sep` = mit Trennlinie darüber.
   (Das inline margin-top:0.25rem war totes Recht: das !important hier hat es geschlagen.) */
.ui2 .nav-subhead {
  padding: 0.45rem 0.5rem 0.2rem;
  margin-top: 0.6rem;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
.ui2 .nav-subhead.sep { border-top: 1px solid var(--line); }
.compact-ui .ui2 .nav-item { min-height: 38px; padding-top: 9px; padding-bottom: 9px; }
.compact-ui .ui2 .nav-group-items { gap: 0.35rem; }

/* — P8: einheitliche Hoehe der Seiten-Kopf-Box — JETZT fuer ALLE Koepfe (.view-head + .feature-head),
   egal 1/2/3 Zeilen Beschreibung. min-height = konsistente Mindesthoehe, waechst nie ab.
   (Dashboard/Grundeinstellungen/System nutzen .view-head — vorher ohne Box/Hoehe -> wirkten kleiner.) */
.ui2 .view-head, .ui2 .feature-head { min-height: 150px; }
.compact-ui .ui2 .view-head, .compact-ui .ui2 .feature-head, .ui2.compact-ui .view-head, .ui2.compact-ui .feature-head { min-height: 120px; }
@media (max-width: 860px) { .ui2 .view-head, .ui2 .feature-head { min-height: 0; } }

/* hide&seek: botweit (vom Betreiber) abgeschaltete Features ganz ausblenden — Nav-Eintrag + Karte. */
.goff { display: none !important; }

/* P4: Onboarding-Verify als Schritt-Karten (1→2→3→finish), 2 Spalten via .kw-row cols-2.
   Felder kommen aus setField (.set-field/.set-check/.set-info) — hier nur die Schritt-Optik. */
.ui2 .ob-step { display: flex; flex-direction: column; gap: 10px; }
.ui2 .ob-step-h { display: flex; align-items: center; gap: 9px; margin: 0 0 2px; font-weight: 800; font-size: 1.02rem; color: var(--bone); }
.ui2 .ob-step .kw-step { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--trail); color: #1b1207; font-family: 'Geist Mono', monospace; font-weight: 800; font-size: 0.82rem; }
.ui2 .ob-finish .kw-step { background: var(--labor); color: #06281c; }
.ui2 .ob-step .set-action { margin-top: 2px; }

/* P9: Overlay-Builder-Embed — Szenen-Reiter + iframe (voller Editor im Panel).
   Owner 2026-06-28: Builder-Reiter 1:1 wie der Cockpit-Umschalter (#scene-switcher-cockpit .scene-btn) — eine
   durchgaengige Linie ueber Overlays-Cockpit + Builder. BotDeck-Pad-Optik: Grid, Gradient, 3D-Druck, LED-Leiste,
   Big Shoulders, aktiv = Maritime/Blau. */
.ui2 .ovb-scenebar { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .55rem; margin: 0 0 12px; }
.ui2 .ovb-scene-tab { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 56px; padding: .6rem .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(0,0,0,.14) 72%); color: var(--bone); font-family: 'Big Shoulders Display', system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; line-height: 1.1; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045); transition: transform .06s ease, box-shadow .1s, border-color .12s, background .12s; }
.ui2 .ovb-scene-tab::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: var(--radius-xs); background: var(--accent); opacity: .16; transition: opacity .15s, box-shadow .15s; }
.ui2 .ovb-scene-tab:hover { border-color: var(--ash, #6b7280); }
.ui2 .ovb-scene-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 2px 5px rgba(0,0,0,.4); }
.ui2 .ovb-scene-tab.active { border-color: var(--maritime, #004272); background: linear-gradient(180deg, #15242f 0%, #112030 72%); color: var(--bone); }
.ui2 .ovb-scene-tab.active::before { opacity: 1; background: #3f8fd1; box-shadow: 0 0 8px rgba(63,143,209,.7); }
.ui2 .ovb-frame-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #101216; }
.ui2 #ovb-frame { display: block; width: 100%; height: 78vh; min-height: 560px; border: 0; }

/* P9: Entdecken-Galerie — Filter, Karten, Vorschau-Popup. */
.ui2 .disc-filterbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ui2 .disc-filter-tab { min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(128, 128, 128, 0.08); color: var(--bone); font: inherit; cursor: pointer; }
.ui2 .disc-filter-tab:hover { border-color: var(--accent); }
.ui2 .disc-filter-tab.active { border-color: rgba(217, 118, 6, 0.6); background: var(--trail); color: #1b1207; font-weight: 800; }
.ui2 .disc-card { padding: 0; overflow: hidden; cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.ui2 .disc-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ui2 .disc-thumb { aspect-ratio: 16 / 9; background: #0d1014; overflow: hidden; }
.ui2 .disc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Live-Vorschau-iframe (1920×1080) je Kachel — per JS (fitTplThumbs) auf die Kachelbreite skaliert. */
.ui2 .tpl-card .disc-thumb { position: relative; }
.ui2 .tpl-thumb-frame { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; border: 0; transform-origin: top left; pointer-events: none; }
.ui2 .disc-body { padding: 12px 14px; }
.ui2 .disc-name { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 4px; }
.ui2 .disc-tag { font-family: 'Geist Mono', monospace; font-size: 0.64rem; padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap; }
.ui2 .disc-tag.free { color: var(--labor); background: rgba(110, 231, 183, 0.12); }
.ui2 .disc-tag.prem { color: #e4bf67; background: rgba(228, 191, 103, 0.12); }
.ui2 .disc-tag.tag-active { color: #d97706; background: rgba(217, 118, 6, 0.16); } /* aktiv gesetztes Design */
.ui2 .disc-tag.tag-owned { color: #8cc5e8; background: rgba(140, 197, 232, 0.14); } /* schon im Konto verfuegbar */
.disc-popup { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.6); }
.disc-popup.open { display: flex; }
.disc-popup-card { position: relative; max-width: 1080px; width: 100%; max-height: 90vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--void-2); }
.disc-popup-card > img { width: 100%; display: block; border-bottom: 1px solid var(--line); }
.disc-popup-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.5); color: var(--bone); cursor: pointer; }
.disc-popup-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.disc-popup-body h3 { margin: 0; }
/* Szenen-Vorschau-Grid im Entdecken-Popup: Live-iframe je Szene (per fitTplScenes skaliert) + Link. */
/* min(100%,300px) statt 300px: sonst erzwingt die Mindestkachel unter ~340px Popup-Breite
   horizontalen Scroll IN der Karte (gleiches Schutz-Muster wie .kw-row.auto / .kw-cards). */
.tpl-scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0.8rem; }
.tpl-scene { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: rgba(0,0,0,.2); }
.tpl-scene-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0a0a0a; }
.tpl-scene-frame { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; border: 0; transform-origin: top left; pointer-events: none; }
.tpl-scene-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.4rem 0.55rem; }
.tpl-scene-name { font-size: 0.8rem; font-weight: 700; margin-right: auto; }
/* „→ Builder" (nur diese Szene importieren) neben dem OBS-Link — dezent, kein eigener Farbton. */
.tpl-scene-to-builder { white-space: nowrap; }
/* „✎ Im Builder bearbeiten" unter den OBS-Quellen im Komplett-Overlay-Popup. */
.tpl-edit-row { display: flex; margin-top: 4px; }
/* Gesperrte (kostenpflichtige) Overlays: Vorschau sichtbar, aber mit dezentem 🔒-Schleier —
   klar erkennbar „gesperrt", ohne die Vorschau zu verstecken. */
.tpl-scene-locked .tpl-scene-frame { filter: saturate(0.72) brightness(0.82); }
.tpl-scene-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; background: rgba(8,10,14,0.30); pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════════
   NEUE UI-BAUSTEINE (additiv) — Toast · Confirm · Empty-State · Button-Busy ·
   Level-Namen · Radar-Legende · BotDeck-Embed · A11y-Fokus · Dirty/Unsaved.
   Bewusst NICHT .ui2-gescopet (frontend nutzt die Klassennamen direkt). Nutzt
   die File-Tokens (--void/--void-2/--bone/--maritime/--trail/--labor/--tattoo/
   --line/--muted/--radius*/--shadow*/--ease/--sp-*). Marken-Linienfarben in der
   Radar-Sektion sind bewusst hartkodiert (Discord/Twitch/YouTube CI).
   Aendert/loescht nichts Bestehendes.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1) TOAST ─────────────────────────────────────────────────────────── */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px) translateY(4px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}
.toast-wrap {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 9999;
  display: flex; flex-direction: column; gap: var(--sp-2);
  pointer-events: none; max-width: 92vw;
}
.toast {
  pointer-events: auto;
  position: relative;
  max-width: 340px;
  padding: var(--sp-3) var(--sp-4);
  padding-left: calc(var(--sp-4) + 4px);
  background: var(--void-2);
  color: var(--bone);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  font-size: 0.88rem;
  line-height: 1.45;
  animation: toast-in 0.22s var(--ease) both;
}
.toast.ok   { border-left-color: var(--labor); }
.toast.err  { border-left-color: var(--trail); }
.toast.info { border-left-color: var(--maritime-lt); }

/* ── 2) CONFIRM-DIALOG ────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.confirm-card {
  width: 100%; max-width: 440px;
  padding: var(--sp-5);
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.confirm-card h3 { margin: 0 0 var(--sp-2); font-size: 1.1rem; }
.confirm-card p  { margin: 0; color: var(--muted); line-height: 1.5; }
.confirm-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); flex-wrap: wrap; }

/* ── 3) EMPTY-STATE ───────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--muted); }
.empty-state .es-icon  { font-size: 2.2rem; line-height: 1; opacity: 0.6; }
.empty-state .es-title { margin-top: var(--sp-3); font-size: 1.02rem; font-weight: 700; color: var(--bone); }
.empty-state .es-text  { margin-top: var(--sp-1); font-size: 0.85rem; color: var(--muted); }
.empty-state .es-cta   { margin-top: var(--sp-4); }

/* ── 4) BUTTON-BUSY (Spinner) ─────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
button.is-busy {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
button.is-busy::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 15px; height: 15px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(232, 232, 232, 0.35);
  border-top-color: var(--bone);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ── 5) LEVEL-NAMEN ───────────────────────────────────────────────────── */
.lvlname-list { display: flex; flex-direction: column; }
.lvlname-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.16);
}
.lvlname-row:last-child { border-bottom: 0; }
.lvlname-row strong { font-weight: 700; }
.lvlname-add { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-3); }
.lvlname-msg { font-size: 0.85rem; color: var(--muted); }

/* ── 6) RADAR-LEGENDE + SERIEN-FARBEN ─────────────────────────────────── */
/* Legenden-Farbpunkt-Variante: inneres <span class="rl-dot"></span> im Chip;
   die Farbe kommt aus dem Plattform-Selektor .rl[data-radar-toggle="…"] .rl-dot.
   (Self-documenting Markup, kein zusaetzlicher ::before noetig.) */
.radar-legend {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
  font-size: 0.82rem; margin-top: var(--sp-3);
}
.rl {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: transparent; color: var(--bone);
  cursor: pointer; font: inherit; font-size: inherit;
  transition: border-color 0.15s, opacity 0.15s;
}
.rl:hover { border-color: var(--accent); }
.rl .rl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.rl.inactive { opacity: 0.4; }
.rl.inactive .rl-dot { background: var(--muted) !important; }
.rl[data-empty="1"] { font-style: italic; opacity: 0.55; }
/* Plattform-Farbpunkte je Legenden-Chip (Marken-CI, hartkodiert) */
.rl[data-radar-toggle="discord"] .rl-dot { background: #5865F2; }
.rl[data-radar-toggle="twitch"]  .rl-dot { background: #9146FF; }
.rl[data-radar-toggle="youtube"] .rl-dot { background: #FF0000; }
/* Die Legende nutzt einen Text-Marker „▬" + Chip-Klasse (kein inneres .rl-dot) →
   das Chip-Label selbst in Plattformfarbe einfärben (Marken-CI, hartkodiert). */
.rl.rl-discord { color: #5865F2; }
.rl.rl-twitch  { color: #9146FF; }
.rl.rl-youtube { color: #FF0000; }
/* SVG-Linien + -Punkte der Serien (Marken-CI, hartkodiert) */
.radar-line-discord { stroke: #5865F2; fill: none; }
.radar-line-twitch  { stroke: #9146FF; fill: none; }
.radar-line-youtube { stroke: #FF0000; fill: none; }
.radar-dot-discord  { fill: #5865F2; }
.radar-dot-twitch   { fill: #9146FF; }
.radar-dot-youtube  { fill: #FF0000; }

/* ── A11Y-FOKUS (nur :focus-visible) ──────────────────────────────────── */
/* Additiv zum bestehenden a/button/[tabindex]/summary-Fokus weiter oben:
   ergaenzt Formularfelder (input/select/textarea) und haelt den Maritime/Trail-
   Ring konsistent. Nur :focus-visible (Maus-Klicks zeigen keinen Ring). */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--maritime-lt);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ── 9) DIRTY / UNGESPEICHERT ─────────────────────────────────────────── */
.field.dirty {
  box-shadow: inset 3px 0 0 0 var(--trail);
  border-radius: var(--radius-xs);
}
.unsaved-marker {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(217, 118, 6, 0.14);
  border: 1px solid rgba(217, 118, 6, 0.45);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}

/* ── Leveling: rechte Spalte (Level-Namen oben + Level-Rollen unten) ──────
   Die FE-Lane wrappt die beiden rechten Karten in `.lvl-right-block`, damit
   sie als EIN geschlossener vertikaler Block in der rechten .content-grid-
   Spalte stehen (links daneben die scrollbare Bestenliste .lvl-scroll).
   gap = 14px = identisch zum .content-grid-gap. ADDITIV, scoped, aendert
   keine bestehenden Selektoren. */
.lvl-right-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}
/* Die zwei Karten teilen sich die Hoehe sinnvoll → der Block steht optisch
   geschlossen neben der (max-height-begrenzten) Bestenliste. */
.lvl-right-block > .panel {
  flex: 1 1 auto;
  min-height: 0;
}
/* Linke Bestenliste (.lvl-scroll) und rechter Block oben buendig — NUR im
   Leveling-Kontext (kein globales align-items auf .content-grid). Greift,
   wenn die FE-Lane .lvl-right-block direkt in eine .content-grid setzt. */
.ui2 .content-grid:has(> .lvl-right-block) { align-items: start; }
/* Schmaler Viewport: .content-grid faellt auf 1 Spalte (Breakpoint 940px,
   siehe oben) → .lvl-right-block bleibt durch flex-direction:column ohnehin
   gestapelt und rutscht unter die Bestenliste. Hier nur abgesichert, dass
   die Karten in der Einzelspalte nicht ueberbreit/auseinandergezogen werden. */
@media (max-width: 940px) {
  .lvl-right-block { align-items: stretch; }
}

/* ── Studio-Leiste (v592, Optik v593/v594 nach Redesign-Mockup): Bereichs-Umschaltung
   UNTER dem View-Kopf von Overlays / Widgets / Alerts & Sticker (EIN Sidenav-Punkt
   „Studio"). Unterstrich-Tabs: durchgehende Trennlinie, aktiver Bereich Trail-Orange
   (Schrift + 3px-Linie + dezenter Glow) — gross und offensichtlich statt Pill-Box. */
/* Studio-Nav (.studio-nav/.studio-tab) — Definition ENTFERNT (lag wortgleich doppelt zur
   Inline-Sub-Nav). Beide sind jetzt Aliasse der EINEN Sub-Nav im KW-UI-Block („SUBNAV").
   Groesse aendern: --kw-subnav-size. Nur dort. */
/* v599/v606: View-Köpfe DEZENT — GLOBAL auf allen Unterseiten (v606, vorher nur Studio):
   kein Balken mehr — transparenter Kopf ohne Icon-Kachel, Status-Pill und Beschreibungs-
   Zeile; nur Eyebrow + kleinerer Titel („text only"). Dadurch überall gleich niedrig.
   Feature-Schalter (.feat-toggle) bleiben als Bedienelemente sichtbar. */
section.view.ui2 > .feature-head { background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; margin: 0 0 0.15rem; }
section.view.ui2 > .feature-head .feature-icon { display: none; }
section.view.ui2 > .feature-head .status-pill { display: none; }
section.view.ui2 > .feature-head .feature-title p:not(.eyebrow) { display: none; }
section.view.ui2 > .feature-head h1 { font-size: 1.45rem; margin: 0; }

/* ── Counter-Karten (v595, Redesign-Mockup): eine grosse Zeile pro Counter — Name +
   Meta links, oranges Wert-Badge + Aktionen rechts; Details (OBS-Quelle, Chat-Ausgabe,
   Goal) aufklappbar. Darunter der gestrichelte CTA, der das Anlege-Popup öffnet. */
#view-counter .cnt-list { grid-template-columns: 1fr; gap: 0.7rem; }
.cnt-card { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.15rem; border-radius: var(--radius, 12px); }
.cnt-card-main { flex: 1 1 260px; min-width: 0; }
.cnt-card-name { font-weight: 800; font-size: 1.18rem; letter-spacing: 0.045em; text-transform: uppercase; }
.cnt-card-meta { margin-top: 0.3rem; }
.cnt-card-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cnt-card-actions .btn { font-size: 0.95rem; padding: 0.55rem 0.95rem; border-radius: var(--radius-sm, 8px); }
.cnt-card-actions .btn.cnt-icon { padding: 0.55rem 0.65rem; }
.cnt-card-value { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 40px; padding: 0 0.55rem; border-radius: var(--radius-sm, 8px); background: var(--trail, #d97706); color: #1b1207 !important; font-size: 1.15rem; }
.cnt-card .cnt-card-more { flex-basis: 100%; margin: 0; }
.cnt-card .cnt-card-more > summary { cursor: pointer; list-style-position: inside; }
.cnt-card .cnt-card-more .cnt-out { margin-top: 0.45rem; }
.cnt-cta { display: block; width: 100%; margin: 0.9rem 0 1.25rem; padding: 0.95rem 1.2rem; border: 2px dashed rgba(217, 119, 6, 0.55); border-radius: var(--radius, 12px); background: transparent; color: var(--trail, #d97706); font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; }
.cnt-cta:hover { border-color: var(--trail, #d97706); background: rgba(217, 119, 6, 0.08); }
.cnt-modal { position: fixed; inset: 0; background: rgba(4, 6, 10, 0.62); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cnt-modal-card { background: var(--surface, var(--void-2, #14161a)); border: 1px solid var(--line); border-radius: var(--radius, 12px); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); width: min(1040px, 94vw); max-height: 90vh; overflow: auto; padding: 16px 18px; }
.cnt-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0.7rem; }
.cnt-modal .cnt-new-grid { margin-bottom: 0; }
.cnt-modal .panel { margin: 0; }

/* ── Benachrichtigungen (v598, Redesign): eine Zeile pro Quelle — Icon-Kachel, Titel + Sub,
   rechts AN/AUS-Pill und ⚙ (öffnet das Popup mit der Konfig-Sektion). */
.nt-cards { display: flex; flex-direction: column; gap: 0.7rem; }
.nt-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 1.05rem; border-radius: var(--radius, 12px); margin: 0; }
.nt-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--radius-sm, 8px); background: rgba(255, 157, 46, 0.14); display: grid; place-items: center; font-size: 1rem; }
.nt-main { flex: 1 1 auto; min-width: 0; }
.nt-title { font-weight: 800; font-size: 1.04rem; }
.nt-sub { font-size: 0.78rem; margin-top: 0.15rem; }

/* ── Streamer-Watchlist („Streamer beobachten") — Liste im ⚙-Popup der gleichnamigen Karte.
   Eigene Persistenz (REST /streamwatch), darum [data-noskey] am .watch-box. Sitzt in einem
   .set-field, erbt also dessen Spalten-Fluss; hier nur Liste, Zeile und Hinzufuegen-Leiste. */
.watch-list { list-style: none; margin: 0.15rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.watch-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); background: rgba(255, 255, 255, 0.03); }
.watch-name { font-weight: 700; font-size: 0.9rem; flex: 0 0 auto; }
/* Ziel darf schrumpfen und abschneiden — sonst drueckt ein langer Channel-Name das ✕ raus. */
.watch-target { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-del { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-sm, 8px); background: rgba(255, 255, 255, 0.06); color: var(--muted); font-size: 0.8rem; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s; }
.watch-del:hover { background: var(--tattoo); color: var(--bone); }
.watch-del:disabled { opacity: 0.5; cursor: default; }
.watch-empty { padding: 0.45rem 0.1rem; }
/* Hinzufuegen-Leiste: Name waechst, die beiden Auswahlen halten Mindestbreite, Knopf bleibt.
   minmax(0,…) statt 1fr — sonst kann der Inhalt die Spalte aufblaehen. */
.watch-add { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.4rem; margin-top: 0.5rem; }
.watch-add input, .watch-add select { margin: 0; min-width: 0; }
.watch-add-btn { white-space: nowrap; }
/* Zustandsfarben wie bei .set-autosave (Klasse mitscoped, sonst gewinnt .muted). */
.watch-msg { margin: 0.35rem 0 0; min-height: 1em; }
.watch-msg.ok { color: var(--labor); }
.watch-msg.err { color: var(--accent); }
/* Schmal: die Leiste bricht auf eine Spalte um, statt die Felder unlesbar zu quetschen. */
@media (max-width: 640px) {
  .watch-add { grid-template-columns: minmax(0, 1fr); }
}
/* ── DER An/Aus-Schalter — EINE Klasse fuers ganze Panel ───────────────────────────────
   .nt-toggle ist der EINZIGE An/Aus-Baustein. Aussehen aendern = NUR hier.
   (Loeste die Pille .switch ab, die in zwei sich ueberlagernden Generationen + Neutralisier-
   Hacks dastand. Kein zweites An/Aus-Design mehr anlegen — diesen hier erweitern.)

   ZWEI TRAEGER, gleiche Klasse, gleiches Aussehen. Welcher — entscheidet, WO der Zustand liegt:
     button.nt-toggle + .on     Zustand liegt WOANDERS: die Karte schaltet eine Checkbox in
                                einem anderen Teilbaum (z. B. im ⚙-Popup). JS malt via
                                ntPaintToggle() (.on + aria-checked + .nt-state).
     label.nt-toggle > input    Zustand liegt IM Schalter (data-skey/data-feat/data-fkeys).
                                Die Checkbox bleibt der Traeger -> alle Loader/Autosave-
                                Bindings laufen unveraendert weiter. Das Aussehen haengt an
                                :has(input:checked) und greift damit auch bei PROGRAMMATISCH
                                gesetztem .checked. Wichtig: Loader feuern kein 'change' — ein
                                JS-Sync waere hier genau die Fehlerquelle („Reset nach Update").
   WCAG 1.4.1: Der Zustand steht als TEXT da (.nt-state AN/AUS), nicht nur als Farbe.
   Farbe: Text = var(--accent) — im Light-Theme abgedunkelt (#92400e = 7.09:1 auf Weiss;
   --trail waere dort nur 3.19:1 = durchgefallen). Knopf = var(--trail) (Grafik, 1.4.11 = 3:1). */
.nt-toggle { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); padding: 0.28rem 0.7rem 0.28rem 0.32rem; cursor: pointer; font: inherit; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted, #8b8b95); transition: border-color 0.15s, color 0.15s; flex-shrink: 0; }
.nt-toggle .nt-knob { width: 20px; height: 20px; border-radius: var(--radius); background: var(--muted, #8b8b95); transition: background 0.15s; flex: 0 0 auto; }
/* AN-Zustand bewusst in GETRENNTEN Regeln statt als Liste „.on, :has(...)": ein nicht
   unterstuetzter Selektor macht eine ganze Selektor-Liste ungueltig (:has ist nicht
   nachsichtig wie :is/:where). Als Liste wuerde ein Browser ohne :has() also auch den
   .on-Weg mitreissen — und der traegt die bestehenden Karten-Schalter. So degradiert
   im Notfall nur der label-Traeger, der button-Traeger bleibt heil. */
.nt-toggle.on { border-color: rgba(217, 119, 6, 0.6); color: var(--accent, #d97706); }
.nt-toggle.on .nt-knob { background: var(--trail, #d97706); }
.nt-toggle:has(input:checked) { border-color: rgba(217, 119, 6, 0.6); color: var(--accent, #d97706); }
.nt-toggle:has(input:checked) .nt-knob { background: var(--trail, #d97706); }
.nt-toggle .nt-state { min-width: 26px; text-align: center; }
/* Traeger 2 (label): Checkbox traegt den Zustand, ist aber unsichtbar — Fokus muss darum die
   LABEL-Box ringen (.ui2 :focus-visible saesse sonst auf einem 0x0-Element = unsichtbar).
   Zustands-Text kommt aus der CSS (kein DOM-Text) — genau deshalb kann er nie veralten. */
label.nt-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
label.nt-toggle:has(input:focus-visible) { box-shadow: var(--focus-ring); }
label.nt-toggle:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
label.nt-toggle .nt-state::after { content: 'AUS'; }
label.nt-toggle:has(input:checked) .nt-state::after { content: 'AN'; }
/* — Schalter-REIHE: Beschriftung links, der EINE Schalter rechts (v705) —————————————
   Loest die Schalter-Rolle von .check-row ab (dort war der Schalter eine nackte Checkbox mit
   accent-color = eine zweite An/Aus-Generation neben .nt-toggle). Die Reihe traegt NUR Layout;
   das Aussehen des Schalters kommt weiter allein aus .nt-toggle oben — eine Klasse, ein Ort.
   .check-row bleibt bewusst bestehen, aber nur noch fuer echte MEHRFACHAUSWAHL (Rollen-Picker,
   Quellen-Gruppe im fieldset, Banner-Pool): dort sind es Peers, die EINE Frage beantworten —
   role=switch waere dort semantisch falsch, eine Checkbox ist richtig.
   Warum <div> + <label for> statt EIN umschliessendes <label> wie bei .check-row: das <label>
   ist hier die Schalter-Pille selbst (Traeger 2) — und <label> darf kein <label> enthalten.
   Ueber for= bleibt die ganze Beschriftung klickbar (kein Verlust gegen die alte Reihe) und
   benennt das Feld — genau der Weg, den mountFeatureToggle mit .feat-toggle-hint schon geht,
   darum hier auch kein zusaetzliches aria-label/title (das wuerde den sichtbaren Text doppeln). */
.nt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 0.88rem; }
.nt-row-tx { min-width: 0; cursor: pointer; }
/* In .form-grid ueber die volle Breite — wie es .check-row dort tat. */
.ui2 .form-grid > .nt-row { grid-column: 1 / -1; }
.compact-ui .nt-row { gap: 5px; }
/* Feature-Kopf (mountFeatureToggle): Hinweis-Text + der EINE Schalter, rechts im .feature-head
   (dessen justify-content:space-between schiebt die Box nach rechts — kein margin-left noetig). */
.feat-toggle { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.feat-toggle .feat-toggle-hint { color: var(--muted); white-space: nowrap; font-size: 0.66rem; line-height: 1.1; cursor: pointer; }
/* ⚙-Popup: nur der Felder-Body der bewegten Sektion — Kopf (Titel + Quellen-Switch) macht die Karte. */
#nt-modal-slot .acc-item { border: 0; background: transparent; padding: 0; margin: 0; }
#nt-modal-slot .acc-head { display: none; }
#nt-modal-slot .acc-body.hidden { display: block !important; } /* globales .hidden ist !important — im Popup ist der Body immer offen */

/* ── Ziel-Karten (v602): Follower-Ziel + Abo-Ziel als halbe Karten nebeneinander. */
#view-counter .goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0.9rem 0 1.25rem; }
@media (max-width: 860px) { #view-counter .goal-grid { grid-template-columns: 1fr; } }

/* ── Alerts & Sticker (v603): Ereignis-Karten statt Tab-Leiste; das Typ-Panel wandert
   ins ⚙-Popup — dort ohne eigenen Karten-Rahmen/Kopf (Titel + AN/AUS macht Karte/Modal). */
#view-alerts .al-cards { margin-bottom: 1rem; }
#al-modal-slot .panel { border: 0; background: transparent; padding: 0; margin: 0; box-shadow: none; }
#al-modal-slot .panel-head { display: none; }

/* ── Sticker-Studio (v607): Befehl-Karten (OBS-Quellen-Look mit Mini-Vorschau) + klickbare
   Bibliothek (genutzte Sticker markiert) + Befehl-Popup mit großer Vorschau. */
#view-sticker .ovs-grid { margin-bottom: 0.4rem; }
.stk-ico { overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.stk-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
#stk-lib-grid .stk-pick { cursor: pointer; border: 1px solid var(--line); background: var(--surface, var(--void-2)); padding: 0.45rem; border-radius: var(--radius-sm, 8px); position: relative; transition: border-color 0.15s, transform 0.12s; font: inherit; color: inherit; text-align: center; }
#stk-lib-grid .stk-pick:hover { border-color: var(--trail, #d97706); transform: translateY(-2px); }
#stk-lib-grid .stk-pick img { width: 100%; height: 72px; object-fit: contain; display: block; }
#stk-lib-grid .stk-used { border-color: rgba(217, 119, 6, 0.45); }
.stk-used-tag { position: absolute; top: 6px; right: 6px; font-size: 0.58rem; color: #1b1207; background: var(--trail, #d97706); border-radius: var(--radius-xs, 4px); padding: 0.1rem 0.3rem; }
.stk-modal-body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.stk-modal-prev { flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; border: 1px dashed var(--line); border-radius: var(--radius-sm, 8px); padding: 0.6rem; background: rgba(0, 0, 0, 0.25); }
.stk-modal-prev img { width: 120px; height: 120px; object-fit: contain; }

/* ── v609: Feinschliff-Layout ── */
/* Alerts & Sticker: Ereignis-Karten 2-spaltig (halbe Breite nebeneinander). */
#view-alerts .al-card { min-width: 0; }
#view-alerts .al-card .nt-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-alerts .al-card .nt-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Punkt 3 (Owner 2026-07-15): Im 4-up ist der Titel zu schmal fuer „Kanalpunkte" (94 px da, 102 px
   noetig) → „Kanalpun…"; „Cheer (Bits)" (95 px) bricht knapp mit. Groesster Platzfresser ist die
   Textpille (71 px). Im 4-up bleibt darum nur der Knopf: .nt-state raus → Titel 134 px.
   ⚠ Der Zustand darf dann NICHT nur an der Farbe haengen (WCAG 1.4.1): der Knopf unterscheidet sich
   zusaetzlich in der FORM — aus = hohler Ring, an = gefuellte Scheibe. Dazu role=switch/aria-checked
   und der title, den app.js/alSync mitschreibt.
   Nur >1180 px: ab da ist .kw-cards.quarter 4-spaltig; darunter (2-up/1-up) ist Platz, Text bleibt. */
@media (min-width: 1181px) {
  #view-alerts .al-card .nt-state { display: none; }
  #view-alerts .al-card .nt-toggle { gap: 0; padding: 0.28rem 0.32rem; }
  #view-alerts .al-card .nt-toggle .nt-knob { background: transparent; border: 3px solid var(--muted, #8b8b95); }
  #view-alerts .al-card .nt-toggle.on .nt-knob { background: var(--trail, #d97706); border-color: var(--trail, #d97706); }
}
/* Onboarding & Verify: die Konfig-Karten unten über die ganze Content-Breite. */
#onboarding-config { max-width: none; }

/* ============ v610: Chatmatik — Funktions-Panels als Karten (2 Spalten wie Alerts) + ⚙-Popup ============ */
#view-streamchat .sc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
#view-streamchat .sc-card { min-width: 0; }
#view-streamchat .sc-card .nt-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-streamchat .sc-card .nt-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { #view-streamchat .sc-cards { grid-template-columns: 1fr; } }
/* Im Popup traegt der Modal-Kopf den Titel — den panel-head des verschobenen Panels ausblenden. */
#sc-modal-slot .panel { margin: 0; }
#sc-modal-slot .panel-head { display: none; }

/* ============ v612: Stufen-Band auf den Entdecken-Kacheln (Gratis / Premium / Add-on) ============ */
/* Eigene 1337BOT-Optik: kompakte Pille oben links auf der Vorschau, Panel-Farben + Blur — kein own3d-Klon. */
.ui2 .ovl-band { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: .3em;
  padding: .22rem .55rem; border-radius: var(--radius-xs, 6px); font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: rgba(13, 16, 20, .72); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.ui2 .ovl-band-free { color: #9be8b4; border-color: rgba(110, 231, 183, .35); }
.ui2 .ovl-band-premium { color: #ffd9a3; border-color: rgba(217, 119, 6, .55); background: linear-gradient(135deg, rgba(217, 119, 6, .30), rgba(13, 16, 20, .78)); }
.ui2 .ovl-band-addon { color: #cdd7ff; border-color: rgba(140, 160, 255, .40); }

/* ============ v616: Kundenkarte — Support-Zeile (Kontakt-Mail + Mail-Aktionen) ============ */
.op-kunde-support { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed rgba(255, 255, 255, .1); }
.op-ksup-mail { display: inline-flex; align-items: center; gap: .35rem; flex: 1 1 260px; min-width: 0; }
.op-ksup-mail .op-kmail-in { flex: 1 1 auto; min-width: 0; font-size: .78rem; padding: .3rem .5rem; }
.op-kmail-tpl { font-size: .78rem; padding: .3rem .4rem; max-width: 200px; }
#op-mail-modal .op-field { display: block; margin: 0 0 .5rem; }
#op-mail-modal .op-field span { display: block; font-size: .75rem; opacity: .75; margin-bottom: .25rem; }
#op-mail-modal input, #op-mail-modal textarea { width: 100%; }

/* ============ v619: Sticker-Overlay-Einstellungen (Abklingzeit + eigene Position) ============ */
#view-sticker .stk-settings { margin: 0 0 1rem; }
#view-sticker .stk-set-body { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
#view-sticker .stk-set-fields { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
/* 16:9-Positionsvorschau — der Punkt spiegelt die Sticker-X/Y-Prozente. */
#view-sticker .stk-pos-preview { flex: 0 0 240px; position: relative; aspect-ratio: 16 / 9; width: 240px; max-width: 100%;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px), #0d1014;
  border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: var(--radius-sm, 8px); }
#view-sticker .stk-pos-dot { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%);
  border-radius: var(--radius-sm); background: rgba(217,119,6,.28); border: 2px solid var(--trail, #d97706);
  box-shadow: 0 0 12px rgba(217,119,6,.5); }
#view-sticker .stk-pos-dot::after { content: '🎟'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
@media (max-width: 620px) { #view-sticker .stk-pos-preview { flex-basis: 100%; width: 100%; } }
.ovs-chip.stk-perm { background: rgba(255,255,255,.06); }


/* ════════════════════════════════════════════════════════════════════════
   OVERLAY-BUILDER / OBS-QUELLEN (.ovb-* · #view-ovbuilder)
   ────────────────────────────────────────────────────────────────────────
   HIERHER GEHOLT aus public/ovbuilder.js (injectStyles(), 105 Regeln). Dort lag es
   als CSS-String und wurde zur Laufzeit per document.head.appendChild injiziert —
   also NACH style.css und damit immer gewinnend. Genau deshalb liess sich Panel-CSS
   nicht verlaesslich hier steuern (siehe .ovs-card, v678).
   Steht bewusst am DATEIENDE: identische Kaskadenposition wie die alte Injektion.
   ⚠ Nichts davon zurueck nach JS. CSS gehoert in die CSS.
   ════════════════════════════════════════════════════════════════════════ */
/* Tab „Quellen & Links": gemountete klassische View kompakt einbetten (eigener h1 entfaellt im Tab). */
#ovb-links-host #view-overlays{padding:0;margin:0}
#ovb-links-host #view-overlays > .view-title{display:none}
/* v650: Widgets-Reiter hostet #view-overlays → dessen eigenen View-Kopf ausblenden (kein doppelter „Overlays"-Titel). */
#ovb-links-host #view-overlays > .feature-head{display:none}
/* „das auch": die vereinten Overlay-Tabs ans neue ui2-Design angleichen (scoped auf den View). */
/* Tab-Leiste nutzt jetzt das kanonische .ui2 .tabs/.tab (style.css) — eigene .ovb-tab-Regeln entfallen. */
/* „Aktives Overlay" (view-ovactive) erbt dieselbe .ui2-Karten-/Zeilen-Optik wie „Overlays". */
/* „Overlays"-Galerie (tabOverlays): box-los, groessere Kacheln, umbrechend statt horizontal scrollen. */
.ovb-quickselect-full{background:transparent;border:0;padding:0}
.ovb-quickselect-full .ovb-qs-strip{flex-wrap:wrap;overflow-x:visible;cursor:default}
.ovb-quickselect-full .ovb-qs-item{width:200px}
/* Vorschau-iframe auf die 200px-Kachel skalieren (Basis .0781 gilt fuer die 150px-Strip-Kacheln) -> fuellt die Box. */
.ovb-quickselect-full .ovb-qs-prev iframe{transform:scale(.1042)}
/* OverlaySets (benannte Speicherslots) — Verwaltungs-Sektion oben im Overlays-Reiter. */
.ov-slots{margin:0 0 1.1rem;padding:.9rem 1rem;background:var(--void-2);border:1px solid var(--line);border-radius:var(--radius)}
.ov-slots-list{display:flex;flex-direction:column;gap:.5rem;margin:.2rem 0 .7rem}
.ov-slot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface,var(--void))}
.ov-slot.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ov-slot-main{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ov-slot-name{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-slot-btns{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}
.ov-slot-badge{font-size:.72rem;font-weight:700;color:var(--labor,#6ee7b7);white-space:nowrap}
.ov-slots-new{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.ov-slots-new input{flex:1 1 220px;min-width:0;padding:.5rem .6rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--void);color:inherit;font:inherit}
.ov-slot-msg{white-space:nowrap}
.ov-slots-cta{margin:.7rem 0 0}
.ov-slots-cta .btn{width:100%;justify-content:center;font-weight:700}

/* ── OverlaySets als App-Kacheln (Owner 2026-07-27): fast hochkantes Rechteck, markant — Name gross,
      ✎ oben rechts, Aktionen unten. Ersetzt die Tabellen-Zeile; Button-Klassen/Wiring unveraendert. ── */
.ov-slots-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:.6rem;margin:.2rem 0 .7rem}
.ov-slot.ovset-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.4rem;min-height:172px;padding:.7rem .75rem}
.ov-slot.ovset-card.on{background:linear-gradient(180deg,rgba(217,118,6,.12),transparent);border-color:var(--accent)}
.ovset-top{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.ovset-state{font-family:'Geist Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.09em}
.ovset-edit{padding:.18rem .45rem;font-size:.82rem;line-height:1;flex:0 0 auto}
.ovset-name{font-size:1.22rem;font-weight:800;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;word-break:break-word}
.ovset-theme{margin-top:auto}
.ovset-actions{display:flex;flex-wrap:wrap;gap:.3rem}
.ovset-actions .btn{padding:.28rem .5rem;font-size:.72rem}

/* ── Entdecken: Filter-Chips + Game-Karten (Owner 2026-07-27) ── */
.disc-filter{margin:0 0 14px}
.disc-game-card .disc-thumb{aspect-ratio:16/9;overflow:hidden;position:relative}
.disc-game-img{width:100%;height:100%;object-fit:cover;display:block}
.disc-game-hero img{width:100%;max-height:220px;object-fit:cover;display:block;border:1px solid var(--line);margin:0 0 10px}
/* ── Cockpit (Tab „Übersicht & Live"): Block 1 = KW-Main (Szenen + Live-Vorschau), Block 2 = Widgets (Baukasten + BotDeck). ── */
/* Block-Überschrift: trennt KW-Main-Overlay (oben) sichtbar von den Live-Widgets (unten). */
.ovb-block-title{font-size:1rem;font-weight:700;letter-spacing:.01em;margin:0 0 .6rem;padding-bottom:.35rem;border-bottom:2px solid var(--accent)}
.ovb-block-title .xsmall{font-weight:400}
/* OBS-Quellen (Owner 2026-07-04): aufklappbar (details/summary) + 2-Spalten-Grid mit Abstand. */
details.ovb-sources>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;padding:.2rem 0}
details.ovb-sources>summary::-webkit-details-marker{display:none}
details.ovb-sources>summary::before{content:"\25B8";color:var(--accent);font-size:.9em;transition:transform .15s}
details.ovb-sources[open]>summary::before{transform:rotate(90deg)}
.ovb-sources-h{font-size:1.05rem;font-weight:700}
.ovb-sources .ovb-src-group{margin:.9rem 0 .35rem;font-size:.9rem}
.ovb-sources .ovb-src-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.7rem .9rem;align-items:start}
.ovb-sources .ovb-src-grid>.ovb-src-item{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface,var(--void-2));padding:.5rem .6rem}
.ovb-sources .ovb-src-note{grid-column:1/-1;margin:.1rem 0 0}
/* Zuletzt-Banner-Popup (Owner 2026-07-09): echtes Modal (kein Akkordeon) + skalierte Live-Vorschau. */
.ovb-lc-modal{position:fixed;inset:0;background:rgba(4,6,10,.62);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.ovb-lc-card{background:var(--surface,var(--void-2,#14161a));border:1px solid var(--line);border-radius:var(--radius,12px);box-shadow:0 24px 80px rgba(0,0,0,.5);width:min(940px,94vw);max-height:90vh;overflow:auto;padding:16px 18px}
.ovb-lc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:.7rem}
.ovb-lc-body{display:flex;gap:20px;flex-wrap:wrap}
.ovb-lc-form{flex:1 1 250px;display:flex;flex-direction:column;gap:12px;min-width:230px}
.ovb-lc-prev{flex:1 1 400px;min-width:300px}
.ovb-lc-prevbox{width:100%;aspect-ratio:16/10;overflow:hidden;border:1px dashed var(--line);border-radius:var(--radius-sm,8px);background:rgba(0,0,0,.35);position:relative}
.ovb-lc-prevbox iframe{width:200%;height:200%;transform:scale(.5);transform-origin:top left;border:0;position:absolute;left:0;top:0;background:transparent}
/* ⚙-Karten (Owner 2026-07-10): 2 Spalten — links Inhalt, rechts die ORANGE Zahnrad-Spalte in voller Kartenhöhe. */
.ovb-sources .ovb-src-grid>.ovb-gcard{display:flex;align-items:stretch;padding:0;overflow:hidden}
.ovb-gcard .ovb-gmain{flex:1 1 auto;min-width:0;padding:.5rem .6rem}
.ovb-gear{flex:0 0 56px;align-self:stretch;border:0;border-left:1px solid rgba(0,0,0,.3);background:var(--trail,#d97706);color:#1b1207;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .15s,transform .15s}
.ovb-gear:hover{filter:brightness(1.12)}
.ovb-gear:active{transform:scale(.95)}
/* ── OBS-Quellen-Seite (v597): Karten-Kontrakt (.ovs-*) ist HIER RAUS und steht jetzt */
/* in public/style.css im Block „KW UI · DIE LINIE" (CARD). Grund: als JS-String war er */
/* in der CSS unauffindbar — jeder Block hat sich deshalb sein eigenes Layout gebaut. */
/* Aendern bitte NUR dort (.kw-card / .ovs-card sind Aliasse derselben Definition). */
/* v609: grosse box-lose CTAs unter der Live-Vorschau; v613: drei Stueck, je gleich breit. */
.ovb-cta-row{display:flex;gap:.8rem;margin:0}
.ovb-cta-row .btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;padding:.85rem .6rem;font-weight:800;font-size:.95rem;white-space:nowrap}
/* v613: Overlay-Einstellungen-Popup — Farb-Raster + skalierte 16:9-Vorschau. */
.ovb-tw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .7rem;max-height:46vh;overflow:auto;padding-right:.2rem}
.ovb-tw-color{display:flex;align-items:center;gap:.5rem;font-size:.82rem;min-width:0}
.ovb-tw-color span{text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovb-tw-color input[type=color]{width:44px;height:30px;flex:0 0 auto;border:1px solid var(--line,rgba(255,255,255,.18));border-radius:var(--radius-xs,6px);background:transparent;padding:2px;cursor:pointer}
.ovb-tweaks-prevbox{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0d1014;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:var(--radius-sm,8px)}
#ovb-tweaks-frame{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;pointer-events:none}
@media(max-width:640px){.ovb-sources .ovb-src-grid{grid-template-columns:1fr}}
.ovb-preview-wrap{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#0d0f12}
.ovb-preview-frame{position:absolute;top:0;left:0;width:1920px;height:1080px;transform-origin:0 0;border:0;pointer-events:none}
/* Block 1: EINE Karte mit 2 Spalten — links die Steuerung (.ovb-scene-controls: Übergang → BotDeck → Builder gestapelt), rechts die Live-Vorschau. */
/* .ovb-scene-row: 2-Spalten-Split. Stand als `1fr 1fr` (bodenlos) im JS-String — die linke
   Spalte wurde vom Inhalt breiter gedrueckt. Jetzt Boden + Standard-Leiter (≤860 → 1). */
.ovb-scene-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start;margin-bottom:.6rem}
.ovb-scene-row>*{min-width:0}
@media(max-width:860px){.ovb-scene-row{grid-template-columns:1fr}}
.ovb-scene-card{margin:0}
/* Steuer-Spalte: die ersten beiden gestapelten Blöcke (Übergang) brauchen keinen Top-Trenner mehr. */
.ovb-scene-controls > .ovb-deck-inline:first-child{margin-top:0;padding-top:0;border-top:0}
/* Live-Vorschau-Block (rechte Spalte): 16:9-iframe füllt die Spalte; der Trenner oben entfällt, da die Vorschau jetzt eigenständig daneben sitzt. */
.ovb-right-col{position:sticky;top:14px;align-self:start;display:flex;flex-direction:column;gap:1rem;min-width:0;margin:0}
.ovb-preview-inline{margin:0}
.ovb-preview-inline .ovb-preview-wrap{max-width:100%;margin:.3rem 0 0}
.ovb-preview-scenes{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:.35rem 0 .1rem}
.ovb-prev-label{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);opacity:.85;margin-right:.15rem}
.ovb-prev-scene{font:inherit;font-size:.68rem;font-weight:600;letter-spacing:.02em;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s,background .15s;white-space:nowrap}
.ovb-prev-scene:hover{border-color:#1e6fb0;color:inherit}
.ovb-prev-scene.on{background:rgba(30,111,176,.16);border-color:#1e6fb0;color:inherit}
/* Builder-Block (Punkt 5): 3/4 der Breite, zentriert; Text links, CTA rechts. Schmal -> gestapelt. */
.ovb-builder-row{display:flex;justify-content:center;margin-bottom:.8rem}
.ovb-edit-card{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1.2rem;margin:0;width:75%}
.ovb-edit-txt{min-width:0}
.ovb-edit-card .ovb-to-builder{flex:0 0 auto;justify-content:center;padding:.7rem 1.2rem;font-size:1rem;white-space:nowrap}
@media(max-width:760px){.ovb-edit-card{width:100%;flex-direction:column;align-items:stretch}.ovb-edit-card .ovb-to-builder{width:100%}}
/* BotDeck inline in der Szenen-Karte (Punkt 4): dezenter Trenner oben. */
.ovb-quickselect{margin:0 0 1rem;padding:.8rem;background:var(--void-2);border:1px solid var(--line);border-radius:var(--radius)}
.ovb-qs-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
.ovb-qs-head h3{margin:0;font-size:1rem}
.ovb-qs-wrap{position:relative}
.ovb-qs-strip{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.3rem;scroll-behavior:smooth;cursor:grab;scrollbar-width:thin}
.ovb-qs-strip.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.ovb-qs-nav{position:absolute;top:calc(50% - .15rem);transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--void-2);color:var(--bone);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1;box-shadow:0 2px 12px rgba(0,0,0,.4);transition:border-color .12s,background .12s}
.ovb-qs-nav:hover{border-color:var(--accent);background:var(--void)}
.ovb-qs-nav-l{left:-8px}.ovb-qs-nav-r{right:-8px}.ovb-qs-nav[hidden]{display:none}
.ovb-qs-item{flex:0 0 auto;width:150px;background:var(--void);border:2px solid var(--line);border-radius:var(--radius-sm);padding:0;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;transition:border-color .12s}
.ovb-qs-item:hover{border-color:var(--ash,#6b7280)}
/* Gewaehltes Set (Owner 2026-07-16: „die auswahl soll praegnanter sein"): Rahmen in der
   Akzentfarbe statt Maritime. Maritime #004272 ist ein DUNKELblau — auf dem dunklen Grund
   war der Rahmen kaum zu sehen. Trail gegen den Karten-Grund: 5.41:1 (AA fuer Nicht-Text
   braucht 3:1). Dazu ein leiser Schein, damit die Wahl auch im Augenwinkel sitzt. */
.ovb-qs-item.active{border-color:var(--trail,#d97706);box-shadow:0 0 0 1px var(--trail,#d97706),0 4px 14px rgba(217,118,6,.22)}
.ovb-qs-prev{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;pointer-events:none}
.ovb-qs-prev iframe{position:absolute;top:0;left:0;width:1920px;height:1080px;transform:scale(.0781);transform-origin:top left;border:0;pointer-events:none}
.ovb-qs-name{padding:.35rem .5rem;font-size:.82rem;text-align:center;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Das Namensfeld des gewaehlten Sets wird GEFUELLT (Owner: „das feld darunter … in
   akzentfarbe … text demnach barrierefrei kontrastreich").
   ⚠ Vorher: color:var(--maritime,#004272) auf dem Karten-Grund = 1.66:1 — WCAG AA verlangt
     4.5:1. Der Name des GEWAEHLTEN Sets war damit praktisch unlesbar.
   ⚠ Textfarbe ist Pflicht, nicht Geschmack: Weiss auf Trail waere 3.19:1 (durchgefallen),
     #1b1207 kommt auf 5.80:1. Dasselbe Paar nutzt .ovs-copy schon — eine Linie.
   Gefuelltes Feld heisst ausserdem: die Wahl haengt nicht nur an der FARBE, sondern an der
   Form (gefuellt vs. leer) — dazu setzt ovbuilder.js aria-pressed. */
.ovb-qs-item.active .ovb-qs-name{background:var(--trail,#d97706);color:#1b1207;font-weight:700}
.ovb-deck-inline{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line)}
/* Szenen-Uebergang (Stinger): Sound-Dropdown oben, Lautstaerke-Slider darunter (einspaltig) — hält den Übergang-Block in der linken Spalte schmal. Reused .set-check/.set-field/.range-in. */
.ovb-trans-grid{display:grid;grid-template-columns:1fr;gap:.6rem;align-items:end}
.ovb-transition.is-disabled{opacity:.55}
.ovb-trans-saved{font-size:.7rem;font-weight:600;padding:.02rem .35rem;border-radius:var(--radius-xs)}
.ovb-trans-saved.saving{color:var(--muted)}
.ovb-trans-saved.ok{color:var(--labor,#6ee7b7);background:rgba(110,231,183,.12)}
.ovb-deck-inline-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.ovb-deck-inline-head h3{margin:0;font-size:1rem}
/* Cockpit Reihe 3: Schnellsteuerung als responsives Karten-Grid. */
.ovb-cockpit-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem;align-content:start}


/* ════════════════════════════════════════════════════════════════════════
   AUS-JS-GEHOLT — Rest der Laufzeit-Injektionen (2026-07-14).
   Diese Regeln lagen als CSS-Strings in JS-Dateien und wurden per
   document.head.appendChild eingehaengt — also NACH style.css, und haben sie
   damit still ueberstimmt. Ergebnis: die CSS war nicht die Wahrheit.
   Stehen bewusst am DATEIENDE = identische Kaskadenposition wie zuvor.
   ⚠ CSS gehoert in die CSS. Nichts davon zurueck in JS-Strings.
   ════════════════════════════════════════════════════════════════════════ */

/* ── AUTO-MOD (#view-automod .am-*) — hergeholt aus public/automod.js (32 Regeln) ── */
#view-automod .am-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.7rem 0}
#view-automod .am-chip{font-size:.72rem;padding:.22rem .6rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--void-2)}
#view-automod .am-chip.on{color:#7ddf9b;border-color:rgba(125,223,155,.4)}
#view-automod .am-chip.off{color:var(--muted);opacity:.7}
#view-automod .am-cf-list{display:flex;flex-direction:column;gap:.4rem;margin:.6rem 0}
#view-automod .am-cf-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--void-2)}
#view-automod .am-cf-row .am-cf-nm{font-weight:600;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-automod .am-cf-row .am-cf-meta{font-size:.72rem;color:var(--muted);flex:0 0 auto}
#view-automod .am-cf-row code{font-size:.72rem;background:rgba(255,255,255,.06);padding:.05rem .3rem;border-radius:var(--radius-xs)}
#view-automod .am-cf-row.off{opacity:.55}
#view-automod .am-cf-empty{font-size:.8rem;color:var(--muted);padding:.4rem 0}
#view-automod .am-cf-grid{display:grid;grid-template-columns:minmax(0,1fr) 9rem minmax(0,2fr) 11rem;gap:.55rem;margin:.6rem 0} /* minmax: Inputs duerfen schrumpfen (REGEL 1) */
#view-automod .am-cf-fld{display:flex;flex-direction:column;gap:.2rem;font-size:.74rem;color:var(--muted)}
#view-automod .am-cf-fld input,#view-automod .am-cf-fld select{font:inherit;font-size:.85rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--void-2);color:var(--text,inherit)}
#view-automod .am-cf-warn{min-height:1em;color:#e0a44d}
#view-automod .am-cf-warn.ok{color:#7ddf9b}
#view-automod .am-cf-rx-help{display:none}
#view-automod .am-cf-rx-help.show{display:block}
#view-automod .am-cf-icon-btn{background:none;border:none;cursor:pointer;font-size:.95rem;padding:.1rem .25rem;color:var(--muted)}
#view-automod .am-cf-icon-btn:hover{color:var(--text,inherit)}
/* Plattform-Tabs (Discord | Twitch | YouTube) */
#view-automod .am-plat{display:none}
#view-automod .am-plat.show{display:block}
#view-automod .am-soon{border:1px dashed var(--line);border-radius:var(--radius-sm);padding:.9rem 1rem;color:var(--muted);font-size:.85rem;background:var(--void-2)}
#view-automod .am-soon b{color:var(--text,inherit)}
/* Wort-Blockliste: Eingabe + Chips */
#view-automod .am-word-add{display:flex;gap:.5rem;align-items:stretch;margin:.2rem 0 .6rem}
#view-automod .am-word-add input{flex:1 1 auto;min-width:0;font:inherit;font-size:.9rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--void);color:var(--text,inherit)}
#view-automod .am-words{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0}
#view-automod .am-word{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;padding:.25rem .25rem .25rem .6rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--void-2)}
#view-automod .am-word button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:.95rem;line-height:1;padding:0 .15rem;border-radius:50%}
#view-automod .am-word button:hover{color:var(--bad,#d8543f)}
#view-automod .am-words-empty{font-size:.8rem;color:var(--muted)}
/* Bruch auf der 860er-Leiter statt 720: im Fenster 721-860 (einspaltige Content-Breite)
   quetschte die 4er-Reihe mit 20rem Fixanteil sonst die beiden Eingabefelder platt. */
@media(max-width:860px){#view-automod .am-cf-grid{grid-template-columns:minmax(0,1fr)}}

/* ── GLUECKSRAD-ZUSCHAUERLINK (#wv-card .wv-*) — hergeholt aus public/wheelview.js (7 Regeln) ── */
#wv-card.locked{opacity:.6}
#wv-card.locked input,#wv-card.locked button{pointer-events:none}
#wv-card .wv-lock{display:inline-block;margin-left:.4rem;font-size:.72rem;color:var(--muted)}
#wv-card .wv-lock.hidden{display:none}
#wv-card .wv-row{display:flex;gap:.5rem;align-items:stretch;flex-wrap:wrap;margin:.4rem 0}
#wv-card .wv-row input{flex:1 1 16rem;min-width:0}
#wv-card .wv-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}

/* ── DISCORD-BEISPIELE (#db-samples .db-sample*) — hergeholt aus public/db-sample.js (13 Regeln) ── */
/* grid-auto-rows:1fr + height:100% -> alle Karten gleich hoch. desc/roles auf 2 Zeilen */
/* geclampt (kein Ausreisser durch langen Text); „mehr" hebt das Clamp pro Karte auf. */
#db-samples{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem;grid-auto-rows:1fr}
.db-sample{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;height:100%;text-align:left;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--void-2,#181b20);color:inherit;font:inherit;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.db-sample:hover{border-color:var(--trail)}
.db-sample.active{border-color:var(--trail);box-shadow:inset 0 0 0 1px var(--trail)}
.db-sample .db-sample-ic{font-size:1.5rem;line-height:1.1}
.db-sample .db-sample-name{font-weight:700}
.db-sample .db-sample-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.1rem}
.db-sample .db-sample-roles{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.3rem;font-size:.72rem;line-height:1.4;color:var(--muted)}
.db-sample .db-sample-roles b{color:inherit;font-weight:600}
.db-sample.expanded{height:auto}
.db-sample.expanded .db-sample-desc,.db-sample.expanded .db-sample-roles{-webkit-line-clamp:unset;overflow:visible}
.db-sample .db-sample-more{margin-top:auto;padding-top:.3rem;font-size:.72rem;color:var(--trail);text-decoration:underline;cursor:pointer}
.db-sample .db-sample-more[hidden]{display:none}

/* ── MELDUNGS-VORSCHAU — hergeholt aus public/app.js (war ein einzelner @keyframes-String) ── */
@keyframes mcFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }


/* ════════════════════════════════════════════════════════════════════════
   AUS-INDEX.HTML-GEHOLT (2026-07-14) — der <style>-Block aus dem <head>.
   Er stand NACH <link rel=stylesheet href=/style.css> und hat sie damit
   ueberstimmt: die zweite Quelle im Panel. Jetzt hier, am DATEIENDE =
   identische Kaskadenposition wie vorher.
   ⚠ Kein <style> mehr in index.html. CSS gehoert in die CSS.
   ════════════════════════════════════════════════════════════════════════ */
.kw-step{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;margin-right:.35em;border-radius:50%;background:var(--accent,#d97706);color:#1b1b1b;font-weight:700;font-size:.78em;line-height:1;vertical-align:middle}
.hint-box{display:block;padding:.7rem .9rem;border:1px solid var(--line,rgba(255,255,255,.12));border-left:3px solid var(--accent,#d97706);border-radius:var(--radius-sm);background:rgba(217,118,6,.06);margin-top:.6rem}
.hint-box-head{display:flex;align-items:center;gap:.4rem;font-size:.95rem}
.hint-box-ico{font-size:1.1rem}
.help-media:empty{display:none}
.help-media{margin-top:.6rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}
.help-media img,.help-media video{width:100%;border-radius:var(--radius-xs);border:1px solid var(--line,rgba(255,255,255,.12))}
/* Rollen-vergeben: aufgeräumte Spalten/Chips (Counter-Look). Eigene rv-Namen. */
/* .rv-grid: stand auf `1.1fr 1fr` = 52,4/47,6 — eine Haelfte, die keine war (und ohne Boden).
   Jetzt echte Haelften mit Boden. Leiter wie ueberall: ≤860 → 1 Spalte. */
.rv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.rv-grid>*{min-width:0}
@media (max-width:860px){.rv-grid{grid-template-columns:1fr}}
.rv-col-head{display:flex;align-items:center;gap:.4rem;margin:.1rem 0 .5rem;font-weight:600}
.rv-col-head .kw-step{margin-right:0}
/* P1: ausgewaehlte Mitglieder waechst mit, aber gedeckelt + scrollbar — 400 Auswahlen
   sprengen die Spalte/Seite nicht mehr. align-content:flex-start sammelt die Chips oben. */
.member-chips{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;margin:8px 0 12px;max-height:200px;overflow:auto}
.member-chips:empty{display:none}
/* Discord-Post-Vorschau (Aufgabe 18). Eigene dpp-Namen, kollisionsfrei. */
.discord-post-preview{border:1px solid var(--line,rgba(255,255,255,.12));border-left:3px solid #5865F2;border-radius:var(--radius-sm);padding:.6rem .8rem;margin-bottom:.8rem;background:rgba(88,101,242,.06)}
.dpp-head{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem}
.dpp-avatar{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;border-radius:50%;background:rgba(88,101,242,.25);font-size:1em}
.dpp-name{font-weight:700}
.dpp-tag{font-size:.6rem;font-weight:700;background:#5865F2;color:#fff;border-radius:var(--radius-xs);padding:.05rem .3rem;letter-spacing:.03em}
.dpp-time{margin-left:.2rem}
.dpp-body{white-space:pre-wrap;line-height:1.5;font-size:.92rem}
.dpp-note{margin:.5rem 0 0;opacity:.8}
/* Posts: Stil-Umschalter + gebrandetes Embed-Preview (Posting-Stil). Eigene Namen, kollisionsfrei. */
.post-style-switch{display:inline-flex;gap:.25rem;background:var(--surface-2,rgba(255,255,255,.05));border:1px solid var(--line,rgba(255,255,255,.12));border-radius:var(--radius-sm);padding:.2rem;margin-bottom:.7rem}
.post-style-switch button{border:0;background:transparent;color:var(--faint,#9aa);font-weight:600;font-size:.85rem;padding:.35rem .8rem;border-radius:var(--radius-xs);cursor:pointer}
.post-style-switch button.active{background:var(--maritime,#004272);color:#fff}
.pe-buttons-list{display:flex;flex-direction:column;gap:.4rem;margin:.3rem 0}
.pe-btn-row{display:flex;gap:.4rem;align-items:center}
.pe-btn-row input{flex:1;min-width:0}
.pe-img-row{display:flex;gap:.5rem;align-items:center;margin:.2rem 0 .4rem}
.pe-img-row input{flex:1;min-width:0}
/* „Bild anzeigen"-Checkbox: klare vertikale Abstaende, damit sie nicht an die Buttons-Sektion stoesst.
   (Historie: war mal ein .switch — dessen Element-Selektor stylte den Text-<span> als Kugel.) */
.pe-img-check{margin:.5rem 0 .2rem}
#post-pane-embed > div:last-child{margin-top:.6rem}
/* gebrandetes Embed (Look wie gn-embed / Live-Ticker): Maritime-Border, Author/Titel/Desc/Bild/Footer/Pills */
.pe-embed{border-left:3px solid var(--maritime,#004272);padding:.5rem .7rem;border-radius:var(--radius-xs);background:rgba(0,66,114,.08)}
.pe-author{display:flex;align-items:center;gap:.4rem;font-weight:700;font-size:.82rem;margin-bottom:.25rem}
.pe-author .pe-ava{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:rgba(0,66,114,.3)}
.pe-title{font-weight:800;color:var(--maritime,#4a90c8);margin:.1rem 0 .25rem;line-height:1.25}
.pe-desc{font-size:.9rem;line-height:1.5;white-space:pre-wrap}
.pe-img{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:var(--radius-xs);margin:.5rem 0 .2rem}
.pe-btns{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.pe-pill{display:inline-block;background:rgba(88,101,242,.18);border:1px solid rgba(88,101,242,.5);color:var(--text,#e8e8e8);border-radius:var(--radius-xs);padding:.25rem .6rem;font-size:.8rem;font-weight:600;text-decoration:none}
.pe-foot{display:flex;align-items:center;gap:.35rem;margin-top:.55rem;font-size:.7rem;color:var(--faint,#9aa);opacity:.85}
.dash-footer-road h3,.dash-footer-new h3{margin:0 0 .4rem}
.dash-roadmap{margin:.2rem 0;padding-left:1.1rem;line-height:1.6}
.dash-roadmap:empty{display:none}
.dash-footer-bug{margin-top:.5rem}
/* Alerts-Aussehen-Vorschau (Lane-III-eigen, NICHT in style.css = Lane II). Eigene ap-/alerts-preview-Namen,
   kollisionsfrei. Konsumiert die --ap-*-Custom-Properties, die app.js/updateAlertsPreview() live setzt. */
.alerts-preview-wrap{display:grid;gap:.4rem;margin:.4rem 0 0}
.alerts-preview{--ap-accent:#d97706;--ap-text:#e8e8e8;--ap-title-font:'Big Shoulders Display',system-ui,sans-serif;--ap-body-font:'Instrument Sans',system-ui,sans-serif;--ap-title-size:33px;--ap-msg-size:13px;
  display:flex;align-items:center;gap:.8rem;min-height:96px;padding:1rem 1.1rem;border:1px solid var(--line,rgba(255,255,255,.12));border-left:4px solid var(--ap-accent);border-radius:var(--radius,10px);
  background:linear-gradient(180deg,rgba(20,20,22,.92),rgba(12,12,14,.92));overflow:hidden}
.alerts-preview .ap-ico{font-size:2rem;line-height:1;filter:drop-shadow(0 0 6px var(--ap-accent))}
.alerts-preview .ap-text{min-width:0}
.alerts-preview .ap-title{font-family:var(--ap-title-font);font-weight:900;line-height:1.02;color:var(--ap-accent);font-size:var(--ap-title-size);text-transform:uppercase;letter-spacing:.01em;word-break:break-word}
.alerts-preview .ap-msg{margin-top:.25rem;font-family:var(--ap-body-font);color:var(--ap-text);font-size:var(--ap-msg-size);line-height:1.25;word-break:break-word}
.alerts-preview.ap-contrast{background:#000;border-color:var(--ap-accent)}
.alerts-preview.ap-contrast .ap-msg{color:#fff}
/* Stil-Spiegel der Vorschau (grob — die echten Looks rendert alerts.html via html[data-style]) */
.alerts-preview[data-style="minimal"]{background:linear-gradient(180deg,rgba(14,20,26,.95),rgba(10,14,18,.95));border-left-width:2px}
.alerts-preview[data-style="minimal"] .ap-title{text-transform:none}
.alerts-preview[data-style="ember"]{background:linear-gradient(180deg,rgba(35,16,10,.96),rgba(23,10,6,.97));border-left-width:6px;box-shadow:inset 0 0 26px rgba(255,61,31,.28)}
.alerts-preview[data-style="neon"]{background:linear-gradient(180deg,rgba(26,5,53,.95),rgba(12,4,32,.96));box-shadow:inset 0 0 22px rgba(33,243,255,.22),inset 0 -8px 22px rgba(255,43,214,.14)}
.alerts-preview[data-style="neon"] .ap-title{text-shadow:0 0 10px rgba(33,243,255,.8)}
/* Stil-Karten (4 wählbare Looks) — Mini-Vorschau je Karte im echten Farbklima */
.alerts-styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin:.2rem 0 .9rem}
.alerts-style-card{display:grid;gap:.35rem;padding:.55rem;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:var(--radius,10px);background:rgba(255,255,255,.02);cursor:pointer;text-align:left;color:inherit;font:inherit}
.alerts-style-card:hover{border-color:rgba(255,255,255,.28)}
.alerts-style-card.active{border-color:#d97706;box-shadow:0 0 0 1px #d97706 inset}
.alerts-style-card b{font-size:.92rem}
.alerts-style-card small{color:var(--muted,#8a8f98);line-height:1.3}
.asc-prev{display:grid;place-items:center;gap:2px;height:52px;border-radius:var(--radius-sm);font-weight:900;padding:.2rem}
.asc-prev .asc-t{font-size:.78rem;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.asc-prev .asc-m{font-size:.55rem;opacity:.9}
.asc-minimal{background:#0e141a;border:1px solid rgba(238,244,247,.16)}
.asc-minimal .asc-t{color:#5ad7cf;text-transform:none}
.asc-minimal .asc-m{color:#eef4f7}
.asc-signal{background:linear-gradient(180deg,#0b1b28,#0e0f11);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 2px 0 rgba(217,119,6,.7)}
.asc-signal .asc-t{color:#d97706}
.asc-signal .asc-m{color:#e8e8e8}
.asc-ember{background:linear-gradient(180deg,#23100a,#170a06);border:2px solid #ff6a1a;box-shadow:0 0 14px rgba(255,61,31,.4)}
.asc-ember .asc-t{color:#ff6a1a}
.asc-ember .asc-m{color:#ffe9d6}
.asc-neon{background:linear-gradient(180deg,#1a0535,#0c0420);border:1px solid #21f3ff;box-shadow:0 0 12px rgba(33,243,255,.45)}
.asc-neon .asc-t{color:#21f3ff;text-shadow:0 0 8px rgba(33,243,255,.8)}
.asc-neon .asc-m{color:#ff5ad8}
/* Bits-Stufen-Zeilen (Sticker per Bits, Cheer-Tab) */
.bits-rule{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.35rem 0}
.bits-rule input[type="number"]{width:6.5rem}
.bits-rule select{min-width:9rem;flex:1}
/* Auto-Nachrichten: Ziel-Auswahl + Liste als 2-Spalten-Kartengrid mit Abgrenzung */
.am-targets{border:1px solid var(--line,rgba(255,255,255,.12));border-radius:var(--radius,10px);padding:.5rem .7rem;margin:.2rem 0 .5rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
.am-targets legend{padding:0 .35rem}
.am-ch-field{min-width:12rem}
.am-ch-field.am-off{opacity:.45}
.am-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.6rem}
.am-card{border:1px solid var(--line,rgba(255,255,255,.12));border-radius:var(--radius,10px);background:rgba(255,255,255,.02);padding:.55rem .7rem;display:flex;flex-direction:column;gap:.35rem}
.am-card.am-off{opacity:.6}
.am-card-head{display:flex;align-items:center;gap:.4rem}
.am-dot.ok{color:#3ecf8e}
.am-card-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-card-btns{display:flex;gap:.25rem;flex:none}
.am-card-meta{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.am-tag{font-size:.72rem;padding:.1rem .45rem;border-radius:999px;background:rgba(255,255,255,.06);white-space:nowrap}
.am-tag-dc{background:rgba(88,101,242,.18);color:#c5cbf5}
.am-tag-tw{background:rgba(145,70,255,.18);color:#d3bcff}
.am-tag-rot{background:rgba(217,119,6,.18);color:#f0c07a}
.am-card-text{color:var(--muted,#8a8f98);font-size:.8rem;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ── Stil-Preset-Knopf (Glücksrad „Farbe & Stil") — war 7× inline, ist ein Bauteil.
      Der Farbverlauf bleibt am Element: der ist DATEN (pro Preset anders), kein Layout. ── */
.ui2 .kw-preset { cursor: pointer; padding: .6rem .4rem; text-align: center; }
.ui2 .kw-preset-sw { display: block; height: 32px; border-radius: var(--radius-sm, 8px); margin-bottom: .4rem; }
/* Charakter-Vorschau statt Farbstreifen (Boss-Welt-Waehler, Owner 2026-07-19): kleines
   freigestelltes Thumb (thumb_*.png, ~27-40 KB) — gleiche Block-Rhythmik wie .kw-preset-sw. */
.ui2 .kw-preset-img { display: block; height: 56px; width: auto; margin: 0 auto .4rem; object-fit: contain; }
/* Emoji-Icon statt Farbstreifen (Spiel-Wahl bei den Game-Belohnungen) — gleiche Block-Rhythmik
   wie .kw-preset-sw, damit Icon zentriert ueber dem Namen steht. */
.ui2 .kw-preset-ico { display: block; font-size: 1.6rem; line-height: 1; margin-bottom: .35rem; }
.ui2 .kw-preset .ovs-name { font-size: .85rem; }
/* GEWAEHLT (v711): fuer Preset-Reihen, in denen eine Wahl STEHEN bleibt (Ring-Stil) — nicht
   jede Reihe braucht das (die Glücksrad-Presets sind „anwenden", nicht „ausgewaehlt", und
   setzen .on darum nie). Marker ist .on + aria-pressed, wie das Panel „eine aus N" schon
   ueberall markiert (siehe .cpw-slot). */
.ui2 .kw-preset.on { border-color: var(--trail, #d97706); box-shadow: 0 0 0 1px var(--trail, #d97706) inset; }
.ui2 .kw-preset.on .ovs-name { color: var(--trail, #d97706); font-weight: 700; }
/* Fussnote an einer Preset-Karte (z. B. „Figur folgt") — sagt, dass an DIESER Wahl noch
   etwas aussteht, ohne sie zu sperren. */
.ui2 .kw-preset-note { display: block; margin-top: .15rem; font-size: .68rem; line-height: 1.2; color: var(--muted, #8a8f98); }

/* ── Formular-Feld ohne Eigenabstand. Ersetzt 16× inline `margin:0`, das die
      margin-bottom:12px von .ui2 .set-field abgeschaltet hat. Schwester von .inline. ── */
.ui2 .set-field.flush { margin-bottom: 0; }

/* ── Popup-Groessen: EINE Skala statt 8 Zufallsbreiten (420/440/460/520/560/600/860/920).
      Gleiches Bauteil = gleiche Stufen. Ohne Zusatz bleibt der bisherige Default. ── */
.cnt-modal-card.sm { width: min(460px, 94vw); }
.cnt-modal-card.md { width: min(600px, 94vw); }
.cnt-modal-card.lg { width: min(920px, 94vw); }

/* ════════════════════════════════════════════════════════════════════════
   „WAS, WIE, WIESO?" — Erklär-Block am Fuß jeder View.
   EIN Bauteil. Der Inhalt kommt als Daten aus public/wwd.js, das Markup
   baut niemand von Hand. Neue Seite = drei Sätze in der Tabelle, kein HTML.
   Volle Breite, immer unterste Zeile der View.
   ════════════════════════════════════════════════════════════════════════ */
.ui2 .kw-wwd {
  width: 100%;
  margin-top: 1.4rem;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface, var(--void-2));
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--hi);
}
.ui2 .kw-wwd-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acc, var(--trail, #d97706));
}
.ui2 .kw-wwd p { margin: 0 0 0.45rem; font-size: 0.88rem; color: var(--muted); }
.ui2 .kw-wwd p:last-child { margin-bottom: 0; }
.ui2 .kw-wwd b { color: var(--bone); font-weight: 700; }
.ui2 .kw-wwd .kw-wwd-tip {
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--trail, #d97706);
  border-radius: var(--radius-sm, 8px);
  background: rgba(217, 118, 6, 0.06);
}


/* ════════════════════════════════════════════════════════════════════════
   OPERATOR-BACKOFFICE (.op-* · operator.html)
   ────────────────────────────────────────────────────────────────────────
   HIERHER GEHOLT aus dem <style>-Block in public/operator.html (v685).
   Der Operator-Bereich hatte einen eigenen Look UND eine eigene Style-Quelle —
   genau das, was wir im Panel gerade abgeraeumt haben. Jetzt: EINE CSS.
   Die Seite traegt ab v685 die Klasse ui2 auf #op-app, damit dieselbe Linie greift
   (Karten, Titelleisten, Formulare, Raster).
   ⚠ Kein <style> zurueck ins Markup.
   ════════════════════════════════════════════════════════════════════════ */
/* Keys verdeckt — Klick zeigt/versteckt (Schutz bei Screenshare/Schulterblick) */
code.keycode { cursor: pointer; user-select: none; letter-spacing: .1em; }
code.keycode.shown { user-select: text; letter-spacing: normal; }
code.keycode:not(.shown):hover { outline: 1px dashed currentColor; outline-offset: 2px; opacity: .9; }
#op-keys-toggle { margin-left: .5rem; vertical-align: middle; }
.op-bulk-bar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: .1rem 0 .55rem; padding: .4rem .55rem; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); }
.op-bulk-bar.hidden { display: none; }
.op-bulk-bar .op-bulk-all { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.op-bulk-bar .op-bulk-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-wrap: wrap; }
/* globale input/select-Regel (width:100% + Padding + margin) fuer die Auswahl neutralisieren */
.op-code-sel, #op-sel-all { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; cursor: pointer; margin: 0; padding: 0; accent-color: #d97706; }
.op-code-sel { margin-right: .15rem; }
.op-bulk-bar select { width: auto; margin: 0; padding: .3rem .55rem; }
/* Tarif-Gating: 2 Spalten — Text links (flexibel), Auswahl rechts (einheitliche Breite) */
.op-gate-row .op-gate-lbl { flex: 1 1 auto; min-width: 0; }
.op-gate-row select.op-gate { width: 230px; flex: 0 0 230px; margin: 0; padding: .35rem .55rem; }
/* Preise: Tarif-Gruppen-Ueberschrift (Premium) */
.op-price-grp { margin: .9rem 0 .4rem; font-size: .92rem; letter-spacing: .02em; border-top: 1px solid rgba(255,255,255,.1); padding-top: .7rem; }
.op-price-grp:first-of-type { border-top: 0; padding-top: 0; }
/* Bug Report: aufklappbare Debug-Daten pro Meldung */
.op-bug-row { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.op-bug-main { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.op-bug-text { white-space: pre-wrap; word-break: break-word; }
.op-bug-dbg { margin-top: .3rem; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-xs); padding: .25rem .5rem; }
.op-bug-dbg > summary { cursor: pointer; user-select: none; padding: .15rem 0; }
.op-bug-dbg[open] > summary { margin-bottom: .35rem; }
.op-bug-dbg-dl { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: .15rem .7rem; margin: 0; } /* minmax: lange Mono-Werte (UA/Pfade) umbrechen statt sprengen */
.op-bug-dbg-dl dt { margin: 0; }
.op-bug-dbg-dl dd { margin: 0; word-break: break-word; overflow-wrap: anywhere; }
.op-bug-dbg-pre { margin: 0; white-space: pre-wrap; word-break: break-word; max-height: 18rem; overflow: auto; }
/* System-Tab: Karten zweispaltig (uebersichtlicher), Titel ueber volle Breite. Schmal -> einspaltig.
   :not(.hidden), damit die ID-Regel den .hidden-Tab-Umschalter (Klasse) nicht aussticht. */
#op-system:not(.hidden) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
#op-system > .kw-titlebar { grid-column: 1 / -1; margin-bottom: 0; }
#op-system > .card { margin: 0; }
@media (max-width: 900px) { #op-system:not(.hidden) { grid-template-columns: 1fr; } }
/* Posting-Stil: kompaktes Farbfeld-Raster (Label + Color-Swatch) */
.ops-color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem .8rem; margin: .2rem 0 .8rem; }
.ops-color-grid .set-field { margin: 0; }
/* Posting-Stil: Konfig + Live-Embed-Vorschau nebeneinander; Karte ueber beide System-Spalten. */
.ops-posting-card { grid-column: 1 / -1; }
.ops-posting-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1100px) { .ops-posting-grid { grid-template-columns: 1fr; } }
.ops-color-pair { display: flex; gap: .3rem; align-items: center; }
.ops-color-pair input[type="color"] { width: 2.4rem; height: 2rem; padding: 2px; flex: 0 0 auto; cursor: pointer; }
.ops-hex { flex: 1 1 auto; min-width: 0; font-family: 'Geist Mono', monospace; text-transform: uppercase; }
.ops-pv-wrap { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; }
.ops-pv-occasion { margin-bottom: .7rem; }
/* Discord-Embed-Nachbau (feste Discord-UI-Farben, NICHT unser Branding) */
.dc-embed { display: grid; grid-template-columns: 4px 1fr; background: #2b2d31; border-radius: var(--radius-xs); overflow: hidden; max-width: 440px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.dc-embed-bar { background: #d97706; }
.dc-embed-body { padding: .55rem .75rem; position: relative; min-height: 60px; }
.dc-embed-author { font-size: .78rem; color: #b5bac1; margin-bottom: .15rem; }
.dc-embed-title { font-weight: 700; color: #5865f2; font-size: .95rem; margin-bottom: .25rem; }
.dc-embed-desc { font-size: .82rem; color: #dbdee1; line-height: 1.35; }
.dc-embed-img { margin-top: .5rem; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-xs); background: #1e1f22; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #72767d; }
.dc-embed-footer { font-size: .7rem; color: #949ba4; margin-top: .5rem; }
/* Checkbox-Zeilen (Vorschaubilder/Zeitstempel): Häkchen + Label sauber nebeneinander, linksbündig. */
.op-check { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; cursor: pointer; font-size: .9rem; }
.op-check input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; flex: 0 0 auto; cursor: pointer; }
/* Sticker-Bibliothek: Vorschau-Raster (Bild + Name + Löschen). */
.op-stk-count { margin-left: auto; font-family: 'Geist Mono', monospace; }
.op-stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .7rem; margin-top: .8rem; }
.op-stk-card { display: flex; flex-direction: column; gap: .4rem; align-items: center; padding: .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(0,0,0,.18); text-align: center; }
.op-stk-card img { width: 100%; height: 5.2rem; object-fit: contain; background: rgba(255,255,255,.04); border-radius: var(--radius-xs); }
.op-stk-name { font-size: .78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-stk-sz { font-family: 'Geist Mono', monospace; }

/* ── STILLER CTA — ein Hinweis, der klickbar ist, ohne zu schreien.
      Gegenstueck zu .cnt-cta (gestrichelt, orange, laut): der ist fuer „hier anlegen",
      dieser fuer „es gibt da noch was". Owner: gefaellig, nicht aufdringlich. ── */
.ui2 .kw-quiet-cta {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 1.1rem 0 0; padding: 0.7rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--muted);
  font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.ui2 .kw-quiet-cta b { color: var(--bone); font-weight: 700; }
.ui2 .kw-quiet-cta:hover { border-color: rgba(217, 118, 6, 0.45); color: var(--bone); background: rgba(217, 118, 6, 0.05); }
.ui2 .kw-quiet-cta .kw-quiet-cta-go { margin-left: auto; color: var(--trail, #d97706); font-size: 1.1rem; line-height: 1; }
.ui2 .kw-quiet-cta:hover .kw-quiet-cta-go { transform: translateX(2px); }

/* ── VERDECKTE LINK-AUSGABE (Owner 2026-07-15) — der Schutz-Key steckt in jedem OBS-Link
      und ist ein Passwort. In Listen steht deshalb kein Klartext mehr: entweder nur der
      Kopier-Knopf (Karte — der Link selbst liegt im ⚙-Popup), oder der Link mit gepunktetem
      Key. Die Zeile ist .ovs-url (die gibt es schon) — hier stehen NUR die Abweichungen. ── */
.ovs-copy-wide { flex: 1 1 auto; width: auto; padding: 0 0.9rem; gap: 0.4rem; font-weight: 700; }
.kw-url-lbl { flex: 0 0 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovs-url + .ovs-url { margin-top: 0.4rem; }
/* Auge-Schalter zeigt an, dass gerade ein Geheimnis offen liegt. */
#ovb-g-reveal[aria-pressed="true"] { border: 1px solid var(--void-1, #1b1b1b); background: var(--bone, #e8e8e8); }
/* Die Popup-Zeile folgt der Notiz, nicht einer zweiten .ovs-url — Abstand daher hier. */
#ovb-g-urlrow { margin-top: 0.8rem; }

/* ── „AKTIVES OVERLAY" AUFGERAEUMT (Owner 2026-07-15) ─────────────────────────────
      Nur die Abweichungen zu vorhandenen Bauteilen — alles andere kommt unveraendert
      aus .ovb-preview-wrap / .ovb-preview-scenes / .ovb-prev-scene / .kw-quiet-cta.

      1) STINGER-VORSCHAU: das 16:9-Feld ist die bestehende .ovb-preview-wrap; sie muss
         hier nur SCHMALER sein als die Live-Vorschau. 62 % statt fixer px, damit das
         Verhaeltnis auf jeder Breite haelt (beide Spalten sind gleich breit — minmax(0,1fr)),
         auch wenn die Leiter bei ≤860px auf eine Spalte klappt.
      2) CTA-ZEILE: .ovb-cta-row bleibt der Container (gibt es schon, oben in der Datei als
         flex-Reihe fuer .btn). Ihr Inhalt sind jetzt gestapelte .kw-quiet-cta statt Knoepfe
         → hier nur Richtung + Abstand. Die Regel `.ovb-cta-row .btn` greift mangels .btn
         nicht mehr und bleibt deshalb unangetastet. ── */
.ovb-stinger-prevbox { max-width: 62%; margin: 0.35rem 0 0; }
/* Kein .ovb-preview-frame: das <video> wird nicht per JS skaliert (fitPreviews betrifft nur
   die 1920px-iframes), es fuellt das Feld selbst. object-fit hält den Stinger unverzerrt. */
.ovb-stinger-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; border: 0; }
/* Set-Auswahl sitzt in der Pillen-Leiste → auf .ovb-prev-scene-Groesse herunter (das Basis-
   <select> bringt Formular-Padding + margin-bottom mit). */
.ovb-stinger-set { margin: 0; max-width: 11rem; padding: 3px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
.ui2 .ovb-cta-row { flex-direction: column; gap: 0.5rem; }
/* .ui2-Praefix schlaegt das margin-top aus `.ui2 .kw-quiet-cta` (gleiche Spezifitaet sonst). */
.ui2 .ovb-cta-row .kw-quiet-cta { margin: 0; }

/* ════════════════════════════════════════════════════════════════════════
   KW UI · DIE LINIE — Modifier-Nachtrag (Alerts-Umbau 2026-07-15)
   Zwei Modifier auf dem BESTEHENDEN Raster + eine Feld-Gruppe.
   Keine Parallel-Klassen: .kw-span-2 / .kw-sticky sind Zusaetze auf
   .kw-content-Kindern — kein zweites Raster daneben.
   ════════════════════════════════════════════════════════════════════════ */

/* ── SPAN: ein Kind darf 2 Spalten breit sein. Damit wird aus .kw-content.third
      (3 gleiche Spalten) ein echtes 2/3 + 1/3 — OHNE eigenes grid-template-columns
      und ohne `2fr 1fr` (2fr/1fr haetten je Spalte wieder einen auto-Boden → die
      erste Spalte wird breiter, der bekannte Bug).
      Rechnung: 3 Tracks à minmax(0,1fr). Ein Kind ueber 2 Tracks + 1 Gap
      = exakt 2/3 der Breite, das andere = 1/3. (Gemessen: 849.20 = soll 849.19) ── */
.ui2 .kw-content > .kw-span-2 { grid-column: span 2; }
/* ⚠ Umbruch-Leiter: ≤1180px ist .third 2-spaltig → span 2 = volle Reihe (gewollt,
   die 1/3-Karte rutscht darunter). ≤860px ist das Raster 1-spaltig — dort MUSS der
   Span zurueck, sonst legt der Browser eine IMPLIZITE 2. Spalte an (gemessen:
   „466.801px 0px") und die echte Spalte verliert die Gap-Breite. */
@media (max-width: 860px) { .ui2 .kw-content > .kw-span-2 { grid-column: auto; } }

/* ── STICKY: ein Kind bleibt beim Scrollen stehen (Vorschau neben hohen Reglern).
      Funktioniert, weil .kw-content align-items:start setzt → die Karte ist kuerzer
      als ihre Grid-Area und kann darin wandern; gescrollt wird das Dokument
      (weder body/.app/.content/.view/.view-config haben ein overflow).
      Erprobtes Muster — identisch zu .ovb-right-col im Overlay-Baukasten.
      ⚠ NICHT mit .kw-content.stretch kombinieren: dessen `> * { height:100% }` macht
      die Karte so hoch wie die Reihe, dann faellt der Effekt weg. ── */
.ui2 .kw-sticky { position: sticky; top: 14px; align-self: start; }
/* Gestapelt (≤860px) gibt es nichts zum Mitwandern — Sticky wuerde die Karte nur
   ueber den folgenden Inhalt kleben. */
@media (max-width: 860px) { .ui2 .kw-sticky { position: static; } }

/* ── FIELDSET: benannte Feld-Gruppe INNERHALB einer Karte. Gab es noch nicht —
      die Regler lagen als eine flache Liste ohne erkennbaren Zusammenhang.
      Umschliesst die .form-grid, ersetzt sie NICHT → ohne dieses CSS bleibt das
      2-Spalten-Raster trotzdem stehen. ── */
.ui2 .kw-fieldset { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ui2 .kw-fieldset-title { display: block; margin-bottom: 10px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #8b8b95); }

/* ── Alerts: Abstand zwischen den zwei Reihen (Darstellung/OBS · Aussehen/Vorschau).
      Eindeutiger Block = ID. Nutzt den Raster-Token, damit der Abstand ZWISCHEN den
      Reihen derselbe ist wie zwischen den Karten IN einer Reihe.
      (Vorher lagen die Karten nackt im Wrapper — .ui2 .panel hat keine margin, sie
      klebten also ohne jeden Abstand aneinander = der „lieblos"-Eindruck.) ── */
#alerts-general-block { display: flex; flex-direction: column; gap: var(--kw-gap, 14px); }

/* ════════════════════════════════════════════════════════════════════════
   DEV-CONSOLE (#dev-* · public/dev-console.js)
   ────────────────────────────────────────────────────────────────────────
   HIERHER GEHOLT aus dem per JS in den <head> geschobenen Style-Block in
   public/dev-console.js (v686). Bewusst OFF-BRAND magenta/cyan, damit die
   DEV-Console sofort als solche erkennbar ist — das ist Absicht, kein Brand-Bruch.
   Wird im _R-Channel mit ausgeliefert, greift dort aber nie: ohne dev-console.js
   entsteht kein #dev-fab/#dev-panel, die Selektoren laufen ins Leere.

   ⚠ REIHENFOLGE: Dieser Block MUSS nach „#dev-badge" (Operator-DEV-Childtheme,
   weiter oben) stehen. Beide Features vergeben dieselbe ID #dev-badge
   (app.js applyDevTheme() + dev-console.js). Frueher gewann dev-console.js,
   weil sein Style per JS NACH style.css in den <head> kam. Diese Position
   haelt genau dieses Verhalten. Siehe offene Frage im Bericht.
   ════════════════════════════════════════════════════════════════════════ */
#dev-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 9001;
  display: flex; align-items: center; gap: 6px;
  padding: 11px 16px; border: none; border-radius: 999px; cursor: pointer;
  font-family: 'Geist Mono', monospace; font-weight: 800; font-size: 13px;
  letter-spacing: 0.08em; color: #fff;
  background: linear-gradient(135deg, #ff2d9b, #7a2bff);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12), 0 8px 26px rgba(255,45,155,0.5);
  animation: dev-pulse 2.4s ease-in-out infinite;
}
#dev-fab:hover { filter: brightness(1.12); transform: translateY(-1px); }
@keyframes dev-pulse { 0%,100%{ box-shadow:0 0 0 2px rgba(255,255,255,0.12), 0 8px 26px rgba(255,45,155,0.45);} 50%{ box-shadow:0 0 0 2px rgba(255,255,255,0.22), 0 8px 34px rgba(122,43,255,0.7);} }

#dev-console-badge {
  position: fixed; right: 18px; bottom: 66px; z-index: 9000;
  padding: 4px 10px; border-radius: var(--radius-xs); pointer-events: none;
  font-family: 'Geist Mono', monospace; font-weight: 800; font-size: 11px; letter-spacing: 0.06em;
  color: #fff; border: 1px solid rgba(255,255,255,0.25);
}
#dev-console-badge.dev-lite { background: #2b6b4f; }
#dev-console-badge.dev-pro  { background: linear-gradient(135deg,#ff8a00,#ff2d9b); }

#dev-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: 320px; max-width: 90vw; z-index: 9002;
  background: #120a18; border-left: 2px solid #ff2d9b;
  box-shadow: -16px 0 40px rgba(0,0,0,0.55);
  transform: translateX(105%); transition: transform 0.22s ease;
  display: flex; flex-direction: column; color: #f2e9f5;
  font-family: 'Instrument Sans', system-ui, sans-serif; overflow-y: auto;
}
#dev-panel.open { transform: translateX(0); }
#dev-panel .dev-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,45,155,0.3);
  position: sticky; top: 0; background: #120a18;
}
#dev-panel .dev-head b { font-family: 'Geist Mono', monospace; letter-spacing: 0.06em; font-size: 13px; }
#dev-panel .dev-head small { display:block; color:#b58ec9; font-size: 10px; letter-spacing: 0.04em; }
#dev-x { background: none; border: 1px solid rgba(255,255,255,0.25); color:#fff; width:28px; height:28px; border-radius:var(--radius-xs); cursor:pointer; font-size:15px; line-height:1; }
#dev-x:hover { border-color:#ff2d9b; }
#dev-panel .dev-sec { padding: 12px 16px; border-bottom: 1px dashed rgba(255,255,255,0.1); }
#dev-panel .dev-sec > label { display:block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color:#b58ec9; margin-bottom: 8px; font-family:'Geist Mono',monospace; }
.dev-row { display:flex; gap:6px; flex-wrap: wrap; }
.dev-btn {
  flex: 1 1 auto; min-width: 64px; padding: 8px 10px; cursor: pointer;
  background: #1d1226; color:#f2e9f5; border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-sm);
  font-family:'Geist Mono',monospace; font-size: 12px; font-weight: 700;
}
.dev-btn:hover { border-color:#ff2d9b; }
.dev-btn.on { border-color:#ff2d9b; background: rgba(255,45,155,0.18); color:#fff; }
#dev-panel select, #dev-panel input[type=range] { width: 100%; }
#dev-panel select { background:#1d1226; color:#f2e9f5; border:1px solid rgba(255,255,255,0.16); border-radius:var(--radius-sm); padding:7px; font-family:'Geist Mono',monospace; font-size:12px; }
.dev-val { float:right; color:#ff85c8; font-family:'Geist Mono',monospace; }
.dev-note { font-size: 10px; color:#8a7596; line-height:1.4; margin-top: 6px; }

/* ── Operator-Login · „Passwort vergessen?" (.op-forgot-link / #opf-modal / .opf-*)
      HIERHER GEHOLT aus dem per JS in den <head> geschobenen Style-Block in
      public/operator-forgot.js (v686). Gehoert thematisch zum Operator-Backoffice.
      Die Fallback-Werte (var(--muted, #9aa3ad) …) sind aus dem Original uebernommen:
      hier in style.css sind die Tokens ohnehin definiert, sie schaden aber nicht. ── */
.op-forgot-link { display: inline-block; margin: .55rem 0 0; background: none; border: 0; color: var(--muted, #9aa3ad); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; padding: 0; }
.op-forgot-link:hover { color: var(--trail, #d97706); }
#opf-modal .modal-card { max-width: 430px; }
#opf-modal .opf-body { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.opf-mail { text-align: center; }
.opf-copy { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }
.opf-copy code { background: var(--void-2, #181b20); padding: .2rem .45rem; border-radius: var(--radius-xs); user-select: all; }

/* ═══════════════════════════════════════════════════════════════════════
   BUG-MASKOTTCHEN (#kw-bug-mascot) — der Käfer in der Topbar.
   Markup + Verhalten: public/bugmascot.js. Hier steht NUR das Aussehen.

   Owner v694: „oben rechts bzw in der top bar wo frei ist zwischen server und
   (VORSCHLAG). da soll der ab und zu wandern." Vorher kroch er unten am Rand.

   Die Strecke ist .kw-bug-lane — ein flex:1-Kind der .topbar zwischen
   .server-select-wrap und .topbar-actions. Es frisst genau den Freiraum, den
   .topbar bisher per justify-content:space-between offen gelassen hat; die
   Knöpfe stehen dadurch unverändert rechts.

   ⚠ Die Wanderung ist bewusst CSS und kein JS-Timer: requestAnimationFrame
     feuert in Hintergrund-Tabs NIE, setInterval wird dort auf ~1/s gedrosselt.
     Eine CSS-Animation läuft unabhängig vom Tab-Zustand weiter.

   ⚠ Warum left 0→100% + translateX(0→-100%) statt einer festen px-Strecke:
     die Breite der Leiste hängt vom Server-Namen und den Knöpfen ab, die des
     Käfers vom Text. left:100% + translateX(-100%) heißt „rechtsbündig" —
     das stimmt bei JEDER Breite, ohne dass CSS eine Zahl kennen muss.
     Das -50% im translate zentriert ihn senkrecht (top:50%) und muss deshalb
     in JEDEM Keyframe mitlaufen, sonst springt er beim Start nach unten.

   Fahrplan (kw-bug-walk, 40 s Zyklus → alle 20 s GENAU EINE Wanderung):
      10 % (4 s)   Aufbruch nach rechts  → 40 % (16 s) angekommen   (12 s Weg)
      40–60 %      Pause rechts, dreht sich bei 48–52 % um
      60 % (24 s)  Aufbruch nach links   → 90 % (36 s) angekommen   (12 s Weg)
      90–100 %     Pause links, dreht sich bei 96–100 % zurück
   ═══════════════════════════════════════════════════════════════════════ */
.kw-bug-lane {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;        /* Regel 1 sinngemaess: sonst hat die Leiste einen auto-Boden */
  align-self: center;
  height: 42px;        /* niedriger als die Topbar-Zeile (79px) -> zieht sie nicht auseinander */
}

#kw-bug-mascot {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: kw-bug-walk 40s var(--ease) infinite;
}

/* Sprechblase — steht NEBEN dem Käfer (in der Leiste ist keine Höhe für „darüber").
   Sie dreht sich NICHT mit: das scaleX sitzt auf .kw-bug-art, sonst stünde der
   Text auf dem Rückweg spiegelverkehrt. */
#kw-bug-mascot .kw-bug-bubble {
  position: relative;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--void-2);
  color: var(--bone);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: var(--shadow-1);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
/* Zipfel zeigt nach LINKS auf den Käfer (vorher nach unten). */
#kw-bug-mascot .kw-bug-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 7px;
  height: 7px;
  background: var(--void-2);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translate(60%, -50%) rotate(45deg);
}

/* Der Käfer selbst. overflow:visible, weil die Beine bewusst aus der viewBox ragen.
   Kleiner als in der Fussleiste (war 72x56) — die Topbar-Zeile gibt nicht mehr her. */
#kw-bug-mascot .kw-bug-art {
  display: block;
  width: 48px;
  height: 37px;
  overflow: visible;
  animation: kw-bug-turn 40s var(--ease) infinite;
}

/* Panzer/Hals/Kopf: fill folgt dem Theme, Kontur --bone -> im Dark- wie im
   Light-Theme lesbar. Akzent bleibt Trail-Orange. */
#kw-bug-mascot .kw-bug-shell,
#kw-bug-mascot .kw-bug-hals,
#kw-bug-mascot .kw-bug-kopf {
  fill: var(--void-2);
  stroke: var(--bone);
  stroke-width: 2.0;
}
#kw-bug-mascot .kw-bug-legs path,
#kw-bug-mascot .kw-bug-fuehler path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#kw-bug-mascot .kw-bug-naht {
  fill: none;
  stroke: var(--trail);
  stroke-width: 2.2;
  stroke-linecap: round;
}
#kw-bug-mascot .kw-bug-fleck { fill: var(--trail); opacity: 0.85; }
#kw-bug-mascot .kw-bug-auge { fill: var(--trail); }

/* Dreifuss-Gang: obere und untere Beingruppe schwingen gegenphasig um die
   Koerpermitte — eine Animation, zwei Phasen, statt sechs Einzelbeinen. */
#kw-bug-mascot .kw-bug-legs {
  transform-box: view-box;
  transform-origin: 30px 28px;
  animation: kw-bug-gait 0.9s var(--ease) infinite alternate;
}
#kw-bug-mascot .kw-bug-legs--bot { animation-direction: alternate-reverse; }

/* Hover/Fokus: Fokus ist sichtbar (a11y) und sitzt auf dem beschrifteten Teil. */
#kw-bug-mascot:hover .kw-bug-bubble { border-color: var(--trail); color: var(--trail); }
#kw-bug-mascot:hover .kw-bug-art { filter: drop-shadow(var(--glow-trail)); }

/* ── ANGESCHAUT WERDEN (Owner 2026-07-16): „wenn man bei bug gefunden hoverd, schaut
      einen der bug an und bleibt stehen."

   1) BLEIBT STEHEN — animation-play-state statt animation:none. Der Unterschied ist
      wichtig: `none` wuerde ihn an den ANFANG der Bahn zurueckspringen lassen. `paused`
      friert ihn dort ein, wo er gerade ist, und beim Verlassen laeuft er weiter, statt
      neu zu starten.
   2) SCHAUT AN — der Kaefer ist eine DRAUFSICHT (Panzer = Oval, ein Auge links, eines
      rechts vom Kopf). Er kann sich nicht zur Kamera drehen, ohne dass jemand ihn neu
      zeichnet. Stattdessen der 2D-Trick: der Koerper staucht sich (scaleX .82) und
      neigt sich zum Betrachter (rotate) — das liest sich als „hat angehalten und dreht
      sich her". Dazu werden die Augen groesser, das macht den Blick.
      ⚠ Auf .kw-bug-art transform zu setzen wuerde mit kw-bug-turn (scaleX-Wende)
        kollidieren: die Animation gewinnt und der Hover-Transform waere wirkungslos.
        Deshalb sitzt der Hover-Transform auf einer INNEREN Gruppe (.kw-bug-koerper),
        die keine eigene Animation hat — die Wende bleibt aussen unberuehrt. ── */
#kw-bug-mascot:hover,
#kw-bug-mascot:hover .kw-bug-art,
#kw-bug-mascot:hover .kw-bug-legs { animation-play-state: paused; }
#kw-bug-mascot .kw-bug-koerper {
  transform-box: view-box;
  transform-origin: 40px 28px;
  transition: transform 0.22s var(--ease);
}
#kw-bug-mascot:hover .kw-bug-koerper { transform: scaleX(0.82) rotate(-7deg); }
#kw-bug-mascot .kw-bug-auge { transition: r 0.22s var(--ease); }
#kw-bug-mascot:hover .kw-bug-auge { r: 2.6; }
/* Reduzierte Bewegung: er steht ohnehin still — dann auch kein Herdrehen, nur der Blick. */
@media (prefers-reduced-motion: reduce) {
  #kw-bug-mascot .kw-bug-koerper { transition: none; }
  #kw-bug-mascot:hover .kw-bug-koerper { transform: none; }
}
#kw-bug-mascot:focus-visible { outline: none; }
#kw-bug-mascot:focus-visible .kw-bug-bubble {
  border-color: var(--trail);
  color: var(--trail);
  box-shadow: var(--focus-ring);
}

@keyframes kw-bug-walk {
  0%, 10%   { left: 0;    transform: translate(0, -50%); }
  40%, 60%  { left: 100%; transform: translate(-100%, -50%); }
  90%, 100% { left: 0;    transform: translate(0, -50%); }
}
@keyframes kw-bug-turn {
  0%, 48%   { transform: scaleX(1); }
  52%, 96%  { transform: scaleX(-1); }
  100%      { transform: scaleX(1); }
}
@keyframes kw-bug-gait {
  from { transform: rotate(-3.5deg); }
  to   { transform: rotate(3.5deg); }
}

/* Reduzierte Bewegung: kein Krabbeln. Der Käfer bleibt sichtbar und voll
   bedienbar, sitzt aber still an seinem Platz.
   ⚠ Der globale Reduce-Block weiter oben in dieser Datei setzt nur
     animation-duration/-iteration-count per !important — animation-NAME kippt
     er nicht. „animation: none" setzt den Namen auf none; damit läuft hier
     garantiert nichts, statt nur unsichtbar schnell auf den Endzustand zu
     springen. Das translate(0,-50%) der Grundregel haelt ihn dabei zentriert. */
@media (prefers-reduced-motion: reduce) {
  #kw-bug-mascot,
  #kw-bug-mascot .kw-bug-art,
  #kw-bug-mascot .kw-bug-legs { animation: none; }
}

/* Unter 860px wird die Topbar eng (Burger-Knopf + Server + Aktionen) — dort ist
   keine freie Flaeche mehr zum Wandern. Die LEISTE geht mit weg, sonst frisst
   sie als leeres flex:1-Kind weiter Platz. */
@media (max-width: 860px) {
  .kw-bug-lane { display: none; }
}

/* ── GOAL-LINK-PAAR (Owner 2026-07-15): „alle OBS-Links mit UND ohne Hintergrund — nebeneinander".
      Die Zeile ist .ovs-url (gibt es: display:flex; gap:8px) — hier stehen NUR die Abweichungen.
      .kw-copy-url = zwei Kopier-Wege in EINER Zeile (Klasse, weil einheitlich: Follower, Sub,
      Custom-Karte und Custom-Popup nutzen dasselbe Paar).
      1) .ovs-copy-wide bringt `flex:1 1 auto` mit -> die Knoepfe wuerden nach TEXTLAENGE
         verschieden breit (gemessen: 191.70px vs. 178.92px). `flex-basis:0` nimmt die Textlaenge
         aus der Rechnung -> exakt gleich (gemessen: 204.77 / 204.78). min-width:0 ist Regel 1
         sinngemaess fuer Flex: sonst hat jeder Knopf einen auto-Boden (min-content) und die
         Zeile laeuft ueber, statt zu teilen.
      2) .ovs-copy ist ein 40px-ICON-Knopf (1rem, nowrap). Als Text-Knopfpaar braucht er kleinere
         Schrift + Umbruch, sonst ragt die Beschriftung in schmalen Karten heraus (gemessen bei
         300px-Kachel: noetig 177px, vorhanden 148.8px). Der Umbruch haelt das Paar trotzdem
         NEBENEINANDER — er stapelt nur die Beschriftung, nicht die Knoepfe. ── */
.ovs-url > .kw-copy-url {
  flex: 1 1 0; min-width: 0;
  font-size: 0.82rem; line-height: 1.2;
  padding: 0.45rem 0.5rem; min-height: 40px;
  white-space: normal;
}

/* Custom-Ziel-Liste: Mindest-Kachel. #cgoal-list ist EINDEUTIG -> ID (Benennungs-Regel).
   .kw-cards steht auf --kw-tile:260px; diese Karte traegt Kopf + −/+ + Wert-Feld + Link-Paar
   und braucht mehr (das abgeloeste .ovs-grid stand aus demselben Grund auf minmax(300px,1fr)).
   Token statt neuer Klasse — der im .kw-cards-Block dokumentierte Weg. */
#cgoal-list { --kw-tile: 300px; }

/* ═══ KANALPUNKTE — Glücksrad als Karte (v701) ══════════════════════════════
   Das Rad ist jetzt eine Karte wie die Spiele: grobe Vorschau + AN/AUS + ⚙.
   Das Layout selbst kommt aus dem zentralen Vokabular (.kw-row cols-2 /
   .kw-content / .ovs-card / .nt-toggle / .kw-cards) — hier stehen NUR die
   Bauteile, die es noch nicht gab.
   ────────────────────────────────────────────────────────────────────────── */

/* Die geteilte OBS-Quelle + ihre Fussnote stehen UNTER den Karten, nicht in einer.
   .ovs-url traegt margin-top:auto (das drueckt sie in der Karte auf den Boden) —
   hier gibt es keinen Boden, darum ein fester Abstand. .ovs-url.kp-src (0,2,0)
   schlaegt .ovs-url (0,1,0) unabhaengig von der Reihenfolge in der Datei. */
.ui2 .ovs-url.kp-src { margin: .8rem 0 0; }
.ui2 .kp-hint { margin: .4rem 0 0; }

/* ── Speicher-Slots ────────────────────────────────────────────────────────
   Chips, die waehlen, welches Rad Vorschau, Schalter und ⚙-Popup meinen.
   Loest die Inline-Styles ab, die renderCpwSlots() frueher pro Chip schrieb. */
.ui2 .cpw-slots { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ui2 .cpw-slot {
  padding: .34rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted, #8b8b95);
  font: inherit; font-size: .86rem; line-height: 1.2; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ui2 .cpw-slot:hover { color: var(--trail, #d97706); border-color: var(--trail, #d97706); }
.ui2 .cpw-slot.on { background: var(--trail, #d97706); border-color: transparent; color: #111; font-weight: 700; }
.ui2 .cpw-slot.add { border-style: dashed; }

/* ── Vorschau-Zeile: Mini-Rad links, Kurzinfo + AN/AUS rechts ────────────── */
.ui2 .cpw-preview { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ui2 .cpw-preview-meta { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; flex: 1; min-width: 0; }
.ui2 .cpw-preview-meta .ovs-sub { width: 100%; }

/* ── Mini-Rad ──────────────────────────────────────────────────────────────
   GROB und absichtlich: flache Segmente + Akzent-Ring + Nabe + Zeiger, kein Dreh
   (nichts animiert -> kein requestAnimationFrame, das in Hintergrund-Tabs nie feuert).
   --cpw-seg (conic-gradient) und --cpw-acc setzt renderCpwPreview() als reine WERTE;
   die Regeln stehen hier. Die Farben kommen aus cpwPalettes() in app.js, das die
   Tabelle aus overlay/cpwheel.html spiegelt — die Vorschau erfindet keine eigenen. */
.ui2 .cpw-disc {
  position: relative; flex: 0 0 var(--cpw-disc, 78px);
  width: var(--cpw-disc, 78px); height: var(--cpw-disc, 78px);
  border-radius: 50%; border: 2px solid var(--cpw-acc, var(--trail, #d97706));
  background: var(--cpw-seg, #23262b);
  box-shadow: 0 0 12px -3px var(--cpw-acc, #d97706);
}
/* Zeiger oben — zeigt ins Rad, wie im Overlay. */
.ui2 .cpw-disc::before {
  content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 9px solid var(--cpw-acc, var(--trail, #d97706));
}
/* Nabe */
.ui2 .cpw-disc::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--cpw-acc, var(--trail, #d97706)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}

/* ── Stil-Presets im ⚙-Popup ───────────────────────────────────────────────
   Gleiche Karten-Kacheln wie ueberall, nur kleiner: Kachelbreite ueber den Token
   --kw-tile, NICHT ueber ein eigenes Grid (so wie #cgoal-list es macht). */
#cpw-presets { --kw-tile: 72px; }

/* Farbstreifen der Presets — waren Inline-Gradients im Markup. Die Streifen
   zeigen die Palette, die der Klick setzt (siehe cpwPalettes() in app.js). */
.ui2 .kw-preset-sw.sw-maritime { background: linear-gradient(90deg, #004272, #d97706, #13496e, #b8650a, #1a5a85); }
.ui2 .kw-preset-sw.sw-candy    { background: linear-gradient(90deg, #e0524d, #f0a020, #3aa0d0, #8a5cd0, #40b070); }
.ui2 .kw-preset-sw.sw-night    { background: linear-gradient(90deg, #161616, #d97706, #242424, #d97706, #323232); }
.ui2 .kw-preset-sw.sw-toxic    { background: linear-gradient(90deg, #0a1a0a, #39ff14, #0f2a0f, #39ff14, #0a1a0a); }
.ui2 .kw-preset-sw.sw-violett  { background: linear-gradient(90deg, #140a1e, #a855f7, #1e0f2e, #a855f7, #140a1e); }
.ui2 .kw-preset-sw.sw-pink     { background: linear-gradient(90deg, #1e0a16, #ff2d95, #2e0f22, #ff2d95, #1e0a16); }
.ui2 .kw-preset-sw.sw-rot      { background: linear-gradient(90deg, #1e0a0a, #ff2e2e, #2e0f0f, #ff2e2e, #1e0a0a); }

/* „Slot löschen" rechts abgesetzt — die zerstoererische Aktion steht nicht direkt
   neben „Speichern". (War vorher ein Inline-margin-left:auto am Button.) */
.ui2 .button-row .cpw-e-delete-btn { margin-left: auto; }

/* ═══ LETZTER IM RING — Stil-Wahl im ⚙-Popup (v711) ═════════════════════════
   Dieselben Preset-Karten wie beim Glücksrad, eigene Farbstreifen: eigener
   sw-ring-*-Vorsatz, weil `sw-*` ein geteilter Namensraum ist und es hier schon
   ein Goblin-SPIEL gibt (Loot-Goblin-Rush) — `sw-goblin` waere zweideutig.
   Breiter als beim Rad (72px), weil zwei Karten eine Fussnote tragen.
   ⚠ Die Streifen ZEIGEN die Welt, sie machen sie nicht: die echten Farben stehen
     in public/overlay/race.html (Register BOSSE + #szene-ring[data-boss=…]).
     Aendert sich eine Welt dort, gehoert ihr Streifen hier nachgezogen.
   ────────────────────────────────────────────────────────────────────────── */
#ov-ring-boss { --kw-tile: 96px; }
/* Boss-Bernstein / Feenstaub-Türkis / Kessel-Blau — je Akzent + Konfetti der Welt. */
.ui2 .kw-preset-sw.sw-ring-goblin    { background: linear-gradient(90deg, #1b1b1b, #d97706, #f5c542, #d97706, #1b1b1b); }
.ui2 .kw-preset-sw.sw-ring-feenstaub { background: linear-gradient(90deg, #1b1b1b, #7fe6d8, #bff4ec, #7fe6d8, #1b1b1b); }
.ui2 .kw-preset-sw.sw-ring-konstrukt { background: linear-gradient(90deg, #1b1b1b, #8fd3ff, #cfe9ff, #8fd3ff, #1b1b1b); }

/* Textfelder in Popup-Formularen duerfen hoeher gezogen werden — gleiche Linie
   wie .ui2 .field textarea, nur fuer den .ovb-lc-form-Stack der ⚙-Popups. */
.ui2 .ovb-lc-form textarea { resize: vertical; }

/* ════════════════════════════════════════════════════════════════════════
   OPERATOR-BACKOFFICE · OPTIK-ANGLEICH ANS PANEL (2026-07-18)
   ────────────────────────────────────────────────────────────────────────
   NUR operator.html. Additiv ans Dateiende — Bestand oben unberührt.
   Zieht die Seite auf die Panel-Linie: boxed Content (dieselbe --shell-max-
   Mechanik wie .app/.content, v713), Topbar-/Brand-Bauteile (.topbar,
   .brand-lockup), Sidebar-Tabs in .nav-item-Metrik, .nt-toggle-Reihen.
   Keine neuen Bauteile — nur Bestands-Klassen + kleine Operator-Anker.
   ════════════════════════════════════════════════════════════════════════ */

/* ── BOXED (v713-Mechanik): EIN Deckel, dieselbe Variable wie .app{--shell-max}.
      Schlägt das alte `.op-main{max-width:920px}` (ganz oben) per Kaskade:
      gleiche Spezifität wie `.op-shell .op-main`, aber später in der Datei. ── */
.op-shell { --shell-max: 1440px; } /* Wert = .app { --shell-max } — bei Änderung dort mitziehen */
.op-shell .op-main { max-width: var(--shell-max); margin-inline: auto; padding: 1.5rem 2rem; }
@media (max-width: 720px) { .op-shell .op-main { padding: 1rem; } } /* Bestands-MQ (oben) nachziehen — stünde sonst früher in der Kaskade und verlöre */

/* ── TOPBAR: Bauteil ist `.ui2 .topbar` (Panel). Hier nur Operator-Details. ── */
.op-topbar a.ghost-button { text-decoration: none; }
.op-topbar .op-side-status { padding: 0; white-space: nowrap; }

/* ── SIDEBAR: Brand-Lockup (Panel-Bauteil) einpassen + Tabs in .nav-item-Metrik.
      Gleiche Spezifität wie die .op-tab-Bestandsregel (oben) → später gewinnt. ── */
.op-shell .op-sidebar .brand-lockup { margin: 0 0 0.9rem; padding: 0 0.3rem; flex-wrap: wrap; }
.op-shell .op-sidebar .brand-lockup .op-tag { margin-left: auto; }
.op-shell .op-sidebar .op-tab { min-height: 42px; padding: 12px 10px; border-radius: var(--radius); }

/* ── nt-Reihen in Operator-Karten: Luft wie im Panel-Formular. ── */
.op-app .nt-row { margin: 0.5rem 0; }

/* ── Status-Zeile (Bot verbunden? Banner aktiv?) — Gate-Row-Bauart ohne
      Klick-Semantik: kein Zeiger, kein Hover-Rand. Ersetzt 3× Inline-Style. ── */
.op-status-line { cursor: default; margin-top: 0.6rem; }
.op-status-line:hover { border-color: var(--line); }

/* ── Klasse statt Inline (Benennungs-Regel): Aktions-Reihen, Ablauf-Erinnerung,
      Speichern-Reihe, Rechts-Links, Mail-Modal. ── */
.op-actions-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.op-inline-card { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.op-inline-lbl { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
#op-remind-days { width: 4.5rem; }
.op-save-row { margin-top: 0.7rem; }
#op-betreiber .legal-row { margin-top: 1rem; }
#op-mail-modal .op-row { margin-top: 0.6rem; }
#op-mail-modal .op-mail-hint { margin: 0.2rem 0 0.6rem; }

/* ── Gratis-Spiele: Discord-Ausgabe-Vorschau (Owner 2026-07-21) ──────────────
   Statisches Mockup des Post-Layouts im Panel. Bewusst Discord-artig (dunkle
   Karte + linker Farbbalken), damit der Streamer den echten Look abgleichen kann. */
.fgprev { border-radius: var(--radius-sm); background: #2b2d31; border-left: 4px solid #1b6ec2;
          padding: 12px 14px; max-width: 460px; color: #dbdee1; font-size: .9rem; line-height: 1.4; }
.fgprev-title { color: #00a8fc; font-weight: 700; font-size: 1rem; margin-bottom: .35rem; }
.fgprev-desc { margin-bottom: .5rem; }
.fgprev-desc s { color: #949ba4; }
.fgprev-field { margin-bottom: .5rem; }
.fgprev-flabel { display: block; font-size: .72rem; font-weight: 700; color: #f2f3f5; }
.fgprev-fval { display: block; }
.fgprev-img { height: 120px; border-radius: var(--radius-xs); margin-bottom: .5rem; display: flex;
              align-items: center; justify-content: center; color: #6d7178; font-size: .8rem;
              background: repeating-linear-gradient(45deg, #232428, #232428 10px, #1e1f22 10px, #1e1f22 20px); }
.fgprev-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: .55rem; }
.fgprev-btn { background: #4e5058; color: #fff; border-radius: var(--radius-xs); padding: .3rem .6rem;
              font-size: .82rem; font-weight: 600; }
.fgprev-footer { font-size: .72rem; color: #949ba4; border-top: 1px solid #3f4147; padding-top: .4rem; }