/* styles.css = KANONISCHE Design-Schicht (Kap. 246, Issue #6).
   Hier stehen Tokens, Layout und die Komponenten-Grundregeln.
   ui-2026.css überschreibt nur noch Werte (keine neuen Komponenten, kein zweites :root).
   Entfernt wurden Deklarationen, die ui-2026.css ohnehin überstimmt hat, wörtliche Dubletten
   waren oder durch eine gleich selektierte spätere Regel verdeckt wurden:
   styles.css enthält jetzt 7475 Deklarationen (vorher 7860).
   Nachweis: scripts/css_fingerprint.py — berechnete Stile in 5 Themes vor/nach dem Umbau gleich. */
/* styles.css = KANONISCHE Design-Schicht (Kap. 246, Issue #6).
   Hier stehen Tokens, Layout und die Komponenten-Grundregeln.
   ui-2026.css überschreibt nur noch Werte (keine neuen Komponenten, kein zweites :root).
   In zwei Durchläufen wurden insgesamt 213 Deklarationen entfernt, die ui-2026.css ohnehin
   überstimmt hat, wörtliche Dubletten waren oder durch eine gleich selektierte spätere Regel
   verdeckt wurden — jede Eigenschaft ist damit genau einmal wirksam.
   Nachweis: scripts/css_fingerprint.py (berechnete Stile vor/nach dem Umbau identisch). */

:root{--bg:#f5f5f4;--card:#fff;--border:#e5e3e0;--text:#201f1e;--text2:#605e5c;--accent:#0b6bcb;--accent-dark:#0a5aa8;--accent-light:#e3f0fa;--mail:#0b6bcb;--cal:#a4262c;--contact:#107c10;--file:#5c2d91;--wiki:#7f4f24;--git:#3a3a3a;--todo:#038387;--tow:#0e7490;--rail:#243a5e;--rail-hover:rgba(255,255,255,.14);--rail-active:#1b2c49;--shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.05);--shadow-sm:0 1px 2px rgba(0,0,0,.05),0 3px 10px rgba(0,0,0,.05);--hover:#f0f0ef;--danger:#a4262c;--danger-bg:#fde7e9;--ok:#0f7b0f;--radius:10px;--radius-lg:14px;--radius-pill:999px;--tr:.16s ease;--warn:#b45309;--warn-bg:rgba(180,83,9,.10);--ok-bg:rgba(15,123,15,.12);--danger-dark:#8f1d21;--panel2:#f3f2f1;--line:rgba(0,0,0,.12);--warn-strong:#ca5010;--accent-2:#7a5af8;--hl:#d4a017;--muted-strong:#636568;--nc-brand:#0082c9;/* Kap. 247 (Issue #17): z-index-Skala und Motion-Stufen */;--z-base:1;--z-base-2:2;--z-base-3:3;--z-base-5:5;--z-base-6:6;--z-react:20;--z-resize:25;--z-rail:50;--z-tip:100;--z-pop:120;--z-search:130;--z-sidebar:300;--z-msgr:900;--z-msgr-btn:901;--z-msgr-pop:950;--z-editor-pop:999;--z-header:1100;--z-header-pop:1200;--z-msgr-name:1300;--z-window:1500;--z-window-bar:1700;--z-ctx:2000;--z-login:5000;--z-modal:6500;--z-editor-menu:9000;--z-suggest:9500;--z-toast:9999;--z-top:10000;--dur-1:100ms;--dur-2:150ms;--dur-3:200ms;--dur-4:400ms;--dur-pulse:1600ms;--ease-out:cubic-bezier(.2,.9,.3,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--brand-teams:#4b53bc;--brand-webex:#1a63a8;--brand-zoom:#2d8cff;--brand-gotomeeting:#0d6efd;--brand-bluejeans:#009dd1;--brand-ringcentral:#0c4d8c;--brand-chime:#232f3e;--brand-skype:#00a4e4;--brand-jitsi:#2d6fbf;--brand-facetime:#0aa06e;--brand-signal:#3a76f0;--brand-discord:#5865f2;--brand-slack:#611f69;--brand-googlemeet:#00897b;--brand-whereby:#00b0b9;--evt-teams:#4b53bc;--evt-webex:#1a63a8;--evt-zoom:#2d8cff;--evt-jitsi:#2d6fbf;--evt-googlemeet:#00897b;--evt-facetime:#0aa06e;--evt-signal:#3a76f0;--evt-discord:#5865f2;--evt-slack:#611f69;--evt-gotomeeting:#5d2e9e;--evt-whereby:#00b0b9;--evt-bluejeans:#0077c8;--evt-ringcentral:#d20a11;--evt-skypeloop:#00aff0;--state-ok-text:#0d6b3f;--state-warn-text:#8a4a00;--state-ics-warn-text:#a35c0a;--state-neutral-text:#5a5a62;--state-neutral-dot:#9a9aa0;--presence-away:#ff8c00;--danger-text:#c50f1f;--badge-unread:#d13438;--quote-line:#c8c6c4;--rail-fg:#e8eef7;--pdf-accent:#a4262c;--hl-bg:#fff3cd;--hl-bg-2:#ffd966;--mark-bg:#ffe58a;--log-bg:#131313;--log-text:#d6d6d6;--log-err:#ff6b6b;--log-warn:#ffb648;--log-ts:#8a8a8a;--login-text:#201f1e;--login-text2:#605e5c;--login-grad:linear-gradient(135deg,#243a5e 0%,#182b47 100%);--grad-talk:linear-gradient(135deg,#0082c9,#00639b);--ev-mix:#7a5af8;--close-hover-bg:#c0392b;--err:var(--danger);--muted:var(--text2)}
html[data-theme="dark"]{--bg:#0b0f1a;--bg2:#0e1424;--card:rgba(20,28,48,.72);--card-solid:#141c30;--border:rgba(99,140,255,.14);--text:#e8edf9;--text2:#8fa0c8;--accent:#5b8cff;--accent-dark:#7aa5ff;--accent-light:rgba(91,140,255,.12);--mail:#5b8cff;--cal:#ff6b8a;--contact:#4ade80;--file:#c084fc;--wiki:#fbbf24;--git:#94a3b8;--todo:#2dd4bf;--tow:#22d3ee;--rail:linear-gradient(180deg,#0d1330 0%,#0a0f22 100%);--rail-hover:rgba(255,255,255,.08);--rail-active:rgba(91,140,255,.16);--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.45),0 24px 64px rgba(0,0,0,.5);--shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.4);--hover:rgba(91,140,255,.08);--danger:#ff6b8a;--danger-bg:rgba(255,107,138,.1);--ok:#4ade80;--warn:#fbbf24;--warn-bg:rgba(251,191,36,.12);--ok-bg:rgba(74,222,128,.12);--danger-dark:#ff8fa3;--panel2:rgba(91,140,255,.08);--line:rgba(255,255,255,.12);--warn-strong:#ffa94d;--accent-2:#a78bfa;--hl:#ffd43b;--muted-strong:#9aa7bf;--nc-brand:#4dabf7;--grad-primary:linear-gradient(135deg,#5b8cff,#7a5cff);--grad-aiuser:linear-gradient(135deg,#4a7dff,#6a5cff);--grad-greeting:linear-gradient(90deg,#e8edf9,#9db8ff)}
html[data-theme="dark"] body{background:radial-gradient(1200px 800px at 15% -10%,rgba(91,140,255,.12),transparent 60%),radial-gradient(1000px 700px at 110% 110%,rgba(34,211,238,.08),transparent 55%),var(--bg)}
html[data-theme="dark"] .rail{box-shadow:1px 0 24px rgba(0,0,0,.5)}
html[data-theme="dark"] .rail button.active{box-shadow:inset 0 0 0 1px rgba(91,140,255,.35),0 0 14px rgba(91,140,255,.25)}
html[data-theme="dark"] .ai-card,html[data-theme="dark"] .mod-card,html[data-theme="dark"] .feed-card,html[data-theme="dark"] .agenda-card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(99,140,255,.18)}
html[data-theme="dark"] .ai-card{box-shadow:0 0 0 1px rgba(91,140,255,.15),0 8px 32px rgba(0,0,0,.45),0 0 42px rgba(91,140,255,.08)}
html[data-theme="dark"] .ai-chip{background:rgba(91,140,255,.06)}
html[data-theme="dark"] .ai-chip:hover{background:rgba(91,140,255,.14);box-shadow:0 0 14px rgba(91,140,255,.2)}
html[data-theme="dark"] .ai-input{background:rgba(10,14,28,.7);border-color:rgba(99,140,255,.2)}
html[data-theme="dark"] .ai-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,140,255,.12)}
html[data-theme="dark"] .ai-user{background:var(--grad-aiuser);box-shadow:0 4px 16px rgba(91,140,255,.3)}
html[data-theme="dark"] .ai-bot{background:rgba(14,20,40,.6)}
html[data-theme="dark"] .header{backdrop-filter:blur(14px);border-color:rgba(99,140,255,.12)}
html[data-theme="blau"]{--bg:#f0f4fa;--card:#ffffff;--border:#d6e0ee;--text:#0f2a4a;--text2:#50688a;--accent:#0b6bcb;--accent-dark:#0959ad;--accent-light:#ddeaf9;--mail:#0b6bcb;--cal:#a4262c;--contact:#107c10;--file:#5c2d91;--wiki:#7f4f24;--git:#3a3a3a;--todo:#038387;--rail:#0f3a6b;--rail-hover:rgba(255,255,255,.16);--rail-active:#0a2b50;--shadow:0 1px 2px rgba(13,45,90,.08),0 4px 14px rgba(13,45,90,.1),0 16px 44px rgba(13,45,90,.08);--shadow-sm:0 1px 2px rgba(13,45,90,.08),0 3px 10px rgba(13,45,90,.08);--hover:#e9f0fa;--danger:#a4262c;--danger-bg:#fde7e9;--ok:#0f7b0f}
html[data-theme="kontrast"]{--bg:#ffffff;--card:#ffffff;--border:#000000;--text:#000000;--text2:#1a1a1a;--accent:#0000cc;--accent-dark:#000099;--accent-light:#e6e6ff;--talk:#004d4d;--ai:#4b0082;--search:#006666;--mail:#0000cc;--cal:#990000;--contact:#006600;--file:#4b0082;--wiki:#663300;--git:#000000;--todo:#004d4d;--rail:#000000;--rail-hover:#333333;--rail-active:#1a1a1a;--shadow:none;--shadow-sm:none;--hover:#f2f2f2;--danger:#cc0000;--danger-bg:#ffe6e6;--ok:#006600}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);min-height:100vh}
.rail{position:fixed;left:0;top:0;bottom:0;width:76px;background:var(--rail);display:flex;flex-direction:column;align-items:center;padding:14px 0;z-index:var(--z-rail)}
/* Kap. 306 (#94): alte Kachel-Masse entfernt — das Logo ist jetzt ein Haus-Symbol
   (Lucide) und wird in ui-2026.css gestaltet. Diese Zeile bleibt nur als
   Grundausrichtung, damit aeltere Themes nichts ueberdecken. */
.rail .logo{display:flex;align-items:center;justify-content:center;margin-bottom:14px;cursor:pointer;}
.rail button{width:46px;height:46px;border:none;background:transparent;color:var(--rail-fg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--tr),color var(--tr),transform var(--dur-1) ease;position:relative}
.rail button:hover{background:var(--rail-hover);transform:translateY(-1px)}
.rail button.active{background:var(--rail-active);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.rail .spacer{flex:1}
.rail .sep{width:32px;height:1px;background:rgba(255,255,255,.25);margin:8px 0}
.rail .sep.rail-cluster{width:20px;margin:9px 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}
.rail .badge{position:absolute;top:5px;right:5px;min-width:17px;height:17px;border-radius:var(--radius-pill);color:#fff;font-size:11px;line-height:17px;text-align:center;padding:0 5px}
.rail i{width:21px;height:21px}
.header{position:fixed;left:76px;right:0;top:0;height:58px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;z-index:var(--z-header);gap:12px;/* Issue #7: Inhalt des Kopfes endet auf derselben Kante wie .main.
   .main hat real KEINE Breitenbegrenzung (`.main:has(.sec.show){max-width:none}`); rechts
   begrenzt nur die Messenger-Leiste (62px zugeklappt / 230px offen). Genau die spiegelt
   der Kopf jetzt: gleiches Polster links, gleicher Abstand rechts (siehe Regeln darunter). */
padding-left:28px;padding-right:calc(62px + 28px)}
/* Issue #7: Kopf folgt der Messenger-Leiste genau wie .main */
body:not(.msgr-collapsed) .header{padding-right:calc(230px + 28px)}
body.msgr-pinned .header{padding-right:calc(230px + 28px)}
.header h1{font-size:18px;font-weight:600;display:flex;align-items:center;gap:11px;flex-shrink:0}
.header .h-ico{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff}
.header .h-ico i{width:16px;height:16px}
.search{flex:1;max-width:480px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:7px 14px;margin:0 12px;transition:border var(--dur-2);position:relative}
.search-preview{position:absolute;top:42px;left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:var(--z-search);overflow:hidden;max-height:70vh;overflow-y:auto}
.sp-group{padding:6px 0}
.sp-head{display:flex;align-items:center;gap:7px;padding:6px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);border-bottom:1px solid var(--border)}
.sp-item{display:flex;gap:10px;padding:7px 14px;cursor:pointer;align-items:center}
.sp-item:hover{background:var(--hover)}
.sp-item .sp-t{font-size:13px;font-weight:600;line-height:1.3}
.sp-item .sp-s{font-size:11.5px;color:var(--text2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.sp-item .sp-p{font-size:11px;color:var(--text2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:280px;line-height:1.4}
.sp-item .sp-i{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.sp-all{padding:9px 14px;text-align:center;font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer;border-top:1px solid var(--border)}
.sp-all:hover{background:var(--hover)}
.sp-none{padding:16px 14px;text-align:center;color:var(--text2);font-size:12.5px}
.ds-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:16px}
.ds-row{display:flex;gap:10px}
.ds-input-wrap{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:8px 16px;flex:1;transition:border var(--dur-2)}
.ds-input-wrap:focus-within{border-color:var(--accent);background:var(--card)}
.ds-input-wrap i{width:16px;height:16px;color:var(--text2);flex-shrink:0}
.ds-input-wrap input{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--text)}
.ds-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.ds-fhead{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px}
.ds-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text);opacity:.75;user-select:none}
.ds-chip.active{opacity:1;border-color:var(--accent);background:var(--accent-light);color:var(--accent)}
.ds-chip .ds-cnt{background:rgba(127,127,127,.18);border-radius:999px;padding:0 6px;font-size:10.5px;font-weight:700;min-width:16px;text-align:center}
.ds-chip.active .ds-cnt{background:var(--accent);color:#fff}
.ds-engine{margin-left:auto;font-size:11px;font-weight:600;color:var(--text2);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:4px 11px;white-space:nowrap}
.ds-more{text-align:center;padding:6px 0 2px}
.ds-chip input{display:none}
.ds-select{border:1px solid var(--border);border-radius:999px;padding:5px 12px;background:var(--card);color:var(--text);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer}
.ds-group{margin-bottom:18px}
.ds-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.ds-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text);opacity:.75;transition:all var(--dur-1) ease;font-family:inherit}
.ds-tab.active{opacity:1;border-color:var(--accent);background:var(--accent-light);color:var(--accent)}
.ds-tab .mc{background:rgba(127,127,127,.18);border-radius:999px;padding:0 7px;font-size:10.5px;font-weight:700;min-width:16px;text-align:center}
.ds-tab.active .mc{background:var(--accent);color:#fff}
.ds-tab:hover{opacity:1}
.ds-group-head{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;padding:8px 2px;border-bottom:1px solid var(--border);margin-bottom:4px;border-radius:8px}
.ds-group-head.clk{cursor:pointer;user-select:none;transition:background var(--dur-1) ease;margin:0 -6px;padding:8px}
.ds-group-head.clk:hover{background:var(--hover)}
.ds-group-head.clk:hover .mc{background:var(--accent);color:#fff}
.ds-group-head .mc{background:var(--accent-light);color:var(--accent);border-radius:999px;padding:1px 9px;font-size:11.5px}
.ds-res{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:6px}
.ds-res .mod-item{padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer}
.ds-res .mod-item:last-child{border-bottom:none}
.ds-res .mod-item:hover{background:var(--hover)}
.ds-empty{padding:26px;text-align:center;color:var(--text2);font-size:13.5px}
.chat-app{display:grid;grid-template-columns:290px 1fr;gap:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;height:var(--app-h,calc(100vh - 150px));min-height:480px}
.chat-side{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.chat-side-h{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text2)}
.presence-pill{margin-left:auto;background:var(--ok-bg);color:var(--ok);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:700}
.chat-rooms{overflow-y:auto;min-height:0;flex:1}
.chat-room{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;border-left:3px solid transparent}
.chat-room:hover{background:var(--hover)}
.chat-room.active{background:var(--accent-light);border-left-color:var(--accent)}
.chat-room .av{width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex:none}
.chat-room .cr-t{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.chat-room .cr-u{font-size:11px;color:var(--text2);flex:none}
.chat-room .cr-u.has{color:var(--accent);font-weight:700}
.chat-people{overflow-y:auto;max-height:160px;padding:2px 0}
.chat-person{display:flex;align-items:center;gap:9px;padding:5px 14px;font-size:12.5px}
.chat-person .pd{width:9px;height:9px;border-radius:50%;background:var(--text2);flex:none}
.chat-person .pd.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.chat-person .pd.call{background:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.chat-main{display:flex;flex-direction:column;min-height:0}
.chat-head{padding:10px 16px;font-weight:700;font-size:14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chat-head .lnk{margin-left:auto;font-size:12px;color:var(--accent);text-decoration:none;font-weight:600}
.chat-head .hbtns{display:flex;gap:6px;margin-left:auto}
.chat-head .hbtn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:5px 10px;cursor:pointer;transition:background var(--tr)}
.chat-head .hbtn:hover{background:var(--hover)}
.chat-head .hbtn.danger{color:var(--danger)}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-height:0}
.chat-msg{display:flex;gap:9px;padding:6px 0;max-width:85%}
.chat-msg.me{align-self:flex-end;flex-direction:row-reverse}
.chat-msg .av{width:27px;height:27px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.chat-msg .cm-b{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:7px 11px}
.chat-msg.me .cm-b{background:var(--accent-light);border-color:var(--accent)}
.chat-msg .cm-h{font-size:11px;color:var(--text2);margin-bottom:2px}
.chat-msg.me .cm-h{text-align:right}
.chat-msg .cm-t{font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.chat-day{text-align:center;font-size:10.5px;color:var(--text2);background:var(--hover);border-radius:10px;padding:3px 10px;align-self:center;margin:6px 0 2px}
.chat-file{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:inherit;text-decoration:none;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:7px 11px;margin:2px 0}
.chat-file i{width:15px;height:15px;flex-shrink:0;color:var(--accent)}
.chat-file small{font-weight:400;opacity:.7}
.chat-msg.me .chat-file{background:var(--accent);border-color:var(--accent);color:#fff}
.chat-reacts{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
.cr-chip{font-size:11px;background:var(--hover);border:1px solid var(--border);border-radius:10px;padding:1px 7px;cursor:default}
.chat-msg.me .cr-chip{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.25)}
.cr-chip.own,.mr-chip.own{background:var(--accent-light);border-color:var(--accent);font-weight:700}
.chat-msg.me .cr-chip.own{background:var(--accent);border-color:#fff}
.cm-react,.msg-react{position:absolute;top:-10px;right:8px;z-index:var(--z-base-5)}
.chat-msg .cm-b,.msg{position:relative}
.react-bar{display:none;position:absolute;top:100%;right:0;z-index:var(--z-react);background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 4px 16px rgba(0,0,0,.16);padding:3px 6px;gap:2px;align-items:center}
.rb-btn{border:none;background:none;font-size:16px;padding:2px 4px;border-radius:50%;cursor:pointer;line-height:1;transition:transform var(--tr)}
.rb-btn:hover{transform:scale(1.3);background:var(--hover)}
.rr-btn{background:var(--card);border:1px solid var(--border);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);box-shadow:0 2px 6px var(--line);opacity:0;transition:opacity var(--tr)}
/* Kap. 10.4 (Manual): „Zeilenaktionen: Immer im Tab-Baum, auch wenn unsichtbar.
   Hover ist Anzeige, nicht Zugang." Vorher war der Antwort-Knopf opazitaet 0 und
   wurde NUR per :hover sichtbar — mit Tab erreichte man ihn, ohne ihn zu sehen.
   :focus-within macht ihn zugaenglich, @media(hover:none) dauerhaft sichtbar. */
.chat-msg:hover .rr-btn,.msg:hover .rr-btn,
.chat-msg:focus-within .rr-btn,.msg:focus-within .rr-btn{opacity:1}
@media(hover:none){
  .rr-btn{opacity:.55}
}
.rr-btn:hover{color:var(--accent)}
/* Gitea-Issue #68 (Frontend): Werkzeuge an einer Chat-Nachricht — Antworten für
   alle, Bearbeiten/Löschen nur bei eigenen. Sie erscheinen zusammen mit der
   Reaktionsleiste beim Überfahren (ruhig im Normalzustand). */
.msg-tools{display:none;align-items:center;gap:2px;margin-left:4px}
.mt-btn{background:var(--card);border:1px solid var(--border);border-radius:6px;
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text2);padding:0}
.mt-btn:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.mt-btn.danger:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}
.mt-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
/* Antwort-Streifen über dem Eingabefeld: zeigt, wem man antwortet */
.msg-antwort{flex:none;padding:0 8px}
.chat-antwort{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text2);
  padding:6px 8px;border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,var(--card));border-radius:0 7px 7px 0}
.chat-antwort .ca-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-antwort .ca-txt b{color:var(--text)}
.chat-antwort .ca-x{border:none;background:transparent;color:var(--text2);cursor:pointer;
  font-size:12px;line-height:1;padding:2px 4px;border-radius:4px}
.chat-antwort .ca-x:hover{background:var(--hover);color:var(--danger)}
/* „Ältere laden" — sitzt oben im Verlauf, dezent bis zum Überfahren */
.msg-mehr{display:block;margin:2px auto 8px;border:1px solid var(--border);
  background:var(--card);color:var(--text2);font-family:inherit;font-size:11px;
  font-weight:600;padding:3px 12px;border-radius:999px;cursor:pointer}
.msg-mehr:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.msg-mehr:disabled{opacity:.6;cursor:default}
/* Messenger-Name-Dropdown (Facebook-Stil) */
.msg-win .nm{cursor:pointer;display:flex;align-items:center;gap:3px}
.msg-win .nm:hover{color:var(--accent)}
.msgr-name-menu{position:absolute;top:44px;left:10px;z-index:var(--z-msgr-name);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:10px;min-width:190px;animation:msgIn var(--dur-2) ease}
.mm-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.mm-colors{display:flex;flex-wrap:wrap;gap:6px}
.msc-btn{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform var(--tr)}
.msc-btn:hover{transform:scale(1.2)}
.msc-btn.sel{border-color:var(--text);box-shadow:0 0 0 2px var(--card) inset}
.mm-sep{height:1px;background:var(--border);margin:9px 0}
.mm-item{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 8px;border-radius:8px;cursor:pointer}
.mm-item:hover{background:var(--hover)}
.mm-item.disabled{opacity:.45;cursor:default}
.mm-item.disabled:hover{background:none}
.msg-win[data-color] .msg.me{background:var(--mw-color, var(--accent));border-color:var(--mw-color, var(--accent))}
.msg-win[data-color] .msg.me .mr-chip{background:rgba(255,255,255,.2)}
/* Gitea-Issue #70 (Kap. 316): Der Picker ist jetzt ein Raster mit Kategorien.
   Früher stand hier `display:flex;flex-wrap:wrap;max-width:260px` — damit lief
   die Emoji-Liste einspaltig (gemessen: Rasterbreite nur 218px, ein Emoji je
   Zeile). Breite und Grid werden deshalb hier fest gesetzt. */
.emoji-picker{position:absolute;bottom:56px;left:10px;z-index:var(--z-header-pop);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 -6px 24px rgba(0,0,0,.18),0 4px 16px var(--line);padding:0;display:flex;flex-direction:column;width:322px;max-width:322px;max-height:340px;overflow:hidden}
.ep-btn{border:none;background:none;font-size:19px;padding:4px;border-radius:7px;cursor:pointer;line-height:1;transition:background var(--tr)}
.ep-btn:hover{background:var(--hover);transform:scale(1.15)}
.chat-app{position:relative}
.msg-win{position:relative}
.msg-win .emoji-picker{bottom:58px;left:8px}
.chat-input{display:flex;gap:9px;padding:10px 14px;border-top:1px solid var(--border)}
.chat-input input{flex:1;border:1px solid var(--border);border-radius:20px;padding:8px 14px;background:var(--bg);color:var(--text);font-size:13.5px;outline:none}
.chat-input input:focus{border-color:var(--accent)}
.chat-new{padding:8px 12px 4px}
.chat-new button{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:7px;border:1px dashed var(--border);border-radius:var(--radius);background:none;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;transition:background var(--tr),border-color var(--tr)}
.chat-new button:hover{background:var(--accent-light);border-color:var(--accent)}
.set-grid{max-width:640px;display:flex;flex-direction:column;gap:14px}
.set-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.set-grid2{grid-template-columns:1fr}}
.set-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.set-head{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;margin-bottom:8px}
.set-txt{font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:10px}
.set-form{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.set-lbl{margin-top:6px}
.set-inp{border:1px solid var(--border);border-radius:8px;padding:8px 11px;background:var(--bg);color:var(--text);font-size:13.5px;outline:none;font-family:inherit;transition:border-color var(--tr)}
.set-row{display:flex;gap:8px;margin-top:12px}
.set-msg{font-size:12.5px;margin-top:10px;line-height:1.5}
.pref-tiles{display:flex;gap:8px;flex-wrap:wrap}
.set-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px;flex-wrap:wrap}
.set-tab{display:inline-flex;align-items:center;gap:7px;background:none;border:none;border-bottom:2px solid transparent;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--text2);cursor:pointer;font-family:inherit}
.set-tab:hover{color:var(--text)}
.set-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.set-pane{display:none}
.set-pane.active{display:block}
/* Groupware-Konten-Kacheln */
.gw-acc{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow-sm);transition:border-color var(--tr),box-shadow var(--tr)}
.gw-acc.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.gw-acc-av{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex:none}
.gw-acc-info{flex:1;min-width:0}
.gw-acc-name{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.gw-acc-host{font-size:11.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-acc-badge{font-size:10.5px;font-weight:700;color:var(--accent);background:var(--accent-light);border-radius:var(--radius-pill);padding:1px 7px;letter-spacing:.3px}
.gw-acc-actions{display:flex;align-items:center;gap:6px;flex:none}
/* Schiebe-Toggle */
.gw-toggle{position:relative;width:40px;height:22px;border-radius:999px;background:var(--border);cursor:pointer;border:none;transition:background var(--tr);flex:none}
.gw-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left var(--tr)}
.gw-toggle.on{background:var(--accent)}
.gw-toggle.on::after{left:20px}
/* Dropdown-Menü (Kachel-Settings) */
.gw-acc-menu{position:relative}
.gw-acc-menu .gw-menu{position:absolute;right:0;top:100%;z-index:var(--z-suggest);min-width:200px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 36px rgba(0,0,0,.22);padding:4px;display:none}
.gw-acc-menu .gw-menu.open{display:block}
.gw-menu-it{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:12.5px;color:var(--text)}
.gw-menu-it:hover{background:var(--hover)}
.gw-menu-it.danger{color:var(--danger)}
.gw-menu-it svg{width:14px;height:14px;flex:none}
/* Index-Status graphisch */
.gw-index{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);margin-top:10px}
.gw-index-ring{position:relative;width:52px;height:52px;flex:none}
.gw-index-ring svg{transform:rotate(-90deg)}
.gw-index-ring .ring-bg{stroke:var(--border)}
.gw-index-ring .ring-fg{stroke:var(--accent);transition:stroke-dashoffset var(--dur-4) ease}
.gw-index-ring .ring-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text)}
.gw-index-info{flex:1;min-width:0}
.gw-index-title{font-size:13px;font-weight:700;color:var(--text)}
.gw-index-sub{font-size:11.5px;color:var(--text2);margin-top:2px}
.gw-index-status{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;flex:none}
.gw-index-status.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.gw-index-status.warn{color:var(--warn-strong);background:color-mix(in srgb,var(--warn-strong) 12%,transparent)}
.gw-index-status.err{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.gw-index-status.run{color:var(--accent);background:var(--accent-light)}
.gw-index-bar{height:6px;border-radius:999px;background:var(--border);overflow:hidden;margin-top:6px}
.gw-index-bar .fill{height:100%;background:var(--accent);border-radius:999px;transition:width var(--dur-4) ease}
@keyframes gwSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.theme-dot{display:inline-block;width:15px;height:15px;border-radius:50%;margin-right:1px;vertical-align:-2px}
.search:focus-within{border-color:var(--accent);background:var(--card)}
.search i{width:15px;height:15px;color:var(--text2);flex-shrink:0}
.search input{flex:1;border:none;outline:none;background:transparent;font-size:13.5px;color:var(--text)}
.search input::placeholder{color:var(--text2)}
.header .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.header .iconbtn{background:none;border:1px solid var(--border);border-radius:9px;width:36px;height:36px;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--tr)}
.bell-wrap{position:relative}
.bell-badge{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--card)}
.bell-panel{position:absolute;right:0;top:38px;width:380px;max-width:90vw;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:var(--z-pop);overflow:hidden}
.bell-head{padding:12px 16px;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--border)}
/* Gitea-Issue #79: Zwei Werkzeuge im Glocken-Kopf (Einstellungen, Alle löschen).
   Dezent gehalten — sie stehen neben der Überschrift, nicht als eigene Buttons. */
.bell-head{display:flex;align-items:center;gap:6px}
.bell-head{padding-right:12px}
/* white-space:nowrap ist hier PFLICHT — sonst bricht „Alle löschen" in zwei
   Zeilen um und schiebt den Kopf auseinander (live gesehen). */
.bell-tool{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;white-space:nowrap;
  border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text2);
  font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:color var(--dur-2) ease,border-color var(--dur-2) ease}
.bell-tool + .bell-tool{margin-left:0}
.bell-tool:hover{color:var(--accent);border-color:var(--accent)}
.bell-tool:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.bell-tool svg{width:13px;height:13px;flex:none}
/* Einstellungsansicht in der Glocke */
.bell-set{padding:12px 14px 14px}
.bell-set-h{font-size:13px;font-weight:650;color:var(--text)}
.bell-set-sub{font-size:11.5px;color:var(--text2);margin:3px 0 10px;line-height:1.45}
.bell-set-list{display:flex;flex-direction:column;gap:2px}
.bell-set-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-sm);
  cursor:pointer;transition:background var(--dur-1) ease}
.bell-set-row:hover{background:var(--hover)}
.bell-set-row.aus{opacity:.55}
.bell-set-row input{width:15px;height:15px;flex:none;accent-color:var(--accent);cursor:pointer}
.bell-set-i{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;
  justify-content:center;color:#fff;flex:none}
.bell-set-i svg{width:13px;height:13px}
.bell-set-t{flex:1;min-width:0;font-size:12.5px;font-weight:600}
.bell-set-n{flex:none;font-size:11px;color:var(--text2)}
.bell-set-foot{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--border)}
.bell-set-hint{flex:1;min-width:0;font-size:11px;color:var(--text2)}
.bell-set-foot .bell-tool{margin-left:auto}
.bell-list{max-height:430px;overflow-y:auto}
.bell-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start}
.bell-item:last-child{border-bottom:none}
.bell-item:hover{background:var(--hover)}
.bell-item .bi{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.bell-item .bt{font-size:13px;font-weight:600;line-height:1.35}
.bell-item .bt-tag{display:inline-block;font-size:10.5px;font-weight:700;color:#fff;border-radius:4px;padding:1px 5px;margin-right:6px;vertical-align:1px;text-transform:uppercase;letter-spacing:.3px}
.bell-item .bell-x{flex:none;width:20px;height:20px;border:none;background:transparent;color:var(--text2);border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.55;margin-left:auto}
.bell-item .bell-x:hover{opacity:1;background:var(--danger-bg);color:var(--danger)}
.bell-item .bs{font-size:12px;color:var(--text2);line-height:1.4;margin-top:1px}
.bell-item .btm{font-size:11px;color:var(--text2);margin-top:2px}
.header .iconbtn:hover{background:var(--hover)}
.header .user{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer;position:relative;padding:6px 8px;border-radius:9px;transition:background var(--tr)}
.header .user:hover{background:var(--hover)}
.header .avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.header .avatar-wrap{position:relative;display:flex}
.av-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--card);background:var(--text2);opacity:.5}
.av-dot.on{background:var(--ok);opacity:1}
.av-dot.away{background:var(--presence-away);opacity:1}
.av-dot.call{background:var(--danger);opacity:1}
.av-dot.inv{background:var(--text2);opacity:.35}
.av-dot.off{background:var(--text2);opacity:.4}
.user-drop{position:absolute;top:calc(100% + 8px);right:0;min-width:250px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);z-index:var(--z-header-pop);padding:8px;animation:modalIn .16s ease}
.ud-head{display:flex;align-items:center;gap:12px;padding:8px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.ud-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);transition:background var(--tr)}
.ud-item:hover{background:var(--hover)}
.ud-item.danger{color:var(--danger-text)}
.ud-item.danger:hover{background:rgba(197,15,31,.08)}
.ud-sep{height:1px;background:var(--border);margin:5px 0}
/* Eigener Status im User-Dropdown */
.ud-status{padding:8px 12px}
.ud-st-title{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;margin-bottom:7px;color:var(--text2)}
.ud-st-dot{width:9px;height:9px;border-radius:50%;background:var(--text2);opacity:.4;flex-shrink:0;display:inline-block}
.ud-st-dot.on{background:var(--ok);opacity:1}
.ud-st-dot.away{background:var(--presence-away);opacity:1}
.ud-st-dot.call{background:var(--danger);opacity:1}
.ud-st-dot.inv{background:var(--text2);opacity:.35}
.ud-st-dot.off{background:var(--text2);opacity:.4}
.ud-st-options{display:flex;flex-direction:column;gap:2px}
.ud-st-btn{display:flex;align-items:center;gap:8px;padding:6px 8px;border:none;background:none;border-radius:8px;cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--text);text-align:left}
.ud-st-btn:hover{background:var(--hover)}
.ud-st-btn.sel{background:var(--accent-light);color:var(--accent);font-weight:600}
/* ===========================================================================
   Kap. 7.4 (Manual) — Navigationsstufe fuer kleine Breiten. Wortlaut:

     | < 768 px | Rail wird untere Leiste mit den vier Kern-Apps + „Mehr";
     | Ribbon wird Befehlsleiste mit 44-px-Zielen; Listenaktionen dauerhaft
     | sichtbar (kein Hover verfuegbar)
     „Die Rail verschwindet nie ganz. Sie ist das Produkt."

   Diese Stufe fehlte im Produkt vollstaendig. Gemessen bei 320 px vorher:
   die Rail blieb eine feste 76-px-Spalte links, .header und .main rechneten
   weiter mit 76 px Abstand — der Inhalt hatte damit weniger Breite als seine
   Mindestbreite und die SEITE scrollte waagerecht (Aufgaben 96 px, Dateien
   75 px, Kalender 62 px Ueberlauf; Kap. 12.4 Punkt 6 verlangt 0).

   Warum die Leiste selbst waagerecht scrollen darf, die Seite aber nicht: die
   Leiste ist ein BEDIENELEMENT mit fester Zielgroesse (44 px nach Kap. 7.4),
   kein Inhaltsfluss. Ihre Breite haengt an der Zahl der Befehle, nicht am
   Fenster. Die Seite darf dagegen nie seitlich wandern — sonst verliert der
   Nutzer die Kopfzeile aus dem Blick.

   Die Auswahl „vier Kern-Apps + Mehr" ist Navigation (Kap. 13.2: Produkt-
   leitung) und gehoert zu Phase 5; hier steht die Stufe selbst. */
