/* ============================================================
   zwelvo Design System v1
   Eine Quelle für Tokens + Komponenten. Personas = Token-Sätze.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --bg:#08080d; --panel:rgba(255,255,255,.04); --panel-2:rgba(255,255,255,.07);
    --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.2);
    --text:#ececf1; --muted:#8b8b99; --soft:#b9b9c6;
    --accent-a:#3ddc97; --accent-b:#a78bfa;
    --critical:#ff5c5c; --warning:#ffb454; --ok:#3ddc97;
    --glow1:rgba(167,139,250,.16); --glow2:rgba(61,220,151,.13);
    --reco-bg:rgba(61,220,151,.07); --reco-border:rgba(61,220,151,.18); --reco-text:#c8f5e3;
    --radius:16px; --radius-sm:10px;
    --shadow:0 8px 28px rgba(0,0,0,.35);
    --spring:cubic-bezier(.34,1.56,.64,1);
    --font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
[data-theme="bloom"] {
    --bg:#faf5ef; --panel:rgba(120,90,60,.06); --panel-2:rgba(120,90,60,.1);
    --border:rgba(120,90,60,.16); --border-strong:rgba(120,90,60,.35);
    --text:#3d332c; --muted:#8a7a6d; --soft:#5d5148;
    --accent-a:#d97b66; --accent-b:#7ca982;
    --glow1:rgba(124,169,130,.18); --glow2:rgba(217,123,102,.14);
    --reco-bg:rgba(74,133,88,.10); --reco-border:rgba(74,133,88,.30); --reco-text:#38634a;
    --shadow:0 8px 24px rgba(120,90,60,.15);
    /* Status auf hellem Grund: dunkel genug zum LESEN — nie hell auf hell */
    --ok:#256e4c; --warning:#9a5b00; --critical:#b93a2e;
}
[data-theme="werkbank"] {
    --bg:#0d1117; --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.25);
    --text:#e6edf3; --muted:#8b949e; --soft:#b6bfc9;
    --accent-a:#f59e0b; --accent-b:#94a3b8;
    --glow1:rgba(245,158,11,.12); --glow2:rgba(100,116,139,.15);
}
[data-theme="kontor"] {
    --bg:#f6f8fa; --panel:rgba(15,23,42,.04); --panel-2:rgba(15,23,42,.07);
    --border:rgba(15,23,42,.12); --border-strong:rgba(15,23,42,.3);
    --text:#1f2933; --muted:#64748b; --soft:#3f4c5c;
    --accent-a:#2563eb; --accent-b:#0ea5e9;
    --glow1:rgba(37,99,235,.10); --glow2:rgba(14,165,233,.10);
    --reco-bg:rgba(16,122,87,.08); --reco-border:rgba(16,122,87,.28); --reco-text:#0f6b4f;
    --shadow:0 8px 24px rgba(15,23,42,.12);
    /* Status auf hellem Grund: dunkel genug zum LESEN */
    --ok:#0e6b47; --warning:#8f5700; --critical:#b32f2f;
}

