:root{ /* Zertura-Markenpalette (wie zertura.de): Tiefblau-Grund, Prüfgrün als Akzent. */ --tech:#1FB47F;--isms:#378ADD;--org:#BA7517;--krypto:#8B5CF6; --green:#1FB47F;--red:#E5484D;--orange:#E08A00;--blue:#378ADD;--gray:#9B9B9B; --bg:#0A1219;--panel:#101B25;--panel2:#17242F;--line:#1E2C3A; --txt:#E9F1F8;--muted:#8EA1B5;--accent:#1FB47F;--radius:12px; --login-glow:#12202C;--code-bg:#0B141C;--code-txt:#cfe3ff;--note-txt:#bcd8f5; --nav-sec:#64798F;--heat-txt:#0b1119;--knopf-txt:#fff;--schatten:rgba(0,0,0,.45); --topbar-bg:rgba(10,18,25,.72); } /* ── Helles Theme (Theme-Manager: ) ────────────────── Gleiche Token-Namen, hell abgestimmt: kühles Papier, Akzente für weißen Grund nachgedunkelt, damit Kontraste bestehen bleiben. Neue Farben IMMER als Token hier UND oben pflegen — nie nur in einem Theme definieren. */ :root[data-theme="hell"]{ /* Helle Zertura-Variante: kühles Papier, Prüfgrün nachgedunkelt für Kontrast auf Weiß. */ --tech:#12805B;--isms:#1D6FC4;--org:#9A5E10;--krypto:#6D3FD1; --green:#12805B;--red:#C93540;--orange:#B87500;--blue:#1D6FC4;--gray:#6E7A87; --bg:#F3F7F6;--panel:#FFFFFF;--panel2:#E9F0EE;--line:#D3DFDB; --txt:#16232E;--muted:#5C6F82;--accent:#12805B; --login-glow:#DCE9E4;--code-bg:#EDF3F1;--code-txt:#14503C;--note-txt:#2C4A68; --nav-sec:#8296A9;--heat-txt:#0b1119;--knopf-txt:#fff;--schatten:rgba(24,39,54,.18); --topbar-bg:rgba(243,247,246,.78); } *{box-sizing:border-box} body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--txt);font-size:14px} button{font-family:inherit;cursor:pointer} a{color:inherit;text-decoration:none} .hidden{display:none!important} /* LOGIN */ #login{min-height:100vh;display:flex;align-items:center;justify-content:center; background:radial-gradient(1200px 600px at 50% -10%,var(--login-glow) 0%,var(--bg) 60%)} .login-card{width:400px;max-width:92vw;background:var(--panel);border:1px solid var(--line); border-radius:18px;padding:34px 30px;box-shadow:0 30px 80px var(--schatten)} .brand{display:flex;align-items:center;gap:12px;margin-bottom:6px} .logo{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--tech),var(--blue)); display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#fff} .brand h1{font-size:19px;margin:0}.brand p{margin:0;color:var(--muted);font-size:12px} .login-card h2{font-size:13px;color:var(--muted);font-weight:600;margin:24px 0 12px} .field{margin-bottom:14px} .field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600} .field input,.field select,.field textarea{width:100%;background:var(--panel2);border:1px solid var(--line); border-radius:9px;padding:10px 12px;color:var(--txt);font-size:13px;font-family:inherit} .field input:focus,.field select:focus{outline:none;border-color:var(--accent)} /* Kontrollkästchen/Radiobuttons NICHT auf 100% Breite ziehen (sonst brechen Zeilen um) */ .field input[type=checkbox],.field input[type=radio]{width:auto;padding:0;border-radius:0} .btn{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:10px 15px;font-size:13px;font-weight:600;width:100%} .btn:hover{filter:brightness(1.08)} .btn.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--txt);width:auto} .btn.sm{padding:6px 11px;font-size:12px;width:auto} .btn.auto{width:auto} .err{color:var(--red);font-size:12.5px;margin-top:6px;min-height:16px} .demo{margin-top:18px;border-top:1px solid var(--line);padding-top:14px} .demo .dl{font-size:11px;color:var(--muted);margin-bottom:8px} .demo-btn{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line); border-radius:9px;padding:8px 11px;color:var(--txt);font-size:12px;margin-bottom:6px} .demo-btn:hover{border-color:var(--accent)} .role-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px} /* SHELL */ #app{display:flex;min-height:100vh} .sidebar{width:238px;background:var(--panel);border-right:1px solid var(--line); display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .sb-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px;border-bottom:1px solid var(--line)} .sb-brand .logo{width:34px;height:34px;font-size:16px;border-radius:9px} .sb-brand h1{font-size:15px;margin:0}.sb-brand p{font-size:10.5px;color:var(--muted);margin:1px 0 0} .nav{flex:1;padding:12px 10px;overflow:auto} .nav-item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;color:var(--muted); padding:10px 12px;border-radius:9px;font-size:13.5px;text-align:left;margin-bottom:2px} .nav-item:hover{background:var(--panel2);color:var(--txt)} .nav-item.active{background:var(--panel2);color:var(--txt);font-weight:600} .nav-item .ic{width:20px;text-align:center;font-size:15px} .nav-sec{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--nav-sec);padding:14px 12px 6px} .nav-subtree{margin:0 0 4px 0} .nav-sub-select{width:calc(100% - 22px);margin:2px 0 6px 22px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:12px;padding:5px 7px} .nav-subitem{display:block;padding:6px 10px 6px 34px;color:var(--muted);font-size:12.5px;text-decoration:none;border-radius:8px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav-subitem:hover{background:var(--panel2);color:var(--txt)} .nav-subitem.active{background:var(--panel2);color:var(--txt);font-weight:600} .nav-ls-head{cursor:pointer} .nav-gb{padding-left:48px} .nav-sub-empty{padding:4px 10px 6px 34px;color:var(--nav-sec);font-size:12px} .sb-user{padding:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px} .avatar{width:34px;height:34px;border-radius:50%;background:var(--panel2);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .sb-user .un{font-size:12.5px;font-weight:600}.sb-user .ur{font-size:10.5px;color:var(--muted)} .sb-user .logout{margin-left:auto;background:none;border:none;color:var(--muted);font-size:16px} .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px; padding:0 24px;background:var(--topbar-bg);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5} .topbar h2{font-size:16px;margin:0}.topbar .sub{color:var(--muted);font-size:12px} .topbar .spacer{flex:1} .pill{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--muted)} .content{padding:24px;max-width:1600px;width:100%} /* KPIs / CARDS */ .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px} .kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px} .kpi .lbl{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em} .kpi .val{font-size:28px;font-weight:800;margin-top:6px} .kpi .delta{font-size:11.5px;margin-top:4px;color:var(--muted)} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px} .card h3{margin:0 0 2px;font-size:15px}.card .csub{color:var(--muted);font-size:12px;margin-bottom:14px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:900px){.kpi-grid{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}} /* TABLES */ table{width:100%;border-collapse:collapse} th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); padding:9px 10px;border-bottom:1px solid var(--line);font-weight:600} td{padding:11px 10px;border-bottom:1px solid var(--line);font-size:13px} tr:last-child td{border-bottom:none} tr.click:hover{background:var(--panel2);cursor:pointer} .badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600} .dot{width:8px;height:8px;border-radius:50%;display:inline-block} .tag{padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600} .bar{height:8px;border-radius:6px;background:var(--panel2);overflow:hidden;display:flex} .bar span{display:block;height:100%} .progress-wrap{display:flex;align-items:center;gap:10px} .progress-wrap .pct{font-size:12px;color:var(--muted);min-width:34px;text-align:right} .domain-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;background:var(--panel2)} /* HEATMAP */ .heat{display:grid;grid-template-columns:150px repeat(4,1fr);gap:6px;font-size:12px} .heat .hcell{padding:12px 8px;border-radius:8px;text-align:center;font-weight:700;color:var(--heat-txt)} .heat .hlabel{padding:12px 8px;color:var(--muted);font-weight:600;display:flex;align-items:center} .heat .hhead{color:var(--muted);font-weight:600;text-align:center;padding:6px} /* MODAL */ .modal-bg{position:fixed;inset:0;background:rgba(5,9,15,.6);backdrop-filter:blur(3px);display:flex; align-items:center;justify-content:center;z-index:50;padding:20px} .modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:520px;max-width:100%; max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.5)} .modal-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center} .modal-h h3{margin:0;font-size:16px}.modal-h button{margin-left:auto;background:none;border:none;color:var(--muted);font-size:20px} .modal-b{padding:22px}.modal-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end} .code{background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:14px;font-family:ui-monospace,Menlo,monospace; font-size:12px;color:var(--code-txt);overflow:auto;line-height:1.55;white-space:pre} .kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px} .kv:last-child{border:none}.kv .k{color:var(--muted)} .copyrow{display:flex;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line); border-radius:9px;padding:8px 12px;font-family:ui-monospace,monospace;font-size:12px} .copyrow span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .empty{color:var(--muted);text-align:center;padding:40px;font-size:13px} .flex{display:flex;align-items:center;gap:10px} .between{display:flex;align-items:center;justify-content:space-between;gap:10px} .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel2); border:1px solid var(--line);padding:11px 18px;border-radius:10px;font-size:13px;z-index:100;box-shadow:0 12px 40px rgba(0,0,0,.4)} .note{background:rgba(55,138,221,.08);border:1px solid rgba(55,138,221,.3);border-radius:10px; padding:12px 14px;font-size:12.5px;color:var(--note-txt);line-height:1.55} .tree .thead{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;border-radius:8px;font-size:13.5px} .tree .thead:hover{background:var(--panel2)} .tree .tw{width:14px;color:var(--muted);font-size:11px} .tree .tbody{margin-left:15px;border-left:1px solid var(--line);padding-left:6px} .tree .treq{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:13px} .tree .treq:hover{background:var(--panel2)} .tree .tcount{margin-left:auto;color:var(--muted);font-size:11.5px} .tree .tcode{font-weight:600;white-space:nowrap;min-width:104px} /* Gruppenauswahl im Projekt-Dialog */ .npg{overflow-y:auto;overflow-x:hidden} .npg-top{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:8px} .npg-top:hover{background:var(--panel2)} .npg-exp{background:none;border:none;color:var(--muted);width:16px;flex:none;cursor:pointer;font-size:11px} .npg-lbl,.npg-sub{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer} .npg-sub{padding:4px 6px;border-radius:8px} .npg-sub:hover{background:var(--panel2)} .npg input[type=checkbox]{flex:none;margin:0} .npg-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--muted)} .npg-name b{color:var(--txt);margin-right:6px} .npg-count{flex:none;color:var(--muted);font-size:11.5px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:1px 9px} .npg-subs{margin:0 0 6px 30px;border-left:1px solid var(--line);padding-left:8px} /* ---------- Barrierefreiheit: sichtbarer Tastatur-Fokus (nur bei Tastaturnavigation) ---------- */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} a:focus-visible,button:focus-visible,.nav-item:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* Maus-Klicks erzeugen keinen störenden Rahmen */ :focus:not(:focus-visible){outline:none} /* ---------- Druck / PDF: nur der Inhalt, ohne Seitenleiste & Bedienelemente ---------- */ @media print { :root { --bg:#fff; --panel:#fff; --panel2:#f5f5f5; --line:#ccc; --txt:#111; --muted:#555; } body { background:#fff !important; } .sidebar, .topbar { display:none !important; } .main { margin:0 !important; } .content { padding:0 !important; } .btn, select, input, textarea, .no-print { display:none !important; } .card { box-shadow:none !important; } } /* ── Ohne Seitenleiste: Kopfleiste + zentrierter Inhalt (Startseite = Navigation) ── */ #app.ohne-sidebar{display:block} .kopfleiste{height:54px;border-bottom:1px solid var(--line);background:var(--panel); display:flex;align-items:center;gap:8px;padding:0 22px;position:sticky;top:0;z-index:20} .kopfleiste .sb-brand{padding:0;border:0} .kopfleiste .spacer{flex:1} .kopfleiste .un{font-size:13px;font-weight:600}.kopfleiste .ur{font-size:11px;color:var(--muted)} .kopfleiste .logout{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:6px 10px} .kopfleiste .logout:hover{color:var(--txt);border-color:var(--accent)} #app.ohne-sidebar .topbar{padding:0 22px} #app.ohne-sidebar .content{margin:0 auto} @media print{.kopfleiste{display:none}} /* ── Prozess-Landkarte (Firmenseite) ── */ .lk-fluss{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .lk-stufe{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;position:relative;text-decoration:none;color:var(--txt);min-width:0} .lk-stufe:hover{border-color:var(--accent)} .lk-stufe .nr{font-size:11px;color:var(--muted)} .lk-stufe .nm{font-weight:600;font-size:13px;margin:2px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lk-stufe .pz{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .lk-stufe .bar{height:5px;background:var(--bg);border-radius:3px;margin-top:8px;overflow:hidden} .lk-stufe .bar i{display:block;height:100%;border-radius:3px} .lk-stufe .next{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.4;min-height:30px} .lk-stufe:after{content:"›";position:absolute;right:-9px;top:38%;color:var(--muted);font-size:16px} .lk-stufe:last-child:after{content:""} .lk-unten{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:16px} .lk-unten h4{margin:0 0 8px;font-size:13px} .lk-check{display:flex;flex-direction:column;gap:6px;font-size:13px} .lk-check div{display:flex;gap:10px;align-items:center;padding:7px 10px;background:var(--panel2);border-radius:8px} .lk-check div.erledigt{opacity:.6} .lk-check .ok{color:var(--green)}.lk-check .off{color:var(--orange)} .lk-check a{margin-left:auto;font-size:12px;color:var(--accent);text-decoration:none;white-space:nowrap} .lk-check small{color:var(--muted)} @media(max-width:1000px){.lk-fluss{grid-template-columns:repeat(3,minmax(0,1fr))}.lk-stufe:after{content:""}.lk-unten{grid-template-columns:1fr}} /* ══ John — Ergänzungen (Agentverwaltung, Chat, Einstellungen) ══ */ .agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px} .agent-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); padding:18px;display:flex;flex-direction:column;gap:10px;position:relative} .agent-card:hover{border-color:var(--accent)} .agent-kopf{display:flex;align-items:center;gap:12px} .agent-avatar{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center; font-size:22px;flex:none;border:1px solid var(--line)} .agent-kopf .an{font-size:15px;font-weight:700} .agent-kopf .ar{font-size:12px;color:var(--muted)} .agent-besch{font-size:12.5px;color:var(--muted);line-height:1.5;min-height:38px} .agent-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .agent-aktionen{display:flex;gap:8px;margin-top:auto;padding-top:6px;border-top:1px solid var(--line)} .status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px} .pausiert-card{opacity:.6} /* Chat */ .chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 58px - 48px);max-width:900px} .chat-verlauf{flex:1;overflow-y:auto;padding:6px 2px;display:flex;flex-direction:column;gap:12px} .msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word} .msg.benutzer{align-self:flex-end;background:var(--accent);color:var(--knopf-txt);border-bottom-right-radius:4px} .msg.agent{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px} .msg .mz{display:block;font-size:10.5px;opacity:.65;margin-top:6px} .msg-schritte{align-self:flex-start;max-width:82%;font-size:12px;color:var(--muted)} .msg-schritte details{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-top:4px} .msg-schritte summary{cursor:pointer;font-weight:600} .msg-schritte .ds{margin:8px 0 4px;padding-left:10px;border-left:2px solid var(--accent)} .chat-eingabe{display:flex;gap:10px;padding-top:14px;border-top:1px solid var(--line)} .chat-eingabe textarea{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:12px; padding:11px 13px;color:var(--txt);font:inherit;font-size:13.5px;resize:none;min-height:44px;max-height:160px} .chat-eingabe textarea:focus{outline:none;border-color:var(--accent)} .denken{align-self:flex-start;color:var(--muted);font-size:12.5px;padding:8px 2px} .denken i{display:inline-block;animation:blink 1.2s infinite} @keyframes blink{0%,100%{opacity:.25}50%{opacity:1}} /* Schalter (2FA) */ .schalter{position:relative;width:44px;height:24px;flex:none;cursor:pointer} .schalter input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer} .schalter .bahn{position:absolute;inset:0;background:var(--panel2);border:1px solid var(--line);border-radius:14px;transition:.15s} .schalter .punkt{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.15s} .schalter input:checked + .bahn{background:var(--accent);border-color:var(--accent)} .schalter input:checked + .bahn + .punkt{left:23px;background:#fff} .qr-box{background:#fff;border-radius:12px;padding:12px;width:210px;margin:14px 0} .qr-box svg{display:block;width:100%;height:auto} .geheim{display:inline-block;font:600 13px ui-monospace,Menlo,monospace;letter-spacing:.1em;color:var(--accent); background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;word-break:break-all} .set-zeile{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)} .set-zeile:last-child{border-bottom:none} .set-zeile .st{font-size:13.5px;font-weight:600} .set-zeile .su{font-size:12px;color:var(--muted);margin-top:2px} .set-zeile .rechts{margin-left:auto;display:flex;align-items:center;gap:10px} /* ══ Besprechungsraum ══ */ .raum-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-bottom:12px} .raum-chip{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line); border-radius:20px;padding:5px 7px 5px 12px;font-size:12.5px;font-weight:600} .raum-chip .raus{background:none;border:none;color:var(--muted);font-size:13px;padding:0 4px;cursor:pointer} .raum-chip .raus:hover{color:var(--red)} .raum-leer{font-size:12.5px;color:var(--muted)} .msg.agent .sprecher{display:block;font-size:11.5px;font-weight:700;margin-bottom:4px} .msg.system{align-self:center;background:none;border:none;color:var(--muted);font-size:12px;padding:2px 10px;text-align:center} /* ══ Agentenseite (Kopf mit Reitern) ══ */ .agent-seite-kopf{display:flex;align-items:center;gap:14px;background:var(--panel); border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:18px;flex-wrap:wrap} .agent-seite-kopf .an{font-size:16px;font-weight:700} .agent-seite-kopf .ar{font-size:12px;color:var(--muted);margin-top:2px} .agent-tabs{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .agent-tabs .btn{text-decoration:none} .chat-wrap.mit-kopf{height:calc(100vh - 58px - 48px - 96px)} .agent-aktionen{flex-wrap:wrap} .agent-aktionen .btn{text-decoration:none;white-space:nowrap} a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none} /* ══ Themenumschalter + helle Feinheiten ══ */ :root{color-scheme:dark} :root[data-theme="hell"]{color-scheme:light} .thema-knopf{cursor:pointer;font-size:14px;line-height:1} .thema-knopf:hover{border-color:var(--accent)} :root[data-theme="hell"] .msg.agent{background:var(--panel)} :root[data-theme="hell"] .toast{box-shadow:0 12px 40px rgba(24,39,54,.25)}