@media(max-width:767px){
  .rail{left:0;right:0;top:auto;bottom:0;width:auto;height:58px;
    flex-direction:row;align-items:center;justify-content:flex-start;
    padding:0 8px;gap:2px;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    /* Trenner und Polster der Spalte gelten in der Reihe nicht */
    scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail button{width:44px;height:44px;flex:none}
  .rail i{width:20px;height:20px}
  .rail .logo{display:none}
  .rail .spacer{display:none}
  .rail .sep,.rail .sep.rail-cluster{width:1px;height:26px;flex:none;margin:0 4px}
  .rail .badge{top:3px;right:3px}
  /* Werkzeug-Knoepfe (Status/Doku/Einstellungen/Admin/Abmelden) ans rechte Ende */
  .rail button.rail-rechts{margin-left:auto}
  .rail button.rail-rechts ~ button.rail-rechts{margin-left:0}
  /* Kopf und Inhalt ruecken ueber die volle Breite.
     Die Kopfzeile darf waagerecht nicht scrollen — sie ist der Rahmen.
     (Die vier Bereiche mit Ueberlauf werden am DATEIENDE behandelt: eine
     Medienabfrage gibt keine Spezifitaet, und .cx-top, .ai-input-row,
     .docs-grid stehen weiter unten in dieser Datei — sie gewinnen sonst.
     Gemessen: genau das ist bei meinen ersten Versuchen passiert.) */
  .header{left:0;gap:8px;overflow-x:clip}
  .main{margin-left:0;padding-left:14px;padding-right:14px;padding-bottom:78px}
  /* Die Messenger-Leiste darf den Inhalt nicht seitlich wegdruecken.
     WICHTIG: die spaeteren Regeln `body.msgr-collapsed .main{margin-right:62px}`
     und `body:not(.msgr-collapsed) .main{margin-right:230px}` (Zeile ~542-545)
     haben dieselbe Spezifitaet plus ein body-Klassen-Attribut und stehen DA nach —
     sie gewinnen. Gemessen vorher: main war 172 px breit bei 320 px Fenster
     (76 px Rail + 62 px Leiste abgezogen), der Inhalt lief deshalb hinaus.
     Deshalb hier body davor und !important: auf schmalen Geräten gibt es keine
     Spalte, die Platz beanspruchen dürfte. */
  body .main, body.msgr-collapsed .main, body.msgr-pinned .main,
  body:not(.msgr-collapsed) .main{
    margin-left:0 !important; margin-right:0 !important;
    padding-left:14px; padding-right:14px; padding-bottom:78px;}
  /* Popovers der Rail oeffnen ueber der Leiste, nicht daneben */
  .rail-pop{bottom:66px}
}
.main{margin-left:76px;padding-top:66px;max-width:1440px;padding-left:28px;padding-right:28px;padding-bottom:44px}
/* Jede aktive App/Modul-Sektion nutzt die volle Browserbreite (kein 1440px-Cap) */
.main:has(.sec.show){max-width:none}
.sec{display:none}
.sec.show{display:block}
/* Kap. 300 (#104): Fuer die hoehengebundenen App-Sektionen wird der Rahmen zur
   Flex-Spalte — feste Leisten oben, der Rest scrollt in sich (siehe ui-2026.css). */
:is(#sec-contacts,#sec-todo,#sec-git,#sec-files,#sec-cal,#sec-notes).show{display:flex;flex-direction:column;min-height:0}

/* Start */
.greeting{margin:20px 0 6px}
.greeting h2{font-size:25px;font-weight:600}
.greeting p{color:var(--text2);font-size:13.5px;margin-top:4px}
.sum-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* Gitea-Issue #125 (Teil 3): Hub = TIEFER GREIFEN.
   Die Werkzeuge einer Terminzeile (Beitreten, Details, Duplizieren, Antwort)
   bleiben im Normalzustand ruhig und treten beim Überfahren hervor — die Zeile
   ist dann eine Handlungsfläche, nicht nur eine Anzeige. Auf Touchgeräten sind
   sie immer sichtbar (kein Hover vorhanden). */
.ag-item .ev-acts{display:inline-flex;align-items:center;gap:4px;flex:none}
.ag-item .ev-acts .ag-tool{opacity:.35;transition:opacity var(--dur-2) ease}
.ag-item:hover .ev-acts .ag-tool,
.ag-item:focus-within .ev-acts .ag-tool{opacity:1}
@media(hover:none){
  .ag-item .ev-acts .ag-tool{opacity:1}
}
/* Gitea-Issue #125 (Teil 2): Tagesüberblick = EINORDNEN.
   Fazit-Satz als ruhige Zusammenfassung, darunter 4 Stat-Kacheln. Jede Kachel
   trägt die Modulfarbe nur als Signal (nacktes Icon + Zähler), die Fläche bleibt
   neutral — so bleibt der Brief ein Text und wird keine Kachelwand. */
.brief-verdict{font-size:14px;font-weight:600;line-height:1.45;margin:2px 0 8px;
  padding-left:10px;border-left:3px solid var(--mod,var(--accent))}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.stat-grid{grid-template-columns:1fr}}
.stat{display:flex;flex-direction:column;gap:2px;padding:9px 10px;
  border:1px solid var(--border);border-radius:10px;background:var(--card);min-width:0}
.stat-kopf{display:flex;align-items:center;color:var(--mod,var(--accent))}
.stat-zahl{font-size:23px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px}
.stat-einheit{font-size:11.5px;font-weight:600;color:var(--text2)}
.stat-ord{font-size:11.5px;color:var(--text2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.stat .sacts{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.stat .sacts button{border:1px solid var(--border);background:transparent;
  color:var(--text);font-family:inherit;font-size:11px;font-weight:700;
  padding:0 8px;height:23px;border-radius:6px;cursor:pointer;white-space:nowrap}
.stat .sacts button:hover{background:var(--hover);
  border-color:color-mix(in srgb,var(--mod,var(--accent)) 45%,var(--border))}
.stat .sacts button.prim{background:color-mix(in srgb,var(--mod,var(--accent)) 12%,transparent);
  color:var(--mod,var(--accent));
  border-color:color-mix(in srgb,var(--mod,var(--accent)) 38%,var(--border))}
.stat .sacts button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
/* Gitea-Issue #125 (P1): Handlungszeile im Hero — „Zähler werden Quick-Actions".
   Je Chip: 4px-Streifen in der Modulfarbe links (Farbe = Signal), neutrale
   Fläche, 1px-Kante. Die Aktionen erscheinen beim Überfahren; auf Touchgeräten
   sind sie immer sichtbar (sonst wären sie unerreichbar). */
.actline{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.actline .chip{position:relative;display:inline-flex;align-items:center;gap:10px;
  min-height:34px;padding:0 10px 0 13px;border:1px solid var(--border);
  border-radius:9px;background:var(--card);overflow:hidden}
.actline .chip::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--chip,var(--accent))}
.actline .chip-txt{display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;white-space:nowrap}
.actline .chip-txt i{color:var(--chip,var(--accent))}
.actline .qa{display:inline-flex;gap:5px;align-items:center;
  max-width:0;opacity:0;overflow:hidden;transition:max-width var(--dur-2) ease,opacity var(--dur-2) ease}
.actline .chip:hover .qa,.actline .chip:focus-within .qa{max-width:340px;opacity:1}
.actline .qa button{border:1px solid var(--border);background:transparent;
  color:var(--text);font-family:inherit;font-size:11.5px;font-weight:700;
  padding:0 9px;height:24px;border-radius:6px;cursor:pointer;white-space:nowrap}
.actline .qa button:hover{background:var(--hover);border-color:color-mix(in srgb,var(--chip,var(--accent)) 45%,var(--border))}
.actline .qa button.prim{background:color-mix(in srgb,var(--chip,var(--accent)) 13%,transparent);
  color:var(--chip,var(--accent));border-color:color-mix(in srgb,var(--chip,var(--accent)) 40%,var(--border))}
.actline .qa button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
/* Touchgeräte: Aktionen immer sichtbar (kein Hover vorhanden) */
@media(hover:none){
  .actline .qa{max-width:340px;opacity:1}
  .actline .chip{flex-wrap:wrap;padding-top:6px;padding-bottom:6px;min-height:38px}
}
.sum-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text)}
.sum-chip:hover{background:var(--hover)}
.sum-chip i{width:13px;height:13px}
.announce{margin:0 0 18px}
.announce .box{display:flex;gap:12px;background:linear-gradient(90deg,var(--accent-light),transparent 70%);border:1px solid var(--border);border-radius:var(--radius);padding:14px 17px;cursor:pointer;text-decoration:none;color:var(--text);align-items:flex-start;transition:border-color var(--tr),transform var(--dur-1) ease}
.announce .box:hover{border-color:var(--accent);transform:translateY(-1px)}
.announce .ico{width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.announce .ico i{width:16px;height:16px}
.announce .t{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px}
.announce .p{font-size:13.5px;margin-top:3px;line-height:1.5;color:var(--text)}
.announce .d{font-size:11.5px;color:var(--text2);margin-top:3px}
.hub{display:grid;grid-template-columns:1fr 390px;gap:18px}
@media(max-width:1100px){.hub{grid-template-columns:1fr}}
.feed-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.feed-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);font-size:14.5px;font-weight:600}
.feed-h .feed-newmail{display:inline-flex;align-items:center;gap:5px;border:none;background:var(--accent);color:#fff;font-size:11.5px;font-weight:600;font-family:inherit;border-radius:7px;padding:4px 10px;cursor:pointer;transition:background var(--tr)}
.feed-h .feed-newmail:hover{background:var(--accent-dark)}
.feed-h i{width:17px;height:17px;color:var(--accent)}
.feed-b{padding:6px 0}
.feed-item{display:flex;gap:13px;padding:11px 18px;cursor:pointer;transition:background var(--tr);align-items:flex-start;text-decoration:none;color:var(--text)}
.feed-item:hover{background:var(--hover)}
.feed-item .fi{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;margin-top:2px}
.feed-item .fi-wrap{position:relative;flex-shrink:0;margin-top:2px;display:flex}
.feed-item .fi-wrap .pd{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;border:2px solid var(--card)}
.feed-item .fi-wrap .pd.on{background:var(--ok)}
.feed-item .fi-wrap .pd.off{background:var(--text2);opacity:.4}
.feed-item .fi-wrap .pd.call{background:var(--danger)}
.feed-item .fi i{width:16px;height:16px}
.feed-item .b{flex:1;min-width:0}
.feed-item .t1{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-item .t2{font-size:12.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.feed-item .t2 .fn{color:var(--text2);opacity:.8}
/* Feed ungelesen: Outlook-typisch schattiert + fett */
.feed-item.unread{background:rgba(11,107,203,.12)}
.feed-item.unread:hover{background:rgba(11,107,203,.16)}
.feed-item.unread .t1{font-weight:700;color:var(--text)}
.feed-item.unread .t2{font-weight:600;color:var(--text2)}
.feed-item .tm{font-size:11.5px;color:var(--text2);flex-shrink:0;padding-top:2px}
.feed-item .tag{display:inline-block;font-size:11px;font-weight:700;border-radius:3px;padding:1px 6px;margin-left:7px;vertical-align:1px;text-transform:uppercase;letter-spacing:.3px}
.feed-gap{padding:14px 18px;font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;background:var(--bg);border-top:1px solid var(--border)}
.feed-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 14px;border-top:1px solid var(--border)}
.feed-pager .pg{font-size:12px;color:var(--text2);font-weight:600}
.feed-pager button:disabled{opacity:.4;cursor:default}
/* Messenger (Facebook-Stil): rechte Seitenleiste + Chat-Popups von unten */
.msgr-side{position:fixed;top:64px;right:0;bottom:0;width:230px;background:var(--card);border-left:1px solid var(--border);z-index:var(--z-msgr);display:flex;flex-direction:column;transition:width var(--dur-3) ease,box-shadow var(--dur-3) ease;box-shadow:-2px 0 12px rgba(0,0,0,.06)}
/* Zugeklappt = schmale Leiste mit Avatar-Bubbles (nicht wegklappen) */
.msgr-side.collapsed{width:62px;box-shadow:-1px 0 8px rgba(0,0,0,.08)}
.msgr-side.pinned{box-shadow:-4px 0 20px rgba(0,0,0,.14)}
/* Layout: offene Sidebar (gepinnt ODER ungepinnt) rückt den Inhalt nach links,
   damit sie den Hintergrund nie überdeckt */
body.msgr-pinned .main{margin-right:230px}
body:not(.msgr-collapsed) .main{margin-right:230px}
/* Auch die schmale Avatar-Leiste (62px) braucht Platz — Content weicht aus */
body.msgr-collapsed .main{margin-right:62px}
body.msgr-pinned .msgr-side{box-shadow:-4px 0 20px var(--line)}
/* Zugeklappt: Kopf nur Icon, Suche aus, Liste = Avatare */
.msgr-side.collapsed .msgr-head{justify-content:center;padding:12px 8px}
.msgr-side.collapsed .msgr-title{font-size:0}
.msgr-side.collapsed .msgr-title i{width:16px;height:16px}
.msgr-side.collapsed .msgr-head-btns{display:none}
.msgr-side.collapsed .msgr-search{display:none}
.msgr-side.collapsed .msgr-list{padding:6px 4px}
.msgr-side.collapsed .msgr-person{padding:6px 4px;justify-content:center}
.msgr-side.collapsed .msgr-person .av{width:38px;height:38px;font-size:13px}
.msgr-side.collapsed .msgr-person .pd{width:11px;height:11px;right:-1px;bottom:-1px}
.msgr-side.collapsed .mp-txt{display:none}
.msgr-side.collapsed .msgr-list::-webkit-scrollbar{width:3px}
/* Detail-Modus: letzte Nachricht als dritte Zeile (Kap. 34) */
.msgr-person .mp-detail{font-size:10.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:130px}
.msgr-toggle.detail-on{background:var(--accent);color:#fff}
/* Hover-Cards: Rich Popover bei Drüberfahren (Kap. 34) */
.msgr-hover-card{position:fixed;z-index:var(--z-suggest);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:12px;width:240px;pointer-events:auto}
.msgr-hover-card .hc-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.msgr-hover-card .hc-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex:none}
.msgr-hover-card .hc-name{font-size:13px;font-weight:700;color:var(--text)}
.msgr-hover-card .hc-status{font-size:11px;color:var(--text2);margin-top:2px}
.msgr-hover-card .hc-unread{font-size:11.5px;font-weight:600;color:var(--err);margin-bottom:6px}
.msgr-hover-card .hc-lastmsg{font-size:11.5px;color:var(--text);background:var(--hover);border-radius:8px;padding:8px 10px;margin-bottom:8px;line-height:1.4}
.msgr-hover-card .hc-actions{display:flex;gap:6px;border-top:1px solid var(--border);padding-top:8px}
.msgr-hover-card .hc-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:11px;font-weight:600;font-family:inherit;border-radius:7px;padding:6px 8px;cursor:pointer;transition:all var(--dur-1)}
.msgr-hover-card .hc-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Chat-Popups: starten rechts neben der schmalen Leiste, wenn zugeklappt */
.msgr-popups{transition:right var(--dur-3) ease}
body.msgr-collapsed .msgr-popups{right:78px}
.msgr-reopen{position:fixed;top:74px;right:0;z-index:var(--z-msgr-btn);width:38px;height:38px;border-radius:10px 0 0 10px;border:1px solid var(--border);border-right:none;background:var(--card);color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:-2px 2px 10px var(--line);transition:background var(--tr)}
.msgr-reopen:hover{background:var(--hover)}
.msgr-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.msgr-head-btns{display:flex;gap:2px}
.msgr-toggle.pin-on{color:var(--accent)}
.msgr-toggle.pin-on i{fill:var(--accent)}
.msgr-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.msgr-toggle{background:none;border:none;cursor:pointer;color:var(--text2);padding:4px;border-radius:6px;display:flex}
.msgr-toggle:hover{background:var(--hover)}
.msgr-search{padding:10px 12px;border-bottom:1px solid var(--border)}
.msgr-search-wrap{position:relative;display:flex;align-items:center}
.msgr-search-wrap input{padding-right:26px}
.msgr-search-x{position:absolute;right:5px;border:none;background:none;cursor:pointer;color:var(--text2);padding:3px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.msgr-search-x:hover{background:var(--hover);color:var(--danger)}
.msgr-list{flex:1;overflow-y:auto;padding:6px}
.msgr-person{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;text-align:left;transition:background var(--tr)}.msgr-person:hover{background:var(--hover)}
.msgr-person .av{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;position:relative}
/* Gitea-Issue #111: Punkt sauber am Kreisrand (9 px, 1,5 px Ring). Er ragt
   bewusst leicht ueber den Avatar — das ist die gewohnte Anzeige; sichtbar bleibt
   er, weil der Kreis nicht mehr beschnitten wird. */
.msgr-person .pd{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--card);z-index:2}
/* Namen bekamen zu wenig Platz (gemessen: 163 px Text in 131 px). Der Textbereich
   waechst jetzt, und die Zeile gibt ihm mehr Raum (knappere Polster/Luecke). */
.msgr-person{gap:9px;padding:7px 9px}
.msgr-person .mp-txt{min-width:0;flex:1}
.msgr-person .mp-txt .nm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Der Anruf-Knopf erscheint erst beim Ueberfahren — er darf den Namen nicht
   wegdruecken, deshalb liegt er ueber der Zeile statt daneben. */
.msgr-person .mp-anruf{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  background:var(--card);border-radius:50%;padding:2px}
/* Ungelesen-Badge am Avatar (rot, wie in Chats üblich) */
.msgr-person .av-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:999px;background:var(--badge-unread);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* Facebook-artiges Nachrichten-Popup von unten rechts */
.msgr-popup{width:280px;background:var(--card);border:1px solid var(--border);border-radius:12px 12px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.32),0 -2px 10px rgba(0,0,0,.18);display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;animation:msgIn var(--dur-3) ease;border-bottom:none}
.msgr-popup:hover{background:var(--hover)}
.msgr-popup .mp-av{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.msgr-popup .mp-body{flex:1;min-width:0}
.msgr-popup .mp-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgr-popup .mp-msg{font-size:11.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgr-popup .mp-x{flex:none;color:var(--text2);font-size:12px;padding:3px;border-radius:6px}
.msgr-popup .mp-x:hover{background:rgba(127,127,127,.15);color:var(--text)}
.msgr-person .pd.on{background:var(--ok)}
.msgr-person .pd.off{background:var(--text2);opacity:.4}
.msgr-person .pd.call{background:var(--danger)}
.msgr-person .nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm-row{display:flex;align-items:center;gap:6px;min-width:0}
.nm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.nm-dot.on{background:var(--ok)}
.nm-dot.off{background:var(--text2);opacity:.4}
.nm-dot.call{background:var(--danger)}
.msgr-person .st{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.msgr-popups{position:fixed;right:16px;bottom:0;z-index:var(--z-msgr-pop);display:flex;align-items:flex-end;gap:10px}
.msg-win{width:300px;height:420px;background:var(--card);border:1px solid var(--border);border-radius:12px 12px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.32),0 -2px 10px rgba(0,0,0,.18);display:flex;flex-direction:column;overflow:hidden;animation:msgIn var(--dur-3) ease}
.msg-win.minimized{height:40px}
@keyframes msgIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.msg-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--hover);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;flex-shrink:0}
.msg-head .av{width:26px;height:26px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.msg-head .av-wrap{position:relative;display:flex;flex-shrink:0}
.msg-head .av-wrap .pd{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;border:2px solid var(--hover)}
.msg-head .av-wrap .pd.on{background:var(--ok)}
.msg-head .av-wrap .pd.off{background:var(--text2);opacity:.4}
.msg-head .av-wrap .pd.call{background:var(--danger)}
.msg-head .nm{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:flex;align-items:center;gap:3px;padding:3px 6px;border-radius:6px;max-width:150px;flex-shrink:0}
.msg-head .nm:hover{background:rgba(0,0,0,.06);color:var(--accent)}
.msg-head .nm-space{flex:1;min-width:0;height:100%}
.msg-head .hd{padding:3px;border-radius:6px;border:none;background:none;cursor:pointer;color:var(--text2);display:flex}
.msg-head .hd:hover{background:var(--border)}
.msg-body{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
/* Gitea-Issue #68: Nachrichten-Suche im Chat. Panel sitzt zwischen Verlauf und
   Eingabezeile — der Verlauf bleibt sichtbar, die Suche tritt nicht an seine
   Stelle. Farben nur über Theme-Variablen (hell/dunkel). */
.chat-suche{flex:none;border-top:1px solid var(--border);background:var(--card);max-height:44%}
.chat-suche-kopf{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--border);color:var(--muted)}
.chat-suche-kopf input{flex:1;border:none;background:transparent;color:var(--text);font-size:12.5px;outline:none}
.chat-suche-kopf input::placeholder{color:var(--muted)}
.cs-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;
  border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:5px}
.cs-x:hover{background:var(--hover);color:var(--text)}
.chat-suche-treffer{overflow-y:auto;max-height:180px;padding:4px}
.cs-hinweis{padding:8px;font-size:12px;color:var(--muted)}
.cs-anz{padding:4px 8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.cs-treffer{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:5px 8px;
  border:none;background:transparent;cursor:pointer;border-radius:6px}
.cs-treffer:hover{background:var(--hover)}
.cs-meta{font-size:10.5px;color:var(--muted)}
.cs-text{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Gefundene Nachricht kurz hervorheben (Springen aus der Trefferliste) */
.msg-treffer{outline:2px solid var(--accent);outline-offset:1px;border-radius:6px}
@media (prefers-reduced-motion: reduce){ .msg-treffer{outline-width:2px} }
.msg{max-width:85%;padding:7px 11px;border-radius:12px;font-size:12.5px;line-height:1.45;word-wrap:break-word}
.msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:3px}
.msg.them{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:3px}
.msg .mt{font-size:11px;opacity:.65;margin-top:3px}
.msg .mfile{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:inherit;text-decoration:none}
.msg .mfile i{width:14px;height:14px;flex-shrink:0}
.msg .mfile small{font-weight:400;opacity:.7}
.msg-day{text-align:center;font-size:10.5px;color:var(--text2);background:var(--hover);border-radius:10px;padding:3px 10px;align-self:center;margin:6px 0 2px}
.msg-reacts{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
.mr-chip{font-size:11px;background:var(--hover);border:1px solid var(--border);border-radius:10px;padding:1px 7px;cursor:default}
.msg.me .mr-chip{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.25)}
.msg-input{display:flex;gap:8px;padding:8px 10px;border-top:1px solid var(--border);background:var(--card);align-items:center;flex-shrink:0}
.msg-input input{flex:1;border:1px solid var(--border);border-radius:18px;padding:7px 13px;font-size:12.5px;font-family:inherit;background:var(--bg);color:var(--text);outline:none}
.msg-input input:focus{border-color:var(--accent)}
.msg-input .mi-btn{border:none;background:none;cursor:pointer;color:var(--text2);padding:5px;border-radius:50%;display:flex;flex-shrink:0}
.msg-input .mi-btn:hover{background:var(--hover);color:var(--accent)}
.agenda-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;height:fit-content}
.agenda-vc{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:600;font-family:inherit;padding:11px 16px;cursor:pointer;transition:background var(--tr)}
.agenda-vc:hover{background:var(--accent-dark)}
.agenda-vc i{width:15px;height:15px}
.agenda-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);font-size:14.5px;font-weight:600}
.agenda-h i{width:17px;height:17px;color:var(--cal)}
.agenda-h .lnk{margin-left:auto;font-size:12px;color:var(--accent);text-decoration:none;font-weight:600}
.agenda-h .lnk:hover{text-decoration:underline}
.agenda-b{padding:4px 0;max-height:560px;overflow-y:auto}
.ag-day{padding:10px 18px 4px;font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px}
.ag-item{cursor:pointer;text-decoration:none;color:var(--text)}
.ag-item .tt{font-size:13px;flex:1;min-width:0}
.ag-item .tt .loc{display:block;font-size:11.5px;color:var(--text2);margin-top:1px}
/* Kap. 8.5 (Manual) — Laden: „Skelett mit echter Zeilenstruktur (Avatar, Titel,
   zwei Zeilen, Badge), Schimmer 1,4 s - bei reduced-motion statischer Tint."
   Verboten: „Spinner im Vollbild, 'Lade…'-Text".

   Vorher gab es im Produkt KEIN Skelett ausser einem Puls-Block in akten.css, und
   vier sichtbare „Lade…"-Texte (git.js, hub.js, index.html x2) — genau das, was
   das Manual verbietet. Der Baustein hier haelt die Geometrie der echten Zeile:
   Avatar 32 px, Titelzeile, zweite Zeile, Badge. Dadurch springt beim Eintreffen
   der Daten nichts. */
.skel-zeile{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  border-bottom:1px solid var(--border)}
.skel-av{flex:0 0 auto;width:32px;height:32px;border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--text2) 15%, transparent);
  animation:skel-schimmer 1.4s ease-in-out infinite}
.skel-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:1px}
.skel-z{height:9px;border-radius:3px;
  background:color-mix(in srgb, var(--text2) 15%, transparent);
  animation:skel-schimmer 1.4s ease-in-out infinite}
.skel-z.t1{width:46%}          /* Titel */
.skel-z.t2{width:78%;height:8px}  /* zweite Zeile */
.skel-badge{flex:0 0 auto;width:34px;height:16px;border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--text2) 13%, transparent);
  animation:skel-schimmer 1.4s ease-in-out infinite}
@keyframes skel-schimmer{0%,100%{opacity:.55}50%{opacity:1}}
/* Kap. 8.5: „bei reduced-motion statischer Tint" — kein Puls. */
@media (prefers-reduced-motion:reduce){
  .skel-av,.skel-z,.skel-badge{animation:none;opacity:.7}
}
/* Kap. 8.5 (Manual) — Leerzustand: eine Zeile, die den Zustand benennt, plus die
   naechste Handlung (Primaerknopf) und einen Drop-Hinweis. Verboten: dekorative
   Illustration. Der Bau kommt aus leerHTML() (core.js). Der Satz ist Inhalt, nicht
   Dekoration: er steht in Inhaltsgroesse (Kap. 10.4: nie unter 15 px). */
.empty{padding:26px;text-align:center;color:var(--text2);font-size:13px}
.empty.leer{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 20px}
.leer-satz{font-size:15px;color:var(--text2);max-width:46ch;line-height:1.5}
.leer-tun{font-size:13px}
.leer-drop{font-size:12.5px;color:var(--text2);border:1px dashed var(--border);
  border-radius:var(--radius);padding:8px 14px;max-width:44ch}
.spin{display:flex;align-items:center;justify-content:center;padding:36px;color:var(--text2);font-size:13px;gap:10px}
.spin .sp{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:r .8s linear infinite}
@keyframes r{to{transform:rotate(360deg)}}
.err{padding:16px;background:var(--danger-bg);border:1px solid var(--danger);color:var(--danger);border-radius:6px;font-size:13px;margin:10px}

/* App-Toolbars */
.app-toolbar{display:flex;align-items:center;gap:10px;margin:16px 0 14px;flex-wrap:wrap}
.app-toolbar .title{font-size:18px;font-weight:600;margin-right:8px}
.tb-btn{background:var(--card);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;gap:7px;}
.tb-btn:hover{background:var(--hover);border-color:var(--border)}
.tb-btn.primary{color:#fff;border-color:var(--accent);font-weight:600}
.tb-btn.primary:hover{background:var(--accent-dark)}
.tb-btn.danger{color:var(--danger)}
.tb-btn:disabled{opacity:.45;cursor:default}
.tb-btn i{width:15px;height:15px}
.tb-info{font-size:12.5px;color:var(--text2);margin-left:auto}

/* Mail — O365-Layout (08/2026): globaler Ribbon + permanenter Account-/Ordner-Tree links */
/* Globaler Mail-Ribbon (2 Zeilen: Tabs + Panels) — Design 1:1 aus .mc-rb-* (Kimi-v2) */
.mail-ribbonbar{flex:none;background:linear-gradient(180deg,var(--card) 0%,color-mix(in srgb,var(--accent) 5%,var(--bg)) 100%);border:1px solid var(--border);border-radius:var(--radius-lg);border-bottom:1px solid var(--border);margin:0 0 10px;box-shadow:var(--shadow)}
.mrb-tabs{display:flex;align-items:flex-end;gap:2px;padding:0 8px;background:var(--card);border-bottom:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.mrb-tab{border:none;background:none;font-family:inherit;font-size:12.5px;color:var(--text2);padding:8px 14px 6px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;border-radius:6px 6px 0 0;white-space:nowrap;flex:none;transition:color var(--tr),background var(--tr)}
.mrb-tab:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.mrb-tab.on{color:var(--accent-dark);background:color-mix(in srgb,var(--accent) 10%,var(--bg));border-bottom-color:var(--accent);font-weight:600}
.mrb-collapse{margin-left:auto;border:none;background:none;cursor:pointer;padding:4px 8px;margin-bottom:3px;display:inline-flex;align-items:center;flex:none}
.mrb-panels{display:flex;align-items:stretch;gap:0;padding:4px 8px 6px;overflow-x:auto;overflow-y:hidden;background:var(--bg);border-radius:0 0 var(--radius-lg) var(--radius-lg);scrollbar-width:thin}.mrb-panel{display:none}
.mrb-panel.on{display:flex;align-items:stretch;gap:0;flex:0 0 auto}
.mail-ribbonbar.rb-collapsed .mrb-panels{display:none}
/* E-Mail-Anzahl dezent in der Listen-Navbar (rechtsbündig, klein, gedimmt) */
.mail-navbar .mail-count{margin-left:auto;font-size:11px;color:var(--text2);opacity:.75;white-space:nowrap;padding-right:4px}
/* Mail-Section als Flex-Container: Ribbon + App füllen den verfügbaren Platz.
   Feste calc-Höhe (Header 66px + bottom padding) → App passt immer in den Viewport, kein Scrollen.
   WICHTIG: display:flex NUR bei .show — sonst überschreibt der ID-Selektor .sec{display:none}
   und die Mail-App erscheint über anderen Sektionen (z.B. Kalender). */
#sec-mail{flex-direction:column;min-height:0;height:var(--app-h,calc(100vh - 66px - 44px));display:none}
#sec-mail.show{display:flex}
/* 3-Spalten: Tree | Liste | Detail — Breiten via CSS-Variablen (per Drag anpassbar) */
.mail-app{display:grid;grid-template-columns:var(--mail-tree-w,260px) 6px var(--mail-list-w,340px) 6px 1fr;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;flex:1;min-height:0}
.mail-col-resize{width:6px;cursor:col-resize;background:transparent;position:relative;z-index:var(--z-base-5);flex:none}
.mail-col-resize:hover,.mail-col-resize.dragging{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.mail-col-resize::after{content:'';position:absolute;left:2px;top:0;bottom:0;width:2px;background:var(--border);transition:background var(--dur-2)}
.mail-col-resize:hover::after,.mail-col-resize.dragging::after{background:var(--accent)}
.mail-tree-col{display:flex;flex-direction:column;min-height:0;overflow-y:auto;border-right:1px solid var(--border);background:var(--bg);position:static}
.mail-tree-col .mtc-newmail{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 10px 4px;padding:9px 12px;border:none;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:filter var(--dur-1),transform .06s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.mail-tree-col .mtc-newmail:hover{filter:brightness(1.08)}
.mail-tree-col .mtc-newmail:active{transform:translateY(1px)}
.mail-tree-col .mtc-newmail i{width:15px;height:15px}
.mtc-accs{padding:8px 6px 4px;border-bottom:1px solid var(--border)}
.mtc-acc-node .mtc-acc-folders{display:none;padding-left:6px}
.mtc-acc-node.open > .mtc-acc-folders{display:block}
.mtc-acc-node > .mtc-acc .mt-chev{transform:rotate(0deg)}
.mtc-acc-node.open > .mtc-acc .mt-chev{transform:rotate(90deg)}
.mtc-acc{display:flex;align-items:center;gap:8px;padding:7px 10px;border:none;background:transparent;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit;text-align:left;transition:background var(--dur-1);width:100%}
.mtc-acc:hover{background:var(--hover)}
.mtc-acc.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.mtc-acc .mtc-av{width:22px;height:22px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.mtc-acc .mtc-acc-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.mtc-acc .mtc-acc-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-acc .mtc-acc-mail{font-size:11px;font-weight:500;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-acc .mtc-dot{margin-left:auto;width:8px;height:8px;border-radius:999px;background:var(--accent);display:none;flex:none}
.mtc-acc.active .mtc-dot{display:inline-block}
.mtc-acc-err{font-size:11px;color:var(--danger);padding:6px 10px}
.mtc-folders{padding:6px 4px 12px;min-height:0;flex:1}
/* .mt-f/-Gruppen wirken jetzt statisch im Tree (kein Overlay mehr) */
.mail-tree-col .mt-f{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 26px;border:none;background:transparent;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;text-align:left;transition:background var(--dur-1);position:relative}
.mail-tree-col .mt-f:hover{background:var(--hover)}
.mail-tree-col .mt-f.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:700}
.mail-tree-col .mt-f.active::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:3px;height:16px;border-radius:2px;background:var(--accent)}
.mail-tree-col .mt-f i{width:14px;height:14px;flex:none;opacity:.75}
.mail-tree-col .mt-f .mt-cnt{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--text2);background:var(--hover);border-radius:999px;padding:1px 7px}
.mail-tree-col .mt-f .mt-cnt.dim{font-weight:500;opacity:.55;background:transparent;padding:1px 4px}
.mail-tree-col .mt-f.active .mt-cnt{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
/* Tree: einklappbare Ordner-Knoten (Chevron toggle).
   Einrückung erfolgt REIN über das Inline-padding-left der mt-f-Buttons (konsistent per
   Ebene); die mt-children-Container rücken NICHT zusätzlich ein (sonst doppelte Einrückung). */
.mail-tree-col .mt-node .mt-children{display:none;padding-left:0;margin-left:0;border-left:none}
.mail-tree-col .mt-node.open > .mt-children{display:block}
.mail-tree-col .mt-chev{width:14px;height:14px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--text2);transition:transform var(--dur-2)}
.mail-tree-col .mt-chev i{width:12px;height:12px}
.mail-tree-col .mt-node.open > .mt-f .mt-chev{transform:rotate(90deg)}
.mail-tree-col .mt-rest-group{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.mail-list-col{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--bg)}
.mail-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--bg);position:relative}
/* Kompakte Navbar: aktiver Ordner + Schnellfilter (einzeilig) — Liste fängt direkt darunter an */
.mail-navbar{display:flex;align-items:center;gap:4px;padding:8px 8px 6px;border-bottom:1px solid var(--border)}
.mn-folder{display:flex;align-items:center;gap:7px;padding:6px 10px;border:none;background:transparent;border-radius:8px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit;flex:1;min-width:0;transition:background var(--dur-1)}
.mn-folder:hover{background:var(--hover)}
.mn-folder span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-navbar-qf{display:flex;align-items:center;gap:2px}
.mail-navbar-qf .qf{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;border-radius:8px;color:var(--text2);cursor:pointer;transition:all var(--dur-1)}
.mail-navbar-qf .qf:hover{background:var(--hover);color:var(--text)}
.mail-navbar-qf .qf.active{background:var(--accent);color:#fff}
.mail-navbar-qf .qf .qf-cnt{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;border-radius:999px;background:var(--badge-unread);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px}
/* Konversationsansicht: Thread-Gruppierung */
.mail-thread{border-bottom:1px solid var(--border)}
.mail-thread .mail-item{border-bottom:none}
/* Kinder: eingerückt, aber KEINE durchgehende linke Linie — nur ein kurzer strichlierter
   Verbinder, der bündig links mit der blauen Parent-Linie beginnt und zum Child führt */
.mail-thread-kids{margin-left:14px;padding-left:4px}
.mail-thread-kids .mail-item{opacity:.85;position:relative}
.mail-thread-kids .mail-item::before{content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:14px;height:1px;border-top:1px dashed color-mix(in srgb,var(--accent) 50%,var(--border))}
.mail-thread-kids .mail-item:hover{opacity:1}
.mail-thread.collapsed .mail-thread-kids{display:none}
.mail-thread .thread-head{cursor:pointer}
.mail-thread .thread-chev{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:12px;height:20px;margin:0;border:none;background:transparent;color:var(--muted);border-radius:4px;cursor:pointer;flex:none;z-index:var(--z-base-2);display:inline-flex;align-items:center;justify-content:center}
.mail-thread .thread-chev i,.mail-thread .thread-chev svg{width:10px;height:10px;flex:none}
.mail-thread .thread-chev:hover{background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--accent)}
.mail-thread .thread-chev:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mail-thread.collapsed .thread-chev{color:var(--accent)}
.mail-thread .thread-chev{transition:transform var(--dur-2) ease}
.mail-thread .thread-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--accent);font-size:11px;font-weight:700;margin-left:6px;flex:none}
.mail-thread.collapsed .thread-cnt{background:var(--accent);color:#fff}
/* Gitea-Issue #191: Der Thread-Zusammenhang braucht einen EIGENEN optischen Code —
   vorher borgte er sich die Ungelesen-Optik und erzeugte den gemeldeten Widerspruch.
   GEMESSEN live: Klick auf eine Mail in einer 3er-Konversation setzte bei ALLEN drei
   Mails `thread-active` mit Schriftgewicht 400 -> 600/700 und getoenter Kachel-Flaeche.
   Genau das ist die Darstellung von „ungelesen" (.mail-item.unread .from/.subj =
   font-weight:700 + getoente Zeile). Ergebnis: die drei gelesenen Mails sahen aus wie
   ungelesen — „automatisch unread gemarkt, fett und die kachel dahinter wie unread".
   NEU: Zugehoerigkeit zeigt eine schmale Akzent-Schiene (3px) — dieselbe Sprache wie
   „aktuelle Zeile", nur schwaechst. KEIN Fett mehr (Fett bleibt dem Ungelesen-Zustand
   vorbehalten) und keine Flaechenfuellung (sonst Kollision mit .unread/.sel).
   Das ist keine UX-Verschlechterung: Kante + Zaehler + Chevron waren schon vorher da,
   und das Fett war der falsche Traeger des Signals (Standard-Mail-Client-Verhalten:
   Kontext = Kante, Zustand = Schrift/Punkt). */
.mail-item.thread-active{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
.mail-thread-kids .mail-item.thread-active{opacity:1;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
/* Ausgewählte Kind-Mail im Thread: runder Punkt STATT 3px-Kante + transparenterer Hintergrund.
   box-shadow:none !important erzwingt, dass die thread-active-Kante (inset box-shadow)
   zuverlässig verschwindet — sonst bliebe sie (Spezifität) neben dem Punkt erhalten. */
.mail-thread-kids .mail-item.thread-active.sel{box-shadow:none !important;background:color-mix(in srgb,var(--accent) 12%,var(--card))}
.mail-thread-kids .mail-item.thread-active.sel::before{content:'';position:absolute;left:5px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;pointer-events:none}
.mail-thread-kids .mail-item.thread-active.sel:hover{background:color-mix(in srgb,var(--accent) 16%,var(--card))}
/* Kein font-weight hier: die Schriftstaerke ist das Signal fuer „ungelesen" (siehe
   .mail-item.unread) und darf nicht fuer den Thread-Zusammenhang verwendet werden. */
.mail-item.dragging{opacity:.5}
.mt-f.drop-target{outline:2px dashed var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 12%,var(--card))}
.mail-conv-toggle{margin-left:2px}
.mail-conv-toggle.active{background:var(--accent);color:#fff}
/* Ordner-Tree als Overlay (klappt über die Liste — drückt sie nicht runter) */
.mail-tree{position:absolute;top:47px;left:8px;right:8px;z-index:var(--z-sidebar);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.25);padding:4px;animation:modalIn var(--dur-2) ease}
.mt-group .mt-head{display:flex;align-items:center;gap:6px;width:100%;padding:6px 12px;border:none;background:transparent;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);cursor:pointer;font-family:inherit;text-align:left}
.mt-group .mt-head:hover{color:var(--text)}
.mt-group .mt-head i{width:12px;height:12px;flex:none;transition:transform var(--dur-2) ease}
.mt-group.collapsed .mt-head i{transform:rotate(-90deg)}
.mt-group.collapsed .mt-body{display:none}
.mt-body{display:flex;flex-direction:column;gap:1px;padding:1px 0}
.mt-body .mt-f{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 26px;border:none;background:transparent;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;text-align:left;transition:background var(--dur-1);position:relative}
.mt-body .mt-f:hover{background:var(--hover)}
.mt-body .mt-f.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:700}
.mt-body .mt-f.active::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:3px;height:16px;border-radius:2px;background:var(--accent)}
.mt-body .mt-f i{width:14px;height:14px;flex:none;opacity:.75}
.mt-body .mt-f .mt-cnt{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--text2);background:var(--hover);border-radius:999px;padding:1px 7px}
.mt-body .mt-f .mt-cnt.dim{font-weight:500;opacity:.55;background:transparent;padding:1px 4px}
.mt-body .mt-f.active .mt-cnt{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.mail-list{flex:1}
.mail-detail{overflow:hidden;min-height:0;height:100%;padding:0;background:var(--card);display:flex;flex-direction:column}
/* Outlook-Layout: Kopf fixiert, nur Verlauf scrollt */
.mail-detail .md-head{flex:none;z-index:var(--z-base-2)}
.mail-detail .md-scroll{flex:1;min-height:0;overflow-y:auto;transition:flex var(--dur-3) ease,opacity var(--dur-3) ease;display:flex;flex-direction:column}
/* iframe füllt den verfügbaren Platz und scrollt intern → kein Doppel-Scrollbalken.
   Gitea-Issue #60: Der Mail-Body hatte KEINEN Mindestplatz. Im schwebenden Fenster
   beanspruchen Kopf, Anhänge und der Antwort-Editor ihre Höhe zuerst (alle flex:none),
   dem iframe blieb dann nur ein Streifen (gemessen: 85–150px bei 3.700 Zeichen Inhalt)
   — der Nutzer musste das Fenster von Hand größer ziehen, genau der Befund.
   Jetzt bekommt der Body einen Mindestanteil und darf das Fenster mitwachsen lassen. */
.mail-detail .md-scroll iframe.mail-frame{flex:1 1 auto;min-height:220px;width:100%;border:none;background:#fff;display:block}
/* Anhänge kompakt unter dem Body (im Verlauf, nicht im Kopf) */
.mail-detail .attach-h{flex:none;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px}
/* Gitea-Issue #67: Hinweisbalken „Bilder von fremden Servern blockiert".
   Webmailer-Standard (Gmail/Outlook): blockieren + offen sagen + per Klick
   freigeben. Farbe bleibt Signal — 1px Kante + Warnfarbe, keine Vollfläche. */
/* Gitea-Issue #93: die GANZE Flaeche ist die Schaltflaeche (vorher reagierte nur
   der kleine Knopf — ein Klick auf den Text tat nichts). Cursor + Hover zeigen
   das jetzt an, der Fokusring macht sie per Tastatur bedienbar. */
.mail-detail .mail-extimg-bar[role="button"]{cursor:pointer}
.mail-detail .mail-extimg-bar[role="button"]:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.mail-detail .mail-extimg-bar[role="button"]:hover .mail-extimg-btn{border-color:var(--accent);color:var(--accent)}
.mail-detail .mail-extimg-bar[role="button"]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.mail-detail .mail-extimg-bar{flex:none;display:flex;align-items:center;gap:9px;margin:0 0 10px;
  padding:8px 11px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--border));
  border-left:3px solid var(--warn);border-radius:var(--r-md);
  background:color-mix(in srgb,var(--warn) 7%,transparent);font-size:12.5px;color:var(--text)}