/* ---------- Base ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    background:var(--bg); color:var(--text); font:var(--font); min-height:100vh;
    background-image:radial-gradient(ellipse 60% 40% at 70% -10%, var(--glow1), transparent),
                     radial-gradient(ellipse 50% 35% at 15% -5%, var(--glow2), transparent);
    background-repeat:no-repeat;
}
a { color:var(--accent-b); }

/* ---------- App-Shell ---------- */
.shell { display:flex; min-height:100vh; }
.sidebar {
    width:230px; flex-shrink:0; padding:26px 16px; border-right:1px solid var(--border);
    display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh;
}
.brand { display:flex; align-items:center; gap:11px; padding:0 10px 24px; }
.brand .logo {
    width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;
    background:linear-gradient(135deg,var(--accent-a),var(--accent-b));
    box-shadow:0 6px 22px var(--glow2);
}
.brand b { font-size:17px; letter-spacing:-.02em; }
.brand small { display:block; color:var(--muted); font-size:11px; margin-top:-3px; }
.nav-item {
    display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-sm);
    color:var(--muted); text-decoration:none; font-size:14px; font-weight:500;
    transition:background .15s, color .15s;
}
.nav-item:hover { background:var(--panel); color:var(--text); }
.nav-item.active { background:var(--panel-2); color:var(--text); }
.nav-item.active .nav-ico { filter:none; }
.nav-item .nav-ico { width:20px; text-align:center; }
.nav-item .soon-dot {
    margin-left:auto; font-size:9px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--accent-b); border:1px solid var(--border); border-radius:999px; padding:1px 7px;
}
.sidebar .spacer { flex:1; }
.sidebar .me { padding:12px 12px 4px; border-top:1px solid var(--border); font-size:12px; color:var(--muted);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.main { flex:1; min-width:0; padding:38px 40px 90px; max-width:1060px; }
.page-head { display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.page-head h1 { font-size:22px; letter-spacing:-.02em; }
.page-head .sub { color:var(--muted); font-size:13px; }
.page-head .right { margin-left:auto; display:flex; gap:8px; align-items:center; }

@media (max-width:760px) {
    .shell { flex-direction:column; }
    .sidebar { width:100%; height:auto; position:static; flex-direction:row; align-items:center;
        overflow-x:auto; padding:12px 14px; border-right:none; border-bottom:1px solid var(--border); }
    .brand { padding:0 12px 0 0; } .brand small { display:none; }
    .sidebar .spacer, .sidebar .me { display:none; }
    .nav-item { white-space:nowrap; }
    .main { padding:22px 18px 70px; }
}

/* ---------- Komponenten ---------- */
.btn {
    display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border);
    background:var(--panel); color:var(--text); border-radius:999px; padding:9px 18px;
    font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none;
    backdrop-filter:blur(10px);
    transition:transform .18s var(--spring), box-shadow .18s, border-color .15s, color .15s;
}
.btn:hover { transform:translateY(-1px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.btn:active { transform:scale(.97); }
.btn:focus-visible { outline:2px solid var(--accent-b); outline-offset:2px; }
.btn-primary { background:linear-gradient(90deg,var(--accent-a),var(--accent-b)); border:none; color:#fff; }
.btn-ghost { background:transparent; color:var(--muted); }
.btn-ghost:hover { color:var(--text); }
.btn-sm { padding:5px 13px; font-size:12.5px; font-weight:500; }
.btn-ok:hover { color:var(--ok); border-color:var(--reco-border); }

.card {
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px 22px; backdrop-filter:blur(8px); transition:border-color .2s;
}
.card:hover { border-color:var(--border-strong); }
.card + .card { margin-top:12px; }

.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    padding:3px 10px; border-radius:999px; }
.badge-critical { background:rgba(255,92,92,.14); color:var(--critical); }
.badge-warning { background:rgba(255,180,84,.14); color:var(--warning); }
.badge-info { background:rgba(167,139,250,.14); color:var(--accent-b); }
.badge-ok { background:var(--reco-bg); color:var(--ok); }

.pill { font-size:12px; text-decoration:none; color:var(--accent-b);
    border:1px solid var(--border); border-radius:999px; padding:3px 11px; }
.pill:hover { background:var(--panel-2); }
.pill-ok { color:var(--ok); }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:13px; margin-bottom:34px; }
.stat { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 18px; backdrop-filter:blur(8px); }
.stat b { display:block; font-size:26px; font-weight:700; letter-spacing:-.03em; }
.stat small { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

.input, .select, textarea.input {
    width:100%; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:10px 14px; color:var(--text); font:inherit; font-size:14px;
}
.input:focus, .select:focus, textarea.input:focus {
    outline:none; border-color:var(--accent-b); box-shadow:0 0 0 3px var(--glow1);
}
.select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size:5px 5px; background-repeat:no-repeat; padding-right:36px; }
label.field { display:block; font-size:12.5px; color:var(--muted); margin:14px 0 6px; }

.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase;
    letter-spacing:.08em; padding:8px 14px; border-bottom:1px solid var(--border); }
.table td { padding:12px 14px; border-bottom:1px solid var(--border); }
.table tr:hover td { background:var(--panel); }

.flash { border-radius:12px; padding:12px 16px; margin-bottom:20px; font-size:13.5px; }
.flash-ok { background:var(--reco-bg); border:1px solid var(--reco-border); color:var(--reco-text); }
.flash-err { background:rgba(255,92,92,.08); border:1px solid rgba(255,92,92,.25); color:var(--critical); }

.empty { text-align:center; padding:60px 20px; background:var(--panel);
    border:1px dashed var(--border); border-radius:20px; color:var(--muted); }
.empty .ico { font-size:40px; display:block; margin-bottom:10px; }

.reco { margin-top:12px; padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px;
    background:var(--reco-bg); border:1px solid var(--reco-border); color:var(--reco-text); }
.mono { font-family:var(--mono); font-size:12px; color:var(--muted); }
.muted { color:var(--muted); } .soft { color:var(--soft); }
h2.section { font-size:13px; margin:28px 0 12px; color:var(--muted); text-transform:uppercase;
    letter-spacing:.1em; font-weight:600; }
.bar-bg { height:6px; background:var(--border); border-radius:99px; overflow:hidden; }
.bar { height:100%; background:linear-gradient(90deg,var(--accent-a),var(--accent-b)); }

/* ---------- Icons, Topbar, Dropdowns, Avatar (v2) ---------- */
.ico { vertical-align:-3px; }
.brand .logo-z {
    width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--accent-a),var(--accent-b));
    box-shadow:0 6px 22px var(--glow2); color:#fff; font-weight:800; font-size:19px;
    letter-spacing:-.03em; user-select:none;
}
.topbar { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-bottom:6px; }
.icon-btn {
    width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
    background:var(--panel); border:1px solid var(--border); color:var(--muted); cursor:pointer;
    transition:transform .18s var(--spring), border-color .15s, color .15s, box-shadow .18s;
}
.icon-btn:hover { color:var(--text); border-color:var(--border-strong); transform:translateY(-1px); box-shadow:var(--shadow); }
.icon-btn:active { transform:scale(.95); }
.avatar {
    background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); color:#fff; border:none;
    font-weight:700; font-size:15px;
}
.dd { position:relative; }
.dropdown {
    position:absolute; right:0; top:calc(100% + 10px); min-width:250px; z-index:50;
    background:var(--bg); border:1px solid var(--border); border-radius:14px;
    box-shadow:0 18px 50px rgba(0,0,0,.45); padding:8px; display:none;
}
.dd.open .dropdown { display:block; animation:ddIn .18s var(--spring); }
@keyframes ddIn { from { opacity:0; transform:translateY(-6px) scale(.98);} to { opacity:1; transform:none;} }
.dropdown .dd-head { padding:9px 12px 10px; font-size:12px; color:var(--muted);
    border-bottom:1px solid var(--border); margin-bottom:6px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-item {
    display:flex; align-items:center; gap:11px; width:100%; text-align:left;
    padding:9px 12px; border-radius:9px; border:none; background:none; color:var(--text);
    font:inherit; font-size:13.5px; cursor:pointer; text-decoration:none;
    transition:background .12s;
}
.menu-item:hover { background:var(--panel-2); }
.menu-item.disabled { color:var(--muted); cursor:default; }
.menu-item.disabled:hover { background:none; }
.menu-item .right-note { margin-left:auto; font-size:10px; text-transform:uppercase;
    letter-spacing:.07em; color:var(--accent-b); }
.menu-sep { height:1px; background:var(--border); margin:6px 4px; }
.persona-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.persona-studio { background:#a78bfa; } .persona-bloom { background:#7ca982; }
.persona-werkbank { background:#f59e0b; } .persona-kontor { background:#2563eb; }

/* ---------- v3: Fixe Ecken-Icons (dezent, bei Hover prominent) ---------- */
.topbar {
    position:fixed; top:16px; right:20px; z-index:60; margin:0;
    display:flex; align-items:center; gap:8px;
}
.topbar .icon-btn {
    width:34px; height:34px; opacity:.55;
    transition:opacity .18s, transform .18s var(--spring), box-shadow .18s, border-color .15s;
}
.topbar .icon-btn:hover, .topbar .dd.open .icon-btn {
    opacity:1; transform:scale(1.14); box-shadow:var(--shadow); border-color:var(--border-strong);
}
.topbar .pill { opacity:.7; font-size:11.5px; }
.topbar:hover .pill { opacity:1; }
@media (max-width:760px) { .topbar { top:10px; right:12px; } }

/* ---------- v4: Der Buddy — zwelvos Gesicht (EVE-Prinzip: Emotion aus Form + Licht) ---------- */
.buddy { position:fixed; right:22px; bottom:22px; z-index:70; }
.buddy-btn {
    width:64px; height:64px; border-radius:20px; border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(145deg,#0b0b12,#050508);
    box-shadow:0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
    cursor:pointer; display:grid; place-items:center; padding:0;
    transition:transform .2s var(--spring), box-shadow .25s;
}
.buddy-btn:hover { transform:translateY(-3px) scale(1.04); }
.buddy-btn:active { transform:scale(.96); }
.buddy-btn:focus-visible { outline:2px solid var(--accent-b); outline-offset:3px; }
.buddy-eyes { display:flex; gap:10px; animation:buddy-gaze 9s ease-in-out infinite; }
.buddy .eye {
    width:11px; height:20px; border-radius:7px;
    background:linear-gradient(180deg,#9be8ff,#a78bfa);
    box-shadow:0 0 10px rgba(155,215,255,.9), 0 0 26px rgba(167,139,250,.55);
    animation:buddy-blink 4.6s infinite;
    transition:height .35s var(--spring), border-radius .35s, transform .35s var(--spring),
        background .4s, box-shadow .4s;
}
.buddy .eye.r { animation-delay:.05s; }
@keyframes buddy-blink { 0%,4%,100% { transform:scaleY(1);} 2% { transform:scaleY(.08);} }
@keyframes buddy-gaze {
    0%,26%,100% { transform:translate(0,0); }
    30%,42% { transform:translate(2.5px,-1.5px); }
    46%,70% { transform:translate(0,0); }
    74%,86% { transform:translate(-2.5px,1px); }
}

/* Stimmungen — Form + Farbe = Emotion */
.buddy[data-mood="happy"] .eye {
    height:10px; border-radius:7px 7px 3px 3px; transform:translateY(-3px);
    background:linear-gradient(180deg,#9dffd8,#3ddc97);
    box-shadow:0 0 10px rgba(61,220,151,.9), 0 0 26px rgba(61,220,151,.45);
}
.buddy[data-mood="alert"] .eye {
    height:16px; width:12px;
    background:linear-gradient(180deg,#ffe29b,#ffb454);
    box-shadow:0 0 12px rgba(255,180,84,.95), 0 0 30px rgba(255,180,84,.5);
    animation:buddy-blink 2.6s infinite;
}
.buddy[data-mood="critical"] .eye {
    height:13px; border-radius:5px;
    background:linear-gradient(180deg,#ff9d8a,#ff5c5c);
    box-shadow:0 0 12px rgba(255,92,92,1), 0 0 32px rgba(255,92,92,.6);
}
.buddy[data-mood="critical"] .eye.l { transform:rotate(16deg); }
.buddy[data-mood="critical"] .eye.r { transform:rotate(-16deg); }
.buddy[data-mood="critical"] .buddy-btn { animation:buddy-pulse 2.2s ease-in-out infinite; }
@keyframes buddy-pulse {
    0%,100% { box-shadow:0 10px 34px rgba(0,0,0,.5); }
    50% { box-shadow:0 10px 40px rgba(255,92,92,.35); }
}

/* Sprechblase */
.buddy-bubble {
    position:absolute; right:0; bottom:78px; width:280px; display:none;
    background:var(--bg); border:1px solid var(--border); border-radius:16px 16px 4px 16px;
    box-shadow:0 18px 50px rgba(0,0,0,.5); padding:16px 18px; font-size:13.5px;
}
.buddy.open .buddy-bubble { display:block; animation:ddIn .2s var(--spring); }
.buddy-bubble b { display:block; margin-bottom:4px; font-size:13px; }
.buddy-bubble p { color:var(--soft); line-height:1.55; }
.buddy-bubble a { display:inline-block; margin-top:10px; }

/* ---------- v5: Buddy-Feinschliff (organische Form) + Interaktivität ---------- */
.buddy-btn {
    /* ungleiche Rundungen = Charakter statt Icon; tiefes Schwarz statt Grau */
    border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
    background: radial-gradient(130% 130% at 32% 22%, #171722, #07070c 62%);
    border: 1px solid rgba(255,255,255,.05);
    position: relative; overflow: hidden;
}
.buddy-btn::before {
    /* zarte Lichtkante oben links — wirkt wie eine gewölbte Oberfläche */
    content:""; position:absolute; inset:0; border-radius:inherit;
    background: radial-gradient(80% 45% at 30% 8%, rgba(255,255,255,.13), transparent 60%);
    pointer-events:none;
}
.buddy[data-mood="happy"] .buddy-btn { box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 26px rgba(61,220,151,.14); }
.buddy[data-mood="alert"] .buddy-btn { box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 26px rgba(255,180,84,.16); }

/* Dösen bei Inaktivität: halbe Lider, langsames Atmen */
.buddy[data-idle="1"] .eye {
    height:6px !important; border-radius:4px;
    animation: buddy-doze 5s ease-in-out infinite;
    box-shadow:0 0 6px rgba(155,215,255,.4);
}
@keyframes buddy-doze { 0%,100% { opacity:.55; } 50% { opacity:.85; } }
.buddy[data-idle="1"] .buddy-eyes { animation:none; }

/* Chat in der Sprechblase */
.buddy-bubble { width:300px; }
.buddy-log { max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin:10px 0 12px; }
.buddy-msg { padding:8px 12px; border-radius:12px; font-size:13px; line-height:1.5; max-width:92%; }
.buddy-msg.me { align-self:flex-end; background:var(--panel-2); border:1px solid var(--border); }
.buddy-msg.bot { align-self:flex-start; background:linear-gradient(135deg, rgba(61,220,151,.12), rgba(167,139,250,.12));
    border:1px solid rgba(167,139,250,.25); }
.buddy-form { display:flex; gap:7px; }
.buddy-form input {
    flex:1; background:var(--panel); border:1px solid var(--border); border-radius:999px;
    padding:8px 14px; color:var(--text); font:inherit; font-size:13px;
}
.buddy-form input:focus { outline:none; border-color:var(--accent-b); }
.buddy-form button {
    border:none; border-radius:999px; width:34px; height:34px; cursor:pointer; color:#fff;
    background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); font-size:15px;
}
.buddy-hint { font-size:11px; color:var(--muted); margin-top:8px; }

/* ---------- v6: Klarere Silhouette + Gedankenblasen-System ---------- */
.buddy-btn {
    /* Zwischending: erkennbar eckig, aber jede Ecke anders — Charakter ohne Beulen */
    border-radius: 24px 18px 26px 20px;
}

/* Federnde Comic-Animation: schießt leicht über und bremst ab */
@keyframes buddy-pop {
    0% { opacity:0; transform:translate(14px,14px) scale(.55); }
    65% { opacity:1; transform:translate(-2px,-2px) scale(1.04); }
    100% { opacity:1; transform:translate(0,0) scale(1); }
}
.buddy-bubble {
    transform-origin: 92% 100%;
    border-radius: 18px 18px 4px 18px;
}
.buddy.open .buddy-bubble { animation: buddy-pop .38s cubic-bezier(.22,1.4,.36,1) both; }

/* Gedankenblase: erscheint aus seiner Richtung, mit Comic-Punkten zum Kopf */
.buddy-thought {
    position:absolute; right:14px; bottom:86px; max-width:260px; z-index:69;
    background:var(--bg); border:1px solid var(--border); border-radius:18px;
    box-shadow:0 16px 44px rgba(0,0,0,.45); padding:12px 15px; font-size:13px;
    line-height:1.5; color:var(--soft); pointer-events:none;
    opacity:0; transform:translate(14px,14px) scale(.55); transform-origin:92% 100%;
    transition:opacity .22s ease, transform .38s cubic-bezier(.22,1.4,.36,1);
}
.buddy.think .buddy-thought { opacity:1; transform:translate(0,0) scale(1); }
.buddy-thought::after, .buddy-thought::before {
    content:""; position:absolute; border-radius:50%;
    background:var(--bg); border:1px solid var(--border);
}
.buddy-thought::after, .buddy-thought::before { display:none; }

/* Elemente mit Zusatzwissen bekommen einen zarten Hinweis-Cursor */
[data-buddy] { cursor:help; }

/* ---------- v7: Comic-Grammatik — Sprechen nach links, Denken über dem Kopf ---------- */
/* Sprechblase (Chat & Hover-Erklärungen): kommt aus dem Mund nach links */
.buddy-bubble, .buddy-thought {
    right:80px; bottom:2px; left:auto; top:auto;
    max-width:min(300px, calc(100vw - 130px));
    border-radius:18px;
    transform-origin:100% 88%;
}
/* Kein Sprechblasen-Zipfel mehr: die kantige Ecke zeigt zum Avatar (Ebene 4d) */
.buddy-bubble::after, .buddy-thought::after { display:none; }
.buddy-thought::before { display:none; }
.buddy-thought { padding:11px 14px; }

/* Tagträume: runde Gedankenblase ÜBER dem Kopf mit Comic-Punkten */
.buddy-daydream {
    position:absolute; right:10px; bottom:88px; max-width:230px; z-index:69;
    background:var(--bg); border:1px solid var(--border); border-radius:22px;
    box-shadow:0 16px 44px rgba(0,0,0,.4); padding:11px 16px; font-size:12.5px;
    line-height:1.5; color:var(--muted); font-style:italic; pointer-events:none;
    opacity:0; transform:translateY(10px) scale(.7); transform-origin:85% 100%;
    transition:opacity .5s ease, transform .55s cubic-bezier(.22,1.4,.36,1);
}
.buddy.dreaming .buddy-daydream { opacity:1; transform:translateY(0) scale(1); }
.buddy-daydream::after, .buddy-daydream::before {
    content:""; position:absolute; border-radius:50%;
    background:var(--bg); border:1px solid var(--border);
}
.buddy-daydream::after, .buddy-daydream::before { display:none; }

/* ---------- v8: Der Dunkle Raum ---------- */
.darkroom {
    min-height:100vh; display:flex; flex-direction:column; align-items:center;
    justify-content:center; text-align:center; padding:48px 22px; position:relative;
}
.darkroom .whoami { position:absolute; top:20px; left:24px; display:flex; align-items:center; gap:10px; }
.darkroom .session { position:absolute; top:20px; right:24px; }

/* Der große zwelvo — gleiche Seele, größere Bühne */
.big-face {
    width:150px; height:150px; border-radius:52px 40px 56px 44px;
    background:radial-gradient(130% 130% at 32% 22%, #171722, #07070c 62%);
    border:1px solid rgba(255,255,255,.06); position:relative;
    box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 60px var(--glow1);
    display:grid; place-items:center; margin-bottom:30px;
}
.big-face::before {
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(80% 45% at 30% 8%, rgba(255,255,255,.12), transparent 60%);
}
.big-face .eyes { display:flex; gap:24px; animation:buddy-gaze 9s ease-in-out infinite; }
.big-face .eye {
    width:24px; height:44px; border-radius:15px;
    background:linear-gradient(180deg,#9be8ff,#a78bfa);
    box-shadow:0 0 22px rgba(155,215,255,.9), 0 0 54px rgba(167,139,250,.55);
    animation:buddy-blink 4.6s infinite;
}
.big-face .eye.r { animation-delay:.05s; }

.darkroom h1 { font-size:24px; letter-spacing:-.02em; margin-bottom:8px; }
.darkroom .lead { color:var(--muted); font-size:14.5px; max-width:440px; margin-bottom:30px; }
.darkroom .speech {
    background:var(--panel); border:1px solid var(--border); border-radius:18px 18px 18px 4px;
    padding:16px 20px; font-size:15.5px; max-width:460px; margin-bottom:28px;
    animation:buddy-pop .45s cubic-bezier(.22,1.4,.36,1) both;
}
.start-form { display:flex; gap:10px; width:100%; max-width:440px; }
.start-form .input { border-radius:999px; padding:13px 20px; font-size:15px; }
.start-form .btn-primary { padding:13px 24px; white-space:nowrap; }

/* Projekt-Auswahl im dunklen Raum */
.chooser-grid {
    display:flex; flex-wrap:wrap; gap:16px; justify-content:center; max-width:840px;
}
.chooser-card {
    width:240px; text-align:left; background:var(--panel); border:1px solid var(--border);
    border-radius:20px; padding:20px 22px; cursor:pointer; font:inherit; color:var(--text);
    transition:transform .2s var(--spring), border-color .2s, box-shadow .25s;
}
.chooser-card:hover { transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.chooser-card .dot-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.chooser-card b { font-size:16px; }
.chooser-card small { display:block; color:var(--muted); font-size:12px; margin-bottom:12px; }
.chooser-card .counts { display:flex; gap:7px; }
.darkroom .allview { margin-top:26px; }

/* Die Projekt-Oberfläche sitzt als beleuchtete Fläche im dunklen Raum */
body.roomed { background:#050508; }
.room-surface {
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    border:1px solid var(--border); border-radius:26px; padding:34px 36px;
    box-shadow:0 30px 90px rgba(0,0,0,.45);
    animation:surface-in .45s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes surface-in { from { opacity:0; transform:translateY(14px) scale(.985);} to { opacity:1; transform:none;} }
@media (max-width:760px) { .room-surface { padding:20px 16px; border-radius:18px; } }

/* ============================================================
   v9: Mainframe & volle Projektfläche
   Der dunkle Raum IST die Software (Mainframe, immer dunkel).
   Ein geöffnetes Projekt baut seinen eigenen beleuchteten Rahmen
   auf — vollflächig, mit eigener Persona — klar getrennt davon.
   ============================================================ */

/* Der Raum bleibt dunkel, egal welche Persona das Projekt trägt */
body.roomed {
    background:#050508;
    background-image:radial-gradient(ellipse 55% 30% at 50% -8%, rgba(167,139,250,.07), transparent);
    background-repeat:no-repeat;
    padding:0;
}

/* Mainframe-Chrom: dezent an den Rändern des Raums, nie im Projekt */
.mainframe-brand {
    position:fixed; top:16px; left:22px; z-index:60;
    display:flex; align-items:center; gap:9px; color:#ececf1;
    opacity:.5; transition:opacity .18s; text-decoration:none;
}
.mainframe-brand:hover { opacity:1; }
.mainframe-brand b { font-size:14px; letter-spacing:-.01em; }
.mainframe-legal {
    position:fixed; bottom:10px; left:0; right:0; z-index:5;
    text-align:center; font-size:10px; letter-spacing:.02em; color:#8b8b99; opacity:.5;
    transition:opacity .18s;
}
.mainframe-legal:hover { opacity:.95; }
.mainframe-legal a { color:inherit; text-decoration:none; }
.mainframe-legal a:hover { color:#ececf1; }

/* Ecken-Icons gehören zum Mainframe: immer helle Raum-Farben */
body.roomed > .topbar .icon-btn {
    background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:#b9b9c6;
}
body.roomed > .topbar .pill {
    background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#ececf1;
}
body.roomed > .topbar .dropdown {
    background:#0a0a11; border-color:rgba(255,255,255,.1); color:#ececf1;
}
body.roomed > .topbar .dd-head { color:#8b8b99; border-color:rgba(255,255,255,.09); }
body.roomed > .topbar .menu-item { color:#ececf1; }
body.roomed > .topbar .menu-item:hover { background:rgba(255,255,255,.07); }
body.roomed > .topbar .menu-item.disabled { color:#8b8b99; }
body.roomed > .topbar .menu-sep { background:rgba(255,255,255,.09); }

/* Das Projekt nimmt den Raum vollflächig ein; die Persona lebt NUR hier drin */
.room-surface {
    margin:58px 16px 40px; padding:30px 42px 110px; min-height:calc(100vh - 98px);
    background:var(--bg); color:var(--text); font:var(--font);
    background-image:radial-gradient(ellipse 60% 40% at 70% -10%, var(--glow1), transparent),
                     radial-gradient(ellipse 50% 35% at 15% -5%, var(--glow2), transparent);
    background-repeat:no-repeat;
    border:1px solid rgba(255,255,255,.07); border-radius:22px;
    box-shadow:0 30px 90px rgba(0,0,0,.55);
    animation:surface-in .45s cubic-bezier(.22,1.2,.36,1) both;
}
/* Akzentfarbe NUR für reine Textlinks — Komponenten (Buttons, Tabs, Menüs)
   behalten ihre eigene Farbe, sonst säuft z. B. weißer Button-Text in
   Nutzer-Akzenten ab (Pink auf Pink). */
.room-surface a:not([class]) { color:var(--accent-b); }

/* Projekt-Navigation: lebt IM Rahmen, nicht im Raum */
.frame-tabs {
    display:flex; align-items:center; gap:4px; margin-bottom:30px;
    border-bottom:1px solid var(--border); padding-bottom:10px;
}
.frame-tabs .nav-item { padding:8px 14px; }
.frame-tabs .frame-site { margin-left:auto; color:var(--muted); font-size:12.5px; display:flex; align-items:center; gap:8px; }

@media (max-width:760px) {
    .room-surface { margin:52px 8px 36px; padding:18px 16px 90px; border-radius:16px; }
    .frame-tabs { overflow-x:auto; }
    .frame-tabs .nav-item { white-space:nowrap; }
    .mainframe-brand b { display:none; }
}

/* ---------- v9: Menschliche Ticks (Zwinkern, Seitenblick, Augenreiben) ---------- */
@keyframes tick-doubleblink {
    0%,100% { transform:scaleY(1); }
    12%,42% { transform:scaleY(.08); }
    26%,60% { transform:scaleY(1); }
}
@keyframes tick-wink-l {
    0%,100% { transform:scaleY(1); }
    25%,65% { transform:scaleY(.12) translateY(2px); }
}
@keyframes tick-squint {
    0%,100% { transform:scaleY(1); }
    30%,70% { transform:scaleY(.55); }
}
.tick-doubleblink .eye { animation:tick-doubleblink .7s ease-in-out both !important; }
.tick-wink .eye.l { animation:tick-wink-l .8s ease-in-out both !important; }
.tick-squint .eye { animation:tick-squint 1.1s ease-in-out both !important; }

/* ============================================================
   v10: Fixer Projekt-Rahmen + Glas-Mainframe + dichte Abstände
   Arbeitssoftware: jeder Pixel gehört dem Projekt. Der Rahmen
   steht FIX, gescrollt wird IM Projekt. Das Mainframe überblendet
   die Ränder in Glas — gut sichtbar, nie im Weg.
   ============================================================ */

body.roomed { overflow:hidden; }

/* Projekt = kompletter Raum, nur eine schmale dunkle Fuge bleibt sichtbar */
.room-surface {
    position:fixed; inset:8px; margin:0; padding:0; min-height:0;
    display:flex; flex-direction:column; overflow:hidden;
    border-radius:16px;
}

/* Kopfleiste des Projekts: fix, dicht, mit Bereichen statt Verwaltung */
.frame-head {
    display:flex; align-items:center; gap:2px; flex-shrink:0;
    padding:8px 96px 8px 14px; border-bottom:1px solid var(--border);
    background:var(--panel);
}
.frame-head .nav-item { padding:7px 12px; font-size:13.5px; }
.frame-head .area-btn { border:none; background:none; cursor:pointer; font:inherit; font-weight:500; display:flex; align-items:center; gap:6px; }
.frame-head .area-btn:hover { background:var(--panel-2); color:var(--text); }
.frame-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.frame-site { color:var(--muted); font-size:12.5px; display:flex; align-items:center; gap:7px; }
.gear-btn { width:32px; height:32px; opacity:.75; }
.gear-btn:hover { opacity:1; }
.dropdown-left { left:0; right:auto; }
.module-check input { accent-color:var(--accent-b); }
.module-check { gap:9px; }
.gear-hint { padding:8px 12px 6px; font-size:11px; color:var(--muted); line-height:1.45; }

/* Im Projekt wird gescrollt — der Rahmen bewegt sich nie */
.frame-body { flex:1; overflow-y:auto; padding:20px 26px 120px; }
.frame-body .page-head { margin-bottom:18px; }
.frame-body .page-head h1 { font-size:19px; }

/* Mainframe-Chrom in Glas: liegt ÜBER dem Projekt, hebt sich auf hell wie dunkel ab */
.mainframe-brand {
    top:auto; bottom:14px; left:16px; opacity:.85;
    background:rgba(8,8,13,.62); backdrop-filter:blur(14px) saturate(1.3);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    border:1px solid rgba(255,255,255,.16); border-radius:999px;
    padding:5px 13px 5px 6px; box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.mainframe-brand b { font-size:13px; }
body.roomed > .topbar { top:14px; right:14px; }
body.roomed > .topbar .icon-btn {
    opacity:.9; background:rgba(8,8,13,.62); border-color:rgba(255,255,255,.16);
    backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
    box-shadow:0 8px 30px rgba(0,0,0,.35); color:#d6d6e0;
}
body.roomed > .topbar .icon-btn:hover, body.roomed > .topbar .dd.open .icon-btn { opacity:1; }
body.roomed > .topbar .avatar { color:#fff; }
.mainframe-legal {
    bottom:14px; opacity:.75;
    left:50%; right:auto; transform:translateX(-50%); width:auto;
    background:rgba(8,8,13,.62); backdrop-filter:blur(14px) saturate(1.3);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:5px 14px;
}

/* Dichte überall: Karten & Listen rücken zusammen — Platz ist Arbeitsfläche */
.frame-body .card { padding:16px 18px; margin-bottom:12px; }
.frame-body .card + .card { margin-top:0; }

@media (max-width:760px) {
    .room-surface { inset:5px; border-radius:12px; }
    .frame-head { overflow-x:auto; padding:6px 90px 6px 8px; }
    .frame-head .nav-item { white-space:nowrap; }
    .frame-site { display:none; }
    .frame-body { padding:14px 12px 110px; }
    .mainframe-brand b { display:inline; }
}

/* ---------- v10: Buddy-Box am unteren Rand — breiter, mit Ohr ---------- */
.buddy-bubble { width:380px; }
.buddy-form { display:flex; align-items:center; gap:6px; }
.buddy-form input { flex:1; min-width:0; }
.buddy-mic {
    width:34px; height:34px; flex-shrink:0; border-radius:999px; cursor:pointer;
    border:1px solid var(--border); background:var(--panel); color:var(--muted);
    display:grid; place-items:center;
    transition:color .15s, border-color .15s, transform .18s var(--spring);
}
.buddy-mic:hover { color:var(--text); border-color:var(--border-strong); transform:scale(1.08); }
.buddy.listening .buddy-mic {
    color:#fff; border-color:transparent;
    background:linear-gradient(135deg,var(--accent-a),var(--accent-b));
    animation:mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(167,139,250,.45); }
    50% { box-shadow:0 0 0 7px rgba(167,139,250,0); }
}
/* Beim Zuhören weiten sich seine Augen — er ist ganz Ohr */
.buddy.listening .eye { height:24px; }
@media (max-width:480px) { .buddy-bubble { width:calc(100vw - 44px); } }

/* ============================================================
   v11: Mainframe-Leisten + Raum-Ton + lebendigeres Gesicht
   Oben und unten schmale Leisten AUS dem Raum (keine Überlagerung
   mehr — klar, was vorne und was hinten ist). Der Raum tönt sich
   passend zur Persona. zwelvo bekommt Pixel-Seele und Symbol-Augen.
   ============================================================ */

/* Der Raum stimmt sich auf die Persona ein — dunkel bleibt er immer */
body.roomed { background:#050508; }
body.roomed[data-room="bloom"] { background:#231d17; }
body.roomed[data-room="kontor"] { background:#131a23; }
body.roomed[data-room="werkbank"] { background:#07090d; }

/* Projekt sitzt ZWISCHEN den Leisten — nichts überlappt mehr */
.room-surface { inset:50px 10px 46px; }

/* Mainframe-Leisten: kommen aus dem Background, tragen die Navigation */
.mainframe-brand {
    top:9px; bottom:auto; left:14px; opacity:.8;
    background:none; border:none; box-shadow:none; backdrop-filter:none;
    -webkit-backdrop-filter:none; padding:4px 6px;
}
.mainframe-brand:hover { opacity:1; }
body.roomed > .topbar { top:7px; right:14px; }
body.roomed > .topbar .icon-btn {
    backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
    background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12);
}
.mainframe-legal {
    bottom:12px; background:none; border:none; backdrop-filter:none;
    -webkit-backdrop-filter:none; padding:0; opacity:.6;
}
.buddy { right:18px; bottom:52px; }

@media (max-width:760px) {
    .room-surface { inset:46px 5px 42px; }
}

/* ---------- Pixel-Seele: hartes schwarzes Gitter überm Gesicht ----------
   Wie eine LED-Matrix: schwarze Stege zerlegen das Leuchten in Pixel,
   das Überstrahlen der Augen blutet leicht durch die Zellen. */
.buddy-btn::after, .big-face::after {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    /* Punktmatrix: schwarze Maske mit winzigen runden Löchern — das Leuchten
       zerfällt in LED-Punkte, der Glow blutet durch die Zwischenräume */
    background-image:radial-gradient(circle, transparent 0 .55px, rgba(0,0,0,.9) .95px);
    background-size:2.5px 2.5px;
}
.big-face::after {
    background-image:radial-gradient(circle, transparent 0 .8px, rgba(0,0,0,.9) 1.3px);
    background-size:3.5px 3.5px;
}

/* ---------- Symbol-Augen: !, ?, böse, staunend ---------- */
.buddy .eye, .big-face .eye { position:relative; }

/* Ausrufezeichen: Balken oben + leuchtender Punkt darunter */
[data-eyes="exclaim"] .eye { height:13px !important; animation:none; }
[data-eyes="exclaim"] .eye::after {
    content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%;
    background:inherit; box-shadow:0 0 8px rgba(255,180,84,.9);
}
[data-eyes="exclaim"] .eye, [data-eyes="exclaim"] .eye::after {
    background:linear-gradient(180deg,#ffe29b,#ffb454);
}
.big-face[data-eyes="exclaim"] .eye { height:26px !important; }
.big-face[data-eyes="exclaim"] .eye::after { width:9px; height:9px; bottom:-15px; }

/* Fragezeichen: der Balken weicht einem leuchtenden Zeichen */
[data-eyes="question"] .eye { background:none !important; box-shadow:none !important; animation:none; }
[data-eyes="question"] .eye::before {
    content:"?"; position:absolute; inset:0; display:grid; place-items:center;
    font-weight:800; font-size:19px; line-height:1; color:#9be8ff;
    text-shadow:0 0 10px rgba(155,232,255,.95), 0 0 24px rgba(167,139,250,.6);
    animation:question-tilt 1.6s ease-in-out infinite;
}
.big-face[data-eyes="question"] .eye::before { font-size:36px; }
@keyframes question-tilt { 0%,100% { transform:rotate(-7deg);} 50% { transform:rotate(7deg);} }

/* Böse: schmale, steil gekippte Schlitze in Zorn-Glut */
[data-eyes="angry"] .eye {
    height:8px !important; border-radius:3px;
    background:linear-gradient(180deg,#ffb454,#ff5c5c) !important;
    box-shadow:0 0 12px rgba(255,92,92,.95), 0 0 30px rgba(255,120,60,.5) !important;
    animation:none;
}
[data-eyes="angry"] .eye.l { transform:rotate(24deg) translateY(2px); }
[data-eyes="angry"] .eye.r { transform:rotate(-24deg) translateY(2px); }

/* Staunend: kreisrunde, weit offene Augen */
[data-eyes="wow"] .eye {
    height:16px !important; width:16px !important; border-radius:50% !important; animation:none;
}
.big-face[data-eyes="wow"] .eye { height:30px !important; width:30px !important; }

/* ---------- Start-Raum: der große zwelvo als Gesprächspartner ---------- */
.start-chat { width:100%; max-width:520px; display:flex; flex-direction:column; align-items:center; gap:18px; }
.start-bubble {
    background:var(--panel); border:1px solid var(--border);
    border-radius:4px 18px 18px 18px; padding:15px 20px; font-size:15.5px;
    max-width:520px; min-width:220px; text-align:left; line-height:1.55;
    animation:buddy-pop .4s cubic-bezier(.22,1.4,.36,1) both;
}
.start-bubble.me { border-radius:18px 4px 18px 18px; color:var(--muted); font-size:13.5px; align-self:flex-end; }
.start-form2 { display:flex; gap:8px; width:100%; }
.start-form2 .input { flex:1; border-radius:999px; padding:12px 19px; font-size:14.5px; }
.start-form2 .btn-primary { padding:0 20px; }
.start-mic {
    width:46px; height:46px; flex-shrink:0; border-radius:999px; cursor:pointer;
    border:1px solid var(--border); background:var(--panel); color:var(--muted);
    display:grid; place-items:center;
    transition:color .15s, border-color .15s, transform .18s var(--spring);
}
.start-mic:hover { color:var(--text); border-color:var(--border-strong); transform:scale(1.07); }
.start-mic.listening {
    color:#fff; border-color:transparent;
    background:linear-gradient(135deg,var(--accent-a),var(--accent-b));
    animation:mic-pulse 1.4s ease-in-out infinite;
}
.start-quick { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

/* ============================================================
   v13: „zwelvo lernt" — Arbeits-Indikator in der Mainframe-Leiste
   ============================================================ */
.learning { display:flex; align-items:center; }
.learning-btn {
    height:34px; padding:0 13px; border-radius:999px; cursor:pointer;
    display:flex; align-items:center; gap:8px;
    background:rgba(61,220,151,.09); border:1px solid rgba(61,220,151,.3);
    color:#3ddc97; font:inherit; font-size:12px; font-weight:600;
    transition:background .15s, transform .18s var(--spring);
}
.learning-btn:hover { background:rgba(61,220,151,.16); transform:scale(1.04); }
.learning-bars { display:flex; align-items:flex-end; gap:2px; height:12px; }
.learning-bars i {
    width:2.5px; border-radius:2px; background:#3ddc97;
    animation:learn-wave 1.1s ease-in-out infinite;
    box-shadow:0 0 6px rgba(61,220,151,.8);
}
.learning-bars i:nth-child(1) { height:5px; animation-delay:0s; }
.learning-bars i:nth-child(2) { height:10px; animation-delay:.18s; }
.learning-bars i:nth-child(3) { height:7px; animation-delay:.36s; }
.learning-bars i:nth-child(4) { height:11px; animation-delay:.54s; }
@keyframes learn-wave { 0%,100% { transform:scaleY(.45);} 50% { transform:scaleY(1);} }
.learning .dropdown { min-width:280px; }
.learning-note { padding:11px 13px; font-size:13px; line-height:1.55; color:#ececf1; }
.learning-note b { color:#3ddc97; }
@media (max-width:600px) { .learning-btn span.lbl { display:none; } .learning-btn { padding:0 10px; } }

/* v13: Weiter-Auswahl im Start-Raum */
.start-continue { display:flex; gap:8px; align-items:center; }
.start-continue .select { width:auto; min-width:180px; border-radius:999px; padding:8px 14px; font-size:13.5px; }

/* v14: Hover-Gedanken endlich breit genug — Lesefluss statt Streifen */
.buddy-thought {
    width:max-content;
    max-width:min(460px, calc(100vw - 140px));
    padding:13px 17px; font-size:13.5px;
}
.buddy-daydream { width:max-content; max-width:min(340px, calc(100vw - 140px)); }

/* v15: Status-Chips — Infos sind Status, keine Befund-Karten */
.status-chip {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--reco-bg); border:1px solid var(--reco-border); color:var(--ok);
    border-radius:999px; padding:3px 12px; font-size:12px; font-weight:600;
    cursor:help;
}
.status-chip i {
    width:7px; height:7px; border-radius:50%; background:var(--ok);
    box-shadow:0 0 7px var(--ok); animation:chip-breathe 2.6s ease-in-out infinite;
}
@keyframes chip-breathe { 0%,100% { opacity:.5; } 50% { opacity:1; } }

/* v16: Projekt-Aufbau — erst zusammenstellen, dann arbeiten, dann zeigen */
.setup-card {
    max-width:560px; background:var(--panel); border:1px solid var(--border);
    border-radius:20px; padding:24px 26px;
}
.setup-say { font-size:15px; line-height:1.6; margin-bottom:18px; }
.setup-row {
    display:flex; align-items:flex-start; gap:12px; padding:11px 12px;
    border-radius:12px; cursor:pointer; transition:background .12s;
}
.setup-row:hover { background:var(--panel-2); }
.setup-row input { margin-top:4px; accent-color:var(--accent-b); width:16px; height:16px; }
.setup-row b { display:block; font-size:14px; }
.setup-row small { color:var(--muted); font-size:12px; }

/* Fähigkeiten-Kacheln: komprimierte echte Daten pro Modul */
.tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:20px; }
.mod-tile {
    display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--text);
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    padding:14px 16px; transition:transform .18s var(--spring), border-color .15s, box-shadow .2s;
}
.mod-tile:hover { transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.mod-tile .tile-head { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--soft); }
.mod-tile b { font-size:24px; font-weight:700; letter-spacing:-.03em; margin-top:2px; }
.mod-tile small { color:var(--muted); font-size:11px; }
.mod-tile .tile-issues { color:var(--warning); font-weight:600; }
.tile-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.tile-ok { background:var(--ok); box-shadow:0 0 6px var(--ok); }
.tile-warning { background:var(--warning); box-shadow:0 0 6px var(--warning); }
.tile-critical { background:var(--critical); box-shadow:0 0 6px var(--critical); animation:chip-breathe 1.6s ease-in-out infinite; }

/* ============================================================
   v17: Edle schmale Projekt-Leiste + Glanz-Kacheln
   Keine gelutschten Pill-Buttons mehr: Text-Tabs mit Akzent-
   Unterstrich, Name des Vorhabens dezent mittig, Zahnrad ganz
   rechts. Kacheln kompakter, mit verlaufendem Glanz.
   ============================================================ */

.frame-head {
    position:relative; padding:0 10px 0 8px; gap:0; min-height:42px;
    background:none;
}
.frame-head .nav-item, .frame-head .area-btn {
    background:none !important; border-radius:0; padding:12px 13px;
    font-size:13px; font-weight:500; color:var(--muted); letter-spacing:.01em;
    position:relative; transition:color .15s;
}
.frame-head .nav-item:hover, .frame-head .area-btn:hover { color:var(--text); background:none !important; }
.frame-head .nav-item.active { color:var(--text); }
.frame-head .nav-item.active::after {
    content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px;
    border-radius:2px; background:linear-gradient(90deg, var(--accent-a), var(--accent-b));
}
.frame-head .nav-item .nav-ico { display:none; } /* schlank: Text statt Icon-Parade */
.frame-center {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    color:var(--muted); font-size:12px; letter-spacing:.06em; opacity:.75;
    pointer-events:none; max-width:30%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.frame-right { margin-left:auto; }
.gear-btn { width:30px; height:30px; background:none; border:none; }
.gear-btn:hover { color:var(--text); transform:rotate(30deg) scale(1.1); }

/* Kacheln: kompakter, kontrastreicher, mit Glanz der in die Randfarben übergeht */
.tile-grid { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; margin-bottom:18px; }
.mod-tile {
    padding:11px 14px 12px; border-radius:14px; position:relative; overflow:hidden;
    background:
        radial-gradient(130% 100% at 100% 0%, color-mix(in srgb, var(--accent-b) 16%, transparent), transparent 58%),
        radial-gradient(130% 100% at 0% 100%, color-mix(in srgb, var(--accent-a) 12%, transparent), transparent 58%),
        var(--panel);
    border:1px solid color-mix(in srgb, var(--accent-b) 26%, var(--border));
}
.mod-tile::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.14) 47%, transparent 62%);
    transform:translateX(-130%); pointer-events:none;
}
.mod-tile:hover::after { transform:translateX(130%); transition:transform .7s ease; }
.mod-tile b { font-size:20px; }
.mod-tile .tile-head { font-size:11.5px; }

/* ============================================================
   v18: Kategorien-Raster — Fläche nach Anteil, Zeilen statt Kacheln
   ============================================================ */
.site-divider {
    font-size:12px; letter-spacing:.06em; color:var(--muted);
    margin:4px 0 12px; text-transform:uppercase;
}
.area-grid {
    display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin-bottom:20px;
}
.area-panel {
    grid-column:span var(--span, 3);
    position:relative; overflow:hidden; border-radius:16px; padding:14px 17px 12px;
    background:
        radial-gradient(140% 110% at 100% 0%, color-mix(in srgb, var(--accent-b) 10%, transparent), transparent 60%),
        radial-gradient(140% 110% at 0% 100%, color-mix(in srgb, var(--accent-a) 7%, transparent), transparent 60%),
        var(--panel);
    border:1px solid color-mix(in srgb, var(--accent-b) 20%, var(--border));
}
.area-panel > header {
    display:flex; align-items:baseline; gap:9px; margin-bottom:8px;
    font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--soft);
}
.area-panel > header small { font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); font-size:11px; }
.mod-block { padding:6px 0 2px; }
.mod-block + .mod-block { border-top:1px solid var(--border); margin-top:6px; }
.mod-name {
    display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-bottom:3px;
}
.mod-name .mono { font-size:11.5px; color:var(--ok); }
.run-line {
    display:flex; align-items:center; gap:8px; padding:4px 0 4px 2px;
    font-size:12.5px; color:var(--soft); border-top:1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
.run-line:first-of-type { border-top:none; }
.line-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.line-dot.ok { background:var(--ok); box-shadow:0 0 6px var(--ok); }
.line-dot.warning { background:var(--warning); box-shadow:0 0 6px var(--warning); }
.line-dot.critical { background:var(--critical); box-shadow:0 0 6px var(--critical); animation:chip-breathe 1.6s ease-in-out infinite; }
.line-dot.idle { background:var(--muted); opacity:.5; }
.line-host { font-weight:500; color:var(--text); font-size:12.5px; }
.line-meta { margin-left:auto; color:var(--muted); font-size:11.5px; }
.viz-panel { display:grid; place-items:center; padding:8px; min-height:170px; }
.viz-canvas { max-width:100%; }
@media (max-width:900px) {
    .area-grid { grid-template-columns:1fr; }
    .area-panel { grid-column:span 1 !important; }
}

/* ============================================================
   v19: Mainframe-Übersicht + Instanz-Cards + Ansichts-Modi + Sphäre
   Die Liste aller Instanzen lebt im DUNKLEN RAUM (Mainframe).
   Der Instanz-Rahmen erscheint erst, wenn man drin ist.
   ============================================================ */
.mainframe-body {
    position:fixed; inset:50px 0 46px; overflow-y:auto;
    padding:12px max(5vw, 24px) 130px;
    color:#ececf1;
}
.mainframe-body .instance-card { cursor:default; }

.instance-card {
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.09); border-radius:20px;
    padding:16px 18px 14px; margin-bottom:16px;
    max-width:980px; margin-left:auto; margin-right:auto;
    transition:border-color .2s, transform .2s var(--spring);
}
.instance-card:hover { border-color:rgba(255,255,255,.2); }
.instance-head {
    display:flex; align-items:center; gap:9px; margin-bottom:12px;
    font-size:13.5px; width:100%; background:none; border:none; color:inherit;
    font:inherit; cursor:pointer; text-align:left; padding:0;
}
.instance-head b { letter-spacing:-.01em; font-size:14.5px; }
.instance-head small { color:var(--muted); font-size:11.5px; }
.instance-head .enter { margin-left:auto; font-size:11.5px; color:var(--accent-b); opacity:0; transition:opacity .15s; }
.instance-card:hover .enter { opacity:1; }

.view-toggle { display:flex; gap:2px; margin:0 auto 14px; max-width:980px; justify-content:flex-end; }
.view-toggle .vt {
    font-size:12px; color:var(--muted); text-decoration:none; padding:5px 13px;
    border-radius:999px; transition:color .15s, background .15s; border:1px solid transparent;
}
.view-toggle .vt:hover { color:var(--text); }
.view-toggle .vt.active { color:var(--text); background:var(--panel-2); border-color:var(--border); }
.frame-body .view-toggle, .frame-body .instance-card { max-width:none; }

/* Systembild: Bühne mit Tiefe — der Verlauf trägt die Sphäre */
.viz-panel {
    background:
        radial-gradient(85% 80% at 50% 42%, rgba(167,139,250,.17), transparent 68%),
        radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--accent-a) 8%, transparent), transparent 55%),
        linear-gradient(165deg, rgba(167,139,250,.05), transparent),
        var(--panel);
    border-color:color-mix(in srgb, var(--accent-b) 30%, var(--border));
    touch-action:none; user-select:none;
}

/* ============================================================
   v20: Ton in Ton — Sphäre in Grau/Weiß, Panels als Status-Flächen,
   Balken statt Zeilen, Wechsel-Pulldown am Namen, Auge weg
   ============================================================ */

/* Panels: Titel mittig & dezent, Fläche leuchtet im Zustand */
.area-panel {
    background:var(--panel); border:1px solid var(--border);
}
.area-panel > header {
    justify-content:center; text-align:center; letter-spacing:.09em;
    font-size:11.5px; color:var(--muted); margin-bottom:10px;
}
.area-panel > header small { font-size:11.5px; }
.area-panel.state-ok {
    border-color:color-mix(in srgb, var(--ok) 30%, var(--border));
    box-shadow:0 0 26px color-mix(in srgb, var(--ok) 12%, transparent),
        inset 0 0 40px color-mix(in srgb, var(--ok) 4%, transparent);
}
.area-panel.state-warning { border-color:color-mix(in srgb, var(--warning) 35%, var(--border));
    box-shadow:0 0 26px color-mix(in srgb, var(--warning) 12%, transparent); }
.area-panel.state-critical { border-color:color-mix(in srgb, var(--critical) 40%, var(--border));
    box-shadow:0 0 30px color-mix(in srgb, var(--critical) 16%, transparent); }

/* Status-Balken: das Modul als farbige Fläche — die Farbe spricht */
.run-bar {
    display:flex; align-items:center; gap:10px;
    padding:8px 13px; border-radius:10px; margin:6px 0;
    font-size:12.5px; border:1px solid transparent;
}
.run-bar.ok { background:color-mix(in srgb, var(--ok) 10%, transparent);
    border-color:color-mix(in srgb, var(--ok) 22%, transparent); color:var(--text); }
.run-bar.warning { background:color-mix(in srgb, var(--warning) 12%, transparent);
    border-color:color-mix(in srgb, var(--warning) 28%, transparent); }
.run-bar.critical { background:color-mix(in srgb, var(--critical) 13%, transparent);
    border-color:color-mix(in srgb, var(--critical) 32%, transparent);
    animation:bar-breathe 2.4s ease-in-out infinite; }
.run-bar.idle { background:var(--panel); border-color:var(--border); color:var(--muted); }
@keyframes bar-breathe { 0%,100% { box-shadow:none; } 50% { box-shadow:0 0 14px color-mix(in srgb, var(--critical) 30%, transparent); } }
.bar-mod { font-weight:600; }
.bar-host { color:var(--soft); }
.bar-meta { margin-left:auto; font-size:11.5px; color:var(--muted); }
.run-bar.ok .bar-meta { color:var(--ok); }
.run-bar.warning .bar-meta { color:var(--warning); }
.run-bar.critical .bar-meta { color:var(--critical); }

/* Zu-tun-Panel: erscheint nur, wenn wirklich etwas ansteht */
.todo-panel { border-color:color-mix(in srgb, var(--warning) 35%, var(--border)); }
.todo-panel > header { color:var(--warning); }
.todo-panel .card { margin-bottom:10px; }

/* Sphäre: neutrale Bühne mit Tiefen-Verlauf — Ton in Ton */
.viz-panel {
    background:
        radial-gradient(80% 75% at 50% 45%, rgba(255,255,255,.07), rgba(0,0,0,.16) 78%),
        var(--panel);
    border-color:var(--border);
}

/* Wechsel-Pulldown am Vorhaben-Namen — das Auge braucht es nicht mehr */
.frame-center { pointer-events:auto; }
.center-btn {
    background:none; border:none; font:inherit; color:var(--muted);
    font-size:12px; letter-spacing:.06em; cursor:pointer;
    display:flex; align-items:center; gap:5px; padding:4px 8px; border-radius:8px;
    transition:color .15s, background .15s;
}
.center-btn:hover { color:var(--text); background:var(--panel-2); }
.frame-center .dropdown { left:50%; right:auto; transform:translateX(-50%); }

/* ============================================================
   v21: Mainframe-Raster — alle Instanzen ohne Scrollen.
   Spalten passen sich der Anzahl an, ruhige Kacheln schrumpfen,
   die ganze Kachel trägt die Zustandsfarbe und IST der Klick.
   ============================================================ */
.mf-grid {
    display:grid; height:100%;
    grid-template-columns:repeat(var(--cols, 3), 1fr);
    grid-auto-rows:minmax(0, auto);
    align-content:center; gap:14px;
    max-width:1200px; margin:0 auto;
}
.mf-cell { display:flex; min-height:0; }
.mf-card {
    flex:1; display:flex; flex-direction:column; gap:10px; min-height:0;
    text-align:left; font:inherit; color:#ececf1; cursor:pointer;
    border-radius:18px; padding:16px 18px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
    transition:transform .15s ease, border-color .15s, box-shadow .2s;
}
.mf-card:hover { transform:translateY(-2px); }
.mf-card.mf-quiet { padding:13px 18px; gap:6px; }  /* nichts zu holen → weniger Raum */
.mf-ok {
    background:color-mix(in srgb, var(--ok) 8%, rgba(255,255,255,.03));
    border-color:color-mix(in srgb, var(--ok) 32%, transparent);
    box-shadow:0 0 24px color-mix(in srgb, var(--ok) 10%, transparent);
}
.mf-warning {
    background:color-mix(in srgb, var(--warning) 9%, rgba(255,255,255,.03));
    border-color:color-mix(in srgb, var(--warning) 38%, transparent);
    box-shadow:0 0 24px color-mix(in srgb, var(--warning) 12%, transparent);
}
.mf-critical {
    background:color-mix(in srgb, var(--critical) 10%, rgba(255,255,255,.03));
    border-color:color-mix(in srgb, var(--critical) 42%, transparent);
    box-shadow:0 0 30px color-mix(in srgb, var(--critical) 16%, transparent);
}
.mf-idle { opacity:.85; }
.mf-head { display:flex; align-items:center; gap:9px; font-size:14px; }
.mf-head b { letter-spacing:-.01em; }
.mf-head small { color:rgba(255,255,255,.55); font-size:11.5px; }
.mf-warning .mf-head small { color:var(--warning); }
.mf-critical .mf-head small { color:var(--critical); }
.mf-head .enter { margin-left:auto; font-size:11.5px; color:rgba(255,255,255,.5); opacity:0; transition:opacity .15s; }
.mf-card:hover .mf-head .enter { opacity:1; }
.mf-todos { display:flex; flex-direction:column; gap:4px; min-height:0; overflow:hidden; }
.mf-line { display:flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(255,255,255,.8); }
.mf-line.muted { color:rgba(255,255,255,.45); }
.mf-meta { margin-top:auto; font-size:11px; color:rgba(255,255,255,.45); }
@media (max-width:760px) {
    .mf-grid { grid-template-columns:1fr; align-content:start; height:auto; }
}

/* ============================================================
   v22: Fix Titel-Pulldown + Kontoeinstellungen mit linker Spalte
   ============================================================ */
/* Der Dropdown wurde vom overflow des Titels abgeschnitten — Ellipsis
   gehört auf den Knopf, nicht auf den Container */
.frame-center { overflow:visible; max-width:none; }
.center-btn { max-width:34vw; }
.center-btn > :first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frame-center .dropdown { min-width:230px; }

/* Kontoeinstellungen: volle Breite, linke Spalte mit Bereichen */
.settings-layout {
    display:grid; grid-template-columns:220px 1fr; gap:18px;
    max-width:1100px; margin:0 auto; height:100%;
}
.settings-nav { display:flex; flex-direction:column; gap:3px; align-content:start; }
.settings-nav .snav {
    display:flex; align-items:center; gap:10px; text-align:left;
    background:none; border:none; font:inherit; color:rgba(255,255,255,.6);
    font-size:13.5px; padding:10px 14px; border-radius:11px; cursor:pointer;
    transition:background .13s, color .13s;
}
.settings-nav .snav:hover { color:#ececf1; background:rgba(255,255,255,.05); }
.settings-nav .snav.active { color:#ececf1; background:rgba(255,255,255,.08); }
.settings-nav .snav .right-note { margin-left:auto; }
.settings-pane { display:none; min-width:0; }
.settings-pane.active { display:block; }
.settings-pane .card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); color:#ececf1; }
.settings-pane .card + .card { margin-top:12px; }
.settings-pane .muted, .settings-pane .field { color:rgba(255,255,255,.55); }
.settings-pane .input { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#ececf1; }
@media (max-width:760px) {
    .settings-layout { grid-template-columns:1fr; }
    .settings-nav { flex-direction:row; overflow-x:auto; }
}

/* ============================================================
   v23: Ansichts-Wechsel oben + helles Design lesbar
   ============================================================ */
.mainframe-nav { position:fixed; top:9px; left:14px; z-index:60; display:flex; align-items:center; gap:4px; }
.mainframe-nav .mainframe-brand { position:static; }
.mf-navlink {
    font-size:12px; color:rgba(255,255,255,.55); text-decoration:none;
    padding:6px 12px; border-radius:999px; transition:color .15s, background .15s;
}
.mf-navlink:hover { color:#ececf1; background:rgba(255,255,255,.07); }

/* Rahmen über Rahmen raus: Balken leben von der Fläche, nicht vom Strich */
.run-bar, .run-bar.ok, .run-bar.warning, .run-bar.critical, .run-bar.idle { border:none; }
.run-bar.idle { background:var(--panel-2); }
.area-panel .card { border:none; background:var(--panel-2); }
/* Panel-Zustand: EIN Rahmen, kein zusätzlicher Schein-Ring im hellen Design */
[data-theme="bloom"] .area-panel.state-ok,
[data-theme="kontor"] .area-panel.state-ok {
    box-shadow:none;
    background:color-mix(in srgb, var(--ok) 5%, var(--bg));
}
[data-theme="bloom"] .area-panel.state-warning,
[data-theme="kontor"] .area-panel.state-warning {
    box-shadow:none;
    background:color-mix(in srgb, var(--warning) 6%, var(--bg));
}
[data-theme="bloom"] .area-panel.state-critical,
[data-theme="kontor"] .area-panel.state-critical {
    box-shadow:none;
    background:color-mix(in srgb, var(--critical) 6%, var(--bg));
}
/* Chips & Punkte: kein Neon-Glühen auf hellem Grund */
[data-theme="bloom"] .status-chip, [data-theme="kontor"] .status-chip { background:color-mix(in srgb, var(--ok) 9%, transparent); border:none; }
[data-theme="bloom"] .status-chip i, [data-theme="kontor"] .status-chip i,
[data-theme="bloom"] .line-dot, [data-theme="kontor"] .line-dot { box-shadow:none; }

/* v24: Aktivitäts-Graf — dezente Tagesbalken, keine Chart-Show */
.activity-panel { padding-bottom:10px; }
.activity-bars {
    display:flex; align-items:flex-end; gap:5px; height:52px; padding:0 2px;
}
.abar-wrap { flex:1; height:100%; display:flex; align-items:flex-end; cursor:help; }
.abar {
    width:100%; border-radius:3px 3px 1px 1px; min-height:2px;
    background:color-mix(in srgb, var(--accent-b) 45%, var(--panel-2));
    transition:background .15s;
}
.abar-wrap:hover .abar { background:var(--accent-b); }
.activity-axis {
    display:flex; justify-content:space-between; margin-top:6px;
    font-size:10px; color:var(--muted);
}

/* ============================================================
   v25: Instanz-Raster — ein Panel pro Fähigkeit + Aktivitäts-Quadrat
   Struktur-Regel: N Fähigkeiten → N Spalten (max 4); Dichte skaliert.
   ============================================================ */
.inst-grid {
    display:grid; gap:12px; margin-bottom:20px;
    grid-template-columns:repeat(var(--mcols, 3), 1fr) minmax(0, calc(180px * var(--acts, 0)));
}
.inst-span-all { grid-column:1 / -1; }
a.mod-panel { text-decoration:none; color:var(--text); display:block;
    transition:transform .15s ease, border-color .15s; }
a.mod-panel:hover { transform:translateY(-2px); border-color:var(--border-strong); }

/* Dichte: compact = weniger Text, nur das Wichtige */
.density-compact .area-panel { padding:11px 13px 9px; }
.density-compact .run-bar { padding:5px 10px; margin:4px 0; font-size:11.5px; }
.density-compact .bar-meta { font-size:10.5px; }
.density-compact .area-panel > header { margin-bottom:6px; }

/* Aktivitäts-Quadrat: 14 Tage × Fähigkeit, klein und still */
.activity-square { padding:12px 13px 9px; }
.activity-heat { display:flex; flex-direction:column; gap:4px; }
.heat-row { display:flex; align-items:center; gap:3px; }
.heat-label {
    width:52px; flex-shrink:0; font-size:9px; color:var(--muted);
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.heat-cell {
    flex:1; aspect-ratio:1; max-width:10px; border-radius:2px;
    background:var(--accent-b); display:block;
}
.heat-cell.warn { background:var(--warning); opacity:1; }
.heat-cell.crit { background:var(--critical); opacity:1; }
.activity-square .activity-axis { margin-top:8px; }

@media (max-width:900px) {
    .inst-grid { grid-template-columns:1fr; }
    .activity-square { max-width:260px; }
}

/* v26: Farbwelt-Wahl im Zahnrad */
.persona-row { display:flex; gap:8px; padding:2px 10px 8px; }
.persona-pick {
    display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
    border:2px solid transparent; cursor:pointer; transition:border-color .15s, transform .15s;
}
.persona-pick:hover { transform:scale(1.12); }
.persona-pick.active { border-color:var(--border-strong); }
.persona-pick input { display:none; }
.persona-pick .persona-dot { width:14px; height:14px; }

/* ============================================================
   v27: Instanz-Layout — Kategorie-Kacheln links (max 50%),
   feste Seiten-Spalte rechts (Zu tun, Zeitstrahl, Hinweise),
   Module als kompakte farbige Zeilen.
   ============================================================ */
.inst-layout { display:grid; grid-template-columns:1fr 236px; gap:12px; align-items:start; margin-bottom:20px; }
.inst-main {
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px; align-content:start;
}
.cat-panel { min-width:0; }  /* eine Kategorie = max 50% der Hauptfläche */
.inst-side { display:flex; flex-direction:column; gap:12px; min-width:0; }
.side-tile { padding:11px 13px 10px; }
.side-tile > header { margin-bottom:7px; }
.side-line {
    display:flex; align-items:center; gap:8px; padding:4px 2px;
    font-size:12px; color:var(--soft); text-decoration:none; border-radius:6px;
}
.side-line:hover { color:var(--text); background:var(--panel-2); }

/* Modul-Zeile: kompakt, Zustand als Fläche/Verlauf — alles Wichtige in einer Zeile */
.mod-row {
    display:flex; align-items:center; gap:9px;
    padding:8px 12px; margin:5px 0; border-radius:10px;
    font-size:12.5px; color:var(--text); text-decoration:none;
    transition:transform .13s ease, filter .15s;
}
.mod-row:hover { transform:translateX(2px); filter:brightness(1.06); }
.mod-row b { font-size:12.5px; font-weight:600; }
.mod-row .row-meta { color:var(--muted); font-size:11.5px; margin-left:auto; }
.mod-row .row-num { font-size:11.5px; font-weight:700; color:var(--soft); }
.mod-row.ok {
    background:linear-gradient(90deg, color-mix(in srgb, var(--ok) 14%, transparent), color-mix(in srgb, var(--ok) 4%, transparent));
}
.mod-row.ok .row-meta { color:var(--ok); }
.mod-row.warning {
    background:linear-gradient(90deg, color-mix(in srgb, var(--warning) 16%, transparent), color-mix(in srgb, var(--warning) 5%, transparent));
}
.mod-row.warning .row-meta { color:var(--warning); }
.mod-row.critical {
    background:linear-gradient(90deg, color-mix(in srgb, var(--critical) 17%, transparent), color-mix(in srgb, var(--critical) 5%, transparent));
    animation:bar-breathe 2.4s ease-in-out infinite;
}
.mod-row.critical .row-meta { color:var(--critical); }
.mod-row.idle { background:var(--panel-2); color:var(--muted); }

@media (max-width:900px) {
    .inst-layout { grid-template-columns:1fr; }
    .inst-main { grid-template-columns:1fr; }
    .inst-side { flex-direction:row; flex-wrap:wrap; }
    .inst-side .side-tile { flex:1; min-width:220px; }
}

/* ============================================================
   v27: Instanz-Dashboard final — flache Modul-Kacheln (max 50%),
   sortiert nach Dringlichkeit/Aktivität, feste Seiten-Kacheln
   rechts, Instanz-Chips darunter. Keine Kategorie-Kacheln.
   ============================================================ */
.inst-layout {
    display:grid; grid-template-columns:minmax(0, 1fr) 240px;
    gap:14px; align-items:start; margin-bottom:16px;
}
.inst-main {
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); /* nie breiter als 50% */
    gap:10px; align-content:start;
}
/* Kompakte Modul-Kachel: die Fläche IST der Zustand */
.m-tile {
    display:flex; flex-direction:column; gap:3px;
    padding:11px 14px; border-radius:13px; text-decoration:none; color:var(--text);
    border:1px solid var(--border);
    transition:transform .14s ease, filter .15s;
}
.m-tile:hover { transform:translateY(-2px); filter:brightness(1.06); }
.m-tile.t-ok {
    background:linear-gradient(135deg, color-mix(in srgb, var(--ok) 14%, var(--panel)), color-mix(in srgb, var(--ok) 5%, var(--panel)));
    border-color:color-mix(in srgb, var(--ok) 28%, transparent);
}
.m-tile.t-warning {
    background:linear-gradient(135deg, color-mix(in srgb, var(--warning) 16%, var(--panel)), color-mix(in srgb, var(--warning) 6%, var(--panel)));
    border-color:color-mix(in srgb, var(--warning) 32%, transparent);
}
.m-tile.t-critical {
    background:linear-gradient(135deg, color-mix(in srgb, var(--critical) 17%, var(--panel)), color-mix(in srgb, var(--critical) 6%, var(--panel)));
    border-color:color-mix(in srgb, var(--critical) 36%, transparent);
}
.m-tile.t-idle { background:var(--panel); color:var(--soft); }
.m-head { display:flex; align-items:baseline; gap:8px; }
.m-head b { font-size:13.5px; letter-spacing:-.01em; }
.m-num { margin-left:auto; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.m-info { font-size:11.5px; color:var(--soft); line-height:1.4; }
.m-tile.t-warning .m-info { color:var(--warning); }
.m-tile.t-critical .m-info { color:var(--critical); }
.m-last { font-size:10px; color:var(--muted); }

.inst-side { display:flex; flex-direction:column; gap:10px; }
.side-tile { padding:11px 13px 9px; }
.side-line {
    display:flex; align-items:center; gap:7px; padding:4px 0;
    font-size:11.5px; color:var(--soft); text-decoration:none;
}
.side-line:hover { color:var(--text); }

.inst-others {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin:2px 0 18px; padding-top:10px; border-top:1px solid var(--border);
}
.inst-others .pill { display:inline-flex; align-items:center; gap:6px; }

@media (max-width:860px) {
    .inst-layout { grid-template-columns:1fr; }
    .inst-main { grid-template-columns:1fr; }
}

/* ============================================================
   v28: Denk-Modell Module ≠ Agenten — links Agenten-Stapel,
   rechts das Anstehende (Zu tun, Aktionen, Ideen, Aktivität)
   ============================================================ */
.inst-layout.half { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.agent-stack { display:flex; flex-direction:column; gap:8px; }
.agent-stack .m-tile { flex-direction:row; align-items:center; gap:10px; padding:10px 14px; }
.agent-stack .m-head { flex:0 0 auto; min-width:110px; }
.agent-stack .m-info { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-stack .m-num { margin-left:0; }
.agent-stack .m-last { flex-shrink:0; margin-left:auto; }
.col-label {
    font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--muted); padding:0 2px 2px;
}
.inst-side { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
.inst-side .side-tile:first-child { grid-column:1 / -1; } /* Zu tun bekommt die volle Zeile */
.action-line { color:var(--accent-b); }
.action-line:hover { color:var(--text); }
@media (max-width:860px) {
    .inst-layout.half { grid-template-columns:1fr; }
    .inst-side { grid-template-columns:1fr; }
}

/* ============================================================
   v29: EIN visueller Raum — die Instanz-Kachel ist Geschichte.
   Alles im Mainframe-Design; Theming = Primär-/Sekundärfarbe
   (--accent-a/-b inline am body) + Hell/Dunkel-Schalter oben.
   ============================================================ */

/* Die Kachel löst sich auf: Inhalt lebt direkt im Raum */
.room-surface {
    position:fixed; inset:44px 0 40px; margin:0; min-height:0;
    background:none !important; background-image:none !important;
    border:none; border-radius:0; box-shadow:none; animation:none;
    display:flex; flex-direction:column; overflow:hidden;
    color:var(--text); font:var(--font);
}
.frame-head { padding:0 18px; background:none; border-bottom:1px solid var(--border); }
.frame-body { padding:20px max(4vw, 22px) 120px; }

/* Heller Raum: derselbe Raum, nur mit Licht an */
body[data-mode="light"] {
    background:#f2f2f5;
    background-image:radial-gradient(ellipse 55% 30% at 50% -8%, color-mix(in srgb, var(--accent-b) 8%, transparent), transparent);
    --bg:#f2f2f5; --panel:rgba(20,22,35,.05); --panel-2:rgba(20,22,35,.09);
    --border:rgba(20,22,35,.13); --border-strong:rgba(20,22,35,.3);
    --text:#23252e; --muted:#6d7080; --soft:#42454f;
    --glow1:color-mix(in srgb, var(--accent-b) 10%, transparent);
    --glow2:color-mix(in srgb, var(--accent-a) 8%, transparent);
    --shadow:0 8px 24px rgba(20,22,35,.12);
    --ok:#1d7a52; --warning:#94590a; --critical:#b23636;
}
/* Mainframe-Elemente mit festen Dunkelraum-Farben folgen jetzt dem Modus */
body[data-mode="light"] .mainframe-brand,
body[data-mode="light"] .mainframe-body,
body[data-mode="light"] .mf-card,
body[data-mode="light"] .settings-pane .card,
body[data-mode="light"] .instance-card { color:var(--text); }
body[data-mode="light"] .mf-card { background:var(--panel); border-color:var(--border); }
body[data-mode="light"] .mf-head small, body[data-mode="light"] .mf-meta,
body[data-mode="light"] .mf-line { color:var(--muted); }
body[data-mode="light"] .mf-line { color:var(--soft); }
body[data-mode="light"] > .topbar .icon-btn { background:var(--panel); border-color:var(--border); color:var(--soft); }
body[data-mode="light"] > .topbar .dropdown { background:#fff; color:var(--text); border-color:var(--border); }
body[data-mode="light"] > .topbar .dd-head { color:var(--muted); border-color:var(--border); }
body[data-mode="light"] > .topbar .menu-item { color:var(--text); }
body[data-mode="light"] > .topbar .menu-item:hover { background:var(--panel-2); }
body[data-mode="light"] > .topbar .menu-sep { background:var(--border); }
body[data-mode="light"] .mainframe-legal { color:var(--muted); }
body[data-mode="light"] .mainframe-legal a { color:var(--muted); }
body[data-mode="light"] .settings-nav .snav { color:var(--muted); }
body[data-mode="light"] .settings-nav .snav.active, body[data-mode="light"] .settings-nav .snav:hover { color:var(--text); background:var(--panel-2); }
body[data-mode="light"] .settings-pane .card { background:#fff; border-color:var(--border); }
body[data-mode="light"] .settings-pane .muted, body[data-mode="light"] .settings-pane .field { color:var(--muted); }
body[data-mode="light"] .settings-pane .input { background:#fff; border-color:var(--border); color:var(--text); }
body[data-mode="light"] .instance-card { background:#fff; border-color:var(--border); }
body[data-mode="light"] .darkroom, body[data-mode="light"] .start-bubble { color:var(--text); }

/* Farbwahl im Zahnrad */
.color-row { display:flex; gap:14px; padding:4px 12px 10px; font-size:12px; color:var(--muted); }
.color-row label { display:flex; align-items:center; gap:7px; cursor:pointer; }
.color-row input[type="color"] {
    width:30px; height:30px; border:1px solid var(--border); border-radius:50%;
    padding:2px; background:none; cursor:pointer;
}

/* ============================================================
   v30: Autosave-Standard + Erklär-Tour
   ============================================================ */
.save-state { color:var(--ok); font-weight:600; }

/* Die Tour: zwelvo geht weich zu den Stationen — der Nutzer gibt das Tempo vor */
.buddy.touring { transition:transform .95s cubic-bezier(.25,1.1,.35,1); z-index:90; }
.buddy.touring .buddy-form, .buddy.touring .buddy-log { display:none; }
.buddy.touring .buddy-bubble { width:330px; }
.tour-check { cursor:pointer; }

/* ============================================================
   v31: Dritter Modus „Kontrast" (klares Weiß, starker Text)
   + Schwarz-Weiß-Modus für Barrierefreiheit
   ============================================================ */
body[data-mode="contrast"] {
    background:#ffffff; background-image:none;
    --bg:#ffffff; --panel:#f3f4f6; --panel-2:#e7e9ee;
    --border:#c9cdd6; --border-strong:#8a8f9c;
    --text:#111318; --muted:#3f4450; --soft:#22252e;
    --glow1:transparent; --glow2:transparent;
    --shadow:0 4px 14px rgba(17,19,24,.10);
    --ok:#0d6b3f; --warning:#8a4d00; --critical:#a61b1b;
    --reco-bg:#e9f5ee; --reco-border:#0d6b3f; --reco-text:#0d5433;
}
body[data-mode="contrast"] .mainframe-brand,
body[data-mode="contrast"] .mainframe-body,
body[data-mode="contrast"] .mf-card,
body[data-mode="contrast"] .settings-pane .card,
body[data-mode="contrast"] .instance-card { color:var(--text); }
body[data-mode="contrast"] .mf-card,
body[data-mode="contrast"] .instance-card { background:#fff; border-color:var(--border); }
body[data-mode="contrast"] > .topbar .icon-btn { background:#fff; border-color:var(--border-strong); color:var(--text); opacity:1; }
body[data-mode="contrast"] > .topbar .dropdown { background:#fff; color:var(--text); border-color:var(--border-strong); }
body[data-mode="contrast"] > .topbar .menu-item { color:var(--text); }
body[data-mode="contrast"] > .topbar .menu-item:hover { background:var(--panel-2); }
body[data-mode="contrast"] > .topbar .dd-head, body[data-mode="contrast"] .mainframe-legal { color:var(--muted); }
body[data-mode="contrast"] .settings-nav .snav { color:var(--muted); }
body[data-mode="contrast"] .settings-nav .snav.active, body[data-mode="contrast"] .settings-nav .snav:hover { color:var(--text); background:var(--panel-2); }
body[data-mode="contrast"] .settings-pane .card { background:#fff; border:1px solid var(--border); }
body[data-mode="contrast"] .settings-pane .input { background:#fff; border-color:var(--border-strong); color:var(--text); }
body[data-mode="contrast"] .m-tile { border-width:1.5px; }
body[data-mode="contrast"] .run-bar.idle { background:var(--panel); }
body[data-mode="contrast"] .status-chip i, body[data-mode="contrast"] .line-dot { box-shadow:none; }

/* Barrierefreiheit: Schwarz-Weiß-Modus — Farben raus, Kontrast bleibt */
html[data-mono="1"] { filter:grayscale(1); }

/* ============================================================
   v32: Die Linie rutscht hoch — Navigation mittig in der
   Mainframe-Leiste, Zahnrad rund oben rechts, Vorhaben-Wechsel
   im Konto-Menü. Links = Branding-Zone (White-Label-fähig).
   ============================================================ */
.mainframe-nav {
    position:fixed; top:6px; left:50%; transform:translateX(-50%); z-index:60;
    display:flex; align-items:center; gap:2px; max-width:min(72vw, 760px);
}
.mainframe-nav .nav-item { padding:7px 13px; font-size:13.5px; white-space:nowrap; }
.mainframe-nav .area-btn {
    border:none; background:none; cursor:pointer; font:inherit; font-weight:500;
    display:flex; align-items:center; gap:6px;
}
.mainframe-nav .nav-item:hover, .mainframe-nav .dd.open .area-btn { background:var(--panel-2); color:var(--text); }
.mainframe-nav .dd .dropdown { top:calc(100% + 8px); }

/* Die Trennlinie: volle Breite, direkt unter der Mainframe-Leiste */
.mainframe-line {
    position:fixed; top:47px; left:0; right:0; height:1px; z-index:55;
    background:linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
}

/* Vorhaben-Name in der Branding-Zone links */
.brand-site { color:var(--muted); font-size:12.5px; font-weight:500; margin-left:4px; }
.brand-site::before { content:"·"; margin-right:8px; opacity:.5; }

/* Der Raum beginnt unter der Linie */
.room-surface { inset:56px 10px 46px; }

@media (max-width:860px) {
    .brand-site { display:none; }
    .mainframe-nav {
        left:52px; right:96px; transform:none; max-width:none;
        overflow-x:auto; justify-content:flex-start; scrollbar-width:none;
    }
    .room-surface { inset:52px 5px 42px; }
    .mainframe-line { top:44px; }
}

/* ============================================================
   v33: zwelvo ist greifbar — Drag an jeden Platz, Blasen drehen
   sich zur Bildschirmmitte, damit nie etwas aus dem Fenster ragt.
   ============================================================ */
.buddy-btn { cursor:grab; }
.buddy.dragging { transition:none !important; }
.buddy.dragging .buddy-btn { cursor:grabbing; }
.buddy.dragging .buddy-bubble, .buddy.dragging .buddy-thought, .buddy.dragging .buddy-daydream { display:none !important; opacity:0 !important; }

/* Links geparkt: Blasen öffnen nach rechts */
.buddy.flip .buddy-bubble { right:auto; left:0; border-radius:18px 18px 18px 4px; transform-origin:8% 100%; }
.buddy.flip .buddy-thought { right:auto; left:14px; transform-origin:8% 100%; }
.buddy.flip .buddy-thought::after { right:auto; left:6px; }
.buddy.flip .buddy-thought::before { right:auto; left:-2px; }
.buddy.flip .buddy-daydream { right:auto; left:10px; transform-origin:15% 100%; }

/* Vier Quadranten (senkrechte + waagerechte Mittellinie): die spitze Ecke der
   Blase zeigt IMMER zum Avatar — sie sitzt in der Ecke, die ihm am nächsten ist.
   Unten rechts (Basis): Spitze unten rechts. flip = unten links.
   high = Spitze oben rechts. high+flip = Spitze oben links. */
.buddy.high .buddy-bubble { bottom:auto; top:78px; border-radius:18px 4px 18px 18px; transform-origin:92% 0%; }
.buddy.high.flip .buddy-bubble { border-radius:4px 18px 18px 18px; transform-origin:8% 0%; }
.buddy.high .buddy-thought { bottom:auto; top:86px; transform-origin:92% 0%; }
.buddy.high .buddy-thought::after { bottom:auto; top:-14px; }
.buddy.high .buddy-thought::before { bottom:auto; top:-24px; }
.buddy.high .buddy-daydream { bottom:auto; top:88px; transform-origin:85% 0%; }

/* ===== Editierbares Dashboard (Ebene 4d): 12 Spalten, dichte Auto-Sortierung ===== */
.dash-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:13px; grid-auto-flow:dense; align-items:stretch; }
.dash-card { grid-column:span var(--w,3); order:var(--o,0); min-width:0; position:relative; container-type:inline-size; }
.dash-card > .area-panel, .dash-card > .agent-stack { height:100%; margin:0; box-sizing:border-box; }
@media (max-width:900px) { .dash-grid { display:flex; flex-direction:column; } }

/* Aktions-Buttons: Icon erklärt den Klick, Text fällt bei Enge weg */
.action-grid { display:flex; flex-wrap:wrap; gap:8px; }
.action-btn { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px;
    background:var(--panel); border:1px solid var(--border); color:var(--text);
    font-size:13px; flex:1 1 auto; min-width:0; text-decoration:none; transition:border-color .15s; }
.action-btn:hover { border-color:var(--accent-a); }
.action-btn .ico { flex:none; opacity:.85; }
.action-btn .lbl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@container (max-width:250px) {
    .action-btn { justify-content:center; padding:10px; }
    .action-btn .lbl { display:none; }
}

/* Anpassen-Modus: Regler erscheinen, sonst herrscht Ruhe */
.dash-ctrl { display:none; position:absolute; top:6px; right:8px; gap:3px; z-index:6; }
.dash-editing .dash-ctrl { display:flex; }
.dash-ctrl button { width:24px; height:24px; border-radius:7px; border:1px solid var(--border);
    background:var(--panel); color:var(--text); font-size:13px; line-height:1; cursor:pointer; }
.dash-ctrl button:hover { border-color:var(--accent-a); }
.dash-name { display:none; position:absolute; top:9px; left:12px; z-index:6;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.dash-editing .dash-name { display:block; }
.dash-editing .dash-card { outline:1.5px dashed var(--border); outline-offset:3px; border-radius:14px; }
.action-btn .mv { display:none; margin-left:auto; gap:2px; }
.dash-editing .action-btn .mv { display:inline-flex; }
.action-btn .mv i { font-style:normal; cursor:pointer; padding:0 5px; border:1px solid var(--border); border-radius:6px; }
.action-btn .mv i:hover { border-color:var(--accent-a); }

/* ============================================================
   v34: Eindeutiges Feedback im Gesicht — Erfolg schreibt ein
   grünes Häkchen statt der Augen, Fehler leuchtet rot. Die Blase
   trägt bei Wertungs-Meldungen einen grünen/roten Ring — nie
   beim normalen Fragen.
   ============================================================ */
/* Häkchen: die Augen weichen einem Haken, der sich einmal schreibt */
[data-eyes="check"] .eye { opacity:0 !important; animation:none; }
[data-eyes="check"] .buddy-eyes { position:relative; }
[data-eyes="check"] .buddy-eyes::after {
    content:""; position:absolute; left:50%; top:50%; width:24px; height:12px;
    border-left:5px solid #7ee2a8; border-bottom:5px solid #7ee2a8;
    border-radius:1px 1px 1px 3px;
    transform:translate(-50%,-64%) rotate(-45deg);
    filter:drop-shadow(0 0 9px rgba(126,226,168,.95)) drop-shadow(0 0 22px rgba(126,226,168,.5));
    animation:check-draw .55s cubic-bezier(.3,1.2,.4,1) both;
}
@keyframes check-draw {
    0% { clip-path:inset(-30% 100% -30% -30%); opacity:.4; }
    100% { clip-path:inset(-30% -30% -30% -30%); opacity:1; }
}

/* Fehler: das Ausrufezeichen glüht rot statt bernstein */
.buddy.fb-err[data-eyes="exclaim"] .eye,
.buddy.fb-err[data-eyes="exclaim"] .eye::after {
    background:linear-gradient(180deg,#ffc9c9,#ff5c5c) !important;
    box-shadow:0 0 10px rgba(255,92,92,.95), 0 0 26px rgba(255,92,92,.55) !important;
}

/* Wertungs-Ring an der Blase: grün = geklappt, rot = schiefgelaufen */
.buddy.fb-ok .buddy-bubble {
    border-color:var(--ok);
    box-shadow:0 0 0 1px var(--ok), 0 10px 34px rgba(126,226,168,.22), 0 18px 50px rgba(0,0,0,.45);
}
.buddy.fb-err .buddy-bubble {
    border-color:var(--critical);
    box-shadow:0 0 0 1px var(--critical), 0 10px 34px rgba(255,92,92,.26), 0 18px 50px rgba(0,0,0,.45);
}

/* Stille Modi: das X auf dem Mund — „ich kann jetzt nicht reden" */
.buddy-mouth { position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
    font-size:11px; font-weight:700; line-height:1; color:var(--muted); pointer-events:none; }

/* ============================================================
   v36: Der Sprach-Raum spielt mit — Aufgaben-Karten faden bei
   Tagesfragen gestaffelt aus dem Dunkel, zwelvo guckt rüber.
   ============================================================ */
.room-cards {
    position:fixed; left:6vw; top:50%; transform:translateY(-50%); z-index:5;
    display:flex; flex-direction:column; gap:12px; width:min(320px, 32vw);
}
.room-card {
    display:block; padding:13px 16px; text-decoration:none;
    background:var(--panel); border:1px solid var(--border); border-radius:14px;
    box-shadow:0 14px 40px rgba(0,0,0,.45);
    opacity:0; transform:translateX(-22px) scale(.96);
    transition:opacity .7s ease, transform .8s cubic-bezier(.22,1.2,.36,1);
}
.room-cards.show .room-card { opacity:1; transform:translateX(0) scale(1); }
.room-card:hover { border-color:var(--border-strong); }
.room-card b { display:block; font-size:13.5px; color:var(--text); margin-bottom:3px; }
.room-card span { font-size:12px; color:var(--muted); }
@media (max-width:900px) {
    .room-cards { position:static; transform:none; width:100%; max-width:520px; margin-top:18px; }
    .room-card { transform:translateY(14px) scale(.97); }
    .room-cards.show .room-card { transform:translateY(0) scale(1); }
}


/* ===== Blasen-Ecken (Ebene 4d): statt Zipfel zeigt EINE kantige Ecke zum Avatar.
   Vier Klassen fuer jede Richtung — je nachdem, wo er gerade steht. ===== */
.buddy-bubble, .buddy-thought { border-radius:18px 18px 2px 18px; }
.buddy-daydream { border-radius:22px 22px 2px 22px; }
.corner-br { border-radius:18px 18px 2px 18px !important; }
.corner-bl { border-radius:18px 18px 18px 2px !important; }
.corner-tr { border-radius:18px 2px 18px 18px !important; }
.corner-tl { border-radius:2px 18px 18px 18px !important; }

/* Mikrofonwahl: kleines Menue am Mikro-Button */
.mic-menu { display:block; max-width:260px; }

/* ============================================================
   v38: Blasen starten an der Ecke des Bots, die zur Bildschirm-
   MITTE zeigt — diagonal ins Bild hinein. So verdeckt er nie
   seine eigene Sprechblase, egal wo er geparkt ist.
   Kopf = 64px: die Blase dockt an der inneren Kopfecke an.
   ============================================================ */
/* Unten rechts (Basis): innere Ecke = oben links → Blase nach oben-links */
.buddy .buddy-bubble { right:46px; bottom:56px; }
.buddy .buddy-thought { right:52px; bottom:62px; }
.buddy .buddy-daydream { right:48px; bottom:64px; }

/* Unten links: innere Ecke = oben rechts → Blase nach oben-rechts */
.buddy.flip .buddy-bubble { right:auto; left:46px; }
.buddy.flip .buddy-thought { right:auto; left:52px; }
.buddy.flip .buddy-daydream { right:auto; left:48px; }

/* Oben rechts: innere Ecke = unten links → Blase nach unten-links */
.buddy.high .buddy-bubble { bottom:auto; top:56px; right:46px; }
.buddy.high .buddy-thought { bottom:auto; top:62px; right:52px; }
.buddy.high .buddy-daydream { bottom:auto; top:64px; right:48px; }

/* Oben links: innere Ecke = unten rechts → Blase nach unten-rechts */
.buddy.high.flip .buddy-bubble { right:auto; left:46px; }
.buddy.high.flip .buddy-thought { right:auto; left:52px; }
.buddy.high.flip .buddy-daydream { right:auto; left:48px; }

/* ============================================================
   v39: Hinweise sind Hinweise — Eingabefeld und Gesprächsverlauf
   erscheinen nur im aktiven Gespräch (Klick auf zwelvo, .chat).
   Meldet er sich von selbst (Status, Ansage, Befund), bleibt die
   Blase eine reine Sprechblase.
   ============================================================ */
.buddy:not(.chat) .buddy-form, .buddy:not(.chat) .buddy-log { display:none !important; }

/* ============================================================
   v39: UI-Kit — EIN Elementsatz für alle Module (x-ui.*).
   Clean, ruhig, edel: gleiche Radien, gleiche Abstände, gleiche
   Fokusringe überall. Themes sind reine Farbwert-Sets (Schwarz =
   dark, Weiß = contrast, weitere nur über Token-Farben).
   ============================================================ */
:root { --radius-s:10px; --radius-m:14px; --radius-l:18px; }

/* Fokus: überall derselbe ruhige Ring — Tastatur-Nutzer sehen immer, wo sie sind */
.btn:focus-visible, .input:focus-visible, .select:focus-visible,
.icon-btn:focus-visible, .menu-item:focus-visible, .nav-item:focus-visible {
    outline:2px solid var(--accent-b); outline-offset:2px;
}

.ui-field { margin-bottom:14px; }
.ui-field .field { margin-bottom:6px; }
.ui-hint { font-size:12px; color:var(--muted); margin-top:5px; line-height:1.45; }
.ui-error { font-size:12.5px; color:var(--critical); margin-top:5px; }

.ui-toggle { display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; }
.ui-toggle input { accent-color:var(--accent-b); width:16px; height:16px; }

.ui-card-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ui-card-head h3 { font-size:15px; margin:0; }
.ui-card-actions { margin-left:auto; display:flex; gap:8px; }

.ui-table-wrap { overflow-x:auto; }

.ui-empty { text-align:center; padding:34px 20px; color:var(--muted); }
.ui-empty b { display:block; font-size:14.5px; color:var(--soft); margin-bottom:6px; }
.ui-empty p { font-size:13px; line-height:1.55; max-width:420px; margin:0 auto 12px; }

.ui-stat { display:flex; flex-direction:column; gap:2px; padding:14px 16px; }
.stat-grid .ui-stat { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-m); }
.ui-stat-value { font-size:24px; font-weight:650; letter-spacing:-.02em; }
.ui-stat-label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.ui-stat-hint { font-size:12px; color:var(--muted); }

.ui-row { display:flex; align-items:center; gap:12px; }
.ui-row-main { flex:1; min-width:0; }
.ui-row-actions { display:flex; gap:8px; flex-shrink:0; }

/* Styleguide (Architekt): alle Elemente an einem Ort */
.styleguide section { margin-bottom:34px; }
.styleguide h2 { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:14px; }
.styleguide .sg-grid { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.badge-muted { /* neutraler Badge — bewusst wie der Grundzustand */ }

/* ============================================================
   v41: Der Raum bekommt Tiefe — radialer Hell-Dunkel-Verlauf
   (Licht in der Mitte, Dunkel an den Rändern) + die Modul-Bühne:
   aktive Fähigkeiten stehen perspektivisch links/rechts im Raum,
   faden gestaffelt ein, scrollen und leuchten bei Dringendem.
   Token-basiert — funktioniert in Schwarz, Hell und Weiß.
   ============================================================ */
.darkroom.room-depth {
    background:
        radial-gradient(ellipse 62% 54% at 50% 44%,
            color-mix(in srgb, var(--text) 7%, var(--bg)) 0%,
            color-mix(in srgb, var(--text) 3%, var(--bg)) 42%,
            var(--bg) 78%,
            color-mix(in srgb, #000 22%, var(--bg)) 100%);
    perspective:1200px;
}

.module-rail {
    position:fixed; top:50%; transform:translateY(-50%);
    width:212px; max-height:68vh; overflow-y:auto; z-index:6;
    display:flex; flex-direction:column; gap:11px; padding:6px;
    scrollbar-width:none;
}
.module-rail::-webkit-scrollbar { display:none; }
.module-rail.left { left:30px; perspective:900px; }
.module-rail.right { right:30px; perspective:900px; }

.rail-card {
    display:block; padding:13px 15px; text-decoration:none;
    background:color-mix(in srgb, var(--panel) 88%, transparent);
    border:1px solid var(--border); border-radius:var(--radius-m);
    box-shadow:0 14px 34px rgba(0,0,0,.35);
    opacity:0; transition:opacity .7s ease, transform .8s cubic-bezier(.22,1.1,.34,1), border-color .25s, box-shadow .25s;
}
.module-rail.left .rail-card { transform:translateX(-36px) rotateY(30deg); }
.module-rail.right .rail-card { transform:translateX(36px) rotateY(-30deg); }
.module-rail.left .rail-card.show { opacity:1; transform:rotateY(16deg); }
.module-rail.right .rail-card.show { opacity:1; transform:rotateY(-16deg); }
.module-rail .rail-card.show:hover { transform:rotateY(0) scale(1.04); border-color:var(--border-strong); }

.rail-card b { display:block; font-size:13px; color:var(--text); margin-bottom:4px; letter-spacing:-.01em; }
.rail-card .rail-note { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); }
.rail-card[data-state="critical"] { border-color:color-mix(in srgb, var(--critical) 55%, var(--border)); }
.rail-card[data-state="warning"] { border-color:color-mix(in srgb, var(--warning) 45%, var(--border)); }

/* Der Raum zeigt hin: Frage passt / etwas ist dringend → das Widget leuchtet */
.rail-card.hot {
    animation:rail-hot 1.1s ease-in-out 3;
    border-color:var(--accent-b);
}
@keyframes rail-hot {
    0%, 100% { box-shadow:0 14px 34px rgba(0,0,0,.35); }
    50% { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-b) 55%, transparent), 0 14px 44px color-mix(in srgb, var(--accent-b) 30%, transparent); }
}

/* Agenda-Karten weichen der linken Bühne aus */
@media (min-width:1000px) { .room-cards { left:270px; width:min(300px, 24vw); } }
/* Schmale Fenster: die Bühne tritt ab, der Dialog hat Vorrang */
@media (max-width:999px) { .module-rail { display:none; } }

/* ============================================================
   v42: Die Modul-Bühne wird ein Tiefen-Karussell — Karten wachsen
   zur Mitte hin, weichen nach außen zurück und lösen sich am Rand
   in Transparenz auf. Bewusst OHNE Schatten: Tiefe entsteht rein
   aus Größe, Neigung und Licht.
   ============================================================ */
.rail-card { box-shadow:none; }
.rail-card:hover { box-shadow:none; filter:brightness(1.12); }
.module-rail { max-height:76vh; padding:12vh 8px; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
/* Im Karussell-Modus steuert JS die Transformation pro Karte — weich nachgeführt */
.rail-card.live { transition:opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .25s, filter .2s; }
.rail-card.hot { animation:rail-hot-line 1.1s ease-in-out 3; border-color:var(--accent-b); }
@keyframes rail-hot-line {
    0%, 100% { outline:0 solid transparent; }
    50% { outline:3px solid color-mix(in srgb, var(--accent-b) 60%, transparent); outline-offset:3px; }
}

/* ============================================================
   v43: Mikrofon-Feedback — der Ring ums Mikro ATMET mit der
   Stimme (Pegel → --mic-level), bei der Verarbeitung dreht ein
   Ring, die Sprechblase zeigt „denkt nach"-Punkte. Man sieht
   immer: hört er? verarbeitet er? ist er fertig?
   ============================================================ */
.start-mic, .buddy-mic { position:relative; transition:border-color .2s; }
.start-mic.listening, .buddy-mic.listening {
    border-color:var(--accent-b); color:var(--accent-b);
    box-shadow:0 0 0 calc(2px + var(--mic-level, 0) * 16px) color-mix(in srgb, var(--accent-b) 30%, transparent),
               0 0 calc(6px + var(--mic-level, 0) * 30px) color-mix(in srgb, var(--accent-b) 45%, transparent);
    transition:box-shadow .07s linear;
}
.start-mic.processing::after, .buddy-mic.processing::after {
    content:""; position:absolute; inset:-5px; border-radius:inherit;
    border:2px solid transparent; border-top-color:var(--accent-b);
    animation:mic-spin .75s linear infinite;
}
@keyframes mic-spin { to { transform:rotate(360deg); } }

/* Verarbeitungs-Feedback der Antwort: die Blase denkt sichtbar nach */
.start-bubble.thinking::after {
    content:""; display:inline-block; width:1.2em; text-align:left;
    animation:think-dots 1.2s steps(4) infinite;
}
@keyframes think-dots {
    0% { content:""; } 25% { content:"."; } 50% { content:".."; } 75% { content:"..."; }
}

/* v44: Inline-Felder — sehen aus wie Text, sind aber lebendig (Autosave) */
.input.ui-inline {
    background:transparent; border-color:transparent; padding:4px 6px; font-size:inherit;
    transition:border-color .15s, background .15s;
}
.input.ui-inline:hover { border-color:var(--border); }
.input.ui-inline:focus { background:var(--panel); border-color:var(--border-strong); }

/* v45: „zwelvo handelt" — auch das GROSSE Gesicht schreibt sein Häkchen,
   wenn eine bestätigte Aktion wirklich passiert ist */
.big-face[data-eyes="check"] .eye { opacity:0 !important; }
.big-face[data-eyes="check"] .eyes { position:relative; }
.big-face[data-eyes="check"] .eyes::after {
    content:""; position:absolute; left:50%; top:50%; width:46px; height:23px;
    border-left:9px solid #7ee2a8; border-bottom:9px solid #7ee2a8; border-radius:2px 2px 2px 5px;
    transform:translate(-50%,-64%) rotate(-45deg);
    filter:drop-shadow(0 0 14px rgba(126,226,168,.95)) drop-shadow(0 0 34px rgba(126,226,168,.5));
    animation:check-draw .55s cubic-bezier(.3,1.2,.4,1) both;
}
.start-actions { display:flex; gap:10px; justify-content:center; margin-top:14px; align-items:center; }

/* ============================================================
   v46: Der Serus-Feinschliff — schwebende Glas-Pille als Menü
   (oben mittig), engeres Headline-Tracking, weichere Radien,
   ruhigere Flächen. Reine Token-Schicht: Schwarz/Hell/Weiß und
   alle Kundenfarben ziehen automatisch mit.
   ============================================================ */

/* Die Menüleiste wird zur schwebenden Pille — das Markenzeichen des Looks */
.mainframe-nav {
    top:10px; padding:5px 7px; gap:2px;
    background:color-mix(in srgb, var(--panel) 72%, transparent);
    border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius:999px;
    backdrop-filter:blur(16px) saturate(1.5);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);
    box-shadow:0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.mainframe-nav .nav-item { border-radius:999px; padding:7px 15px; font-size:13px; font-weight:500; }
.mainframe-nav .nav-item.active { background:color-mix(in srgb, var(--text) 9%, transparent); }
/* Die Linie tritt ab — die Pille IST die Ordnung */
.mainframe-line { display:none; }
.room-surface { inset:60px 10px 46px; }

/* Topbar-Icons passen sich der Pille an */
body.roomed > .topbar { top:11px; }
body.roomed > .topbar .icon-btn { border-radius:999px; }
.mainframe-brand { top:13px; }

/* Typografie: großzügig, eng gespannt, selbstbewusst */
.page-head h1, .frame-body .page-head h1 { font-size:22px; font-weight:650; letter-spacing:-.025em; }
h1, h2, h3 { letter-spacing:-.02em; }
.page-head { margin-bottom:22px; }

/* Flächen: weicher, ruhiger, edler */
.card, .mf-card { border-radius:var(--radius-l); }
.card { transition:border-color .2s; }
.card:hover { border-color:color-mix(in srgb, var(--border-strong) 70%, var(--border)); }
.btn { border-radius:11px; font-weight:550; }
.btn-sm { border-radius:9px; }
.btn-primary {
    background:linear-gradient(135deg, var(--accent-a), color-mix(in srgb, var(--accent-a) 55%, var(--accent-b)));
    box-shadow:0 4px 18px color-mix(in srgb, var(--accent-a) 28%, transparent);
    border:none;
}
.btn-primary:hover { box-shadow:0 6px 24px color-mix(in srgb, var(--accent-a) 40%, transparent); filter:brightness(1.06); }
.input, .select { border-radius:11px; }
.dropdown { border-radius:16px; backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); }

@media (max-width:860px) {
    .mainframe-nav { border-radius:16px; top:8px; }
    .room-surface { inset:56px 5px 42px; }
}

/* v47: Pillen-Feinschliff — links nur das Dashboard-Zeichen, rechts immer
   das Options-Zahnrad, dazwischen die Module. Ein Blick, alles da. */
.mainframe-nav .nav-item.icon-only { padding:8px 11px; display:inline-flex; align-items:center; }
.mainframe-nav .pill-sep { width:1px; height:18px; background:var(--border); margin:0 5px; flex-shrink:0; }

/* v48: Badge in der Pille (Neues zählt sich an) + Rail-Scroll robust */
.nav-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:17px; height:17px; padding:0 5px; border-radius:999px;
    font-size:10.5px; font-weight:700; color:#fff;
    background:linear-gradient(135deg, var(--accent-a), var(--accent-b));
}
.menu-item .nav-badge { font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; }
.module-rail { overscroll-behavior:contain; }

/* v49: Immer runde Knöpfe — bei allem. Und Button-Text ist nie Akzentfarbe. */
.btn, .btn-sm, .action-btn, .icon-btn, .start-actions button { border-radius:999px; }
.room-surface a.btn-primary, .btn-primary { color:#fff; }
.room-surface a.btn-ghost { color:var(--text); }

/* v50: auch der native Datei-Knopf ist ein runder zwelvo-Knopf */
input[type="file"]::file-selector-button {
    border:1px solid var(--border-strong); border-radius:999px;
    background:var(--surface, transparent); color:var(--text);
    padding:7px 14px; margin-right:10px; font:inherit; font-size:12.5px;
    font-weight:550; cursor:pointer;
}
input[type="file"]::file-selector-button:hover { border-color:var(--accent-a); }

/* v51: Probier-Modus — der ehrliche Hinweis, edel und nie im Weg */
.guest-banner {
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
    display:flex; align-items:center; gap:12px; z-index:60;
    padding:9px 12px 9px 16px; border-radius:999px;
    background:color-mix(in srgb, var(--bg, #0b0b12) 72%, transparent);
    border:1px solid var(--border-strong, rgba(255,255,255,.14));
    backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
    box-shadow:0 12px 40px rgba(0,0,0,.35);
    max-width:min(92vw, 640px);
}
.guest-banner .guest-text { font-size:12.5px; color:var(--text); line-height:1.35; }
.guest-banner .btn { white-space:nowrap; }
.guest-dot {
    width:8px; height:8px; border-radius:999px; flex:0 0 auto;
    background:linear-gradient(135deg, var(--accent-a), var(--accent-b));
    animation:guest-pulse 2.4s ease-in-out infinite;
}
@keyframes guest-pulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }

/* v52: Preise — vier Pakete, ehrlich und rund, Pro als Anker */
.price-page { max-width:1080px; margin:0 auto; padding:34px 22px 80px; }
.price-top { display:flex; align-items:center; margin-bottom:44px; }
.price-top .right { margin-left:auto; }
.price-page h1 { font-size:30px; letter-spacing:-.02em; text-align:center; }
.price-sub { max-width:620px; margin:10px auto 40px; text-align:center; color:var(--muted); font-size:14.5px; line-height:1.65; }
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; align-items:stretch; }
.plan-card {
    position:relative; display:flex; flex-direction:column; gap:14px;
    padding:26px 22px; border-radius:22px;
    background:var(--panel, rgba(255,255,255,.04));
    border:1px solid var(--border, rgba(255,255,255,.09));
}
.plan-hero { border-color:color-mix(in srgb, var(--accent-a) 55%, var(--border)); box-shadow:0 18px 60px color-mix(in srgb, var(--accent-a) 16%, transparent); }
.plan-current { outline:2px solid color-mix(in srgb, var(--ok, #3ddc97) 60%, transparent); }
.plan-flag {
    position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    padding:3px 12px; border-radius:999px; font-size:11px; font-weight:700; color:#fff;
    background:linear-gradient(135deg, var(--accent-a), var(--accent-b));
}
.plan-name { font-size:15px; font-weight:650; }
.plan-price { font-size:30px; font-weight:750; letter-spacing:-.02em; }
.plan-price span { font-size:12.5px; font-weight:500; color:var(--muted); }
.plan-points { list-style:none; padding:0; margin:0; display:grid; gap:8px; flex:1; }
.plan-points li { font-size:13px; color:var(--soft, var(--text)); line-height:1.5; padding-left:18px; position:relative; }
.plan-points li::before { content:'✓'; position:absolute; left:0; color:var(--accent-b); }
.plan-cta { width:100%; text-align:center; justify-content:center; display:inline-flex; }
.plan-note { font-size:12px; color:var(--muted); text-align:center; }
.price-foot { margin-top:34px; text-align:center; color:var(--muted); font-size:12.5px; max-width:640px; margin-left:auto; margin-right:auto; line-height:1.7; }
.price-legal { margin-top:14px; text-align:center; font-size:12px; }
.price-legal a, .price-foot a { color:var(--muted); }

/* v53: Frisch gelernte Module stellen sich kurz vor */
.menu-item.nav-intro {
    animation:nav-intro 1.1s ease-in-out 2;
    border-radius:10px;
}
@keyframes nav-intro {
    0%,100% { background:transparent; }
    50% { background:color-mix(in srgb, var(--accent-b) 18%, transparent); }
}
.dd.dd-intro > .nav-item { color:var(--text); }

/* v54: Guide — zwelvos Absicht als Abhak-Karte */
.guide-proposal {
    display:grid; gap:9px; padding:18px; border-radius:20px; max-width:420px;
    background:var(--panel, rgba(255,255,255,.05));
    border:1px solid var(--border-strong, rgba(255,255,255,.14));
    text-align:left;
}
.gp-intro { font-size:13.5px; font-weight:600; }
.gp-item {
    display:flex; align-items:center; gap:10px; font-size:13.5px; cursor:pointer;
    padding:8px 12px; border-radius:999px; border:1px solid var(--border, rgba(255,255,255,.09));
    animation:chip-in .3s ease both;
}
.gp-item:has(input:checked) {
    border-color:color-mix(in srgb, var(--accent-b) 55%, transparent);
    background:color-mix(in srgb, var(--accent-b) 10%, transparent);
}
.gp-item input { accent-color:var(--accent-b); }
.gp-note { font-size:12px; color:var(--muted); }
.guide-proposal .btn { justify-self:end; }

/* ============================================================
   v55: Alarm-Auftritt im Start-Raum — Module mit Befunden oder
   offenen Aktionen treten aus dem Tiefen-Karussell nach vorn
   (Transform setzt JS in railDepth) und pulsieren in ihrer
   Ampelfarbe, während zwelvo zeitgleich erklärt. Die Akzentfarbe
   bleibt Frage-Hinweisen vorbehalten — Alarm spricht Statusfarbe.
   ============================================================ */
.rail-card.hot { position:relative; z-index:3; }
.rail-card.hot[data-state="critical"] { --alarm:var(--critical); }
.rail-card.hot[data-state="warning"] { --alarm:var(--warning); }
.rail-card.hot[data-state="critical"], .rail-card.hot[data-state="warning"] {
    border-color:var(--alarm);
    animation:rail-alarm 1.4s ease-in-out infinite;
}
@keyframes rail-alarm {
    0%, 100% { outline:0 solid transparent; }
    50% { outline:3px solid color-mix(in srgb, var(--alarm) 65%, transparent); outline-offset:3px; }
}

/* ============================================================
   v56: Instanz-Dashboard neu geordnet — oben die Aktions-Leiste,
   gruppiert nach Bereichen wie eine Software-Navigation. Links
   prominent „Steht an": das Aktuelle zuerst, groß und klickbar.
   Rechts das Infocenter: Agenten als schmale Zeilen in derselben
   Spalte und Kartengröße wie die Aktivität — Monitoring ist
   Hintergrund, nicht Bühne.
   ============================================================ */
.dash-actionbar {
    display:flex; align-items:stretch; margin-bottom:14px; padding:9px 4px;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-m);
    overflow-x:auto; scrollbar-width:none;
}
.dash-actionbar::-webkit-scrollbar { display:none; }
.action-group { display:flex; align-items:center; gap:7px; padding:0 16px; border-right:1px solid var(--border); }
.action-group:last-child { border-right:0; }
.ag-label {
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
    color:var(--muted); margin-right:5px; white-space:nowrap;
}
/* Runde Aktions-Chips (Designvorgabe: runde Buttons überall) */
.dash-actionbar .action-btn { flex:0 0 auto; padding:8px 13px; font-size:12.5px; border-radius:999px; }
.dash-actionbar .action-btn .lbl { white-space:nowrap; }

.dash-split { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; align-items:start; }
.dash-info { display:flex; flex-direction:column; gap:13px; min-width:0; }
.dash-info .dash-card { order:var(--o,0); }
@media (max-width:960px) {
    .dash-split { grid-template-columns:1fr; }
    .action-group { flex-wrap:wrap; }
}

/* „Steht an": die Bühne — größere Schrift, Luft, jede Zeile ein Klick */
.agenda-panel { padding:18px 20px 12px; }
.agenda-panel > header { font-size:13px; }
.agenda-line {
    display:flex; align-items:center; gap:12px; padding:12px 4px;
    border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent);
    text-decoration:none; border-radius:8px;
}
.agenda-line:last-of-type { border-bottom:0; }
.agenda-line b { flex:1; min-width:0; font-size:14.5px; font-weight:600; color:var(--text); letter-spacing:-.01em; }
.agenda-line .al-meta { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.agenda-line:hover { background:color-mix(in srgb, var(--panel-2) 70%, transparent); }
.agenda-line.agenda-more b { font-weight:500; color:var(--muted); font-size:12.5px; }
.agenda-empty { color:var(--soft); font-size:13.5px; padding:8px 2px 10px; }

/* Agenten dezent: eine schmale Zeile pro Agent — gleiche Tonlage wie die Aktivität */
.agent-row {
    display:flex; align-items:center; gap:9px; padding:6px 2px;
    text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.agent-row:last-of-type { border-bottom:0; }
.agent-row b { font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; }
.agent-row .ar-status { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; color:var(--muted); text-align:right; }
.agent-row .ar-num { font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; opacity:.7; }
.agent-row:hover { background:color-mix(in srgb, var(--panel-2) 70%, transparent); }

/* ============================================================
   v57: Die Aktions-Leiste aus einem Guss — Ribbon-Stil: ikonische,
   rahmenlose Buttons (Icon oben, Label darunter), Gruppenlabel
   dezent links oben über jeder Gruppe. Kein sichtbares Scrollen:
   reicht der Platz nicht, wird die Gruppe mehrzeilig. Ränder
   überall eine Spur feiner — weniger Chrom, mehr Ruhe.
   ============================================================ */
.dash-actionbar {
    flex-wrap:wrap; row-gap:10px; overflow:visible; padding:10px 6px 8px;
    border-color:color-mix(in srgb, var(--border) 75%, transparent);
    margin-bottom:12px;
}
.action-group { flex-direction:column; align-items:stretch; gap:4px; padding:0 13px; border-right:0; }
.action-group + .action-group { border-left:1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.ag-label {
    font-size:9.5px; letter-spacing:.11em; margin:0 0 0 4px;
    color:color-mix(in srgb, var(--muted) 80%, transparent);
}
.ag-chips { display:flex; flex-wrap:wrap; gap:2px; }
.dash-actionbar .action-btn {
    flex-direction:column; justify-content:center; gap:5px; min-width:64px;
    padding:8px 11px 7px; font-size:10.5px; border:0; border-radius:13px; background:transparent;
}
.dash-actionbar .action-btn:hover { background:var(--panel-2); }
.dash-actionbar .action-btn .lbl { color:var(--soft); letter-spacing:.01em; }
.dash-actionbar .action-btn svg { opacity:.9; }

/* Feinere Ränder im ganzen Dashboard — edel heißt: kaum spürbare Linien */
.dash-split { gap:12px; }
.dash-info { gap:11px; }
.dash-shell .area-panel { border-color:color-mix(in srgb, var(--border) 75%, transparent); }
.agenda-panel { padding:15px 18px 10px; }
.agenda-line { padding:10px 4px; gap:11px; }
.agenda-line b { font-size:14px; }

/* v58: Anpassen wohnt in der Leiste — rechts außen als Icon-Button,
   der Speicher-Status flüstert daneben. Kein Kopfzeilen-Geraffel mehr. */
.action-group.dash-editgroup {
    margin-left:auto; flex-direction:row; align-items:center; gap:8px;
    padding-right:6px; border-left:0;
}
.dash-editgroup #dash-state { font-size:11px; white-space:nowrap; }
.dash-edit { color:var(--muted); }
.dash-editing .dash-edit { background:var(--panel-2); color:var(--text); }

/* ============================================================
   v59: Die Leiste gehört dir — im Anpassen-Modus öffnet sich das
   Auswahl-Tray: Aktionen per Drag hinein (ausblenden) oder zurück
   in ihre Gruppe (einblenden). Dazu der Schalter „Beschriftung
   anzeigen" — ohne Text werden es runde, reine Icon-Buttons.
   ============================================================ */
.dash-tray {
    display:none; margin:-2px 0 12px; padding:10px 13px;
    border:1px dashed color-mix(in srgb, var(--border) 90%, transparent);
    border-radius:var(--radius-m);
    background:color-mix(in srgb, var(--panel) 55%, transparent);
}
.dash-editing .dash-tray { display:block; }
.tray-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin-bottom:8px; }
.tray-toggle { display:flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; }
.tray-toggle input { accent-color:var(--accent-b); }
.tray-chips { display:flex; flex-wrap:wrap; gap:4px; min-height:46px; align-items:center; }
.tray-chips .action-btn {
    flex:0 0 auto; flex-direction:column; justify-content:center; gap:5px; min-width:64px;
    padding:8px 11px 7px; font-size:10.5px; border:0; border-radius:13px; background:transparent;
    opacity:.75;
}
.tray-chips .action-btn:hover { background:var(--panel-2); opacity:1; }
.tray-chips .action-btn .lbl { color:var(--soft); }
.tray-chips:has(.action-btn) .tray-empty { display:none; }
.tray-empty { font-size:11.5px; color:color-mix(in srgb, var(--muted) 70%, transparent); }

/* Ohne Beschriftung: runde, reine Icon-Buttons — das Icon erklärt sich, der Titel hilft */
.dash-actionbar.labels-off .action-btn .lbl { display:none; }
.dash-actionbar.labels-off .action-btn { min-width:0; padding:11px; border-radius:999px; }
.dash-actionbar.labels-off .dash-editgroup .action-btn { padding:11px; }

/* Anpassen-Modus: Zonen deuten sich an, Gezogenes wird durchsichtig */
.dash-editing .action-btn[data-action] { cursor:grab; }
.action-btn.dragging { opacity:.35; }
.dash-editing .ag-chips, .dash-editing .tray-chips {
    outline:1px dashed color-mix(in srgb, var(--border) 85%, transparent);
    outline-offset:4px; border-radius:10px; min-width:44px; min-height:40px;
}
/* Gruppen ohne sichtbare Aktion treten ab — im Anpassen-Modus bleiben sie als Ziel da */
.dash-actionbar .action-group:not(.dash-editgroup):not(:has(.action-btn)) { display:none; }
.dash-editing .dash-actionbar .action-group { display:flex; }

/* ============================================================
   v60: Der gelernte Neu-Weg — in JEDEM Modul gleich: runder
   Plus-Knopf rechts oben, das passende Formular kommt als Layer.
   Kein Speichern-Knopf: Enter oder Klick daneben legt an, Esc
   verwirft. Die Felder passt jedes Modul an, der Rahmen bleibt.
   ============================================================ */
.plus-btn {
    width:38px; height:38px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; border:1px solid var(--border); background:var(--panel);
    color:var(--text); font-size:20px; font-weight:500; line-height:1;
    cursor:pointer; text-decoration:none; transition:border-color .15s, transform .15s;
}
.plus-btn:hover { border-color:var(--accent-a); transform:scale(1.06); }

dialog.plus-layer {
    border:1px solid var(--border); border-radius:16px; padding:0;
    width:min(540px, 92vw); background:var(--panel); color:var(--text);
    box-shadow:0 24px 70px rgba(0,0,0,.45);
}
dialog.plus-layer::backdrop { background:rgba(0,0,0,.45); backdrop-filter:blur(5px); }
dialog.plus-layer[open] { animation:plus-in .32s var(--spring); }
@keyframes plus-in { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
dialog.plus-layer form { padding:16px 18px 12px; display:grid; gap:11px; }
.plus-head { display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.plus-head b { flex:1; font-size:14px; letter-spacing:-.01em; }
.plus-head .save-state { font-size:11px; }
.plus-close {
    width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; border:0; background:transparent; color:var(--muted);
    font-size:13px; cursor:pointer;
}
.plus-close:hover { background:var(--panel-2); color:var(--text); }
.plus-hint { font-size:11px; color:color-mix(in srgb, var(--muted) 75%, transparent); margin-top:2px; }

/* v61: Ohne Beschriftung wird die Leiste flach und rund — eine Pille aus
   Icons. Gruppen zeigen sich nur noch als feine Trennlinien. */
.dash-actionbar.labels-off { border-radius:999px; padding:6px 8px; row-gap:4px; }
.dash-actionbar.labels-off .ag-label { display:none; }
.dash-actionbar.labels-off .action-group { flex-direction:row; align-items:center; gap:2px; padding:0 9px; }
.dash-actionbar.labels-off .action-btn { padding:9px; }
.dash-actionbar.labels-off .dash-editgroup { padding-right:4px; }

/* v55: Buchung — Wochentags-Chips in den Einstellungen */
.day-chip { cursor:pointer; }
.day-chip input { position:absolute; opacity:0; }
.day-chip span {
    display:inline-block; padding:7px 12px; border-radius:999px; font-size:12.5px;
    border:1px solid var(--border-strong, rgba(255,255,255,.14)); color:var(--muted);
}
.day-chip input:checked + span {
    color:#fff; border-color:transparent;
    background:linear-gradient(135deg, var(--accent-a), var(--accent-b));
}

/* ============================================================
   v62: Das Eingabefeld im Start-Raum, wie man es von KI-Apps
   kennt — großzügig, leicht, alles in EINER Fläche: Mikro dezent
   als Icon im Feld, Absenden als runder Pfeil. Der Avatar tritt
   dafür einen Schritt zurück (kleiner) — nicht jeder mag große
   bildliche KI-Gesichter.
   ============================================================ */
.start-form2 {
    background:color-mix(in srgb, var(--panel) 92%, transparent);
    border:1px solid var(--border); border-radius:24px;
    padding:8px 8px 8px 20px; gap:6px; align-items:center;
}
.start-form2 .input {
    border:0; background:transparent; font-size:16px; padding:12px 0;
}
.start-form2 .input:focus { outline:none; border:0; box-shadow:none; }
.start-mic {
    width:40px; height:40px; border:0; background:transparent;
}
.start-mic:hover { background:var(--panel-2); transform:none; }
.start-form2 .btn-primary {
    width:44px; height:44px; padding:0; border-radius:50%;
    display:grid; place-items:center; font-size:17px;
}