/* 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:30px;height:30px;border-radius:9px;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)}
.chat-msg:hover .rr-btn,.msg:hover .rr-btn{opacity:1}
.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}
.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).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}
.empty{padding:26px;text-align:center;color:var(--text2);font-size:13px}
.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)}
.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}
.file-type-row{display:flex;gap:4px;flex-wrap:wrap}
.file-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)}
.file-type:hover{background:var(--hover)}
.file-type.sel{background:var(--accent);border-color:var(--accent);color:#fff}
.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)}
.file-selbar{display:flex;align-items:center;gap:10px;margin:8px 0;padding:7px 12px;border:1px solid var(--accent);border-radius:8px;background:var(--accent-light)}
/* ===========================================================================
   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}
/* Gitea-Issue #187: k360-Marke. Das Kaestchen war vorher eine Farbflaeche mit dem Text
   „IT". Jetzt traegt das Inline-SVG die Marke — deshalb kein Hintergrund und keine
   Schrift mehr am Container (sonst doppelte Flaeche hinter dem Logo). */
.login-box .lg{width:64px;height:64px;border-radius:18px;background:transparent;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 6px 18px rgba(11,107,203,.35)}
.login-box .lg svg{width:64px;height:64px;border-radius:18px;display:block}
.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:'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) --- */
.tb-btn{border-radius:10px;padding:8px 16px;font-size:13px;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)}
.tb-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));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}
#actionsBody.dense .act-item:hover .ac-acts{opacity:1}
#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)}
.act-item .ac-acts button.ac-wand{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--card)),color-mix(in srgb,var(--accent-2) 18%,var(--card)));border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent)}
.act-item .ac-acts button.ac-wand:hover{background:linear-gradient(135deg,var(--accent),var(--accent-2));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}
.msgr-person .mp-anruf{width:14px;height:14px;flex:none;margin-left:auto;color:var(--text2);
  opacity:0;transition:opacity .15s ease;cursor:pointer}
.msgr-person:hover .mp-anruf{opacity:1}
.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}