.mail-detail .mail-extimg-bar svg{width:15px;height:15px;flex:none;color:var(--warn)}
.mail-detail .mail-extimg-bar span{flex:1;min-width:0;line-height:1.45}
.mail-detail .mail-extimg-bar b{font-weight:650}
.mail-detail .mail-extimg-btn{flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--card);color:var(--text);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.mail-detail .mail-extimg-btn:hover{border-color:var(--accent);color:var(--accent)}
.mail-detail .mail-extimg-btn svg{color:currentColor}
.mail-detail .mail-extimg-bar.frei{border-color:var(--border);border-left-color:var(--ok);
  background:color-mix(in srgb,var(--ok) 6%,transparent)}
.mail-detail .mail-extimg-bar.frei svg{color:var(--ok)}
.mail-detail .attach-row{flex:none;display:flex;flex-wrap:wrap;gap:6px}
.mail-detail .attach{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--border);border-radius:14px;margin:0;cursor:pointer;transition:background var(--tr),border-color var(--tr);font-size:12px}
.mail-detail .attach:hover{border-color:var(--accent)}
.mail-detail .attach .nm{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-detail .attach .sz{color:var(--text2);font-size:11px}
.mail-detail .attach-pdf{border-color:rgba(164,38,44,.35)}
.mail-detail .attach-pdf:hover{border-color:var(--pdf-accent);background:rgba(164,38,44,.06)}
/* Anhänge im Kopf (immer sichtbar, kompakt) */
.md-attach{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:5px 16px 3px;border-bottom:1px solid var(--border);}
.md-attach .att-cnt{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--text2);margin-right:2px}
.md-attach .att-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:11.5px;font-weight:600;color:var(--text);cursor:pointer;transition:all var(--dur-1)}
.md-attach .att-chip:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.md-attach .att-more{border:1px dashed var(--border);background:transparent;color:var(--text2);font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;cursor:pointer;font-family:inherit}
.md-attach .att-more:hover{border-color:var(--accent);color:var(--accent)}
.md-attach .att-rest{display:none;width:100%;gap:5px;flex-wrap:wrap;padding:3px 0 6px}
.md-attach.open .att-rest{display:flex}
/* Antwort/Weiterleiten-Modus (Outlook): Mail-Ansicht einklappen, Editor füllt die Höhe.
   NUR der Editor klappt auf — der Body verschwindet. Der Editor-Inhalt (re-body)
   ist scrollbar, damit lange Zitate nicht abgeschnitten werden. */
.mail-detail.md-answering .reply-editor{flex:1 1 auto;max-height:none}
.mail-detail .reply-editor{flex:0 1 auto;max-height:45%;border-top:1px solid var(--border);border-radius:0;margin-top:0;overflow:hidden}
.mail-detail .reply-editor .re-body{flex:1;min-height:0;max-height:none;overflow-y:auto}
.mail-detail .md-scroll .mail-body{font-size:14px;line-height:1.6;word-wrap:break-word;flex:none}
.mail-detail .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text2);gap:10px;font-size:14px}
.mail-list::-webkit-scrollbar{width:6px}
.mail-list::-webkit-scrollbar-thumb{border-radius:3px}
.mail-item{display:flex;gap:11px;cursor:pointer;align-items:flex-start;position:relative}
.mail-item .av{width:34px;height:34px;border-radius:50%;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600}
.mail-item .av-wrap{position:relative;flex-shrink:0;display:flex}
.mail-item .av-wrap .av{width:34px;height:34px;border-radius:50%;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600}
.mail-item .av-wrap .pd{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;border:2px solid var(--card)}
.mail-item .av-wrap .pd.on{background:var(--ok)}
.mail-item .av-wrap .pd.off{background:var(--text2);opacity:.4}
.mail-item .av-wrap .pd.call{background:var(--danger)}
.mail-item .b{flex:1;min-width:0}
.mail-item .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.mail-item .from{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
/* Gitea-Issue #86: kleines Präfix „von"/„an" vor dem Namen. Farbe bleibt Signal:
   gedeckt und ohne Tönung — es ordnet nur ein, wer in der Zeile steht. */
.mail-item .from-lbl{flex:none;font-size:10.5px;font-weight:700;color:var(--text2);text-transform:lowercase;
  letter-spacing:.02em;opacity:.75;margin-right:-3px}
.mail-item .time{font-size:11.5px;color:var(--text2);flex-shrink:0;white-space:nowrap}
/* Gitea-Issue #83 (Wunsch von Ronny): DEL/Entf schiebt die Zeile nach links aus
   der Liste; an ihrer Stelle steht der Mistkübel. Keine Vollflächen-Tönung —
   nur eine 1px-Kante und ein roter Farbanker links, damit die Stelle auffindbar
   bleibt, ohne zu schreien. */
.mail-item.weg-schieben{transform:translateX(-26px);opacity:0;pointer-events:none;
  transition:transform var(--dur-3) ease,opacity var(--dur-3) ease}
.mail-weg-ph{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;
  border-left:3px solid var(--danger);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--danger) 6%,transparent);
  font-size:12px;animation:mailWegEin var(--dur-3) ease}
@keyframes mailWegEin{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
.mail-weg-trash{flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid var(--danger);border-radius:var(--r-sm);background:var(--danger);color:#fff;
  font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.mail-weg-trash:hover{filter:brightness(1.08)}
.mail-weg-trash:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.mail-weg-undo{flex:none;padding:5px 10px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--card);color:var(--text);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.mail-weg-undo:hover{border-color:var(--accent);color:var(--accent)}
.mail-weg-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.mail-item .subj{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
/* Betreff-Zeile als Flexbox, damit Termin-Badge immer sichtbar bleibt (nicht durch
   text-overflow:ellipsis des langen Betreffs abgeschnitten wird — Bug 2026-09-03) */
.mail-item .subj-line{display:flex;align-items:center;gap:6px;min-width:0;margin-top:1px}
.mail-item .subj-line .subj{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-item .subj-line .ics-badge{flex:none}
.mail-item .subj-line .tag{flex:none}
/* Ungelesen: Outlook-typisch — Zeile leicht schattiert, fetter Absender+Betreff + blauer Punkt */
.mail-item .unread-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:7px}
.mail-item .unread-dot.seen{background:transparent}
.mail-item .prev{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mail-item .tag{font-size:10.5px;background:var(--file);color:#fff;border-radius:3px;padding:1px 6px;margin-left:6px}
.mail-item .mail-att-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;border-radius:4px;margin-left:6px;color:var(--text2);vertical-align:-3px}
.mail-pane,.mail-pane .inner{display:none}
.mail-quicksearch{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border);background:var(--card)}
.mail-quicksearch input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:12.5px;font-family:inherit;color:var(--text)}
.mail-quicksearch input::placeholder{color:var(--text2)}
.mail-qsearch-clear{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:none;color:var(--text2);cursor:pointer;border-radius:50%}
.mail-qsearch-clear:hover{background:var(--hover);color:var(--text)}
.mail-list{overflow-y:auto;min-height:0;height:100%}
.meta{gap:12px;align-items:flex-start;flex-wrap:wrap;}
.meta .av{width:38px;height:38px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.meta .who{font-size:14.5px;font-weight:600;}
.meta .who-em{font-size:11.5px;color:var(--text2);font-weight:400;margin-top:1px;word-break:break-all}
.meta .meta-body{flex:1;min-width:0}
.meta .av-wrap{position:relative;display:flex;flex-shrink:0}
.meta .av-wrap .pd{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;border:2px solid var(--card)}
.meta .av-wrap .pd.on{background:var(--ok)}
.meta .av-wrap .pd.off{background:var(--text2);opacity:.4}
.meta .av-wrap .pd.call{background:var(--danger)}
/* Empfänger-Zeilen (An/CC/BCC): Chips NUR umbrechen, wenn der Platz wirklich knapp
   wird — nicht zu früh. Label shrinkt nicht; .rc-vals darf wachsen und bricht die
   Chips erst am rechten Rand des Head-Bereichs um. */
.meta .cc-line{margin-top:0;font-size:12px}
.meta .cc-self{background:var(--accent-light);color:var(--accent);border-radius:999px;padding:0 6px;font-size:10.5px;font-weight:600}
.meta .meta-popbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:none;color:var(--text2);border-radius:4px;cursor:pointer;transition:opacity var(--dur-2);padding:0}
.meta .meta-popbtn:hover{color:var(--accent);background:var(--hover)}
.meta .subj{padding-top:8px;margin-top:2px;}
.meta .prio-badge,.meta .hdr-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px;line-height:1.4}
.meta .prio-badge.prio-high{background:color-mix(in srgb,var(--danger) 12%,var(--card));border:1px solid color-mix(in srgb,var(--danger) 30%,transparent)}
.meta .prio-badge.prio-low{background:color-mix(in srgb,var(--ok) 12%,var(--card));border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.meta .hdr-badge{background:color-mix(in srgb,var(--hover) 50%,var(--card));color:var(--text2);border:1px solid var(--border)}
.meta .hdr-badge.hdr-size{font-variant-numeric:tabular-nums}
.mail-body{font-size:14px;line-height:1.6;word-wrap:break-word}
.mail-body pre{white-space:pre-wrap;font-family:inherit}
.mail-body a{color:var(--accent)}
.mail-body img{max-width:100%;height:auto}
/* Empfänger-Chips (An/CC/BCC — klickbar mit Aktionen) */
.rc-lbl{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;flex:none;display:inline-block}
.rc-vals{display:inline-block;vertical-align:bottom;min-width:0}
.rc-self{font-size:10.5px;color:var(--ok);font-weight:600}
/* Kontakt-Dropdown (neue E-Mail / Termin / Besprechung mit der Person) */
.contact-pop{position:fixed;z-index:var(--z-suggest);min-width:230px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.22);padding:6px;display:flex;flex-direction:column;gap:2px;animation:modalIn var(--dur-2) ease}
.contact-pop .cp-h{padding:8px 10px 6px;font-size:12px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border);margin-bottom:4px}
.contact-pop .cp-it{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--text);cursor:pointer;border:none;background:transparent;text-align:left;font-family:inherit;width:100%}
.contact-pop .cp-it:hover{background:var(--hover)}
.contact-pop .cp-it i{width:14px;height:14px;color:var(--accent);flex:none}
.contact-pop .cp-it.cp-danger i{color:var(--danger)}
/* Meeting-Einladungs-Karte (Teams/Meet/Zoom/Webex…) */
.meet-card{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:12px 16px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--card)),color-mix(in srgb,var(--accent-2) 8%,var(--card)));cursor:pointer;transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease}
.meet-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.1);border-color:var(--accent)}
.meet-card .mc-i{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.meet-card .mc-i i{width:18px;height:18px}
.meet-card .mc-b{min-width:0;flex:1}
.meet-card .mc-t{font-size:13.5px;font-weight:700;color:var(--text)}
.meet-card .mc-s{font-size:11.5px;color:var(--text2)}
.meet-card .mc-link{color:var(--accent);text-decoration:underline;word-break:break-all}
.meet-card .mc-go{margin-left:auto;flex:none;border:none;background:var(--accent);color:#fff;font-size:12px;font-weight:700;font-family:inherit;padding:7px 14px;border-radius:9px;cursor:pointer}
.meet-card .mc-go:hover{background:var(--accent-dark)}
.meet-card.compact{padding:8px 12px;margin:8px 0}
.meet-card.compact .mc-i{width:32px;height:32px}
.meet-card.compact .mc-i i{width:15px;height:15px}
.meet-card.compact .mc-go{padding:5px 10px;font-size:11px}
/* Termineinladungs-Karte: Quickactions Annehmen/Vielleicht/Ablehnen */
.ics-card{flex-direction:column;align-items:stretch;cursor:default}
.ics-card .mc-b{display:flex;flex-direction:column;gap:4px}
.ics-qa{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ics-qa-btn{border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;transition:background var(--dur-1),transform .1s}
.ics-qa-btn:hover{filter:brightness(.97);transform:translateY(-1px)}
.ics-qa-btn.yes{background:color-mix(in srgb,var(--ok) 18%,var(--card));color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
.ics-qa-btn.maybe{background:color-mix(in srgb,var(--warn-strong) 15%,var(--card));color:var(--state-ics-warn-text);border:1px solid color-mix(in srgb,var(--warn-strong) 45%,transparent)}
.ics-qa-btn.no{background:color-mix(in srgb,var(--danger) 12%,var(--card));color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent)}
.ics-qa-btn.cal{background:var(--cal);color:#fff}
.ics-qa-btn.cal:hover{background:color-mix(in srgb,var(--cal) 85%,#000)}
.ics-card.done .ics-qa-btn:not(.on){opacity:.45}
.ics-card.done .ics-qa-btn.on{box-shadow:inset 0 0 0 2px currentcolor}
/* Einladungs-Banner im Mail-Header (Quickactions + Status) */
/* Einladungs-Banner im Mail-Header (Quickactions + Status) — dezent, kompakt */
.ics-header-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:9px 12px;margin:6px 2px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.ics-header-banner .ics-hb-main{min-width:0;flex:1}
.ics-header-banner .ics-hb-t{font-size:13px;font-weight:600;color:var(--text)}
.ics-header-banner .ics-hb-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--text2);margin-top:2px}
.ics-header-banner .ics-hb-when,.ics-header-banner .ics-hb-loc{white-space:nowrap}
.ics-header-banner .ics-hb-meet{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:5px 10px;border:none;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--accent);font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);transition:filter var(--dur-1)}
.ics-header-banner .ics-hb-meet:hover{filter:brightness(.94)}
.ics-header-banner .ics-hb-meet .ics-meet-ico{display:inline-flex;align-items:center}
.ics-header-banner .ics-hb-meetrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:2px}
.ics-header-banner .ics-hb-meetrow .ics-qa{margin-top:6px}
.ics-header-banner .ics-hb-status{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ok);white-space:nowrap;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--ok) 12%,transparent)}
.ics-header-banner .ics-hb-status .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.ics-header-banner .ics-hb-sttxt{line-height:1.2}
.ics-header-banner .ics-hb-pending{color:var(--text2);font-weight:600}
.ics-header-banner.st-tentative .ics-hb-status{color:var(--state-ics-warn-text);background:color-mix(in srgb,var(--warn-strong) 12%,transparent)}
.ics-header-banner.st-tentative .ics-hb-status .dot{background:var(--warn-strong)}
.ics-header-banner.st-declined .ics-hb-status{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.ics-header-banner.st-declined .ics-hb-status .dot{background:var(--danger)}
/* Provider-Logo-Container (Marker-Farben je Anbieter) */
.mcpv{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;color:#fff;flex:none}
.mcpv-microsoftteams{background:var(--brand-teams)}
.mcpv-webex{background:var(--brand-webex)}
.mcpv-zoom{background:var(--brand-zoom)}
.mcpv-gotomeeting{background:var(--brand-gotomeeting)}
.mcpv-whereby{background:#333}
.mcpv-bluejeans{background:var(--brand-bluejeans)}
.mcpv-ringcentral{background:var(--brand-ringcentral)}
.mcpv-amazonchime{background:var(--brand-chime)}
.mcpv-skypeloop,.mcpv-skype{background:var(--brand-skype)}
.mcpv-nextcloudtalk{background:var(--nc-brand)}
.mcpv-jitsimeet{background:var(--brand-jitsi)}
.mcpv-facetime{background:var(--brand-facetime)}
.mcpv-signal{background:var(--brand-signal)}
.mcpv-discord{background:var(--brand-discord)}
.mcpv-slack{background:var(--brand-slack)}
.mcpv-googlemeet{background:var(--brand-googlemeet)}
/* Kalender-Kachel: LINKS ein klarer, komplett abgesetzter Farbblock mit prominentem
   Provider-Logo (volle Kachelhöhe), RECHTS der Termintitel + Zeit.
   Höhere Spezifität als Basis-.mcpv (height:24px) und Basis-.tg-ev (padding:3px 7px),
   damit die Spalte echte volle Höhe bekommt und nicht als Chip wirkt. */
.cal-tgrid .tg-day-col .tg-ev{display:flex;gap:0;overflow:hidden;}
.cal-tgrid .tg-day-col .tg-ev .evt-logo{align-self:stretch;border-right:2px solid rgba(255,255,255,.35);margin:0;transform-origin:center;will-change:transform}
/* Die GANZE linke Spalte wächst beim Hover (proportional, Form bleibt) und ragt
   sichtbar über die Kachelgrenze; Logo+Logo bleiben darin mittig. Kein innerer Schein. */
.cal-tgrid .tg-day-col .tg-ev:has(.evt-logo:hover){overflow:visible;z-index:var(--z-base-5)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-microsoftteams{background:var(--brand-teams)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-webex{background:var(--brand-webex)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-zoom{background:var(--brand-zoom)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-jitsimeet{background:var(--brand-jitsi)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-nextcloudtalk{background:var(--nc-brand)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-googlemeet{background:var(--brand-googlemeet)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-facetime{background:var(--brand-facetime)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-signal{background:var(--brand-signal)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-discord{background:var(--brand-discord)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-slack{background:var(--brand-slack)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-gotomeeting{background:var(--evt-gotomeeting)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-whereby{background:var(--brand-whereby)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-bluejeans{background:var(--evt-bluejeans)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-ringcentral{background:var(--evt-ringcentral)}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-amazonchime{background:#f90}
.cal-tgrid .tg-day-col .tg-ev .evt-logo.mcpv-skypeloop{background:var(--evt-skypeloop)}
.cal-tgrid .tg-day-col .tg-ev .tg-ev-b{flex:1;padding:2px 7px}
.cal-tgrid .tg-day-col .tg-ev .tg-ev-tm{opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cal-month .cm-cell .cm-ev{align-items:center;gap:5px}
.cal-month .cm-cell .cm-ev .evt-logo{border-radius:4px;flex:none}
.cal-month .cm-cell .cm-ev .tg-ev-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Icon "Termin" in der Mail-Liste (Posteingang) — klar sichtbares Kalender-Symbol */
.ics-badge{width:18px;height:18px;flex:none;border-radius:5px;background:linear-gradient(135deg,var(--cal),color-mix(in srgb,var(--cal) 55%,var(--accent-2)));display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-left:6px;vertical-align:-3px}
.mail-item .tag-ics{margin-left:6px}

.attach-h{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin:8px 0 6px}
.attach{display:flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--border);border-radius:6px;margin-bottom:5px;cursor:pointer;transition:background var(--tr),border-color var(--tr);background:var(--bg)}
.attach:hover{background:var(--hover);border-color:var(--accent)}
.attach-pdf{border-color:rgba(164,38,44,.35)}
.attach-pdf:hover{border-color:var(--pdf-accent);background:rgba(164,38,44,.06)}
.attach i{width:18px;height:18px}
.attach .nm{font-size:13px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach .sz{font-size:11.5px;color:var(--text2)}
iframe.mail-frame{width:100%;border:none;min-height:380px;background:#fff}
.mw-b iframe.mail-frame{min-height:0;flex:1;height:100%}
.more-row{padding:10px;text-align:center}
.more-row button{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:7px 18px;font-size:13px;cursor:pointer;color:var(--text);transition:background var(--tr)}
.more-row button:hover{background:var(--hover)}
.reply-sec{margin-top:18px;padding-top:14px;}
/* Kontextmenü (Rechtsklick) */
.ctx-menu{position:fixed;z-index:var(--z-ctx);min-width:190px;max-height:80vh;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 28px rgba(0,0,0,.22);padding:5px;animation:modalIn var(--dur-1) ease}
.ctx-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:none;background:none;border-radius:7px;font-size:13px;font-family:inherit;color:var(--text);cursor:pointer;text-align:left}
.ctx-item:hover{background:var(--hover)}
.ctx-item i{width:14px;height:14px;color:var(--text2);flex-shrink:0}
.ctx-item.danger{color:var(--danger)}
/* Kap. 425 (#181): gesperrte Menuepunkte (Nur-Leserecht) — sichtbar, aber nicht
   anklickbar, mit Grund im Tooltip. Farbe ist Signal, nicht Dekoration: die
   Daempfung sagt "existiert, aber nicht fuer Sie". */
.ctx-item[aria-disabled="true"],.ctx-item.nur{opacity:.5;cursor:not-allowed}
.ctx-item[aria-disabled="true"]:hover,.ctx-item.nur:hover{background:transparent;color:var(--text2)}
.ctx-item[aria-disabled="true"]:hover svg,.ctx-item.nur:hover svg{color:var(--text2)}

.ctx-item.danger i{color:var(--danger)}
.ctx-sep{height:1px;background:var(--border);margin:4px 6px}
/* Issue #96: Begruendung im Kontextmenue, wenn Eintraege bewusst fehlen
   (z. B. Leserecht auf einem freigegebenen Kalender). */
.ctx-sec{padding:7px 12px 3px;font-size:10.5px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.4px}
.ctx-hint{display:flex;align-items:flex-start;gap:8px;margin:4px 6px 2px;padding:7px 8px;
  border-top:1px solid var(--border);font-size:11.5px;line-height:1.45;color:var(--text2)}
.ctx-hint i{width:13px;height:13px;flex:none;margin-top:1px;color:var(--warn)}
.reply-sec.top-actions{margin-top:14px;padding-top:0;}
/* Antwort-Editor (Thunderbird/Outlook-Stil) */
.reply-editor{margin-top:14px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.re-fields{border-bottom:1px solid var(--border);background:var(--bg)}
.re-row{display:flex;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid var(--border)}
.re-ccbc{margin-left:auto;display:flex;gap:2px}
.re-ccb{border:none;background:none;color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;padding:2px 6px;border-radius:4px;letter-spacing:.3px}
.re-ccb:hover{background:var(--hover,var(--panel2));color:var(--text)}
.re-ccb.on{color:var(--accent);background:rgba(11,107,203,.1)}
/* Editor-Drei-Punkte-Menü */
.re-menu-pop{position:absolute;z-index:var(--z-editor-menu);background:var(--card,#fff);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.18);min-width:230px;padding:6px 0;max-height:420px;overflow-y:auto}
.re-menu-sec{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;padding:8px 14px 3px}
.re-menu-it{display:flex;align-items:center;gap:8px;padding:5px 14px;font-size:13px;color:var(--text);cursor:pointer}
.re-menu-it:hover{background:var(--hover,var(--panel2))}
.re-menu-it.on{color:var(--accent);font-weight:600}
.re-menu-it input{margin:0}
.re-menu-it.re-menu-act{border-top:1px solid var(--border);margin-top:4px;padding-top:8px;color:var(--accent)}
.re-menu-sep{height:1px;background:var(--border);margin:4px 0}
/* Schriftgröße-Popup */
.re-size-pop{position:absolute;z-index:var(--z-editor-menu);background:var(--card,#fff);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.18);min-width:170px;padding:4px}
.re-size-it{padding:5px 10px;cursor:pointer;border-radius:5px;color:var(--text)}
.re-size-it:hover{background:var(--hover,var(--panel2))}
.re-row:last-child{border-bottom:none}
.re-lbl{font-size:12px;font-weight:600;color:var(--text2);flex-shrink:0;min-width:52px}
.re-row .set-inp{border:none;background:transparent;padding:4px 0;font-size:13px;font-family:inherit;color:var(--text)}
.re-row .set-inp:focus{outline:none;box-shadow:none}
.re-toolbar{display:flex;align-items:center;gap:2px;padding:6px 10px;border-bottom:1px solid var(--border);background:var(--bg);flex-wrap:wrap}
.re-tb{border:1px solid transparent;background:transparent;border-radius:6px;min-width:28px;height:28px;padding:0 8px;font-size:12.5px;font-family:inherit;cursor:pointer;color:var(--text);display:inline-flex;align-items:center;justify-content:center;transition:background var(--tr)}
.re-tb:hover{background:var(--hover);border-color:var(--border)}
.re-tb.re-color{position:relative}
.re-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:3px;vertical-align:-1px}
.re-color-pop{position:absolute;top:30px;left:0;z-index:var(--z-editor-pop);background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px;display:grid;grid-template-columns:repeat(5,24px);gap:4px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.re-color-sq{width:22px;height:22px;border-radius:5px;cursor:pointer;border:1px solid rgba(0,0,0,.15);transition:transform var(--tr)}
.re-color-sq:hover{transform:scale(1.15)}
.re-emoji-pop{position:absolute;top:30px;left:0;z-index:var(--z-editor-pop);background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px;display:grid;grid-template-columns:repeat(8,26px);gap:2px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.re-emoji-it{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;border-radius:5px;transition:background var(--tr)}
.re-emoji-it:hover{background:var(--hover)}
/* Toolbar-Buttons mit Popups: relative Position für korrektes Ankerverhalten */
.re-toolbar .re-tb{position:relative}
.re-sep{width:1px;height:18px;background:var(--border);margin:0 6px}
.re-body{min-height:130px;max-height:38vh;overflow-y:auto;padding:12px 14px;font-size:13.5px;line-height:1.55;color:var(--text);outline:none}
.re-body:empty:before{content:attr(data-placeholder);color:var(--text2);opacity:.7}
.re-body blockquote.re-quote{margin:8px 0 4px;padding:10px 14px;border-left:3px solid var(--quote-line);color:var(--text2);font-size:12.5px;background:var(--bg);border-radius:0 6px 6px 0;line-height:1.5}
.quote-wrap{margin-top:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);overflow:hidden}
.quote-hdr{font-size:12px;font-weight:600;color:var(--text2);padding:7px 12px;border-bottom:1px solid var(--border);background:var(--panel2)}
.quote-wrap blockquote.re-quote{border:none;border-left:3px solid var(--quote-line);margin:0;padding:10px 12px;background:transparent;border-radius:0}
.re-actions{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--border);background:var(--bg)}
.re-actions .qr-info{margin-left:auto}
.attach-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.attach-chip{display:inline-flex;align-items:center;gap:5px;background:var(--hover);border:1px solid var(--border);border-radius:999px;padding:3px 9px;font-size:11.5px;color:var(--text);max-width:220px}
.attach-chip .ac-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-chip .ac-x{border:none;background:none;cursor:pointer;color:var(--text2);padding:1px;border-radius:50%;display:flex}
.attach-chip .ac-x:hover{color:var(--danger)}
/* Mail-Aktions-Buttons: klein + subtil (Ghost-Stil) */
.reply-sec.top-actions{display:flex;align-items:center;gap:6px;margin:6px 0 8px;flex-wrap:wrap}
.reply-sec.top-actions .re-act{padding:4px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text2);cursor:pointer;transition:all var(--dur-2)}
.reply-sec.top-actions .re-act:hover{background:var(--hover,var(--panel2));color:var(--text);border-color:var(--border)}
.reply-sec.top-actions .re-act.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.reply-sec.top-actions .re-act.primary:hover{opacity:.9}
.reply-sec.top-actions .re-sep{width:1px;height:18px;background:var(--border);margin:0 2px}
.reply-sec.top-actions .btn-d:hover{background:rgba(197,15,31,.08);color:var(--danger);border-color:var(--danger)}
.reply-sec.top-actions .tb-btn i,.reply-sec.top-actions .btn-d i{width:13px;height:13px}

/* Kalender (Agenda) */
.agenda-full{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.agenda-full .ag-item{padding:11px 22px}
.agenda-full .ag-day{padding:12px 22px 6px}
.ag-item{display:flex;align-items:flex-start;gap:12px;padding:10px 18px;border-bottom:1px solid var(--border);transition:background var(--tr)}
.ag-item:hover{background:var(--hover)}
.ag-item .tm{flex-shrink:0;font-size:12px;font-weight:600;color:var(--text2);min-width:84px;padding-top:1px}
.ag-item .ag-main{min-width:0;flex:1}
.ag-item .ag-title{font-size:13.5px;color:var(--text);font-weight:500;line-height:1.35}
.ag-item .ag-meta{display:flex;align-items:center;flex-wrap:nowrap;gap:4px 10px;margin-top:3px;min-width:0}
.ag-item .ag-meta-item{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text2);white-space:nowrap;min-width:0;flex-shrink:1}
.ag-item .ag-meta-item i{width:11px;height:11px;flex-shrink:0}
.ag-item .ag-meta-item .loc-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.ag-item .ag-vc{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#fff;background:var(--nc-brand);border-radius:4px;padding:1px 7px;white-space:nowrap;flex-shrink:0;margin-left:auto}
.ag-item .ag-vc i{width:11px;height:11px}
.ag-item .ag-sub{display:block;font-size:11px;color:var(--text2);margin-top:2px}
/* ---------- Kalender-Ansichten (Tag/Woche/Monat) ---------- */
.cal-nav{display:flex;align-items:center;gap:6px;min-width:0}
.cal-nav .title{margin-left:10px}
/* Gitea-Issue #119: Der Titel ist jetzt ein Knopf (Datumssprung per Klick).
   Er soll wie ein Titel aussehen, aber erkennen lassen, dass man klicken kann. */
.cal-nav .title-btn{border:none;background:transparent;font-family:inherit;
  font-size:inherit;font-weight:inherit;color:inherit;cursor:pointer;
  padding:2px 7px;border-radius:6px;display:inline-flex;align-items:center;gap:5px}
.cal-nav .title-btn:hover{background:var(--hover);color:var(--accent)}
.cal-nav .title-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
/* Datums-Menü (Monat/Jahr/Pfeile) — am Titel ausgerichtet, im Fenster gehalten */
.cal-titel-menu{position:fixed;z-index:var(--z-pop,2000);padding:8px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow);animation:modalIn var(--dur-2) ease;min-width:236px}
.ctm-jahr{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.ctm-pfeil{border:1px solid transparent;background:transparent;color:var(--text2);
  cursor:pointer;border-radius:6px;width:26px;height:24px;display:inline-flex;
  align-items:center;justify-content:center;padding:0}
.ctm-pfeil:hover{background:var(--hover);color:var(--accent);border-color:var(--border)}
.ctm-jahr-txt{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ctm-monate{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ctm-m{border:1px solid transparent;background:transparent;color:var(--text);
  font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
  height:27px;border-radius:6px;padding:0}
.ctm-m:hover{background:var(--hover);border-color:var(--border)}
.ctm-m.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 38%,var(--border))}
.ctm-m:focus-visible,.ctm-pfeil:focus-visible,.ctm-fuss button:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:1px}
.ctm-fuss{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.ctm-fuss button{flex:1;border:1px solid var(--border);background:transparent;
  color:var(--text);font-family:inherit;font-size:11.5px;font-weight:700;
  height:26px;border-radius:6px;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:5px}
.ctm-fuss button:hover{background:var(--hover);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.view-switch{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--card)}
.view-switch button{border:none;background:transparent;color:var(--text2);padding:7px 15px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background var(--tr)}
.view-switch button:hover{background:var(--hover);color:var(--text)}
.view-switch button.active{background:var(--accent);color:#fff}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-left:8px}
.seg button{border:none;background:transparent;color:var(--text2);padding:4px 11px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
.seg button:hover{background:var(--hover)}
.seg button.active{background:var(--accent);color:#fff}
.cal-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.cal-wrap .cal-scroll{overflow-x:auto}
/* Monat */
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);min-width:760px}
.month-dow{padding:10px 8px;text-align:center;font-size:11.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border)}
.month-cell{min-height:104px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px;cursor:pointer;background:var(--card)}
.month-cell:nth-child(7n){border-right:none}
.month-cell.other{background:var(--hover);opacity:.55}
.month-cell.today{background:var(--accent-light)}
.month-cell .md{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px;padding:2px 6px;border-radius:50%;display:inline-block}
.month-cell.today .md{background:var(--accent);color:#fff}
.month-ev{display:block;font-size:11px;line-height:1.35;padding:2px 5px;margin-bottom:2px;border-radius:4px;background:var(--accent-light);color:var(--accent-dark);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.month-ev:hover{filter:brightness(.95)}
.month-ev .evt{font-weight:600}
/* Woche */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);min-width:860px}
.week-day{border-right:1px solid var(--border);min-height:520px;padding:6px}
.week-day:last-child{border-right:none}
.week-day .wd{padding:8px 6px;text-align:center;font-size:12.5px;font-weight:600;border-radius:6px;margin-bottom:6px;color:var(--text2)}
.week-day.today .wd{background:var(--accent);color:#fff}
.week-day .wd small{display:block;font-size:10.5px;font-weight:500;opacity:.75}
.week-ev{display:block;font-size:11.5px;line-height:1.35;padding:5px 7px;margin-bottom:4px;border-radius:5px;background:var(--accent-light);color:var(--accent-dark);cursor:pointer;border-left:3px solid var(--accent)}
.week-ev:hover{filter:brightness(.95)}
.week-ev .evt{font-weight:600;display:block}
.week-ev .evtm{font-size:10.5px;opacity:.8}
/* Tag (Zeitliste) */
.day-view{max-width:760px;margin:0 auto}
.day-head{padding:14px 18px;font-size:16px;font-weight:700;border-bottom:1px solid var(--border)}
.day-row{display:flex;gap:14px;padding:10px 18px;border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start}
.day-row:hover{background:var(--hover)}
/* Suchtreffer-Highlight im Kalender (openCalFromSearch) */
.cal-hl{outline:2px solid var(--hl);outline-offset:-2px;background:var(--hl-bg) !important;animation:calHlPulse var(--dur-pulse) ease 2}
.cal-hl-row{outline:2px solid var(--hl);outline-offset:-2px;background:var(--hl-bg) !important;animation:calHlPulse var(--dur-pulse) ease 2}
@keyframes calHlPulse{0%,100%{outline-color:var(--hl)}50%{outline-color:var(--hl-bg-2)}}
.day-row .dr-t{font-size:12.5px;font-weight:600;color:var(--cal);min-width:96px;padding-top:2px}
.day-row .dr-t.allday{color:var(--text2)}
.day-row .dr-b{flex:1;min-width:0}
.day-row .dr-b .dr-title{font-size:13.5px;font-weight:600}
.day-row .dr-b .dr-sub{font-size:12px;color:var(--text2);margin-top:1px}
.day-empty{padding:26px 18px;text-align:center;color:var(--text2);font-size:13px}

/* ===== Kalender-App Office365-Stil ===== */
.cal-ribbonbar{flex:none;background:linear-gradient(180deg,var(--card) 0%,color-mix(in srgb,var(--accent) 5%,var(--bg)) 100%);border:1px solid var(--border);border-radius:var(--radius-lg);border-bottom:1px solid var(--border);margin:0 0 10px;box-shadow:var(--shadow)}
.cal-ribbonbar .mrb-tabs{display:flex;align-items:flex-end;gap:2px;padding:0 8px;background:var(--card);border-bottom:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.cal-ribbonbar .mrb-tab{border:none;background:none;font-family:inherit;font-size:12.5px;color:var(--text2);padding:8px 14px 6px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;border-radius:6px 6px 0 0;white-space:nowrap;flex:none;transition:color var(--tr),background var(--tr)}
.cal-ribbonbar .mrb-tab:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cal-ribbonbar .mrb-tab.on{color:var(--accent-dark);background:color-mix(in srgb,var(--accent) 10%,var(--bg));border-bottom-color:var(--accent);font-weight:600}
.cal-ribbonbar .mrb-collapse{margin-left:auto;border:none;background:none;color:var(--text2);cursor:pointer;padding:4px 8px;margin-bottom:3px;border-radius:6px;display:inline-flex;align-items:center;flex:none}
.cal-ribbonbar .mrb-collapse:hover{background:var(--hover);color:var(--text)}
.cal-ribbonbar .mrb-panels{display:flex;align-items:stretch;gap:0;padding:4px 8px 6px;overflow-x:auto;overflow-y:hidden;background:var(--bg);border-radius:0 0 var(--radius-lg) var(--radius-lg);scrollbar-width:thin}
.cal-ribbonbar .mrb-panel{display:none}
.cal-ribbonbar .mrb-panel.on{display:flex;align-items:stretch;gap:0;flex:0 0 auto}
.cal-ribbonbar.rb-collapsed .mrb-panels{display:none}
/* 3-Spalten-Layout */
.cal-app{display:flex;gap:0;height:calc(100vh - 66px - 44px - 60px - 60px);min-height:480px}
.cal-mini-col{width:200px;flex:none;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.cal-mini-head{display:flex;align-items:center;justify-content:space-between;gap:4px}
.cal-mini-title{font-size:12.5px;font-weight:700;color:var(--text);flex:1;text-align:center}
.cal-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.cal-mini-grid .cm-dow{font-size:10.5px;font-weight:700;color:var(--text2);text-align:center;padding:2px 0;text-transform:uppercase}
.cal-mini-grid .cm-day{font-size:11px;text-align:center;padding:4px 0;border-radius:8px;cursor:pointer;color:var(--text2);position:relative;transition:background var(--dur-1),color var(--dur-1),transform var(--dur-1)}
.cal-mini-grid .cm-day:hover{background:var(--hover);color:var(--text);transform:scale(1.08)}
.cal-mini-grid .cm-day.other{opacity:.35}
.cal-mini-grid .cm-day.today{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,var(--accent-2)));color:#fff;font-weight:700;box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 35%,transparent)}
.cal-mini-grid .cm-day.sel{outline:2px solid var(--accent);outline-offset:-1px}
.cal-mini-grid .cm-day.has{font-weight:700;color:var(--accent-dark)}
.cal-mini-grid .cm-day.has::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent)}
.cal-mini-grid .cm-day.today.has::after{background:#fff}
.cal-mini-legend{display:flex;flex-direction:column;gap:4px;padding-top:6px;border-top:1px solid var(--border);font-size:11px;color:var(--text2)}
.cal-mini-legend-item{display:flex;align-items:center;gap:6px}
.cal-mini-legend-item .dot{width:8px;height:8px;border-radius:50%;flex:none}
/* Kalender-Überlagerung (Office365) */
.cal-ovl-head{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--text2);padding-top:8px;border-top:1px solid var(--border);margin-top:4px}
.cal-ovl-list{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.cal-ovl-it{padding:5px 7px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--text);transition:background var(--dur-1)}
.cal-ovl-it:hover{background:var(--hover)}
.cal-ovl-it .ovl-dot{width:10px;height:10px;border-radius:4px;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 0%,transparent)}
/* Gitea-Issue #120: Der Farbpunkt ist jetzt ein Knopf (Farbpalette per Klick).
   Er muss wie ein Punkt aussehen, aber als Knopf bedienbar sein. */
.cal-ovl-it .ovl-dot{border:none;padding:0;cursor:pointer;transition:transform var(--dur-2) ease}
.cal-ovl-it .ovl-dot:hover{transform:scale(1.35)}
.cal-ovl-it .ovl-dot:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Farbpalette am Punkt */
.cal-farbe-menu{position:fixed;z-index:var(--z-pop,2000);display:flex;flex-wrap:wrap;
  gap:6px;align-items:center;padding:8px;max-width:200px;background:var(--card);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);
  animation:modalIn var(--dur-2) ease}
.cal-farbe-punkt{width:20px;height:20px;border-radius:6px;border:1px solid var(--border);
  cursor:pointer;padding:0}
.cal-farbe-punkt:hover{transform:scale(1.15)}
.cal-farbe-punkt.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.cal-farbe-punkt:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.cal-farbe-auto{border:1px solid var(--border);background:transparent;color:var(--text2);
  font-family:inherit;font-size:11px;font-weight:700;height:20px;padding:0 8px;
  border-radius:6px;cursor:pointer}
.cal-farbe-auto:hover{background:var(--hover);color:var(--text)}
/* Suche in der Kalender-Liste (erscheint erst ab vielen Kalendern) */
.cal-ovl-suche{padding:2px 2px 6px}
.cal-ovl-inp{width:100%;box-sizing:border-box;border:1px solid var(--border);
  border-radius:7px;background:var(--card);color:var(--text);font-family:inherit;
  font-size:11.5px;padding:5px 8px;min-height:26px}
.cal-ovl-inp:focus{outline:none;border-color:var(--accent)}
.cal-ovl-inp::placeholder{color:var(--text2)}
/* Konto-Gruppen innerhalb eines Abschnitts */
.ovl-konto{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text2);padding:6px 6px 3px}
.cal-ovl-leer{font-size:11.5px;color:var(--text2);padding:8px 6px;font-style:italic}
.cal-ovl-it .ovl-acc{font-size:10.5px;color:var(--text2);font-weight:400}
.cal-ovl-it input{width:15px;height:15px;flex:none;cursor:pointer;accent-color:var(--accent)}
.cal-ovl-it .ovl-color{width:18px;height:18px;padding:0;border:none;background:none;cursor:pointer;flex:none}
.cal-ovl-it .ovl-color::-webkit-color-swatch-wrapper{padding:0}
.cal-ovl-it .ovl-color::-webkit-color-swatch{border:1px solid var(--border);border-radius:5px}
/* B9: Überlappende Termine markieren */
.cal-tgrid .tg-ev.cal-overlap{border-left:3px solid var(--danger);}
/* B7: Erinnerungs-Badge */
.evt-rem{display:inline-flex;align-items:center;margin-left:4px;color:var(--accent);vertical-align:-1px}
.cal-month .cm-cell .cm-ev .evt-rem{color:var(--accent)}
/* B5: Drag&Drop-Zustände */
.cal-tgrid .tg-ev.cal-dragging{opacity:.4;cursor:grabbing}
.cal-tgrid .tg-day-col.cal-drop-hot{outline:2px dashed var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.cal-col-resize{width:6px;cursor:col-resize;flex:none;background:transparent;transition:background var(--tr)}
.cal-col-resize:hover{background:var(--accent-light)}
.cal-main-col{flex:1;min-width:0;display:flex;flex-direction:column}
.cal-navbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 8px}
/* Zeitraster (Tag/Woche) — modern */
.cal-tgrid{display:flex;flex-direction:column;height:100%;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);scrollbar-width:thin}
.cal-tgrid .tg-head{display:flex;border-bottom:1px solid var(--border);position:sticky;top:0;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(8px);z-index:var(--z-base-2)}
.cal-tgrid .tg-gutter{width:56px;flex:none;border-right:1px solid var(--border)}
.cal-tgrid .tg-day{flex:1;min-width:0;text-align:center;padding:10px 4px;font-size:12px;font-weight:700;color:var(--text2);border-right:1px solid var(--border);transition:background var(--dur-2)}
.cal-tgrid .tg-day:last-child{border-right:none}
.cal-tgrid .tg-day.today{color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.cal-tgrid .tg-day .tg-dn{display:block;font-size:11px;font-weight:600;opacity:.7;text-transform:uppercase;letter-spacing:.3px}
.cal-tgrid .tg-body{display:flex;flex:1;min-height:0}
.cal-tgrid .tg-gutter-col{width:56px;flex:none;border-right:1px solid var(--border);position:relative}
.cal-tgrid .tg-hour{position:absolute;right:8px;font-size:11px;color:var(--text2);transform:translateY(-50%);font-variant-numeric:tabular-nums}
.cal-tgrid .tg-day-col{flex:1;min-width:0;position:relative;border-right:1px solid var(--border)}
.cal-tgrid .tg-day-col:last-child{border-right:none}
.cal-tgrid .tg-day-col .tg-hourline{position:absolute;left:0;right:0;border-top:1px solid var(--border);opacity:.4}
.cal-tgrid .tg-day-col .tg-hourline.half{border-top-style:dotted;opacity:.2}
.cal-tgrid .tg-day-col .tg-now{position:absolute;left:0;right:0;border-top:2px solid var(--danger);z-index:var(--z-base);box-shadow:0 0 8px color-mix(in srgb,var(--danger) 40%,transparent)}
.cal-tgrid .tg-day-col .tg-now::before{content:'';position:absolute;left:-5px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 20%,transparent)}
/* Termin-Kacheln im Zeitraster — modern: Farbverlauf, weiche Schatten, abgerundet */
.cal-tgrid .tg-ev{position:absolute;left:3px;right:3px;background:linear-gradient(135deg,var(--accent-light),color-mix(in srgb,var(--accent) 8%,var(--card)));color:var(--accent-dark);border-left:3px solid var(--accent);border-radius:8px;padding:3px 7px;font-size:11px;line-height:1.35;cursor:pointer;overflow:hidden;z-index:var(--z-base);box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease,filter var(--dur-1) ease}
.cal-tgrid .tg-ev[style*="--evc"]{background:linear-gradient(135deg,color-mix(in srgb,var(--evc) 22%,var(--card)),color-mix(in srgb,var(--evc) 6%,var(--card)));color:var(--evc);border-left-color:var(--evc)}
.cal-tgrid .tg-ev.evt-pending{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 6%,transparent),color-mix(in srgb,var(--accent) 6%,transparent) 6px,transparent 6px,transparent 12px);border-left:3px dashed var(--accent);color:var(--text2);opacity:.8;box-shadow:none}
.cal-tgrid .tg-ev.evt-pending[style*="--evc"]{border-left-color:var(--evc);color:var(--evc)}
.cal-tgrid .tg-ev:not(:has(.evt-logo:hover)):hover{filter:brightness(1.02);z-index:var(--z-base-3);transform:translateY(-1px);box-shadow:0 4px 12px var(--line)}
.cal-tgrid .tg-ev:has(.evt-logo:hover){transform:none;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cal-tgrid .tg-ev .tg-ev-t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-tgrid .tg-ev .tg-ev-tm{font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cal-tgrid .tg-day-col .tg-ev.allday{position:relative;left:auto;right:auto;margin:2px 4px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,var(--accent-2)));color:#fff;border-left:none;box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 30%,transparent)}
.cal-tgrid .tg-day-col .tg-ev.allday[style*="--evc"]{background:linear-gradient(135deg,var(--evc),color-mix(in srgb,var(--evc) 75%,var(--accent-2)))}
/* Monatsraster — modern */
.cal-month{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.cal-month .cm-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--card) 92%,transparent)}
.cal-month .cm-head .cm-dow{padding:10px;text-align:center;font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.cal-month .cm-body{display:grid;grid-template-columns:repeat(7,1fr);flex:1;min-height:0}
.cal-month .cm-cell{min-height:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px;cursor:pointer;background:var(--card);display:flex;flex-direction:column;overflow:hidden;transition:background var(--dur-2)}
.cal-month .cm-cell:nth-child(7n){border-right:none}
.cal-month .cm-cell.other{background:color-mix(in srgb,var(--hover) 60%,transparent);opacity:.55}
.cal-month .cm-cell.today{background:color-mix(in srgb,var(--accent) 5%,var(--card))}
.cal-month .cm-cell:hover{background:var(--hover)}
.cal-month .cm-cell .cm-num{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:3px;padding:2px 7px;border-radius:999px;display:inline-block;align-self:flex-start;transition:background var(--dur-2),color var(--dur-2)}
.cal-month .cm-cell.today .cm-num{background:var(--accent);color:#fff;box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 35%,transparent)}
.cal-month .cm-cell .cm-ev{display:block;font-size:10.5px;line-height:1.35;padding:2px 5px;margin-bottom:2px;border-radius:5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease}
.cal-month .cm-cell .cm-ev.evt-pending{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 5%,transparent),color-mix(in srgb,var(--accent) 5%,transparent) 5px,transparent 5px,transparent 10px);border:1px dashed var(--accent);color:var(--text2);opacity:.8}
.cal-month .cm-cell .cm-ev.evt-pending[style*="--evc"]{border-color:var(--evc);color:var(--evc)}
.cal-month .cm-cell .cm-ev:hover{transform:translateX(1px);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.cal-month .cm-cell .cm-more{font-size:11px;font-weight:700;color:var(--accent);padding:1px 4px;cursor:pointer}
.cal-month .cm-cell .cm-more:hover{text-decoration:underline}
/* Tagesliste (Tag-Ansicht als Liste) */
.cal-daylist{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;height:100%;overflow-y:auto}
.cal-daylist .dl-head{padding:14px 18px;font-size:16px;font-weight:700;border-bottom:1px solid var(--border)}
.cal-daylist .dl-row{display:flex;gap:14px;padding:10px 18px;border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start}
.cal-daylist .dl-row:hover{background:var(--hover)}
.cal-daylist .dl-row .dl-t{font-size:12.5px;font-weight:600;color:var(--cal);min-width:96px;padding-top:2px}
.cal-daylist .dl-row .dl-t.allday{color:var(--text2)}
.cal-daylist .dl-row .dl-b{flex:1;min-width:0}
.cal-daylist .dl-row .dl-b .dl-title{font-size:13.5px;font-weight:600}
.cal-daylist .dl-row .dl-b .dl-sub{font-size:12px;color:var(--text2);margin-top:1px}
.cal-daylist .dl-empty{padding:26px 18px;text-align:center;color:var(--text2);font-size:13px}
/* Kalender füllt die verfügbare Viewport-Höhe */
#calAgenda{flex:1;min-height:0;display:flex;flex-direction:column}
#calAgenda .cal-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
#calAgenda .cal-wrap .cal-scroll{flex:1;min-height:0;overflow-y:auto}
#calAgenda .week-grid,#calAgenda .month-grid{height:100%}
#calAgenda .week-day{min-height:0}
/* Termin-Fenster (schwebendes Modal, Office365-Stil) */
.cal-win-body{display:flex;flex-direction:column;flex:1}
.cal-win-field{display:flex;flex-direction:column;}
.cal-win-grid2{display:grid;grid-template-columns:1fr 1fr;}
.cal-win-allday{display:flex;align-items:center;cursor:pointer;border:1px solid var(--border);}
.cal-win-ribbon{flex:none;}
.cal-win-ribbon .mrb-tabs{display:flex;align-items:flex-end;gap:2px;padding:0 8px;}
.cal-win-ribbon .mrb-tab{border:none;background:none;font-family:inherit;color:var(--text2);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;border-radius:6px 6px 0 0;white-space:nowrap;flex:none;transition:color var(--tr),background var(--tr)}
.cal-win-ribbon .mrb-tab:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cal-win-ribbon .mrb-tab.on{color:var(--accent-dark);background:color-mix(in srgb,var(--accent) 10%,var(--bg));border-bottom-color:var(--accent);font-weight:600}
.cal-win-ribbon .mrb-panels{display:flex;align-items:stretch;gap:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.cal-win-ribbon .mrb-panel{display:none}
.cal-win-ribbon .mrb-panel.on{display:flex;align-items:stretch;gap:0;flex:0 0 auto}

/* Kontakte */
/* Kap. 300 (#104): Hoehe aus der Messung (var(--app-h)) statt geratener 150px. */
.con-app{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;height:var(--app-h,calc(100vh - 150px));min-height:480px}
.con-item{display:flex;gap:12px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--border);align-items:center}
.pres-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text2);margin-left:auto;flex:none;padding:3px 9px;border-radius:999px;border:1px solid var(--border);background:var(--card)}
.pres-chip .pd{width:8px;height:8px;border-radius:50%;background:var(--text2);box-shadow:none}
.pres-chip .pd.on{background:var(--ok)}
.pres-chip .pd.call{background:var(--danger)}
.pres-chip.on{color:var(--ok);border-color:rgba(16,124,16,.35)}
.pres-chip.call{color:var(--danger);border-color:rgba(164,38,44,.35)}
.con-item .av{width:36px;height:36px;border-radius:50%;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.con-item .av.con-photo{background-size:cover;background-position:center}
.con-photo-btn{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;line-height:20px;text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
.con-photo-btn:hover{background:var(--accent-dark)}
.con-photo-del{position:absolute;left:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:var(--danger);color:#fff;font-size:11px;line-height:20px;text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
.con-photo-del:hover{background:color-mix(in srgb,var(--danger) 80%,#000)}
.con-item .con-photo-btn,.con-item .con-photo-del{display:none}
.con-item .nm{font-size:13px;font-weight:600}
.con-group-h{display:flex;align-items:center;gap:7px;padding:9px 14px 5px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text2)}
.con-item .em{font-size:11.5px;color:var(--text2)}
.con-mail-btn{border:none;background:none;cursor:pointer;color:var(--accent);padding:2px;border-radius:4px;display:inline-flex;flex:none;opacity:.7}
.con-mail-btn:hover{opacity:1;background:var(--hover)}
/* NC-Picker: Filter/Sortierung/Mehrfachauswahl */
.nc-tools{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.nc-type-row{display:flex;gap:4px;flex-wrap:wrap}
.nc-type{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:3px 10px;font-size:11px;color:var(--text2);cursor:pointer;font-family:inherit;transition:all var(--tr)}
.nc-type:hover{background:var(--hover)}
.nc-type.sel{background:var(--accent);border-color:var(--accent);color:#fff}
.nc-sort-row{display:flex;align-items:center;gap:8px}
.nc-item:hover{background:var(--hover)}
.nc-item.sel{background:var(--accent-light);outline:1px solid var(--accent)}
.nc-type-badge{font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--text2);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;flex:none}
.con-pane,.con-pane .inner{display:none}
.con-list{overflow-y:auto;min-height:0;height:100%}
.evt-detail .row{display:flex;gap:12px;padding:8px 0;align-items:flex-start;font-size:14px}
.sr-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 12px;border-bottom:1px solid var(--border);margin-bottom:10px}
.sr-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer}
.sr-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.sr-tab .mc{font-size:11px;opacity:.85}
.sr-pane .mod-item{padding:8px 10px;border-radius:6px}
.sr-pane .mod-item:hover{background:var(--hover)}
.evt-detail .row .lbl{width:110px;flex-shrink:0;color:var(--text2);font-size:12.5px;padding-top:2px}
.evt-detail .row .val{flex:1;line-height:1.55}
.evt-detail .row .val a{color:var(--accent);word-break:break-all}
/* Reich gestaltetes Termin-Detail (Outlook-/Mail-App-Stil): Sektionen, Avatare, Chips.
   Kopfbereich mit Farbverlauf + Akzent (nutzt --evc = Kalkülfarbe, sonst Akzent). */
.cal-detail-body{display:flex;flex-direction:column;gap:2px}
.evt-dhead{padding:16px 18px 14px;border-bottom:1px solid var(--border);margin-bottom:6px;border-radius:12px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--evc,var(--accent)) 16%,var(--card)), color-mix(in srgb,var(--evc,var(--accent)) 4%,var(--card)) 70%);
  border:1px solid color-mix(in srgb,var(--evc,var(--accent)) 20%,var(--border))}
.evt-dhead-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.evt-dhead-meet{flex:none;padding-top:2px}
.evt-dtitle{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.3}
.evt-type-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border))}
.evt-type-badge.free{background:color-mix(in srgb,var(--ok) 12%,var(--card));color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--border))}
.evt-type-badge.priv{background:color-mix(in srgb,var(--muted-strong) 15%,var(--card));color:var(--muted-strong);border-color:color-mix(in srgb,var(--muted-strong) 35%,var(--border))}
.evt-dloc{display:inline-flex;align-items:center;gap:5px;color:var(--evc,var(--accent));font-size:12.5px;text-decoration:none;margin-top:4px;font-weight:600}
.evt-dloc:hover{text-decoration:underline}
.evt-dsection{padding:10px 12px;margin-bottom:8px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--evc,var(--accent)) 7%,var(--card)),color-mix(in srgb,var(--evc,var(--accent)) 1%,var(--bg)) 65%)}
.evt-dsection:last-child{margin-bottom:0}
.evt-drow{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text);padding:2px 0}
.evt-drow i{color:var(--evc,var(--accent));filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--evc,var(--accent)) 40%,transparent))}
.evt-dlbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--evc,var(--accent));display:flex;align-items:center;gap:5px;margin-bottom:7px}
/* Gitea-Issue #128: eigenes Fenster für eine App (?app=<sec>).
   In diesem Fenster ist die App die Hauptsache: das Rail (App-Wechsler) wird
   ausgeblendet und die App-Spalte beginnt ganz links. Der Nutzer wechselt die App
   in einem solchen Fenster NICHT — dafür ist das Dashboard-Fenster da. Der Kopf
   bleibt (Suche, Glocke, Konto), damit das Fenster nicht ärmer wirkt als das
   Dashboard. */
body.app-only .rail{display:none}
body.app-only .header{left:0}
body.app-only .main{padding-left:16px}
body.app-only .hub-tile-row,
body.app-only #hubModule,
body.app-only .hub-module-bar{display:none}
/* Fensterkennzeichnung: dezent im Titelbereich, damit man mehrere Fenster
   auseinanderhalten kann („App-Fenster" vs. Dashboard). */
body.app-only .app-only-tag{display:inline-flex}
.app-only-tag{display:none;align-items:center;gap:5px;margin-left:8px;padding:2px 8px;
  border:1px solid var(--border);border-radius:999px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;color:var(--text2)}

/* Gitea-Issue #128: Schalter „Apps öffnen" in den Einstellungen.
   Neutral, Farbe nur als Signal (aktiver Zustand trägt den Akzent). */
.aw-list{display:flex;flex-direction:column;gap:2px}
.aw-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px}
.aw-row:hover{background:var(--hover)}
.aw-ico{flex:none;display:inline-flex;color:var(--text2)}
.aw-name{flex:1;min-width:0;font-size:13px;font-weight:600}
.aw-sw{flex:none;display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.aw-b{border:none;background:transparent;color:var(--text2);font-family:inherit;
  font-size:11.5px;font-weight:700;padding:4px 11px;cursor:pointer;min-height:24px}
.aw-b:hover{background:var(--hover);color:var(--text)}
.aw-b.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.aw-b:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
/* Gitea-Issue #73: Anhänge im Termin-Fenster. Farbe bleibt Signal — die Kante
   trägt die Terminfarbe, die Fläche bleibt neutral. Mail-Dateien bekommen ein
   kleines „Mail"-Kennzeichen, damit der Doppelklick-Weg klar ist. */
.evt-atts{display:flex;flex-wrap:wrap;gap:6px}
.evt-att{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:5px 9px;border:1px solid var(--border);border-radius:var(--r-sm,8px);
  background:var(--card);font-size:12.5px;cursor:pointer;
  transition:border-color var(--dur-2) ease,background var(--dur-2) ease}
.evt-att:hover{border-color:var(--evc,var(--accent));
  background:color-mix(in srgb,var(--evc,var(--accent)) 6%,var(--card))}
.evt-att:focus-visible{outline:2px solid var(--focus-ring,#0b6bcb);outline-offset:2px}
.evt-att i{flex:none;color:var(--evc,var(--accent))}
.evt-att-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.evt-att-gr{flex:none;font-size:11px;color:var(--text2)}
.evt-att-tag{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;padding:1px 5px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--evc,var(--accent)) 45%,var(--border));
  color:var(--evc,var(--accent))}
/* Kontextmenü auf einem Anhang (an der Maus positioniert) */
.evt-att-menu{position:fixed;z-index:var(--z-pop,2000);min-width:210px;padding:5px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm,8px);
  box-shadow:var(--shadow);animation:modalIn var(--dur-2) ease}
.evt-att-mi{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:6px;
  font-size:13px;cursor:pointer}
.evt-att-mi:hover{background:var(--hover)}
.evt-att-mi i{color:var(--text2)}
/* Ehrlicher Hinweis bei .msg (Näherung, nicht voll lesbar) */
.evt-att-hinweis{padding:8px 12px;margin-bottom:8px;font-size:12.5px;
  border:1px solid var(--warn,#b45309);border-radius:var(--r-sm,8px);
  background:color-mix(in srgb,var(--warn,#b45309) 8%,var(--card));
  color:var(--warn-strong,#ca5010)}
.evt-dlbl i{color:var(--evc,var(--accent))}
.evt-dsub{font-size:12px;color:var(--text2);margin-top:1px}
.evt-org{display:flex;align-items:center;gap:10px}
.evt-org .mc-chip-av{width:30px;height:30px;font-size:12px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.evt-ppills{display:flex;flex-wrap:wrap;gap:6px}
.evt-pchip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:12.5px;font-weight:600;color:var(--text);cursor:default;box-shadow:var(--shadow-sm)}
.evt-pnm{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evt-pdot{width:9px;height:9px;border-radius:50%;flex:none;border:2px solid var(--card)}
.evt-pdot.ok{background:var(--ok)}
.evt-pdot.no{background:var(--danger)}
.evt-pdot.maybe{background:var(--warn-strong)}
.evt-pdot.wait{background:var(--state-neutral-dot)}
/* Kap. 222: Antwort-Status als TEXT im Teilnehmer-Chip (Punkt allein war keine
   Auskunft). Farbe bleibt Signal, der Text ist die belastbare Information. */
.evt-pst{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;letter-spacing:.2px}
.evt-pst.st-accepted{color:var(--state-ok-text);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.evt-pst.st-declined{color:#a11;background:color-mix(in srgb,var(--danger) 14%,transparent)}
.evt-pst.st-tentative{color:var(--state-warn-text);background:color-mix(in srgb,var(--warn-strong) 16%,transparent)}
.evt-pst.st-needs-action{color:var(--state-neutral-text);background:color-mix(in srgb,var(--state-neutral-dot) 18%,transparent)}
.evt-ddesc{font-size:13.5px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word}
.evt-qarow{padding:10px 4px;background:color-mix(in srgb,var(--accent) 4%,transparent);border-radius:10px;margin-top:4px}
.evt-qlbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);display:flex;align-items:center;gap:5px;margin-bottom:8px}

/* Dateien */
.files-grid{display:block;width:100%}
/* Dateien: Listenansicht mit Spalten */
.file-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
/* Gitea-Issue #148 (P1, Akzeptanzkriterium „Toolbar sticky bei Scroll"):
   Beim Scrollen rutschte die Werkzeugleiste (Ansicht-Umschalter, Filter, Sortierung,
   Suche) aus dem Bild — man musste hochscrollen, um die Ansicht zu wechseln.
   Gemessen (Lokal-Render, 1600x950): #fileTools stand auf `position: static`, top 236;
   nach 500px Scroll war sie aus dem Sichtfeld. Das Dokument scrollt (kein eigener
   Container), der Kopf ist `position: fixed` mit 58px Höhe — daher klebt die Leiste
   bei top:58px direkt darunter.
   Transparenz + Blur wie im Kalender-Zeitraster (.cal-tgrid .tg-head), damit die
   Dateiliste beim Durchlaufen nicht durch die Leiste scheint. */
#fileTools{position:sticky;top:58px;z-index:var(--z-base-3)}
/* Hintergrund als Pseudo-Element statt Padding: so bleibt das Layout um einen
   Pixel unveraendert (gemessen: Padding erzeugte in ALLEN fuenf Themes +6px
   Seitenhoehe durch Margin-Collapsing). Das Element selbst hat kein Padding,
   nur die Flaeche dahinter wird gemalt. */
#fileTools::before{content:'';position:absolute;inset:-6px -6px -4px;z-index:-1;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);
  border-radius:0 0 8px 8px}
#fileTools:empty::before{display:none}
.file-view-switch{display:flex;gap:3px;border:1px solid var(--border);border-radius:8px;padding:2px;background:var(--card)}
.file-view-switch .file-type{border:none;border-radius:6px;padding:3px 9px}
.file-view-switch .file-type.sel{background:var(--accent);color:#fff}
/* Dateityp-Filter — Kap. 8.2 (Manual): „Filter-Chip | Pille, 30 px. Ruhig: keine
   Kante, Text #5A6672. Gewaehlt: Flaeche #DEEBF7, Text #115EA3, halbfett"

   Vorher gemessen: Hoehe 20 px (Soll 30), 1 px Kante (Manual: keine), Ruhefarbe
   #14201... statt #5A6672, und gewaehlt vollflaechig in --accent mit weisser
   Schrift. Die vollflaechige Markenfarbe ist der Primaeraktion vorbehalten
   (Kap. 9.6) — ein Filter ist kein Befehl. Deshalb gewaehlt in der ruhigen
   Zustandsflaeche, wie das Manual sie vorgibt.
   Der Ansichtswechsel (Kachel/Liste/Detail) ist ein SEGMENT, kein Filter
   (Kap. 8.2: Segment fuer 2-4 gleichwertige Sichten) und behaelt seine eigene
   Regel in .file-view-switch. */
.file-type-row{display:flex;gap:6px;flex-wrap:wrap}
/* Kap. 8.2 nennt 30 px fuer den Filter-Chip, Kap. 12.4 verlangt als
   Abnahmebedingung >= 32 px fuer ALLE Ziele. Der Widerspruch im Manual wird
   zugunsten der schaerferen Abnahmebedingung geloest (32 px) — ein 30-px-Chip
   wuerde die Abnahme nie bestehen. */
.file-type{border:0;background:transparent;border-radius:var(--radius-pill);
  min-height:32px;padding:0 12px;font-size:12.5px;color:#5A6672;
  cursor:pointer;font-family:inherit;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out)}
.file-type:hover{background:var(--hover)}
.file-type.sel{background:#DEEBF7;color:#115EA3;font-weight:600}
html[data-theme="dark"] .file-type.sel{background:rgba(91,140,255,.18);color:#cfe0ff}
.file-sort-row{display:flex;align-items:center;gap:6px}
.file-search-wrap{position:relative;display:inline-flex}
.file-search-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--text2);font-size:15px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:50%}
.file-search-clear:hover{background:var(--hover);color:var(--text)}
.file-sort-arrow{font-size:8px;margin-left:2px;vertical-align:1px}
.fc-sort{cursor:pointer;user-select:none;border-radius:4px;padding:2px 4px;margin:-2px -4px}
.fc-sort:hover{background:var(--hover);color:var(--text)}
.fc-sort.on{color:var(--accent)}
.file-table{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;max-height:var(--app-h,calc(100vh - 300px));overflow-y:auto}
/* Kap. 300 (#104): der Dateien-Rahmen darf die Sektion nicht sprengen — die
   Tabelle/Kacheln scrollen in sich (gemessen: Sektion 1031px statt 950px). */
#sec-files > .files-wrap, #sec-files > .files-app{max-height:100%;min-height:0;overflow:hidden}
.file-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;transition:background var(--tr)}
.file-row:last-child{border-bottom:none}
.file-row:hover{background:var(--hover)}
.file-row.zebra{background:rgba(127,127,127,.045)}
.file-row.zebra:hover{background:var(--hover)}
.file-row.file-head{background:var(--bg);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text2);cursor:default}
.file-row.file-head:hover{background:var(--bg)}
.file-row.file-dir .fc-name{font-weight:600}
.fc-name{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-size{width:90px;flex:none;font-size:12px;color:var(--text2)}
.fc-date{width:140px;flex:none;font-size:12px;color:var(--text2)}
.fc-type{width:80px;flex:none;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.3px}
/* Dateien: Kachelansicht */
.files-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;max-height:var(--app-h,calc(100vh - 300px));overflow-y:auto;padding:2px}
.file-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:13px 14px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--card);transition:box-shadow var(--tr),border-color var(--tr),transform var(--dur-1) ease}
.file-tile:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.file-tile .ft-ic{width:42px;height:42px;border-radius:10px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.file-tile .ft-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.file-tile .ft-meta{font-size:11px;color:var(--text2)}
/* Dateien: Detailansicht */
.file-detail-wrap{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:14px;align-items:start}
.file-detail-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;max-height:60vh;overflow-y:auto}
.file-drow{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-drow:last-child{border-bottom:none}
.file-drow:hover{background:var(--hover)}
.file-drow.sel{background:var(--accent-light);color:var(--accent);font-weight:600}
.file-detail-pane{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);border-radius:10px;padding:18px;background:var(--card);align-items:flex-start;min-width:0}
.fdp-preview{width:100%;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;min-height:120px;max-height:46vh;overflow:auto}
.fdp-preview img{max-width:100%;max-height:44vh;object-fit:contain;border-radius:6px}
.fdp-preview.fdp-frame{padding:0;overflow:hidden;background:var(--card)}
.fdp-preview iframe{width:100%;height:42vh;border:none}
.fdp-textprev{margin:0;padding:12px;width:100%;max-height:42vh;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text)}
/* Office-Viewer (SheetJS/mammoth/CSV/PPTX) */
.fdp-sheet,.fdp-csv{width:100%;max-height:42vh;overflow:auto;background:var(--card)}
.fdp-sheet table,.fdp-csv table{border-collapse:collapse;font-size:12px;min-width:100%}
.fdp-sheet td,.fdp-sheet th,.fdp-csv td,.fdp-csv th{border:1px solid var(--border);padding:4px 8px;white-space:nowrap;text-align:left}
.fdp-sheet th,.fdp-csv th{background:var(--bg);font-weight:700;position:sticky;top:0}
.fdp-docx{width:100%;max-height:42vh;overflow:auto;background:var(--card);padding:16px;font-size:13px;line-height:1.6}
.fdp-docx h1,.fdp-docx h2,.fdp-docx h3{color:var(--text);margin:10px 0 6px}
.fdp-docx img{max-width:100%}
.fdp-pptx{width:100%;max-height:42vh;overflow:auto;display:flex;flex-direction:column;gap:10px;background:var(--bg);padding:10px;align-items:center}
.fdp-pptx img{max-width:100%;border:1px solid var(--border);border-radius:6px;background:#fff;box-shadow:var(--shadow-sm)}
.fdp-preview.fdp-noprev{flex-direction:column;gap:10px;color:var(--text2);font-size:12px;min-height:140px}
.fc-check{width:30px;flex:none;display:flex;align-items:center;justify-content:center}
.file-check, .file-check-all{cursor:pointer;accent-color:var(--accent)}
/* Kap. 8.4 (Manual): "Bei mehr als einer markierten Zeile erscheint ein schwebender
   Auswahlbalken unten mittig (nicht oben): er meldet '3 ausgewaehlt' und bietet die
   Massenaktionen. Er liegt damit ueber dem Leerraum unter der letzten Zeile und
   verdeckt keine Inhalte."

   Vorher stand die Leiste IM Fluss (margin:8px 0) direkt unter dem Dateikopf — sie
   schob den Inhalt nach unten und war bei langen Listen nicht mehr im Blick. Gemessen
   vorher: position:static, margin 8px 0, width 100%. Jetzt schwebend unten mittig.
   Der Zaehler zaehlt sichtbar hoch: die Hoehe bleibt konstant, damit die Leiste beim
   Zaehlen nicht springt. */
.file-selbar{display:flex;align-items:center;gap:10px;
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:var(--z-pop);
  margin:0;padding:8px 14px;
  min-height:46px;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--card);box-shadow:var(--shadow);
  transition:opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out)}
/* Bei 0 mit 120 ms Ausblendung (Kap. 8.4) — display:none bleibt als Rueckfall,
   damit Vorlesehilfen und Tab-Reihenfolge den Balken nicht erreichen. */
.file-selbar[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .file-selbar{transition:none}
}
/* ===========================================================================
   Gitea-Issue #141 (P1): Ordner-Baum als linke Spalte + verbesserter Breadcrumb.
   Zwei Spalten: Baum (fest, einklappbar) und Inhalt (flexibel). Der Baum
   bekommt eine eigene Scrollfläche, damit lange Ablagen die Seite nicht ziehen.
   =========================================================================== */
/* Gitea-Issue #141/#145 (Nutzer-Befund): „Kachelansicht und Seitenleiste einklap-
   pen bricht die Sicht." Ursache: `display:none` am Baum lässt das Grid auf EINE
   Spalte kollabieren, während `grid-template-columns:0 1fr` bleibt — der Inhalt
   landet dann in der 0px-Spalte (gemessen: mainBreite 0, Kacheln auf 190px
   gequetscht, Liste 3114px hoch). Lösung: die Spaltenzahl am ZUSTAND festmachen
   (`.files-split.ohne-baum`), nicht am Vorhandensein des Baums. */
.files-split{display:grid;grid-template-columns:236px 1fr;gap:14px;align-items:start}
.files-split.ohne-baum{grid-template-columns:1fr}
.files-main{min-width:0}
.files-tree{background:var(--card);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 250px)}
.files-split.ohne-baum .files-tree{display:none}
.ft-head{display:flex;align-items:center;gap:6px;padding:8px 10px;
  border-bottom:1px solid var(--border);flex:none}
.ft-title{flex:1;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;color:var(--text2)}
.ft-collapse{border:none;background:transparent;color:var(--text2);cursor:pointer;
  padding:2px;border-radius:5px;display:inline-flex}
.ft-collapse:hover{background:var(--hover);color:var(--accent)}
.ft-quick{flex:none;padding:6px 8px;border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:3px}
.ft-quick:empty{display:none}
.ft-q-t{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;
  color:var(--text2);padding:4px 2px 1px}
.ft-q{display:flex;align-items:center;gap:6px;border:none;background:transparent;
  color:var(--text);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
  padding:4px 6px;border-radius:6px;text-align:left;width:100%}
.ft-q span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-q svg{flex:none;color:var(--accent)}
.ft-q:hover{background:var(--hover)}
.ft-q-zu svg{color:var(--text2)}
/* Gitea-Issue #149: zuletzt geöffnete DATEIEN — zweizeilig, weil der Ordnerpfad
   die Datei erst einordbar macht („Präsentation.pptx" gibt es mehrfach). */
.ft-q-datei{align-items:flex-start}
.ft-q-datei span:first-of-type{margin-top:0}
.ft-q-pfad{display:block;font-size:10px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ft-q-datei .ft-q-innere{display:flex;flex-direction:column;min-width:0;flex:1}
.ft-body{flex:1;overflow-y:auto;padding:4px 4px 8px}
.ft-row{display:flex;align-items:center;gap:4px;padding:3px 6px 3px 0;
  border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--text);min-height:25px}
.ft-row:hover{background:var(--hover)}
.ft-row.aktiv{background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);font-weight:700}
.ft-row.aktiv .ft-ico{color:var(--accent)}
.ft-pfeil{border:none;background:transparent;color:var(--text2);cursor:pointer;
  width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border-radius:4px;transition:transform var(--dur-2) ease}
.ft-pfeil.offen{transform:rotate(90deg)}
.ft-pfeil:hover{background:var(--hover);color:var(--accent)}
.ft-ico{flex:none;display:inline-flex;color:var(--text2)}
.ft-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-stern{flex:none;display:inline-flex;color:var(--accent)}
.ft-leer{font-size:11.5px;color:var(--text2);padding:8px 6px;font-style:italic}
/* Gitea-Issue #145: Fehler-/Leerzustand mit mehreren Handlungs-Knöpfen.
   Die Haus-Klasse .empty-state gibt es; hier nur die Knopfzeile, weil zwei
   Wege angeboten werden (Retry + Nextcloud bzw. Upload + Neuer Ordner). */
.empty-state .es-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.empty-state .es-btns .es-a{margin-top:0}
/* Gitea-Issue #141/#145 (Nutzer-Wunsch: „breadcrumbs grösser", Einstiegsknoten war
   doppelt, und insgesamt „sehr plain und trocken"): Der Breadcrumb ist jetzt eine
   echte Wegweiser-Leiste mit grösseren Krümeln, Home-Symbol und Chevron-Trennern. */
.files-crumbs{gap:2px !important;padding:10px 2px 8px !important;font-size:13.5px !important;
  align-items:center}
.file-crumb{display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px !important;font-size:13px !important;font-weight:600;
  border-radius:8px;transition:background var(--dur-2) ease,color var(--dur-2) ease,
  border-color var(--dur-2) ease,transform var(--dur-2) ease}
.file-crumb:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
  transform:translateY(-1px)}
.file-crumb:active{transform:translateY(0)}
.file-crumb svg{color:var(--accent);opacity:.85}
.file-crumb-sep{color:var(--text2);opacity:.55;flex:none;margin:0 1px}
.crumb-jetzt{font-size:13.5px;font-weight:800;color:var(--accent);padding:5px 12px;
  background:color-mix(in srgb,var(--accent) 13%,transparent);border-radius:8px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
/* Zähler rechts in der Breadcrumb-Zeile */
#fileCrumbs .tb-info{margin-left:auto}
@media (max-width:900px){
  /* Auf schmalen Geräten übereinander — der Baum bekommt eine feste Höhe */
  .files-split{grid-template-columns:1fr}
  .files-split:has(.files-tree.zu){grid-template-columns:1fr}
  .files-tree{max-height:230px}
}
/* Gitea-Issue #139: Fortschritt beim Hochladen — ein Balken, der Name und Zähler
   trägt. Bleibt schmal, damit die Dateiliste nicht springt. */
.file-forts{margin:6px 0 8px;padding:8px 12px;border:1px solid var(--border);
  border-radius:8px;background:var(--card)}
.file-forts .ff-txt{display:flex;align-items:center;gap:7px;font-size:12px;
  color:var(--text2);margin-bottom:6px}
.file-forts .ff-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text);font-weight:600}
.file-forts .ff-pct{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}
.file-forts .ff-bar{height:4px;border-radius:999px;background:var(--hover);overflow:hidden}
.file-forts .ff-bar span{display:block;height:100%;background:var(--accent);
  border-radius:999px;transition:width var(--dur-3) ease}
/* Gitea-Issue #139: Ablagefläche — beim Ziehen aus dem Betriebssystem zeigt die
   Liste deutlich, dass sie die Dateien annimmt. */
#filesList.file-drop-aktiv{outline:2px dashed var(--accent);outline-offset:-6px;
  border-radius:10px;background:color-mix(in srgb,var(--accent) 5%,transparent)}
#filesList.file-drop-aktiv::after{content:"Zum Hochladen hier ablegen";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:13px;font-weight:700;color:var(--accent);pointer-events:none;
  background:var(--card);padding:6px 14px;border-radius:999px;border:1px solid var(--accent)}
#filesList{position:relative}
.file-row.sel{background:rgba(11,107,203,.08)}
.file-row.sel:hover{background:rgba(11,107,203,.11)}
.fdp-ic{width:76px;height:76px;border-radius:16px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.fdp-name{font-size:15px;font-weight:700;word-break:break-word}
.fdp-meta{font-size:12px;color:var(--text2)}
.fdp-row{display:flex;gap:8px;font-size:12.5px;color:var(--text2)}
.fdp-row b{color:var(--text);font-weight:600}
.fdp-actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
/* Gitea-Issue #151: Versionshistorie im Detail-Pane. Zurueckhaltend gehalten —
   die Liste ist Beiwerk, die Vorschau und die Aktionen bleiben der Blickfang.
   Farben ausschliesslich ueber Theme-Variablen (hell/dunkel geprueft). */
.fdp-vers{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
.fdp-vhead{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.fdp-vcount{background:var(--bg);border:1px solid var(--border);border-radius:999px;
  padding:0 6px;font-size:10.5px;font-weight:700;color:var(--text);text-transform:none;letter-spacing:0}
.fdp-vrow{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;font-size:12px}
.fdp-vrow:hover{background:var(--bg)}
.fdp-vnr{font-weight:700;color:var(--text);min-width:26px;font-variant-numeric:tabular-nums}
.fdp-vzeit{color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fdp-vsize{color:var(--muted);font-variant-numeric:tabular-nums}
.fdp-vtaten{display:flex;gap:4px}
.fdp-vbtn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  padding:0;border:1px solid var(--border);border-radius:5px;background:var(--card);
  color:var(--text);cursor:pointer}
.fdp-vbtn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.file{display:flex;gap:12px;padding:14px 15px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:box-shadow var(--tr),transform var(--dur-1) ease,border-color var(--tr);background:var(--card);align-items:center}
.file:hover{box-shadow:var(--shadow);transform:translateY(-1px);border-color:var(--accent)}
.file .fi{width:40px;height:40px;border-radius:10px;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.file .fi i{width:18px;height:18px}
.file .nm{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .mt{font-size:11.5px;color:var(--text2)}

/* Modal (nur Bestaetigungen) */
.modal-ov{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:flex-start;justify-content:center;padding-top:18vh}
.modal-win{position:fixed;background:var(--card);width:380px;max-width:94vw;max-height:calc(100vh - 12vh - 24px);display:flex;flex-direction:column;}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal-h{display:flex;align-items:center;gap:10px;flex-shrink:0}
.modal-h .mt{font-size:14px;flex:1;display:flex;align-items:center;gap:9px}
.modal-h .mt i{width:16px;height:16px;}
.modal-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;text-decoration:none;transition:background var(--tr),color var(--tr)}
.btn-compose{font-size:13.5px;padding:9px 16px;margin-left:6px}
.modal-x{border:none;font-size:17px;cursor:pointer;width:28px;height:28px;line-height:1}
.modal-b{overflow-y:auto;flex:1;min-height:0}
.form-actions{margin-top:8px}
.btn-d{border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer}
.btn-s{border-radius:8px;padding:9px 18px;font-size:14px;cursor:pointer}

/* ---------- Login (SSO-Vorab) ---------- */
#login{position:fixed;inset:0;background:var(--login-grad);display:none;align-items:center;justify-content:center;z-index:var(--z-login)}
#login.show{display:flex}
/* FOUC-Schutz: solange body.preauth (vor Auth-Check), ist das komplette App-UI ausgeblendet */
body.preauth .rail, body.preauth .header, body.preauth main,
body.preauth #msgrSide, body.preauth #msgrPopups, body.preauth .msgr-reopen{display:none !important}
.login-box{background:#fff;border-radius:var(--radius-lg);padding:42px 46px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.35);max-width:400px}
/* Kap. 476: Das Zeichen selbst bringt seine Kachelform mit — der Container traegt
   deshalb weder Hintergrund noch Schatten noch Rahmen, sonst liegt ein zweiter
   Rahmen um die Kachel. Der Text im SVG wurde entfernt: er hing an der Schrift des
   Geraets (dieselbe Falle wie im Website-Master, Kap. 475). */
/* Kap. 476: Das Zeichen selbst bringt seine Kachelform mit (r=5 auf 24 Einheiten).
   Der Container braucht daher KEINEN eigenen Rahmen und KEINEN Schatten mehr — sonst
   liegt ein zweiter Rahmen um die Kachel. Groesse 48 px (Manual Kap. 3.5). */
.login-box .lg{display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  background:transparent;border-radius:0;box-shadow:none}
.login-box .lg svg{width:48px;height:48px;display:block;border-radius:0}
.login-box h2{font-size:20px;margin-bottom:6px;color:var(--login-text)}
.login-box p{color:var(--login-text2);font-size:13.5px;margin-bottom:24px}
.login-box button{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:11px 26px;font-size:14px;font-weight:600;cursor:pointer;transition:background var(--tr)}
.login-box button:hover{background:var(--accent-dark)}
/* ---------- Gesundheits-Ampel (Startseite) ---------- */
.greeting{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.health-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);transition:transform var(--dur-1);color:var(--text)}
/* Gitea-Issue #82: Dienststatus als kleiner Indikator IN der Kopfzeile.
   Deutlich zurückhaltender als die frühere Hero-Pille (kein Schatten, kein
   großer Rahmen) — aber weiter klickbar in die Statusseite. Farbe = Signal. */
.head-health{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:2px;
  padding:3px 9px;border:1px solid var(--border);border-radius:999px;background:transparent;
  color:var(--text2);font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:border-color var(--dur-2) ease,color var(--dur-2) ease}
.head-health:hover{border-color:color-mix(in srgb,currentColor 45%,var(--border))}
.head-health:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.head-health .h-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--text2)}
.head-health.ok{color:var(--ok)}
.head-health.ok .h-dot{background:var(--ok)}
.head-health.warn{color:var(--warn-strong)}
.head-health.warn .h-dot{background:var(--warn-strong)}
.head-health.bad{color:var(--danger)}
.head-health.bad .h-dot{background:var(--danger)}
/* Bei schmalem Kopf ausblenden — dort hat der Text keinen Platz */
@media(max-width:1180px){ .head-health{display:none !important} }
.health-pill:hover{transform:translateY(-1px)}
.health-pill .h-dot{width:9px;height:9px;border-radius:50%;flex:none}
.health-pill.ok{color:var(--ok);border-color:rgba(15,123,15,.4);background:rgba(15,123,15,.08)}
.health-pill.ok .h-dot{background:var(--ok)}
.health-pill.warn{color:var(--warn-strong);border-color:rgba(202,80,16,.45);background:rgba(202,80,16,.1)}
.health-pill.warn .h-dot{background:var(--warn-strong)}
.health-pill.bad{color:var(--danger);border-color:rgba(164,38,44,.45);background:var(--danger-bg)}
.health-pill.bad .h-dot{background:var(--danger)}
.health-pill.bad{animation:pulse var(--dur-pulse) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(164,38,44,.35)}50%{box-shadow:0 0 0 6px rgba(164,38,44,0)}}

/* Module-Karten (Start) */
.modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:18px}
.mod-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;transition:box-shadow var(--tr),transform var(--dur-1) ease}
.mod-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.mod-h{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);font-weight:600;cursor:pointer;transition:background var(--tr)}
.mod-h:hover{background:var(--hover)}
.mod-h .mc{margin-left:auto;font-size:11.5px;color:var(--text2);font-weight:400}
.mod-item{display:flex;gap:12px;padding:10px 12px;border-radius:9px;cursor:pointer;align-items:flex-start;text-decoration:none;color:var(--text);transition:background var(--tr)}
.mod-item:hover{background:var(--hover)}
.mod-item .mi{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.mod-item .mi i{width:14px;height:14px}
.mod-item .b{flex:1;min-width:0}
.mod-item .t1{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-item .t2{font-size:12px;color:var(--text2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mod-item .t3{font-size:11.5px;color:var(--text2);line-height:1.45;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mod-item mark, .sp-item mark, .sr-item mark{background:var(--mark-bg);color:inherit;border-radius:2px;padding:0 1px}
.mod-item .tm{font-size:11px;color:var(--text2);flex-shrink:0;padding-top:1px}

/* Kachel-Hinweis (z. B. "API-Token fehlt"): mehrzeilige Anleitung ohne line-clamp-Abschneiden */
.mod-item .t2.tile-hint{display:block;-webkit-line-clamp:unset;line-height:1.5;margin-top:3px}

.mail-flagbtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:none;color:var(--text2);border-radius:4px;cursor:pointer;opacity:.4;transition:all var(--dur-2);flex:none;padding:0}
.mail-flagbtn:hover{opacity:1;color:var(--accent)}
.mail-flagbtn.on{opacity:1;color:var(--cal);background:color-mix(in srgb,var(--cal) 14%,transparent)}
/* ---------- Mail-Fenster (parallel, minimierbar) ---------- */
.mw-ov{position:fixed;inset:0;z-index:var(--z-window);pointer-events:none;overflow:hidden}
.mw{pointer-events:auto;position:absolute;display:flex;flex-direction:column;background:var(--card,#fff);min-width:340px;min-height:220px;}
.mw-h{display:flex;align-items:center;gap:8px;cursor:move;user-select:none;font-size:13px;font-weight:600;}
.mw-h .mt{flex:1;display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mw-h .mt i{width:14px;height:14px;flex:none}
.mw-h .mw-popout{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;margin-right:2px}
.mw-h .mw-popout svg,.mw-h .mw-popout i{width:14px;height:14px}
.mw-h button{background:none;border:none;cursor:pointer;padding:2px 5px;line-height:1}
.mw-b{flex:1;overflow:hidden;padding:0;position:relative;min-height:0;display:flex;flex-direction:column}
.mw-b .mail-detail{height:100%;overflow:hidden;flex:1;min-height:0}
/* Antwort-Editor im Mail-Fenster: unten fixiert, aber begrenzte Höhe (Verlauf bleibt sichtbar) */
.mw-b .mail-detail .reply-editor{flex:0 1 auto;max-height:45%;border-top:1px solid var(--line));display:flex;flex-direction:column;min-height:0;border-radius:0;border-left:none;border-right:none;border-bottom:none;overflow:hidden}
.mw-b .mail-detail.md-answering .reply-editor{flex:1 1 auto;max-height:none}
.mw-b .mail-detail .reply-editor .re-body{flex:1;min-height:0;max-height:none}
/* Compose-Fenster (Editor als Direkt-Kind): volle Fensterhöhe */
.mw-b > .reply-editor{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:0;border-left:none;border-right:none;border-bottom:none}
.mw-b > .reply-editor .re-fields{flex:none}
.mw-b > .reply-editor .re-toolbar{flex:none}
.mw-b > .reply-editor .re-body{flex:1;min-height:0;max-height:none}
.mw-b > .reply-editor .re-actions{flex:none}
/* Mail-Fenster-System: Taskleiste (minimiert) + Resize-Handle — CSS fehlte,
   deshalb waren Minimieren und Größenändern nicht bedienbar */
.mw-z{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:8px 14px;z-index:var(--z-window-bar);align-items:center;flex-wrap:wrap}
.mw-tab{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;background:var(--card,#fff);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;max-width:240px;white-space:nowrap;overflow:hidden}
.mw-tab .mw-x{margin-left:6px;color:var(--text2,#888);font-weight:700;font-size:11px}
.mw-tab .mw-x:hover{color:var(--danger)}
.mw.mini{display:none}
.mw-rz{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:var(--z-resize);touch-action:none}
.mw-rz::after{content:'';position:absolute;right:4px;bottom:4px;width:9px;height:9px;border-right:2px solid var(--text2,#999);border-bottom:2px solid var(--text2,#999);opacity:.55;border-bottom-right-radius:2px}
.mw-resizing{user-select:none;cursor:nwse-resize}
.mw-resizing iframe{pointer-events:none}
/* Popup-Modus (?mail=<id>, eigenes Browser-Fenster): nur die Mail-App zeigen
   (mit globalem Ribbon), Rail/Header/Messenger ausblenden, main füllt das Fenster */
body.mailpopup .rail, body.mailpopup .header,
body.mailpopup #msgrSide, body.mailpopup #msgrPopups, body.mailpopup .msgr-reopen{display:none !important}
body.mailpopup{background:var(--bg)}
body.mailpopup main{display:block !important;padding:0;margin:0;height:100vh;overflow:hidden;max-width:none}
body.mailpopup main .sec{height:100%}
/* FOUC-Schutz: im Popup-Modus NIE eine andere Section zeigen (v.a. das Start-Hub),
   bis showSec('mail') nach dem Laden läuft. Sonst blitzt das ganze Dashboard auf. */
body.mailpopup main .sec:not(#sec-mail){display:none !important}
body.mailpopup #sec-mail{display:flex;flex-direction:column;min-height:0;height:100%}
body.mailpopup #sec-mail .mail-app{flex:1;min-height:0;height:auto}
/* Messenger-Sidebar-Margin + Header-Padding im Popup entfernen (sonst leerer Platz rechts/oben) */
body.mailpopup main{margin-right:0 !important}
/* Fokussierte Mail-Ansicht: Tree + Liste ausblenden, nur Detail-Pane + Ribbon */
body.mailpopup #sec-mail .mail-app{grid-template-columns:1fr}
body.mailpopup #sec-mail .mail-tree-col,
body.mailpopup #sec-mail .mail-list-col,
body.mailpopup #sec-mail .mail-col-resize{display:none !important}
body.mailpopup #sec-mail .mail-detail{border-left:none;height:100%;min-height:0}
body.mailpopup #sec-mail .mail-detail .md-head{flex:none;max-height:45%;overflow-y:auto}
body.mailpopup #sec-mail .mail-detail .md-scroll{flex:1;min-height:0;overflow-y:auto}
body.mailpopup .mailpopup-cont{position:fixed;z-index:var(--z-window);overflow:hidden}
body.mailpopup .mailpopup-cont .mail-detail{height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--card);}

.reply-editor.mail-comp{border:none;box-shadow:none;background:var(--card);border-radius:0;min-width:340px}
/* Tabs (helle Leiste, aktiver Tab mit Akzent-Unterstrich) */
.mc-ribbon{flex:none;}
.mc-rb-tabs{display:flex;align-items:flex-end;gap:2px;padding:0 8px;background:var(--card);border-bottom:1px solid var(--border)}
.mc-rb-tab{border:none;background:none;font-family:inherit;font-size:12.5px;color:var(--text2);padding:8px 14px 6px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;border-radius:6px 6px 0 0;white-space:nowrap;flex:none;transition:color var(--tr),background var(--tr)}
.mc-rb-tab:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.mc-rb-tab.on{color:var(--accent-dark);border-bottom-color:var(--accent);font-weight:600}
.mc-rb-collapse{margin-left:auto;border:none;background:none;color:var(--text2);cursor:pointer;padding:4px 8px;margin-bottom:3px;border-radius:6px;display:inline-flex;align-items:center;flex:none}
.mc-rb-collapse:hover{background:var(--hover);color:var(--text)}
/* Button-Zeile: dezent abgesetzter Hintergrund, Gruppen nie unter Inhaltsbreite (Scrollbar statt Clipping) */
.mc-rb-panels{display:flex;align-items:stretch;gap:0;padding:4px 8px 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.mc-rb-panel{display:none}
.mc-rb-panel.on{display:flex;align-items:stretch;gap:0;flex:0 0 auto}
.mc-grp{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;min-width:max-content;flex:0 0 auto}
.mc-grp-row{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.mc-grp-lbl{text-align:center;white-space:nowrap;flex:none;}
/* Gitea-Issue #96: Hinweis im Termin-Fenster, wenn der Kalender nur Leserecht hat.
   Ruhig und erklärend — keine Warnfarbe, es ist kein Fehler des Nutzers. Der
   Hinweis ersetzt die gesperrten Aktionen und sagt, WARUM sie fehlen. */
.cal-ro-hinweis{display:flex;align-items:center;gap:8px;margin:8px 10px 4px;
  padding:7px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--hover);color:var(--text2);font-size:12px;line-height:1.35}
.cal-ro-hinweis i{flex:none;color:var(--text2)}
/* Buttons: klarer gap, Label bricht auf max. 2 Zeilen um, kein Overlap */
.mc-btn{background:transparent;min-width:30px;height:30px;padding:0 8px;font-size:12.5px;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;flex:0 0 auto}
.mc-btn:hover{color:var(--accent-dark);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
/* Editor-Modus (HTML/Text) als klar getrennte Segment-Gruppe */
.mc-mode-grp{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--card);flex:none;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08))}
.mc-mode-grp .mc-mode-btn{border:none;background:transparent;font-family:inherit;font-size:12px;font-weight:600;color:var(--text2);padding:6px 14px;cursor:pointer;transition:background var(--tr),color var(--tr);display:inline-flex;align-items:center}
.mc-mode-grp .mc-mode-btn+.mc-mode-btn{border-left:1px solid var(--border)}
.mc-mode-grp .mc-mode-btn.act{background:var(--accent);color:#fff}
.mc-mode-grp .mc-mode-btn:not(.act):hover{background:var(--hover);color:var(--text)}
.mc-btn:disabled,.mc-btn.off{opacity:.4;cursor:default;pointer-events:none}
.mc-btn.act{background:var(--accent-light);color:var(--accent-dark);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.mc-btn.big{flex-direction:column;align-self:stretch;height:auto;width:max-content;white-space:normal}
.mc-btn.big .mc-btn-l{text-align:center;overflow-wrap:break-word;}
.mc-btn svg,.mc-btn i{width:15px;height:15px;flex:none}
.mc-btn.big svg,.mc-btn.big i{width:18px;height:18px}
.mc-btn-sep{width:1px;height:22px;background:var(--border);margin:0 6px;flex:none;align-self:center}
.mc-btn .caret{font-size:9px;color:var(--text2);line-height:1}
/* Senden prominent */
.mc-send-grp{flex-direction:column;justify-content:center;gap:6px;padding:4px 12px 4px 4px;border-right:1px solid var(--border)}
.mc-send{display:flex;border-radius:var(--radius);overflow:hidden;flex:none}
.mc-send-main{border:none;background:var(--accent);color:#fff;font-family:inherit;font-size:13px;font-weight:600;padding:9px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background var(--tr)}
.mc-send-main:hover{background:var(--accent-dark)}
.mc-send-main:disabled{opacity:.6;cursor:default}
.mc-send-main svg{width:15px;height:15px}
.mc-send-later{border:none;background:var(--bg);color:var(--text);font-family:inherit;font-size:12.5px;font-weight:600;padding:9px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background var(--tr);border-left:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.mc-send-later:hover{background:var(--accent-light);color:var(--accent)}
.mc-send-later svg{width:15px;height:15px}
/* Gitea-Issue #50: sichtbarer Zeitplan-Zustand im Sendebereich. Farbe bleibt
   Signal — 1px Kante + Warnfarbe (nicht der Modulakzent), weil ein geplanter
   Versand eine Abweichung vom Normalfall ist. */
.mc-send{position:relative}
.mc-sn-chip{display:inline-flex;align-items:center;gap:6px;align-self:center;margin-right:8px;
  padding:4px 8px;border:1px solid color-mix(in srgb,var(--warn) 55%,var(--border));
  border-radius:999px;background:color-mix(in srgb,var(--warn) 10%,transparent);
  color:var(--warn);font-size:11.5px;font-weight:600;white-space:nowrap}
.mc-sn-chip b{font-weight:700}
.mc-sn-chip svg{width:12px;height:12px;flex:none}
.mc-sn-x{border:0;background:none;color:inherit;cursor:pointer;padding:0;display:inline-flex;
  align-items:center;opacity:.75}
.mc-sn-x:hover{opacity:1}
.mc-sn-x svg{width:11px;height:11px}
.mc-sn-quick{display:flex;align-items:center;gap:7px;padding:5px 14px}
.mc-sn-quick.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:600}
.mc-from-row{display:flex;align-items:center;gap:6px}
.mc-from-row .re-lbl{min-width:auto;font-size:11.5px}
.mc-from-val{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
/* Aktionsleiste unter dem Editor: Verwerfen | Entwurf | ... | Von | Senden */
.mc-actions{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:nowrap;min-width:0}
.mc-actions .mc-act{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;transition:all var(--dur-1);font-family:inherit;white-space:nowrap;flex:none}
.mc-actions .mc-act-icon{padding:7px;width:32px;height:32px;justify-content:center}
.mc-actions .mc-act:hover{color:var(--accent)}
.mc-actions .mc-act svg,.mc-actions .mc-act i{width:14px;height:14px}
.mc-actions .mc-actions-sp{flex:1;min-width:8px}
.mc-actions .mc-from-mini{font-size:11.5px;color:var(--text2);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.mc-actions .mc-from-sel{font-size:12px;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:6px;padding:3px 6px;font-family:inherit;cursor:pointer;flex:none;max-width:180px}
.mc-actions .mc-from-wrap{display:inline-flex;align-items:center;gap:6px;flex:none;max-width:220px}
.mc-actions .mc-from-av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;flex:none;overflow:hidden}
.mc-actions .mc-from-wrap .mc-from-sel{max-width:170px}
.mc-from-top{display:flex;align-items:center;gap:6px;padding:6px 12px;border-bottom:1px solid var(--border);background:var(--bg);flex:none}
.mc-from-top .mc-from-lbl{font-size:11.5px;color:var(--text2);font-weight:600;flex:none}
.mc-from-top .mc-from-av{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10.5px;font-weight:600;flex:none;overflow:hidden}
.mc-from-top .mc-from-sel{font-size:12px;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:6px;padding:3px 6px;font-family:inherit;cursor:pointer;max-width:200px}
/* Spacer + "In eigenem Tab öffnen"-Button rechts in der From-Zeile des Editors.
   Design konsistent zu .re-act (Mail-Aktions-Buttons): subtiler Ghost-Icon-Button. */
.mc-from-top .mc-from-sp{margin-left:auto}
.mc-from-top .mc-popup-top{flex:none;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text2);cursor:pointer;transition:all var(--dur-2)}
.mc-from-top .mc-popup-top:hover{background:var(--hover,var(--panel2));color:var(--text);border-color:var(--border)}
.mc-from-top .mc-from-mini{font-size:12px;color:var(--text);flex:none}
.mc-actions .mc-send{flex:none}
.mc-actions .mc-send .mc-send-main{padding:8px 16px;font-size:12.5px;white-space:nowrap}
.mail-detail.md-answering .reply-editor.mail-comp .mc-actions{flex:none;order:4}
.mw-b > .reply-editor .mc-actions{flex:none}
/* Adressblock + Chips */
.mc-addr{flex:none;}
.mc-addr-row{display:flex;align-items:center;gap:8px;padding:5px 0;position:relative}
.mc-addr-row + .mc-addr-row{border-top:1px dashed transparent}
.mc-addr-lbl{font-size:13px;font-weight:600;min-width:48px;text-align:right;flex:none;letter-spacing:.3px}
.mc-addr-box{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-height:28px;padding:2px 0;cursor:text}
.mc-addr-box:focus-within{border-radius:6px;padding-left:4px}
.mc-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:var(--radius-pill);padding:2px 4px 2px 3px;font-size:12px;max-width:380px;animation:modalIn var(--dur-1) ease}
.mc-chip .mc-chip-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;flex-shrink:0}
.mc-chip .mc-chip-e{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.mc-chip .mc-chip-x{border:none;background:none;color:var(--text2);cursor:pointer;padding:1px 3px;border-radius:50%;display:inline-flex}
.mc-chip .mc-chip-x:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.mc-chip .mc-chip-x svg{width:11px;height:11px}
.mc-chip.warn{background:color-mix(in srgb,var(--danger) 8%,transparent);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.mc-chip.warn .mc-chip-n{color:var(--danger)}
.mc-chip-av{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;flex:none}
.mc-addr-inp{flex:1;min-width:120px;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--text);padding:3px 0;outline:none}
.mc-addr-inp::placeholder{color:var(--text2);opacity:.7}
.mc-addr-acts{display:flex;gap:2px;flex:none}
.mc-addr-act{border:none;background:none;color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;padding:3px 7px;border-radius:5px;letter-spacing:.2px}
.mc-addr-act:hover{background:var(--hover);color:var(--text)}
.mc-addr-act.on{color:var(--accent);background:var(--accent-light)}
/* Suggest-Dropdown */
.mc-suggest{position:absolute;top:100%;left:0;right:0;z-index:var(--z-suggest);background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 36px rgba(0,0,0,.22);max-height:280px;overflow-y:auto;display:none}
.mc-suggest.open{display:block}
.mc-sug-h{font-size:11px;font-weight:700;color:var(--text2);padding:8px 12px 4px;text-transform:uppercase;letter-spacing:.4px;position:sticky;top:0;background:var(--card);z-index:var(--z-base-2)}
.mc-sug-it{display:flex;align-items:center;gap:9px;padding:6px 12px;cursor:pointer}
.mc-sug-it:hover,.mc-sug-it.hl{background:var(--hover)}
.mc-sug-it .mc-chip-av{width:26px;height:26px;font-size:11px}
.mc-sug-b{flex:1;min-width:0}
.mc-sug-n{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.mc-sug-e{font-size:11.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-sug-badge{font-size:10.5px;font-weight:700;color:var(--text2);background:var(--hover);border:1px solid var(--border);border-radius:var(--radius-pill);padding:1px 6px;letter-spacing:.3px}
.mc-sug-it .mc-pres{margin-left:auto;flex:none}
.mc-sug-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.mc-sug-dot.off{background:var(--text2);opacity:.4}
/* Betreff + Status */
.mc-subj-row{display:flex;align-items:center;gap:8px;padding:5px 14px 8px;border-bottom:1px solid var(--border);position:relative}
.mc-subj-row .re-lbl{min-width:auto}
.mc-subj-inp{flex:1;border:none;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);padding:3px 0;outline:none}
.mc-subj-inp::placeholder{color:var(--text2);opacity:.7;font-weight:400}
.mc-status{font-size:11px;color:var(--text2);white-space:nowrap;flex:none;display:none;align-items:center;gap:5px}
.mc-status.show{display:inline-flex}
.mc-status svg{width:12px;height:12px}
/* Editor-Layout, Collapsed, Selects */
.mail-comp .re-body{min-height:160px;max-height:none;flex:1 1 auto;background:var(--card)}
.mail-comp .attach-chips{flex:none;padding:0 14px 10px}
.mw-b > .reply-editor.mail-comp{flex:1;min-height:0;display:flex;flex-direction:column}
.mw-b > .reply-editor.mail-comp .mc-ribbon{flex:none}
.mw-b > .reply-editor.mail-comp .mc-addr{flex:none}
.mw-b > .reply-editor.mail-comp .mc-subj-row{flex:none}
.mw-b > .reply-editor.mail-comp .re-body{flex:1 1 auto;min-height:120px;overflow-y:auto}
.mw-b > .reply-editor.mail-comp .attach-chips{flex:none}
.mail-detail .reply-editor.mail-comp{display:flex;flex-direction:column;max-height:52%}
.mail-detail.md-answering{display:flex;flex-direction:column}
.mail-detail.md-answering .md-head{display:none}
.mail-detail.md-answering .md-scroll{display:none !important;flex:0 0 0;opacity:0;overflow:hidden;pointer-events:none;min-height:0;padding:0;margin:0;max-height:0}
.mail-detail.md-answering .reply-editor.mail-comp{flex:1 1 auto;max-height:none;min-height:200px}
.mail-detail.md-answering .reply-editor.mail-comp .mc-ribbon{flex:none;order:0}
.mail-detail.md-answering .reply-editor.mail-comp .mc-addr{flex:none;order:1;border-bottom:1px solid var(--border);background:var(--bg)}
.mail-detail.md-answering .reply-editor.mail-comp .mc-subj-row{flex:none;order:2}
.mail-detail.md-answering .reply-editor.mail-comp .re-body{flex:1 1 auto;order:3;min-height:120px;overflow-y:auto}
.reply-editor.mail-comp.rb-collapsed .mc-rb-panels{display:none}
.reply-editor.mail-comp.rb-collapsed .mc-rb-tabs{padding-bottom:4px}
.mc-sel{font-family:inherit;font-size:12px;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:5px;padding:3px 4px;max-width:92px;cursor:pointer;flex:none}
.mc-sel:focus{outline:none;border-color:var(--accent)}
.mc-grp-row .mc-sel{height:26px}
/* ===== KI-ASSISTENT ===== */
.ai-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-top:16px;display:flex;flex-direction:column}
.ai-head{padding:14px 18px 0;display:flex;flex-direction:column;gap:10px}
.ai-title{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600}
.ai-model{font-size:11px;font-weight:500;color:var(--text2);background:var(--accent-light);border:1px solid var(--border);padding:2px 8px;border-radius:999px}
.ai-title .tb-btn{margin-left:auto;padding:4px 10px;font-size:12px}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px}
.ai-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:12px;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text2);transition:all var(--dur-1)}
.ai-chip:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-light)}
.ai-body{min-height:120px;max-height:420px;overflow-y:auto;padding:10px 18px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.ai-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text2);font-size:13px;text-align:center;padding:28px 20px}
.ai-msg{padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.6;animation:fadeIn var(--dur-3) ease;word-break:break-word}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ai-user{align-self:flex-end;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border-bottom-right-radius:6px;box-shadow:0 2px 8px rgba(91,140,255,.18)}
.ai-bot{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.ai-q{white-space:pre-wrap}
.ai-p{margin:5px 0}
.ai-p:first-child{margin-top:0}
.ai-p:last-child{margin-bottom:0}
.ai-list{margin:5px 0;padding-left:20px}
.ai-list li{margin:3px 0}
.ai-code{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:ui-monospace,'Cascadia Code',monospace;font-size:12px;overflow-x:auto;white-space:pre-wrap;margin:6px 0}
.ai-icode{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-family:ui-monospace,monospace;font-size:12px}
.ai-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12.5px}
.ai-table th{background:var(--bg);padding:6px 10px;text-align:left;font-weight:700;border-bottom:2px solid var(--border)}
.ai-table td{padding:5px 10px;border-bottom:1px solid var(--border)}
.ai-table tr:last-child td{border-bottom:none}
.ai-table tr:hover td{background:var(--bg)}
.ai-link{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border var(--dur-2)}
.ai-link:hover{border-bottom-color:var(--accent)}
.ai-person{display:inline-block;background:var(--accent-light);color:var(--accent);padding:1px 7px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all var(--dur-1);border:1px solid transparent}
.ai-person:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
.person-menu{position:fixed;z-index:var(--z-top);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18);padding:6px;min-width:190px;animation:modalIn var(--dur-1) ease}
.person-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:none;background:none;color:var(--text);text-align:left;font-family:inherit;transition:background var(--dur-1)}
.person-menu-item:hover{background:var(--accent-light);color:var(--accent)}
.ai-thinking{display:flex;align-items:center;gap:8px;color:var(--text2)}
.ai-spinner{width:13px;height:13px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:aiSpin .7s linear infinite;flex:none}
@keyframes aiSpin{to{transform:rotate(360deg)}}
.ai-err{display:flex;align-items:center;gap:6px;color:var(--danger)}
.ai-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.ai-sugg{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border)}
.ai-sugg-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:6px}
.ai-act{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text);transition:all var(--dur-1);font-family:inherit}
.ai-act:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);transform:translateY(-1px)}
.ai-input-row{display:flex;gap:10px;padding:12px 18px 16px;border-top:1px solid var(--border)}
.ai-input{flex:1;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13.5px;outline:none}
.ai-input:focus{border-color:var(--accent)}
/* Vollbild-KI */
.ai-full{display:flex;flex-direction:column;height:calc(100vh - 150px);min-height:420px}
.ai-full-head{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 10px}
.ai-full-body{flex:1;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:12px}
.ai-full-body .ai-msg{max-width:78%}
.ai-full .ai-input-row{border-top:none;padding:14px 0 0}
/* ---------- Statusseite & Logviewer ---------- */
.status-banner{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:var(--radius);font-size:14.5px;font-weight:600;margin-bottom:16px;border:1px solid var(--border);background:var(--card)}
.status-banner .st-dot{width:11px;height:11px;border-radius:50%;flex:none}
.status-banner.ok{color:var(--ok);border-color:rgba(15,123,15,.35);background:rgba(15,123,15,.08)}
.status-banner.ok .st-dot{background:var(--ok)}
.status-banner.bad{color:var(--danger);border-color:rgba(164,38,44,.35);background:var(--danger-bg)}
.status-banner.bad .st-dot{background:var(--danger)}
.status-banner.warn{color:var(--warn-strong);border-color:rgba(202,80,16,.35);background:rgba(202,80,16,.08)}
.status-banner.warn .st-dot{background:var(--warn-strong)}
.status-grid{columns:2;column-gap:16px;margin-bottom:18px}
@media(max-width:1100px){.status-grid{columns:1}}
.status-cat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px 14px;break-inside:avoid;margin-bottom:14px}
.status-cat-head{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;padding:2px 0 9px;border-bottom:1px solid var(--border);margin-bottom:11px;color:var(--text)}
.status-cat-head i{flex:none}
.status-cat-head .mc{background:var(--accent-light);color:var(--accent);border-radius:999px;padding:1px 9px;font-size:11px;margin-left:auto}
.status-cat-head .mc.mc-bad{background:rgba(212,26,26,.12);color:var(--danger)}
.status-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.status-card{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:8px 10px;cursor:pointer;transition:box-shadow var(--tr),transform var(--dur-1);display:flex;align-items:center;gap:9px;flex-wrap:wrap;box-shadow:none;position:relative}
.status-card:hover{box-shadow:0 3px 10px var(--line);transform:translateY(-1px)}
.status-card .st-dot{width:10px;height:10px;border-radius:50%;flex:none}
.status-card .st-dot.up{background:var(--ok)}
.status-card .st-dot.down{background:var(--danger)}
.status-card .st-dot.starting{background:var(--warn-strong)}
/* Gitea-Issue #190: „abgeschlossen" — planmässig beendeter Einmal-Job (Schema-Migration).
   Bewusst NEUTRAL-grau, nicht grün: der Job läuft nicht mehr, er ist fertig. Grün würde
   „läuft und ist gesund" behaupten. Grau + Häkchen sagt die Wahrheit. */
.status-card .st-dot.done{background:var(--text2);opacity:.75}
.status-card .st-done{display:inline-flex;align-items:center;gap:3px;margin-top:2px;font-size:10.5px;color:var(--text2);font-weight:600}
.status-card .st-done i{opacity:.8}
.status-card .st-badge{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.22);position:relative}
.status-card .st-badge i{width:16px;height:16px}
.status-card .st-badge .st-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border:2px solid var(--card)}
.status-card .st-body{flex:1;min-width:0}
.status-card .st-name{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-card .st-name .st-ico{color:var(--text2);display:inline-flex;flex:none}
.status-card .st-sub{font-size:11.5px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-card .st-restarts{font-size:11px;color:var(--text2);flex:none;margin-left:auto}
/* Admin-Aktionen — EIGENE ZEILE unter dem Namen (Karte ist flex-wrap) */
.status-card .st-acts{display:flex;gap:3px;flex:none;margin-left:auto;flex-basis:100%;justify-content:flex-end;margin-top:2px;padding-top:6px;border-top:1px dashed var(--border);padding-left:0}
.status-card .st-act{width:22px;height:22px;border:1px solid var(--border);background:var(--bg);border-radius:6px;color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all var(--tr);flex:none}
.status-card .st-act:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.status-card .st-act:disabled{opacity:.35;cursor:not-allowed}
.status-card.st-admin .st-name{overflow:hidden;text-overflow:ellipsis}
.status-card .st-acts .st-act[title="Stoppen"]:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}
.st-stackbtn{border:1px solid var(--border);background:var(--card);border-radius:7px;padding:4px 10px;font-size:11.5px;font-family:inherit;color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;margin-left:4px;transition:all var(--tr)}
.st-stackbtn:hover{border-color:var(--accent);color:var(--accent)}
.log-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
/* ============ DOKUMENTATION (Führungskräfte-Onepager) ============ */
.docs-intro{display:flex;gap:22px;align-items:center;background:linear-gradient(135deg,var(--accent-light),transparent 60%);border:1px solid var(--border);border-radius:var(--radius);padding:22px 26px;margin-bottom:22px;flex-wrap:wrap}
.docs-intro-txt{flex:1;min-width:280px}
.docs-intro-txt h3{margin:0 0 8px;font-size:19px}
.docs-intro-txt p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--text)}
.docs-intro-txt p:last-child{margin-bottom:0}
.docs-intro-stats{display:flex;gap:12px;flex-wrap:wrap}
.doc-stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 18px;text-align:center;min-width:110px;box-shadow:var(--shadow)}
.doc-stat b{display:block;font-size:21px;color:var(--accent)}
.doc-stat span{font-size:11px;color:var(--text2)}
.docs-h{display:flex;align-items:center;gap:8px;margin:26px 0 12px;font-size:15.5px}
.docs-h i{color:var(--accent)}
.docs-hint{font-size:11px;color:var(--text2);font-weight:400}
/* Verknüpfungs-Graph (Obsidian-artig) — Container hat festes Seitenverhältnis
   (980:640 wie die SVG-viewBox), damit die %-positionierten Karten immer
   exakt auf den Linien liegen */
.docs-graph{position:relative;width:100%;aspect-ratio:980/640;max-height:640px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.docs-graph::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 45%,var(--accent-light),transparent 70%);opacity:.5;pointer-events:none}
.dg-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--border);border-radius:13px;padding:9px 13px 9px 9px;box-shadow:0 4px 14px rgba(0,0,0,.10);cursor:pointer;transition:transform var(--dur-2),box-shadow var(--dur-2),border-color var(--dur-2),opacity var(--dur-2);z-index:var(--z-base-2);white-space:nowrap;min-width:150px;backdrop-filter:blur(2px)}
.dg-node:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 8px 22px rgba(0,0,0,.16);border-color:var(--accent);z-index:var(--z-base-3)}
.dg-node-sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light),0 8px 22px rgba(0,0,0,.16)}
.dg-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15),0 2px 5px rgba(0,0,0,.18)}
.dg-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.dg-txt b{font-size:12.5px;color:var(--text)}
.dg-txt em{font-size:11px;color:var(--text2);font-style:normal;margin-top:2px}
.dg-node-api{min-width:178px;padding:12px 16px 12px 12px;border-width:2px}
.dg-node-api .dg-ico{width:40px;height:40px;border-radius:11px}
.dg-node-api .dg-txt b{font-size:14.5px}
.dg-node-api .dg-txt em{font-size:10.5px}
.dg-node-caddy{border-style:dashed}
.dg-edge{transition:opacity var(--dur-2)}
.docs-graph-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin:10px 2px 0;font-size:11.5px;color:var(--text2)}
.docs-graph-legend span{display:inline-flex;align-items:center;gap:6px}
.gl-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.docs-graph-info{margin:10px 2px 0;padding:10px 14px;border:1px solid var(--border);border-radius:9px;background:var(--bg);font-size:12.8px;line-height:1.55;color:var(--text);min-height:42px}
.docs-graph-info b{color:var(--accent)}
/* Was macht die API? */
.docs-api{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.docs-api-lead{font-size:13.2px;line-height:1.65;margin:0 0 14px}
.docs-api-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px 26px}
.docs-api-item{display:flex;gap:10px;align-items:flex-start;padding:9px 4px;border-bottom:1px dashed var(--border);font-size:12.6px;line-height:1.55}
.docs-api-item:last-child{border-bottom:none}
.docs-api-item i{flex:none;margin-top:2px;width:16px;height:16px}
.docs-api-item b{color:var(--text)}
.docs-api-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:11px 14px;background:var(--accent-light);border-radius:9px;font-size:12.5px;line-height:1.55;color:var(--text)}
.docs-api-note i{color:var(--accent);flex:none;margin-top:2px}
.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.doc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.doc-card-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:9px}
.doc-card-h i{width:17px;height:17px}
.doc-card p{margin:0 0 8px;font-size:12.8px;line-height:1.55;color:var(--text)}
.doc-card p:last-child{margin-bottom:0}
.doc-card p b{color:var(--text)}
.docs-foot{display:flex;align-items:center;gap:8px;margin-top:22px;padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:var(--card);font-size:12px;color:var(--text2);line-height:1.5}
.docs-foot i{color:var(--accent);flex:none}
.log-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.log-head select,.log-head input[type=number]{border:1px solid var(--border);border-radius:8px;padding:6px 8px;background:var(--card);color:var(--text);font-size:13px;font-family:inherit}
.log-head .log-title{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:7px;margin-right:6px}
.log-head .log-title i{color:var(--accent)}
.log-view{background:var(--log-bg);color:var(--log-text);font-family:Consolas,'Cascadia Mono',monospace;font-size:12px;line-height:1.55;padding:12px 14px;height:440px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.log-view .lg-err{color:var(--log-err)}
.log-view .lg-warn{color:var(--log-warn)}
.log-view .lg-ts{color:var(--log-ts)}
.log-foot{display:flex;align-items:center;gap:12px;padding:8px 14px;border-top:1px solid var(--border);font-size:12px;color:var(--text2)}
.log-foot label{display:flex;align-items:center;gap:5px;cursor:pointer}
.log-foot input[type=checkbox]{accent-color:var(--accent)}

/* ================================================================
   DESIGN 2026 — Verfeinerung (beide Themes, gezielte Overrides)
   ================================================================ */
/* --- Typografie: moderner Stack + Smoothing --- */
body{font-family:'Public Sans','Inter','Segoe UI',-apple-system,system-ui,'Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.1px}
h1,h2,h3,.title,.greeting h2{letter-spacing:-.2px}
/* --- Scrollbars: schlank + dezent --- */
*{scrollbar-width:thin;scrollbar-color:rgba(128,140,180,.35) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(128,140,180,.35);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(128,140,180,.55);border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}
/* --- Buttons: konsistente 2026-Form (Pill + Micro-Lift) --- */
/* Kap. 8.1 (Manual): „Werkzeugleisten, Ribbon-Befehle | 34 px".
   Gemessen vorher: 31 px hoch (8 px Polster + 13 px Schrift + 2x1 px Kante).
   Jetzt min-height 34 px — das ist der Sollwert der Stufe; Kap. 12.4 nennt
   32 px nur als absolute Untergrenze. */
.tb-btn{border-radius:10px;padding:8px 16px;font-size:13px;min-height:34px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);transition:all var(--dur-2) ease}
.tb-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.1)}
.tb-btn:active{transform:translateY(0) scale(.98)}
/* Kap. 1.3 (Manual), im Wortlaut: „ein Verlauf hat keinen einzelnen Kontrastwert,
   Text darauf also keinen garantierten. … Der Verlauf erscheint in Markenflaechen
   — nie hinter Text im Produkt, nie auf einem Knopf, den man achtmal taeglich
   drueckt." Vorher stand hier ein 135-Grad-Verlauf von --accent nach
   --accent-dark: weisse Schrift darauf hatte damit KEINEN messbaren Kontrastwert
   (gemessen: mein Kontrastpruefer las 1,08:1, weil er die Verlaufsmitte als
   Flaeche nahm). Jetzt Vollton in --accent — das ist die Farbe mit dem
   garantierten Wert 6,66:1 aus Kap. 14.1. */
.tb-btn.primary{background:var(--accent);border:none;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent)}
.tb-btn.primary:hover{box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 45%,transparent)}
.tb-btn:focus-visible,.rail button:focus-visible,.ds-chip:focus-visible,.ai-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* --- Rail: moderner, Logo mit Gradient, aktive Indikator-Bar --- */
.rail button{border-radius:14px;margin-bottom:7px}
.rail button.active{position:relative}
.rail button.active::before{content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%);width:3.5px;height:22px;border-radius:99px;background:linear-gradient(180deg,var(--accent),var(--tow));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
/* Kap. 306 (#94): KEINE Verlaufs-Kachel mehr (Nutzerwunsch „logo v5" — Haus-Symbol
   wie die anderen Apps). Die Zeile bleibt absichtlich wirkungslos. */
.rail .logo.keine-kachel-mehr{background:none}
/* --- Header: dezente Trennlinie + Blur --- */
.header{border-bottom-color:transparent;box-shadow:0 1px 0 var(--border)}
/* --- Karten: sanftere Schatten, weichere Kanten, Hover-Lift --- */
.mod-card,.feed-card,.agenda-card,.ds-box,.chat-app{border-radius:16px;transition:box-shadow .2s ease,transform var(--dur-3) ease,border-color .2s ease}
.mod-card:hover,.feed-card:hover{border-color:color-mix(in srgb,var(--accent) 25%,var(--border));box-shadow:0 8px 28px rgba(0,0,0,.08)}
/* --- Kachel-Header: farbiger Icon-Punkt + sauberer Abstand --- */
.mod-h{padding:14px 16px 8px;font-size:13.5px}
.mod-h i{width:18px;height:18px;flex:none}
.mod-b{padding:4px 10px 12px}
/* --- Chips (Sum/DS/AI): einheitliche Pill + dezentere aktive Füllung --- */
.sum-chip,.ds-chip,.ds-tab{border-radius:999px;transition:all var(--dur-2) ease}
.sum-chip:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.08)}
/* --- Modals: Glassmorphism + feinere Einblendung --- */
.modal-ov{background:rgba(10,14,26,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-win{animation:modalIn var(--dur-3) cubic-bezier(.2,.9,.3,1.2)}
/* --- KI-Card: dezenter Gradient-Rand oben --- */
.ai-card{position:relative;overflow:visible}
.ai-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,var(--accent),var(--tow),var(--wiki));opacity:.75;pointer-events:none}
.ai-input-row{padding-top:14px}
/* --- Eingaben: konsistente Fokussierung --- */
.set-inp,.ai-input,.ds-input-wrap input,.search{transition:border-color var(--dur-2) ease,box-shadow var(--dur-2) ease}
.set-inp:focus,.ds-input-wrap:focus-within,.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
/* --- Dark: 2026-Feinschliff --- */
html[data-theme="dark"] .tb-btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .tb-btn:hover{background:rgba(255,255,255,.1)}
html[data-theme="dark"] .tb-btn.primary{background:var(--grad-primary)}
html[data-theme="dark"] .sum-chip,html[data-theme="dark"] .ds-chip,html[data-theme="dark"] .ds-tab{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .mod-card,html[data-theme="dark"] .feed-card,html[data-theme="dark"] .agenda-card{background:linear-gradient(180deg,rgba(24,34,58,.72),rgba(17,24,44,.66))}
html[data-theme="dark"] .mod-card:hover,html[data-theme="dark"] .feed-card:hover{box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--accent) 10%,transparent)}
html[data-theme="dark"] .modal-win{background:rgba(16,23,42,.92)}
html[data-theme="dark"] .header{background:rgba(11,15,26,.72)}
html[data-theme="dark"] .greeting h2{background:var(--grad-greeting);-webkit-background-clip:text;background-clip:text;color:transparent}
/* --- Light: 2026-Feinschliff (Soft-Glass statt Office-Look) --- */
html[data-theme="light"]{--bg:#f4f6fb;--card:rgba(255,255,255,.82);--border:#e2e8f2;--text:#1a2233;--text2:#5c6a85;--accent:#3a63e0;--accent-dark:#2f52c4;--accent-light:#eaf0ff;--mail:#3a63e0;--cal:#e5484d;--contact:#1fa05a;--file:#8b5cf6;--wiki:#d97706;--git:#55627a;--todo:#0d9488;--tow:#0891b2;--rail:linear-gradient(180deg,#1c2b52,#141f3d);--rail-hover:rgba(255,255,255,.1);--rail-active:rgba(255,255,255,.16);--hover:#eef2fa;--shadow:0 1px 2px rgba(16,30,60,.05),0 8px 26px rgba(16,30,60,.07),0 24px 60px rgba(16,30,60,.06);--shadow-sm:0 1px 2px rgba(16,30,60,.05),0 4px 14px rgba(16,30,60,.06);--danger:#e5484d;--danger-bg:#fdeaea;--ok:#1fa05a;--grad-primary:linear-gradient(135deg,#3a63e0,#2f52c4);--grad-logo:linear-gradient(135deg,#3a63e0,#0e7490)}
html[data-theme="light"] body{background:radial-gradient(900px 600px at 12% -8%,rgba(79,124,255,.09),transparent 55%),radial-gradient(800px 600px at 108% 100%,rgba(8,145,178,.07),transparent 55%),var(--bg)}
html[data-theme="light"] .mod-card,html[data-theme="light"] .feed-card,html[data-theme="light"] .agenda-card{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html[data-theme="light"] .tb-btn.primary{background:var(--grad-primary)}
html[data-theme="light"] .ai-card::before{opacity:.6}
html[data-theme="light"] .rail .logo.keine-kachel-mehr{background:none}
/* --- Responsive: KI-Card auf Mobile --- */
@media(max-width:640px){
  .ai-chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .ai-chip{flex:none}
  .ai-msg{max-width:96%}
}
/* --- Werkzeug-Toolbar (Quick Actions) --- */
.ai-toolbar{position:relative;display:flex;align-items:center;gap:6px;padding:10px 18px 4px;flex-wrap:wrap}
.ai-tool{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--dur-2) ease;font-family:inherit}
.ai-tool i{width:14px;height:14px}
.ai-tool:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.ai-tool.active{color:var(--accent);border-color:var(--accent);background:var(--accent-light)}
.ai-toolbar-hint{font-size:11px;color:var(--text2);margin-left:auto;opacity:.7}
.ai-tool-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-pop);min-width:260px;max-width:340px;max-height:52vh;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.2);padding:8px;display:none;animation:modalIn .16s ease}
/* Vollbild-KI: Toolbar sitzt am unteren Rand (über der Eingabezeile) — Popup nach OBEN öffnen,
   sonst wird es unter dem Viewport abgeschnitten und die Optionen sind nicht klickbar */
.ai-full .ai-tool-pop{top:auto;bottom:calc(100% + 6px);max-height:46vh}
.ai-tool-pop.open{display:block}
.ai-tool-pop-h{display:flex;align-items:center;gap:8px;padding:6px 10px 8px;font-size:12.5px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border);margin-bottom:6px}
.ai-tool-pop-h i{width:15px;height:15px;color:var(--accent)}
.ai-tool-act{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:transparent;border-radius:9px;font-size:13px;color:var(--text);cursor:pointer;text-align:left;font-family:inherit;transition:background var(--dur-1) ease}
.ai-tool-act:hover{background:var(--hover)}
.ai-tool-act i{width:15px;height:15px;color:var(--accent);flex:none}
.ai-tool-act .ata-s{font-size:11.5px;color:var(--text2);display:block;margin-top:1px}
.ai-tool-pop .ai-tool-act + .ai-tool-act{border-top:1px solid transparent}
html[data-theme="dark"] .ai-tool{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .ai-tool:hover{background:rgba(91,140,255,.12)}
html[data-theme="dark"] .ai-tool-pop{background:rgba(17,24,44,.97);border-color:rgba(99,140,255,.2)}
@media(max-width:640px){.ai-toolbar{overflow-x:auto;flex-wrap:nowrap}.ai-tool{flex:none}.ai-toolbar-hint{display:none}.ai-tool-pop{position:fixed;left:50%;transform:translateX(-50%);top:auto;bottom:96px;width:92vw;max-width:380px}}
/* --- Aktivitäts-Feed + KI-Prioritäten (ersetzt Modul-Kacheln) --- */
.ai-feed-wrap{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:16px;margin-top:16px}
/* Aktionscenter + Aktivität: volle Breite über beide Spalten */
#actionsCard, .ai-feed-card{grid-column:1/-1;max-height:none}
#actionsCard .ai-prio-b{max-height:none;overflow:visible;gap:10px;padding:12px 16px 16px}
.ai-feed-card .ai-feed-b{max-height:480px;overflow-y:auto;padding:6px 0}
/* Planer-Tabs */
.plan-tabs{display:flex;gap:6px;padding:10px 16px 0;border-bottom:1px solid var(--border)}
.plan-tab{border:none;background:transparent;color:var(--text2);font-size:12.5px;font-weight:600;font-family:inherit;padding:7px 14px;border-radius:9px 9px 0 0;cursor:pointer;border-bottom:2px solid transparent;transition:all var(--dur-1)}
.plan-tab:hover{color:var(--text);background:var(--hover)}
.plan-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.plan-item{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;padding:9px 12px;border-radius:10px;background:var(--hover);border-left:3px solid var(--accent)}
.plan-item .pl-q{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);flex:none;margin-top:1px}
.plan-item .pl-t{color:var(--text);flex:1}
.plan-item .pl-f{font-size:11px;color:var(--text2);flex:none;white-space:nowrap;font-weight:600}
/* Rail-Popover (Planer): verschachtelt rechts neben dem Rail */
.rail-pop{position:fixed;left:64px;top:70px;width:430px;max-width:calc(100vw - 90px);max-height:calc(100vh - 90px);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 55px rgba(0,0,0,.32);z-index:var(--z-modal);display:flex;flex-direction:column;overflow:hidden;animation:modalIn var(--dur-3) ease}
/* ===========================================================================
   Gitea-Issue #154/#155 (P1): Apps-Kachel in der Rail + Symbol-Raster.
   Die Rail bleibt unverändert (76px, 46px-Buttons, Hover/Aktiv wie bisher) —
   nur die sechs App-Einzelsymbole wandern in ein Raster hinter EINEM Knopf.
   =========================================================================== */
/* Zähler-Badge auf der Apps-Kachel (gleiche Optik wie mailBadge/chatBadge) */
#railApps .apps-badge{background:var(--accent)}
/* Kleines Chevron rechts unten am Knopf — zeigt, dass hier etwas aufklappt */
#railApps .apps-chev{position:absolute;right:4px;bottom:5px;width:11px;height:11px;
  opacity:.7;transition:transform var(--dur-2) ease}
#railApps{position:relative}
#railApps.on .apps-chev{transform:rotate(90deg)}
#railApps.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
/* Popover mit dem Symbol-Raster — direkt neben der Kachel, ohne Lücke */
.apps-pop{position:fixed;z-index:var(--z-modal);padding:10px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 16px 44px rgba(0,0,0,.30);animation:popIn var(--dur-2) ease}
.apps-pop[hidden]{display:none}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* Eine App als modulfarbige Icon-Kachel mit Label darunter */
.app-tile{display:flex;flex-direction:column;align-items:center;gap:5px;
  border:1px solid transparent;background:transparent;cursor:pointer;
  padding:6px 4px;border-radius:11px;font-family:inherit;min-width:70px}
.app-tile-ic{width:40px;height:40px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;
  /* `--tile` kommt inline je Kachel (style="--tile:var(--todo)"). Der Rückfall auf
     --accent ist Absicht: fehlt einer App die Modulfarbe, wird die Kachel nicht
     unsichtbar (transparent), sondern bleibt in der Akzentfarbe lesbar. */
  background:color-mix(in srgb,var(--tile,var(--accent)) 14%,var(--card));
  color:var(--tile,var(--accent))}
.app-tile-ic svg{width:19px;height:19px;stroke-width:1.6}
.app-tile-l{font-size:11px;font-weight:600;color:var(--text2);white-space:nowrap}
.app-tile:hover{background:var(--hover);border-color:var(--border)}
.app-tile:hover .app-tile-l{color:var(--text)}
.app-tile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.app-tile.aktiv{border-color:color-mix(in srgb,var(--tile,var(--accent)) 45%,var(--border));
  background:color-mix(in srgb,var(--tile,var(--accent)) 8%,transparent)}
.app-tile.aktiv .app-tile-l{color:var(--tile,var(--accent));font-weight:700}
@media (max-width:640px){
  /* Auf schmalen Geräten wie ein Blatt von unten — wie .rail-pop */
  .apps-pop{left:8px !important;right:8px;top:auto !important;bottom:8px}
  .apps-grid{grid-template-columns:repeat(3,1fr)}
}
.rail-pop-head{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:13.5px;font-weight:600;border-bottom:1px solid var(--border)}
.rail-pop-body{overflow-y:auto;max-height:calc(100vh - 210px);padding:10px 14px 14px;display:flex;flex-direction:column;gap:9px}
@media(max-width:640px){.rail-pop{left:56px;top:auto;bottom:80px;width:calc(100vw - 64px);max-height:60vh}}
/* Feed-Items: reicher mit Details */
.fd-item{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;cursor:pointer;transition:background var(--dur-1) ease;border-bottom:1px solid var(--border)}
.fd-item:hover{background:var(--hover)}
.fd-item .fi-i{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;margin-top:1px}
.fd-item .fd-main{flex:1;min-width:0}
.fd-item .fd-t{font-size:13.5px;font-weight:650;color:var(--text);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.fd-item .fd-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 7px;border-radius:999px;color:#fff;flex:none}
.fd-item .fd-s{font-size:12px;color:var(--text2);margin-top:2px}
.fd-item .fd-d{font-size:12.5px;color:var(--text2);margin-top:4px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fd-item .fd-ts{font-size:11px;color:var(--text2);flex:none;padding-top:2px;white-space:nowrap}
.act-item{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:12px;background:var(--hover);border:1px solid var(--border);border-left:3px solid var(--accent)}
.act-item .ai{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;margin-top:1px}
.act-item .ac-main{flex:1;min-width:0}
.act-item .ac-subj{font-size:13.5px;font-weight:650;color:var(--text);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.act-item .ac-subj .ac-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 7px;border-radius:999px;color:#fff;flex:none}
.act-item .ac-from{font-size:12px;color:var(--text2);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.act-item .ac-reason{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:5px;display:flex;gap:6px;align-items:flex-start}
.act-item .ac-summary{font-size:13px;font-weight:600;color:var(--text);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent) 5%,transparent));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:9px;padding:8px 11px;margin-top:7px;line-height:1.5;display:flex;gap:8px;align-items:flex-start;cursor:help;position:relative}
.act-item .ac-summary i{flex:none;margin-top:2px;color:var(--accent)}
/* Reason-Tooltip: Mail-Kontext bei Hover (Kap. 33) */
.act-item .ac-summary[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:10px 12px;font-size:12px;font-weight:500;color:var(--text);white-space:pre-line;line-height:1.5;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity var(--dur-2),transform var(--dur-2);z-index:var(--z-tip)}
.act-item .ac-summary[data-tip]:hover::after{opacity:1;transform:translateY(0)}
.act-item .ac-prev{font-size:12.5px;color:var(--text2);margin-top:5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.act-item .ac-acts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.act-item .ac-acts button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:11.5px;font-weight:600;font-family:inherit;border-radius:8px;padding:4px 10px;cursor:pointer;transition:all var(--dur-1)}
.act-item .ac-acts button:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.act-item .ac-acts button.ac-ghost{background:transparent;color:var(--text2)}
/* Feature 2: Dense Mode — Triage-Liste (kompakt, 1 Zeile: Betreff + Tag + KI-Text) */
#actionsBody.dense .act-item{padding:4px 10px;border-radius:8px;background:transparent;border:none;border-left:none;gap:9px;margin:0;flex-wrap:nowrap}
#actionsBody.dense .act-item:hover{background:var(--hover)}
#actionsBody.dense .act-item .ai{width:22px;height:22px;border-radius:6px;margin-top:1px}
#actionsBody.dense .act-item .ai i{width:12px;height:12px}
#actionsBody.dense .act-item .ac-subj{font-size:13px;flex-wrap:nowrap;min-width:0}
#actionsBody.dense .act-item .ac-subj .ac-tag{padding:0 6px;font-size:11px}
/* KI-Zusammenfassung inline (nur im Dense-Mode sichtbar) */
.ac-inline{display:none;flex:1;min-width:0;font-size:11.5px;font-weight:450;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:6px;font-style:italic}
#actionsBody.dense .ac-subj .ac-inline{display:block}
#actionsBody.dense .act-item .ac-from{margin-top:0;font-size:11px;gap:6px;white-space:nowrap;overflow:hidden}
#actionsBody.dense .act-item .ac-from .ac-from-addr{display:none}
#actionsBody.dense .act-item .ac-summary,#actionsBody.dense .act-item .ac-prev,#actionsBody.dense .meeting-mini{display:none}
#actionsBody.dense .act-item .ac-acts{margin-top:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity var(--dur-1);background:var(--card);padding:3px;border:1px solid var(--border);border-radius:8px}
/* Kap. 10.4: Hover ist Anzeige, nicht Zugang — die Zeilenaktionen der dichten
   Liste waren nur per Maus erreichbar. */
#actionsBody.dense .act-item:hover .ac-acts,
#actionsBody.dense .act-item:focus-within .ac-acts{opacity:1}
@media(hover:none){
  #actionsBody.dense .act-item .ac-acts{opacity:1;position:static;transform:none;border:0;background:none;padding:0;margin-top:4px}
}
#actionsBody.dense .act-item{position:relative}
#actionsBody.dense .ac-acts button{padding:3px 7px;font-size:10.5px}
#actionsDenseBtn.active{background:var(--accent);color:#fff}
/* Feature 4: Workpartner-Tree */
.wp-children{border-left:2px solid var(--git);margin-left:12px}
.wp-ctx{font-size:11.5px;color:var(--text2);padding:3px 0;display:flex;gap:6px;align-items:flex-start;line-height:1.4}
.wp-ctx-dot{width:7px;height:7px;border-radius:50%;flex:none;margin-top:4px}
.wp-ctx-dot.issue{background:var(--git)}
.wp-ctx-dot.commit{background:var(--cal)}
.wp-tree:hover{background:var(--hover)}
.act-item .ac-acts button.ac-ghost:hover{background:var(--hover);color:var(--danger);border-color:var(--danger)}
.act-item .ac-acts button.ac-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.act-item .ac-acts button.ac-primary:hover{background:var(--accent-dark)}
/* Kap. 1.3: Verlaeufe „nie auf einem Knopf". Vorher 135-Grad-Verlauf mit
   --accent-2 (Violett) — die zweite Markenfarbe, die das Produkt gar nicht
   fuehren soll. Jetzt die ruhige Zustandsflaeche. Der Knopf ist ein
   ICON-Knopf (Zauberstab) in einer KI-Vorschlagszeile. */
.act-item .ac-acts button.ac-wand{background:var(--accent-light);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent)}
.act-item .ac-acts button.ac-wand:hover{background:var(--accent);border-color:transparent;color:#fff}
.ai-prio-card,.ai-feed-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.ai-prio-h,.ai-feed-h{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:13.5px;font-weight:600;border-bottom:1px solid var(--border)}
.ai-prio-refresh,.ai-feed-refresh{margin-left:auto;border:none;background:transparent;color:var(--text2);cursor:pointer;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all var(--dur-1)}
.ai-prio-refresh:hover,.ai-feed-refresh:hover{background:var(--hover);color:var(--accent)}
.ai-prio-refresh.spin i,.ai-feed-refresh.spin i{animation:aiSpin .8s linear infinite}
.ai-prio-b{padding:10px 14px 14px;display:flex;flex-direction:column;gap:9px}
.ai-prio-item{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;padding:7px 10px;border-radius:10px;background:var(--hover);border-left:3px solid var(--accent)}
.ai-prio-item .pi-n{font-weight:700;color:var(--accent);flex:none;font-size:12px;min-width:18px}
.ai-prio-item .pi-t{color:var(--text)}
.ai-feed-meta{font-size:11px;color:var(--text2);font-weight:500}
.ai-feed-b{max-height:340px;overflow-y:auto;padding:4px 0}
.ai-feed-item{display:flex;gap:11px;align-items:center;padding:8px 16px;cursor:pointer;transition:background var(--dur-1) ease;border-bottom:1px solid transparent}
.ai-feed-item:hover{background:var(--hover)}
.ai-feed-item .fi-i{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.ai-feed-item .fi-i i{width:14px;height:14px}
.ai-feed-item .fi-b{min-width:0;flex:1}
.ai-feed-item .fi-t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-feed-item .fi-s{font-size:11.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-feed-item .fi-ts{font-size:10.5px;color:var(--text2);flex:none}
.ai-feed-item .fi-unread{width:7px;height:7px;border-radius:50%;background:var(--cal);flex:none}
html[data-theme="dark"] .ai-prio-item{background:rgba(91,140,255,.08)}
html[data-theme="dark"] .ai-feed-item:hover{background:rgba(255,255,255,.05)}
@media(max-width:900px){.ai-feed-wrap{grid-template-columns:1fr}}
/* ============================================================
   MAIL-APP REDESIGN v1 (Outlook-365-Look) — von kimi-k3 erstellt,
   von Hermes validiert/integriert (2026-09-01).
   Nur Optik: Farbakzente, Hierarchie, Abstände, Schatten.
   Überschreibt Bestandsregeln — keine Klassen/JS geändert.
   ============================================================ */

/* ---------- (a) MAIL-LISTE ---------- */
.mail-app{border-color:color-mix(in srgb,var(--accent) 14%,var(--border));box-shadow:var(--shadow)}
.mail-app>.mail-side{border-right:1px solid color-mix(in srgb,var(--accent) 22%,var(--border))}
.mail-list{background:color-mix(in srgb,var(--bg) 30%,var(--card))}
.mail-list::-webkit-scrollbar-track{background:transparent}
.mail-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 30%,var(--border))}
.mail-list::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 55%,var(--border))}
.mail-item{border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);padding:13px 16px 13px 18px}
.mail-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:0;transition:opacity var(--tr)}
.mail-item:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)}
.mail-item.sel::before{opacity:1}
.mail-item.sel .from{color:var(--accent-dark)}
.mail-item.sel .time{color:var(--accent-dark);font-weight:600}
.mail-item.unread:hover{background:color-mix(in srgb,var(--accent) 11%,var(--card))}
.mail-item.unread::before{opacity:0;background:var(--accent)}
.mail-item.unread.sel::before{opacity:1}
.mail-item.unread .from{font-weight:700;color:var(--text)}
.mail-item.unread .subj{font-weight:700;color:var(--text)}
.mail-item.unread .prev{font-weight:500;color:var(--text)}
.mail-item .time{font-weight:500}
.mail-item .subj{color:var(--text)}
.mail-item .from{color:var(--text)}
.mail-item .prev{opacity:.85}
.mail-item .av,.mail-item .av-wrap .av{box-shadow:0 1px 3px rgba(0,0,0,.18),0 0 0 2px var(--card)}
.mail-item .unread-dot{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}

/* ---------- (b) MAIL-DETAIL ---------- */
.mail-detail{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--accent) 18%,var(--border))}
.mail-detail .md-head{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--card)) 0%,var(--card) 100%);border-bottom:1px solid var(--border);padding:16px 20px 12px}
.meta{border:none;border-radius:0;box-shadow:none;margin-bottom:6px;}
.meta .av{box-shadow:none}
.meta .who{color:var(--accent-dark)}
.meta .cc-self{box-shadow:none}
.rc-lbl{color:var(--accent-dark)}
.rc-chip{border-color:color-mix(in srgb,var(--accent) 25%,var(--border));box-shadow:var(--shadow-sm)}
.rc-chip:hover{box-shadow:0 1px 4px rgba(11,107,203,.18);transform:translateY(-1px)}
.mail-detail .md-scroll{padding:20px 24px 24px}
.mail-detail .attach-h{color:var(--accent-dark)}
.mail-detail .attach{background:var(--card);box-shadow:var(--shadow-sm)}
.mail-detail .attach:hover{background:var(--accent-light)}
.md-attach{background:color-mix(in srgb,var(--accent) 5%,var(--card));border-bottom-color:color-mix(in srgb,var(--accent) 22%,var(--border))}
.md-attach .att-chip{box-shadow:var(--shadow-sm)}

/* ---------- (c) RIBBON-EDITOR ---------- */
.mc-ribbon{background:linear-gradient(180deg,var(--card) 0%,color-mix(in srgb,var(--accent) 8%,var(--bg)) 100%);border-bottom:2px solid color-mix(in srgb,var(--accent) 30%,var(--border))}
.mc-rb-panels{background:color-mix(in srgb,var(--accent) 4%,var(--bg))}
.mc-rb-tab.on{background:color-mix(in srgb,var(--accent) 12%,var(--bg));box-shadow:0 -2px 6px rgba(11,107,203,.08)}
.mc-grp{border-right-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.mc-btn:hover{background:var(--accent-light);box-shadow:0 1px 3px rgba(11,107,203,.15)}
.mc-send{box-shadow:0 2px 6px rgba(11,107,203,.28)}
.mc-send-main:hover{box-shadow:0 3px 10px rgba(11,107,203,.35)}
/* Empfängerzeilen (An/Cc/Bcc) — PROMINENT: Akzent-Panel, Label-Pills, Fokus-Ring */
.mc-addr{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--card)) 0%,color-mix(in srgb,var(--accent) 5%,var(--card)) 100%);border-bottom:2px solid color-mix(in srgb,var(--accent) 35%,var(--border));padding:12px 16px 10px}
/* Issue #13: Empfänger-Label ist neutraler Text (Ausrichtung aus Zeile 1492). Der frühere
   Chip-Look (Hintergrund+Rahmen+Padding) widersprach der Design-Prämisse „Icons sind nackt,
   Farbe ist Signal" und bepreiste min-width und padding doppelt. */
.mc-addr-lbl{color:var(--text2)}
.mc-addr-box:focus-within{background:var(--accent-light);outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px}
.mc-addr-row.has-chip{border-top:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}
.mc-chip{background:var(--card);border-color:color-mix(in srgb,var(--accent) 28%,var(--border));box-shadow:var(--shadow-sm)}
.mc-chip:hover{border-color:var(--accent);box-shadow:0 1px 4px rgba(11,107,203,.2)}

/* ---------- (d) AKTIONSLEISTE ---------- */
.mc-actions{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 3%,var(--bg)) 0%,var(--bg) 100%);border-top:1px solid color-mix(in srgb,var(--accent) 25%,var(--border));padding:10px 16px}
.mc-actions .mc-act{box-shadow:var(--shadow-sm)}
.mc-actions .mc-act:hover{border-color:var(--accent);background:var(--accent-light);transform:translateY(-1px);box-shadow:0 2px 6px rgba(11,107,203,.18)}
.mc-actions .mc-act:active{transform:translateY(0)}

/* ---------- DARK-MODE-Feinjustierung ---------- */
html[data-theme="dark"] .mail-item:hover{background:rgba(91,140,255,.07)}
html[data-theme="dark"] .mail-item.sel{background:linear-gradient(90deg,rgba(91,140,255,.14),rgba(91,140,255,.07))}
html[data-theme="dark"] .mail-item.unread{background:rgba(91,140,255,.1)}
html[data-theme="dark"] .mail-detail .md-head{background:linear-gradient(180deg,rgba(91,140,255,.1),var(--card))}
html[data-theme="dark"] .rc-chip,
html[data-theme="dark"] .mc-chip,
html[data-theme="dark"] .mc-actions .mc-act,
/* Issue #13: kein eigener Dark-Hintergrund mehr nötig — Label ist Text. */
html[data-theme="dark"] .mc-send{box-shadow:0 2px 8px rgba(91,140,255,.35)}
html[data-theme="dark"] .mc-btn:hover,
html[data-theme="dark"] .mail-detail .attach:hover{box-shadow:0 1px 4px rgba(91,140,255,.3)}

/* ---------- TREE-ANSICHT (fester Ordnerbaum im mail-side) ---------- */
.mail-side.tree-view .mail-tree{border-top:1px solid var(--border);}
.mail-side.tree-view .mt-group{border-bottom:1px solid var(--border)}
.mail-side.tree-view .mail-tree .mt-f{width:100%;margin:1px 0}
.mail-side.tree-view .mail-tree .mt-body{max-height:none}
.mail-side.tree-view .mt-dir{transition:background var(--dur-1)}
.mail-side.tree-view .mt-dir .mt-chev{margin-left:auto;font-size:10.5px;color:var(--text2);transition:transform var(--dur-1);flex:none}
.mail-side.tree-view .mt-dir.open .mt-chev{transform:rotate(90deg)}
.mail-side.tree-view .mt-children{display:none}
.mail-side.tree-view .mt-children.open{display:block}

/* ============================================================
   MAIL-APP v2 — TREE-VIEW-SIDEBAR + MODAL-VEREDELUNG (kimi-k3,
   von Hermes validiert/integriert 2026-09-01). Baut auf v1 auf.
   ============================================================ */

/* ---------- (1) TREE-VIEW: Baum als feste Seitenleiste ---------- */
.mail-side.tree-view .mail-tree{
  position:static;
  display:block !important;
  z-index:auto;top:auto;
  border:none;border-radius:0;
  box-shadow:none;
  background:transparent;
  padding:4px 6px 8px;
  animation:none;
  flex:none;
  max-height:46%;
  overflow-y:auto;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 16%,var(--border));
}
.mail-side.tree-view .mail-tree::-webkit-scrollbar{width:8px}
.mail-side.tree-view .mail-tree::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 25%,var(--border))}
.mail-side.tree-view .mn-folder{display:none}
.mail-side.tree-view .mail-navbar{justify-content:center}
.mail-side.tree-view .mail-navbar-qf .qf{border-radius:8px}
.mail-side.tree-view .mail-navbar-qf .qf.active{box-shadow:0 1px 4px rgba(11,107,203,.28)}
.mail-side.tree-view .mt-body .mt-f{font-size:12.5px;padding:5px 10px 5px 22px}
.mail-side.tree-view .mt-body .mt-f i{width:13px;height:13px}
.mail-side.tree-view .mt-body .mt-f.active{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 12%,var(--card)),
    color-mix(in srgb,var(--accent) 6%,var(--card)));
  color:var(--accent-dark);font-weight:700;
}
.mail-side.tree-view .mt-body .mt-f.active::before{
  content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:3px;height:15px;border-radius:2px;background:var(--accent);
}
.mail-side.tree-view .mt-body .mt-f.active .mt-cnt{
  background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);
}
.mail-side.tree-view .mt-body .mt-f .mt-cnt{font-size:11px;padding:0 6px}
.mail-side.tree-view .mt-body .mt-f:not(.active) .mt-cnt{opacity:.8}
.mail-side.tree-view .mt-group .mt-head{padding:7px 10px 4px;font-size:10.5px;letter-spacing:.6px}

/* Unterordner via .mt-dir (Verzeichniszeile mit Chevron) */
.mail-side.tree-view .mt-dir{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:5px 10px;border:none;background:transparent;border-radius:6px;
  font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit;text-align:left;
}
.mail-side.tree-view .mt-dir:hover{background:var(--hover)}
.mail-side.tree-view .mt-dir i{width:12px;height:12px;flex:none;opacity:.7;transition:transform var(--dur-2) ease}
.mail-side.tree-view .mt-group.collapsed>.mt-dir i:first-child{transform:rotate(-90deg)}
.mail-side.tree-view .mt-dir+.mt-body{
  margin:1px 0 2px 15px;padding-left:7px;
  border-left:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
}
.mail-side.tree-view .mt-dir+.mt-body .mt-f{padding-left:8px}

/* ---------- (2) MAIL-MODALS: Fenstersystem (.mw) modernisieren ---------- */
.mw-h .mt i{color:var(--accent);opacity:.85}
.mw-h button{border-radius:6px;color:var(--text2)}
.mw-h button:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-dark)}
.mw-rz::after{
  border-right-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  border-bottom-color:color-mix(in srgb,var(--accent) 45%,var(--border));
}
.mw-rz:hover::after{border-color:var(--accent);opacity:1}
.mw-z{
  background:color-mix(in srgb,var(--accent) 6%,var(--card));
  border-top:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
  backdrop-filter:saturate(1.1) blur(6px);
}
.mw-tab{
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));
  box-shadow:var(--shadow-sm);transition:border-color var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1);
}
.mw-tab:hover{
  border-color:var(--accent);
  box-shadow:0 2px 8px rgba(11,107,203,.18);
  transform:translateY(-1px);
}
.mw-b .mail-detail .md-head{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 5%,var(--card)) 0%,var(--card) 100%);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
}
.mw-b .mail-detail .meta{padding:8px 12px}
.mw-b .mail-detail .md-scroll{padding:16px 18px 18px}

/* ---------- (3) POPUP-ANSICHT (?mail=..., eigenes Browser-Fenster) ---------- */
body.mailpopup .mailpopup-cont{inset:14px}
body.mailpopup .mailpopup-cont .mail-detail{
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
  box-shadow:
    0 18px 50px rgba(11,32,68,.28),
    0 4px 14px rgba(11,32,68,.14);
}
body.mailpopup .mailpopup-cont .mail-detail .md-head{
  border-top-left-radius:12px;border-top-right-radius:12px;
}

/* ---------- (4) DARK-MODE ---------- */
html[data-theme="dark"] .mail-side.tree-view .mail-tree{border-bottom-color:rgba(91,140,255,.18)}
html[data-theme="dark"] .mail-side.tree-view .mt-body .mt-f.active{background:linear-gradient(90deg,rgba(91,140,255,.16),rgba(91,140,255,.08))}
html[data-theme="dark"] .mail-side.tree-view .mt-dir+.mt-body{border-left-color:rgba(91,140,255,.22)}
html[data-theme="dark"] .mw{
  border-color:rgba(91,140,255,.28);
  box-shadow:0 18px 52px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.35),0 0 0 1px rgba(91,140,255,.08);
}
html[data-theme="dark"] .mw-h{
  background:linear-gradient(180deg,rgba(91,140,255,.12),rgba(91,140,255,.05));
  border-bottom-color:rgba(91,140,255,.3);
}
html[data-theme="dark"] .mw-h button:hover{background:rgba(91,140,255,.16)}
html[data-theme="dark"] .mw-z{background:rgba(91,140,255,.06);border-top-color:rgba(91,140,255,.25)}
html[data-theme="dark"] .mw-tab:hover{box-shadow:0 2px 10px rgba(91,140,255,.28)}
html[data-theme="dark"] .mw-b .mail-detail .md-head{
  background:linear-gradient(180deg,rgba(91,140,255,.09),var(--card));
  border-bottom-color:rgba(91,140,255,.25);
}
html[data-theme="dark"] body.mailpopup .mailpopup-cont .mail-detail{
  border-color:rgba(91,140,255,.28);
  box-shadow:0 18px 52px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.35);
}

/* ===== Kontakte-App: Filterleiste nach Herkunft (Kap. 205) =====
   Trennt sichtbar: Kollegen (Talk), Adressbuch (bearbeitbar) und automatisch
   gesammelte Server-Einträge (nicht bearbeitbar). Theme-Variablen statt
   fester Farben — funktioniert in hell/dunkel/blau/kontrast/lumen. */
.con-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--border)}
.cf-btn{
  padding:4px 11px;font-size:12px;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all var(--tr)}
.cf-n{font-weight:700;opacity:.75}
.cf-btn.act .cf-n{opacity:1}
.cf-search{margin-left:auto;min-width:200px;flex:1 1 200px;max-width:320px;border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:5px 12px;font-size:12.5px;font-family:inherit;background:var(--card);color:var(--text)}
.cf-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.con-badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.3px;padding:2px 6px;border-radius:var(--radius-pill);vertical-align:1px;margin-left:6px;white-space:nowrap}
.con-item.con-locked{opacity:.82}
.con-item.con-locked:hover{opacity:1}
.con-hint{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--text2);background:var(--hover);
  border-radius:var(--radius);padding:9px 11px;line-height:1.45}

/* ===========================================================================
   Gitea-Issue #69: Bild-Vorschau, Mentions und Avatar-Bilder im Chat.
   Farbe nur als Signal, neutrale Fläche, 1px-Kante (Design-Standard Kap. 209).
   =========================================================================== */
.chat-bild{display:inline-block;margin:4px 0;max-width:340px;border:1px solid var(--line,rgba(128,128,128,.25));
  border-radius:8px;overflow:hidden;line-height:0;background:var(--card)}
.chat-bild img{display:block;max-width:340px;max-height:260px;width:auto;height:auto;object-fit:cover}
.chat-mentions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chat-mention{font-size:11.5px;padding:1px 6px;border-radius:9px;color:var(--mod,var(--accent));
  background:color-mix(in srgb,var(--mod,var(--accent)) 12%,transparent);border:1px solid color-mix(in srgb,var(--mod,var(--accent)) 26%,transparent)}
.chat-reply-zitat{font-size:11.5px;color:var(--text2);border-left:2px solid color-mix(in srgb,var(--mod,var(--accent)) 55%,transparent);
  padding:2px 8px;margin-bottom:4px;max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-reply-zitat b{color:var(--text);font-weight:600}
/* Avatar-Bild im Chat: rund, füllt den Kreis, Initialen bleiben als Rückfall. */
.chat-msg .av img,.msg .av img{display:block}

/* Gitea-Issue #109: Kachel-Voranschau für Office-Dateien (farbiges Quadrat mit
   Typ-Kennung). Farbe bleibt Signal, Fläche bleibt neutral. */
.att-kachel{display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:6px;font-size:9.5px;font-weight:700;letter-spacing:.3px;
  border:1px solid transparent}
.md-attach .att-chip .att-kachel{width:16px;height:16px;font-size:7.5px;border-radius:4px}

/* ===========================================================================
   Gitea-Issue #63: Talk-Seitenleiste aufgewertet.
   Prinzipien bleiben (Design-Standard Kap. 209): neutrale Flächen, 1px-Kanten,
   EIN Schatten, Farbe nur als Signal. Avatar-Bilder füllen den Kreis; die
   Initialen bleiben darunter und verschwinden, sobald das Bild da ist.
   =========================================================================== */
/* Gitea-Issue #111 (Kap. 319): `overflow:hidden` galt fuer ALLE `.av` und schnitt
   damit Statuspunkt (`.pd`, right/bottom -1px) und Ungelesen-Badge
   (`.av-badge`, top/right -4px) ab — beide ragen bewusst ueber den Kreis.
   GEMESSEN: Punkt ragte 1 px raus, an seiner Mitte lag `msgr-person` statt `.pd`.
   Jetzt nur noch dann beschneiden, wenn wirklich ein Bild im Kreis liegt. */
.av{position:relative}
/* GEMESSEN (Kap. 319): Selbst mit Bild bringt `overflow:hidden` hier nichts —
   das Bild ist absolut positioniert, 100 % groß und traegt `border-radius:inherit`,
   ist also schon rund. Die Beschneidung hat NUR den Statuspunkt und das
   Ungelesen-Badge abgeschnitten (Punkt ragte 1 px raus, an seiner Mitte lag
   `msgr-person` statt `.pd`). Deshalb: Kreis bleibt offen. */
.av.hat-bild{overflow:visible}
.av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  opacity:0;transition:opacity .18s ease}
/* Punkt und Badge liegen ueber dem Bild (das Bild ist absolut positioniert). */
.msgr-person .pd,.msgr-person .av-badge{z-index:2}
.av-img.da{opacity:1}
.av.hat-bild{color:transparent}

/* --- Raum-Liste: zweite Zeile, Zeit, Typ-Symbol, Mention --- */
.chat-room{align-items:center;gap:9px;padding:7px 9px;border-radius:8px}
.chat-room .cr-av{width:34px;height:34px;flex:none;border-radius:50%}
.chat-room .cr-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.chat-room .cr-t{display:flex;align-items:center;gap:5px;font-weight:600;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-room .cr-typ{width:11px;height:11px;flex:none;color:var(--text2)}
.chat-room .cr-zeit{margin-left:auto;font-size:10.5px;font-weight:500;color:var(--text2);flex:none}
.chat-room .cr-vz{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-room .cr-vz .cr-at{width:10px;height:10px;flex:none;color:var(--mod,var(--accent))}
.chat-room.hat-mention{background:color-mix(in srgb,var(--mod,var(--accent)) 8%,transparent)}
.chat-room.hat-mention .cr-t{color:var(--mod,var(--accent))}
.chat-room:hover{background:var(--hover,rgba(128,128,128,.08))}

/* --- Personenleiste: Gruppierung + Quick-Action --- */
/* Gitea-Issue #122 (Kap. 324): Der Gruppenkopf ist eine STATUS-BADGE.
   Vorher standen Text und Zahl lose nebeneinander und „ONLINE" brach im
   eingeklappten Zustand (62 px) auf zwei Zeilen um (gemessen: 25 -> 49 px).
   Jetzt: eine kompakte Kapsel, einzeilig, mit Anwesenheitspunkt in der Farbe
   (gruen = online, grau = offline). Farbe bleibt Signal. */
.msgr-gruppe{display:inline-flex;align-items:center;gap:6px;margin:8px 4px 4px;
  padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;
  border:1px solid var(--border);background:color-mix(in srgb,var(--text2) 6%,transparent);
  color:var(--text2);max-width:calc(100% - 8px);overflow:hidden}
.msgr-gruppe.on{color:var(--ok,#1fa05a);
  border-color:color-mix(in srgb,var(--ok,#1fa05a) 34%,transparent);
  background:color-mix(in srgb,var(--ok,#1fa05a) 9%,transparent)}
.msgr-gruppe .mg-punkt{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.msgr-gruppe .mg-badge{flex:none;min-width:16px;height:16px;padding:0 5px;border-radius:999px;
  background:color-mix(in srgb,currentColor 15%,transparent);color:inherit;
  font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
/* Eingeklappt (62 px): nur der Punkt und die Zahl, Text aus — kein Umbruch. */
.msgr-side.collapsed .msgr-gruppe{justify-content:center;padding:3px 5px;margin-left:0;margin-right:0}
.msgr-side.collapsed .msgr-gruppe .mg-punkt{display:none}
.msgr-side.collapsed .msgr-gruppe .mg-badge{font-size:0;min-width:20px;height:18px;padding:0}
.msgr-side.collapsed .msgr-gruppe .mg-badge::after{content:attr(data-zahl);font-size:10px}
.msgr-side.collapsed .msgr-gruppe{font-size:0}
/* Kap. 10.4: echter Knopf (war ein nicht fokussierbares <i>), deshalb Reset der
   Knopf-Standardwerte. Trefferflaeche 24x24 (Kap. 10.4: Ziele >= 44px auf Touch,
   >= 32px auf Desktop mit 8px Abstand — hier liegt der Knopf ueber der Zeile,
   die Zeile selbst ist die grosse Flaeche). */
.msgr-person .mp-anruf{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:none;margin-left:auto;padding:0;
  border:0;background:transparent;border-radius:var(--radius-pill);
  color:var(--text2);font:inherit;
  opacity:0;transition:opacity var(--dur-1) var(--ease-out);cursor:pointer}
.msgr-person .mp-anruf:focus-visible{outline:2px solid var(--accent);outline-offset:1px;opacity:1}
/* Kap. 10.4: Hover ist Anzeige, nicht Zugang. Zusaetzlich :focus-within und auf
   Touch dauerhafte Sichtbarkeit — sonst ist der Anruf mit der Tastatur blind. */
.msgr-person:hover .mp-anruf,
.msgr-person:focus-within .mp-anruf{opacity:1}
@media(hover:none){
  .msgr-person .mp-anruf{opacity:.7}
}
.msgr-person .mp-anruf:hover{color:var(--ok,#1fa05a)}

/* ===========================================================================
   Gitea-Issue #70 (Kap. 316): Composer — Emoji-Picker mit Kategorien,
   @-Vorschläge, mehrzeilige Eingabe.
   Prinzipien bleiben (Design-Standard Kap. 209): neutrale Flächen, 1px-Kanten,
   EIN Schatten, Farbe nur als Signal.
   =========================================================================== */
/* Composer als textarea: wächst mit, bricht nicht um die Ecke */
.chat-input textarea, .msg-input textarea{
  flex:1;resize:none;border:1px solid var(--border);border-radius:8px;
  padding:7px 10px;font:inherit;font-size:13px;line-height:1.4;
  background:var(--card,transparent);color:var(--text);
  max-height:96px;overflow-y:hidden;outline:none;min-height:34px}
.chat-input textarea:focus, .msg-input textarea:focus{border-color:var(--accent)}
.chat-input, .msg-input{align-items:flex-end}

/* Emoji-Picker: Kopf mit Suche, Kategorie-Leiste, scrollbare Liste */
.emoji-picker{max-height:340px}
.ep-top{padding:8px 8px 4px;flex:none}
.ep-such{width:100%;border:1px solid var(--border);border-radius:8px;padding:6px 10px;
  font:inherit;font-size:12.5px;background:var(--card,transparent);color:var(--text);outline:none}
.ep-such:focus{border-color:var(--accent)}
.ep-kats{display:flex;gap:2px;padding:4px 8px;border-bottom:1px solid var(--border);flex:none;flex-wrap:wrap}
.ep-kat{border:0;background:transparent;cursor:pointer;padding:5px 7px;border-radius:6px;
  color:var(--text2);display:inline-flex}
.ep-kat:hover{background:var(--hover,rgba(128,128,128,.1));color:var(--text)}
.ep-kat svg{width:14px;height:14px}
.ep-liste{overflow-y:auto;padding:4px 8px 10px;flex:1;min-height:0}
.ep-kopf{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;
  color:var(--text2);padding:8px 2px 4px}
.ep-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:2px}
.ep-btn{border:0;background:transparent;cursor:pointer;font-size:18px;line-height:1;
  padding:4px 0;border-radius:6px}
.ep-btn:hover{background:var(--hover,rgba(128,128,128,.14))}
.ep-kein{font-size:12px;color:var(--text2);padding:10px 12px}

/* @-Vorschläge über dem Composer */
.mention-box{position:absolute;bottom:calc(100% + 6px);left:8px;z-index:60;
  background:var(--card,#fff);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.14);min-width:190px;max-height:220px;overflow-y:auto;padding:3px}
.mb-item{padding:6px 9px;font-size:12.5px;border-radius:6px;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mb-item:hover,.mb-item.aktiv{background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent)}

/* Gitea-Issue #71 (Kap. 317): Sprung-Streifen „↓ N neue Nachrichten".
   Erscheint nur, wenn man beim Eintreffen neuer Nachrichten NICHT unten ist —
   dann springt die Ansicht nicht, sondern bietet den Sprung an. */
.chat-sprung{position:absolute;left:50%;transform:translateX(-50%);bottom:74px;z-index:40;
  border:1px solid var(--border);background:var(--card,#fff);color:var(--text);
  border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.16);display:inline-flex;align-items:center;gap:6px}
.chat-sprung:hover{border-color:var(--accent);color:var(--accent)}
.chat-main{position:relative}

/* ===========================================================================
   Gitea-Issue #72 (Kap. 318): Videocall — Status im Raum-Kopf + Overlay.
   Farbe bleibt Signal: grüner Puls = Call läuft, rot = eigener Call.
   =========================================================================== */
#chatHead{display:flex;align-items:center;gap:10px}
#chatHead .ch-name{font-weight:600}
#chatHead .ch-tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.call-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--ok,#1fa05a);background:color-mix(in srgb,var(--ok,#1fa05a) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--ok,#1fa05a) 30%,transparent);
  border-radius:999px;padding:3px 10px}
.call-status.eigen{color:var(--danger,#c62828);
  background:color-mix(in srgb,var(--danger,#c62828) 10%,transparent);
  border-color:color-mix(in srgb,var(--danger,#c62828) 32%,transparent)}
.cs-puls{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 0 currentColor;animation:csPuls 1.6s infinite}
@keyframes csPuls{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}
  70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.call-start{color:var(--ok,#1fa05a);border-color:color-mix(in srgb,var(--ok,#1fa05a) 35%,transparent)}
.call-beenden{color:var(--danger,#c62828);border-color:color-mix(in srgb,var(--danger,#c62828) 35%,transparent)}

/* Overlay: Karte in der Mitte, ein Schatten (Design-Standard) */
.call-overlay{position:fixed;inset:0;z-index:1200;background:rgba(10,20,35,.42);
  display:flex;align-items:center;justify-content:center;padding:24px}
.call-box{background:var(--card,#fff);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);width:min(520px,100%);overflow:hidden}
.call-head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--border);
  font-weight:600;font-size:13.5px}
.call-head .cb-titel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-x{border:0;background:transparent;cursor:pointer;color:var(--text2);padding:3px;border-radius:6px}
.cb-x:hover{background:var(--hover,rgba(128,128,128,.12));color:var(--text)}
.call-body{padding:16px 14px;font-size:13px;min-height:64px}
.call-drin{display:flex;align-items:center;gap:8px;color:var(--ok,#1fa05a);font-weight:600}
.call-namen{font-size:12px;color:var(--text2);font-weight:400;margin-top:2px;flex-basis:100%}
.call-du{font-size:12px;color:var(--text2);margin-top:6px}
.call-leer{color:var(--text2);font-size:12.5px}
.call-foot{display:flex;gap:8px;padding:0 14px 12px}
.call-hinweis{padding:10px 14px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text2);
  background:color-mix(in srgb,var(--text2) 5%,transparent)}

/* ===========================================================================
   Gitea-Issues #113/#114 (Kap. 321): Kalender — Touch-Bedienung und
   Barrierefreiheit. Farbe bleibt Signal, neutrale Flaechen.
   =========================================================================== */
/* Nur fuer Screenreader — visuell unsichtbar, aber vorlesbar. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Sichtbarer Fokus im Raster (die Kacheln sind jetzt per Tastatur erreichbar). */
.tg-ev:focus-visible,.cm-ev:focus-visible{outline:2px solid var(--accent);outline-offset:1px;z-index:5}
.cm-day:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Touch (#113): Kacheln sollen den Finger-Scroll NICHT blockieren, aber
   ziehbar bleiben. Die Tages-Spalte darf vertikal scrollen. */
.tg-ev{touch-action:none}
.tg-day-col{touch-action:pan-y}
/* Groessere Trefferflaechen auf Touch-Geraeten (WCAG 2.5.5: mind. 44px). */
@media (pointer:coarse){
  .tg-ev{min-height:32px}
  .cm-ev{min-height:26px;padding-top:2px;padding-bottom:2px}
  .cm-day{min-width:34px;min-height:34px}
  .tg-day-col,.cm-cell{cursor:pointer}
}

/* Gitea-Issue #83 (Kap. 322): Hinweisstreifen, solange kein Repository gewaehlt
   ist. Vorher stand der Nutzer vor grauen Knoepfen ohne erkennbaren Grund. */
.git-hinweis-box{display:flex;align-items:flex-start;gap:8px;margin:6px 8px;
  padding:9px 10px;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:8px;
  font-size:12px;line-height:1.35;color:var(--text);cursor:pointer}
.git-hinweis-box i{flex:none;margin-top:1px;color:var(--accent)}
.git-hinweis-box span{flex:1;min-width:0}
.git-hinweis-box .tb-btn{flex:none;padding:2px 8px;font-size:11.5px}
.git-hinweis-box:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* ===========================================================================
   Gitea-Issue #123 (Kap. 326): Drag&Drop-Feld fuer Termin-Anhaenge.
   Drei Wege: Formular, Detailansicht, direkt auf die Kachel im Kalender.
   Farbe bleibt Signal — neutraler Rahmen, Akzent nur beim Ziehen.
   =========================================================================== */
.cal-drop-feld{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  margin:6px 0 8px;padding:14px 12px;border:1.5px dashed var(--border);border-radius:9px;
  background:color-mix(in srgb,var(--text2) 4%,transparent);cursor:pointer;
  text-align:center;transition:border-color .12s,background .12s}
.cal-drop-feld i{width:20px;height:20px;color:var(--text2)}
.cal-drop-feld span{font-size:12.5px;font-weight:600;color:var(--text)}
.cal-drop-feld small{font-size:11px;color:var(--text2)}
.cal-drop-feld:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 4%,transparent)}
.cal-drop-feld.cal-drop-aktiv{border-color:var(--accent);border-style:solid;
  background:color-mix(in srgb,var(--accent) 11%,transparent)}
.cal-drop-feld.cal-drop-aktiv i{color:var(--accent)}
/* Kompakt für die Detailansicht (weniger Höhe, einzeilig) */
.cal-drop-feld.kompakt{flex-direction:row;gap:7px;padding:9px 11px;justify-content:flex-start;text-align:left}
.cal-drop-feld.kompakt i{width:16px;height:16px}
.cal-drop-feld.kompakt small{margin-left:auto;font-size:10.5px}
.cal-drop-laden{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);padding:6px 2px}
.cal-drop-laden i{animation:calDropDreh 1s linear infinite}
@keyframes calDropDreh{to{transform:rotate(360deg)}}
.cal-detail-anh-liste{margin-top:4px}
/* Kachel im Kalender als Ziel (Stufe 3) */
.tg-ev.cal-drop-kachel,.cm-ev.cal-drop-kachel{outline:2px solid var(--accent);outline-offset:1px;z-index:6}
.tg-ev.cal-drop-laeuft,.cm-ev.cal-drop-laeuft{opacity:.6}
.tg-ev.cal-drop-fertig,.cm-ev.cal-drop-fertig{animation:calDropPuls .8s ease-out 2}
@keyframes calDropPuls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){
  .cal-drop-laden i{animation:none}
  .tg-ev.cal-drop-fertig,.cm-ev.cal-drop-fertig{animation:none}
}

/* ===========================================================================
   Gitea-Issue #117 (Kap. 327): Resize-Griffe, Live-Geist, Ziel-Markierung.
   Vorher war beim Ziehen nichts sichtbar ausser dem Ausblenden der Kachel.
   =========================================================================== */
/* Griff-Zonen oben/unten (7px). Sie liegen UEBER der Kachel, damit sie sicher
   getroffen werden, und zeigen den passenden Mauszeiger. */
.tg-ev .cal-griff{position:absolute;left:0;right:0;height:7px;z-index:3;
  cursor:ns-resize;touch-action:none}
.tg-ev .cal-griff.oben{top:-2px}
.tg-ev .cal-griff.unten{bottom:-2px}
.tg-ev .cal-griff:hover{background:color-mix(in srgb,var(--accent) 30%,transparent)}
/* Live-Geist: folgt dem Zeiger, zeigt Titel + Zielzeit. */
.cal-ghost{position:fixed;z-index:3000;pointer-events:none;display:flex;flex-direction:column;
  gap:1px;padding:5px 9px;border-radius:7px;border:1px solid var(--accent);
  background:color-mix(in srgb,var(--card) 92%,var(--accent) 8%);
  box-shadow:0 6px 18px rgba(0,0,0,.22);max-width:240px}
.cal-ghost-t{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cal-ghost-z{font-size:11px;color:var(--accent);font-weight:600}
/* Ziel-Spalte und ihr Kopf werden markiert (7 Spalten sind schnell durchquert). */
.tg-day-col.cal-drop-hot{background:color-mix(in srgb,var(--accent) 9%,transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent)}
.tg-day-head.cal-drop-hot{background:color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:inset 0 -2px 0 var(--accent)}
.cal-drop-label{position:absolute;top:2px;left:50%;transform:translateX(-50%);
  z-index:4;padding:1px 6px;border-radius:999px;font-size:10.5px;font-weight:700;
  background:var(--accent);color:#fff;white-space:nowrap;pointer-events:none}
.tg-day-col{position:relative}
/* Ziehen: die Quelle bleibt sichtbar, aber gedaempft (nicht unsichtbar). */
.tg-ev.cal-dragging{opacity:.45}
@media (prefers-reduced-motion:no-preference){
  .tg-ev{transition:opacity .12s}
}

/* ===========================================================================
   Gitea-Issue #116 (Kap. 328): Termin-Fenster — Dauer, Wandzeit-Hinweis,
   Kalender-Farbpunkt, Antwortstatus im Chip.
   =========================================================================== */
.cal-zeit-meta{display:flex;align-items:center;gap:10px;margin:2px 0 4px;flex-wrap:wrap}
.cal-dauer{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;border:1px solid var(--border);
  background:color-mix(in srgb,var(--text2) 7%,transparent);color:var(--text2)}
.cal-dauer i{width:13px;height:13px}
.cal-dauer.lang{border-color:color-mix(in srgb,var(--danger,#a4262c) 40%,transparent);
  background:color-mix(in srgb,var(--danger,#a4262c) 10%,transparent);color:var(--danger,#a4262c)}
.cal-dauer.kurz{border-color:color-mix(in srgb,#d69e2e 45%,transparent);
  background:color-mix(in srgb,#d69e2e 12%,transparent);color:#8a6100}
.cal-dauer.schlecht{border-color:color-mix(in srgb,var(--danger,#a4262c) 45%,transparent);
  background:color-mix(in srgb,var(--danger,#a4262c) 12%,transparent);color:var(--danger,#a4262c)}
.cal-tz{display:flex;align-items:flex-start;gap:6px;margin:4px 0 8px;padding:7px 9px;
  border-radius:7px;font-size:11.5px;line-height:1.35}
.cal-tz i{width:13px;height:13px;flex:none;margin-top:1px}
.cal-tz-ok{border:1px solid var(--border);background:color-mix(in srgb,var(--text2) 5%,transparent);
  color:var(--text2)}
.cal-tz-warn{border:1px solid color-mix(in srgb,#d69e2e 45%,transparent);
  background:color-mix(in srgb,#d69e2e 13%,transparent);color:#8a6100}
.cal-cal-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;
  background:var(--text2);vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.mc-chip-st{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;flex:none}
.mc-chip-st i{width:11px;height:11px}
.mc-chip-st.ok{background:color-mix(in srgb,#1fa05a 22%,transparent);color:#1fa05a}
.mc-chip-st.nein{background:color-mix(in srgb,var(--danger,#a4262c) 20%,transparent);color:var(--danger,#a4262c)}
.mc-chip-st.frag{background:color-mix(in srgb,#d69e2e 22%,transparent);color:#8a6100}
.mc-chip-st.wart{background:color-mix(in srgb,var(--text2) 16%,transparent);color:var(--text2)}

/* Gitea-Issue #126 (Kap. 329): Die gezogene Kachel bewegt/skaliert sich mit.
   WICHTIG: KEINE transition auf transform/height waehrend des Ziehens — sonst
   laeuft die Bewegung dem Zeiger nach (Gummiband). Die Uebergaenge gelten nur
   fuer den Rueckweg nach dem Loslassen. */
.tg-ev.cal-dragging{transition:none!important;z-index:4;opacity:.85}
.tg-ev.cal-dragging{will-change:transform,height}
.tg-ev{transition:transform .16s ease-out,height .16s ease-out}
@media (prefers-reduced-motion:reduce){
  .tg-ev{transition:none}
}

/* ===========================================================================
   Gitea-Issue #115 (Kap. 330): Monatsansicht — Zeitanfang in der Zelle,
   Tages-Drawer, Kalender-Legende.
   =========================================================================== */
/* Zeitprefix in der Monatszelle (ab zwei Terminen am Tag). */
.cm-ev .cm-ev-z{flex:none;font-size:9.5px;font-weight:700;font-variant-numeric:tabular-nums;
  opacity:.85;margin-right:3px}
/* Tages-Drawer: Liste aller Termine eines Tages, ohne den Monat zu verlassen. */
.cal-day-drawer{position:fixed;z-index:3200;top:12vh;right:24px;width:min(420px,92vw);
  max-height:74vh;display:flex;flex-direction:column;border:1px solid var(--border);
  border-radius:11px;background:var(--card);box-shadow:0 14px 40px rgba(0,0,0,.28);
  overflow:hidden}
.cmd-h{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cmd-h i{color:var(--accent);flex:none}
.cmd-titel-k{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-anz{flex:none;font-size:11px;color:var(--text2);padding:1px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--text2) 12%,transparent)}
.cmd-x{flex:none;border:none;background:none;color:var(--text2);cursor:pointer;font-size:14px;
  padding:2px 6px;border-radius:6px}
.cmd-x:hover{background:color-mix(in srgb,var(--text2) 12%,transparent)}
.cmd-b{overflow:auto;padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.cmd-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;
  border:1px solid transparent}
.cmd-row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:var(--border)}
.cmd-zeit{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:var(--text2);min-width:86px;font-variant-numeric:tabular-nums}
.cmd-dot{width:8px;height:8px;border-radius:50%;flex:none}
.cmd-titel{flex:1;min-width:0;font-size:12.5px;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cmd-ort{flex:none;font-size:11px;color:var(--text2);max-width:110px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cmd-leer{padding:16px 12px;font-size:12.5px;color:var(--text2);text-align:center}
.cmd-f{padding:8px 10px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}
.cmd-f .tb-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
/* Kalender-Legende unter dem Monatsraster. */
.cml-wrap{margin-top:8px}
.cml{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 9px;border:1px solid var(--border);
  border-radius:8px;background:color-mix(in srgb,var(--text2) 4%,transparent)}
.cml-titel{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;color:var(--text2);margin-right:4px}
.cml-item{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;
  border:1px solid var(--border);background:transparent;cursor:pointer;font:inherit;font-size:11.5px;
  color:var(--text2);white-space:nowrap;max-width:220px}
.cml-item.on{color:var(--text);border-color:color-mix(in srgb,var(--text2) 35%,transparent)}
.cml-item:not(.on){opacity:.5}
.cml-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cml-dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.cml-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Der „+N weitere"-Link wird als Schaltfläche erkennbar. */
.cm-more{cursor:pointer;border-radius:5px}
.cm-more:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);text-decoration:underline}

/* ===========================================================================
   Gitea-Issue #124 (Kap. 331): Die globale Mail-Ribbonleiste ist INAKTIV, wenn
   im Mail-Fenster eine eigene Leiste aktiv ist. Sie bleibt sichtbar (kein
   Layout-Sprung), wirkt aber gedämpft und nimmt keine Klicks mehr an.
   =========================================================================== */
.mail-ribbonbar.rb-inaktiv{pointer-events:none;opacity:.45;filter:grayscale(.35)}
.mail-ribbonbar.rb-inaktiv .mrb-tab,
.mail-ribbonbar.rb-inaktiv .mc-btn{cursor:default}

/* ===========================================================================
   Gitea-Issue #127 (Kap. 332): „Senden um…"-Popup.
   GEMESSEN vorher: die Zeilen trugen `re-menu-act`, aber das Styling haengt an
   `.re-menu-it` (fehlte) -> Browser-Standard (grau, 2px Rahmen, radius 0);
   die Hauptzeile war ein <div> mit 16px und cursor:auto (sah wie Fliesstext aus),
   das Zeitfeld war 21px hoch, und es gab kein Abbrechen.
   =========================================================================== */
.re-menu-pop.sn-pop{min-width:300px;max-width:340px;padding:0;overflow:visible}
.sn-h{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:8px 8px 0 0}
.sn-h i{color:var(--accent);flex:none}
.sn-h span{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--text)}
.sn-x{flex:none;border:none;background:none;color:var(--text2);cursor:pointer;font-size:12px;
  padding:2px 6px;border-radius:5px;line-height:1}
.sn-x:hover{background:color-mix(in srgb,var(--text2) 14%,transparent)}
.sn-b{padding:10px 12px 6px}
.sn-lbl{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:4px}
/* Zeitfeld ordentlich gepolstert (vorher 21px hoch, kein Padding). */
.sn-inp{width:100%;box-sizing:border-box;padding:7px 9px;font-size:13px;font-family:inherit;
  color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:7px;min-height:34px}
.sn-inp:focus{outline:2px solid var(--accent);outline-offset:1px}
.sn-quick-titel{font-size:11px;font-weight:600;color:var(--text2);margin:10px 0 5px}
.sn-quick-reihe{display:flex;gap:5px;flex-wrap:wrap}
/* Schnellwahl als echte kleine Schaltflaechen in einer Reihe. */
.sn-quick{flex:1 1 auto;padding:6px 9px;font:inherit;font-size:11.5px;font-weight:600;
  color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:7px;
  cursor:pointer;white-space:nowrap}
.sn-quick:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sn-quick.on{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 13%,transparent)}
.sn-hinweis{display:flex;align-items:flex-start;gap:6px;margin-top:9px;padding:6px 8px;border-radius:6px;
  font-size:11px;line-height:1.35;color:var(--text2);
  background:color-mix(in srgb,var(--text2) 7%,transparent)}
.sn-hinweis i{flex:none;margin-top:1px}
.sn-f{display:flex;justify-content:flex-end;gap:7px;padding:9px 12px;border-top:1px solid var(--border)}
.sn-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;font:inherit;font-size:12.5px;
  font-weight:600;border-radius:7px;cursor:pointer;border:1px solid var(--border);
  background:var(--card);color:var(--text)}
.sn-btn:hover{background:color-mix(in srgb,var(--text2) 9%,transparent)}
.sn-btn.sn-ok{border-color:var(--accent);background:var(--accent);color:#fff}
.sn-btn.sn-ok:hover{filter:brightness(1.08)}
.sn-btn.sn-ok i{width:13px;height:13px}

/* ===========================================================================
   Kap. 335: Issue-Zeile — Ersteller und Repository sind zwei verschiedene Dinge.
   Vorher stand der Repo-Pfad direkt vor „von <autor>" und wirkte wie ein Name.
   =========================================================================== */
.git-row-s .git-aut{display:inline-flex;align-items:center;gap:4px;font-weight:600;
  color:color-mix(in srgb,var(--text) 88%,transparent)}
.git-row-s .git-aut i{flex:none;opacity:.65}
.git-row-s .git-repo-in{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;
  border:1px solid var(--border);border-radius:5px;font-size:11px;color:var(--text2);
  background:color-mix(in srgb,var(--text2) 5%,transparent);max-width:230px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.git-row-s .git-repo-in i{flex:none;opacity:.6}
.git-row-s .git-repo-in .git-mono{color:var(--text2)}
.git-row-s .git-datum{margin-left:auto;color:var(--text2);opacity:.85}

/* ===========================================================================
   Kap. 336: Avatar-Chip in der Issue-Zeile (Wunsch des Nutzers).
   Verwendet dieselbe `.av`-Optik wie Talk/Mail (echtes Foto, sonst kraeftige
   Initialen) — hier nur auf die Zeilenhoehe abgestimmt.
   =========================================================================== */
.git-aut{display:inline-flex;align-items:center;gap:5px;font-weight:600;
  color:color-mix(in srgb,var(--text) 90%,transparent)}
.git-aut-av{position:relative;flex:none;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:8.5px;font-weight:700;color:#fff;letter-spacing:0;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.git-aut-av .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .18s ease}
.git-aut-av .av-img.da{opacity:1}
/* Etwas groesser in der ruhigeren Issue-Liste (mehr Luft pro Zeile). */
.git-row .git-aut-av{width:20px;height:20px;font-size:9px}

/* ===========================================================================
   Kap. 339 (#129): Hinweis auf gesicherten Entwurf im Anlege-Formular.
   =========================================================================== */
.git-entwurf-hinweis{display:flex;align-items:center;gap:6px;margin-top:6px;padding:5px 8px;
  border-radius:6px;font-size:11.5px;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.git-entwurf-hinweis i{flex:none}
.git-entwurf-hinweis span{flex:1;min-width:0}
.git-entwurf-weg{flex:none;border:none;background:none;color:var(--accent);cursor:pointer;
  font:inherit;font-size:11px;font-weight:600;text-decoration:underline;padding:0}
.git-entwurf-weg:hover{color:var(--danger)}

/* ===========================================================================
   Gitea-Issue #138 EPIC / Nutzer-Wunsch (17.09.2026):
   „von der UI her muss es noch overhauled werden, es sieht jetzt sehr plain und
    trocken aus. mehr farben, mit hovereffekt, eventuell zeilen hovereffekt,
    volle kontextmenüs mit rechtsklick"

   Farbregel des Hauses bleibt: Die MODULFARBE trägt das Signal (Ordner = Bernstein,
   Datei-Typ = eigene Farbe), Flächen bleiben ruhig. Kein Regenbogen — aber
   deutlich mehr Leben als vorher: farbige Typ-Kacheln, Zeilen-Hover mit Akzentkante,
   Zahren-Zebra, Kacheln die sich heben.
   =========================================================================== */

/* ---------- 1) Listenzeilen: deutlicher Hover mit Akzentkante links ---------- */
.file-table .file-row{position:relative}
.file-table .file-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);transform:scaleY(0);transform-origin:center;
  transition:transform var(--dur-2) ease}
.file-table .file-row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.file-table .file-row:hover::before{transform:scaleY(1)}
.file-table .file-row.zebra{background:color-mix(in srgb,var(--text) 3%,transparent)}
.file-table .file-row.zebra:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
/* Ordner-Zeilen bekommen die Bernstein-Note, Datei-Zeilen bleiben neutral */
.file-table .file-row.file-dir:hover{background:color-mix(in srgb,var(--wiki) 10%,transparent)}
.file-table .file-row.file-dir:hover::before{background:var(--wiki)}
/* Ausgewählt: klare Marke, nicht nur ein Hauch */
.file-table .file-row.sel{background:color-mix(in srgb,var(--accent) 13%,transparent)}
.file-table .file-row.sel::before{transform:scaleY(1)}

/* ---------- 2) Datei-Typen farbig: Icon bekommt Typ-Farbe + Tönung ---------- */
/* Die Typ-Farbe wird per data-Attribut am Icon gesetzt (files.js), damit hier
   keine Liste doppelt gepflegt werden muss. */
/* GEMESSEN: die Badges liegen NICHT in `.file-ico-cell` (diese Klasse gibt es in
   der Listenansicht gar nicht) — die alte Regel griff deshalb nie und die Farbe
   blieb die geerbte Textfarbe (rgb(15,23,42)). Selektor jetzt auf die Stellen
   gesetzt, wo die Badges wirklich stehen: Namensspalte der Liste und Icon-Feld
   der Kacheln. */
.file-table .fc-name .fi-badge,
.file-tile .ft-ic .fi-badge,
.file-ico-cell .fi-badge{width:30px;height:30px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;flex:none;vertical-align:middle;
  margin-right:6px;
  background:color-mix(in srgb,var(--fi,var(--accent)) 15%,transparent);
  color:var(--fi,var(--accent));transition:transform var(--dur-2) ease,box-shadow var(--dur-2) ease}
/* GEMESSEN (Nutzer-Wunsch „mehr farben"): 15 % Tönung war zu blass — im
   Screenshot wirkten alle Kacheln grau. Auf 22 % angehoben und dem Icon die
   volle Typ-Farbe gegeben (vorher stand dort die geerbte Textfarbe). */
.file-table .fc-name .fi-badge,
.file-tile .ft-ic .fi-badge{background:color-mix(in srgb,var(--fi,var(--accent)) 22%,var(--card));
  color:var(--fi,var(--accent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fi,var(--accent)) 35%,transparent)}
.file-table .fc-name .fi-badge svg,
.file-tile .ft-ic .fi-badge svg{color:var(--fi,var(--accent));stroke:currentColor}
.file-table .file-row:hover .fi-badge{transform:scale(1.08);
  box-shadow:0 2px 8px color-mix(in srgb,var(--fi,var(--accent)) 30%,transparent)}
.file-table .fc-name .fi-badge svg,
.file-tile .ft-ic .fi-badge svg,
.file-ico-cell .fi-badge svg{width:16px;height:16px;stroke-width:1.7}
/* In den Kacheln ist die Badge grösser (das Icon ist dort der Blickfang) */
.file-tile .ft-ic .fi-badge{width:40px;height:40px;border-radius:12px;margin-right:0}
.file-tile .ft-ic .fi-badge svg{width:20px;height:20px}

/* ---------- 3) Kacheln: heben sich, farbige Oberseite ---------- */
.file-tile{position:relative;overflow:hidden}
.file-tile::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--fi,var(--accent));opacity:.75;
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) ease}
.file-tile:hover::after{transform:scaleX(1)}
.file-tile:hover{border-color:color-mix(in srgb,var(--fi,var(--accent)) 45%,var(--border));
  box-shadow:0 6px 20px color-mix(in srgb,var(--fi,var(--accent)) 20%,transparent);
  transform:translateY(-2px)}
.file-tile:active{transform:translateY(0)}
.file-tile .file-ico{transition:transform var(--dur-2) ease}
.file-tile:hover .file-ico{transform:scale(1.1) rotate(-2deg)}
/* Ordner-Kacheln: Bernsteinton wie im Haus (Ordnername in Modulfarbe) */
.file-tile[data-dir="1"] .file-ico{color:var(--wiki)}
.file-tile[data-dir="1"]:hover{border-color:color-mix(in srgb,var(--wiki) 45%,var(--border));
  box-shadow:0 6px 20px color-mix(in srgb,var(--wiki) 18%,transparent)}
.file-tile .file-nm{transition:color var(--dur-2) ease}
.file-tile:hover .file-nm{color:var(--accent)}
.file-tile[data-dir="1"]:hover .file-nm{color:var(--wiki)}

/* ---------- 4) Baum: Zeilen-Hover mit Akzentkante ---------- */
.ft-row{position:relative}
.ft-row::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;
  border-radius:2px;background:var(--accent);opacity:0;transition:opacity var(--dur-2) ease}
.ft-row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.ft-row:hover::before{opacity:.6}
.ft-row.aktiv::before{opacity:1}
.ft-row.aktiv{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}

/* ---------- 5) Kontextmenü: voller, mit Kopf und Trennern ---------- */
.ctx-menu{min-width:238px;padding:6px;border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.24)}
.ctx-item{display:flex;align-items:center;gap:10px;width:100%;border:none;
  background:transparent;color:var(--text);font-family:inherit;font-size:13px;
  font-weight:600;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;
  transition:background var(--dur-1) ease,color var(--dur-1) ease}
.ctx-item svg{width:15px;height:15px;flex:none;color:var(--text2);
  transition:color var(--dur-1) ease}
.ctx-item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.ctx-item:hover svg{color:var(--accent)}
.ctx-item.danger{color:var(--danger)}
.ctx-item.danger svg{color:var(--danger)}
.ctx-item.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.ctx-sec{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text2);padding:6px 10px 4px}
.ctx-sep{height:1px;background:var(--border);margin:5px 6px}

/* ---------- 6) Sortier-Köpfe: klickbar erkennbar ---------- */
.file-head{cursor:pointer;user-select:none}
.file-head:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);
  color:var(--accent)}
.file-head svg{transition:transform var(--dur-2) ease}
.file-head:hover svg{transform:translateY(-1px)}

/* ===========================================================================
   Gitea-Issue #144 (P1): Teilen-Dialog („wir brauchen auch die freigabe-features
   aus nextcloud hier") + Feinschliff der Breadcrumb- und Typ-Farben.
   Haus-Regel bleibt: Farbe trägt das Signal, Flächen bleiben ruhig.
   =========================================================================== */
.teilen-box{display:flex;flex-direction:column;gap:12px;min-width:440px}
.teilen-kopf{display:flex;align-items:center;gap:8px;font-size:13.5px;
  padding:8px 10px;border-radius:8px;color:var(--text);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border-left:3px solid var(--accent)}
.teilen-kopf svg{color:var(--accent);flex:none}
.teilen-neu{display:flex;flex-direction:column;gap:8px;padding:10px;
  border:1px solid var(--border);border-radius:9px;background:var(--card)}
.teilen-zeile{display:flex;gap:8px;align-items:flex-start}
.teilen-zeile .set-inp{flex:1;min-width:0}
.teilen-such{position:relative;flex:2;min-width:0}
.teilen-vorschlaege{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;
  max-height:210px;overflow-y:auto;background:var(--card);border:1px solid var(--border);
  border-radius:9px;box-shadow:0 10px 28px rgba(0,0,0,.2);padding:4px}
.teilen-vorschlaege[hidden]{display:none}
.teilen-v{display:flex;align-items:center;gap:8px;width:100%;border:none;background:transparent;
  color:var(--text);font-family:inherit;font-size:12.5px;text-align:left;
  padding:6px 8px;border-radius:6px;cursor:pointer}
.teilen-v:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.tv-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-typ{font-size:10.5px;font-weight:700;color:var(--text2);flex:none;
  background:var(--hover);padding:1px 6px;border-radius:999px}
.teilen-v-leer{font-size:12px;color:var(--text2);padding:7px 9px;font-style:italic}
.teilen-liste{display:flex;flex-direction:column;gap:6px}
.teilen-t{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text2);padding:2px 2px 0}
.teilen-cnt{background:var(--accent);color:#fff;border-radius:999px;padding:0 6px;font-size:10px}
.teilen-item{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border:1px solid var(--border);border-radius:8px;background:var(--card);
  transition:border-color var(--dur-2) ease,background var(--dur-2) ease}
.teilen-item:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 4%,var(--card))}
.ti-ico{flex:none;display:inline-flex;color:var(--accent)}
.ti-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ti-txt b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-txt small{font-size:11px;color:var(--text2)}
.ti-btn{border:1px solid var(--border);background:transparent;color:var(--text2);
  width:26px;height:26px;border-radius:6px;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.ti-btn:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.ti-btn.danger:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}
.teilen-leer{font-size:12.5px;color:var(--text2);padding:10px;font-style:italic;
  border:1px dashed var(--border);border-radius:8px;text-align:center}
.teilen-fehler{font-size:12.5px;color:var(--danger);padding:10px;
  border:1px solid color-mix(in srgb,var(--danger) 40%,var(--border));border-radius:8px}
.teilen-laden{font-size:12.5px;color:var(--text2);padding:8px}

/* ===========================================================================
   Gitea-Issue #143 (P1): Drag & Drop zwischen Ordnern.
   Ablage-Feedback: das Ziel bekommt eine deutliche Akzentkontur plus Tönung;
   bei Shift (kopieren) zusätzlich gestrichelt, damit man den Unterschied sieht.
   =========================================================================== */
[draggable="true"]{cursor:grab}
[draggable="true"]:active{cursor:grabbing}
/* Die gezogene Zeile/Kachel wird sichtbar „abgehoben" */
body.dnd-laeuft [draggable="true"]:active{opacity:.5}
body.dnd-laeuft #filesList .file-row.file-dir,
body.dnd-laeuft #filesList .file-tile[data-dir="1"],
body.dnd-laeuft #ftBody .ft-row{cursor:copy}
/* Ziel-Markierung: Ordner-Zeile */
.file-row.file-dir.dnd-ziel,
.file-tile[data-dir="1"].dnd-ziel,
.ft-row.dnd-ziel{
  background:color-mix(in srgb,var(--accent) 18%,transparent) !important;
  box-shadow:inset 0 0 0 2px var(--accent) !important;
  border-radius:8px}
.file-row.file-dir.dnd-ziel .fc-name,
.ft-row.dnd-ziel .ft-name{color:var(--accent);font-weight:700}
/* Bei Shift (kopieren) gestrichelt + eigenes Symbol */
.file-row.file-dir.dnd-kopie,
.file-tile[data-dir="1"].dnd-kopie,
.ft-row.dnd-kopie{
  background:color-mix(in srgb,var(--ok) 16%,transparent) !important;
  box-shadow:inset 0 0 0 2px var(--ok) !important;
  border-radius:8px}
.file-row.file-dir.dnd-kopie .fc-name,
.ft-row.dnd-kopie .ft-name{color:var(--ok)}
/* Beim Ziehen zeigen Ordner, dass sie Ziele sind (ruhig, nur Kante) */
body.dnd-laeuft #filesList .file-row.file-dir{border-left:3px solid color-mix(in srgb,var(--wiki) 55%,transparent)}
body.dnd-laeuft #filesList .file-tile[data-dir="1"]{border-color:color-mix(in srgb,var(--wiki) 45%,var(--border))}

/* ===========================================================================
   Gitea-Issue #142 (P1): Thumbnail-Darstellung.
   Der Platzhalter zeigt zunächst das Typ-Icon; sobald das Bild da ist, füllt es
   die Kachel ganz aus (Bild soll wirken, nicht in einem Icon-Kästchen sitzen).
   =========================================================================== */
.fi-thumb{overflow:hidden;position:relative}
.fi-thumb.hat-bild{background:color-mix(in srgb,var(--fi,var(--accent)) 8%,var(--card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fi,var(--accent)) 30%,transparent)}
.fi-thumb .fi-thumb-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* Solange nichts geladen ist, bleibt das Icon ruhig (kein Flackern) */
.fi-thumb:not(.hat-bild) svg{opacity:.85}
/* In der LISTE ist der Platzhalter klein — das Bild darf nicht die Zeile sprengen */
.file-table .fc-name .fi-thumb{width:30px;height:30px;border-radius:9px}
/* In den KACHELN gross: das Bild ist hier der Blickfang */
.file-tile .ft-ic .fi-thumb{width:40px;height:40px;border-radius:12px}
/* Beim Überfahren wächst nur die Kachel leicht — das Bild bleibt ruhig */
.file-tile:hover .ft-ic .fi-thumb{transform:scale(1.04)}
.file-tile .ft-ic .fi-thumb{transition:transform var(--dur-2) ease}

/* ===========================================================================
   Gitea-Issue #146 (P1): Tastatur-Navigation und Barrierefreiheit.
   Sichtbarer Fokus (WCAG 2.4.7), Trefferfläche, Screenreader-Hilfsklasse.
   =========================================================================== */
/* Der Tastatur-Fokus muss deutlich sichtbar sein — nicht nur ein dünner Rahmen */
#filesList:focus{outline:none}
#filesList:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.file-row.kb-fokus{
  background:color-mix(in srgb,var(--accent) 15%,transparent) !important;
  box-shadow:inset 0 0 0 2px var(--accent);
  border-radius:8px;
  position:relative;z-index:1}
.file-row.kb-fokus .fc-name{color:var(--accent);font-weight:700}
/* Ordner-Zeilen im Fokus in der Modulfarbe, damit man den Unterschied sieht */
.file-row.file-dir.kb-fokus{
  background:color-mix(in srgb,var(--wiki) 15%,transparent) !important;
  box-shadow:inset 0 0 0 2px var(--wiki)}
.file-row.file-dir.kb-fokus .fc-name{color:var(--wiki)}
/* Fokus auch am Baum deutlich machen */
.ft-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
/* Nur für Screenreader — unsichtbar, aber vorgelesen */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Tastatur-Hinweis im Dateien-Kopf (nur sichtbar, wenn gewünscht — klein und ruhig) */
.kb-hinweis{font-size:11px;color:var(--text2);padding:2px 4px;display:flex;gap:8px;flex-wrap:wrap}
.kb-hinweis kbd{font-family:inherit;font-size:10.5px;font-weight:700;color:var(--text2);
  background:var(--hover);border:1px solid var(--border);border-radius:4px;padding:0 4px}

/* ===========================================================================
   Gitea-Issue #147 (P1): Spalten ein-/ausblenden + Breite.
   Die Breiten kommen aus CSS-Variablen am Tabellen-Element (--col-size, --col-date,
   --col-type, --col-frei, --col-ver). Das Ziehen setzt nur diese Variablen —
   dadurch bleibt die Liste schnell, auch bei 50+ Zeilen.
   Rückfall auf die alten festen Werte, falls eine Variable fehlt.
   =========================================================================== */
.file-table .fc-size{width:var(--col-size,90px);flex:none;font-size:12px;color:var(--text2);
  display:flex;align-items:center;justify-content:flex-end;gap:4px}
.file-table .fc-date{width:var(--col-date,140px);flex:none;font-size:12px;color:var(--text2);
  display:flex;align-items:center;gap:4px}
.file-table .fc-type{width:var(--col-type,80px);flex:none;font-size:11px;color:var(--text2);
  text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;gap:4px}
.file-table .fc-frei{width:var(--col-frei,110px);flex:none;font-size:12px;color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}
.file-table .fc-ver{width:var(--col-ver,80px);flex:none;font-size:12px;color:var(--text2);
  display:flex;align-items:center;gap:4px}
/* Der Zieh-Griff sitzt am rechten Rand der Spalte (wie im Dateimanager). */
.file-table .file-head .sp-griff{width:8px;height:18px;flex:none;margin-left:auto;
  cursor:col-resize;border-radius:3px;position:relative}
.file-table .file-head .sp-griff::after{content:"";position:absolute;left:3px;top:2px;bottom:2px;
  width:2px;border-radius:2px;background:var(--border);transition:background var(--dur-1) ease}
.file-table .file-head .sp-griff:hover::after{background:var(--accent)}
/* Der Spalten-Knopf sitzt rechts in der Kopfzeile */
.file-table .fc-spknopf{width:30px;flex:none;display:flex;align-items:center;justify-content:center}
/* Sortier-Köpfe sind klickbar — Griff darf den Klick nicht schlucken */
.file-table .file-head .fc-sort{cursor:pointer;user-select:none}
/* Zahlen rechtsbündig, damit Grössen vergleichbar sind */
.file-table .fc-size{font-variant-numeric:tabular-nums}

/* Kap. 428: Streifen "Geplante Sendungen" im Postausgang. Farbe ist Signal:
   geplant ist ein ZUSTAND, kein Inhalt — deshalb gedaempft, mit Zeitpunkt zuerst. */
.mg-box{border:1px solid var(--line,#d7dce5);border-left:4px solid var(--accent,#0b6bcb);
  border-radius:6px;margin:6px 8px;background:var(--bg2,#f7f9fc);max-height:132px;overflow:auto}
.mg-h{display:flex;align-items:center;gap:6px;padding:5px 9px;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text2);border-bottom:1px solid var(--line,#d7dce5)}
.mg-h svg{width:13px;height:13px}
.mg-hinweis{margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0;opacity:.75}
.mg-zeile{display:flex;align-items:center;gap:8px;padding:4px 9px;font-size:12px;
  border-bottom:1px solid var(--line,#d7dce5)}
.mg-zeile:last-child{border-bottom:0}
.mg-zeit{flex:none;min-width:118px;font-variant-numeric:tabular-nums;color:var(--accent,#0b6bcb)}
.mg-an{flex:none;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.mg-betreff{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-x{flex:none;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line,#d7dce5);
  background:transparent;border-radius:4px;padding:2px 7px;font-size:11px;cursor:pointer;color:var(--danger,#a4262c)}
.mg-x:hover{background:var(--danger,#a4262c);color:#fff;border-color:var(--danger,#a4262c)}
.mg-x svg{width:12px;height:12px}
.mg-x-hinweis{flex:none;font-size:11px;opacity:.6}


/* ===================================================================
   Kap. 12.4 Punkt 6 — 320 px ohne waagerechtes Scrollen.
   Gemessen am 30.09.2026 gegen die ausgelieferte Fassung (Werkzeug:
   scripts/abnahme_alle_bereiche.py, 17 Bereiche x 3 Breiten): vier Bereiche
   liefen hinaus — docs +34 px, search +47 px, netzwerk +39 px, ai +12 px.

   WARUM DIESER BLOCK AM ENDE DER DATEI STEHT: eine @media-Abfrage gibt einer
   Regel KEINE zusaetzliche Spezifitaet. .cx-top (Z. 2321), .ai-input-row (Z.
   2321/2501) und .docs-grid (Z. 2419) stehen weiter unten in dieser Datei als
   der Schmal-Block bei Zeile 386 — bei gleicher Spezifitaet gewinnt die
   spaetere Regel, unabhaengig von der Medienabfrage. Genau daran sind die
   ersten vier Versuche gescheitert (Messwert blieb unveraendert +34/+39).
   =================================================================== */
@media (max-width: 767px) {
  /* Kopfzeile: Suche nimmt den freien Platz, Werkzeuge schrumpfen.
     Vorher gemessen: die Gruppe .right ragte 380-600 px hinaus und wurde vom
     overflow-x:hidden der Kopfzeile nur VERDECKT — der Profilbereich war auf
     schmalen Geraeten abgeschnitten, nicht bedienbar. */
  /* Platz auf 320 px: gemessen 310 px Kopfzeilenbreite minus Rand = 192 px
     Innenraum. Titel (27) + Suche (130) + drei Werkzeuge (3x36=108) + Profil (71)
     = 336 px — passt nicht. Die Kopfzeilen-Suche entfaellt hier, weil die untere
     Leiste bereits `#railSearch` traegt (zeigt auf dieselbe Suchseite) und die
     Suchseite oben ihr eigenes Feld hat. Damit ist Suche weiterhin mit einem
     Griff erreichbar; die Werkzeuge behalten die Zielgroesse 44 px aus Kap. 12.4
     Punkt 2 (Versuch 1 drueckte sie auf 13 px — schlimmer als der Ueberlauf).
     Der Titel entfaellt ebenfalls: der Bereichsname steht im Ribbon, die Marke
     im Rail-Knopf. */
  .header .search{display:none}
  .header h1 #hTitle{display:none}
  .header .right{flex:0 0 auto;gap:6px;margin-left:auto}
  .header .right > *{flex:0 0 auto}
  /* Touch: 44 px Zielgroesse statt 36 px (Kap. 12.4 Punkt 2). */
  .header .iconbtn{width:44px;height:44px}
  .header .head-health{padding:6px 10px;min-height:44px}
  .header h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header .head-health span:last-child{display:none}
  .header .user span#userName{display:none}
  /* Der 90 px breite Rand rechts (Platz fuer die zugeklappte Messenger-Leiste,
     ui-2026.css: `body:not(.msgr-collapsed) .header{padding-right:calc(62px + 28px)}`)
     gehoert dem breiten Layout. Hier ist die Navigation die untere Leiste, es gibt
     keine Spalte zu umgehen — gemessen blieben der Kopfzeile 192 px Innenbreite,
     die Werkzeuggruppe braucht 197 px. Deshalb hier ohne Spezifitaets-Patt:
     0,2,2 gegen 0,2,1 aus ui-2026.css. */
  html body.msgr-pinned .header, html body.msgr-collapsed .header,
  html body:not(.msgr-collapsed) .header{padding-right:14px}

  /* docs +34 px — drei Ursachen, alle gemessen (scrollWidth - clientWidth):
     a) .docs-api-cols ist ein auto-fit-Raster mit minmax(300px,1fr); der
        Behaelter ist nur 240 px breit, die Spalte bekam 300 px.
     c) .docs-api-note ist eine Flex-Zeile [Icon | Text]; das Icon hat
        flex:none, der Text daneben bekommt min-width:auto = Inhaltsbreite
        und kann nicht unter den laengsten Wortzug schrumpfen (319 px in
        einem 240-px-Kasten).
     d) .docs-grid nutzt minmax(320px,1fr) — acht Karten zu 320 px in einem
        292-px-Behaelter. min(320px,100%) laesst sie schrumpfen, ohne die
        Komfortbreite auf grossen Bildschirmen zu verlieren. */
  .docs-api-cols{grid-template-columns:1fr}
  .docs-api-col{min-width:0}
  .docs-api-note{flex-wrap:nowrap;overflow-wrap:anywhere}
  .docs-api-note b,.docs-api-note span{min-width:0}
  .docs-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
  .doc-card{min-width:0}
  .docs-intro-txt{min-width:0}
  .docs-intro{gap:14px;padding:16px 18px}
  .doc-stat{min-width:0;flex:1 1 96px;padding:10px 12px}

  /* search +47 px: .ds-row ist eine Flex-Zeile, das Eingabefeld darin hat keine
     Schrumpfgrenze. min-width:0 erlaubt das Schrumpfen unter die Inhaltsbreite
     (Vorgabewert ist auto = Inhaltsbreite). */
  .ds-row{gap:8px}
  .ds-row > *{min-width:0}
  .ds-input-wrap{flex:1 1 auto;min-width:0;padding:8px 12px}
  .ds-input-wrap input{min-width:0}

  /* netzwerk +39 px: .cx-top ist eine nowrap-Werkzeugleiste. */
  .cx-top{flex-wrap:wrap;row-gap:6px}
  .cx-top > *{min-width:0}
  .cx-top .tb-btn{flex:none}

  /* ai +12 px: gleiche Ursache, .ai-input-row ist nowrap. */
  .ai-input-row{flex-wrap:wrap;row-gap:8px;padding:12px 14px 14px}
  .ai-input-row > *{min-width:0}
  .ai-input-row .tb-btn.primary{flex:none}

  /* NICHT geaendert: .rail und .mrb-tabs duerfen waagerecht scrollen — sie sind
     Bedienelemente mit fester Zielgroesse, kein Inhaltsfluss. Beide stehen auf
     overflow-x:auto und werden von der Messung ausgenommen. */
}

/* ===================================================================
   Kopfzeile 768-1100 px — gemessen: bei 768 px Fenster ragte der
   Profilbereich bis 899 px hinaus (mit overflow-x:clip nur VERDECKT, also
   nicht erreichbar). Die Kopfzeile hat dort 682 px, gebraucht wurden:
     .header h1   flex-shrink:0          -> 240 px, schrumpfte nie
     .search      flex:1, max-width:480  -> 239 px + 24 px Rand
     .right       268-293 px, schrumpfte nicht
   Deshalb in diesem Band: Bereichsname aus (er steht in der Leiste), Suche
   darf schrumpfen.
   =================================================================== */
@media (max-width: 1100px) {
  .header h1{min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header h1 #hTitle{display:none}
  .header .search{flex:1 1 auto;min-width:90px;max-width:none;margin:0}
  /* min-width:0 auf BEIDEN Seiten: die Suche darf schrumpfen UND die
     Werkzeuggruppe. Ohne das zweite bleibt die Gruppe bei 197-314 px stehen
     (gemessen: sie ragte bei 320 px um 21 px hinaus, weil die Suche nur bis
     zu ihrem Inhalt schrumpfen konnte). */
  .header .right{flex:0 1 auto;min-width:0}
  .header .head-health span:last-child{display:none}
}