/* =====================================================================================
   aviscus CRM – app.css · „Structured Tech“ (Richtung C) · Neuaufbau September 2026
   Grundlage: Mockups Dashboard / Tickets / Ticketdetail / Kundendetail / Mobil (Richtung C)
   und claude/crm-ui-styleguide.md. Einzige Übernahme aus dem alten Stylesheet: der
   Beleg-/Druck-/Servicebericht-Block (Abschnitt 8), weil dessen Werte an die
   PDF-Spezifikationen gebunden sind.
   Abschnitte: 1 Tokens · 2 Basis · 3 Sidebar · 4 Topbar & Suche · 5 Seiteninhalt
   (Kopf, KPI, Karten, Tabellen, Badges, Buttons, Formulare, Tabs, Filter, Modale, Toast)
   · 6 Dashboard-Bausteine · 7 Kalender/Chat/Editor · 8 Belege/Druck · 9 Login · 10 Responsive
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------------- 1. Tokens ---------------- */
:root{
  --brand:#2F6FE0;--brand-dark:#2359BF;--brand-text:#2359BF;--brand-bg:#EAF1FD;--brand-line:#C9DBF6;
  --sky:#6FC3F7;--navy:#0B1830;--navy-light:#16264A;
  --teal:var(--brand);--teal-dark:var(--brand-dark);--brand-soft:var(--brand-bg);--radius-pill:999px;           /* Aliase für Bestandscode in index.html */
  --bg:#EEF2F7;--bg-2:#E6EBF3;--bg-subtle:#F5F8FC;--bg-hover:#F5F8FC;
  --card:#FFFFFF;--border:#DCE2EC;--border-soft:#ECF0F5;--border-strong:#C5CDDA;
  --text:#1F2430;--heading:#0B1830;--muted:#66718A;--text-muted:#66718A;--text-soft:#8B93A1;--link:#2359BF;
  --ok:#1E7A46;--ok-bg:#E3F5EA;--bad:#B42318;--bad-bg:#FDECEA;--danger:#B42318;--danger-bg:#FDECEA;--danger-border:#F4C7C1;
  --warn:#9A5B00;--warn-bg:#FFF1DB;--success:#1E7A46;
  --av-bg:#DFE6F2;--av-text:#3F4A5C;
  --info-bg:#F5F8FC;--info-border:#E3E9F2;--info-accent:#7A9BD1;--info-text:#4B5563;
  --side-bg:#0B1830;--side-text:#C3CEE3;--side-muted:#6C7C9E;--side-icon:#7F90B0;--side-border:rgba(255,255,255,.08);
  --side-hover:rgba(255,255,255,.06);--side-active:rgba(47,111,224,.26);--side-active-text:#fff;--side-active-icon:#6FC3F7;
  --sw:232px;--topbar-h:56px;--r:10px;--r-sm:7px;--r-lg:14px;--radius:10px;--radius-sm:7px;
  --shadow:0 1px 2px rgba(11,24,48,.05);--shadow-card:0 1px 2px rgba(11,24,48,.05);--shadow-elevated:0 24px 60px rgba(11,24,48,.22),0 6px 18px rgba(11,24,48,.10);
  --focus:0 0 0 3px rgba(47,111,224,.22);
  --font:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,Menlo,monospace;
  color-scheme:light;
}
[data-theme="dark"]{
  --brand:#4A86F0;--brand-dark:#2F6FE0;--brand-text:#9DBFFF;--brand-bg:rgba(74,134,240,.16);--brand-line:rgba(74,134,240,.35);
  --bg:#0A1020;--bg-2:#121B30;--bg-subtle:#121B30;--bg-hover:#16223A;
  --card:#0F172A;--border:#1F2A44;--border-soft:#182238;--border-strong:#2C3A5C;
  --text:#D6DEEC;--heading:#F2F5FA;--muted:#7C889F;--text-muted:#8F9BB3;--text-soft:#6B778F;--link:#8FB5FF;
  --ok:#5BD08C;--ok-bg:rgba(46,158,91,.18);--bad:#FF7A6E;--bad-bg:rgba(224,90,74,.18);--danger:#FF7A6E;--danger-bg:rgba(224,90,74,.18);--danger-border:rgba(224,90,74,.35);
  --warn:#FFC061;--warn-bg:rgba(224,140,20,.16);--success:#5BD08C;
  --av-bg:#1E2A44;--av-text:#B9C6E0;
  --info-bg:#121C30;--info-border:#26374D;--info-accent:#4D7AB0;--info-text:#A7B3C9;
  --side-bg:#0B1830;--side-text:#B9C6E0;--side-muted:#5E6E8F;--side-icon:#6F80A3;--side-border:#1A2745;
  --side-hover:rgba(255,255,255,.05);--side-active:rgba(74,134,240,.18);
  --shadow:none;--shadow-card:none;--shadow-elevated:0 24px 60px rgba(0,0,0,.55);
  --focus:0 0 0 3px rgba(74,134,240,.32);
  color-scheme:dark;
}
[data-theme="dark"] body{background-image:radial-gradient(600px 300px at 20% -5%,rgba(47,111,224,.18),transparent 60%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,40px 40px,40px 40px;background-attachment:fixed;}

/* ---------------- 2. Basis ---------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:13px;line-height:1.45;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font-family:inherit}
::selection{background:rgba(47,111,224,.18)}
:focus-visible{outline:none;box-shadow:var(--focus)}
a{color:var(--link)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.01em}
.muted{color:var(--muted);font-size:12px}
.hint{color:var(--muted);font-size:12px}
.hidden{display:none !important}
#app{display:flex;min-height:100vh}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column}
main{flex:1;min-width:0;padding:26px 28px 56px;max-width:1400px;width:100%}
h1{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px;color:var(--heading);line-height:1.25}
h2{font-size:14px;font-weight:650;margin:0 0 12px;color:var(--heading)}
h3{font-size:13px;font-weight:650;margin:0 0 8px;color:var(--heading)}
.subtitle{margin:0 0 20px;color:var(--muted);font-size:13px}
.kicker,.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}

/* ---------------- 3. Sidebar ---------------- */
.sidebar{width:var(--sw);flex:none;display:flex;flex-direction:column;background:var(--side-bg);color:var(--side-text);border-right:1px solid var(--side-border);padding:18px 12px 12px;position:sticky;top:0;height:100vh;overflow:hidden}
.brand{padding:6px 10px 18px;display:flex;align-items:center}
.brand-logo{width:140px;max-width:100%;height:auto;display:block}
.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -4px;padding:0 4px}
.sidebar-nav::-webkit-scrollbar{width:6px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px}
.nav-group{margin-bottom:10px}.nav-group.hidden{display:none}
.nav-group-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;cursor:pointer;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--side-muted);user-select:none;border-radius:var(--r-sm)}
.nav-group-header:hover{color:var(--sky)}
.nav-group-chevron{font-size:9px;opacity:.6;transition:transform .15s}
.nav-group.collapsed .nav-group-chevron{transform:rotate(-90deg)}
.nav-group.collapsed .nav-group-items{display:none}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);color:var(--side-text);font-size:13px;font-weight:500;cursor:pointer;position:relative;margin-bottom:2px;line-height:1.35}
.nav-item.hidden{display:none}
.nav-item:hover{background:var(--side-hover);color:#fff}
.nav-item.active{background:var(--side-active);color:var(--side-active-text);font-weight:600;box-shadow:inset 3px 0 0 var(--sky)}
.nav-ic{display:inline-flex;flex:none;width:17px;height:17px;color:var(--side-icon)}
.nav-ic svg{width:17px;height:17px}
.nav-item.active .nav-ic{color:var(--side-active-icon)}
.nav-label{min-width:0}
.nav-item-badge{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--brand);color:#fff;line-height:16px;min-width:18px;text-align:center}
.side-user{display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--side-border);margin-top:4px;border-radius:0;cursor:pointer;color:#fff}
.side-user:hover{background:var(--side-hover)}
.side-user.active{background:var(--side-active);box-shadow:none}
.side-user-name{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-role{font-family:var(--mono);font-size:10.5px;color:var(--side-muted);letter-spacing:.03em}
.sidebar-icon-footer{display:flex;align-items:center;justify-content:space-around;padding:8px 4px 0}
.sidebar-icon-footer .nav-item,.sidebar-icon-footer button{border:0;background:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-sm);color:var(--side-icon);cursor:pointer;font:inherit;box-shadow:none}
.sidebar-icon-footer .nav-item:hover,.sidebar-icon-footer button:hover{background:var(--side-hover);color:#fff}
.sidebar-icon-footer .nav-item.active{background:var(--side-active);color:var(--sky);box-shadow:none}
.mobile-topbar{display:none !important}
.mobile-tabbar{display:none}
.sidebar-backdrop{display:none}
input[type=file]{font-size:12.5px;color:var(--muted)}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:12px;padding:6px 11px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--heading);margin-right:10px;cursor:pointer}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;letter-spacing:.02em}
.avatar.sm{width:30px;height:30px;font-size:11px}
.avatar.xs{width:24px;height:24px;font-size:9.5px;background:var(--av-bg);color:var(--av-text)}
.avatar.sys{background:var(--bg-2);color:var(--muted)}.avatar.xs svg{width:13px;height:13px}
.avatar.is-btn{cursor:pointer;border:0;padding:0;font-family:inherit}

/* ---------------- 4. Topbar & globale Suche ---------------- */
.topbar{height:var(--topbar-h);flex:none;display:flex;align-items:center;gap:18px;padding:0 26px;background:rgba(238,242,247,.9);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
[data-theme="dark"] .topbar{background:rgba(10,16,32,.8)}
.topbar .hamburger{display:none}
.crumbs{display:flex;align-items:center;gap:6px;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.02em;white-space:nowrap;min-width:0}
.crumbs .crumb{cursor:pointer}.crumbs .crumb:hover{color:var(--link)}
.crumbs .crumb-cur{color:var(--heading);font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.crumbs .crumb-sep{display:inline-flex;color:var(--text-soft)}.crumbs .crumb-sep svg{width:12px;height:12px}
.gsearch{position:relative;flex:1;max-width:520px;margin:0 auto}
.gsearch-input{display:flex;align-items:center;gap:10px;padding:0 12px;height:36px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--muted);font-size:12.5px}
.gsearch-input svg{width:15px;height:15px;color:var(--text-soft);flex:none}
.gsearch-input input{flex:1;min-width:0;border:0 !important;background:transparent !important;padding:0 !important;box-shadow:none !important;font-size:12.5px;color:var(--text)}
.gsearch-input input:focus{outline:none}
.gsearch-input:focus-within{border-color:var(--brand);box-shadow:var(--focus)}
.gsearch-kbd{font-family:var(--mono);font-size:10.5px;padding:1px 6px;border:1px solid var(--border);border-radius:5px;color:var(--muted);background:var(--bg-2);flex:none}
.gsearch-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-elevated);padding:6px;max-height:min(70vh,520px);overflow:auto;z-index:60}
.gsearch-results.hidden{display:none}
.gsearch-group{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);padding:8px 10px 4px}
.gsearch-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:13px}
.gsearch-item:hover,.gsearch-item.is-active{background:var(--bg-hover)}
.gsearch-item .gs-num{font-family:var(--mono);font-size:11px;color:var(--text-soft);min-width:72px}
.gsearch-item .gs-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.gsearch-item .gs-sub{font-size:11.5px;color:var(--muted);white-space:nowrap}
.gsearch-empty{padding:14px 10px;color:var(--muted);font-size:12.5px;text-align:center}
.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.top-actions .btn{white-space:nowrap}
.icon-btn{position:relative;width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.icon-btn:hover{background:var(--bg-hover);color:var(--heading)}
.icon-btn.ghost{border-color:transparent;background:transparent;width:28px;height:28px}
.icon-btn svg{width:17px;height:17px}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:#E0483A;border:2px solid var(--card)}
.icon-btn .dot.hidden{display:none}
/* Benutzermenü (Topbar-Avatar) - ersetzt die frühere Profilkarte + Icon-Fußzeile der Sidebar
   (Einstellungen, Privater Tresor, Notizen, Erscheinungsbild, Abmelden), siehe updateUserChrome()/
   initShell() in shell.js. */
.user-menu-wrap{position:relative}
.usermenu{position:absolute;top:calc(100% + 10px);right:0;width:272px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-elevated);overflow:hidden;z-index:70}
.usermenu.hidden{display:none}
.um-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-soft)}
.um-name{font-weight:700;color:var(--heading);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-role{color:var(--muted);font-size:11.5px}
.um-sec{padding:6px}
.um-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);color:var(--text);font-weight:500;font-size:13px;cursor:pointer}
.um-item:hover{background:var(--bg-hover)}
.um-item.hidden{display:none}
.um-item svg{width:17px;height:17px;color:var(--muted);flex:none}
.um-item.danger{color:#C0392B}
.um-item.danger svg{color:#C0392B}
[data-theme="dark"] .um-item.danger{color:#E0483A}
[data-theme="dark"] .um-item.danger svg{color:#E0483A}
.um-div{height:1px;background:var(--border-soft);margin:4px 6px}
.um-theme{display:flex;align-items:center;justify-content:space-between;padding:9px 10px}
.um-theme-l{display:flex;align-items:center;gap:10px;font-weight:500;font-size:13px;color:var(--text)}
.um-theme-l svg{width:17px;height:17px;color:var(--muted);flex:none}
.seg2{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);border-radius:999px;padding:2px;gap:2px;cursor:pointer}
.seg2-opt{width:26px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.seg2-opt svg{width:13px;height:13px}
.seg2-opt.on{background:var(--card);color:var(--brand-text);box-shadow:0 1px 2px rgba(11,24,48,.1)}

/* ---------------- 5. Seiteninhalt ---------------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{margin-bottom:2px}.page-head .subtitle,.page-head .sub{margin:0;color:var(--muted)}
.page-head-actions,.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg button{border:0;background:transparent;font:inherit;font-size:12px;font-weight:500;padding:5px 11px;border-radius:calc(var(--r-sm) - 3px);color:var(--muted);cursor:pointer}
.seg button.on,.seg button.active{background:var(--card);color:var(--heading);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg.sm button{padding:4px 9px;font-size:11.5px}
/* KPI-Kacheln */
.kpi-grid,.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.kpi,.stat{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:var(--r);padding:16px 18px 12px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.kpi{cursor:pointer;transition:transform .08s,box-shadow .12s}
.kpi:hover{box-shadow:0 6px 18px rgba(11,24,48,.08);transform:translateY(-1px)}
.kpi.is-bad,.kpi.bad,.stat.is-bad{border-left-color:var(--bad)}.kpi.is-warn,.kpi.warn,.stat.is-warn{border-left-color:var(--warn)}.kpi.is-ok,.kpi.good,.stat.is-ok{border-left-color:var(--ok)}
.kpi-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.kpi-top svg{width:15px;height:15px}
.kpi-label,.stat .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.kpi-val,.stat .num{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--heading);line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-val{margin:6px 0 8px}.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end}.stat .num{margin-top:6px}.stat .label{margin-top:0}
.stat-headline .num{font-size:30px}
.kpi-foot{display:flex;align-items:center;gap:8px;min-height:20px}.kpi-hint{font-size:11px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap}.chip svg{width:12px;height:12px}
.chip.good,.chip.is-ok{background:var(--ok-bg);color:var(--ok)}.chip.bad,.chip.is-bad{background:var(--bad-bg);color:var(--bad)}.chip.warn,.chip.is-warn{background:var(--warn-bg);color:var(--warn)}.chip.is-neutral{background:var(--bg-2);color:var(--muted)}
.spark{position:absolute;right:0;bottom:0;width:120px;height:36px;opacity:.9;pointer-events:none}
.spark-line{fill:none;stroke:var(--brand);stroke-width:1.6;vector-effect:non-scaling-stroke}.spark-area{fill:var(--brand);opacity:.08}
.kpi.is-bad .spark-line{stroke:var(--bad)}.kpi.is-bad .spark-area{fill:var(--bad)}.kpi.is-warn .spark-line{stroke:var(--warn)}.kpi.is-warn .spark-area{fill:var(--warn)}.kpi.is-ok .spark-line{stroke:var(--ok)}.kpi.is-ok .spark-area{fill:var(--ok)}
.finance-kpi-groups{display:grid;grid-template-columns:2fr 1.4fr 1fr;gap:20px;margin-bottom:22px;align-items:start}
.finance-kpi-group-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin-bottom:8px}
.finance-kpi-group .grid-stats{margin-bottom:0}.finance-kpi-group-revenue .grid-stats{grid-template-columns:repeat(2,1fr)}.finance-kpi-group-result .grid-stats{grid-template-columns:1fr}
/* Raster & Karten */
.grid-main{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.col{display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);margin-bottom:16px}
.col .card,.grid-main .card{margin-bottom:0}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.card-head h2{margin:0}
.card-tools{display:flex;align-items:center;gap:14px}
.card > h2:first-child,.card-head h2,.card > .toolbar:first-child > h2{position:relative;padding-left:10px}
.card > h2:first-child::before,.card-head h2::before,.card > .toolbar:first-child > h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;background:var(--brand);border-radius:2px}
.link{color:var(--brand-text);font-weight:600;font-size:12px;display:inline-flex;align-items:center;gap:2px;cursor:pointer;text-decoration:none}.link svg{width:13px;height:13px}
.link:hover{text-decoration:underline}
a.link{font-weight:500;font-size:inherit}
.back-link{color:var(--muted);cursor:pointer;font-size:12.5px;font-weight:500;margin-bottom:14px;display:inline-flex;align-items:center;gap:4px}.back-link:hover{color:var(--link)}
.detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.detail-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;margin-top:6px}.detail-meta b{color:var(--text);font-weight:500}
.meta-row{display:flex;gap:22px;flex-wrap:wrap;margin:10px 0 20px;font-size:13px}
.meta-row div span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);margin-bottom:1px}
.empty-state{text-align:center;color:var(--text-soft);padding:36px 0;font-size:13px}
.info-box{background:var(--info-bg);border:1px solid var(--info-border);border-left:3px solid var(--info-accent);border-radius:var(--r-sm);padding:10px 14px;font-size:12.5px;line-height:1.5;color:var(--info-text)}
.info-box-subtle{background:none;border:0;border-left:2px solid var(--info-border);border-radius:0;padding:2px 0 2px 10px;font-size:11.5px;color:var(--muted)}
.help-hint-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--border-strong);background:transparent;color:var(--muted);font-size:11px;line-height:1;padding:0;cursor:pointer;vertical-align:middle;flex:none}
.help-hint-btn:hover{border-color:var(--link);color:var(--link)}
/* Hinweis als Textlink mit "?"-Kreis (helpHintLink(), Schritt 28) - ersetzt erklärende
   Fließtexte ohne eigene Feldbeschriftung; die Erklärung steht im Hinweis-Modal. */
.hint-help{margin-top:6px}
.hint-link{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;padding:2px 0;font:inherit;font-size:12px;color:var(--muted);cursor:pointer}
.hint-link:hover{color:var(--link)}
.hint-link:hover .help-hint-btn{border-color:var(--link);color:var(--link)}
.hint-link .help-hint-btn{pointer-events:none}
.hint .hint-link{margin-left:6px;vertical-align:1px}
label .help-hint-btn,h2 .help-hint-btn,strong .help-hint-btn{margin:-3px 0 -3px 6px;vertical-align:middle}
.report-item{border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;margin-bottom:10px;background:var(--bg-subtle)}
.report-item .rep-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap;gap:6px}
.dense-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px;background:var(--bg-subtle)}
.settings-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.settings-tile{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;cursor:pointer;transition:.15s;text-align:left;box-shadow:var(--shadow)}
.settings-tile:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(47,111,224,.12);transform:translateY(-1px)}
.settings-tile h3{margin:0 0 6px;font-size:14px;color:var(--heading)}.settings-tile p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
/* Tabellen */
table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 10px 10px;border-bottom:1px solid var(--border);white-space:nowrap;background:transparent}
th.sortable-th{cursor:pointer;user-select:none}th.sortable-th:hover{color:var(--heading)}
td{padding:11px 10px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr.clickable{cursor:pointer}tbody tr.clickable:hover td{background:var(--bg-hover)}
tr.ticket-row-unread td:first-child{font-weight:700}
.tcell{display:flex;flex-direction:column;gap:1px}.tcell .mono{color:var(--muted)}.ttitle{font-weight:500;color:var(--heading)}
.cust{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.prio{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;white-space:nowrap}.prio i{width:7px;height:7px;border-radius:50%;background:var(--muted)}.prio.hoch i{background:var(--bad)}.prio.mittel i{background:var(--warn)}.prio.niedrig i{background:var(--ok)}
.table-foot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;color:var(--muted);font-size:12px}
.pager{display:inline-flex;gap:4px}.pager button{width:28px;height:28px;border:1px solid var(--border);background:var(--card);border-radius:6px;font:inherit;font-size:12px;color:var(--muted);cursor:pointer}.pager button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bad);margin-right:6px;flex-shrink:0}
/* Karten statt Tabelle (mobil, siehe Abschnitt 10) */
.mobile-card-list{display:none}
.mobile-card-row{display:block;padding:12px 2px;border-bottom:1px solid var(--border-soft);cursor:pointer}.mobile-card-row:last-child{border-bottom:0}
.mobile-card-title{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--heading)}
.mobile-card-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.mobile-card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.mobile-card-row-static{cursor:default}.mobile-card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}
.mobile-more-wrap{position:relative;display:inline-block}
.mobile-more-menu{display:none;flex-direction:column;position:absolute;top:calc(100% + 4px);right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-elevated);min-width:180px;padding:4px;z-index:60}
.mobile-more-menu.open{display:flex}
.mobile-more-item{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 12px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer}.mobile-more-item:hover{background:var(--bg-hover)}.mobile-more-item-danger{color:var(--bad)}
/* Badges / Pillen (Klassennamen wie statusBadge() sie erzeugt) */
.badge,.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap;line-height:1.4}
.badge-offen,.pill.offen{background:var(--bad-bg);color:var(--bad)}
.badge-bearbeitung,.pill.bearb{background:var(--brand-bg);color:var(--brand-text)}
.badge-wartend,.pill.wart{background:var(--bg-2);color:var(--muted);border-color:var(--border)}
.badge-geschlossen,.badge-abgeschlossen,.pill.ok{background:var(--ok-bg);color:var(--ok)}
.badge-prio-hoch{background:var(--bad-bg);color:var(--bad)}.badge-prio-mittel{background:var(--warn-bg);color:var(--warn)}.badge-prio-niedrig{background:var(--ok-bg);color:var(--ok)}
.badge-type-order{background:#ECE4FB;color:#5B21B6}.badge-type-standalone{background:var(--brand-bg);color:var(--brand-text)}
.badge-storniert{background:var(--bg-2);color:var(--muted);border-color:var(--border)}
.badge-archived-tag{background:#F3E6C4;color:#7C5A10}
.badge-internal{background:#3D4655;color:#fff}.internal-notes-card{border-color:#3D4655}
[data-theme="dark"] .badge-type-order{background:rgba(124,58,237,.32);color:#D7C2FF}[data-theme="dark"] .badge-archived-tag{background:rgba(224,164,0,.22);color:#F0CF8A}[data-theme="dark"] .badge-internal{background:#5B6474}
.badge-cat-0{background:#DCE8FC;color:#1E4FA8}.badge-cat-1{background:#DDF3E5;color:#186A3B}.badge-cat-2{background:#E9DFFB;color:#5B21B6}.badge-cat-3{background:#FBE3CC;color:#8F3F08}.badge-cat-4{background:#FBDCE8;color:#9C2058}.badge-cat-5{background:#D2F0EC;color:#0B665F}.badge-cat-6{background:#FBEBC4;color:#7C4C05}.badge-cat-7{background:#E0DEFB;color:#352C9E}.badge-cat-8{background:#FBDBD7;color:#952C20}.badge-cat-9{background:#D2ECF5;color:#0A5770}
[data-theme="dark"] .badge-cat-0{background:rgba(29,95,196,.35);color:#A8CAFF}[data-theme="dark"] .badge-cat-1{background:rgba(31,138,76,.35);color:#96EEB8}[data-theme="dark"] .badge-cat-2{background:rgba(124,58,237,.35);color:#D7C2FF}[data-theme="dark"] .badge-cat-3{background:rgba(194,84,10,.35);color:#FFBE8C}[data-theme="dark"] .badge-cat-4{background:rgba(194,42,114,.35);color:#FFB0D6}[data-theme="dark"] .badge-cat-5{background:rgba(15,138,130,.35);color:#8FF0E6}[data-theme="dark"] .badge-cat-6{background:rgba(161,98,7,.35);color:#FFDB96}[data-theme="dark"] .badge-cat-7{background:rgba(67,56,202,.38);color:#C5C0FF}[data-theme="dark"] .badge-cat-8{background:rgba(224,90,74,.3);color:#FFB0A3}[data-theme="dark"] .badge-cat-9{background:rgba(14,116,144,.38);color:#96E6F5}
.status-pill,.status-ctl{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-weight:600;font-size:12.5px;cursor:pointer;white-space:nowrap}
.status-pill i,.status-ctl i{width:8px;height:8px;border-radius:50%;background:var(--brand)}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;padding:8px 13px;border-radius:var(--r-sm);font:inherit;font-weight:600;font-size:12.5px;line-height:1.35;cursor:pointer;background:var(--brand);color:#fff;transition:background .12s,border-color .12s,transform .06s;vertical-align:middle}
.btn:hover{background:var(--brand-dark)}.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn svg{flex:none;width:16px;height:16px}
.btn-primary{background:var(--brand);color:#fff}
a.btn,a.btn:hover{text-decoration:none}
.btn-secondary{background:var(--card);color:var(--heading);border-color:var(--border)}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.btn-small{padding:5px 10px;font-size:12px}
.btn-danger{background:var(--card);color:var(--bad);border-color:var(--danger-border)}.btn-danger:hover{background:var(--bad-bg)}
.btn-muted,.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn-muted:hover,.btn-ghost:hover{background:var(--bg-hover);color:var(--heading)}
.btn-link{background:none;border:0;padding:0;font:inherit;color:var(--link);cursor:pointer}.btn-link:hover{text-decoration:underline}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;background:var(--card);border:1px solid var(--border);color:var(--muted);border-radius:var(--r-sm);cursor:pointer;vertical-align:middle}
.btn-icon:hover{background:var(--bg-hover);color:var(--heading)}.btn-icon.active{color:var(--brand);border-color:var(--brand);background:var(--brand-bg)}
.btn-icon-danger:hover{background:var(--bad-bg);color:var(--bad);border-color:var(--danger-border)}
.btn-icon-group{display:inline-flex;gap:4px;align-items:center}
.btn-remove-row{background:var(--card);border:1px solid var(--border);color:var(--bad);border-radius:var(--r-sm);width:32px;height:32px;cursor:pointer;font-size:16px;line-height:1}.btn-remove-row:hover{background:var(--bad-bg)}
/* Werkzeugleiste / Filter */
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.filters,.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters-toggle-btn{display:none}
/* Variante A "Filterleiste als Streifen" (2026-09): jeder .toolbar, der eine echte Filterzeile
   (.filters mit Selects) enthält - also Tickets, Chats, Serviceberichte, Artikel, Belege/Mahnungen
   und Eingangsrechnungen - bekommt automatisch den hinterlegten Panel-Look. Rein CSS-basiert über
   :has(), damit keine der ~15 view*()-Funktionen einzeln angefasst werden musste. Titel/Zähler +
   primäre Aktionen (Buttons wie "Neues Angebot") liegen bewusst NICHT mehr im .toolbar, sondern in
   einem eigenen .card-head davor (siehe view*()-Funktionen) - der Streifen enthält nur noch Suche,
   Filter-Selects und das Sichtbarkeits-Flag (Archiviert/Papierkorb), damit die beiden Ebenen klar
   getrennt bleiben statt wie zuvor alles in einer unsortierten Zeile mit space-between zu verteilen. */
.toolbar:has(.filters){background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--r-sm);padding:9px 12px;justify-content:flex-start}
.toolbar:has(.filters) .list-search-input{background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366718A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat 11px center;background-size:14px;padding-left:33px;min-width:260px !important}
.toolbar:has(.filters) select{background-color:var(--card)}
.toolbar:has(.filters) > .checkbox-row,.toolbar:has(.filters) > .checkbox-inline,.toolbar:has(.filters) > .toggle-switch-row{margin-left:auto}
/* "Filter zurücksetzen"/"Zurücksetzen"-Buttons innerhalb der Filterzeile wirken als Text-Link statt
   als weiterer gefüllter Button neben den Selects - fällt weniger als eigene Aktion ins Gewicht. */
.toolbar:has(.filters) .filters > button.btn{background:transparent;border-color:transparent;color:var(--brand-text);padding:6px 4px;box-shadow:none}
.toolbar:has(.filters) .filters > button.btn:hover{text-decoration:underline;background:transparent}
/* Moderne Filterauswahl "Variante C" (2026-09-17, siehe enhanceModernSelects() in index.html
   und claude/crm-ui-modernisierung-status.md): ersetzt bei allen Filter-Selects (Kunde, Status,
   Kategorie, Priorität, Typ, Tag, Jahr, Monat) die native Browser-Dropdown-Liste durch dieses
   Panel. Das eigentliche <select> bleibt im DOM (.msel-native, unsichtbar) und ist weiterhin die
   Quelle der Wahrheit für bestehende change-Handler. */
.msel{position:relative;display:inline-flex;max-width:100%}
.msel.disabled{opacity:.6}
.msel-native{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;overflow:hidden;pointer-events:none}
.msel-trigger{display:inline-flex;align-items:center;gap:8px;min-width:150px;max-width:260px;width:auto;padding:8px 11px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--text);font:inherit;font-size:13px;line-height:1.4;cursor:pointer;text-align:left}
.msel-trigger:hover{border-color:var(--border-strong)}
.msel-trigger:focus-visible{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.msel-trigger:disabled{cursor:not-allowed}
.msel.open .msel-trigger{border-color:var(--brand);box-shadow:var(--focus)}
.msel-trigger-v{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel-chev{flex:none;display:inline-flex;color:var(--muted);transform:rotate(90deg);transition:transform .15s}
.msel-chev svg{width:13px;height:13px;display:block}
.msel.open .msel-chev{transform:rotate(-90deg);color:var(--brand)}
.msel-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:100%;width:max-content;max-width:300px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-elevated,0 12px 32px rgba(11,24,48,.18));padding:6px}
.msel-search{display:flex;align-items:center;gap:8px;padding:7px 9px;margin:-6px -6px 6px;border-bottom:1px solid var(--border-soft)}
.msel-search svg{width:14px;height:14px;color:var(--muted);flex:none}
.msel-search input{border:0;outline:0;background:transparent;font:inherit;font-size:13px;width:100%;color:var(--text)}
.msel-search input::placeholder{color:var(--muted)}
.msel-list{max-height:280px;overflow:auto}
.msel-grp-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 9px 4px}
.msel-opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:12.5px;color:var(--text)}
.msel-opt:hover{background:var(--bg-2)}
.msel-opt.sel{background:var(--brand-bg);color:var(--brand-text);font-weight:600}
.msel-opt-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel-av{width:21px;height:21px;border-radius:50%;background:var(--av-bg);color:var(--av-text);font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.msel-opt.sel .msel-av{background:var(--brand);color:#fff}
.msel-ck{width:15px;height:15px;flex:none;color:var(--brand)}
.msel-ck svg{width:15px;height:15px;display:block}
.msel-opt:not(.sel) .msel-ck{visibility:hidden}
.msel-empty{padding:16px 10px;text-align:center;color:var(--muted);font-size:12px}
/* Seit Schritt 28 (2026-09-21) sind ALLE Auswahlfelder modern (siehe mselEligible()). Damit die
   Ersatz-Auswahl dort, wo das native Feld volle Breite hatte, ebenfalls volle Breite bekommt,
   werden die Layout-Regeln der nativen Selects hier für .msel gespiegelt. */
.msel-opt.is-disabled{opacity:.45;cursor:not-allowed}
.msel-opt.is-disabled:hover{background:transparent}
.form-grid .msel,.item-row .msel,.doc-action-group .msel,.modal-box .form-grid .msel{display:flex;width:100%}
.form-grid .msel-trigger,.item-row .msel-trigger,.doc-action-group .msel-trigger,.modal-box .form-grid .msel-trigger{width:100%;max-width:none;min-width:0}
.form-grid .msel-panel,.item-row .msel-panel,.modal-box .form-grid .msel-panel{width:100%;max-width:none;min-width:220px}
.item-row .msel-trigger{padding:6px 8px;font-size:12.5px;gap:4px}
.item-row .msel-chev svg{width:11px;height:11px}
/* Layout vom nativen Feld übernommen (siehe buildModernSelect(): Flex-Anteile bzw. volle Breite) */
.msel.msel-block{display:flex;width:100%}
.msel.msel-block .msel-trigger,.msel.msel-flex .msel-trigger{width:100%;max-width:none;min-width:0}
.msel.msel-flex{display:flex}
.dyn-row .msel{flex:1;min-width:130px;display:flex}
.dyn-row .msel-trigger{width:100%;max-width:none;min-width:0}
.doc-status-row .msel{flex:1;display:flex}
.doc-status-row .msel-trigger{width:100%;max-width:none;min-width:0}
/* Statusumschalter im Kopf von Ticket/Auftrag/Beleg: randlos in der Pille wie vorher das native Feld */
.status-ctl-wrap .msel-trigger,.detail-head .actions .doc-status-row .msel-trigger{border:0;background:transparent;box-shadow:none;padding:4px 6px 4px 4px;font-weight:600;font-size:12.5px;min-width:0}
.detail-head .actions .doc-status-row .msel{flex:none}
.status-ctl-wrap .msel.open .msel-trigger,.detail-head .actions .doc-status-row .msel.open .msel-trigger{box-shadow:none}
.ticket-detail-actions .doc-status-row .msel{flex:none;width:170px}
/* Zeiterfassung: Filterchips */
.msel-trigger.fchip-select{padding:6px 10px;font-size:12px;font-weight:500;min-width:0;max-width:200px}
@media screen and (max-width:860px){
  .time-toolbar .msel{flex:1 1 45%}
  .time-toolbar .msel-trigger.fchip-select{max-width:none;width:100%}
  .detail-head .actions .status-ctl-wrap .msel,.detail-head .actions .doc-status-row .msel{flex:1}
}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);font-size:12px;font-weight:500;color:var(--text);cursor:pointer}
.fchip.on,.fchip.active{border-color:var(--brand);background:var(--brand-bg);color:var(--brand-text)}
.bulk{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--brand-bg);border:1px solid var(--brand-line);border-radius:var(--r-sm);font-size:12.5px;color:var(--brand-text);margin-bottom:12px}
.bulk .btn{padding:5px 10px;font-size:12px;background:var(--card);color:var(--brand-text);border-color:var(--brand-line)}
/* Formulare */
select,input[type=text],input[type=date],input[type=number],input[type=password],input[type=tel],input[type=email],input[type=time],input[type=url],input[type=search],textarea{padding:8px 11px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:13px;font-family:inherit;background:var(--card);color:var(--text);line-height:1.4;transition:border-color .15s,box-shadow .15s}
select:hover,input:hover,textarea:hover{border-color:var(--border-strong)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
select{padding-right:30px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B93A1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 10px center}
input::placeholder,textarea::placeholder{color:var(--text-soft)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:15px;height:15px;margin:0}
textarea{width:100%;resize:vertical;min-height:80px;line-height:1.5}
label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:6px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-grid .full{grid-column:1/-1}
.form-grid select,.form-grid input[type=text],.form-grid input[type=date],.form-grid input[type=number],.form-grid input[type=password],.form-grid input[type=email],.form-grid input[type=tel]{width:100%}
.form-actions{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.checkbox-row,.checkbox-inline{font-size:13px;display:flex;align-items:center;gap:8px}.checkbox-row input,.checkbox-inline input{width:auto}
.toggle-switch-row{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text)}
.toggle-switch,.switch{position:relative;display:inline-block;width:38px;height:20px;flex-shrink:0}
.toggle-switch input,.switch input{opacity:0;width:0;height:0;position:absolute}
.toggle-switch-slider,.switch-slider{position:absolute;inset:0;background:var(--border-strong);border-radius:20px;cursor:pointer;transition:.2s}
.switch-slider{background:rgba(255,255,255,.2)}
.toggle-switch-slider:before,.switch-slider:before{content:"";position:absolute;height:14px;width:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(11,24,48,.3)}
.toggle-switch input:checked + .toggle-switch-slider,.switch input:checked + .switch-slider{background:var(--brand)}
.toggle-switch input:checked + .toggle-switch-slider:before,.switch input:checked + .switch-slider:before{transform:translateX(18px)}
.toggle-switch input:focus-visible + .toggle-switch-slider{box-shadow:var(--focus)}
.theme-toggle{padding:16px 20px 4px;display:flex;align-items:center;gap:10px;font-size:12px;color:#9FB0C9;border-top:1px solid var(--side-border)}
/* Positions-/Wiederholzeilen (Belegformulare, Verträge) */
.item-row-wrap{margin-bottom:8px}
.item-row{display:grid;grid-template-columns:minmax(170px,3fr) minmax(56px,.7fr) minmax(90px,.9fr) minmax(90px,1fr) minmax(64px,.7fr) minmax(64px,.7fr) auto;gap:8px;margin-bottom:4px;align-items:center}
.item-row.item-row-with-flag{grid-template-columns:60px minmax(170px,3fr) minmax(56px,.7fr) minmax(90px,.9fr) minmax(90px,1fr) minmax(64px,.7fr) minmax(64px,.7fr) auto auto}
.item-row.item-row-with-extra{grid-template-columns:minmax(170px,3fr) minmax(56px,.7fr) minmax(90px,.9fr) minmax(90px,1fr) minmax(64px,.7fr) minmax(64px,.7fr) auto auto}
.item-flag-select{font-size:12px}.item-row input,.item-row select{width:100%}
.installment-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(140px,1fr) auto;gap:8px;margin-bottom:6px;align-items:center}.installment-row input{width:100%}
.payment-milestone-row{display:grid;grid-template-columns:minmax(140px,1fr) 90px auto;gap:8px;margin-bottom:6px;align-items:center}.payment-milestone-row input{width:100%}
@media (max-width:640px){.installment-row,.payment-milestone-row{grid-template-columns:1fr}.installment-row .btn-remove-row,.payment-milestone-row .btn-remove-row{justify-self:end}}
.installment-plan-row{padding:6px 0;border-bottom:1px solid var(--border-soft)}.installment-plan-row:last-child{border-bottom:0}
.installment-plan-row-main{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}.installment-plan-row.is-paid .installment-plan-row-main{color:var(--muted)}.installment-plan-row .btn{margin-top:4px}
.item-details-input{width:100%;min-height:44px;font-size:12px;resize:vertical}.item-infotext-input{width:100%;min-height:44px;font-size:12px;resize:vertical;font-style:italic;margin-top:4px}.item-extra-btn svg{display:block}
.appt-recur-fields{display:contents}
.pos-detail-list{margin:4px 0 0;padding-left:16px;font-size:11px;color:var(--muted)}.pos-detail-list li{margin-bottom:2px}.pos-info-text{margin:6px 0 0;font-size:11px;font-style:italic;color:var(--muted)}
.dyn-row{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}.dyn-row input,.dyn-row select{flex:1;min-width:130px}
.totals-box{margin-top:16px;max-width:260px;margin-left:auto;font-size:12px;color:#4B5563}.totals-box div{display:flex;justify-content:space-between;padding:4px 0}
.totals-box .grand{font-weight:700;color:#1F2430;border-top:none;margin-top:8px;padding:8px 10px;background:#EEF3FA;border-radius:6px}.totals-box .note{font-size:11px;font-style:italic;color:#666}.legal-note{font-size:11px;color:#666;margin-top:16px}
/* Tabs */
/* Reiter: segmentierte Leiste (Variante A) – aktiver Reiter als weiße Karte in grauer Schiene */
.tabs-wrap{margin-bottom:16px;max-width:100%;min-width:0}
.tabs,.subtabs{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--bg-2);border:1px solid var(--border);border-radius:9px;padding:3px;margin-bottom:16px;max-width:100%;box-sizing:border-box;vertical-align:top}
.tabs-wrap .tabs,.tabs-wrap .subtabs{margin-bottom:0}
.tab-item,.subtab-item{padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--muted);border-radius:6px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:color .12s,background .12s;white-space:nowrap}
.tab-item:hover,.subtab-item:hover{color:var(--heading);background:rgba(255,255,255,.55)}
.tab-item.active,.subtab-item.active{color:var(--heading);background:var(--card);box-shadow:0 1px 2px rgba(11,24,48,.10),0 0 0 1px var(--border)}
[data-theme="dark"] .tab-item:hover,[data-theme="dark"] .subtab-item:hover{background:rgba(255,255,255,.06)}
.tab-count-alert{background:var(--brand);color:#fff}
.tab-item.active .tab-count-alert{background:var(--brand);color:#fff}
.tabs-select{display:none}
.tab-count,.cnt{font-family:var(--mono);font-size:10.5px;padding:1px 6px;border-radius:999px;background:var(--bg-2);color:var(--muted)}
.tab-item.active .tab-count,.tab-item.active .cnt{background:var(--brand-bg);color:var(--brand-text)}
.contract-subtab-panel{display:none}.contract-subtab-panel.active{display:block}
/* Modale */
.modal-overlay{position:fixed;inset:0;background:rgba(11,24,48,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto;z-index:500}
.modal-overlay.hidden{display:none}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 24px;max-width:720px;width:100%;box-shadow:var(--shadow-elevated);max-height:calc(100vh - 80px);overflow:auto}
.modal-box.modal-box-wide{max-width:980px}
.modal-overlay.nested-overlay{z-index:600}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:12px}
.modal-head h2{margin:0;font-size:16px}
.modal-close{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:2px 7px;border-radius:var(--r-sm)}.modal-close:hover{background:var(--bg-hover);color:var(--text)}
/* Toast */
.toast{position:fixed;bottom:22px;right:22px;background:var(--navy);color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;border-left:3px solid var(--brand);box-shadow:0 12px 32px rgba(11,24,48,.28);opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;z-index:999;max-width:min(420px,calc(100vw - 44px))}
.toast.show{opacity:1;transform:translateY(0)}
/* Beleg-Detail (viewDocDetail) – Layout-Regeln, Farben über Tokens */
.doc-hints{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.doc-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.doc-main-panel{display:flex;border:1px solid var(--border);border-radius:var(--r);margin-bottom:22px;overflow:hidden}
.doc-main-preview{flex:0 0 260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:24px 20px;border-right:1px solid var(--border);background:var(--bg-subtle)}
.doc-main-preview-icon{color:var(--muted);margin-bottom:4px}.doc-main-preview-icon svg{width:34px;height:34px}.doc-main-preview-title{font-weight:700}.doc-main-preview-hint{font-size:12px;color:var(--muted);margin-bottom:10px}.doc-main-preview .btn-secondary{width:100%;justify-content:center}
.doc-main-status{flex:1;min-width:0;padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.doc-main-status-label,.doc-secondary-actions-label,.doc-action-group-label,.doc-danger-zone-label{font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);margin-bottom:8px}
.doc-main-status-block + .doc-main-status-block{border-top:1px solid var(--border);padding-top:16px}
.doc-secondary-actions{margin-bottom:22px}.doc-secondary-actions-label{margin-bottom:12px}
.doc-secondary-groups{display:flex;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--r)}
.doc-secondary-groups .doc-action-group{flex:1 1 180px;min-width:180px;padding:16px 20px}.doc-secondary-groups .doc-action-group + .doc-action-group{border-left:1px solid var(--border)}
.doc-danger-zone{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px;padding:14px 18px;border:1px solid var(--danger-border);border-radius:var(--r);background:var(--bad-bg)}
.doc-danger-zone-label{color:var(--bad);margin:0 auto 0 0}
.doc-action-group{display:flex;flex-direction:column;gap:8px}.doc-action-group-label{margin:0}
.doc-action-group .btn,.doc-action-group .btn-secondary,.doc-action-group .btn-muted{justify-content:flex-start;width:100%;gap:9px}.doc-action-group select{width:100%}
.doc-status-row{display:flex;gap:6px;align-items:center}.doc-status-row select{flex:1;width:auto}
.finance-period-select{width:auto;padding:5px 30px 5px 10px;font-size:12px}
.ticket-detail-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.ticket-detail-actions .doc-status-row{width:auto;padding-right:14px;border-right:1px solid var(--border)}.ticket-detail-actions .doc-status-row select{width:170px;flex:none}
.ticket-detail-actions .btn-danger{margin-left:auto;border-left:1px solid var(--border);padding-left:14px}
.doc-a4-wrap{width:100%;position:relative;border-radius:6px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.doc-a4-page{width:794px;min-height:1123px;padding:34px;position:absolute;top:0;left:0;transform-origin:top left;background:#fff;display:flex;flex-direction:column}
.doc-a4-page > .doc-footer-fixed{margin-top:auto}
.doc-a4-page-break{position:absolute;left:0;width:100%;height:18px;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.12),transparent 70%)}
.doc-a4-page-break-label{position:absolute;right:10px;top:1px;font-size:10px;color:var(--muted);background:var(--card);padding:1px 6px;border-radius:4px;border:1px solid var(--border)}
.modal-box-wide .doc-a4-wrap{margin:0 auto}
@media screen and (max-width:860px){.doc-main-panel{flex-direction:column}.doc-main-preview{flex:none;border-right:0;border-bottom:1px solid var(--border)}.doc-secondary-groups{flex-direction:column}.doc-secondary-groups .doc-action-group + .doc-action-group{border-left:0;border-top:1px solid var(--border)}}

/* ---------------- 6. Dashboard-Bausteine (siehe viewDashboard()) ---------------- */
.dashboard-quick-actions-row{display:flex;gap:10px;flex-wrap:wrap}
.dashboard-alert-card{border-left:4px solid var(--bad)}.dashboard-alert-card-review{border-left:4px solid var(--warn)}
.agenda{display:flex;flex-direction:column}
.ag{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border-soft);cursor:pointer}.ag:last-child{border-bottom:0}
.ag-time{font-family:var(--mono);font-size:11.5px;color:var(--muted);width:40px;padding-top:2px;flex:none}
.ag-bar{width:3px;border-radius:3px;align-self:stretch;background:var(--brand);flex:none}.ag-bar.sky{background:var(--sky)}.ag-bar.warn{background:var(--warn)}
.ag-title{font-weight:500;color:var(--heading)}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-soft);cursor:pointer}.li:last-child{border-bottom:0}
.li-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted)}.li-dot.bad{background:var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}.li-dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}.li-dot.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.li-t{flex:1;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.li-r{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}.legend .a{background:var(--brand)}.legend .b{background:var(--sky)}
.bars{width:100%;height:170px;display:block}.bars rect{stroke:none}.bar-a{fill:var(--brand)}.bar-b{fill:var(--sky)}.bars .grid{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4}.bar-lbl{font-size:10px;fill:var(--muted);font-family:var(--mono)}
.feed{display:flex;flex-direction:column}
.fi{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft);align-items:flex-start;cursor:pointer}.fi:last-child{border-bottom:0}
.fi .muted{display:block}

/* ---------------- 7. Kalender, Chat, E-Mail-Verlauf, Editor ---------------- */
  /* ---------------- Kalender ---------------- */
  .cal-nav{display:flex;align-items:center;gap:10px;}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
  .cal-grid.cal-grid-5{grid-template-columns:repeat(5,1fr);}
  .cal-grid-head{margin-bottom:6px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;text-align:center;}
  .cal-cell{border:1px solid var(--border);border-radius:6px;min-height:150px;padding:6px;cursor:pointer;background:var(--bg);display:flex;flex-direction:column;gap:4px;min-width:0;width:100%;overflow:hidden;}
  .cal-cell:hover{border-color:var(--teal);}
  .cal-cell-empty{border:none;background:transparent;cursor:default;}
  .cal-cell-empty:hover{border-color:transparent;}
  .cal-cell-today{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);}
  .cal-daynum{font-size:12px;font-weight:600;color:var(--text-muted);}
  .cal-cell-today .cal-daynum{color:var(--teal);}
  .cal-appts{display:flex;flex-direction:column;gap:3px;overflow-y:auto;overflow-x:hidden;max-height:128px;min-width:0;}
  .cal-appt{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:2px 5px;font-size:11px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;display:flex;align-items:center;}
  .cal-appt:hover{border-color:var(--teal);}
  .cal-appt-time{font-weight:600;color:var(--teal);margin-right:4px;flex-shrink:0;}
  .cal-appt-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cal-appt-repeat{flex-shrink:0;margin-right:3px;display:inline-flex;color:var(--text-muted);}
  .cal-cat-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;flex-shrink:0;}
  .cal-invite-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:4px;flex-shrink:0;}
  .cal-invite-offen{background:var(--warn,#b9770e);}
  .cal-invite-angenommen{background:var(--ok,#1e8449);}
  .cal-invite-abgelehnt{background:var(--danger,#c0392b);}
  [data-theme="dark"] .cal-cell{background:#101a28;}

  .chat-thread{display:flex;flex-direction:column;gap:10px;}
  .chat-bubble{max-width:75%;padding:10px 14px;border-radius:14px;line-height:1.4;box-shadow:0 1px 2px rgba(14,38,71,.07);}
  .chat-bubble-customer{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:3px;}
  .chat-bubble-staff{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:3px;}
  .chat-bubble-meta{font-size:11px;opacity:.75;margin-bottom:3px;}

  /* ---------------- E-Mail-Verlauf-Modal (siehe modalContentHtml(), case 'ticketEmailThread') ----------------
     Kopf (Ticket-Titel) und Fuß ("E-Mail verfassen") bleiben fixiert, nur der Chat-Bereich
     dazwischen scrollt - unabhängig von der Länge des Verlaufs. Nur für dieses Modal aktiv
     (siehe render(), modalBox.classList.toggle('modal-box-chat', ...)), damit alle anderen
     Modale unverändert bleiben. */
  @keyframes chatBubbleIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .modal-box.modal-box-chat{display:flex;flex-direction:column;overflow:hidden;padding:0;}
  .modal-box.modal-box-chat .modal-head{flex:0 0 auto;margin:0;padding:20px 26px 16px;border-bottom:1px solid var(--border);border-radius:16px 16px 0 0;background:linear-gradient(135deg,rgba(24,87,209,.10),rgba(24,87,209,0) 65%);}
  .email-thread-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px 26px;background:radial-gradient(circle at 15% 0%,rgba(24,87,209,.05),transparent 42%),radial-gradient(circle at 85% 100%,rgba(24,87,209,.05),transparent 42%);}
  .email-thread-footer{flex:0 0 auto;padding:14px 26px 20px;border-top:1px solid var(--border);background:var(--card);border-radius:0 0 16px 16px;}
  .chat-day-divider{display:flex;justify-content:center;margin:4px 0 14px;}
  .chat-day-divider:first-child{margin-top:0;}
  .chat-day-divider span{background:var(--bg);color:var(--text-muted);font-size:11px;font-weight:600;padding:4px 13px;border-radius:20px;border:1px solid var(--border);}
  .chat-msg-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:10px;animation:chatBubbleIn .25s ease both;}
  .chat-msg-row-out{flex-direction:row-reverse;}
  .chat-avatar{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;letter-spacing:.02em;}
  .chat-avatar-staff{background:var(--teal);}
  .chat-avatar-customer{background:var(--navy-light);}
  .chat-msg-row .chat-bubble{max-width:calc(100% - 60px);}
  /* Sichtbare Anhang-Liste im "E-Mail vorbereiten"-Compose-Fenster (siehe case 'docComposeEmail'
     in modalContentHtml(), composeAttachListHtml) - zeigt die automatisch mitgeschickten Dateien
     (Beleg-PDF, ZUGFeRD-XML, Serviceberichte) als kompakte Zeilen statt nur im Fließtext-Hinweis. */
  /* Kompakte Anhang-Zusammenfassungszeile im "E-Mail vorbereiten"-Fenster (siehe case
     'docComposeEmail'/attachSummaryText()) - ersetzt die früher dauerhaft sichtbare Anhang-Liste,
     die Detailansicht mit Abwahl-Möglichkeit liegt jetzt im "Anhänge verwalten"-Popup (siehe
     .attach-manage-* unten). */
  .email-attach-summary-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);}
  .email-attach-summary-text{font-size:13px;color:var(--text);}
  /* Checkbox-Liste im "Anhänge verwalten"-Popup (openAttachManageOverlay()) - is-fixed markiert
     die nicht abwählbare Haupt-Beleg-Zeile (Beleg-PDF), deutlich gedämpfter dargestellt, damit
     klar ist, dass sie nicht interaktiv ist. */
  .attach-manage-list{display:flex;flex-direction:column;gap:4px;}
  .attach-manage-item{display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-radius:8px;font-size:13px;color:var(--text);cursor:pointer;}
  .attach-manage-item:hover{background:var(--bg-hover, var(--bg));}
  .attach-manage-item.is-fixed{cursor:default;opacity:.65;}
  .attach-manage-item input[type="checkbox"]{margin-top:3px;flex:0 0 auto;}
  .attach-manage-icon{flex:0 0 auto;color:var(--text-muted);margin-top:1px;}
  .attach-manage-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .attach-manage-name{font-weight:600;word-break:break-all;}
  .attach-manage-hint{color:var(--text-muted);font-size:12px;}
  /* ---------------- E-Mail-Compose (Quill, siehe emailCompose-Modal) ---------------- */
  /* Quill liefert nur die reine Editor-Optik (Snow-Theme, per CDN) - hier nur so viel Anpassung,
     dass Toolbar/Editor sich wie die übrigen Formularfelder ins Layout einfügen (abgerundete
     Ecken oben/unten, feste Mindesthöhe, immer heller Editor-Hintergrund unabhängig vom
     Dark-Mode der App, da Quill selbst kein Dark-Theme mitbringt). Gilt gleichermaßen für den
     Notiz-Editor im "Notizen"-Modal (#ticketNoteToolbar/#ticketNoteEditor, siehe case
     'ticketNotes') sowie den Dokumentations-Editor (#docArticleToolbar/#docArticleEditor, siehe
     viewDocumentationDetail()) - identischer Aufbau, daher dieselben Selektoren mit Komma
     erweitert statt dupliziert. */
  #emailComposeToolbar.ql-toolbar,#docEmailComposeToolbar.ql-toolbar,#ticketNoteToolbar.ql-toolbar,#docArticleToolbar.ql-toolbar,#emailSignatureToolbar.ql-toolbar{border:1px solid var(--border);border-radius:6px 6px 0 0;background:#fff;}
  /* Quills Snow-Theme setzt .ql-container standardmäßig auf height:100% - ohne eine explizite
     Höhe hier bläht sich der Editor dadurch auf die gesamte verfügbare Höhe des umgebenden
     Elements auf (bzw. kollabiert je nach Kontext auf 0 Höhe) und überlagert dabei andere Elemente
     wie den Absende-/Speichern-Button, statt normal im Formularfluss zu stehen. Deshalb feste
     Höhe + eigenes Scrollen im Editor statt im ganzen Formular/Modal. */
  #emailComposeEditor.ql-container,#docEmailComposeEditor.ql-container,#ticketNoteEditor.ql-container,#docArticleEditor.ql-container,#emailSignatureEditor.ql-container{border:1px solid var(--border);border-top:none;border-radius:0 0 6px 6px;background:#fff;color:#111;height:280px;}
  #ticketNoteEditor.ql-container{height:160px;}
  #docArticleEditor.ql-container{height:400px;}
  /* Dateianhänge im E-Mail-Compose-Dialog (2026-09-19, siehe emailComposeAttachments in
     index.html): Liste der gewählten Dateien, Schnellauswahl bereits am Ticket hinterlegter
     Dateien und die Auswahl-Schaltfläche mit Größen-Hinweis. */
  .compose-att{display:flex;flex-direction:column;gap:8px}
  .compose-att-list{display:flex;flex-direction:column;gap:6px}
  .compose-att-list:empty{display:none}
  .compose-att-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-subtle);font-size:12.5px}
  .compose-att-item .ic{display:inline-flex;color:var(--muted);flex:none}
  .compose-att-item .ic svg{width:14px;height:14px}
  .compose-att-item .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--heading);font-weight:500}
  .compose-att-item .s{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none}
  .compose-att-item .x{border:0;background:transparent;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:0 2px;flex:none}
  .compose-att-item .x:hover{color:var(--bad)}
  .compose-att-ticket{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .compose-att-ticket-lbl{font-size:11.5px;color:var(--muted)}
  .compose-att-chip{display:inline-flex;align-items:center;gap:5px;max-width:230px;border:1px solid var(--border);border-radius:999px;background:var(--card);padding:4px 10px;font:inherit;font-size:11.5px;color:var(--text);cursor:pointer}
  .compose-att-chip svg{width:12px;height:12px;color:var(--muted);flex:none}
  .compose-att-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .compose-att-chip:hover{border-color:var(--brand);color:var(--brand-text)}
  .compose-att-chip.added{border-color:var(--ok);color:var(--ok);background:var(--ok-bg);cursor:default}
  .compose-att-chip.added svg{color:var(--ok)}
  .compose-att-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .compose-att-actions .hint{margin:0}
  /* Anhangs-Zeile im gespeicherten Ticketverlauf (siehe attNote im Compose-Handler) */
  .email-att-note{margin-top:10px;padding-top:8px;border-top:1px solid var(--border-soft);font-size:11.5px;color:var(--muted)}
  #emailSignatureEditor.ql-container{height:140px;}
  #emailComposeEditor .ql-editor,#docEmailComposeEditor .ql-editor,#ticketNoteEditor .ql-editor,#docArticleEditor .ql-editor,#emailSignatureEditor .ql-editor{font-size:14px;height:100%;overflow-y:auto;}
  .ticket-email-body img{max-width:100%;}
  /* Einheitliche Schriftgröße/Zeilenabstand für gerenderten Quill-HTML-Inhalt (Notizen, E-Mail-
     Verlauf, Dokumentation usw.) - Quill selbst schreibt bei eingefügtem/eingetipptem Text keine
     eigene Schriftgröße, ABER bei per Copy&Paste eingefügtem Text (z. B. aus Notepad/Word/E-Mails)
     übernimmt der Browser mitunter inline Schriftgrößen aus der Zwischenablage, die dann größer
     wirken als der Rest der Oberfläche (13px, siehe .card p) - daher hier bewusst mit !important
     erzwungen. Zusätzlich bekommen <p>/<h1-3> deutlich kompaktere Abstände als der
     Browser-Standard (~1em), da Quill jede Zeile in ein eigenes <p> packt und der
     Browser-Default sonst zu den in Screenshots bemängelten, unnatürlich großen Lücken
     zwischen den Zeilen führt.
     Wichtig: diese Regel gilt nur für ANGEZEIGTEN (bereits gespeicherten) Inhalt, NICHT für den
     Quill-EDITOR selbst (#docArticleEditor .ql-editor etc. haben eigene, unabhängige Regeln
     oben) - Tippen/Formatieren bleibt dort unverändert. */
  .ticket-email-body{font-size:13px!important;line-height:1.55!important;}
  .ticket-email-body p,.ticket-email-body ol,.ticket-email-body ul{margin:0 0 8px;font-size:13px!important;line-height:1.55!important;}
  .ticket-email-body p:last-child,.ticket-email-body ol:last-child,.ticket-email-body ul:last-child{margin-bottom:0;}
  .ticket-email-body p:empty{margin-bottom:4px;}
  .ticket-email-body h1,.ticket-email-body h2,.ticket-email-body h3{font-size:14px!important;line-height:1.4!important;margin:14px 0 6px;}
  .ticket-email-body h1:first-child,.ticket-email-body h2:first-child,.ticket-email-body h3:first-child{margin-top:0;}
  /* Gerenderte Notiz-Inhalte (Quill-HTML, siehe ticketNoteForm-Handler) innerhalb der Notiz-Liste
     im "Notizen"-Modal - selbe Klasse wie im E-Mail-Verlauf, damit z. B. Bilder/Listen dort
     genauso sauber dargestellt werden wie in E-Mails. */
  .report-item .ticket-email-body{margin-top:2px;}
  /* E-Mail-Verlauf-Modal (siehe modalContentHtml(), case 'ticketEmailThread'): der HTML-Inhalt
     ausgehender E-Mails (Quill-Editor-Ausgabe) landet in der teal-farbigen chat-bubble-staff -
     erzwingt weiße Schrift/Trennlinien, damit z. B. per Copy&Paste eingefügter dunkler Text dort
     nicht unlesbar wird. */
  .chat-bubble-staff .ticket-email-body,.chat-bubble-staff .ticket-email-body *{color:#fff!important;}
  .chat-bubble-staff .ticket-email-body a{text-decoration:underline;}
  .chat-bubble-staff .ticket-email-body hr{border-color:rgba(255,255,255,.4);}


/* ---------------- 8. Belege, Druck, Servicebericht – unverändert, an PDF-Spezifikationen gebunden ---------------- */
  /* Print report */
  #printArea{display:none;}
  /* WICHTIG (bitte bei künftigen Änderungen nicht mehr anfassen - siehe Entscheidung unten):
     #printArea darf im Druck NIEMALS position:absolute (oder fixed) sein, sonst paginiert der
     Browser den Inhalt nicht sauber über mehrere Seiten. Deshalb wird der Rest der App per
     display:none komplett aus dem Fluss entfernt (statt nur visibility:hidden), und #printArea
     bleibt ein normaler, statisch fließender Block.
     ENTSCHEIDUNG zur Fußzeile: Eine per position:fixed auf JEDER Druckseite wiederholte Fußzeile
     wurde mehrfach versucht, hat aber auch in Chrome/Edge zu Überlappungen mit dem Inhalt geführt
     (offenbar keine zuverlässige Kombination mit window.print()/@page in dieser Umgebung). Auf
     Wunsch daher bewusst zurückgebaut: Die Fußzeile (.doc-footer-fixed) fließt normal nach dem
     Inhalt (siehe Basis-Regel weiter unten, KEIN @media print-Override mehr) - dadurch garantiert
     nie eine Überlappung und nie eine künstliche Zusatzseite, in jedem Browser. Bei mehrseitigen
     Belegen erscheint sie dafür nur auf der letzten Seite, nicht auf jeder. */
  @page{ size:A4; margin:15mm; }
  @media print{
    body > *:not(#printArea){display:none !important;}
    #printArea{display:block;width:100%;padding:30px;}
  }
  /* Interaktive Druckvorschau (nur Bildschirm, siehe openPrintPreview()) - die eigentlichen
     Druck-Regeln oben bleiben unverändert, damit der tatsächliche PDF-Druck exakt wie bisher
     aussieht. */
  @media screen{
    /* Grauer Hintergrund hinter der eigentlichen "Seite" (siehe .pp-page unten) - dadurch wirkt
       die Vorschau wie ein PDF-Viewer statt wie eine beliebig breite, über den ganzen Bildschirm
       gezogene HTML-Seite. */
    #printArea.preview-mode{display:block;position:fixed;inset:0;background:#e7eaee;z-index:9999;overflow:auto;padding:0;}
    body.print-preview-open{overflow:hidden;}
  }
  .print-preview-toolbar{position:sticky;top:0;background:#fff;padding:14px 30px;border-bottom:1px solid #ddd;display:flex;gap:10px;align-items:center;z-index:2;}
  .print-preview-hint{font-size:12px;color:var(--text-muted);margin-left:auto;}
  /* Die eigentliche Bericht-"Seite": zentriert, auf DIN-A4-Breite (794px bei 96dpi) begrenzt,
     mit fester Mindesthöhe einer A4-Seite (1123px) - dadurch sieht die interaktive Vorschau wie
     eine echte gedruckte Seite aus statt über die volle Bildschirmbreite gezogen zu sein. Wächst
     bei längerem Inhalt (z.B. Sammelbericht mit vielen Einzelberichten) einfach über 1123px
     hinaus - hier unproblematisch, da diese Ansicht ohnehin nur zum Bearbeiten/Kontrollieren am
     Bildschirm dient, nicht der tatsächliche Druck/PDF (siehe generateReportPdf() dafür).
     display:flex + .doc-footer-fixed{margin-top:auto} schiebt die Fußzeile an den unteren Rand
     der Seite (statt wie vorher per position:fixed am Bildschirmrand). */
  .pp-page-wrap{display:flex;justify-content:center;padding:24px 20px 60px;}
  .pp-page{width:100%;max-width:794px;min-height:1123px;background:#fff;padding:34px;box-shadow:0 2px 10px rgba(0,0,0,.16);display:flex;flex-direction:column;}
  .pp-page .doc-footer-fixed{margin-top:auto;}
  [contenteditable="true"]{outline:1px dashed var(--teal);outline-offset:2px;background:rgba(21,166,157,0.05);border-radius:3px;}
  @media print{.print-preview-toolbar{display:none !important;}[contenteditable]{outline:none !important;background:none !important;}}
  /* Angeglichen an die jsPDF-Tabellenoptik (generateReportPdf()/generateTicketReportsPdf()):
     helle graue Label-Spalte, dünne Linien, kompaktes Padding - statt der generischen, groß
     geschriebenen App-Tabellenstile (siehe "th{...}" weiter oben). Bewusst per Selektor
     überschrieben statt die generische th-Regel zu ändern, da diese app-weit für andere
     Tabellen/Listen verwendet wird. */
  .pr-table{width:100%;border-collapse:collapse;margin-top:10px;}
  .pr-table th,.pr-table td{border:1px solid #d6d6d6;padding:6px 8px;font-size:13px;text-align:left;}
  .pr-table th{width:30%;background:#f6f6f6;color:#111;font-weight:700;text-transform:none;letter-spacing:normal;}
  .pr-table td{background:#fff;color:#111;font-weight:400;}
  /* Positionstabelle (Angebot/AB/Lieferschein/Rechnung) - bewusst nur die Kopfzeile
     (Pos./Beschreibung/Menge/...) mit Linien abgegrenzt, die einzelnen Positionen darunter
     kommen ohne Tabellenrahmen aus (siehe Kundenwunsch: "keine vollständige Tabelle"). */
  .pos-table{width:100%;border-collapse:collapse;margin-top:24px;font-size:12px;color:#1F2430;}
  /* Beleg-Design "klassisch-modern" (siehe claude/beleg-design-spec.md Abschnitt 5): heller
     Streifen statt dunkler Linie als Tabellenkopf, Zeilen durch dezente Hairlines statt
     Tabellenrahmen getrennt - AUSSCHLIESSLICH hier (.pos-table wird ausschließlich von
     positionsTableHtml() für die 4 Belegtypen verwendet, siehe docPrintableBodyHtml()). */
  .pos-table thead th{text-align:left;padding:7px 6px;font-size:10px;font-weight:700;color:#8B93A1;text-transform:uppercase;letter-spacing:.04em;background:#F3F6FA;border:none;}
  .pos-table thead th:first-child{border-radius:5px 0 0 5px;}
  .pos-table thead th:last-child{border-radius:0 5px 5px 0;}
  .pos-table tbody td{padding:8px 6px;vertical-align:top;border:none;border-bottom:1px solid #E5E8EE;}
  .pos-table tbody tr:last-child td{border-bottom:none;}
  .pos-table tr{break-inside:avoid;page-break-inside:avoid;}
  /* opt./alt.-gekennzeichnete Positionen (siehe itemFlagPrefix()/calcTotals()) - werden bewusst
     NICHT gedämpft/grau dargestellt (Kundenwunsch), sondern in normaler schwarzer Schrift wie
     jede andere Position. Die Kennzeichnung erfolgt ausschließlich über das "opt. – "/"alt. – "-
     Präfix vor der Beschreibung sowie den Hinweis unter der Summe, dass diese Position nicht
     eingerechnet ist. Die .pos-row-muted-Klasse (siehe positionsTableHtml()/
     positionsMobileCardsHtml()) bleibt im Markup erhalten, ist hier aber bewusst ohne Regel. */
  .doc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px;}
  .doc-logo{height:56px;width:auto;object-fit:contain;}
  .doc-header-right{text-align:right;}
  .doc-title{font-weight:700;font-size:14px;margin-bottom:8px;color:#111;}
  .doc-meta{margin-left:auto;border-collapse:collapse;font-size:11px;color:#111;}
  .doc-meta td{padding:1px 0;white-space:nowrap;border:none;}
  .doc-meta td:first-child{padding-right:16px;}
  .doc-meta td:last-child{text-align:right;}
  .doc-sender-line{font-size:9px;text-decoration:underline;margin-bottom:16px;color:#333;}
  .doc-address{font-size:11px;margin-bottom:26px;color:#111;}
  .doc-intro{font-size:11px;margin-bottom:14px;color:#111;}
  /* Fuß-Bereich (Absenderdaten/Bank/Steuernr. + Seitenzahl), für alle Belegtypen (Angebot, AB,
     Lieferschein, Rechnung) gleich, da sie alle dieselben docXxxHtml()-Bausteine nutzen. Im
     echten Druck/PDF fließt sie bewusst ganz normal nach dem Inhalt (siehe Entscheidung bei
     #printArea oben - kein @media print-Override mehr) - dadurch garantiert nie eine Überlappung
     und nie eine künstliche Zusatzseite. In der Bildschirm-Druckvorschau von Serviceberichten
     (#printArea.preview-mode) bleibt sie weiterhin per position:fixed sichtbar am unteren Rand. */
  .doc-footer-fixed{margin-top:50px;background:#fff;}
  .doc-footer{display:flex;gap:26px;border-top:1px dotted #999;padding-top:8px;font-size:9px;color:#333;}
  .doc-footer-col{flex:1;line-height:1.6;}
  .doc-page-num{text-align:center;font-size:9px;color:#333;margin-top:10px;}

  /* ---------------- Beleg-Design "klassisch-modern" (siehe claude/beleg-design-spec.md) ----------------
     Eigene, additive Klassen - AUSSCHLIESSLICH von docHeaderHtmlModern()/docInfoBlockHtmlModern()/
     docSubjectHtmlModern()/docFooterHtmlModern() verwendet (siehe dort), also nur innerhalb der
     Live-Vorschau/des Drucks der 4 Belegtypen (.doc-a4-page). Bestehende .doc-header/.doc-address/
     .doc-footer-Regeln oben bleiben unverändert für Servicebericht/Sammelbericht/Tresor-Export
     (siehe printReport() u.a.) - Farbwerte identisch zur PDF-Konstante T in buildDocPdf(). */
  .doc-header-modern{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;}
  .doc-header-modern-brand{display:flex;align-items:center;gap:10px;}
  .doc-logo-modern{height:42px;width:auto;object-fit:contain;}
  /* display:inline-flex + flex-shrink:0 + width:max-content statt eines block-Elements als Flex-Kind
     (siehe .doc-header-modern) - stellt sicher, dass die Pille IMMER exakt so breit wie ihr Text
     (inkl. letter-spacing) berechnet wird und nie durch den Flex-Container zusammengedrückt/
     überlaufen werden kann (Kundenrückmeldung: Text ragte über den Rand hinaus). */
  .doc-tag-pill{display:inline-flex;align-items:center;flex-shrink:0;width:max-content;align-self:flex-start;padding:5px 12px;border-radius:11px;background:#F2F7FD;border:1px solid #C9DBF6;color:#2F6FE0;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
  .doc-info-row{display:flex;justify-content:space-between;gap:20px;margin-bottom:34px;}
  .doc-info-address{flex:1;}
  .doc-sender-line-modern{font-size:9px;color:#8B93A1;margin-bottom:8px;}
  .doc-address-modern{font-size:12px;color:#1F2430;line-height:1.5;}
  .doc-info-block-modern{border-collapse:collapse;font-size:11px;color:#1F2430;height:fit-content;}
  .doc-info-block-modern td{padding:1.5px 0;white-space:nowrap;border:none;}
  .doc-info-block-modern td:first-child{padding-right:14px;color:#8B93A1;}
  .doc-info-block-modern td:last-child{font-weight:600;}
  .doc-subject-modern{font-weight:700;font-size:13px;color:#1F2430;margin-bottom:6px;}
  .doc-intro-modern{font-size:12px;color:#4B5563;margin-bottom:14px;}
  .doc-salutation-modern{display:block;}
  /* Schritt 97: Fußzeile Variante C „Rautenkante“ - Haarlinie statt Fläche, Spalten im Blocksatz,
     Köpfe in Versalien, Rautenfeld unten links (nur in der A4-Vorschau, nicht im Browser-Druck). */
  .doc-footer-modern{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #E2E7EF;padding-top:20px;font-size:9.5px;line-height:1.55;color:#4B5563;}
  .doc-footer-modern-col{flex:0 1 auto;}
  .doc-footer-modern-heading{font-size:7.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8B93A1;margin-bottom:4px;}
  .doc-footer-modern-name{font-weight:700;color:#1F2430;}
  .doc-page-num-modern{text-align:right;font-size:8.5px;color:#8B93A1;margin-top:16px;}
  .doc-footer-corner{display:none;}
  .doc-a4-page .doc-footer-corner,.pp-page .doc-footer-corner{display:block;position:absolute;left:0;bottom:0;pointer-events:none;}
  .pp-page{position:relative;}

  /* ---------------- Sammelbericht-Design "klassisch-modern" (siehe claude/servicebericht-design-spec.md) ----------------
     Eigene, additive Klassen - AUSSCHLIESSLICH von printTicketReports() verwendet (Kopf/Infoblock/
     Betreff/Footer nutzen bewusst dieselben .doc-*-modern-Klassen wie die 4 Belegtypen, siehe oben -
     nur der Inhalt (KPI-Leiste, Tabelle, Abschlussbox) ist neu, siehe dortiger Kommentar). Farbwerte
     identisch zur PDF-Konstante T (belegModernTheme()) in buildTicketReportsPdf(). */
  .sr-kpi-strip{display:flex;background:#EEF3FA;border-radius:6px;padding:8px 0;margin-bottom:14px;}
  .sr-kpi-item{flex:1;padding:0 16px;border-left:1px solid #D8E1EF;}
  .sr-kpi-item:first-child{border-left:none;}
  .sr-kpi-label{font-size:8px;color:#8B93A1;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
  .sr-kpi-value{font-size:14px;font-weight:700;color:#1F2430;}
  .sr-kpi-value-small{font-size:11px;}
  .sr-kpi-unit{font-size:10px;font-weight:400;color:#6B7280;}
  .sr-table{width:100%;border-collapse:collapse;font-size:11px;color:#1F2430;margin-bottom:4px;}
  .sr-table thead th{background:#F3F6FA;font-size:9px;font-weight:600;color:#8B93A1;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:6px 8px;}
  .sr-table tbody td{padding:8px;border-bottom:1px solid #E5E8EE;vertical-align:top;}
  .sr-table tbody tr:last-child td{border-bottom:none;}
  .sr-td-nr{width:8%;color:#4B5563;}
  .sr-td-datum{width:18%;color:#4B5563;white-space:nowrap;}
  .sr-td-std{width:10%;text-align:right;font-weight:600;white-space:nowrap;}
  .sr-title{font-weight:600;color:#1F2430;margin-bottom:4px;}
  .sr-bullets{margin:0;padding-left:16px;color:#4B5563;}
  .sr-bullets li{margin-bottom:2px;}
  .sr-close-box{display:flex;justify-content:space-between;align-items:center;background:#EEF3FA;border-radius:6px;padding:8px 14px;font-weight:700;color:#1F2430;font-size:12px;margin-top:10px;max-width:280px;margin-left:auto;}
  .sr-close-meta{font-size:9.5px;color:#6B7280;text-align:right;max-width:280px;margin-left:auto;margin-top:4px;}
  .sr-signature-row{display:flex;justify-content:space-between;gap:40px;margin-top:34px;}
  .sr-signature-line{flex:1;border-top:1px solid #C9D0DC;padding-top:4px;font-size:9px;color:#8B93A1;}


/* ---------------- 9. Login ---------------- */
body.locked #app,body.locked .mobile-topbar{display:none;}
/* Rauten-Muster auch auf der Arbeitsfläche des CRM (Schritt 28, 2026-09-21): dasselbe Motiv
   und dieselbe Deckkraft wie im Anmeldebildschirm (#loginScreen::before weiter unten), damit
   Anmeldung und App wie aus einem Guss wirken. Liegt auf dem body und scrollt mit - bewusst ohne
   background-attachment:fixed, das auf iOS ignoriert wird bzw. ruckelt. Karten, Sidebar und
   Topbar decken es ab; sichtbar ist es nur in den Zwischenräumen. Nicht im Druck. */
@media screen{
  body{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M20 1 L39 20 L20 39 L1 20 Z' fill='none' stroke='%232F6FE0' stroke-opacity='.055' stroke-width='1'/></svg>");background-size:40px 40px}
  [data-theme="dark"] body,body[data-theme="dark"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M20 1 L39 20 L20 39 L1 20 Z' fill='none' stroke='%234A86F0' stroke-opacity='.12' stroke-width='1'/></svg>")}
}
#loginScreen{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;}
/* dezentes Rauten-Muster aus dem Logo-Kit als Hintergrund (nur Kontur, sehr hell) */
#loginScreen::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M20 1 L39 20 L20 39 L1 20 Z' fill='none' stroke='%232F6FE0' stroke-opacity='.10' stroke-width='1'/></svg>");}
[data-theme="dark"] #loginScreen::before{opacity:.35;}
.login-box{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:34px 32px 30px;max-width:400px;width:100%;box-shadow:var(--shadow-elevated);text-align:center;}
.login-box .form-grid{grid-template-columns:1fr;gap:12px;}
.login-box .subtitle{margin-bottom:0;}
.login-logo{display:block;margin:0 auto 14px;width:250px;max-width:100%;height:auto;object-fit:contain;margin-bottom:14px;}
.login-crm-badge{display:inline-block;background:var(--brand-bg);color:var(--brand-text);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:var(--radius-pill);margin:2px 0 10px;}
[data-theme="dark"] .login-crm-badge{color:#AECDFF;}
.login-box h1{margin:0 0 2px;font-size:18px;}
.login-box form{text-align:left;margin-top:18px;}
.login-box form .btn{width:100%;padding:10px 16px;margin-top:4px;}
.login-error{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger);border-radius:var(--r-sm);padding:8px 10px;font-size:12px;margin-top:6px;}
.login-divider{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--text-soft);font-size:12px;}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border);}
body.locked .mobile-tabbar{display:none !important;}

/* ---------------- 10. Responsive ---------------- */
  .form-grid select,.form-grid input[type=text],.form-grid input[type=date],.form-grid input[type=number],.form-grid input[type=password]{width:100%;}
  .detail-header{flex-wrap:wrap;gap:10px;}
  .mobile-topbar{display:none !important;}
  .sidebar-backdrop{display:none;}

  @media screen and (max-width:860px){
    .finance-kpi-groups{grid-template-columns:1fr;}
    .topbar{padding:0 12px;gap:10px;}
    .topbar .hamburger{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--heading);cursor:pointer;font-size:20px;line-height:1;padding:0;flex:none;}
    .crumbs{display:none;}
    .gsearch{max-width:none;min-width:0;}
    .gsearch-kbd{display:none;}
    .top-actions .btn span{display:none;}
    .top-actions .btn{padding:8px 9px;}
    .top-actions{gap:8px;}
    /* Benutzermenü bleibt auch mobil über den Avatar erreichbar (Einstellungen, Privater Tresor,
       Notizen, Erscheinungsbild, Abmelden gibt es sonst nirgendwo mehr in der Sidebar). */
    .usermenu{width:min(272px,calc(100vw - 24px));}
    .mobile-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:60px;background:var(--navy);border-top:1px solid rgba(255,255,255,.08);justify-content:space-around;align-items:center;padding:0 6px;z-index:400;}
    .mobile-tabbar .mt-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;color:#8FA1C2;cursor:pointer;background:none;border:0;font-family:inherit;padding:4px 8px;}
    .mobile-tabbar .mt-item svg{width:20px;height:20px;}
    .mobile-tabbar .mt-item.active{color:#fff;}
    .mobile-tabbar .mt-item.active svg{color:var(--sky);}
    .mobile-tabbar .mt-fab{width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-top:-24px;box-shadow:0 8px 20px rgba(47,111,224,.4);border:0;cursor:pointer;}
    .mobile-tabbar .mt-fab svg{width:22px;height:22px;}
    main{padding-bottom:84px !important;}
    .kpi-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .kpi{padding:12px 12px 10px;}
    .kpi-val{font-size:22px;}
    .spark{width:64px;height:20px;opacity:.6;}
    .kpi-hint{display:none;}
    .page-head{flex-direction:column;align-items:flex-start;gap:10px;}
    .toast{bottom:72px;}

    #app{position:relative;}
    .sidebar{
      position:fixed;top:0;left:0;height:100vh;width:var(--sidebar-w);
      transform:translateX(-100%);transition:transform .25s ease;
      box-shadow:2px 0 20px rgba(0,0,0,.35);z-index:430;overflow-y:auto;
    }
    .sidebar.open{transform:translateX(0);}
    .sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(6,12,22,.5);z-index:420;}

    main{padding:18px 14px;max-width:100%;}

    .card{overflow-x:clip;}

    /* Auf schmalen Bildschirmen kompakte Karten-Liste statt breiter Tabelle mit Scroll. */
    #vaultDesktopTableWrap{display:none;}
    #privateVaultDesktopTableWrap{display:none;}
    #ticketsDesktopTableWrap{display:none;}
    #customersDesktopTableWrap{display:none;}
    #upcomingApptsDesktopTableWrap{display:none;}
    #dashboardUnreadDesktopTableWrap{display:none;}
    #dashboardApptsDesktopTableWrap{display:none;}
    #dashboardTicketsDesktopTableWrap{display:none;}
    #dashboardOrdersDesktopTableWrap{display:none;}
    #dashboardRecurringDraftsDesktopTableWrap{display:none;}
    #chatsDesktopTableWrap{display:none;}
    #ordersDesktopTableWrap{display:none;}
    #quotesDesktopTableWrap{display:none;}
    #confirmationsDesktopTableWrap{display:none;}
    #deliveryDesktopTableWrap{display:none;}
    #invoicesDesktopTableWrap{display:none;}
    #dunningsDesktopTableWrap{display:none;}
    #contractsDesktopTableWrap{display:none;}
    #licensesDesktopTableWrap{display:none;}
    #devicesDesktopTableWrap{display:none;}
    #domainsDesktopTableWrap{display:none;}
    #certificatesDesktopTableWrap{display:none;}
    #portalAccessDesktopTableWrap{display:none;}
    #portalTrashDesktopTableWrap{display:none;}
    #usersDesktopTableWrap{display:none;}
    #articlesDesktopTableWrap{display:none;}
    #expensesDesktopTableWrap{display:none;}
    #suppliersDesktopTableWrap{display:none;}
    #companyDocumentsDesktopTableWrap{display:none;}
    #registrationsDesktopTableWrap{display:none;}
    #vaultHistoryDesktopTableWrap{display:none;}
    #notesDesktopTableWrap{display:none;}
    #recurringDesktopTableWrap{display:none;}
    #incomingInvoicesDesktopTableWrap{display:none;}
    #recurringIncomingDesktopTableWrap{display:none;}
    #documentationDesktopTableWrap{display:none;}
    .reports-desktop-table-wrap{display:none;}
    .detail-tab-desktop-table-wrap{display:none;}
    .mobile-card-list{display:block;}

    /* Kalender-Monatsraster: schrumpft auf die verfügbare Breite statt zu scrollen
       (kein fester min-width mehr wie bei den Tabellen - das 7-Spalten-Raster über
       grid-template-columns:repeat(7,1fr) passt sich so automatisch an). */
    .cal-grid{gap:3px;}
    .cal-cell{min-height:90px;padding:3px;border-radius:4px;gap:2px;}
    .cal-daynum{font-size:10px;}
    .cal-appts{max-height:66px;gap:2px;}
    .cal-appt{padding:1px 3px;font-size:9px;border-radius:3px;}
    .cal-appt-time{margin-right:2px;}
    .cal-grid-head{font-size:9px;}

    /* Verhindert automatisches Hineinzoomen von iOS Safari beim Fokussieren von
       Eingabefeldern (passiert nur, wenn die Schriftgröße unter 16px liegt) - Pinch-to-Zoom
       bleibt dabei für den Nutzer weiterhin uneingeschränkt möglich (Barrierefreiheit). */
    select,input[type=text],input[type=date],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{
      font-size:16px;
    }

    /* Filterleisten (Tickets, Chats, Serviceberichte, Artikel, Belege) sind auf dem Handy
       standardmäßig eingeklappt - nur der kompakte "Filter"-Button (mit Zähler aktiver Filter)
       ist sichtbar, siehe [data-filters-toggle] in den jeweiligen view*()-Funktionen und den
       zugehörigen Klick-Handler in bindEvents(). Aufgeklappt (.open, per mobileFilterPanelsOpen{}
       gesteuert) zeigt ein festes 2-Spalten-Raster statt der bisherigen unregelmäßigen
       Zeilenumbrüche - deutlich kompakter als die volle Selectbreite zuvor. */
    .filters-toggle-btn{display:inline-flex;align-items:center;gap:4px;}
    .filters{display:none;}
    .filters.open{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:10px;}
    .filters.open select{width:100%;}
    .filters.open .msel{width:100%;max-width:none;}
    .filters.open .msel-trigger{width:100%;max-width:none;}
    /* Buttons innerhalb einer aufgeklappten Filterleiste (z. B. "Filter zurücksetzen", "+ Neuer
       Artikel") sollen die volle Breite einnehmen statt nur eine Rasterspalte. */
    .filters.open > button{grid-column:1/-1;}
  }

  @media screen and (max-width:560px){
    main{padding:16px 12px;}
    h1{font-size:19px;}
    .modal-overlay{padding:14px 8px;}
    .modal-box{padding:18px 16px;}
    .form-grid{grid-template-columns:1fr;}
    /* .item-row-with-flag mit angeben (höhere Spezifität als nur ".item-row" außerhalb dieser
       Media Query, siehe Definition oben) - sonst würde die opt./alt.-Variante (Angebotsformular)
       hier fälschlich NICHT auf eine Spalte zusammenfallen. */
    .item-row,.item-row.item-row-with-flag,.item-row.item-row-with-extra{grid-template-columns:1fr;}
    .item-row .btn-remove-row{justify-self:end;}
    .grid-stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;}
    .toolbar{align-items:stretch;}

    /* Kalender auf sehr schmalen Bildschirmen (Smartphone-Hochformat) noch kompakter -
       Uhrzeit vor dem Termin wird ausgeblendet, nur noch Punkt + Titel, damit auch bei
       7 Spalten kein Text überläuft. */
    .cal-cell{min-height:75px;padding:2px;}
    .cal-appts{max-height:52px;}
    .cal-appt-time{display:none;}
  }

  /* ---------------- SharePoint-Dokumente (Kundendetail-Reiter "Dokumente", siehe
     customerDocumentsTabHtml()/iconForSpItem() in index.html) - reine Farbvarianten für die
     bereits vorhandenen Datei-/Ordner-Icon-SVGs, damit Ordner/PDF/Tabelle/Bild auf einen Blick
     unterscheidbar sind, ohne ein neues Icon-Set einzuführen. Nutzt ausschließlich bereits an
     anderer Stelle in dieser Datei definierte CSS-Variablen. ---------------- */
  .sp-icon-folder{color:var(--teal);}
  .sp-icon-pdf{color:var(--danger);}
  .sp-icon-sheet{color:var(--ok);}
  .sp-icon-image{color:#8a4600;}
  [data-theme="dark"] .sp-icon-image{color:#ffc785;}
  .sp-icon-word{color:#2b579a;}
  [data-theme="dark"] .sp-icon-word{color:#8fb8f0;}
  .sp-icon-ppt{color:#c43e1c;}
  [data-theme="dark"] .sp-icon-ppt{color:#ff9a72;}
  .sp-icon-zip{color:#9c6b0b;}
  [data-theme="dark"] .sp-icon-zip{color:#e0b34d;}
  .sp-icon-email{color:#4a4a8a;}
  [data-theme="dark"] .sp-icon-email{color:#b3b3e6;}
  .sp-icon-file{color:var(--text-muted);}

/* ---------------- 11. Detailansichten (Ticket, Kunde) – Richtung C ---------------- */
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.detail-head h1{font-size:20px;margin:0}
.detail-head .prio{font-size:12px}
.status-ctl-wrap{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card)}
.status-ctl-wrap i{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.status-ctl-wrap select{border:0;background-color:transparent;padding:4px 26px 4px 4px;font-weight:600;font-size:12.5px;box-shadow:none;background-position:right 6px center}
.status-ctl-wrap select:focus{box-shadow:none}
.status-ctl-wrap .btn-icon{width:28px;height:28px;border-radius:50%}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.detail-grid .col .card{margin-bottom:0}
.side-card{padding:16px 18px}
.kv{display:grid;grid-template-columns:100px 1fr;gap:8px 10px;font-size:12.5px;margin:0}
.kv dt{color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding-top:3px}
.kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.linkrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-soft);font-size:12.5px;cursor:pointer}
.linkrow:last-child{border-bottom:0}.linkrow:hover .linkrow-t{color:var(--link)}
.linkrow svg{width:16px;height:16px;color:var(--muted);flex:none}
.linkrow-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.linkrow-r{color:var(--muted);white-space:nowrap}
.timeline{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:14px 1fr;gap:10px;padding:6px 0;font-size:12px}
.tl i{width:8px;height:8px;border-radius:50%;background:var(--border);margin:5px 0 0 3px;box-shadow:0 0 0 2px var(--card)}
.tl.on i{background:var(--brand)}.tl .muted{display:block}
.ticket-desc{padding:12px 14px;border:1px solid var(--border-soft);border-radius:var(--r-sm);background:var(--bg-subtle);margin-bottom:14px;font-size:13px}
.thread{display:flex;flex-direction:column;gap:12px}
/* Höhenbegrenzter Verlauf (Variante A, 2026-09-17, siehe viewTicketDetail()/#ticketThreadScroll):
   gescrollt wird innerhalb der Verlaufskachel, nicht mehr in der gesamten Ticketmaske - Kopfzeile,
   Beschreibung und die Schaltflächen unten ("Antworten" usw.) bleiben dadurch immer sichtbar.
   Der Tagestrenner bleibt beim Scrollen oben stehen; beim Öffnen steht die Ansicht beim neuesten
   Eintrag (siehe bindEvents()). */
.thread-scroll{max-height:min(56vh,560px);overflow-y:auto;padding-right:10px;margin-right:-4px;scrollbar-width:thin;scrollbar-color:var(--border-strong) var(--bg-2)}
.thread-scroll::-webkit-scrollbar{width:8px}
.thread-scroll::-webkit-scrollbar-track{background:var(--bg-2);border-radius:8px}
.thread-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
.thread-scroll::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.thread-scroll .thread-day{position:sticky;top:0;z-index:2;background:var(--card);padding:5px 0 3px;margin:0}
.thread-day{display:flex;justify-content:center;margin:4px 0 2px}
.thread-day span{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--bg-2);border:1px solid var(--border);padding:3px 10px;border-radius:999px}
.msg{display:flex;gap:12px}.msg .avatar{margin-top:2px}.msg .avatar.is-staff{background:var(--brand);color:#fff}
.bubble{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;background:var(--card)}
.msg.out .bubble{background:var(--brand-bg);border-color:var(--brand-line)}
.bubble.is-system{background:var(--bg-2);border-color:var(--border-soft)}
.bubble-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:6px;flex-wrap:wrap}.bubble-head b{font-weight:600}
.bubble-subject{font-weight:600;margin-bottom:4px}
.bubble p{line-height:1.55}
.bubble .ticket-email-body{max-height:320px;overflow:auto}
.composer-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft)}
.composer-bar .btn:last-child{margin-left:auto}
.danger-card{border-color:var(--danger-border)}
@media screen and (max-width:1100px){.detail-grid{grid-template-columns:1fr}}
/* Kundendetail */
.hero{display:flex;align-items:center;gap:16px;min-width:0}
.hero-avatar{width:52px;height:52px;border-radius:12px;font-size:16px;background:var(--heading);color:#fff}
[data-theme="dark"] .hero-avatar{background:var(--brand)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
.tile{padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);cursor:pointer;box-shadow:var(--shadow)}
.tile:hover{border-color:var(--brand)}
.tile .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tile .v{font-size:18px;font-weight:700;color:var(--heading);margin-top:2px;font-variant-numeric:tabular-nums}
.tile .v.is-bad{color:var(--bad)}.tile .v.is-text{font-size:14px;line-height:1.3;margin-top:5px}
@media screen and (max-width:860px){.tiles{grid-template-columns:1fr 1fr}}
/* automatisch aufgewertete Detailköpfe (upgradeDetailHead) */
.detail-head .subtitle{margin:2px 0 0;font-size:12.5px}
.detail-head .detail-meta-row{margin:8px 0 0}
.detail-head .actions{align-items:center}
.detail-head .detail-badges{display:inline-flex;gap:6px;align-items:center;margin-right:6px}
.detail-head .actions .doc-status-row{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card)}
.detail-head .actions .doc-status-row select{border:0;background-color:transparent;padding:4px 26px 4px 4px;font-weight:600;font-size:12.5px;box-shadow:none;width:auto;flex:none}
.detail-head .actions .doc-status-row .btn-icon{width:28px;height:28px;border-radius:50%}
.detail-head .actions .btn-danger{margin-left:4px}
/* Belegdetail (viewDocDetail) – Richtung C */
.doc-detail-grid{grid-template-columns:minmax(0,1fr) 340px}
.doc-a4-inline{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;box-shadow:0 1px 4px rgba(11,24,48,.12)}
.doc-detail-grid .doc-main-status{padding:0;gap:14px}
.doc-detail-grid .doc-main-status-label{margin-bottom:6px}
.doc-detail-grid .doc-status-row select{width:auto;flex:1}
.doc-detail-grid .doc-action-group .btn{width:100%;justify-content:flex-start}
.doc-detail-grid .danger-card .actions .btn{flex:1}
.doc-hints{margin-bottom:16px}
.doc-hints .info-box{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media screen and (max-width:1100px){.doc-detail-grid{grid-template-columns:1fr}}
/* Beleg-Vorschau (.doc-a4-page) und Druckbereich: App-Tabellenstile neutralisieren, damit die
   spezifischen .pos-table/.sr-table/.doc-*-Regeln (Abschnitt 8, an die PDF-Spezifikation
   gebunden) unverändert greifen. */
.doc-a4-page,#printArea{font-family:var(--font);color:#1F2430;font-variant-numeric:normal}
.doc-a4-page table,#printArea table{width:auto;font-variant-numeric:normal;font-size:inherit}
.doc-a4-page th,.doc-a4-page td,#printArea th,#printArea td{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none;border:0;padding:0;background:transparent;color:inherit;white-space:normal}
.doc-a4-page tbody tr:hover td,#printArea tbody tr:hover td{background:transparent}
.doc-a4-page .pos-table,.doc-a4-page .sr-table,.doc-a4-page .pr-table,#printArea .pos-table,#printArea .sr-table,#printArea .pr-table{width:100%}
.doc-a4-page .doc-meta,#printArea .doc-meta{margin-left:auto}
.bulk{flex-wrap:wrap}.bulk .bulk-sep{width:1px;height:20px;background:var(--brand-line)}.bulk .btn.btn-ghost{color:var(--brand-text)}
td[data-no-goto]{cursor:default}
.bulk{flex-wrap:wrap}.bulk .bulk-sep{width:1px;height:20px;background:var(--brand-line)}.bulk .btn.btn-ghost{color:var(--brand-text)}
td[data-no-goto]{cursor:default}
/* Finanz-Dashboard (renderFinanceOverviewTab) – Richtung C */
.finance-filterbar{margin-bottom:16px}
.finance-filterbar .finance-period-select{padding:6px 30px 6px 10px;font-size:12px;font-weight:500;background-color:var(--card)}
.finance-kpis{grid-template-columns:repeat(5,1fr)}.finance-kpis.is-four{grid-template-columns:repeat(4,1fr)}
.finance-kpis .kpi-val{font-size:23px}.finance-kpis .chip{white-space:nowrap}.finance-kpis .kpi-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.is-neutral-edge{border-left-color:var(--border-strong)}
/* EÜR-Jahresübersicht "Variante A" und Jahresabschluss (2026-09-17, siehe renderFinanceEurTab()
   und renderFinanceYearEndTab() in index.html): Kopfzeile mit Jahr-Auswahl, Wasserfall- und
   Monatsdiagramm, Fortschrittsring mit Kennzahlen, Checkliste und Drei-Schritt-Export. */
.eur-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.eur-head h2{margin:0}
.eur-head .eur-note{margin-left:auto}
.eur-note{font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.eur-note b{color:var(--heading);font-weight:600}
.eur-wf{width:100%;height:250px;display:block}
.eur-mv{width:100%;height:200px;display:block}
.wf-legend,.mv-legend{display:flex;gap:16px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.wf-legend i,.mv-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.ye-hero{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ye-hero .txt{flex:1;min-width:220px}
.ye-hero .sub{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.ye-donut{width:84px;height:84px;flex:none}
.ye-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:12px}
.ye-stats > div{min-width:96px}
.ye-stats .l{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ye-stats .v{font-size:17px;font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums;margin-top:2px}
.ye-stats .v.warn{color:var(--warn)}.ye-stats .v.ok{color:var(--ok)}
.ye-list{display:flex;flex-direction:column;gap:8px}
.ye-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card)}
.ye-item.is-open{border-color:var(--warn);background:var(--warn-bg)}
.ye-item .ic{width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--ok-bg);color:var(--ok)}
.ye-item.is-open .ic{background:var(--warn);color:#fff}
.ye-item .ic svg{width:13px;height:13px}
.ye-item .txt{flex:1;min-width:0}
.ye-item .t{font-weight:600;font-size:12.5px;color:var(--heading)}
.ye-item .d{font-size:11.5px;color:var(--muted)}
.ye-item .link{white-space:nowrap}
.ye-done-toggle{display:flex;align-items:center;gap:8px;margin-top:10px;padding:4px 0;border:0;background:transparent;font:inherit;font-size:12px;color:var(--muted);cursor:pointer}
.ye-done-toggle:hover{color:var(--brand-text)}
.ye-done-toggle svg{width:13px;height:13px;transform:rotate(90deg);transition:transform .15s}
.ye-done.open .ye-done-toggle svg{transform:rotate(-90deg)}
.ye-done-list{display:none;margin-top:8px}
.ye-done.open .ye-done-list{display:flex;opacity:.8}
/* Drei-Schritt-Ablauf: in der schmalen Seitenspalte untereinander (nebeneinander wären die
   Kacheln nur ~100 px breit und der Text würde auf drei Zeilen umbrechen). */
.ye-steps{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
.ye-step{display:flex;align-items:baseline;gap:10px;border:1px solid var(--border-soft);border-radius:var(--r-sm);padding:9px 12px;background:var(--bg-subtle)}
.ye-step .n{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--brand-text);background:var(--brand-bg);border-radius:999px;padding:1px 7px;flex:none}
.ye-step.done .n{background:var(--ok-bg);color:var(--ok)}
.ye-step .t{font-weight:600;font-size:12.5px;color:var(--heading);margin:0;flex:none}
.ye-step .d{font-size:11.5px;color:var(--muted);min-width:0}
@media screen and (max-width:860px){
  .eur-head .eur-note{margin-left:0;white-space:normal}
  .eur-wf{height:220px}
  .ye-hero{gap:16px}
  .ye-hero .btn{width:100%;justify-content:center}
  .ye-stats{gap:16px}
}
.grid-main.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bars2{width:100%;height:220px;display:block}.bars2 rect{stroke:none}.bars2 .in{fill:var(--brand)}.bars2 .out{fill:#C9D3E3}[data-theme="dark"] .bars2 .out{fill:#2C3A5C}.bars2 .grid{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4}.bars2 .lbl{font-size:10px;fill:var(--muted);font-family:var(--mono)}.bars2 .profit{fill:none;stroke:var(--ok);stroke-width:2;vector-effect:non-scaling-stroke}.bars2 .dot{fill:var(--ok);stroke:var(--card);stroke-width:1.5}
.hbar{display:grid;grid-template-columns:minmax(90px,130px) 1fr 76px;gap:10px;align-items:center;padding:7px 0;font-size:12.5px}
.hbar .track{height:8px;border-radius:4px;background:var(--bg-2);overflow:hidden}.hbar .fill{height:100%;border-radius:4px;background:var(--brand)}
.hbar .fill.c2{background:var(--sky)}.hbar .fill.c3{background:var(--ok)}.hbar .fill.c4{background:var(--warn)}.hbar .fill.c5{background:#5B21B6}
.hbar .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--heading);white-space:nowrap}.hbar .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-soft);font-size:12.5px;cursor:pointer}.op:last-of-type{border-bottom:0}
.op .num{font-family:var(--mono);font-size:11px;color:var(--muted)}.op .amt{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.op .due{font-size:11px}
.check{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-soft);font-size:12.5px}.check:last-child{border-bottom:0}
.check .ic{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}.check .ic svg{width:11px;height:11px}
.check .ok{background:var(--ok-bg);color:var(--ok)}.check .todo{background:var(--warn-bg);color:var(--warn)}.check .t{flex:1;min-width:0}.check .r{color:var(--muted);font-size:11.5px}
.progress{height:6px;border-radius:3px;background:var(--bg-2);overflow:hidden;margin:6px 0 12px}.progress i{display:block;height:100%;background:var(--ok);border-radius:3px}
.liq{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;margin-top:6px}
.liq > div{padding:10px 14px;border-left:1px solid var(--border)}.liq > div:first-child{border-left:0}
.liq .l{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}.liq .v{font-size:15px;font-weight:700;color:var(--heading);margin-top:2px}
.card-foot{display:flex;justify-content:space-between;align-items:center;padding-top:10px;margin-top:8px;border-top:1px solid var(--border-soft);font-size:12px;color:var(--muted)}
@media screen and (max-width:1200px){.finance-kpis{grid-template-columns:repeat(3,1fr)}.grid-main.grid-3{grid-template-columns:1fr}}
@media screen and (max-width:860px){.finance-kpis,.finance-kpis.is-four{grid-template-columns:1fr 1fr}.liq{grid-template-columns:1fr}.liq > div{border-left:0;border-top:1px solid var(--border)}.liq > div:first-child{border-top:0}}

/* ---------------- 12. Responsive Feinschliff (Tablet/Handy) ---------------- */
@media screen and (max-width:1000px){
  .grid-main,.grid-main.grid-3,.detail-grid,.doc-detail-grid{grid-template-columns:minmax(0,1fr)}
  .grid-main > *,.detail-grid > *,.col > *,.card{min-width:0;max-width:100%}
  .grid-2col{grid-template-columns:1fr}
  .finance-kpis{grid-template-columns:repeat(3,1fr)}
}
@media screen and (max-width:860px){
  html,body{overflow-x:hidden;max-width:100%;width:100%}
  #app,main,.main-col,.card,.grid-main,.col,.kpi-grid{min-width:0;max-width:100%}
  .card{overflow:hidden}
  .agenda,.list,.feed,.thread,.table-stack{max-width:100%}
  .ag-title,.fi > div,.li-t{min-width:0;overflow-wrap:anywhere}
  .cust{white-space:normal}
  .main-col{max-width:100vw}
  main{padding:16px 14px 84px}
  h1{font-size:20px}
  /* Seitenkopf: Aktionen in einer scrollfreien Zeile, Buttons teilen sich die Breite */
  .page-head{gap:12px}
  .page-head > div:first-child{width:100%}
  .page-head-actions{width:100%;flex-wrap:wrap}
  .page-head-actions .btn{flex:1 1 auto;justify-content:center}
  /* Reiter: eine Zeile, seitlich wischbar statt umbrechen */
  /* Reiter als Auswahlfeld (Variante A3): nur der aktive Reiter sichtbar, Liste klappt auf */
  .tabs-wrap{position:relative;margin-bottom:14px}
  .tabs-select{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:10px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--heading);text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(11,24,48,.06)}
  .tabs-select-k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;flex:none}
  .tabs-select-v{display:inline-flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
  .tabs-select-v .tab-count,.tabs-select-v .cnt{background:var(--brand-bg);color:var(--brand-text)}
  .tabs-select-n{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none}
  .tabs-select > svg{width:16px;height:16px;flex:none;color:var(--muted);transform:rotate(90deg);transition:transform .15s}
  .tabs-wrap.open .tabs-select{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
  .tabs-wrap.open .tabs-select > svg{transform:rotate(-90deg)}
  .tabs-wrap .tabs,.tabs-wrap .subtabs{display:none}
  .tabs-wrap.open .tabs,.tabs-wrap.open .subtabs{display:flex;flex-direction:column;gap:2px;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 12px 32px rgba(11,24,48,.16)}
  .tabs-wrap .tab-item,.tabs-wrap .subtab-item{width:100%;box-sizing:border-box;justify-content:space-between;padding:10px 12px;border-radius:7px;white-space:normal}
  .tabs-wrap .tab-item.active,.tabs-wrap .subtab-item.active{background:var(--brand-bg);color:var(--brand-text);box-shadow:none}
  .tabs-wrap .tab-item.active .tab-count,.tabs-wrap .tab-item.active .cnt{background:var(--card)}
  /* Werkzeugleiste: Suche volle Breite, Filter-Button rechts daneben, Filter darunter aufklappbar */
  .toolbar{gap:8px}
  .toolbar > h2{width:100%}
  .toolbar .list-search-input{flex:1 1 180px;min-width:0 !important;width:auto}
  .toolbar > .filters-toggle-btn{flex:none;order:2}
  .toolbar > .filters{order:3;width:100%}
  .filters.open{grid-template-columns:1fr 1fr}
  .filters.open > select,.filters.open > input,.filters.open > .fchip,.filters.open > .msel{width:100%;min-width:0}
  .filters.open > .msel .msel-trigger{width:100%;max-width:none;min-width:0}
  .filters.open > label,.filters.open > .checkbox-row,.filters.open > .checkbox-inline{grid-column:1/-1}
  .bulk{padding:8px 10px;gap:8px}
  .bulk .bulk-sep{display:none}
  .bulk input,.bulk select{flex:1 1 140px;min-width:0}
  .bulk .btn.btn-ghost{margin-left:0;width:100%}
  /* Detailköpfe */
  .detail-head{gap:12px}
  .detail-head h1{font-size:18px}
  .detail-head .actions{width:100%;flex-wrap:wrap}
  .detail-head .actions .btn{flex:1 1 auto;justify-content:center}
  .detail-head .actions .status-ctl-wrap,.detail-head .actions .doc-status-row{width:100%}
  .detail-head .actions .status-ctl-wrap select,.detail-head .actions .doc-status-row select{flex:1}
  .detail-head .actions .btn-danger{margin-left:0}
  .detail-meta{gap:8px 14px}
  .hero{gap:12px}.hero-avatar{width:44px;height:44px;font-size:14px}
  .composer-bar .btn{flex:1 1 auto;justify-content:center}.composer-bar .btn:last-child{margin-left:0;width:100%}
  /* Auf dem Handy darf der Verlauf mehr Höhe einnehmen (weniger verschachteltes Scrollen),
     bleibt aber begrenzt, damit die Schaltflächen darunter ohne langes Scrollen erreichbar sind. */
  .thread-scroll{max-height:70vh}
  .doc-hints .info-box{flex-direction:column;align-items:flex-start}
  /* Karten & Diagramme */
  .card{padding:14px}
  .card-head{flex-wrap:wrap;gap:8px}
  .card-tools{width:100%;justify-content:space-between}
  .legend{flex-wrap:wrap;gap:8px 12px}
  .bars,.bars2{height:170px}
  .hbar{grid-template-columns:minmax(70px,100px) 1fr 70px;gap:8px}
  .kpi-grid,.finance-kpis,.finance-kpis.is-four{grid-template-columns:1fr 1fr;gap:10px}
  .finance-kpis .kpi-val{font-size:20px}
  .finance-filterbar > .muted{width:100%;margin-left:0}
  .finance-filterbar .finance-period-select{flex:1 1 40%;min-width:0}
  .tiles{grid-template-columns:1fr 1fr;gap:8px}.tile .v{font-size:16px}
  /* Gestapelte Tabellen (stackTables(), siehe index.html): Kopfzeile aus, jede Zelle mit Label */
  .has-mobile-alt{display:none !important}
  table.table-stack{min-width:0;width:100%}
  table.table-stack thead{display:none}
  table.table-stack tbody,table.table-stack tr,table.table-stack td{display:block;width:100%}
  table.table-stack tr{padding:10px 0;border-bottom:1px solid var(--border-soft)}
  table.table-stack tr:last-child{border-bottom:0}
  table.table-stack td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:3px 0;border:0;text-align:right}
  table.table-stack td:empty{display:none}
  table.table-stack td::before{content:attr(data-label);font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);flex:none;padding-top:2px;text-align:left;min-width:84px}
  table.table-stack td[data-label=""]::before{display:none}
  table.table-stack td .tcell{text-align:left}
  table.table-stack td:first-child{font-weight:600}
  table.table-stack tbody tr.clickable:hover td{background:transparent}
  table.table-stack td[data-no-goto]{justify-content:flex-start}
  /* Login */
  .login-box{padding:26px 20px 22px}.login-logo{width:210px}
  /* Modale */
  .modal-overlay{padding:10px 8px;align-items:flex-start}
  .modal-box{padding:16px 14px;max-height:calc(100vh - 20px)}
  .modal-head h2{font-size:15px}
  .form-actions .btn{flex:1 1 auto;justify-content:center}
  .settings-tile-grid{grid-template-columns:1fr}
  .ticket-detail-actions .doc-status-row{width:100%;border-right:0;padding-right:0}
  .ticket-detail-actions .btn{flex:1 1 auto;justify-content:center}
  .ticket-detail-actions .btn-danger{margin-left:0;border-left:0;padding-left:13px}
  .doc-toolbar .btn,.dashboard-quick-actions-row .btn{flex:1 1 auto;justify-content:center}
  .item-row,.item-row.item-row-with-flag,.item-row.item-row-with-extra{grid-template-columns:1fr 1fr}
  .item-row > :first-child,.item-row-with-flag > :nth-child(2){grid-column:1/-1}
  .btn-remove-row{justify-self:end}
  .totals-box{max-width:none}
  .gsearch-results{position:fixed;left:8px;right:8px;top:calc(var(--topbar-h) + 4px);max-height:70vh}
}
@media screen and (max-width:560px){
  .kpi-grid,.finance-kpis,.finance-kpis.is-four{grid-template-columns:1fr 1fr}
  .kpi-val{font-size:20px}
  .filters.open{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .top-actions .icon-btn{width:32px;height:32px}
}

/* ---------------- 13. Kalender – Richtung C (Monatsraster + Seitenspalte, siehe viewCalendar()) ---------------- */
.cal-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cal-toolbar .cal-nav{display:flex;align-items:center;gap:6px}
.cal-toolbar .cal-nav .icon-btn{width:32px;height:32px}
.cal-toolbar .cal-nav .btn-small{padding:6px 11px}
.cal-title{font-size:16px;font-weight:700;color:var(--heading);letter-spacing:-.01em;min-width:150px}
.cal-title span{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.04em;margin-left:8px}
.cal-legend{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.cat{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);font:inherit;font-size:11.5px;font-weight:500;color:var(--text);cursor:pointer;margin:0;line-height:1.4}
.cat:hover{border-color:var(--brand);color:var(--heading)}
.cat i{width:8px;height:8px;border-radius:50%;flex:none}
.cat.off{opacity:.45}
.cat.off:hover{opacity:.7}
.cat input[type=checkbox]{width:13px;height:13px;margin:0;accent-color:var(--brand)}
/* Kalender-Layout ab Schritt 24 (2026-09-20, Variante C): das Monatsraster (bzw. die Liste) nutzt
   immer die volle Breite - die frühere 300-px-Seitenspalte nahm ihm rund ein Viertel der Breite,
   sodass fast jeder Termintitel abgeschnitten war. Tagesagenda und "Demnächst" liegen jetzt im
   einblendbaren Panel .cal-side (siehe weiter unten und viewCalendar()). */
.cal-grid-main{grid-template-columns:minmax(0,1fr);align-items:start}
/* Durch die gewonnene Breite dürfen die Zellen etwas luftiger sein (nur am Desktop - die
   Mobil-Regeln weiter unten machen sie bewusst wieder kompakt). */
@media screen and (min-width:1001px){
  .cal-grid-main .mgrid{grid-auto-rows:minmax(126px,auto)}
  .cal-grid-main .day{padding:9px 10px 7px;gap:5px}
}
.month{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--card);min-width:0}
.dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--bg-2);border-bottom:1px solid var(--border)}
.dow div{padding:8px 10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dow div.we{color:var(--text-soft)}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(118px,auto)}
.dow.cols5,.mgrid.cols5{grid-template-columns:repeat(5,minmax(0,1fr))}
.day{border-right:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:8px 8px 6px;display:flex;flex-direction:column;gap:4px;min-width:0;position:relative;cursor:pointer}
.mgrid:not(.cols5) .day:nth-child(7n){border-right:0}
.mgrid.cols5 .day:nth-child(5n){border-right:0}
.day:hover{background:var(--bg-hover)}
.day.we{background:var(--bg-subtle)}
.day.other{background:var(--bg-subtle)}
.day.other .dn,.day.other .ev{opacity:.6}
.day.sel{background:var(--brand-bg)}
.day .dn{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:space-between}
.day .dn b{font-weight:500}
.day.today .dn b{background:var(--brand);color:#fff;border-radius:999px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.day.today{box-shadow:inset 0 2px 0 var(--brand)}
.day .add{opacity:0;width:18px;height:18px;border-radius:50%;background:var(--brand-bg);color:var(--brand-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.day:hover .add,.day.sel .add{opacity:1}
.day .add:hover{background:var(--brand);color:#fff}
.day .add svg{width:11px;height:11px}
@media (hover:none){.day .add{opacity:1}}
.ev{display:flex;align-items:center;gap:6px;padding:3px 7px;border-radius:5px;font-size:11.5px;font-weight:500;color:var(--heading);background:var(--brand-bg);border-left:3px solid var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:0;width:100%;box-sizing:border-box}
.ev:hover{filter:brightness(.96)}
.ev .t{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);flex:none}
.ev .n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ev .rep{display:inline-flex;flex:none;color:var(--muted)}
.ev .rep svg{width:11px;height:11px}
.ev.c-deadline{background:#FFF1DB;border-left-color:#9A5B00}
.ev.allday{background:#0B1830;color:#fff;border-left-color:#6FC3F7}
.ev.allday .t,.ev.allday .rep{color:#B9C6E0}
.ev .who{margin-left:auto;flex:none;width:16px;height:16px;border-radius:50%;background:var(--brand);color:#fff;font-size:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.ev .cal-invite-dot{flex:none}
.more{font-size:11px;color:var(--brand-text);font-weight:600;padding:0 7px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-agenda .card-head h2{font-size:14px}
.agitem{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft);cursor:pointer}
.agitem:last-child{border-bottom:0}
.agitem:hover .ti{color:var(--brand-text)}
.agitem .tm{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);width:44px;flex:none;padding-top:2px;line-height:1.5}
.agitem .bar{width:3px;border-radius:3px;background:var(--brand);flex:none}
.agitem .ti{font-weight:500;color:var(--heading);overflow-wrap:anywhere}
.agitem .mt{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.agitem .chips{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;align-items:center}
.mini{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:1px 7px;text-decoration:none;line-height:1.5}
.mini:hover{border-color:var(--brand);color:var(--brand-text)}
.mini svg{width:11px;height:11px}
.daysep{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);padding:10px 0 4px}
/* "Demnächst"-Kachel als Tages-Akkordeon (Variante C, 2026-09-17, siehe viewCalendar()): je Tag
   eine Zeile mit Datum, Vorschau und Anzahl; ein Klick klappt die Kompaktzeilen des Tages auf.
   Ersetzt die vorherige vollständige Auflistung aller Einträge der nächsten 7 Tage, die die
   Seitenspalte zu lang werden ließ. Zustand: siehe calUpcomingOpen in index.html. */
.upc-day{border-bottom:1px solid var(--border-soft)}
.upc-day:last-child{border-bottom:0}
.upc-day-head{display:flex;align-items:center;gap:9px;padding:9px 0;cursor:pointer}
.upc-day.empty > .upc-day-head{cursor:default;opacity:.5}
.upc-day-head:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.upc-day-head .wd{font-weight:600;color:var(--heading);font-size:12.5px;flex:none;width:82px;text-transform:capitalize}
.upc-day-head:hover .wd{color:var(--brand-text)}
.upc-day.empty > .upc-day-head:hover .wd{color:var(--heading)}
.upc-day-head .prev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px}
.upc-day-head .prev .more{color:var(--text-soft)}
.upc-day.open > .upc-day-head .prev{visibility:hidden}
.upc-day-head .cnt{font-size:10px;font-weight:700;background:var(--bg-2);color:var(--muted);border-radius:999px;padding:1px 7px;flex:none}
.upc-day.open > .upc-day-head .cnt{background:var(--brand-bg);color:var(--brand-text)}
.upc-day-head > svg{width:14px;height:14px;flex:none;color:var(--muted);transform:rotate(90deg);transition:transform .15s}
.upc-day.open > .upc-day-head > svg{transform:rotate(-90deg);color:var(--brand)}
.upc-day.closed > .upc-day-body{display:none}
.upc-day-body{padding:0 0 8px}
.upc-line{display:flex;align-items:center;gap:8px;padding:5px 0 5px 10px;font-size:12.5px;cursor:pointer}
.upc-line .tm{font-family:var(--mono);font-size:10.5px;color:var(--muted);width:40px;flex:none}
.upc-line i{width:7px;height:7px;border-radius:50%;flex:none}
.upc-line .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--heading);font-weight:500}
.upc-line:hover .t{color:var(--brand-text)}
/* Kundenportal-Karte im Stammdaten-Reiter und Registrierungskarte in der Kundenliste
   (Schritt 28, 2026-09-21) - ersetzen die aufgelöste Ansicht "Registrierungen & Portalzugänge". */
.portal-card{margin-top:16px}
.portal-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--border-soft)}
.portal-row:first-of-type{border-top:0}
.portal-row-main{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-width:0}
.portal-row-user{display:flex;align-items:center;gap:10px;min-width:0}
.portal-row-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.portal-row-actions{display:flex;gap:6px;flex-wrap:wrap}
.portal-row.is-trash{opacity:.85}
.portal-trash{margin-top:8px;padding-top:10px;border-top:1px dashed var(--border)}
.reg-card{border-left:3px solid var(--warn)}
.reg-card h2 .tab-count{vertical-align:2px}
/* Kanalfilter im Ticketverlauf (Schritt 26, 2026-09-20, siehe viewTicketDetail()): ersetzt die
   früheren Schaltflächen "Interne Notiz"/"Portal-Chat"/"E-Mail-Verlauf", die gefiltert dasselbe
   zeigten wie der Verlauf selbst. Nutzt die vorhandene Chip-Optik (.cat) aus der Kalenderlegende. */
.thread-chips{display:flex;gap:6px;flex-wrap:wrap}
.thread-chips .cat{gap:5px}
.thread-chips .cat .n{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--muted)}
.thread-chips .cat.on{background:var(--brand-bg);border-color:var(--brand-line);color:var(--brand-text)}
.thread-chips .cat.on .n{color:var(--brand-text)}
@media screen and (max-width:860px){.thread-chips{width:100%}}
.kbd{font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:1px 6px;border:1px solid var(--border);border-radius:5px;color:var(--muted);background:var(--bg-2)}
[data-theme="dark"] .ev.c-deadline{background:rgba(154,91,0,.25)}
/* Tastenkürzel: früher eine eigene Karte in der Seitenspalte, jetzt eine dezente Zeile unter dem
   Raster (die Seitenspalte gibt es nicht mehr, siehe .cal-side). */
.cal-kbd-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:-4px 0 4px;font-size:11.5px;color:var(--muted)}
.cal-kbd-line .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
/* ---- Tagespanel (Variante C): Tagesagenda + "Demnächst" als einblendbares Panel ----
   Liegt fix am rechten Rand unter der Topbar und schiebt sich beim Öffnen über das Raster; z-index
   bewusst unter der Topbar (40) und dem Modal-Overlay (500), damit Suchvorschläge und Modale
   weiterhin darüber liegen. Auf schmalen Bildschirmen wird daraus ein Overlay mit Hintergrund
   (z-index über der Mobile-Tabbar, aber unter dem Navigations-Drawer). */
.cal-side{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:364px;max-width:100vw;z-index:30;display:flex;flex-direction:column;background:var(--card);border-left:1px solid var(--border);box-shadow:-16px 0 38px rgba(11,24,48,.13);transform:translateX(100%);visibility:hidden;transition:transform .22s ease}
.cal-side.open{transform:none;visibility:visible}
.cal-side-head{flex:none;display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--border-soft)}
.cal-side-head .icon-btn{width:30px;height:30px}
.cal-side-head .icon-btn svg{width:15px;height:15px}
.cal-side-title{margin-left:6px;font-weight:600;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-side-x{margin-left:auto}
.cal-side-body{flex:1;min-height:0;overflow:auto;padding:14px 16px 26px;display:flex;flex-direction:column;gap:14px}
.cal-side-body .card{border:0;box-shadow:none;background:transparent;padding:0;margin:0}
.cal-side-body .card + .card{border-top:1px solid var(--border);padding-top:14px}
.cal-side-body .card-head h2{font-size:14px}
.cal-side-backdrop{display:none}
.cal-side-btn.on{border-color:var(--brand);color:var(--brand-text);background:var(--brand-bg)}
.cal-side-btn svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.cal-side{transition:none}}
@media screen and (max-width:1000px){
  .cal-legend{margin-left:0;width:100%}
  .cal-kbd-line{display:none}
  .cal-side{top:0;width:min(430px,100%);z-index:410}
  .cal-side-backdrop.show{display:block;position:fixed;inset:0;background:rgba(6,12,22,.45);z-index:405}
  body.cal-side-open{overflow:hidden}
}
@media screen and (max-width:860px){
  .cal-toolbar{gap:8px}
  .cal-title{min-width:0;flex:1 1 auto}
  .cal-title span{display:block;margin-left:0}
  .cal-legend{gap:4px}
  .cat{padding:3px 8px;font-size:11px}
  .mgrid{grid-auto-rows:minmax(84px,auto)}
  .day{padding:5px 4px 4px;gap:3px}
  .dow div{padding:6px 4px;font-size:9.5px}
  .day .dn{font-size:11px}
  .day .add{width:16px;height:16px}
  .ev{padding:2px 4px;font-size:10.5px;gap:4px;border-left-width:2px;border-radius:4px}
  .ev .who{display:none}
  .more{padding:0 4px;font-size:10px}
  .more-lbl{display:none}
}
@media screen and (max-width:560px){
  .ev .t{display:none}
  .mgrid{grid-auto-rows:minmax(72px,auto)}
  .day .dn b{font-size:11px}
  .day.today .dn b{width:20px;height:20px}
  .agitem .tm{width:40px}
}

/* ---------------- 14. Zeiterfassung (siehe viewTimeTracking() im Block "Zeiterfassung") ---------------- */
.kpi.ok{border-left-color:#1E7A46}.kpi.sky{border-left-color:var(--sky)}.kpi.neutral{border-left-color:var(--border-strong)}
.kpi-sub{font-size:11px;color:var(--muted);margin-top:2px}
.time-toolbar .cal-legend{margin-left:auto}
.fchip-select{padding:6px 28px 6px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background-color:var(--card);font:inherit;font-size:12px;font-weight:500;color:var(--text);max-width:200px;width:auto}
.timer{display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff;border-radius:var(--r);padding:12px 16px;margin-bottom:16px;border-left:3px solid var(--sky);flex-wrap:wrap}
.timer .dot{width:10px;height:10px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 4px rgba(61,220,132,.2);flex:none;animation:tt-pulse 1.6s ease-in-out infinite}
.timer.paused .dot{background:#F5B942;box-shadow:0 0 0 4px rgba(245,185,66,.2);animation:none}
.timer .dot.idle{background:#8FA1C2;box-shadow:none;animation:none}
@keyframes tt-pulse{0%,100%{box-shadow:0 0 0 4px rgba(61,220,132,.2)}50%{box-shadow:0 0 0 7px rgba(61,220,132,.08)}}
.timer .clock{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:.02em;min-width:118px;font-variant-numeric:tabular-nums}
.timer .meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 240px}
.timer .meta b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timer .meta span{font-size:11.5px;color:#B9C6E0}
.timer .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky);border:1px solid rgba(111,195,247,.35);border-radius:999px;padding:2px 8px;white-space:nowrap}
.timer .btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff}
.timer .btn:hover{background:rgba(255,255,255,.18)}
.timer .btn.stop{background:#E0483A;border-color:#E0483A}.timer .btn.stop:hover{background:#c73d30}
.timer .btn.btn-primary{background:var(--brand);border-color:var(--brand)}
.timer .icon-btn.ghost{color:#B9C6E0}.timer .icon-btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.timer.idle{background:var(--card);color:var(--text);border:1px solid var(--border);border-left:3px solid var(--brand)}
.timer.idle .tt-desc{flex:1 1 150px;min-width:0;border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px;font:inherit;font-size:13px;background:var(--bg);color:var(--heading)}
.timer.idle .tt-sel{flex:0 1 150px;min-width:0;padding:7px 26px 7px 9px;border:1px solid var(--border);border-radius:var(--r-sm);font:inherit;font-size:12.5px;background-color:var(--bg);color:var(--text)}
.timer.idle .tt-cat{flex-basis:118px}
.timer.idle .tt-bill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap;margin:0}
.timer.idle .tt-bill input{width:14px;height:14px;margin:0;accent-color:var(--brand)}
.timer.idle .seg{flex:none}
.timer .btn svg{width:14px;height:14px}
/* Topbar-Chip laufende Erfassung */
.tt-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:var(--r-sm);border:1px solid rgba(61,220,132,.5);background:var(--navy);color:#fff;font-family:var(--mono);font-size:12px;font-weight:600;cursor:pointer;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.tt-chip .tt-dot{width:8px;height:8px;border-radius:50%;background:#3DDC84;animation:tt-pulse 1.6s ease-in-out infinite}
.tt-chip.paused .tt-dot{background:#F5B942;animation:none}
.tt-chip.hidden{display:none}
/* Tagesbalken */
.daybars{display:grid;gap:5px;align-items:end;height:170px;padding:0 2px;position:relative}
.daybar{display:flex;flex-direction:column-reverse;gap:2px;height:100%;justify-content:flex-start;min-width:0;cursor:pointer;border-radius:3px}
.daybar:hover{background:var(--bg-hover)}
.daybar i{display:block;border-radius:3px 3px 0 0;min-height:2px}
.daybar.we{opacity:.45}.daybar.today{box-shadow:inset 0 -2px 0 var(--brand)}
.soll-line{position:absolute;left:0;right:0;border-top:1px dashed var(--warn);pointer-events:none}
.soll-line span{position:absolute;right:2px;top:-14px;font-family:var(--mono);font-size:9.5px;color:var(--warn)}
.daylbl{display:grid;gap:5px;padding:6px 2px 0;font-family:var(--mono);font-size:9.5px;color:var(--muted);text-align:center}
.daylbl span{overflow:hidden;white-space:nowrap}.daylbl span.we{color:var(--text-soft)}
/* Einträge */
.te-head,.te-row{display:grid;grid-template-columns:110px 60px 60px 100px minmax(0,1.2fr) minmax(0,1.6fr) 110px 26px;gap:10px;align-items:center}
.te-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--border)}
.te-daysep{display:flex;justify-content:space-between;align-items:center;background:var(--bg-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:5px 10px;margin-top:6px;border-radius:5px}
.te-daysep b{color:var(--heading);letter-spacing:0;font-variant-numeric:tabular-nums}
.te-ho{font-size:9.5px;font-weight:700;color:var(--brand-text);background:var(--brand-bg);border-radius:999px;padding:1px 6px;margin-left:6px;letter-spacing:.04em}
.te-row{padding:8px 10px;border-bottom:1px solid var(--border-soft);cursor:pointer;font-size:12.5px}
.te-row:hover{background:var(--bg-hover)}
.te-row .mono{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.te-dur{font-variant-numeric:tabular-nums;font-weight:600;color:var(--heading);white-space:nowrap}
.te-ref,.te-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.te-desc{color:var(--text)}
.te-bill{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.te-bill.y{background:var(--ok-bg);color:var(--ok)}.te-bill.n{background:var(--bg-2)}.te-bill svg{width:10px;height:10px}
.loc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;white-space:nowrap}.loc i{width:8px;height:8px;border-radius:50%;flex:none}
/* Homeoffice-Nachweis */
.ho-big{display:flex;align-items:baseline;gap:6px;margin:4px 0 2px}.ho-big b{font-size:30px;font-weight:700;color:var(--heading);letter-spacing:-.02em}.ho-big span{color:var(--muted);font-size:12px}
.ho-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);gap:8px;flex-wrap:wrap}.ho-meta b{color:var(--heading)}
.time-grid .progress i{background:var(--brand)}
.mini-months{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-items:end;height:44px;margin-top:10px}
.mini-months i{display:block;background:var(--brand-bg);border-radius:2px 2px 0 0}.mini-months i.cur{background:var(--brand)}
.mini-lbl{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;font-family:var(--mono);font-size:8.5px;color:var(--text-soft);text-align:center;margin-top:3px}
.note{font-size:11px;color:var(--muted);background:var(--bg-2);border-radius:var(--r-sm);padding:8px 10px;margin-top:10px;line-height:1.45}
.time-loc-seg{width:100%;margin-top:2px}.time-loc-seg button{flex:1}
[data-theme="dark"] .timer.idle{background:var(--card)}
@media screen and (max-width:1100px){
  .te-head,.te-row{grid-template-columns:100px 50px 56px 90px minmax(0,1fr) minmax(0,1.4fr) 26px}
  .te-head span:nth-child(7),.te-row .te-cat{display:none}
}
@media screen and (max-width:860px){
  .timer{gap:10px;padding:12px}
  .timer .clock{font-size:22px;min-width:0}
  .timer .meta{flex-basis:100%;order:5}
  .timer .btn{flex:1 1 auto;justify-content:center}
  .timer.idle .tt-desc,.timer.idle .tt-sel{flex:1 1 100%}
  .timer.idle .seg{width:100%}.timer.idle .seg button{flex:1}
  .timer.idle .btn-primary{flex:1 1 100%}
  .time-toolbar .cal-legend{display:none}
  .time-toolbar .fchip-select{flex:1 1 45%;max-width:none}
  .tt-chip .tt-clock{display:none}.tt-chip{padding:0 10px}
  .daybars{height:130px}
  .daylbl span:nth-child(2n){visibility:hidden}
  .te-head{display:none}
  .te-row{grid-template-columns:auto 1fr auto;grid-template-areas:"time dur bill" "ref ref ref" "desc desc desc" "loc cat cat";gap:4px 10px;padding:10px 8px}
  .te-time{grid-area:time}.te-break{display:none}.te-dur{grid-area:dur;text-align:right}.te-bill{grid-area:bill}.te-loc{grid-area:loc}.te-ref{grid-area:ref;font-weight:600;color:var(--heading)}.te-desc{grid-area:desc;white-space:normal}.te-cat{grid-area:cat;text-align:right}
}
@media screen and (max-width:560px){
  .daybars{height:110px}
  .daylbl span:nth-child(2n){visibility:visible}.daylbl span:not(:nth-child(5n+1)){visibility:hidden}
}
/* ===== Schritt 29: Artikel (Variante A) ===== */
.art-kpis{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.art-kpi{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--card);font:inherit;text-align:left;color:inherit}
.art-kpi .v{font-size:17px;font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums}
.art-kpi .l{font-size:11.5px;color:var(--muted);line-height:1.25}
.art-kpi.warn{border-color:var(--warn);background:var(--warn-bg);cursor:pointer}
.art-kpi.warn .v{color:var(--warn)}
.art-kpi.warn:hover{box-shadow:var(--focus)}
.art-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.art-rail{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:10px;position:sticky;top:calc(var(--topbar-h) + 16px)}
.art-rail .kicker{margin:4px 8px 8px;display:block}
.art-rail a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:12.5px;color:var(--text);cursor:pointer;text-decoration:none;min-width:0}
.art-rail a .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-rail a:hover{background:var(--bg-subtle)}
.art-rail a.on{background:var(--brand-bg);color:var(--brand-text);font-weight:600}
.art-rail a i{width:8px;height:8px;border-radius:2px;flex:none;background:var(--border-strong)}
.art-rail a i.all{background:var(--brand)}
.art-rail a i.cd-0{background:#2F6FE0}.art-rail a i.cd-1{background:#1E9E5A}.art-rail a i.cd-2{background:#7C3AED}.art-rail a i.cd-3{background:#D9730D}.art-rail a i.cd-4{background:#C22A72}
.art-rail a i.cd-5{background:#0F8A82}.art-rail a i.cd-6{background:#B7791F}.art-rail a i.cd-7{background:#4338CA}.art-rail a i.cd-8{background:#E05A4A}.art-rail a i.cd-9{background:#0E7490}
.art-rail a .c{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.art-rail a.on .c{color:var(--brand-text)}
.art-rail hr{border:0;border-top:1px solid var(--border-soft);margin:8px 0}
.art-rail a.add{color:var(--muted)}
.art-rail a.add svg{width:14px;height:14px;flex:none}
.art-list{padding-top:14px}
.art-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.art-toolbar .list-search-input{flex:1;min-width:220px}
.art-row{display:grid;grid-template-columns:36px minmax(0,1fr) 150px 130px 38px;gap:14px;align-items:center;padding:12px 6px;border-top:1px solid var(--border-soft);cursor:pointer;border-radius:6px}
.art-row:hover{background:var(--bg-subtle)}
.art-row.off > :not(.art-active-toggle){opacity:.55}
.art-ic{width:36px;height:36px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.art-ic svg{width:18px;height:18px}
.art-ic.svc{background:var(--brand-bg);color:var(--brand-text)}
.art-ic.prd{background:#EDE4FC;color:#5B21B6}
.art-ic.unk{background:var(--warn-bg);color:var(--warn)}
[data-theme="dark"] .art-ic.prd{background:rgba(124,58,237,.22);color:#D7C2FF}
.art-ic.lg{width:48px;height:48px;border-radius:12px}
.art-ic.lg svg{width:24px;height:24px}
.art-main{min-width:0}
.art-main .t{font-weight:600;color:var(--heading);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.art-main .sku{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:500}
.art-flag{font-size:10px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--warn-bg);color:var(--warn)}
.art-main .d{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.art-main .d .none{font-style:italic;color:var(--text-soft)}
.art-use{font-size:11.5px;color:var(--muted);line-height:1.35}
.art-use b{color:var(--heading);font-weight:600}
.art-price{text-align:right}
.art-price .p{font-size:15px;font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.art-price .u{font-size:11px;color:var(--muted)}
.art-active-toggle{justify-self:end}
.art-group{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);padding:16px 6px 6px;display:flex;justify-content:space-between;gap:10px}
/* Artikeldetail */
.ad-hero{display:flex;align-items:flex-start;gap:14px;margin:4px 0 18px;flex-wrap:wrap}
.ad-hero-main{min-width:0;flex:1}
.ad-kick{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ad-hero h1{margin:2px 0 6px;font-size:22px}
.ad-hero .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ad-actions{display:flex;gap:8px;flex-wrap:wrap}
.ad-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.ad-grid .card-sub{font-size:12px;color:var(--muted);margin-top:2px}
.ad-price{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ad-price .big{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ad-price .big .v{font-size:28px;font-weight:700;color:var(--heading);letter-spacing:-.02em}
.ad-price .big .u{font-size:13px;color:var(--muted)}
.ad-price .pk .l,.ad-note .l{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ad-price .pk .v{font-weight:600;color:var(--heading);margin-top:2px}
.ad-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft);font-size:12.5px;color:var(--text)}
.ad-note .l{margin-bottom:3px}
.toggle-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px;cursor:pointer;margin:0;font-weight:500}
.quote-prev{border:1px solid var(--border);border-radius:var(--r-sm);background:#fff;padding:16px 18px;font-size:12.5px;color:#1c2433;overflow-x:auto}
.quote-prev .qh,.quote-prev .qr{display:grid;grid-template-columns:34px minmax(0,1fr) 50px 90px 96px;gap:10px;min-width:460px}
.quote-prev .qh{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#6b7788;border-bottom:1px solid #e3e8ef;padding-bottom:6px}
.quote-prev .qr{padding-top:8px}
.quote-prev .qr b{color:#0b1830}
.quote-prev .pos-detail-list{margin:4px 0 0;padding-left:16px;color:#3b4658;line-height:1.45}
.quote-prev .pos-info-text{margin:6px 0 0;font-style:italic;color:#6b7788;line-height:1.45}
.quote-prev .num{text-align:right;font-variant-numeric:tabular-nums}
.use-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px}
.use-kpis > div{background:var(--bg-subtle);border-radius:var(--r-sm);padding:10px}
.use-kpis .v{font-size:17px;font-weight:700;color:var(--heading)}
.use-kpis .l{font-size:11px;color:var(--muted)}
.use-list{display:flex;flex-direction:column}
.use-list .li{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border-soft);font-size:12.5px;color:var(--text);cursor:pointer;text-decoration:none;border-radius:6px}
.use-list .li:hover{background:var(--bg-subtle)}
.use-list .li:last-child{border-bottom:0}
.use-list .li .mono{font-family:var(--mono);font-size:11px;color:var(--muted);width:96px;flex:none}
.use-list .li .txt{min-width:0;flex:1}
.use-list .li .dt{color:var(--muted);margin-left:8px;font-size:11.5px}
.use-list .li .r{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--heading);white-space:nowrap}
.use-list .li .r.dev{background:var(--warn-bg);color:var(--warn);padding:1px 7px;border-radius:999px}
@media screen and (max-width:1100px){
  .ad-grid{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:1000px){
  .art-layout{grid-template-columns:1fr}
  .art-rail{position:static;display:flex;flex-wrap:wrap;gap:6px;padding:8px}
  .art-rail .kicker,.art-rail hr{display:none}
  .art-rail a{padding:5px 10px;border:1px solid var(--border);border-radius:999px}
  .art-rail a .c{margin-left:4px}
}
@media screen and (max-width:860px){
  .art-row{grid-template-columns:32px minmax(0,1fr) auto;gap:4px 12px;padding:12px 2px}
  .art-row .art-ic{grid-row:1/3;width:32px;height:32px}
  .art-use{display:none}
  .art-price{grid-column:2;grid-row:2;text-align:left;display:flex;gap:6px;align-items:baseline}
  .art-active-toggle{grid-column:3;grid-row:1/3}
  .art-toolbar .list-search-input{min-width:0;width:100%;flex:1 1 100%}
  .ad-actions{width:100%}.ad-actions .btn{flex:1}
  .use-kpis{gap:6px}.use-kpis .v{font-size:14.5px}.use-kpis > div{padding:8px}
  .use-list .li .dt{display:none}
}
/* ===== Schritt 29: Tresor (Variante B) ===== */
.vx-private{--vx-accent:#5B3FD6;--vx-accent-bg:#EDE7FB;--vx-accent-text:#4C1D95}
[data-theme="dark"] .vx-private{--vx-accent:#8B74F0;--vx-accent-bg:rgba(139,116,240,.18);--vx-accent-text:#CBBEFF}
.vx-private .btn:not(.btn-secondary):not(.btn-danger):not(.btn-muted){background:var(--vx-accent);border-color:var(--vx-accent)}
.vx-private .btn:not(.btn-secondary):not(.btn-danger):not(.btn-muted):hover{filter:brightness(.94)}
.vx-head h1{display:flex;align-items:center;gap:10px}
.vx-head h1 svg{width:24px;height:24px;color:var(--brand);flex:none}
.vx-private .vx-head h1 svg{color:var(--vx-accent)}
.vx-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--vx-accent-bg);color:var(--vx-accent-text);font-weight:600}
.vx-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:11.5px;font-weight:600;margin-top:4px}
.vx-status svg{width:13px;height:13px;flex:none}
.vx-status .t{font-weight:500;color:var(--muted)}
.vx-actions .btn svg{width:15px;height:15px;flex:none}
.vx-menu-wrap{position:relative}
.vx-more{padding-left:10px;padding-right:10px}
.vx-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:260px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-elevated);padding:6px;z-index:40}
.vx-menu[hidden]{display:none}
.vx-mi{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:7px;background:transparent;font:inherit;font-size:12.5px;color:var(--text);cursor:pointer;text-align:left;white-space:nowrap}
.vx-mi:hover{background:var(--bg-subtle)}
.vx-mi svg{width:15px;height:15px;color:var(--muted);flex:none}
.vx-mi.danger,.vx-mi.danger svg{color:var(--danger)}
.vx-mi.disabled{opacity:.5;cursor:not-allowed}
.vx-mi.disabled:hover{background:transparent}
.vx-menu hr{border:0;border-top:1px solid var(--border-soft);margin:6px 0}
.vx-band{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r);background:linear-gradient(90deg,#0B1830,#2A1B55);color:#fff;margin-bottom:16px}
.vx-band svg{width:20px;height:20px;color:#C4B5FD;flex:none}
.vx-band .t{font-weight:600}
.vx-band .s{font-size:12px;color:#C9C3E6}
/* Kacheln */
.vx-tile{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.vx-tile svg{width:15px;height:15px}
.vx-tile.neutral{background:var(--bg-2);color:var(--muted)}
.vx-tile.lg{width:48px;height:48px;border-radius:12px}
.vx-tile.lg svg{width:24px;height:24px}
/* Geteilte Ansicht */
.vx-split{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}
.vx-list{padding:10px;margin:0;position:sticky;top:calc(var(--topbar-h) + 16px)}
.vx-list-tools{display:flex;flex-direction:column;gap:8px;padding:2px 2px 8px}
.vx-list-tools .list-search-input{width:100%;min-width:0!important}
.vx-filter-row{display:flex;gap:8px}
.vx-filter-row > *{flex:1;min-width:0}
.vx-list-scroll{max-height:calc(100vh - var(--topbar-h) - 250px);min-height:180px;overflow-y:auto;margin:0 -4px;padding:0 4px}
.vx-sec{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);padding:10px 8px 4px;display:flex;justify-content:space-between;gap:8px}
.vx-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;text-decoration:none;color:inherit;min-width:0}
.vx-item:hover{background:var(--bg-subtle)}
.vx-item.on{background:var(--brand-bg)}
.vx-private .vx-item.on{background:var(--vx-accent-bg)}
.vx-private .card-head h2::before{background:var(--vx-accent)}
.vx-item .m{display:flex;flex-direction:column;min-width:0;flex:1}
.vx-item .t{font-weight:600;color:var(--heading);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-item .u{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-mfa{font-family:var(--mono);font-size:9px;letter-spacing:.05em;padding:1px 5px;border-radius:4px;border:1px solid var(--border);color:var(--muted);flex:none}
.vx-warn-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
.vx-detail .card:first-of-type{margin-top:0}
.vx-back{display:none}
.vx-dhead{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px}
.vx-dhead .m0{min-width:0;flex:1}
.vx-dhead h2{margin:0 0 5px;font-size:18px;padding-left:0;overflow-wrap:anywhere}
.vx-dhead h2::before{display:none}
.vx-dhead .m{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vx-dhead .a{display:flex;gap:8px;flex:none}
.vx-f{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border-soft)}
.vx-f[hidden]{display:none}
.vx-f .k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vx-f .v{font-size:13.5px;color:var(--heading);min-width:0;overflow-wrap:anywhere}
.vx-f .acts{display:flex;gap:6px}
.vx-notes{font-size:12.5px!important;color:var(--text)!important;white-space:pre-wrap}
.vx-mask{font-family:var(--mono);letter-spacing:3px;color:var(--heading)}
.vx-mask.shown{letter-spacing:.5px}
.vx-ib{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:0;text-decoration:none}
.vx-ib svg{width:14px;height:14px}
.vx-ib:hover{color:var(--heading);border-color:var(--border-strong)}
.vx-ib.done{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.vx-strength{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11px;color:var(--muted);min-height:4px}
.vx-strength.live:empty{display:none}
.vx-sbars{display:flex;gap:3px}
.vx-sbars i{width:26px;height:4px;border-radius:2px;background:var(--border)}
.vx-sbars.s1 i.on{background:var(--danger)}
.vx-sbars.s2 i.on{background:var(--warn)}
.vx-sbars.s3 i.on,.vx-sbars.s4 i.on{background:var(--ok)}
.vx-otp-big{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:4px;color:var(--heading);display:flex;align-items:center;gap:12px}
.vx-otp-big .s{font-size:11px;letter-spacing:0;font-weight:500;color:var(--muted)}
.vx-ring{width:20px;height:20px;color:var(--brand);flex:none}
.vx-otp-big.ending .vx-ring{color:var(--warn)}
.vx-private .vx-ring{color:var(--vx-accent)}
.vx-secbox{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid rgba(224,140,20,.35);margin-top:6px;flex-wrap:wrap}
.vx-secbox > svg{width:18px;height:18px;color:var(--warn);flex:none}
.vx-secbox b{color:var(--heading)}
.vx-secbox .txt{flex:1;min-width:200px;font-size:12.5px;color:var(--text)}
.vx-secbox .btn svg{width:14px;height:14px}
.vx-tl{display:flex;flex-direction:column}
.vx-tl .e{display:grid;grid-template-columns:16px 150px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;font-size:12.5px;min-height:40px}
.vx-tl .e i{width:8px;height:8px;border-radius:50%;background:var(--border-strong);justify-self:center}
.vx-tl .e.now i{background:var(--brand)}
.vx-private .vx-tl .e.now i{background:var(--vx-accent)}
.vx-tl .e .d{font-family:var(--mono);font-size:11px;color:var(--muted)}
.vx-tl .e .mask{font-family:var(--mono);letter-spacing:2px;min-width:0;overflow-wrap:anywhere}
.vx-tl .e .mask.shown{letter-spacing:.5px}
.vx-tl .e .acts{display:flex;gap:6px;align-items:center}
.vx-detail .card-sub,.vx-edit .card-sub{font-size:12px;color:var(--muted);margin-top:2px}
/* Sperrbildschirm */
.vx-lock-stage{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--topbar-h) - 120px);padding:20px 0}
.vx-lock-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:30px 30px 22px;text-align:center;box-shadow:0 18px 40px rgba(11,24,48,.08)}
.vx-lock-ic{width:58px;height:58px;border-radius:16px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--brand-bg);color:var(--brand-text)}
.vx-lock-ic svg{width:28px;height:28px}
.vx-private .vx-lock-ic{background:var(--vx-accent-bg);color:var(--vx-accent-text)}
.vx-lock-card h2{margin:0 0 6px;font-size:18px;padding-left:0;justify-content:center}
.vx-lock-card h2::before{display:none}
.vx-lock-card .sub{font-size:12.5px;color:var(--muted);margin:0 0 18px}
.vx-lock-field{position:relative;text-align:left;margin-bottom:10px}
.vx-lock-field input{width:100%;padding-right:44px;height:42px;font-size:14px}
.vx-lock-eye{position:absolute;right:6px;top:6px;border-color:transparent;background:transparent}
.vx-lock-card .btn{width:100%;justify-content:center;height:42px;margin-top:2px}
.vx-lock-card .btn svg{width:16px;height:16px}
.vx-lock-err{color:var(--danger);font-size:12.5px;margin-top:8px;min-height:1px}
.vx-lock-err:empty{display:none}
.vx-lock-warn{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.45}
.vx-lock-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);font-size:11.5px;color:var(--muted);text-align:left}
.vx-lock-foot svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.vx-lock-foot a{white-space:nowrap}
/* Bearbeiten */
.vx-edit{max-width:780px}
.vx-inline{display:flex;gap:8px;align-items:center}
.vx-inline input{flex:1;min-width:0}
.vx-pw-input[type="text"]{font-family:var(--mono);letter-spacing:.5px}
.vx-gen{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;background:var(--bg-subtle);margin-top:10px;font-size:12.5px}
.vx-gen-t{font-weight:600;color:var(--heading)}
.vx-gen-len{display:flex;align-items:center;gap:8px;margin:0;font-weight:500}
.vx-gen-len input[type=range]{width:170px;accent-color:var(--brand);padding:0;height:auto;border:0;background:transparent}
.vx-private .vx-gen-len input[type=range]{accent-color:var(--vx-accent)}
.vx-gen-len b{font-family:var(--mono);min-width:20px;color:var(--heading)}
.vx-gen .toggle-switch-row{margin:0}
.vx-gen .btn{margin-left:auto}
.vx-gen .btn svg{width:14px;height:14px}
@media screen and (max-width:1000px){
  .vx-split{grid-template-columns:minmax(0,1fr)}
  .vx-list{position:static}
  .vx-list-scroll{max-height:none}
  .vx-split.has-sel .vx-list{display:none}
  .vx-split:not(.has-sel) .vx-detail{display:none}
  .vx-back{display:inline-flex}
}
@media screen and (max-width:860px){
  .vx-f{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .vx-f .k{grid-column:1/-1}
  .vx-dhead{flex-wrap:wrap}
  .vx-dhead .a{width:100%}.vx-dhead .a .btn{flex:1}
  .vx-tl .e{grid-template-columns:16px minmax(0,1fr) auto}
  .vx-tl .e .mask{grid-column:2;grid-row:2}
  .vx-tl .e .acts{grid-column:3;grid-row:1/3}
  .vx-otp-big{font-size:19px;letter-spacing:3px}
  .vx-band{align-items:flex-start}
  .vx-gen .btn{margin-left:0}
  .vx-gen-len input[type=range]{width:130px}
  .vx-lock-card{padding:24px 20px 18px}
  .vx-lock-foot{flex-direction:column;align-items:flex-start}
}
/* ===== Schritt 30: Tresor-Bilder / Website-Logos ===== */
.vx-tile{position:relative;overflow:hidden}
.vx-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px;background:#fff;opacity:0;transition:opacity .15s;border-radius:inherit}
.vx-tile.lg img{padding:7px}
.vx-tile.has-img img{opacity:1}
.vx-tile.has-img{box-shadow:inset 0 0 0 1px var(--border);background:#fff}
.vx-tile.own img{padding:0;opacity:1;background:transparent}
.vx-icon-edit{display:flex;align-items:center;gap:14px;padding:10px 12px;border:1px dashed var(--border);border-radius:var(--r-sm);background:var(--bg-subtle)}
.vx-icon-edit.drag{border-color:var(--brand);background:var(--brand-bg)}
.vx-icon-prev{flex:none;display:inline-flex}
.vx-icon-ctrl{display:flex;flex-direction:column;gap:8px;min-width:0}
.vx-icon-btns{display:flex;gap:8px;flex-wrap:wrap}
.vx-icon-btns .btn svg{width:14px;height:14px}
.vx-icon-btns label.btn{cursor:pointer;margin:0}
.vx-icon-btns [hidden]{display:none}
.vx-icon-ctrl .toggle-switch-row{margin:0}
.vx-icon-hint{font-size:11.5px;color:var(--muted)}
@media screen and (max-width:860px){.vx-icon-edit{align-items:flex-start}}
/* ===== Schritt 32: Zwei-Faktor-Anmeldung ===== */
.mfa-box{max-width:420px}
.mfa-box h1{font-size:18px;margin:4px 0 4px}
.mfa-code{width:100%;height:46px;text-align:center;font-family:var(--mono);font-size:22px;letter-spacing:.3em;padding:0 10px}
.mfa-code.is-backup{letter-spacing:.12em;text-transform:uppercase;font-size:19px}
.mfa-trust{margin:10px 0 2px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.mfa-trust input{width:auto}
.mfa-links{display:flex;justify-content:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--text-soft)}
.mfa-links .link{cursor:pointer}
.mfa-steps{text-align:left;margin:14px 0 12px;padding-left:20px;font-size:12.5px;color:var(--text);line-height:1.5}
.mfa-qr{display:flex;justify-content:center;margin:6px 0 10px}
.mfa-qr svg{border-radius:10px;border:1px solid var(--border);background:#fff;padding:0;width:184px;height:184px}
.mfa-secret{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.mfa-secret .k{width:100%}
.mfa-secret code{font-family:var(--mono);font-size:12.5px;color:var(--heading);background:var(--bg-subtle);border:1px solid var(--border);border-radius:6px;padding:4px 8px;letter-spacing:.04em;word-break:break-all}
.mfa-account{font-size:11.5px;color:var(--text-soft);margin-top:6px}
.mfa-codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 10px}
.mfa-codes code{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--heading);background:var(--bg-subtle);border:1px solid var(--border);border-radius:7px;padding:8px 6px;text-align:center}
.mfa-code-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mfa-code-actions .btn svg{width:14px;height:14px}
#mfaRegenOverlay .mfa-code{margin-bottom:6px}
/* ===== Kippschalter-Animation (2026-09-21) ===== */
.toggle-switch-slider,.switch-slider{transition:background-color .22s ease,box-shadow .2s ease}
.toggle-switch-slider:before,.switch-slider:before{transition:transform .28s cubic-bezier(.34,1.45,.64,1),width .16s ease,left .16s ease}
.toggle-switch:active .toggle-switch-slider:before,.switch:active .switch-slider:before,.toggle-switch-row:active .toggle-switch-slider:before{width:18px}
.toggle-switch input:checked + .toggle-switch-slider:before,.switch input:checked + .switch-slider:before{transform:translateX(18px)}
.toggle-switch:active input:checked + .toggle-switch-slider:before,.switch:active input:checked + .switch-slider:before,.toggle-switch-row:active input:checked + .toggle-switch-slider:before{transform:translateX(14px)}
.toggle-switch.no-anim .toggle-switch-slider,.toggle-switch.no-anim .toggle-switch-slider:before,.switch.no-anim .switch-slider,.switch.no-anim .switch-slider:before{transition:none!important}
@media (prefers-reduced-motion: reduce){
  .toggle-switch-slider,.switch-slider,.toggle-switch-slider:before,.switch-slider:before{transition:none}
}
/* ===== Schritt 34: Interessenten in der Kundenverwaltung (2026-09-21) ===== */
.ld-pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}
.ld-pipe .st{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;position:relative;overflow:hidden;text-align:left;font:inherit;color:inherit}
.ld-pipe button.st{cursor:pointer}
.ld-pipe button.st:hover{border-color:var(--border-strong)}
.ld-pipe .st:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.ld-pipe .st.on{border-color:var(--brand);box-shadow:var(--focus)}
.ld-pipe .st .l{font-size:11.5px;color:var(--muted)}
.ld-pipe .st .v{font-size:19px;font-weight:700;color:var(--heading);margin-top:2px}
.ld-pipe .st .s{font-size:11px;color:var(--muted);margin-top:1px;min-height:14px}
.ld-stage{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--bg-2);color:var(--text);white-space:nowrap}
.ld-stage i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.ld-rel{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;line-height:1.5}
.ld-rel.k{background:var(--brand-bg);color:var(--brand-text)}
.ld-rel.i{background:#FFF1DB;color:#8a5300}
.ld-rel.e{background:var(--bg-2);color:var(--muted)}
.ld-rel.l{background:var(--danger-bg,#FDECEC);color:var(--danger)}
[data-theme="dark"] .ld-rel.i{background:rgba(224,140,20,.16);color:#FFC061}
[data-theme="dark"] .ld-rel.l{background:rgba(220,60,60,.16);color:#FF9A9A}
.ld-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ld-toolbar > :first-child{flex:1;min-width:220px}
.ld-firm{display:flex;align-items:center;gap:10px;min-width:0}
.ld-firm .t{font-weight:600;color:var(--heading)}
.ld-firm .u{font-size:11.5px;color:var(--muted)}
.ld-firm .avatar.xs{width:28px;height:28px;font-size:10px}
.ld-next{font-size:12.5px;line-height:1.35}
.ld-next .d{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ld-next.over .d{color:var(--danger);font-weight:600}
.ld-next.over .d:before{content:"● "}
.ld-next.today .d{color:var(--brand-text);font-weight:600}
.ld-offer{font-family:var(--mono);font-size:11.5px;color:var(--heading);white-space:nowrap}
.ld-offer .a{display:block;font-family:var(--font);font-size:11px;color:var(--muted)}
.ld-muted{color:var(--muted)}
.ld-nonext{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--bg-2);color:var(--muted);white-space:nowrap}
.ld-lost-row td{opacity:.62}
.ld-num{font-family:var(--mono);font-size:12px}
/* Detail */
.ld-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.ld-head .avatar{width:52px;height:52px;font-size:17px;background:#FFF1DB;color:#8a5300}
[data-theme="dark"] .ld-head .avatar{background:rgba(224,140,20,.16);color:#FFC061}
.ld-head h1{margin:0 0 6px;font-size:22px}
.ld-head .m{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ld-head .acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ld-head .acts .btn svg{width:15px;height:15px}
.ld-stepper{display:flex;align-items:center;margin:4px 0 18px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:10px 16px;gap:0}
.ld-stepper .s{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap;background:none;border:0;font-family:inherit;padding:4px 2px;cursor:pointer;border-radius:6px}
.ld-stepper .s:hover{color:var(--heading)}
.ld-stepper .s.goal{cursor:default}
.ld-stepper .s .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--card);flex:none}
.ld-stepper .s .dot svg{width:12px;height:12px}
.ld-stepper .s.done .dot{background:var(--brand);border-color:var(--brand);color:#fff}
.ld-stepper .s.cur .dot{border-color:var(--brand);color:var(--brand-text);box-shadow:0 0 0 4px var(--brand-bg)}
.ld-stepper .s.cur{color:var(--heading);font-weight:600}
.ld-stepper .s.goal .dot{border-style:dashed}
.ld-stepper .ln{flex:1;height:2px;background:var(--border);margin:0 10px;min-width:14px}
.ld-stepper .ln.done{background:var(--brand)}
.ld-stepper .lost{margin-left:16px;padding-left:16px;border-left:1px solid var(--border-soft);font-size:12px;background:none;border-top:0;border-right:0;border-bottom:0;color:var(--danger);cursor:pointer;font-family:inherit;white-space:nowrap}
.ld-lostbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r);border:1px solid rgba(180,35,24,.25);background:var(--danger-bg,#FDECEC);margin:4px 0 18px;font-size:12.5px}
.ld-lostbox .btn{margin-left:auto}
[data-theme="dark"] .ld-lostbox{background:rgba(220,60,60,.1)}
.ld-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.ld-nextcard{border-color:var(--brand-line,var(--border));background:var(--brand-bg)}
.ld-nextcard .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ld-nextcard .when{font-family:var(--mono);font-size:12px;color:var(--brand-text);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ld-nextcard.over .when{color:var(--danger)}
.ld-nextcard .what{font-size:14px;color:var(--heading);font-weight:600;margin-top:2px}
.ld-nextcard .row .btns{margin-left:auto;display:flex;gap:6px}
.ld-nextcard .btn svg{width:14px;height:14px}
.ld-nextcard.empty{background:var(--card);border-style:dashed}
.ld-quick{display:flex;gap:6px;margin:4px 0 10px;flex-wrap:wrap}
.ld-quick .btn svg{width:14px;height:14px}
.ld-act{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:10px 0;border-top:1px solid var(--border-soft)}
.ld-act .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--muted)}
.ld-act .ic svg{width:15px;height:15px}
.ld-act .h{font-size:12.5px;color:var(--heading);font-weight:600}
.ld-act .h span{font-weight:400;color:var(--muted);font-size:11.5px;margin-left:6px}
.ld-act .b{font-size:12.5px;color:var(--text);margin-top:2px;white-space:pre-wrap;overflow-wrap:anywhere}
.ld-act .x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;border-radius:4px;align-self:start}
.ld-act .x:hover{color:var(--danger);background:var(--bg-2)}
.ld-act.clickable{cursor:pointer}
.ld-kv{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px 12px;font-size:12.5px}
.ld-kv .k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.ld-kv .v{color:var(--heading);overflow-wrap:anywhere}
.ld-offerrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border-soft);font-size:12.5px;cursor:pointer}
.ld-offerrow:first-of-type{border-top:0}
.ld-offerrow svg{width:16px;height:16px;color:var(--muted);flex:none}
.ld-offerrow .r{margin-left:auto;text-align:right;font-weight:700;color:var(--heading);white-space:nowrap}
.ld-offerrow .r span{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.ld-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--ok-bg);border:1px solid rgba(30,122,70,.25);font-size:12.5px;color:var(--text);margin-bottom:14px;flex-wrap:wrap}
.ld-banner > svg{width:18px;height:18px;color:var(--ok);flex:none}
.ld-banner .btn{margin-left:auto}
.ld-will{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;margin-bottom:14px}
.ld-will ul{margin:6px 0 0;padding-left:18px}
.ld-will li{margin:3px 0}
.ld-will b{color:var(--heading)}
@media (max-width:1000px){
  .ld-grid{grid-template-columns:minmax(0,1fr)}
  .ld-pipe{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  #leadsDesktopTableWrap,#allCustDesktopTableWrap{display:none}
  .ld-pipe{display:flex;overflow-x:auto;gap:8px;margin-left:-2px;padding:2px 2px 4px;scrollbar-width:none}
  .ld-pipe::-webkit-scrollbar{display:none}
  .ld-pipe .st{flex:0 0 136px}
  .ld-toolbar .seg button{white-space:nowrap}
  .ld-head .acts{margin-left:0;width:100%}
  .ld-head .acts .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
  .ld-head .acts .btn:last-child{order:-1;flex-basis:100%}
  .ld-stepper{overflow-x:auto;padding:10px 12px}
  .ld-stepper .s .lbl{display:none}
  .ld-stepper .s.cur .lbl{display:inline}
  .ld-toolbar .seg{width:100%;overflow-x:auto}
}
/* ===== Schritt 35: Berichte zu einem Ticket – Zeitleiste (Variante A, 2026-09-21) ===== */
.rb-sub{font-size:12px;color:var(--muted);margin:-12px 0 14px}
.rb-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rb-sum .sp{flex:1}
.rb-sum .btn svg{width:15px;height:15px}
.rb-kpi{display:flex;flex-direction:column;padding:7px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-subtle);min-width:88px}
.rb-kpi .v{font-size:17px;font-weight:700;color:var(--heading);line-height:1.2;white-space:nowrap}
.rb-kpi .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rb-kpi.warn .v{color:#8a5300}
[data-theme="dark"] .rb-kpi.warn .v{color:#FFC061}
.rb-frow{display:flex;gap:10px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.rb-frow .rb-q{flex:1;min-width:180px;height:34px}
.rb-st{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.rb-st svg{width:11px;height:11px}
.rb-st.o{background:#FFF1DB;color:#8a5300}
[data-theme="dark"] .rb-st.o{background:rgba(224,140,20,.16);color:#FFC061}
.rb-st.c{background:var(--ok-bg);color:var(--ok)}
.rb-time{font-family:var(--mono);font-size:11.5px;color:var(--heading);background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:2px 7px;white-space:nowrap}
.rb-month{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:16px 0 4px 36px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rb-month b{color:var(--heading);font-weight:600}
.rb-group:first-child .rb-month{margin-top:8px}
.rb-tl{position:relative}
.rb-tl:before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:var(--border)}
.rb-it{position:relative;display:grid;grid-template-columns:24px 54px minmax(0,1fr) auto;gap:0 12px;padding:12px 0}
.rb-it + .rb-it{border-top:1px dashed var(--border-soft)}
.rb-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--brand);background:var(--card);margin:14px 0 0 5px;position:relative;z-index:1}
.rb-it.closed .rb-dot{background:var(--ok);border-color:var(--ok)}
.rb-date{text-align:center;padding-top:2px}
.rb-date .d{font-size:22px;font-weight:700;color:var(--heading);line-height:1}
.rb-date .m{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:4px;white-space:nowrap}
.rb-body{min-width:0}
.rb-body .top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.rb-body .top .who{font-size:11.5px;color:var(--muted)}
.rb-subj{font-size:13px;font-weight:600;color:var(--heading);margin-bottom:4px}
.rb-ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.5;color:var(--text)}
.rb-ul li{position:relative;padding-left:14px;margin:2px 0;overflow-wrap:anywhere}
.rb-ul li:before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--brand-line)}
.rb-ul li[hidden]{display:none}
.rb-more{background:none;border:0;padding:4px 0 0 14px;font:inherit;font-size:12px;color:var(--brand-text);font-weight:600;cursor:pointer}
.rb-details{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.rb-empty{font-size:12.5px;color:var(--muted)}
.rb-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.rb-side .h{font-size:15px;font-weight:700;color:var(--heading);white-space:nowrap}
.rb-side .h span{font-size:11px;font-weight:500;color:var(--muted);margin-left:3px}
.rb-acts{display:flex;gap:2px;align-items:center}
.rb-acts .ib,.rb-dd > summary{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;padding:0}
.rb-acts .ib:hover,.rb-dd > summary:hover,.rb-dd[open] > summary{background:var(--bg-2);color:var(--heading);border-color:var(--border)}
.rb-acts .ib svg,.rb-dd > summary svg{width:15px;height:15px}
.rb-dd{position:relative}
.rb-dd > summary{list-style:none}
.rb-dd > summary::-webkit-details-marker{display:none}
.rb-menu{position:absolute;right:0;top:34px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-elevated);padding:5px;min-width:220px;z-index:20}
.rb-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;border-radius:6px;font:inherit;font-size:12.5px;color:var(--text);cursor:pointer;text-align:left}
.rb-menu button:hover{background:var(--bg-2)}
.rb-menu button svg{width:14px;height:14px;color:var(--muted);flex:none}
.rb-menu hr{border:0;border-top:1px solid var(--border-soft);margin:4px 2px}
.rb-menu .danger,.rb-menu .danger svg{color:var(--danger)}
.rb-it[hidden],.rb-group[hidden]{display:none}
@media (max-width:640px){
  .rb-sum .sp{display:none}
  .rb-sum{gap:8px}
  .rb-sum .btn{flex:1 1 40%;justify-content:center}
  .rb-kpi{flex:1 1 26%;min-width:0;padding:6px 10px}
  .rb-kpi .v{font-size:15px}
  .rb-kpi .l{white-space:normal}
  .rb-frow .seg{width:100%;overflow-x:auto}
  .rb-frow .seg button{white-space:nowrap}
  .rb-tl:before{display:none}
  .rb-month{margin-left:0}
  .rb-it{grid-template-columns:44px minmax(0,1fr);gap:0 10px}
  .rb-dot{display:none}
  .rb-side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;margin-top:8px}
}
.rb-it.rb-focus{background:var(--brand-bg);box-shadow:0 0 0 2px var(--brand-line);border-radius:var(--r-sm);transition:background .6s ease,box-shadow .6s ease}
.rb-it{transition:background .6s ease,box-shadow .6s ease}
/* ===== Kopfzeile (2026-09-21): Suchfeld ohne geerbten Label-Abstand, sauber mittig ===== */
.gsearch-input{margin:0}
.gsearch{align-self:center}
@media screen and (max-width:560px){ .top-actions .icon-btn{width:36px;height:36px} .top-actions .avatar.sm{width:34px;height:34px} }
/* ===== Tresor-Sperrbildschirm (2026-09-21): auf breiten Bildschirmen mittig in der ganzen Arbeitsfläche ===== */
main:has(> .vx-lock-stage),main:has(.vx-lock-stage){max-width:none}
.vx-lock-stage{min-height:calc(100vh - var(--topbar-h) - 82px);padding:0}
/* ===== Schritt 38: Einstellungen – Seitennavigation, Übersicht, gegliederte Formulare ===== */
.st-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.st-nav{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:10px 8px;position:sticky;top:calc(var(--topbar-h) + 12px);max-height:calc(100vh - var(--topbar-h) - 24px);overflow:auto}
.st-nav .srch{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--r-sm);padding:0 10px;height:34px;color:var(--muted);margin:2px 4px 8px;background:var(--bg-subtle)}
.st-nav .srch svg{width:14px;height:14px}
.st-nav .srch input{border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important;font-size:12.5px;min-width:0;flex:1;height:32px}
.st-nav .g{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft);padding:10px 10px 4px}
.st-nav .i{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--text);cursor:pointer;text-decoration:none}
.st-nav .i svg{width:15px;height:15px;color:var(--muted)}
.st-nav .i:hover{background:var(--bg-2)}
.st-nav .i.on{background:var(--brand-bg);color:var(--brand-text);font-weight:600}
.st-nav .i.on svg{color:var(--brand-text)}
.st-nav .i .r{margin-left:auto;font-size:10.5px;color:var(--muted)}
.st-nav .i .dot{width:7px;height:7px;border-radius:50%;background:#E3A008;margin-left:auto;flex:none}
.st-nav .i .r + .dot{margin-left:6px}
.st-nav .i .dot.ok{background:var(--ok)}.st-nav .i .dot.bad{background:var(--bad)}
.st-nav [hidden]{display:none !important}
.st-main{min-width:0}
.st-h{display:flex;align-items:flex-end;gap:12px;margin-bottom:14px}
.st-h h2{margin:0;font-size:18px;padding:0}.st-h h2:before{display:none}
.st-h .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.st-h2row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 12px}
.st-h2row .r{margin-left:auto;display:flex;gap:8px}
.st-h2row .btn svg{width:14px;height:14px}
.st-card .card-head h2{font-size:14px}
.st-setup{display:grid;grid-template-columns:170px minmax(0,1fr);gap:22px;align-items:center}
.st-ring{--p:0;width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--brand) calc(var(--p) * 1%), var(--bg-2) 0);display:flex;align-items:center;justify-content:center;margin:0 auto}
.st-ring > div{width:110px;height:110px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center}
.st-ring b{font-size:26px;color:var(--heading)}.st-ring span{font-size:11px;color:var(--muted)}
.st-chk{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.st-chk .c{display:flex;align-items:center;gap:9px;font:inherit;font-size:12.5px;padding:8px 0;border:0;border-bottom:1px dashed var(--border-soft);background:none;color:var(--text);text-align:left;cursor:pointer;min-width:0}
.st-chk .c:hover .t{color:var(--link)}
.st-chk .c .ic{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ok-bg);color:var(--ok);flex:none}
.st-chk .c .ic svg{width:12px;height:12px}
.st-chk .c.w .ic{background:#FFF1DB;color:#8a5300}
[data-theme="dark"] .st-chk .c.w .ic{background:rgba(224,140,20,.16);color:#FFC061}
.st-chk .c .a{margin-left:auto;font-size:11.5px;color:var(--brand-text);font-weight:600;white-space:nowrap}
.st-chk .c .m{color:var(--muted);font-size:11.5px;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px}
.st-int{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.st-int .t{border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;background:var(--card);cursor:pointer;text-align:left;font:inherit;color:inherit}
.st-int .t:hover{border-color:var(--border-strong)}
.st-int .hd{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--heading);font-size:13px}
.st-int .hd .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-int .hd .ic{width:30px;height:30px;border-radius:8px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.st-int .hd .ic svg{width:16px;height:16px}
.st-int .s{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.st-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.st-int .st-pill{margin-left:auto}
.st-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-pill.ok{background:var(--ok-bg);color:var(--ok)}.st-pill.w{background:#FFF1DB;color:#8a5300}.st-pill.off{background:var(--bg-2);color:var(--muted)}.st-pill.bad{background:var(--bad-bg);color:var(--bad)}
[data-theme="dark"] .st-pill.w{background:rgba(224,140,20,.16);color:#FFC061}
.st-cron{margin-top:14px;border-top:1px solid var(--border-soft);padding-top:10px}
.st-cron summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--heading)}
.st-cron table{margin-top:8px}
.st-log .r{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border-soft);font-size:12.5px}
.st-log .r:first-child{border-top:0}
.st-log .r b{color:var(--heading)}
.st-log .r .w{color:var(--muted);font-size:11.5px;margin-left:auto;white-space:nowrap;padding-left:10px}
.st-company{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;align-items:start}
.st-form-card{margin:0}
.st-fsec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:16px 0;border-top:1px solid var(--border-soft)}
.st-fsec:first-child{border-top:0;padding-top:2px}
.st-fsec .l h3{margin:0 0 4px;font-size:13.5px;color:var(--heading)}
.st-fsec .l p{margin:0;font-size:12px;color:var(--muted);line-height:1.45}
.st-fsec .form-grid{margin:0}
.st-hide-submit{display:none}
.st-dirty input,.st-dirty select,.st-dirty textarea,.st-dirty .msel-btn,input.st-dirty,textarea.st-dirty{border-color:#E3A008 !important;box-shadow:0 0 0 3px rgba(227,160,8,.15) !important}
.st-logo{display:flex;align-items:center;gap:14px;border:1.5px dashed var(--border-strong);border-radius:var(--r);padding:12px 14px;background:var(--bg-subtle);flex-wrap:wrap}
.st-logo.st-dirty{border-color:#E3A008}
.st-logo .pv{width:180px;height:56px;border-radius:8px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:8px}
.st-logo .pv img{max-width:100%;max-height:100%}
.st-logo .t{font-size:12px;color:var(--muted);line-height:1.6}
.st-preview-col{position:sticky;top:calc(var(--topbar-h) + 12px)}
.st-pvh{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.st-a4{background:#fff;color:#333;border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 20px rgba(11,24,48,.08);padding:16px 16px 10px;font-size:7.5px;line-height:1.35;aspect-ratio:1/1.3;display:flex;flex-direction:column}
.st-a4 .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.st-a4 .top img{max-width:96px;max-height:34px}
.st-a4 .tt{font-weight:700;font-size:10px;color:#0B1830;text-align:right}.st-a4 .tt span{font-weight:400;font-size:6.5px;color:#888}
.st-a4 .sender{margin-top:14px;font-size:6px;color:#999}
.st-a4 .rcpt{margin-top:4px;font-size:7.5px}
.st-a4 .lines{margin-top:12px}.st-a4 .lines i{display:block;height:5px;background:#EEF1F5;border-radius:3px;margin:5px 0}
.st-a4 .note{margin-top:8px;font-size:6.5px;color:#555;white-space:pre-wrap}
.st-a4 .ft{margin-top:auto;border-top:1px solid #E5E9EF;padding-top:6px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;color:#666;font-size:6px;line-height:1.35}
.st-a4 .hl,.st-a4 img.hl{background:#FFF1DB;outline:1.5px solid #E3A008;border-radius:3px}
.st-savebar{position:sticky;bottom:12px;z-index:30;margin-top:16px;display:flex;align-items:center;gap:10px;background:#0B1830;color:#fff;border-radius:12px;padding:10px 12px 10px 16px;box-shadow:0 12px 30px rgba(11,24,48,.3);font-size:12.5px}
.st-savebar.hidden{display:none}
.st-savebar .dt{width:8px;height:8px;border-radius:50%;background:#FFC061}
.st-savebar .sp{flex:1}
.st-savebar .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.st-callout{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;background:#FFFAF0;border:1px solid #F3C77A;font-size:12.5px;margin-bottom:14px}
.st-callout svg{width:18px;height:18px;color:#8a5300;flex:none}
[data-theme="dark"] .st-callout{background:rgba(224,140,20,.08);border-color:rgba(224,140,20,.35)}
.st-utbl .st-u{display:flex;align-items:center;gap:10px}.st-u b{color:var(--heading)}.st-u span{display:block;font-size:11.5px;color:var(--muted)}
.st-utbl tr.off td{opacity:.55}
.st-utbl td.acts{text-align:right;white-space:nowrap}
.st-utbl td.acts .ib,.st-utbl .rb-dd > summary{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;padding:0;vertical-align:middle}
.st-utbl td.acts .ib:hover,.st-utbl .rb-dd > summary:hover{background:var(--bg-2);color:var(--heading)}
.st-utbl td.acts svg{width:15px;height:15px}
.st-utbl .rb-dd{display:inline-block;text-align:left}
.st-role{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--bg-2);color:var(--text);white-space:nowrap}
.st-role.sa{background:#0B1830;color:#fff}.st-role.ad{background:var(--brand-bg);color:var(--brand-text)}.st-role.bu{background:#EDE7FE;color:#6D3FD8}
[data-theme="dark"] .st-role.sa{background:#fff;color:#0B1830}
.st-roles{font-size:12.5px}.st-roles td,.st-roles th{text-align:center}.st-roles td:first-child,.st-roles th:first-child{text-align:left}
.st-roles .yes{color:var(--ok);font-weight:700}.st-roles .no{color:var(--text-soft)}
.st-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.st-kpis > div{border:1px solid var(--border-soft);border-radius:8px;padding:10px 12px}
.st-kpis b{display:block;font-size:18px;color:var(--heading)}.st-kpis span{font-size:11.5px;color:var(--muted)}
.st-kv{display:grid;grid-template-columns:190px minmax(0,1fr);gap:8px 14px;font-size:12.5px}
.st-kv .k{color:var(--muted)}.st-kv .v{color:var(--heading)}
@media (max-width:1100px){ .st-company{grid-template-columns:minmax(0,1fr)} .st-preview-col{position:static;max-width:320px} .st-int{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .st-layout{grid-template-columns:minmax(0,1fr)}
  /* Schritt 41: Navigation als Auswahlfeld (siehe .mdd unten) statt seitlich wischbarer Leiste */
  .st-setup{grid-template-columns:minmax(0,1fr)}
  .st-chk{grid-template-columns:minmax(0,1fr)}
  .st-int{grid-template-columns:minmax(0,1fr)}
  .st-fsec{grid-template-columns:minmax(0,1fr);gap:8px}
  .st-kpis{grid-template-columns:minmax(0,1fr)}
  .st-kv{grid-template-columns:minmax(0,1fr);gap:2px 0}.st-kv .v{margin-bottom:8px}
  .st-log .r{flex-wrap:wrap}.st-log .r .w{margin-left:34px;padding-left:0}
  .st-savebar{bottom:76px}
}
/* ===== Schritt 39: Aufträge – Liste mit Kennzahlen, Detail als Cockpit ===== */
.od-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.od-kpis .k{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;position:relative;overflow:hidden}
.od-kpis .k:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--brand))}
.od-kpis .k .l{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.od-kpis .k .v{font-size:21px;font-weight:700;color:var(--heading);margin-top:3px;white-space:nowrap}
.od-kpis .k .s{font-size:11.5px;color:var(--muted);margin-top:1px}
.od-kpis .k .s b{color:var(--bad)}
.od-bar-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.od-bar-row > :first-child{flex:1;min-width:220px}
.od-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.od-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--border);background:var(--card);font:inherit;font-size:12px;color:var(--text);font-weight:500;cursor:pointer}
.od-chip b{font-weight:700;color:var(--heading)}
.od-chip:hover{border-color:var(--border-strong)}
.od-chip.on{background:var(--brand-bg);border-color:var(--brand-line);color:var(--brand-text)}
.od-chip.red b{color:var(--bad)}
.od-chip:disabled{opacity:.5;cursor:default}
.od-tbl .ttl b{color:var(--heading);display:block}
.od-tbl .ttl .no{font-family:var(--mono);font-size:11px;color:var(--muted)}
.od-st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--bg-2);white-space:nowrap;color:var(--text)}
.od-st i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.od-prog{width:110px}
.od-prog .t{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:4px;gap:6px}
.od-prog .t b{color:var(--heading);font-weight:600;white-space:nowrap}
.od-bar{height:6px;border-radius:4px;background:var(--bg-2);overflow:hidden;display:flex}
.od-bar i{display:block;height:100%;background:var(--brand)}
.od-bar i.ok{background:var(--ok)}.od-bar i.w{background:#E3A008}.od-bar i.bad{background:var(--bad)}
.od-tbl .money{text-align:right;white-space:nowrap}
.od-tbl .money b{color:var(--heading);display:block}
.od-tbl .money span{font-size:11px;color:var(--muted)}
.od-tbl .money .od-bar{margin-top:4px;width:96px;margin-left:auto}
.od-due{font-size:12px;white-space:nowrap}
.od-due span{display:block;font-size:11px;color:var(--muted)}
.od-due.over{color:var(--bad);font-weight:600}.od-due.over span{color:var(--bad);font-weight:500}
.od-due.soon span{color:#8a5300}
.od-over{color:var(--bad)}
.od-flag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;color:#8a5300;background:#FFF1DB;border-radius:999px;padding:1px 7px;margin-top:4px;white-space:nowrap}
[data-theme="dark"] .od-flag{background:rgba(224,140,20,.16);color:#FFC061}
.od-mono{font-family:var(--mono)}
.od-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.od-head .ic{width:52px;height:52px;border-radius:14px;background:var(--brand-bg);color:var(--brand-text);display:flex;align-items:center;justify-content:center;flex:none}
.od-head .ic svg{width:24px;height:24px}
.od-head h1{margin:0 0 6px;font-size:22px}
.od-head .m{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.od-head .acts{margin-left:auto;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.od-head .acts .btn svg{width:15px;height:15px}
.od-dd{position:relative}
.od-dd > summary{list-style:none;display:inline-flex;align-items:center;gap:6px}
.od-dd > summary::-webkit-details-marker{display:none}
.od-dd .rb-menu{top:42px}
.od-step{display:flex;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:8px 16px;margin-bottom:14px}
.od-step .s{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap;border:0;background:none;font-family:inherit;cursor:pointer;padding:4px 2px;border-radius:6px}
.od-step .s:hover{color:var(--heading)}
.od-step .s .d{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--card)}
.od-step .s .d svg{width:12px;height:12px}
.od-step .s.done .d{background:var(--brand);border-color:var(--brand);color:#fff}
.od-step .s.cur .d{border-color:var(--brand);color:var(--brand-text);box-shadow:0 0 0 4px var(--brand-bg)}
.od-step .s.cur{color:var(--heading);font-weight:600}
.od-step .ln{flex:1;height:2px;background:var(--border);margin:0 12px;min-width:14px}.od-step .ln.done{background:var(--brand)}
.od-step .hint2{margin-left:18px;padding-left:16px;border-left:1px solid var(--border-soft);font-size:12px;color:var(--muted);white-space:nowrap}
.od-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.od-tiles .t{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;min-width:0}
.od-tiles .t .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.od-tiles .t .v{font-size:18px;font-weight:700;color:var(--heading);margin:3px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-tiles .t .s{font-size:11px;color:var(--muted)}
.od-tiles .t .od-bar{margin-top:7px}
.od-tiles .t.warn{border-color:#F3C77A;background:#FFFAF0}.od-tiles .t.warn .v{color:#8a5300}
.od-tiles .t.bad{border-color:var(--danger-border)}.od-tiles .t.bad .v{color:var(--bad)}
[data-theme="dark"] .od-tiles .t.warn{background:rgba(224,140,20,.08);border-color:rgba(224,140,20,.35)}[data-theme="dark"] .od-tiles .t.warn .v{color:#FFC061}
.od-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.od-chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
.od-chain .n{position:relative;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--bg-subtle);cursor:pointer;min-width:0}
.od-chain .n:hover{border-color:var(--border-strong)}
.od-chain .n:not(:last-child):after{content:"";position:absolute;right:-18px;top:50%;width:14px;height:2px;background:var(--border-strong)}
.od-chain .n .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.od-chain .n .no{font-family:var(--mono);font-size:12px;color:var(--heading);font-weight:600;margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-chain .n .x{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted);gap:6px}
.od-chain .n.miss{border-style:dashed;background:transparent;cursor:default}
.od-chain .n.miss .no{color:var(--muted);font-family:var(--font);font-weight:500}
.od-chain .n.miss .link{font-weight:600;cursor:pointer}
.od-bs{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap}
.od-bs.ok{background:var(--ok-bg);color:var(--ok)}.od-bs.w{background:#FFF1DB;color:#8a5300}.od-bs.b{background:var(--brand-bg);color:var(--brand-text)}.od-bs.off{background:var(--bg-2);color:var(--muted)}
.od-trow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--border-soft);font-size:12.5px;cursor:pointer}
.od-trow:first-of-type{border-top:0}
.od-trow b{color:var(--heading);font-weight:600}.od-trow .no{font-family:var(--mono);font-size:11px;color:var(--muted);margin-right:6px}
.od-trow .h{font-size:12px;color:var(--muted);white-space:nowrap}
.od-eff{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.od-eff > div{border:1px solid var(--border-soft);border-radius:8px;padding:9px 11px}
.od-eff .l{font-size:11px;color:var(--muted)}.od-eff .v{font-size:15px;font-weight:700;color:var(--heading)}
.od-callout{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;background:#FFFAF0;border:1px solid #F3C77A;font-size:12.5px;flex-wrap:wrap}
.od-callout svg{width:18px;height:18px;color:#8a5300;flex:none}
.od-callout .btn{margin-left:auto}
[data-theme="dark"] .od-callout{background:rgba(224,140,20,.08);border-color:rgba(224,140,20,.35)}
.od-kv{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px 12px;font-size:12.5px}
.od-kv .k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.od-kv .v{color:var(--heading);overflow-wrap:anywhere}
.od-kv .od-desc{color:var(--text);white-space:pre-wrap}
.od-act{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;padding:6px 0;font-size:12.5px}
.od-act .d{width:8px;height:8px;border-radius:50%;background:var(--brand-line);margin-top:6px}
.od-act .w{font-size:11px;color:var(--muted);white-space:nowrap}
@media (max-width:1200px){ .od-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1000px){ .od-grid{grid-template-columns:minmax(0,1fr)} .od-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .od-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .od-head .acts{margin-left:0;width:100%}
  .od-step{overflow-x:auto}.od-step .hint2{display:none}
  .od-chain{grid-template-columns:minmax(0,1fr);gap:10px}
  .od-chain .n:not(:last-child):after{display:none}
  .od-eff{grid-template-columns:minmax(0,1fr)}
  .od-kpis .k .v{font-size:18px}
}
@media (max-width:560px){ .od-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .od-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .od-tiles .t .v{font-size:15px} .od-head .ic{display:none} }
.st-u .avatar{flex:none;align-self:center}

/* ---------- Schritt 40: Rollen & Rechte ---------- */
.rr-chip{display:inline-flex;align-items:center;gap:6px}
.rr-chip i{width:8px;height:8px;border-radius:2px;flex:none;display:inline-block}
.pl-seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px}
.pl-seg button{font:inherit;font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:6px;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;cursor:pointer;margin:0;min-height:0;box-shadow:none}
.pl-seg button:hover:not(:disabled){color:var(--heading)}
.pl-seg button svg{width:12px;height:12px;flex:none}
.pl-seg button.on{background:var(--card);color:var(--heading);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pl-seg button.on.n{color:var(--muted)}
.pl-seg button.on.r{color:#2359BF}
.pl-seg button.on.w{color:#1E7A46}
[data-theme="dark"] .pl-seg button.on.r{color:#8DB4FF}
[data-theme="dark"] .pl-seg button.on.w{color:#6FD39A}
.pl-seg.lock{opacity:.55}
.pl-seg button:disabled{cursor:not-allowed}
.rl{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.rl > .card{margin:0}
.rlist{padding:10px}
.rlist .it{display:flex;width:100%;text-align:left;font:inherit;background:transparent;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;cursor:pointer;color:inherit;margin:0;min-height:0;box-shadow:none}
.rlist .it + .it{margin-top:4px}
.rlist .it:hover{background:var(--bg-2)}
.rlist .it.on{background:var(--brand-bg);border-color:var(--brand-line)}
.rlist .it .sw{width:10px;height:10px;border-radius:3px;flex:none}
.rlist .it > div{min-width:0}
.rlist .it b{display:block;color:var(--heading);font-size:13px}
.rlist .it div span{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlist .it .n{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.rlist .it .lk{margin-left:auto;color:var(--muted);display:inline-flex}.rlist .it .lk svg{width:13px;height:13px}
.rlist .new{display:flex;width:100%;font:inherit;background:transparent;align-items:center;gap:8px;justify-content:center;border:1.5px dashed var(--border-strong);border-radius:10px;padding:10px;margin-top:10px;font-size:12.5px;color:var(--brand-text);font-weight:600;cursor:pointer;box-shadow:none}
.rlist .new:hover{background:var(--brand-bg)}
.rlist .new svg{width:14px;height:14px}
.rhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.rhead h3{margin:0;font-size:17px;color:var(--heading);display:flex;align-items:center;gap:8px}
.rhead h3 .sw{width:12px;height:12px;border-radius:3px}
.rhead p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.rhead .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.rhead .st-pill{background:var(--bg-2);color:var(--muted)}.rhead .st-pill svg{width:12px;height:12px}
.rr-del{color:var(--danger)}
.rr-del:disabled{opacity:.4;cursor:not-allowed}
.rr-tblwrap{overflow-x:auto}
.ptbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ptbl td{padding:8px 10px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.ptbl tr.grp td{background:var(--bg-subtle);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:7px 10px}
.ptbl tr.grp td .qs{float:right;font-family:var(--font);text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--muted)}
.ptbl tr.grp td .qs button{font:inherit;background:none;border:0;padding:0;margin:0 0 0 10px;color:var(--brand-text);font-weight:600;cursor:pointer;min-height:0;box-shadow:none}
.ptbl tr.grp td .qs button:hover{text-decoration:underline}
.ptbl td.nm b{color:var(--heading);font-weight:600}
.ptbl td.nm span{display:block;font-size:11px;color:var(--muted)}
.ptbl td.pc{text-align:right;width:290px}
.ptbl tr.ch td{background:#FFFBF2}
[data-theme="dark"] .ptbl tr.ch td{background:rgba(224,140,20,.07)}
.ptbl tr.ch td.nm b:after{content:"geändert";margin-left:8px;font-size:9.5px;font-weight:600;color:#8a5300;background:#FFF1DB;border-radius:999px;padding:1px 6px;vertical-align:middle}
.rr-flags{margin-top:14px}
.rr-flags .pvh{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.xr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;padding:4px 0 2px}
.xr label{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text);font-weight:400;margin:0;border-radius:8px;padding:3px 4px}
.xr label.ch{background:#FFFBF2}
[data-theme="dark"] .xr label.ch{background:rgba(224,140,20,.07)}
.xr label span.h{display:block;font-size:11px;color:var(--muted)}
.xr .toggle-switch{flex:none}
.warnbox{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:#FFFAF0;border:1px solid #F3C77A;font-size:12px;margin-top:12px}
.warnbox svg{width:16px;height:16px;color:#8a5300;flex:none;margin-top:1px}
[data-theme="dark"] .warnbox{background:rgba(224,140,20,.08);border-color:rgba(224,140,20,.35)}
.rr-main .st-callout svg{width:16px;height:16px;flex:none}
.rr-main .st-savebar{position:sticky}
.rr-mxwrap{overflow-x:auto;margin:0 -2px}
.mx{width:100%;border-collapse:collapse;font-size:12.5px}
.mx th{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;padding:8px 10px;border-bottom:1px solid var(--border);font-weight:500;white-space:nowrap}
.mx th:first-child{text-align:left}
.mx th .sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}
.mx td{padding:6px 10px;border-bottom:1px solid var(--border-soft);text-align:center}
.mx td:first-child{text-align:left;color:var(--heading);white-space:nowrap}
.mx tr.grp td{background:var(--bg-subtle);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left}
.mx .yes{color:var(--ok);font-weight:700}.mx .no{color:var(--text-soft)}
.rr-cell{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;min-height:0;box-shadow:none}
.rr-cell:hover .lv{outline:2px solid var(--brand-line)}
.lv{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;min-width:84px}
.lv svg{width:12px;height:12px}
.lv.w{background:var(--ok-bg);color:var(--ok)}.lv.r{background:var(--brand-bg);color:var(--brand-text)}.lv.n{color:var(--text-soft);background:transparent}
.rr-legend,.modal-box .legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin-bottom:10px}
.rr-sws{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
.rr-sws label{margin:0;cursor:pointer;display:inline-flex}
.rr-sws input{position:absolute;opacity:0;width:0;height:0}
.rr-sws i{width:24px;height:24px;border-radius:7px;display:inline-block;border:2px solid transparent;box-shadow:inset 0 0 0 2px var(--card)}
.rr-sws input:checked + i{border-color:var(--heading)}
.rr-sws input:focus-visible + i{outline:2px solid var(--brand);outline-offset:2px}
/* „Nur Lesen“ und fehlende Sonderrechte */
.ro-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:var(--brand-bg);border:1px solid var(--brand-line);font-size:12.5px;color:var(--brand-text);margin-bottom:14px}
.ro-banner svg{width:16px;height:16px;flex:none}
.perm-hidden{display:none !important}
.perm-ro-form input:disabled,.perm-ro-form select:disabled,.perm-ro-form textarea:disabled{opacity:.8;cursor:not-allowed}
.perm-ro-form button[type="submit"]:disabled,.perm-ro-form .btn:disabled{opacity:.45;cursor:not-allowed}
@media (max-width: 900px){
  .rl{grid-template-columns:1fr}
  .ptbl td.pc{width:auto}
  .ptbl tr:not(.grp){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid var(--border-soft)}
  .ptbl tr:not(.grp) td{border-bottom:0}
  .ptbl tr:not(.grp) td.nm{flex:1 1 100%;padding-bottom:2px}
  .ptbl tr:not(.grp) td.pc{padding-top:2px;text-align:left}
  .ptbl tr.grp td .qs{float:none;display:block;margin-top:4px}
  .ptbl tr.grp td .qs button:first-child{margin-left:0}
  .xr{grid-template-columns:1fr}
  .pl-seg button{padding:5px 8px}
}
/* Schritt 40b: Rechte-Editor in Reitern */
.rr-tabs{display:flex;flex-wrap:wrap;gap:2px;background:var(--bg-2);border:1px solid var(--border);border-radius:9px;padding:3px;margin:4px 0 14px;scrollbar-width:none}
.rr-tabs::-webkit-scrollbar{display:none}
.rr-tab{flex:1 1 auto;justify-content:center;font:inherit;padding:7px 10px;font-size:12.5px;font-weight:600;color:var(--muted);border-radius:6px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:transparent;border:0;margin:0;min-height:0;box-shadow:none;white-space:nowrap;transition:color .12s,background .12s}
.rr-tab:hover{color:var(--heading);background:rgba(255,255,255,.55)}
[data-theme="dark"] .rr-tab:hover{background:rgba(255,255,255,.05)}
.rr-tab.active{color:var(--heading);background:var(--card);box-shadow:0 1px 2px rgba(11,24,48,.10),0 0 0 1px var(--border)}
.rr-tn{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--muted);background:var(--bg-subtle);border-radius:999px;padding:1px 6px}
.rr-tab.active .rr-tn{background:var(--brand-bg);color:var(--brand-text)}
.rr-tn.ch,.rr-tab.active .rr-tn.ch{background:#FFF1DB;color:#8a5300;font-weight:600}
.rr-qs{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:12px;color:var(--muted);margin:0 0 6px}
.rr-qs span{margin-right:6px}
.rr-qs button{font:inherit;font-weight:600;color:var(--brand-text);background:none;border:1px solid transparent;border-radius:6px;padding:3px 8px;margin:0;min-height:0;box-shadow:none;cursor:pointer}
.rr-qs button:hover{background:var(--brand-bg)}
.rr-panel .ptbl tr:first-child td{border-top:1px solid var(--border-soft)}
.rr-panel{min-height:120px}
@media (max-width: 900px){
  .rr-qs{justify-content:flex-start;flex-wrap:wrap}
}

/* Schritt 41: Auswahlfelder statt Reiter/Navigation auf dem Handy (.mdd = Wrapper, .mdd-btn = Knopf) */
.mdd{display:contents}
@media (max-width:860px){
  .mdd{display:block;position:relative;margin-bottom:14px;min-width:0}
  .mdd > .tabs-select .dot{width:7px;height:7px;border-radius:50%;background:#E3A008;flex:none}
  .mdd > .tabs-select .dot.ok{background:var(--ok)}.mdd > .tabs-select .dot.bad{background:var(--bad)}
  .mdd > .tabs-select .tabs-select-v svg{width:15px;height:15px;color:var(--muted);flex:none}
  .mdd > .tabs-select .sw{width:10px;height:10px;border-radius:3px;flex:none}
  .mdd.open > .tabs-select{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
  .mdd.open > .tabs-select > svg{transform:rotate(-90deg)}
  .mdd > :not(.mdd-btn){display:none !important}
  .mdd.open > :not(.mdd-btn){display:block !important;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 12px 32px rgba(11,24,48,.16);max-height:min(70vh,560px);overflow:auto;margin:0}
  /* Einstellungen */
  .st-mdd .st-nav{position:absolute;max-height:min(70vh,560px)}
  .st-mdd .st-nav .i{padding:10px 12px}
  /* Rollenliste */
  .rr-mdd .rlist{padding:6px}
  .rr-mdd .rlist .it{max-width:none}
  .rr-mdd .rlist .new{margin-top:6px}
  /* Reiter im Rechte-Editor */
  .rrt-mdd{margin:4px 0 12px}
  .rrt-mdd .rr-tabs{flex-direction:column;flex-wrap:nowrap;gap:2px}
  .mdd.open > .rr-tabs{display:flex !important}
  .rrt-mdd .rr-tab{justify-content:space-between;padding:10px 12px;border-radius:7px;width:100%}
  .rrt-mdd .rr-tab.active{background:var(--brand-bg);color:var(--brand-text);box-shadow:none}
}
/* Schritt 44: Servicebericht bucht Zeit */
.rep-book{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:2px}
.rep-book .toggle-switch-row{margin:0}
/* Schritt 45: Benutzerauswahl (data-modern="user") mit Initialen wie bei der Kundenauswahl */
.msel-av.u{background:var(--brand-bg);color:var(--brand-text)}
.msel-opt.sel .msel-av.u{background:var(--brand);color:#fff}

/* ---------- Schritt 47: Prozesse (Textbausteine, Abschluss, Verlauf, SLA, Abrechnung, Aufgaben, Glocke) ---------- */
/* Textbausteine */
.lbl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.lbl-row label{margin:0}
.sn-dd{position:relative;display:inline-block}
.sn-dd > summary{list-style:none;cursor:pointer}
.sn-dd > summary::-webkit-details-marker{display:none}
.sn-dd > summary svg{width:14px;height:14px}
.sn-menu{position:absolute;right:0;top:calc(100% + 6px);width:320px;max-height:340px;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(11,24,48,.16);padding:6px;z-index:60}
.tc .sn-menu{right:auto;left:0;top:auto;bottom:calc(100% + 6px)}
.sn-menu .g{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft);padding:6px 10px 2px}
.sn-menu .s{display:block;width:100%;text-align:left;font:inherit;background:none;border:0;border-radius:7px;padding:8px 10px;cursor:pointer;margin:0;min-height:0;box-shadow:none;color:inherit}
.sn-menu .s:hover{background:var(--brand-bg)}
.sn-menu .s b{display:block;color:var(--heading);font-weight:600;font-size:12.5px}
.sn-menu .s span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-menu .e{padding:10px;font-size:12px;color:var(--muted)}
.sn-menu .more{display:block;border-top:1px solid var(--border-soft);margin-top:4px;padding:8px 10px 4px;font-size:12px;font-weight:600;color:var(--brand-text);cursor:pointer}
.sn-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.sn-chips button{font:inherit;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;margin:0;min-height:0;box-shadow:none}
.sn-chips button.on{background:var(--brand-bg);border-color:var(--brand-line);color:var(--brand-text)}
.sn-chips button i{font-style:normal;font-family:var(--mono);font-size:10px;opacity:.7;margin-left:3px}
.sn-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.sn-tbl td{padding:10px;border-bottom:1px solid var(--border-soft);vertical-align:top}
.sn-tbl td b{color:var(--heading)}
.sn-tbl td > span:not(.sn-ph):not(.sn-cat){display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.sn-cat{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--bg-2);color:var(--muted);white-space:nowrap}
.sn-ph{display:inline-block;background:#EEF4FF;color:#2359BF;border-radius:4px;padding:1px 5px;font-family:var(--mono);font-size:10.5px;margin:2px 3px 0 0;border:0;cursor:default;min-height:0;box-shadow:none}
[data-theme="dark"] .sn-ph{background:rgba(88,140,255,.14);color:#8DB4FF}
button.sn-ph{cursor:pointer}
button.sn-ph:hover{outline:1px solid #2359BF}
.sn-phs{display:flex;flex-wrap:wrap}
.sn-uses{display:flex;flex-wrap:wrap;gap:6px 16px}
/* Abschlussdialog */
.ct-sec{border-top:1px solid var(--border-soft);padding-top:12px;margin-top:12px}
.ct-sec .hd{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.ct-sec .hd b{font-size:13.5px;color:var(--heading)}
.ct-sec .hd .muted{font-size:11.5px}
.ct-sec .hd .toggle-switch{margin-left:auto}
.ct-rep.hidden,.ct-msg.hidden{display:none}
/* Verlauf */
.th-ch{font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:1px 7px;border-radius:999px;text-transform:uppercase;background:var(--bg-2);color:var(--muted);margin-left:2px}
.th-ch.email{background:#EEF4FF;color:#2359BF}.th-ch.portal{background:#E6F6EE;color:#1E7A46}.th-ch.notiz{background:#FFF1DB;color:#8a5300}.th-ch.bericht{background:#EDE7FE;color:#6D3FD8}
[data-theme="dark"] .th-ch.email{background:rgba(88,140,255,.14);color:#8DB4FF}[data-theme="dark"] .th-ch.portal{background:rgba(30,122,70,.2);color:#6FD39A}[data-theme="dark"] .th-ch.notiz{background:rgba(224,140,20,.15);color:#F2B45A}[data-theme="dark"] .th-ch.bericht{background:rgba(124,58,237,.18);color:#B79BFA}
.msg.th-notiz .bubble{background:#FFFCF3;border-color:#F3DDB0}
.msg.th-bericht .bubble{background:#F8F5FF;border-color:#DCCFFB;cursor:pointer}
.msg.th-bericht .avatar{background:#EDE7FE;color:#6D3FD8}.msg.th-bericht .avatar svg{width:13px;height:13px}
[data-theme="dark"] .msg.th-notiz .bubble{background:rgba(224,140,20,.07);border-color:rgba(224,140,20,.3)}
[data-theme="dark"] .msg.th-bericht .bubble{background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.3)}
.bubble-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bubble-head .muted{margin-left:auto}
/* Schreiben im Ticket */
.tc{border:1px solid var(--border);border-radius:12px;background:var(--card);margin-top:14px;position:relative}
.tc-tabs{display:flex;border-bottom:1px solid var(--border-soft);background:var(--bg-subtle);border-radius:12px 12px 0 0;overflow-x:auto;scrollbar-width:none}
.tc-tabs button{font:inherit;padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--muted);display:inline-flex;gap:6px;align-items:center;background:none;border:0;cursor:pointer;margin:0;min-height:0;box-shadow:none;white-space:nowrap}
.tc-tabs button svg{width:14px;height:14px}
.tc-tabs button.on{color:var(--brand-text);background:var(--card);box-shadow:inset 0 -2px 0 var(--brand)}
.tc textarea{border:0 !important;box-shadow:none !important;border-radius:0;width:100%;box-sizing:border-box;min-height:96px;resize:vertical;padding:12px 14px;background:transparent}
.tc.is-note{background:#FFFCF3;border-color:#F3DDB0}
[data-theme="dark"] .tc.is-note{background:rgba(224,140,20,.06);border-color:rgba(224,140,20,.3)}
.tc-ft{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--border-soft);flex-wrap:wrap}
.tc-ft .sp{flex:1}
.tc-ft .tc-hint{font-size:11.5px}
.tc-ft .btn svg{width:14px;height:14px}
/* SLA */
.sla-b{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.sla-b svg{width:11px;height:11px}
.sla-b.ok{background:var(--ok-bg);color:var(--ok)}.sla-b.w{background:#FFF1DB;color:#8a5300}.sla-b.bad{background:var(--bad-bg);color:var(--bad)}
.st-sla{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.sla-card .card-head{display:flex;align-items:center;gap:8px}.sla-card .card-head .sla-b{margin-left:auto}
.sla-row{display:flex;align-items:baseline;gap:10px;font-size:12.5px;margin-top:7px}
.sla-row > span:first-child{color:var(--muted)}
.sla-row .v{margin-left:auto;font-weight:600;color:var(--heading);text-align:right}
.sla-row .v.ok,.sla-row .v.met{color:var(--ok)}.sla-row .v.w{color:#8a5300}.sla-row .v.bad,.sla-row .v.missed{color:var(--bad)}
.sla-bar{height:6px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin-top:6px}
.sla-bar i{display:block;height:100%;background:var(--brand)}
.sla-bar i.w{background:#E3A008}.sla-bar i.bad{background:var(--bad)}.sla-bar i.ok{background:var(--brand)}
/* Sammelabrechnung */
.bl-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.bl-head .hint{flex:1;min-width:220px}
.bl-head .msel,.bl-head select{width:250px}
.bl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.bl-kpis > div{border:1px solid var(--border);border-radius:var(--r);background:var(--card);padding:12px 14px}
.bl-kpis span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bl-kpis b{display:block;font-size:20px;color:var(--heading);margin-top:4px}
.bl-kpis b.w{color:#8a5300}
.bl-kpis i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:3px}
.bl-tbl tr.bl-more td,.bl-tbl tr.bl-rest td{padding:8px 10px;background:var(--bg-subtle)}
.bl-tbl tr.bl-rest td{background:var(--card);border-top:1px solid var(--border)}
.bl-tbl tr.bl-more button,.bl-tbl tr.bl-rest button{font:inherit;font-size:12px;font-weight:600;color:var(--brand-text);background:none;border:0;padding:0;margin:0;min-height:0;box-shadow:none;cursor:pointer}
.bl-tbl tr.bl-more button:hover,.bl-tbl tr.bl-rest button:hover{text-decoration:underline}
.bl-head .list-search-input{min-width:240px}
.bl-wrap{overflow-x:auto}
.bl-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.bl-tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);font-weight:500;white-space:nowrap}
.bl-tbl td{padding:8px 10px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.bl-tbl .r{text-align:right;white-space:nowrap}
.bl-tbl tr.bl-cust td{background:var(--card);padding-top:12px}
.bl-tbl tr.bl-cust b{color:var(--heading)}
.bl-tbl tr.bl-item td{background:var(--bg-subtle);font-size:12px}
.bl-tbl tr.bl-item td:nth-child(2){padding-left:22px}
.bl-tbl tr.bl-item.cov td,.bl-tbl tr.bl-item.ex td{color:var(--muted)}
.bl-tbl tr.bl-item.ex td:nth-child(2){text-decoration:line-through}
.bl-rate{width:78px !important;padding:3px 6px !important;font-size:12px !important;height:auto !important;display:inline-block}
.bl-src{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px}
.bl-src.r{background:#EDE7FE;color:#6D3FD8}.bl-src.t{background:#EEF4FF;color:#2359BF}
.bl-src.p{background:#FDF0E3;color:#8a5300}
.bl-mode{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-left:8px;vertical-align:middle}
.bl-mode button{font:inherit;font-size:11px;font-weight:600;padding:2px 9px;border:0;background:var(--bg-subtle);color:var(--muted);cursor:pointer;margin:0;min-height:0;box-shadow:none}
.bl-mode button.on{background:var(--brand);color:#fff}
.bl-cov{font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--bg-2);color:var(--muted);margin-left:6px}
.bl-cov.dup{background:var(--warn-bg);color:var(--warn)}
.bl-tbl tr.bl-item.ex td .bl-cov.dup{opacity:.9}
.bl-sum{display:flex;align-items:center;gap:14px;margin-top:12px;padding:10px 12px 10px 16px;border-radius:12px;background:#0B1830;color:#fff;font-size:12.5px;flex-wrap:wrap}
.bl-sum b{font-size:15px}.bl-sum .sp{flex:1}
.bl-sum .toggle-switch-row{color:#fff;font-size:12px}
.bl-sum .btn svg{width:14px;height:14px}
/* Meine Aufgaben */
.mt-card .card-head{flex-wrap:wrap;gap:10px}
.mt-f{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:auto}
.mt-chip{font:inherit;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;margin:0;min-height:0;box-shadow:none}
.mt-chip.on{background:var(--brand-bg);border-color:var(--brand-line);color:var(--brand-text)}
.mt-chip i{font-style:normal;font-family:var(--mono);font-size:10px;margin-left:2px}
.mt-seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:2px;margin-right:6px}
.mt-seg button{font:inherit;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:6px;border:0;background:none;color:var(--muted);cursor:pointer;margin:0;min-height:0;box-shadow:none}
.mt-seg button.on{background:var(--card);color:var(--heading);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mt-task{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border-soft);font-size:12.5px;cursor:pointer}
.mt-task:hover{background:var(--bg-subtle)}
.mt-task .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.mt-task .ic svg{width:15px;height:15px}
.mt-task .ic.t{background:#EEF4FF;color:#2359BF}.mt-task .ic.l{background:#E6F6EE;color:#1E7A46}.mt-task .ic.i{background:var(--bad-bg);color:var(--bad)}.mt-task .ic.x{background:#FFF1DB;color:#8a5300}.mt-task .ic.c{background:#EDE7FE;color:#6D3FD8}
.mt-task .tx{min-width:0;flex:1}
.mt-task .tx b{display:block;color:var(--heading);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-task .tx span{display:block;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-task .due{font-size:11.5px;font-weight:600;white-space:nowrap}
.mt-task .due.bad{color:var(--bad)}.mt-task .due.w{color:#8a5300}.mt-task .due.ok{color:var(--muted)}
.mt-task .act{font:inherit;font-size:11.5px;color:var(--brand-text);font-weight:600;white-space:nowrap;background:none;border:0;padding:4px 6px;border-radius:6px;cursor:pointer;margin:0;min-height:0;box-shadow:none;min-width:70px;text-align:right}
.mt-task .act:hover{background:var(--brand-bg)}
.mt-more{font:inherit;font-size:12px;font-weight:600;color:var(--brand-text);background:none;border:0;padding:10px 4px 2px;cursor:pointer;margin:0;min-height:0;box-shadow:none}
/* Glocke */
.icon-btn{position:relative}
.icon-btn .dot.n{width:auto;height:auto;min-width:16px;padding:0 4px;top:-4px;right:-5px;font-size:10px;font-weight:700;line-height:14px;color:#fff;text-align:center;border-radius:999px;font-style:normal;box-sizing:border-box}
.top-actions{position:relative}
.bell-panel{position:absolute;right:0;top:calc(100% + 8px);width:380px;max-width:calc(100vw - 24px);max-height:min(70vh,560px);overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px rgba(11,24,48,.18);z-index:200}
.bell-panel .hd{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border-soft);font-weight:700;color:var(--heading);font-size:13.5px}
.bell-panel .hd .link{margin-left:auto;font-size:11.5px;font-weight:600;background:none;border:0;cursor:pointer;min-height:0;box-shadow:none;padding:0}
.bell-panel .g{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft);padding:10px 14px 4px;display:flex}
.bell-panel .g i{font-style:normal;margin-left:auto}
.bell-panel .it{display:flex;gap:10px;padding:8px 14px;font-size:12.5px;align-items:flex-start;cursor:pointer}
.bell-panel .it:hover{background:var(--bg-subtle)}
.bell-panel .it .d{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:#E3A008}
.bell-panel .it .d.brand{background:var(--brand)}.bell-panel .it .d.bad{background:var(--bad)}
.bell-panel .it b{color:var(--heading);font-weight:600}
.bell-panel .it span{display:block;color:var(--muted);font-size:11.5px}
.bell-panel .e{padding:22px 14px;font-size:12.5px;color:var(--muted);text-align:center}
.bell-panel .ft{padding:10px 14px;border-top:1px solid var(--border-soft);font-size:12px;color:var(--brand-text);font-weight:600;text-align:center;cursor:pointer}
@media (max-width:860px){
  .bl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-head .msel,.bl-head select{width:100%}
  .mt-task .act{display:none}
  .mt-f{margin-left:0}
  .sn-menu{width:min(320px, calc(100vw - 40px))}
  .bell-panel{position:fixed;left:12px;right:12px;top:60px;width:auto}
  /* Composer: drei Reiter teilen sich die Breite, kein horizontales Scrollen */
  .tc-tabs{overflow:visible}
  .tc-tabs button{flex:1 1 0;justify-content:center;padding:9px 4px;font-size:12px;white-space:normal;text-align:center;line-height:1.2}
  .tc-tabs button svg{display:none}
  /* Abrechnung: eigene kompakte Zeilen statt Tabelle */
  .bl-wrap{overflow:visible}
  .bl-tbl thead{display:none}
  .bl-tbl,.bl-tbl tbody{display:block;width:100%}
  .bl-tbl tr{display:grid;grid-template-columns:26px auto auto auto 1fr auto;column-gap:8px;row-gap:3px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--border-soft)}
  .bl-tbl td{display:block;padding:0;border:0 !important;background:none !important;min-width:0}
  .bl-tbl tr.bl-item{background:var(--bg-subtle)}
  .bl-tbl tr.bl-cust{padding-top:12px}
  .bl-tbl td:nth-child(1){grid-column:1;grid-row:1 / span 2;align-self:start}
  .bl-tbl td:nth-child(2){grid-column:2 / 6;grid-row:1;padding-left:0 !important}
  .bl-tbl td:nth-child(7){grid-column:6;grid-row:1}
  .bl-tbl td:nth-child(3){grid-column:2;grid-row:2}
  .bl-tbl td:nth-child(4){grid-column:3;grid-row:2;font-size:11px}
  .bl-tbl td:nth-child(5){grid-column:4;grid-row:2;font-size:11px;color:var(--muted)}
  .bl-tbl td:nth-child(6){grid-column:6;grid-row:2;font-size:11px;color:var(--muted)}
  .bl-tbl td:nth-child(6)::after{content:' Std.'}
  .bl-tbl tr.bl-cust td:nth-child(4){grid-column:2 / 6;color:var(--muted)}
  .bl-tbl tr.bl-cust td:nth-child(6){color:var(--heading)}
  .bl-tbl td:empty{display:none}
  .bl-sum{padding:12px}
}
[data-theme="dark"] .bl-sum{background:#16284d;border:1px solid rgba(255,255,255,.08)}

/* ---------------- Schritt 48: „Mein Tag“ (Dashboard) und Aufgaben-Seite ---------------- */
.dash-main{align-items:start}
.md-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 6px}
.md-stats button{font:inherit;border:1px solid var(--border);background:var(--bg-subtle);border-radius:10px;padding:9px 10px;text-align:left;cursor:pointer;margin:0;min-height:0;box-shadow:none;color:var(--text);transition:border-color .15s,background .15s}
.md-stats button:hover{border-color:var(--brand);background:var(--card)}
.md-stats b{display:block;font-size:20px;color:var(--heading);line-height:1.15;font-weight:650}
.md-stats span{font-size:11px;color:var(--muted)}
.md-stats button.bad{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.05)}
.md-stats button.bad b{color:var(--danger)}
.md-h{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 2px}
.md-card .mt-task{padding:7px 0}
.md-card .mt-task .act{display:none}
.md-card .agenda{margin-top:2px}
.tk-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
/* Gruppenkarten der Aufgabenliste stehen untereinander – mehr Luft dazwischen als zwischen
   gewöhnlichen Karten (überschreibt .grid-main .card{margin-bottom:0}) */
.grid-main .card.tk-grp{margin-bottom:26px}
.grid-main .card.tk-grp:last-child{margin-bottom:0}
/* Aufgabendetail: beide Spalten mit etwas mehr Luft zwischen den Karten */
.tk-detail .col{gap:22px}
.tb-desc{font-size:13px;line-height:1.6;color:var(--text);max-height:260px;overflow:auto;overflow-wrap:anywhere}
@media (max-width:860px){
  /* Handy: Beschreibung und Details zuerst, danach Checkliste und Verlauf */
  .tk-detail{display:flex;flex-direction:column;gap:22px}
  .tk-detail > .col:last-child{order:-1}
}
.tk-detail .thread-scroll{padding-right:8px;margin-right:-4px}
.tk-grp .card-head{align-items:flex-start}
.tk-grp .card-head .muted{font-size:11.5px}
.tk-grp.bad .card-head h2:before{background:var(--danger)}
.tk-grp.w .card-head h2:before{background:#d08a00}
.tk-info{font-size:12.5px;color:var(--muted);line-height:1.55}
[data-theme="dark"] .md-stats button.bad{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.28)}
@media (max-width:860px){
  .md-stats b{font-size:18px}
  /* Handy: „Mein Tag“ zuerst, Aktivität ans Ende */
  .dash-main > .col{display:contents}
  .dash-main .md-card{order:-1}
  .dash-main > .col > .card:not(.md-card){order:5}
}

/* ---------------- Schritt 49: Aufgaben-Board, Aufgabendetail ---------------- */
.tb-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.tb-bar .sp{flex:1}
.tb-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
.tb-col{background:var(--bg-subtle);border:1px solid var(--border);border-radius:14px;padding:10px 10px 12px;min-height:120px;transition:border-color .15s,background .15s}
.tb-col.over{border-color:var(--brand);background:var(--brand-bg)}
.tb-col > h3{margin:0 0 9px;font-size:11px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;padding:0 2px}
.tb-col > h3 i{font-style:normal;background:var(--bg-2);color:var(--text-soft);border-radius:999px;padding:1px 7px;font-size:10px}
.tb-col > h3 .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.tb-col.plan > h3 .dot{background:var(--brand)}.tb-col.work > h3 .dot{background:var(--ok)}.tb-col.wait > h3 .dot{background:var(--warn)}.tb-col.done > h3 .dot{background:var(--text-soft)}
.tb-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 11px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 2px rgba(11,24,48,.04);transition:border-color .15s,box-shadow .15s,transform .15s}
.tb-card:hover{border-color:var(--brand);box-shadow:var(--shadow-card);transform:translateY(-1px)}
.tb-card.drag{opacity:.5}
.tb-card.done{opacity:.72}
.tb-card .t{display:block;font-size:13px;font-weight:600;color:var(--heading);line-height:1.35;margin-bottom:6px}
.tb-card.done .t{text-decoration:line-through;text-decoration-color:var(--border)}
.tb-chips{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.tb-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.tb-meta .sp{flex:1}
.tb-area{font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:999px;white-space:nowrap;background:var(--bg-2);color:var(--muted)}
.tb-area.crm{background:#EEF4FF;color:#2359BF}.tb-area.doc{background:#EDE7FE;color:#6D3FD8}.tb-area.it{background:#E6F6F1;color:#0B7A5A}.tb-area.adm{background:#FDF0E3;color:#8a5300}
[data-theme="dark"] .tb-area.crm{background:rgba(88,140,255,.16);color:#8DB4FF}
[data-theme="dark"] .tb-area.doc{background:rgba(141,99,240,.18);color:#C4B0FF}
[data-theme="dark"] .tb-area.it{background:rgba(16,160,110,.18);color:#6FD39A}
[data-theme="dark"] .tb-area.adm{background:rgba(224,140,20,.16);color:#E7B15F}
.tb-due{font-weight:600}
.tb-due.bad{color:var(--danger)}.tb-due.w{color:#b26a00}
[data-theme="dark"] .tb-due.w{color:#E7B15F}
.tb-ck{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.tb-ck svg{width:12px;height:12px}
.tb-link{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;color:var(--muted);border-top:1px solid var(--border-soft);padding-top:6px}
.tb-link svg{width:12px;height:12px;flex:none}
.tb-add{width:100%;border:1px dashed var(--border);background:none;color:var(--muted);border-radius:10px;padding:7px;font:inherit;font-size:12px;cursor:pointer;margin:0;min-height:0;box-shadow:none}
.tb-add:hover{border-color:var(--brand);color:var(--brand-text)}
/* Detailseite */
.tb-ck-list{display:flex;flex-direction:column;gap:0}
.tb-ck-row{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--border-soft);font-size:13px}
.tb-ck-row:last-child{border-bottom:0}
.tb-ck-row .tx{flex:1}
.tb-ck-row.on .tx{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--border)}
.tb-ck-box{width:16px;height:16px;border:1.5px solid var(--border);border-radius:5px;flex:none;margin:1px 0 0;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--card);color:#fff;cursor:pointer;box-shadow:none;min-height:0}
.tb-ck-row.on .tb-ck-box{background:var(--brand);border-color:var(--brand)}
.tb-ck-box svg{width:11px;height:11px}
.tb-ck-del{background:none;border:0;color:var(--text-soft);font-size:16px;line-height:1;padding:0 2px;margin:0;cursor:pointer;min-height:0;box-shadow:none;opacity:0}
.tb-ck-row:hover .tb-ck-del{opacity:1}
.tb-ck-del:hover{color:var(--danger)}
.tb-ck-bar{height:5px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin:2px 0 10px}
.tb-ck-bar i{display:block;height:100%;background:var(--brand);border-radius:999px}
.tb-ck-add{display:flex;gap:8px;margin-top:10px}
.tb-ck-add input{flex:1}
.tb-kv{display:grid;grid-template-columns:110px 1fr;gap:9px 10px;font-size:12.5px;align-items:center;margin:0}
.tb-kv dt{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tb-kv dd{margin:0;color:var(--text)}
.tb-note{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-soft)}
.tb-note:last-of-type{border-bottom:0}
.tb-note .bd{flex:1;font-size:12.5px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.tb-note .hd{display:flex;gap:8px;align-items:baseline;margin-bottom:2px}
.tb-note .hd b{font-size:12.5px;color:var(--heading)}
.tb-note .hd span{font-size:11px;color:var(--muted)}
.tb-note .bd.tb-sys{color:var(--muted)}
.tb-note .avatar.sys svg{width:12px;height:12px}
.tb-note-bar{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.tb-note-bar .muted{font-size:11.5px}
.tb-result{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--ok-bg);color:var(--text);font-size:12.5px;line-height:1.55}
.tb-result b{display:block;color:var(--ok);font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px}
.tb-links .li svg{width:16px;height:16px;flex:none;color:var(--muted)}
.mt-task .ic.k{background:var(--brand-bg);color:var(--brand-text)}
.tk-doc.hidden{display:none}
@media (max-width:1250px){ .tb-board{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .tb-board{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .tb-board{grid-template-columns:1fr;gap:10px}
  .tb-kv{grid-template-columns:96px 1fr}
  .tb-ck-del{opacity:1}
}


/* ---------------- Schritt 54: Dokumente (SharePoint-Browser) ---------------- */
.dk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dk-bar .sp{flex:1}
.dk-search{min-width:230px;flex:0 1 260px}
.dk-crumb{display:flex;align-items:center;gap:4px;font-size:12.5px;flex-wrap:wrap}
.dk-crumb button{font:inherit;font-size:12.5px;background:none;border:0;color:var(--brand-text);cursor:pointer;padding:3px 7px;border-radius:8px;margin:0;min-height:0;box-shadow:none}
.dk-crumb button:hover{background:var(--brand-bg)}
.dk-crumb b{color:var(--heading);padding:3px 7px;font-size:12.5px}
.dk-crumb svg{width:13px;height:13px;color:var(--text-soft);flex:none}
.dk-seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.dk-seg button{font:inherit;padding:5px 9px;border:0;background:var(--card);color:var(--muted);cursor:pointer;margin:0;min-height:0;box-shadow:none;display:inline-flex;align-items:center;gap:5px;font-size:12px}
.dk-seg button svg{width:14px;height:14px}
.dk-seg button.on{background:var(--brand);color:#fff}
.dk-drop{border:1px dashed var(--border);border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-bottom:12px;background:var(--bg-subtle)}
.dk-drop.on{border-color:var(--brand);background:var(--brand-bg);color:var(--brand-text)}
.dk-drop svg{width:16px;height:16px;flex:none}
.dk-row{display:grid;grid-template-columns:34px 1fr 96px 150px 120px;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.dk-row:hover{background:var(--bg-subtle);border-color:var(--border)}
.dk-row.on{background:var(--brand-bg);border-color:var(--brand)}
.dk-row + .dk-row{margin-top:2px}
.dk-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--muted)}
.dk-ic svg{width:17px;height:17px}
.dk-ic.folder{background:#EEF4FF;color:#2359BF}.dk-ic.pdf{background:#FDE9E9;color:#C0392B}.dk-ic.xls{background:#E6F6F1;color:#0B7A5A}
.dk-ic.doc{background:#EEF4FF;color:#2359BF}.dk-ic.img{background:#EDE7FE;color:#6D3FD8}
.dk-nm{min-width:0}
.dk-nm b{display:block;font-size:13px;font-weight:600;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-nm span{font-size:11.5px;color:var(--muted)}
.dk-sz,.dk-dt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dk-act{display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .12s}
.dk-row:hover .dk-act,.dk-row.on .dk-act{opacity:1}
.dk-act button{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin:0;min-height:0;box-shadow:none}
.dk-act button:hover{border-color:var(--brand);color:var(--brand-text)}
.dk-act svg{width:14px;height:14px}
.dk-head{display:grid;grid-template-columns:34px 1fr 96px 150px 120px;gap:10px;padding:0 10px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border-soft);margin-bottom:6px}
.dk-sec{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;padding:0 10px}
.dk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.dk-tile{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:12px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.dk-tile:hover{border-color:var(--brand);box-shadow:var(--shadow-card);transform:translateY(-1px)}
.dk-tile .pv{height:86px;border-radius:9px;background:var(--bg-subtle);display:flex;align-items:center;justify-content:center;margin-bottom:9px;overflow:hidden}
.dk-tile .pv svg{width:26px;height:26px;color:var(--muted)}
.dk-tile .pv.img{background:linear-gradient(135deg,#dbe7fb,#c9d8f2)}
.dk-tile b{display:block;font-size:12.5px;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-tile span{font-size:11px;color:var(--muted)}
.dk-side .li{cursor:default}
.dk-side .list .li svg{width:16px;height:16px;flex:none;color:var(--muted)}
.dk-main .col{gap:16px}
.dk-prev{border:1px solid var(--border);border-radius:12px;background:var(--bg-subtle);height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--muted)}
.dk-prev svg{width:34px;height:34px}
.dk-kv{display:grid;grid-template-columns:82px 1fr;gap:7px 10px;font-size:12.5px;margin:0}
.dk-kv dt{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dk-kv dd{margin:0;overflow-wrap:anywhere}
.dk-side .btn{width:100%;justify-content:center}
.dk-recent .li{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border-soft);font-size:12.5px}
.dk-recent .li:last-child{border-bottom:0}
.dk-recent .li .dk-ic{width:26px;height:26px;border-radius:7px}
.dk-recent .li .dk-ic svg{width:13px;height:13px}
.dk-recent .li i{font-style:normal;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-recent .li span{font-size:11px;color:var(--muted);white-space:nowrap}
@media (max-width:860px){
  .dk-main{display:flex;flex-direction:column;gap:16px}
  .dk-row{grid-template-columns:32px 1fr auto;row-gap:2px}
  .dk-sz,.dk-head{display:none}
  .dk-dt{grid-column:2;font-size:11px}
  .dk-act{opacity:1}
}

.dk-ic.lg{width:44px;height:44px;border-radius:12px}
.dk-ic.lg svg{width:22px;height:22px}
.dk-prev .dk-ic{box-shadow:none}
.dk-btns{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.dk-btns .btn{width:100%;justify-content:center}
.dk-act a{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.dk-act a:hover{border-color:var(--brand);color:var(--brand-text)}
.dk-act a svg{width:14px;height:14px}
.dk-tile{position:relative}
.dk-tile .dk-act{position:absolute;top:8px;right:8px}
.dk-tile.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-bg)}
.dk-quick .li{cursor:pointer}
.dk-crumb b span,.dk-crumb button span{vertical-align:middle}
[data-theme="dark"] .dk-ic.folder{background:rgba(88,140,255,.16);color:#8DB4FF}
[data-theme="dark"] .dk-ic.pdf{background:rgba(220,38,38,.16);color:#F19191}
[data-theme="dark"] .dk-ic.xls{background:rgba(16,160,110,.18);color:#6FD39A}
[data-theme="dark"] .dk-ic.doc{background:rgba(88,140,255,.16);color:#8DB4FF}
[data-theme="dark"] .dk-ic.img{background:rgba(141,99,240,.18);color:#C4B0FF}

/* ---------------- Schritt 55: Inventar ---------------- */
.iv-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.iv-kpi{font:inherit;text-align:left;width:100%;margin:0;min-height:0;box-shadow:none;border:1px solid var(--border);border-radius:var(--r);background:var(--card);padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:flex;gap:12px;align-items:flex-start;color:var(--text)}
.iv-kpi:hover{border-color:var(--brand);box-shadow:var(--shadow-card)}
.iv-kpi.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-bg)}
.iv-kpi .tx{display:flex;flex-direction:column;min-width:0}
.iv-kpi .l{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.iv-kpi b{display:block;font-size:22px;color:var(--heading);line-height:1.2;margin-top:2px}
.iv-kpi .s{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.iv-kpi .s .w,.iv-warn{color:#b26a00;font-weight:600}
.iv-kpi .s .bad{color:var(--danger);font-weight:600}
.iv-kpi .ic,.iv-nm .ic,.iv-due .li .ic{border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.iv-kpi .ic{width:36px;height:36px}
.iv-kpi .ic svg{width:18px;height:18px}
.iv-nm .ic{width:32px;height:32px;border-radius:9px}
.iv-nm .ic svg{width:16px;height:16px}
.iv-due .li .ic{width:28px;height:28px;border-radius:8px}
.iv-due .li .ic svg{width:14px;height:14px}
.ic.lic{background:#EEF4FF;color:#2359BF}.ic.dev{background:#E6F6F1;color:#0B7A5A}.ic.dom{background:#EDE7FE;color:#6D3FD8}.ic.crt{background:#FDF0E3;color:#8a5300}
.iv-list .tabs{margin-bottom:14px}
.iv-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.iv-bar .sp{flex:1}
.iv-bar .iv-search{width:280px;max-width:100%}
.iv-bar select{width:200px}
.iv-chips{margin:0}
.iv-grp-tg{margin:0 0 0 6px}
.iv-tbl{width:100%;border-collapse:collapse;font-size:13px}
.iv-tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);font-weight:500;white-space:nowrap;background:none}
.iv-tbl td{padding:10px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.iv-tbl tr.clickable:hover td{background:var(--bg-subtle);cursor:pointer}
.iv-tbl .r{text-align:right;white-space:nowrap}
.iv-tbl tr[hidden]{display:none}
.iv-nm{display:flex;align-items:center;gap:10px;min-width:0}
.iv-nm b{display:block;font-weight:600;color:var(--heading)}
.iv-nm span{font-size:11.5px;color:var(--muted)}
.iv-cust{display:inline-flex;align-items:center;gap:7px}
.iv-mono{font-family:var(--mono);font-size:12px}
.iv-st{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px}
.iv-st small{font-size:11px;color:var(--muted);white-space:nowrap}
.iv-grp td{background:var(--bg-subtle);font-weight:600;color:var(--heading);font-size:12.5px}
.iv-grp td > span:last-child{font-weight:400;color:var(--muted);margin-left:6px}
.iv-grp .avatar{vertical-align:middle;margin-right:4px}
.iv-due .li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:12.5px;cursor:pointer}
.iv-due .li:last-of-type{border-bottom:0}
.iv-due .li:hover .t b{color:var(--brand-text)}
.iv-due .li .t{flex:1;min-width:0}
.iv-due .li .t b{display:block;font-weight:600;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv-due .li .t span{font-size:11px;color:var(--muted)}
.iv-due .li .d{font-size:11.5px;font-weight:600;white-space:nowrap}
.iv-due .li .d.bad{color:var(--danger)}.iv-due .li .d.w{color:#b26a00}.iv-due .li .d.ok{color:var(--muted)}
.iv-more{font-size:12px;padding:6px 0 0}
.iv-rem{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--bg-subtle);font-size:12px;color:var(--text);line-height:1.5}
.iv-rem svg{width:15px;height:15px;color:var(--brand);flex:none;margin-top:2px}
.iv-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.iv-hero.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.iv-hero > div{border:1px solid var(--border);border-radius:var(--r);background:var(--card);padding:14px 16px;min-width:0}
.iv-hero .l{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.iv-hero b{display:block;font-size:20px;color:var(--heading);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv-hero b.iv-mono{font-size:17px}
.iv-hero .s{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.iv-hero .w b{color:#b26a00}.iv-hero .bad b{color:var(--danger)}
.iv-detail .col{gap:22px}
.grid-main.iv-main .card{margin-bottom:0}
.iv-kv{display:grid;grid-template-columns:150px 1fr;gap:10px 14px;font-size:13px;margin:0}
.iv-kv dt{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.iv-kv dd{margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere}
.iv-key{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px;padding:3px 8px;max-width:100%}
.iv-key .v{overflow-wrap:anywhere}
.iv-key button{border:0;background:none;color:var(--brand-text);font:inherit;font-size:11px;cursor:pointer;padding:0;margin:0;min-height:0;box-shadow:none;flex:none}
.iv-key button svg{width:13px;height:13px;vertical-align:-2px}
.iv-notes{font-size:13px;line-height:1.6}
.iv-life{height:8px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin:6px 0 6px}
.iv-life i{display:block;height:100%;border-radius:999px;background:var(--ok)}
.iv-life.soon i{background:linear-gradient(90deg,var(--ok),#d08a00)}
.iv-life.expired i{background:var(--danger)}
.iv-life-l{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.iv-life-none{font-size:13px;color:var(--muted)}
.iv-tl{max-height:420px;overflow:auto}
[data-theme="dark"] .ic.lic{background:rgba(88,140,255,.16);color:#8DB4FF}
[data-theme="dark"] .ic.dev{background:rgba(16,160,110,.18);color:#6FD39A}
[data-theme="dark"] .ic.dom{background:rgba(141,99,240,.18);color:#C4B0FF}
[data-theme="dark"] .ic.crt{background:rgba(208,138,0,.18);color:#F0C067}
[data-theme="dark"] .iv-kpi .s .w,[data-theme="dark"] .iv-warn,[data-theme="dark"] .iv-due .li .d.w,[data-theme="dark"] .iv-hero .w b{color:#F0C067}
@media (max-width:1100px){ .iv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .iv-kpis{gap:8px}
  .iv-kpi{padding:12px}.iv-kpi .ic{display:none}.iv-kpi b{font-size:19px}
  .iv-main{display:flex;flex-direction:column;gap:16px}
  .iv-main > .col.iv-side{order:-1}
  .iv-hero{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.iv-hero > div{padding:10px}.iv-hero b{font-size:15px}.iv-hero b.iv-mono{font-size:13px}.iv-hero .s{display:none}
  .iv-kv{grid-template-columns:110px 1fr}
  .iv-bar .iv-search{width:100%;flex:1 1 100%}.iv-bar select{width:100%}.iv-bar .sp{display:none}
  .iv-grp-tg{margin:4px 0 0}
  .iv-tbl thead{display:none}.iv-tbl,.iv-tbl tbody{display:block}
  .iv-tbl tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 0;border-bottom:1px solid var(--border-soft)}
  .iv-tbl tr[hidden]{display:none}
  .iv-tbl td{border:0;padding:0;background:none!important}
  .iv-tbl td.iv-nmc{flex:1 1 100%}
  .iv-tbl td.mh{display:none}
  .iv-tbl td.iv-c{flex:1;padding-left:42px;font-size:12px;min-width:0}
  .iv-tbl td.iv-stc{margin-left:auto}
  .iv-tbl tr.iv-grp{padding:8px 10px;background:var(--bg-subtle);border-radius:8px;border:0;margin-top:6px}
  .iv-st{flex-direction:row;align-items:center;gap:6px}
}
@media (max-width:860px){ .iv-hero b{white-space:normal;overflow-wrap:anywhere} }
@media (max-width:860px){ .iv-tbl td.iv-c{flex:1 0 auto;white-space:nowrap} }

/* ---------------- Schritt 56: Terminmaske ---------------- */
.modal-box.modal-box-appt{max-width:760px}
.ap-form{display:flex;flex-direction:column;gap:16px}
.ap-form input[type=text],.ap-form input[type=date],.ap-form input[type=time],.ap-form textarea{width:100%;box-sizing:border-box}
.ap-title input{font-size:16px;font-weight:600;padding:11px 13px}
.ap-sec{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--card)}
.ap-h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;min-height:22px}
.ap-h > svg{width:14px;height:14px;color:var(--brand);flex:none}
.ap-h .sp{flex:1}
.ap-h .toggle-switch-row{margin:0;font-family:inherit;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--text);display:inline-flex}
.ap-when{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;align-items:end}
.ap-when .ad{display:none;grid-column:span 2;align-self:center;font-size:13px}
.ap-when.is-allday .tm{display:none}
.ap-when.is-allday .ad{display:block}
.ap-dur{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:12px;color:var(--muted)}
.ap-dur[hidden],.ap-once[hidden],.pp-panel[hidden],.pp-empty[hidden],.pp-opt[hidden]{display:none}
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ap-grid .full{grid-column:1/-1}
.ap-grid > div{min-width:0}
.ap-grid .msel{display:flex;width:100%}
.ap-grid .msel-trigger{width:100%;max-width:none}
.ap-link{margin-top:6px;font-size:12px;background:none;border:0;padding:0;cursor:pointer;min-height:0;box-shadow:none}
.ap-cat{display:flex;gap:6px;flex-wrap:wrap}
.ap-cat-opt{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;margin:0;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text);font-size:12.5px;font-weight:500;cursor:pointer}
.ap-cat-opt input{position:absolute;opacity:0;width:0;height:0}
.ap-cat-opt i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.ap-cat-opt.on{border-color:var(--brand);background:var(--brand-bg);color:var(--brand-text);font-weight:600}
.ap-cat-opt:has(input:focus-visible){box-shadow:var(--focus)}
/* Mitarbeiter-Mehrfachauswahl */
.pp{position:relative}
.pp-trigger{display:flex;align-items:center;min-height:42px;padding:5px 36px 5px 6px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);cursor:pointer;position:relative}
.pp-trigger:focus-visible,.pp.open .pp-trigger{border-color:var(--brand);box-shadow:var(--focus);outline:none}
.pp-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.pp-ph{color:var(--muted);font-size:13px;padding-left:6px}
.pp-chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted)}
.pp-chev svg{width:14px;height:14px}
.pp.open .pp-chev{transform:translateY(-50%) rotate(180deg)}
.pp-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 3px;border-radius:999px;background:var(--brand-bg);color:var(--brand-text);font-size:12.5px;font-weight:600}
.pp-chip .avatar{width:22px;height:22px;font-size:9.5px}
.pp-x{border:0;background:none;color:inherit;opacity:.65;cursor:pointer;font-size:15px;line-height:1;padding:0 4px;margin:0;min-height:0;box-shadow:none}
.pp-x:hover{opacity:1}
.pp-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-elevated);z-index:30;padding:6px}
.pp-search{display:flex;align-items:center;gap:8px;padding:4px 8px;border-bottom:1px solid var(--border-soft);margin-bottom:4px}
.pp-search svg{width:14px;height:14px;color:var(--muted);flex:none}
.pp-search input{border:0;padding:6px 0;box-shadow:none;background:none;font-size:13px}
.pp-list{max-height:240px;overflow:auto}
.pp-opt{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;font-size:13px;font-weight:400;color:var(--text);cursor:pointer;margin:0}
.pp-opt:hover{background:var(--bg-subtle)}
.pp-opt input{position:absolute;opacity:0;width:0;height:0}
.pp-opt:has(input:focus-visible){box-shadow:var(--focus)}
.pp-opt .avatar{width:26px;height:26px;font-size:10px}
.pp-opt .t{flex:1;min-width:0}
.pp-opt .t small{display:block;font-size:11px;color:var(--muted)}
.pp-opt .ck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:transparent;flex:none}
.pp-opt.on .ck{background:var(--brand);border-color:var(--brand);color:#fff}
.pp-opt .ck svg{width:12px;height:12px}
.pp-empty{padding:10px;font-size:12.5px;color:var(--muted)}
.pp-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border-soft);margin-top:4px;padding:7px 8px 3px;font-size:11.5px;color:var(--muted)}
.pp-foot .link{background:none;border:0;padding:0;margin:0;min-height:0;box-shadow:none;font-weight:600;font-size:12px;cursor:pointer}
.ap-sec-people{position:relative;z-index:2}
.ap-hint{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;gap:6px;align-items:flex-start;line-height:1.45}
.ap-hint svg{width:13px;height:13px;flex:none;margin-top:1px}
.ap-opts{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:14px}
.ap-opt{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--card)}
.ap-opt + .ap-opt{border-top:1px solid var(--border-soft)}
.ap-opt .ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.ap-opt .ic svg{width:16px;height:16px}
.ap-opt .ic.portal{background:#EEF4FF;color:#2359BF}
.ap-opt .ic.teams{background:#EEEBFB;color:#5B5FC7}
.ap-opt .t{flex:1;min-width:0}
.ap-opt .t label{margin:0;font-size:13px;font-weight:600;color:var(--heading);cursor:pointer}
.ap-opt .t small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.ap-opt .t small .badge{margin-right:4px}
.ap-opt.off{background:var(--bg-subtle)}
.ap-opt.off .t label{color:var(--muted);cursor:default}
.ap-opt-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ap-rec{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.ap-rec + .ap-rec{margin-top:10px}
.ap-rec input[type=number]{width:70px}
.ap-rec input[type=date]{width:auto}
.ap-rec-sum{margin-top:10px;padding:9px 12px;border-radius:9px;background:var(--bg-subtle);font-size:12.5px;color:var(--text);display:flex;gap:8px;align-items:center}
.ap-rec-sum svg{width:14px;height:14px;color:var(--brand);flex:none}
.ap-rec-note{margin-top:8px}
.ap-note{font-size:12.5px;color:var(--text);line-height:1.5}
.ap-foot{display:flex;align-items:center;gap:8px;position:sticky;bottom:-22px;background:var(--card);padding:14px 0 4px;border-top:1px solid var(--border-soft);z-index:3}
.ap-foot .sp{flex:1}
.ap-foot .vx-menu.ap-up{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
.ap-sw-row{margin-top:8px}
[data-theme="dark"] .ap-opt .ic.portal{background:rgba(88,140,255,.16);color:#8DB4FF}
[data-theme="dark"] .ap-opt .ic.teams{background:rgba(123,127,230,.2);color:#B7B9F5}
@media (max-width:640px){
  .ap-when{grid-template-columns:1fr 1fr}
  .ap-when .d{grid-column:1/-1}
  .ap-when .ad{grid-column:1/-1}
  .ap-grid{grid-template-columns:1fr}
  .ap-sec{padding:12px}
  .ap-foot{flex-wrap:wrap}
  .ap-foot .sp{flex-basis:100%;height:0}
  .ap-foot > .btn:not(.ap-del){flex:1}
}
label.toggle-switch.ap-sw{display:inline-block;margin:0;cursor:pointer}
label.toggle-switch.ap-sw:has(input:disabled){cursor:not-allowed;opacity:.6}
.ap-h .toggle-switch-row{font-family:var(--font)}
@media (max-width:640px){ .ap-foot .vx-menu.ap-up{left:50%;right:auto;transform:translateX(-50%);min-width:240px} }

/* ---------------- Schritt 57: Kategorienfarben ---------------- */
.ev.allday .t,.ev.allday .rep{color:inherit;opacity:.8}
.badge.badge-apcat{display:inline-flex;align-items:center;gap:6px;color:var(--heading)}
.badge.badge-apcat i{width:7px;height:7px;border-radius:50%;flex:none}
.acm-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px}
.acm-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card)}
.acm-row + .acm-row{border-top:1px solid var(--border-soft)}
.acm-prev{flex:0 0 190px;min-width:0;border-left:3px solid;border-radius:6px;padding:5px 9px}
.acm-prev b{display:block;font-size:12.5px;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acm-prev small{display:block;font-size:11px;color:var(--muted)}
.acm-sw{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1}
.acm-dot{width:20px;height:20px;border-radius:50%;border:2px solid transparent;padding:0;margin:0;min-height:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);flex:none}
.acm-dot:hover{transform:scale(1.12)}
.acm-dot.on{border-color:var(--card);box-shadow:0 0 0 2px var(--heading)}
.acm-dot:disabled{cursor:default;transform:none}
.acm-custom{position:relative;width:22px;height:22px;border-radius:50%;border:1.5px dashed var(--border-strong);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:0;flex:none;color:var(--muted);font-size:14px;font-weight:600;overflow:hidden}
.acm-custom.on{border:2px solid var(--card);box-shadow:0 0 0 2px var(--heading);color:#fff}
.acm-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0;border:0}
.acm-custom span{pointer-events:none;line-height:1}
.acm-custom.acm-new{width:38px;height:38px;border-radius:9px;border:1px solid var(--border)}
.acm-del{border:0;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:4px 6px;margin:0;min-height:0;box-shadow:none;border-radius:6px}
.acm-del:hover{color:var(--danger);background:var(--bg-subtle)}
.acm-add{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.acm-add .acm-add-name{flex:1;min-width:200px}
@media (max-width:640px){
  .acm-row{flex-wrap:wrap}
  .acm-prev{flex:1 1 calc(100% - 40px)}
  .acm-sw{flex:1 1 100%;order:3}
}
.acm-add input[type=text]{width:100%;box-sizing:border-box}
.acm-add > div{display:flex;flex-direction:column}
.acm-add .acm-custom.acm-new{height:40px;width:44px}
@media (max-width:640px){ .acm-sw{gap:5px}.acm-dot{width:18px;height:18px}.acm-custom{width:20px;height:20px} }

/* ---------------- Schritt 58: Kulanz ---------------- */
.bl-amt{white-space:nowrap}
.bl-gw{font:inherit;font-size:11px;font-weight:600;margin:0 0 0 8px;padding:2px 8px;min-height:0;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;box-shadow:none;vertical-align:middle;opacity:0;transition:opacity .12s}
.bl-item:hover .bl-gw,.bl-gw:focus-visible,.bl-gw.on{opacity:1}
.bl-gw:hover{border-color:#c77d00;color:#9a5b00}
.bl-gw.on{background:#FDF0E3;border-color:#E8B874;color:#8a5300}
.bl-item.gw td{background:rgba(232,184,116,.08)}
.bl-item.gw s{color:var(--muted)}
.bl-gw-v{color:#8a5300}
.bl-gw-sum{font-size:11.5px;font-weight:600;color:#8a5300;margin-left:6px}
td .bl-gw-sum{margin:2px 0 0;display:block}
.pos-gw{color:#8a5300;font-weight:600}
[data-theme="dark"] .bl-gw.on{background:rgba(208,138,0,.18);border-color:rgba(240,192,103,.5);color:#F0C067}
[data-theme="dark"] .bl-gw-v,[data-theme="dark"] .bl-gw-sum,[data-theme="dark"] .pos-gw{color:#F0C067}
@media (hover:none){ .bl-gw{opacity:1} }
@media (max-width:860px){ .bl-gw{opacity:1} }
.bl-sum .bl-gw-sum{color:#F0C067}

/* ---------------- Schritt 60: Mahnung / Zahlungserinnerung im Beleg-Design ---------------- */
.dn-strip{display:flex;background:#EEF3FA;border-radius:6px;padding:9px 0;margin:4px 0 16px}
.dn-strip > div{flex:1;padding:0 14px;border-left:1px solid #D8E1EF;min-width:0}
.dn-strip > div:first-child{border-left:none}
.dn-strip .l{font-size:8px;color:#8B93A1;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.dn-strip .v{font-size:13px;font-weight:700;color:#1F2430;white-space:nowrap}
.dn-strip .v.warn{color:#B45309}
.dn-tbl{width:100%;border-collapse:collapse;font-size:11px;color:#1F2430}
.dn-tbl thead th{background:#F3F6FA;font-size:9px;font-weight:600;color:#8B93A1;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:6px 8px;border:none}
.dn-tbl thead th.r,.dn-tbl td.r{text-align:right}
.dn-tbl tbody td{padding:9px 8px;border-bottom:1px solid #E5E8EE;vertical-align:top;background:#fff;color:#1F2430}
.dn-tbl tbody td b{font-weight:600}
.dn-tbl tbody td small{display:block;color:#8B93A1;font-size:9.5px;margin-top:2px}
.dn-tbl td.neg{color:#1c7a45}
.dn-total{display:flex;justify-content:space-between;gap:28px;min-width:270px;box-sizing:border-box;width:fit-content;align-items:center;background:#EEF3FA;border-radius:6px;padding:9px 14px;font-weight:700;color:#1F2430;font-size:12.5px;margin-top:10px;margin-left:auto}
.dn-pay{margin-top:22px;border:1px solid #C9DBF6;background:#F7FAFE;border-radius:8px;padding:12px 16px;font-size:11px;color:#1F2430;line-height:1.6}
.dn-pay .h{font-weight:700;font-size:12px;margin-bottom:4px}
.dn-pay .g{display:grid;grid-template-columns:120px 1fr;gap:1px 10px}
.dn-pay .g span:nth-child(odd){color:#8B93A1}
.dn-pay .g span:nth-child(even){font-weight:600}
.dn-close{font-size:12px;color:#4B5563;margin-top:22px;line-height:1.6}
.dn-close b{color:#1F2430}
.dn-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:13px}
.dn-kv dt{color:var(--muted);font-size:12px}
.dn-kv dd{margin:0;text-align:right;color:var(--text)}
.dn-intern{margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--bg-subtle);font-size:12.5px;color:var(--text);line-height:1.5}
.dn-intern b{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-bottom:3px}

/* Schritt 61: Rautenmuster "Großer Flügel" in der A4-Vorschau (Bild per JS aus belegPatternCss(),
   identisch zum PDF) - nur oben rechts auf Seite 1, hinter allen Inhalten. */
.doc-a4-page.doc-a4-pattern{background-color:#fff;background-repeat:no-repeat;background-position:left top;background-size:100% auto}

/* Schritt 62: Versandprotokoll in der Belegstatus-Karte (docSendBlockHtml()) und
   "Versanddaten nachtragen" (Einstellungen > System) */
.ds-send{font-size:13px;color:var(--text)}
.ds-send svg{width:15px;height:15px;flex:none;color:var(--brand)}
.ds-send-h{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--heading);margin-bottom:6px}
.ds-send-none{display:flex;align-items:center;gap:7px;color:var(--text-muted)}
.ds-send-none svg{color:var(--text-soft)}
.ds-send-unknown .ds-send-h svg{color:var(--text-soft)}
.ds-send-unknown p{margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--text-muted)}
.ds-send-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.ds-send-list li{display:flex;flex-direction:column;gap:1px;padding-left:22px;position:relative}
.ds-send-list li::before{content:"";position:absolute;left:5px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.55}
.ds-send-at{font-weight:600;font-variant-numeric:tabular-nums}
.ds-send-at em{font-style:normal;font-weight:500;font-size:11px;color:var(--brand-text);background:var(--brand-bg);border-radius:6px;padding:1px 6px;margin-left:4px}
.ds-send-meta{font-size:12px;color:var(--text-muted);overflow-wrap:anywhere}
.ds-send-lookup{display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
.ds-send-lookup svg{width:14px;height:14px;color:currentColor}
.dn-kv .ds-send-lookup{margin-left:6px}
.sb-sum{margin:0 0 4px;font-size:13px}
.sb-tbl-wrap{max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:8px}
.sb-tbl{width:100%;font-size:12.5px}
.sb-tbl th{position:sticky;top:0;background:var(--card)}
.sb-none{margin-top:10px;font-size:12.5px}
.sb-none summary{cursor:pointer;color:var(--link)}

/* Schritt 63: Belegdetail – Miniatur im Kopf (docHeadThumbHtml()), Positionen-Karte
   (docPositionsCardHtml()) und Fokusansicht (openDocFocus()) */
.dh-main{display:flex;align-items:flex-start;gap:18px;min-width:0}
.dh-thumb{position:relative;flex:none;width:92px;height:130px;padding:0;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 1px 2px rgba(11,24,48,.06),0 8px 20px -12px rgba(11,24,48,.30);cursor:zoom-in;transition:box-shadow .2s,transform .2s,border-color .2s}
.dh-thumb:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg),0 10px 24px -12px rgba(11,24,48,.35);transform:translateY(-1px)}
.dh-thumb:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.dh-thumb-page{position:absolute;inset:0;pointer-events:none}
.dh-thumb .doc-a4-page{position:absolute !important;left:0;top:0;transform:scale(calc(92 / 794));transform-origin:top left;box-shadow:none}
.dh-thumb-zoom{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(11,24,48,.82);color:#fff;opacity:.9;transition:opacity .2s}
.dh-thumb-zoom svg{width:14px;height:14px}
.dh-thumb:hover .dh-thumb-zoom{opacity:1;background:var(--brand)}
.dp-note{margin:0 0 12px;font-size:12.5px;font-style:italic;color:var(--text-muted)}
.dp-pos{width:100%;border-collapse:collapse;font-size:13px}
.dp-pos th{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-soft);font-weight:500;text-align:left;padding:7px 8px;border-bottom:1px solid var(--border);background:transparent}
.dp-pos td{padding:10px 8px;border-bottom:1px solid var(--border-soft);vertical-align:top;font-variant-numeric:tabular-nums}
.dp-pos tbody tr:last-child td{border-bottom:0}
.dp-pos .r{text-align:right;white-space:nowrap}
.dp-pos .dp-n{width:44px;color:var(--text-muted)}
.dp-pos .pos-detail-list,.dp-pos .pos-info-text{font-size:12px}
.dp-pos tr.pos-row-muted td{color:var(--text-muted)}
.dp-sum{margin:12px 0 0 auto;width:min(100%,340px);font-size:13px;display:flex;flex-direction:column;gap:6px}
.dp-sum div{display:flex;justify-content:space-between;gap:16px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.dp-sum div span:last-child{white-space:nowrap}
.dp-sum div.t{color:var(--heading);font-weight:700;font-size:14px;border-top:1px solid var(--border);padding-top:8px;margin-top:2px}
.dp-sum div.n{font-size:12px;font-style:italic}
body.dfv-open{overflow:hidden}
.dfv{position:fixed;inset:0;z-index:450;display:grid;grid-template-columns:minmax(0,1fr) 320px;background:var(--bg)}
.dfv-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.dfv-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:var(--card);border-bottom:1px solid var(--border)}
.dfv-title{display:flex;align-items:baseline;gap:10px;min-width:0;color:var(--heading);font-size:15px}
.dfv-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfv-title .mono{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.dfv-zoom{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--bg)}
.dfv-zoom button{border:0;background:none;color:var(--text);min-width:32px;height:30px;border-radius:999px;font-size:16px;cursor:pointer;font-variant-numeric:tabular-nums}
.dfv-zoom .dfv-zoom-val{font-size:12.5px;font-weight:600;min-width:58px}
.dfv-zoom button:hover{background:var(--card)}
.dfv-x{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.dfv-x:hover{border-color:var(--brand);color:var(--brand)}
.dfv-scroll{flex:1;min-height:0;overflow:auto;padding:24px}
.dfv-wrap{position:relative;margin:0 auto;background:#fff;box-shadow:0 2px 4px rgba(11,24,48,.06),0 24px 60px -24px rgba(11,24,48,.35);border-radius:3px;overflow:hidden}
.dfv-side{background:var(--card);border-left:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:22px;overflow:auto}
.dfv-info{display:flex;flex-direction:column;gap:16px}
.dfv-k{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);margin-bottom:5px}
.dfv-v{font-size:14px;color:var(--text)}
.dfv-sum{font-size:24px;font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums}
.dfv-acts{display:flex;flex-direction:column;gap:8px}
.dfv-acts .btn{justify-content:center;width:100%}
@media (max-width:900px){
  .dh-main{gap:12px}
  .dh-thumb{width:64px;height:91px}
  .dh-thumb .doc-a4-page{transform:scale(calc(64 / 794))}
  .dh-thumb-zoom{width:22px;height:22px;right:4px;bottom:4px}
  .dfv{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .dfv-bar{padding:10px 12px;gap:8px}
  .dfv-title .mono{display:none}
  .dfv-scroll{padding:12px}
  .dfv-side{border-left:0;border-top:1px solid var(--border);padding:10px 12px;gap:10px}
  .dfv-info{display:none}
  .dfv-acts{flex-direction:row;flex-wrap:wrap}
  .dfv-acts .btn{flex:1 1 140px;width:auto}
}

/* Schritt 64/65: GoBD – Hinweise, Protokoll & Archiv eines Datensatzes, Finanzen › GoBD & Prüfung */
.gobd-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted)}
.gobd-record .gr-sec + .gr-sec{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.gobd-record h3{margin:0 0 10px;font-size:14px;color:var(--heading);display:flex;gap:8px;align-items:baseline}
.gr-files{display:flex;flex-direction:column;gap:8px}
.gr-file{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px}
.gr-file-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.gr-file-main b{overflow-wrap:anywhere;font-size:13px}
.gr-sha{font-family:var(--mono);font-size:11px;color:var(--text-soft)}
.gr-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gr-log li{padding:10px 0;border-bottom:1px solid var(--border-soft)}
.gr-log li:last-child{border-bottom:0}
.gr-log-h{display:flex;justify-content:space-between;gap:12px;font-size:13px;flex-wrap:wrap}
.gr-log-h span{color:var(--text-muted);font-size:12px}
.gr-fields{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.gr-fields span{font-size:11.5px;padding:1px 7px;border-radius:6px;background:var(--bg);color:var(--text-muted)}
.gr-before{margin-top:6px;font-size:12px}
.gr-before summary{cursor:pointer;color:var(--link)}
.gr-before dl{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;margin:6px 0 0}
.gr-before dt{color:var(--text-muted)} .gr-before dd{margin:0;font-family:var(--mono);font-size:11.5px;overflow-wrap:anywhere}
.gr-foot{margin-top:10px}
.gobd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gobd-grid > .card:last-child{grid-column:1 / -1}
.gobd-text{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--text-muted)}
.gobd-kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;font-size:13px}
.gobd-kv dt{color:var(--text-muted)} .gobd-kv dd{margin:0}
.gobd-ok{color:var(--success,#1c7a45);font-weight:600}
.gobd-bad{color:var(--danger,#c0392b);font-weight:600}
.gobd-hash{font-family:var(--mono);font-size:12px}
.gobd-export{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.gobd-export > div{display:flex;flex-direction:column;gap:4px}
.gobd-presets{flex-direction:row !important;gap:10px !important;padding-bottom:9px}
@media (max-width:900px){ .gobd-grid{grid-template-columns:1fr} .gr-file{flex-direction:column;align-items:flex-start} }

/* Schritt 66: E-Rechnung – Anzeige, Prüfbericht, Import */
.ev-import{cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ev-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.ev-ok{background:var(--success-bg,#E8F5EE);color:var(--success-text,#1c7a45)}
.ev-warn{background:#FFF4DE;color:#8A5A00}
.ev-bad{background:var(--danger-bg,#FDECEC);color:var(--danger-text,#B42318)}
.ev-alert{margin:0 0 14px;padding:9px 12px;border-radius:8px;background:#FFF4DE;color:#6B4700;font-size:13px}
.ev-alert-info{background:var(--brand-bg);color:var(--brand-text)}
.ev-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:20px;margin-bottom:18px}
.ev-dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0;font-size:13px}
.ev-dl dt{color:var(--text-muted)} .ev-dl dd{margin:0;font-weight:600}
.ev-party{font-size:13px;line-height:1.5}
.ev-k{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);margin-bottom:5px}
.ev-sub{font-size:12px;color:var(--text-muted)}
.ev-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:24px;margin-top:14px;align-items:start}
.ev-pay{font-size:13px;line-height:1.5}
.ev-iban{font-family:var(--mono);font-size:13px}
.ev-sum{margin:0}
.ev-report{margin-top:18px;border-top:1px solid var(--border);padding-top:12px;font-size:13px}
.ev-report summary{cursor:pointer;font-weight:600;color:var(--heading);display:flex;align-items:center;gap:10px}
.ev-report ul{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ev-report li{display:grid;grid-template-columns:62px 74px 1fr;gap:8px;align-items:baseline}
.ev-lv{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ev-l-error .ev-lv{color:var(--danger-text,#B42318)} .ev-l-warning .ev-lv{color:#8A5A00} .ev-l-info .ev-lv{color:var(--text-soft)}
.ev-code{font-family:var(--mono);font-size:11.5px;color:var(--text-muted)}
@media (max-width:900px){ .ev-head,.ev-foot{grid-template-columns:1fr} .ev-report li{grid-template-columns:1fr} }

/* Schritt 67: Beleg scannen (openScanner()) */
.scn{position:fixed;inset:0;z-index:700;display:flex;flex-direction:column;background:#111827;color:#E5E7EB}
.scn .hint{color:#9CA3AF}
.scn-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#0B1220;border-bottom:1px solid #1F2937}
.scn-bar b{font-size:15px;color:#fff}
.scn-bar .dfv-x{background:#1F2937;border-color:#374151;color:#E5E7EB}
.scn-grow{flex:1}
.scn-main{flex:1;min-height:0;display:flex;flex-direction:column}
.scn-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;font-size:14px;color:#D1D5DB}
.scn-empty p{margin:0;max-width:420px;line-height:1.5}
.scn-picks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.scn-pick{cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px}
.scn-pick svg{width:18px;height:18px}
.scn-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.scn-canvas-wrap{position:relative;touch-action:none}
.scn-canvas{display:block;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.scn-quad{position:absolute;left:0;top:0;pointer-events:none}
.scn-quad polygon{fill:rgba(47,111,224,.14);stroke:#6FC3F7;stroke-width:2}
.scn-h{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid #fff;background:rgba(47,111,224,.85);box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:grab;padding:0;touch-action:none}
.scn-h:focus-visible{outline:3px solid #6FC3F7;outline-offset:2px}
.scn-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;background:#0B1220;border-top:1px solid #1F2937}
.scn-tools .btn-secondary,.scn-foot .btn-secondary,.scn-picks .btn-secondary{background:#1F2937;color:#E5E7EB;border-color:#374151}
.scn-seg{display:inline-flex;border:1px solid #374151;border-radius:8px;overflow:hidden}
.scn-seg button{background:none;border:0;color:#D1D5DB;padding:6px 12px;font-size:12.5px;cursor:pointer;min-height:32px}
.scn-seg button.on{background:#2F6FE0;color:#fff}
.scn-hint{font-size:12px;color:#9CA3AF}
.scn-strip{display:flex;gap:10px;padding:10px 16px;overflow-x:auto;background:#0B1220;border-top:1px solid #1F2937}
.scn-th{position:relative;flex:none}
.scn-th img{display:block;height:84px;width:auto;border-radius:3px;background:#fff}
.scn-th span{position:absolute;left:4px;bottom:4px;font-size:11px;background:rgba(0,0,0,.65);color:#fff;border-radius:4px;padding:0 5px}
.scn-th-x{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;border:0;background:#B42318;color:#fff;font-size:14px;line-height:1;cursor:pointer}
.scn-foot{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#0B1220;border-top:1px solid #1F2937}
@media (max-width:700px){ .scn-hint,.scn-foot .hint{display:none} .scn-tools{gap:8px} }

/* ---------- Schritt 70: Neue Oberfläche (Vorschau) – Navigation oben (Variante A) ----------
   Gilt nur mit body.ui-v2 und nur ab 861 px Breite. Ohne die Klasse und auf dem Handy bleibt
   alles wie bisher (Seitenleiste, Hamburger, Leiste unten). */
.v2-logo,.v2-nav{display:none}
.seg2-text .seg2-opt{width:auto;padding:0 9px;font-size:12px;font-weight:500}
@media screen and (min-width:861px){
  body.ui-v2 #sidebar{display:none}
  body.ui-v2 .topbar{height:auto;flex-wrap:wrap;column-gap:20px;row-gap:0;padding:0 32px;background:var(--navy);border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  [data-theme="dark"] body.ui-v2 .topbar{background:var(--navy);border-bottom:1px solid var(--side-border)}
  body.ui-v2 .v2-logo{display:block;order:1;height:36px;width:auto;flex:none}
  body.ui-v2 .v2-nav{display:flex;order:2;align-items:stretch;height:56px;gap:2px;min-width:0}
  body.ui-v2 .gsearch{order:3;flex:0 1 360px;max-width:360px;margin:0 0 0 auto}
  body.ui-v2 .top-actions{order:4;margin-left:0}
  body.ui-v2 .crumbs{order:5;flex:0 0 calc(100% + 64px);margin:0 -32px;padding:0 32px;height:36px;background:var(--card);border-bottom:1px solid var(--border);font-family:var(--font);letter-spacing:0;font-size:12.5px}
  body.ui-v2 .gsearch-input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}
  body.ui-v2 .gsearch-input input{color:#fff}
  body.ui-v2 .gsearch-input input::placeholder{color:rgba(255,255,255,.55)}
  body.ui-v2 .gsearch-kbd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.65)}
  body.ui-v2 .top-actions .icon-btn{background:transparent;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.82)}
  body.ui-v2 .top-actions .icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}

  body.ui-v2 .v2-nav .v2-top,body.ui-v2 .v2-trigger{position:relative;display:flex;align-items:center;gap:6px;height:56px;padding:0 12px;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:rgba(255,255,255,.74);font:500 13.5px var(--font);white-space:nowrap;cursor:pointer}
  body.ui-v2 .v2-nav .v2-top:hover,body.ui-v2 .v2-trigger:hover,body.ui-v2 .v2-group.open .v2-trigger{background:none;color:#fff}
  body.ui-v2 .v2-nav .v2-top.active,body.ui-v2 .v2-group.has-active .v2-trigger{background:none;color:#fff;font-weight:500;box-shadow:none}
  body.ui-v2 .v2-nav .v2-top.active::after,body.ui-v2 .v2-group.has-active .v2-trigger::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--sky)}
  body.ui-v2 .v2-nav .nav-item:focus-visible,body.ui-v2 .v2-trigger:focus-visible{outline:2px solid var(--sky);outline-offset:-3px}
  body.ui-v2 .v2-lbl{display:inline-flex;align-items:center;gap:6px}
  body.ui-v2 .v2-badge{display:inline-block;min-width:8px;padding:0 6px;border-radius:9px;font:600 11px/17px var(--font);text-align:center;background:rgba(255,255,255,.14);color:#fff}
  body.ui-v2 .v2-badge.hidden{display:none}
  body.ui-v2 .v2-ch{width:10px;height:10px;opacity:.65;transition:transform .15s}
  body.ui-v2 .v2-group{position:relative;display:flex;margin:0}
  body.ui-v2 .v2-group.open .v2-ch{transform:rotate(180deg)}
  body.ui-v2 .v2-menu{display:none;position:absolute;top:calc(100% - 4px);left:0;min-width:310px;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 34px -14px rgba(11,24,48,.38);z-index:60}
  body.ui-v2 .v2-group.open .v2-menu{display:block}
  body.ui-v2 .v2-menu .nav-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;border-radius:6px;background:none;box-shadow:none;color:var(--text);font-size:13.5px;font-weight:400;cursor:pointer}
  body.ui-v2 .v2-menu .nav-item:hover{background:var(--bg-subtle);color:var(--heading)}
  body.ui-v2 .v2-menu .nav-item.active{background:var(--bg-subtle);color:var(--heading);font-weight:600;box-shadow:none}
  body.ui-v2 .v2-menu .nav-item:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
  body.ui-v2 .v2-menu .nav-item.hidden{display:none}
  body.ui-v2 .v2-menu .v2-badge{background:var(--brand-soft);color:var(--brand-text,var(--brand))}
  body.ui-v2 .v2-sub{font-size:12px;font-weight:400;color:var(--text-soft)}
}
/* Schritt 70: Umschalter nur am großen Bildschirm, solange die neue Oberfläche mobil noch nichts ändert */
@media screen and (max-width:860px){ .usermenu .um-ui{display:none} }

/* Schritt 70: mittlere Breiten – Suche wandert in die helle zweite Zeile neben die Brotkrumen */
@media screen and (min-width:861px) and (max-width:1640px){
  body.ui-v2 .topbar{padding:0 24px;column-gap:16px}
  body.ui-v2 .top-actions{margin-left:auto}
  body.ui-v2 .crumbs{flex:1 1 calc(100% - 420px);min-width:0;margin:0 0 0 -24px;padding:0 0 0 24px}
  body.ui-v2 .gsearch{order:6;flex:0 0 352px;max-width:none;margin:0 -24px 0 -16px;padding:0 24px 0 16px;height:36px;display:flex;align-items:center;background:var(--card);border-bottom:1px solid var(--border)}
  body.ui-v2 .gsearch-input{flex:1;height:28px;background:var(--bg-subtle);border-color:var(--border);color:var(--muted)}
  body.ui-v2 .gsearch-input input{color:var(--text)}
  body.ui-v2 .gsearch-input input::placeholder{color:var(--text-soft)}
  body.ui-v2 .gsearch-kbd{background:var(--bg-2);border-color:var(--border);color:var(--muted)}
}
@media screen and (min-width:861px) and (max-width:1060px){
  body.ui-v2 .v2-nav .v2-top,body.ui-v2 .v2-trigger{padding:0 8px;font-size:13px}
  body.ui-v2 .v2-nav .v2-top.active::after,body.ui-v2 .v2-group.has-active .v2-trigger::after{left:8px;right:8px}
  body.ui-v2 .v2-logo{height:30px}
}
@media screen and (min-width:861px) and (max-width:930px){ body.ui-v2 .v2-logo{display:none} }
@media screen and (min-width:861px){ body.ui-v2 .v2-group:last-child .v2-menu{left:auto;right:0} }

/* ---------- Schritt 71: Dashboard in der neuen Oberfläche (nur body.ui-v2, Markup aus viewDashboardV2) ----------
   Ruhiger Aufbau ohne KI-Muster: Datum statt Begrüßung, „Neu“-Menü statt vier Schnellknöpfen,
   Kennzahlen als Leiste mit Sätzen statt Pfeil-Chips und Kurven, normale Beschriftung statt
   Mono-Versalien, keine Akzentbalken vor Titeln, keine Initialen-Kreise, Status als Punkt + Wort. */
.v2-dash{max-width:1320px;font-size:13.5px;line-height:1.5}
.v2-dash h1{font-size:24px;font-weight:650;letter-spacing:-.015em;margin:0;color:var(--heading)}
.v2-dh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:4px 0 22px}
.v2-dh-sub{color:var(--muted);margin-top:4px}
.v2-pop-wrap{position:relative}
.v2-new .v2-ch{width:12px;height:12px;margin-left:1px}
.v2-pop{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:210px;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 34px -14px rgba(11,24,48,.38);z-index:50}
.v2-pop-wrap.open .v2-pop{display:block}
.v2-pop-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;border-radius:6px;font:inherit;font-size:13.5px;color:var(--text);cursor:pointer;text-align:left}
.v2-pop-item svg{width:16px;height:16px;color:var(--muted);flex:none}
.v2-pop-item:hover,.v2-pop-item:focus-visible{background:var(--bg-subtle);color:var(--heading);outline:none}
.v2-sheet{background:var(--card);border:1px solid var(--border);border-radius:10px}
.v2-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:30px}
.v2-kpi{padding:16px 20px;border-left:1px solid var(--border-soft);cursor:pointer;min-width:0}
.v2-kpi:first-child{border-left:0;border-radius:10px 0 0 10px}
.v2-kpi:last-child{border-radius:0 10px 10px 0}
.v2-kpi:hover{background:var(--bg-subtle)}
.v2-kpi:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.v2-kpi-l{color:var(--muted)}
.v2-kpi-v{font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:1.3;color:var(--heading);margin:2px 0;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-kpi-v.is-bad{color:var(--bad)}
.v2-kpi-s{font-size:12.5px;color:var(--muted)}
.v2-dgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
.v2-sec{margin-bottom:30px}
.v2-sec-h,.v2-dash .card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 10px}
.v2-dash h2{font-size:14.5px;font-weight:600;color:var(--heading);margin:0;padding:0;position:static}
.v2-dash .card-head h2::before{display:none}
.v2-dash .link{font-weight:500;font-size:12.5px}
/* Heute erledigen */
.v2-todo .mt-task,.v2-todo-sum{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border-soft);font-size:13.5px}
.v2-todo > :last-child{border-bottom:0}
.v2-todo > :first-child{border-radius:10px 10px 0 0}.v2-todo > :last-child{border-radius:0 0 10px 10px}.v2-todo > :only-child{border-radius:10px}
.v2-todo .mt-task .ic{display:none}
.v2-todo .tx{flex:1;min-width:0}
.v2-todo .tx b{display:block;font-weight:500;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-todo .tx span{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-todo .mt-task .due{font-size:12.5px;font-weight:500}
.v2-todo .act{height:32px;min-height:0;padding:0 14px;border-radius:8px;font:500 13px var(--font);white-space:nowrap;box-shadow:none;margin:0}
.v2-todo .mt-task .act{background:var(--card);border:1px solid var(--border-strong);color:var(--heading)}
/* Wie im bisherigen „Mein Tag“: die ganze Zeile ist der Link (data-goto auf der Zeile); der Knopf ist nur Beschriftung,
   damit nicht Zeile und Knopf gleichzeitig navigieren. */
.v2-todo .mt-task{cursor:pointer}
.v2-todo .mt-task .act{pointer-events:none}
.v2-todo .mt-task:hover{background:var(--bg-subtle)}
.v2-todo .mt-task:hover .act{border-color:var(--muted)}
.v2-todo .mt-task .act:hover{background:var(--bg-subtle)}
.v2-todo-sum .act{background:none;border:1px solid transparent;color:var(--text)}
.v2-todo-sum .act:hover{background:var(--bg-subtle);color:var(--heading)}
.v2-todo .empty-state{padding:18px 16px;text-align:left}
/* Offene Tickets (Karte aus dashboardTicketsCardHtml) */
.v2-dash .v2-dtickets .card,.v2-dash .v2-dfeed .card{background:none;border:0;box-shadow:none;padding:0;margin:0;border-radius:0}
.v2-dtickets .card-head > div:first-child{display:flex;align-items:baseline;gap:10px;min-width:0}
.v2-dtickets .card-head .muted{font-size:12.5px}
.v2-dtickets .card-tools{gap:12px}
.v2-dtickets .seg{background:none;border:0;padding:0;gap:2px}
.v2-dtickets .seg button{padding:3px 9px;font-size:12.5px;border-radius:6px}
.v2-dtickets .seg button.active{background:var(--bg-2);box-shadow:none;font-weight:500}
.v2-dtickets table{width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;border-collapse:separate;border-spacing:0;overflow:hidden}
.v2-dash th{font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);padding:10px 16px}
.v2-dash td{padding:11px 16px;font-size:13.5px}
.v2-dtickets tr.ticket-row-unread td:first-child{font-weight:400}
.v2-dtickets .tcell{flex-direction:row;align-items:baseline;gap:8px;min-width:0}
.v2-dtickets .tcell .mono{font-size:12.5px;white-space:nowrap}
.v2-dtickets .ttitle{font-weight:400}
.v2-dtickets tr.ticket-row-unread .ttitle{font-weight:600}
.v2-dtickets .cust .avatar{display:none}
.v2-dtickets .prio{font-size:13.5px;font-weight:400;color:var(--text)}
.v2-dtickets .prio i{display:none}
.v2-dtickets .prio.hoch{color:var(--bad)}
.v2-dtickets .prio.niedrig{color:var(--muted)}
.v2-dtickets .pill{background:none;border:0;padding:0;border-radius:0;font-size:13.5px;font-weight:400;color:var(--text);gap:7px}
.v2-dtickets .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.v2-dtickets .pill.offen::before{background:var(--brand)}
.v2-dtickets .pill.bearb::before{background:var(--warn)}
.v2-dtickets td.muted{white-space:nowrap}
.v2-dtickets .empty-state,.v2-dfeed .empty-state{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 16px;text-align:left}
/* Termine heute */
.v2-agenda{padding:4px 16px 0}
.v2-agenda .ag{gap:10px;padding:10px 0}
.v2-agenda .ag:hover .ag-title{color:var(--brand-text)}
.v2-agenda .ag-bar{display:none}
.v2-agenda .ag-time{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--muted);width:46px;padding-top:0}
.v2-agenda .ag-title{font-weight:400;color:var(--heading)}
.v2-agenda .ag .muted{font-size:12.5px;color:var(--text-soft)}
.v2-agenda .empty-state{padding:12px 0;text-align:left}
.v2-add{display:flex;align-items:center;gap:6px;width:100%;border:0;border-top:1px solid var(--border-soft);background:none;color:var(--muted);font:inherit;font-size:12.5px;padding:9px 0 10px;cursor:pointer}
.v2-add svg{width:14px;height:14px}
.v2-add:hover{color:var(--brand-text)}
/* Zuletzt (Karte aus dashboardActivityCardHtml) */
.v2-dfeed .feed{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:2px 16px}
.v2-dfeed .fi{padding:10px 0}
.v2-dfeed .fi .avatar{display:none}
.v2-dfeed .fi:hover > div > div:first-child{color:var(--brand-text)}
.v2-dfeed .fi .muted{font-size:12.5px;color:var(--text-soft)}
@media (max-width:1180px){ .v2-dgrid{grid-template-columns:minmax(0,1fr);gap:0} }
@media (max-width:1000px){
  .v2-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2-kpi:nth-child(3){border-left:0}
  .v2-kpi:nth-child(n+3){border-top:1px solid var(--border-soft)}
  .v2-kpi:first-child{border-radius:10px 0 0 0}.v2-kpi:nth-child(2){border-radius:0 10px 0 0}.v2-kpi:nth-child(3){border-radius:0 0 0 10px}.v2-kpi:last-child{border-radius:0 0 10px 0}
}
@media (max-width:560px){
  .v2-kpi{padding:12px 14px}.v2-kpi-v{font-size:21px}
  .v2-dtickets .card-head{flex-wrap:wrap;align-items:center}
}

/* ---------- Schritt 72: Rechnungen in der neuen Oberfläche (Markup aus viewInvoicingV2/renderInvoicesTabV2) ----------
   Allgemeine Bausteine für weitere Listen: .v2-tabs (Reiter als Unterstreichung), .v2-sum (Summenzeile),
   .v2-filters (Filterleiste ohne graue Box), .v2-list (Tabelle im Blatt), .v2-st (Status als Punkt + Wort). */
body.ui-v2 #content > h1{font-size:24px;font-weight:650;letter-spacing:-.015em}
.v2-ph{margin-bottom:18px}
.v2-ph h1{font-size:24px;font-weight:650;letter-spacing:-.015em;margin:0}
.v2-ph .page-head-actions{gap:8px}
.v2-quiet.btn-secondary{background:none;border-color:transparent;box-shadow:none;color:var(--text);font-weight:500}
.v2-quiet.btn-secondary:hover{background:var(--bg-subtle);color:var(--heading)}
.tabs.v2-tabs{display:flex;gap:24px;background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:0;margin:0 0 18px}
.v2-tabs .tab-item{padding:0 0 10px;margin-bottom:-1px;border-radius:0;border-bottom:2px solid transparent;background:none;box-shadow:none;font-size:13.5px;font-weight:500;color:var(--muted)}
.v2-tabs .tab-item:hover{background:none;color:var(--heading)}
[data-theme="dark"] .v2-tabs .tab-item:hover{background:none}
.v2-tabs .tab-item.active{background:none;box-shadow:none;color:var(--heading);border-bottom-color:var(--brand)}
.v2-tabs .tab-count,.v2-tabs .tab-item.active .tab-count{font-family:var(--font);font-size:13px;font-weight:400;padding:0;background:none;color:var(--text-soft)}
.v2-tabs .tab-count-alert,.v2-tabs .tab-item.active .tab-count-alert{background:none;color:var(--brand-text);font-weight:600}
.v2-inv{font-size:13.5px}
.v2-sum{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline;margin:0 0 12px;color:var(--muted)}
.v2-sum b{color:var(--heading);font-weight:600;font-variant-numeric:tabular-nums;margin-left:4px}
.v2-sum b.v2-red{color:var(--bad)}
.v2-sum-r{margin-left:auto;color:var(--text-soft)}
.v2-filters .toolbar,.v2-filters .toolbar:has(.filters){background:none;border:0;border-radius:0;padding:0;margin:0 0 12px;gap:8px}
.v2-filters .toolbar .filters{gap:8px}
.v2-filters .list-search-input,.v2-filters .toolbar:has(.filters) .list-search-input{min-width:260px !important;height:34px}
.v2-filters .toolbar:has(.filters) select{background-color:var(--card)}
.v2-filters .toggle-switch-row{color:var(--muted);font-weight:400}
.v2-sheet.v2-list{overflow:hidden}
.v2-list table{width:100%;border-collapse:separate;border-spacing:0}
.v2-list th{font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);padding:10px 16px;background:none}
.v2-list td{padding:11px 16px;font-size:13.5px}
.v2-list th.r,.v2-list td.r{text-align:right}
.v2-list .v2-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-list .v2-num-l{font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-list .v2-nr{white-space:nowrap}
.v2-list .v2-nr .mono{font-size:12.5px;color:var(--text)}
.v2-list .v2-subj{color:var(--muted);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-list tr.v2-row-storno td{color:var(--text-soft)}
.v2-list tr.v2-row-storno .mono{color:var(--text-soft)}
.v2-tag{display:inline-block;margin-left:6px;font-size:12px;color:var(--muted)}
.v2-list .badge-archived-tag{font-size:11px;padding:1px 7px;margin-left:4px}
.v2-soft{color:var(--text-soft)}
.v2-red{color:var(--bad)}
.v2-st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--text)}
.v2-st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.v2-st-blau::before{background:var(--brand)}
.v2-st-gruen::before{background:var(--ok)}
.v2-st-gelb::before{background:var(--warn)}
.v2-st-rot{color:var(--bad)}.v2-st-rot::before{background:var(--bad)}
.v2-st-hell{color:var(--text-soft)}.v2-st-hell::before{background:var(--border-strong)}
.v2-inv > .empty-state{padding:24px 16px}
@media (max-width:860px){
  .v2-sum{gap:4px 16px}.v2-sum-r{margin-left:0;width:100%}
  .tabs-wrap .tabs.v2-tabs{display:none}
  .v2-filters .list-search-input{min-width:0 !important}
  .v2-sheet.v2-list{display:none}
}

/* Schritt 72: übrige Reiter im Bereich Rechnungen (Abrechnung, Mahnungen, Wiederkehrend) – unverändertes Markup,
   nur ruhiger dargestellt: kein Akzentbalken, Filter ohne graue Box, Spaltenköpfe in normaler Schrift, Status als Punkt + Wort. */
body.ui-v2:has(.v2-tabs) #content .card{box-shadow:none;border-radius:10px}
body.ui-v2:has(.v2-tabs) #content .card > .toolbar:first-child > h2,body.ui-v2:has(.v2-tabs) #content .card-head h2,body.ui-v2:has(.v2-tabs) #content .card > h2:first-child{padding-left:0;font-size:14.5px;font-weight:600}
body.ui-v2:has(.v2-tabs) #content .card > .toolbar:first-child > h2::before,body.ui-v2:has(.v2-tabs) #content .card-head h2::before,body.ui-v2:has(.v2-tabs) #content .card > h2:first-child::before{display:none}
body.ui-v2:has(.v2-tabs) #content .toolbar:has(.filters){background:none;border:0;padding:0}
body.ui-v2:has(.v2-tabs) #content .toggle-switch-row{color:var(--muted);font-weight:400}
body.ui-v2:has(.v2-tabs) #content th{font-family:var(--font);font-size:12px;letter-spacing:0;text-transform:none}
body.ui-v2:has(.v2-tabs) #content td{font-size:13.5px}
body.ui-v2:has(.v2-tabs) #content td .badge:is(.badge-offen,.badge-bearbeitung,.badge-wartend,.badge-geschlossen,.badge-abgeschlossen,.badge-storniert,.badge-prio-hoch,.badge-prio-mittel,.badge-prio-niedrig){background:none;border:0;padding:0;border-radius:0;font-size:13.5px;font-weight:400;color:var(--text);gap:7px}
body.ui-v2:has(.v2-tabs) #content td .badge:is(.badge-offen,.badge-bearbeitung,.badge-wartend,.badge-geschlossen,.badge-abgeschlossen,.badge-storniert,.badge-prio-hoch,.badge-prio-mittel,.badge-prio-niedrig)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
body.ui-v2:has(.v2-tabs) #content td .badge-offen{color:var(--bad)}
body.ui-v2:has(.v2-tabs) #content td .badge-offen::before{background:var(--bad)}
body.ui-v2:has(.v2-tabs) #content td .badge-bearbeitung::before{background:var(--brand)}
body.ui-v2:has(.v2-tabs) #content td .badge-geschlossen::before,body.ui-v2:has(.v2-tabs) #content td .badge-abgeschlossen::before{background:var(--ok)}
body.ui-v2:has(.v2-tabs) #content td .badge-storniert{color:var(--text-soft)}
body.ui-v2:has(.v2-tabs) #content td .badge-storniert::before{background:var(--border-strong)}
.v2-ph .page-head-actions .btn.v2-quiet{font-weight:500}

/* ---------- Schritt 73: Bereich Finanzen in der neuen Oberfläche – nur CSS (body.ui-v2.v2-calm, gesetzt von v2MarkView) ----------
   Gilt für Finanzen (alle Reiter), Eingangsrechnungen, Lieferanten, Unternehmensdokumente und deren Detailseiten.
   Markup und Funktionen unverändert. */
body.ui-v2.v2-calm #content h1{font-size:24px;font-weight:650;letter-spacing:-.015em}
body.ui-v2.v2-calm #content .page-head{margin-bottom:18px}
body.ui-v2:is([data-v2view="incomingInvoices"],[data-v2view="suppliers"],[data-v2view="companyDocuments"]) #content .page-head .subtitle{display:none}
/* Karten: kein Schatten, kein Akzentbalken vor Titeln */
body.ui-v2.v2-calm #content .card{box-shadow:none;border-radius:10px}
body.ui-v2.v2-calm #content .card > .toolbar:first-child > h2,body.ui-v2.v2-calm #content .card-head h2,body.ui-v2.v2-calm #content .card > h2:first-child{padding-left:0;font-size:14.5px;font-weight:600}
body.ui-v2.v2-calm #content .card > .toolbar:first-child > h2::before,body.ui-v2.v2-calm #content .card-head h2::before,body.ui-v2.v2-calm #content .card > h2:first-child::before{display:none}
/* Reiter als Unterstreichung (am Handy bleibt das Bereichsmenü) */
@media screen and (min-width:861px){
  body.ui-v2.v2-calm #content .tabs{display:flex;gap:24px;background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:0;margin:0 0 18px}
  body.ui-v2.v2-calm #content .tabs-wrap{margin-bottom:18px}
  body.ui-v2.v2-calm #content .tabs-wrap .tabs{margin-bottom:0}
  body.ui-v2.v2-calm #content .tab-item{padding:0 0 10px;margin-bottom:-1px;border-radius:0;border-bottom:2px solid transparent;background:none;box-shadow:none;font-size:13.5px;font-weight:500;color:var(--muted)}
  body.ui-v2.v2-calm #content .tab-item:hover{background:none;color:var(--heading)}
  body.ui-v2.v2-calm #content .tab-item.active{background:none;box-shadow:none;color:var(--heading);border-bottom-color:var(--brand)}
  body.ui-v2.v2-calm #content .tab-item .tab-count{font-family:var(--font);font-size:13px;font-weight:400;padding:0;background:none;color:var(--text-soft)}
}
/* Kennzahlen als ruhige Leiste: keine farbigen Ränder, normale Beschriftung, Vergleich als Text statt Pille */
body.ui-v2.v2-calm #content :is(.kpi-grid,.kpis,.grid-stats){gap:0;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
body.ui-v2.v2-calm #content :is(.kpi,.stat){border:0;border-left:1px solid var(--border-soft);border-top:1px solid var(--border-soft);margin:-1px 0 0 -1px;border-radius:0;box-shadow:none;background:none;padding:16px 20px}
body.ui-v2.v2-calm #content .kpi:hover{transform:none;box-shadow:none;background:var(--bg-subtle)}
body.ui-v2.v2-calm #content :is(.kpi-label,.stat .label){font-family:var(--font);font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}
body.ui-v2.v2-calm #content :is(.kpi-val,.stat .num){font-weight:650}
body.ui-v2.v2-calm #content .kpi-foot{gap:6px;flex-wrap:wrap}
body.ui-v2.v2-calm #content .kpi .chip{background:none;padding:0;border-radius:0;font-size:12.5px;font-weight:500}
body.ui-v2.v2-calm #content .kpi .chip.is-neutral{color:var(--muted)}
body.ui-v2.v2-calm #content .kpi .chip svg{display:none}
body.ui-v2.v2-calm #content .kpi-hint{font-size:12.5px}
body.ui-v2.v2-calm #content .kpi .spark{display:none}
/* Kleine Beschriftungen in normaler Schrift statt Mono-Versalien */
body.ui-v2.v2-calm #content :is(.liq .l,.ye-stats .l){font-family:var(--font);font-size:12.5px;letter-spacing:0;text-transform:none}
body.ui-v2.v2-calm #content svg text{font-family:var(--font)}
/* Tabellen, Filter, Status */
body.ui-v2.v2-calm #content th{font-family:var(--font);font-size:12px;letter-spacing:0;text-transform:none}
body.ui-v2.v2-calm #content td{font-size:13.5px}
body.ui-v2.v2-calm #content .toolbar:has(.filters){background:none;border:0;padding:0}
body.ui-v2.v2-calm #content .toggle-switch-row{color:var(--muted);font-weight:400}
body.ui-v2.v2-calm #content td .badge:is(.badge-offen,.badge-bearbeitung,.badge-wartend,.badge-geschlossen,.badge-abgeschlossen,.badge-storniert,.badge-prio-hoch,.badge-prio-mittel,.badge-prio-niedrig){background:none;border:0;padding:0;border-radius:0;font-size:13.5px;font-weight:400;color:var(--text);gap:7px}
body.ui-v2.v2-calm #content td .badge:is(.badge-offen,.badge-bearbeitung,.badge-wartend,.badge-geschlossen,.badge-abgeschlossen,.badge-storniert,.badge-prio-hoch,.badge-prio-mittel,.badge-prio-niedrig)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
body.ui-v2.v2-calm #content td .badge-offen{color:var(--bad)}
body.ui-v2.v2-calm #content td .badge-offen::before{background:var(--bad)}
body.ui-v2.v2-calm #content td .badge-bearbeitung::before{background:var(--brand)}
body.ui-v2.v2-calm #content td .badge-geschlossen::before,body.ui-v2.v2-calm #content td .badge-abgeschlossen::before{background:var(--ok)}
body.ui-v2.v2-calm #content td .badge-storniert{color:var(--text-soft)}
body.ui-v2.v2-calm #content td .badge-storniert::before{background:var(--border-strong)}
body.ui-v2:is(.v2-calm,:has(.v2-tabs)) #content td .badge-prio-hoch{color:var(--bad)}
body.ui-v2:is(.v2-calm,:has(.v2-tabs)) #content td .badge-prio-hoch::before{background:var(--bad)}
body.ui-v2:is(.v2-calm,:has(.v2-tabs)) #content td .badge-prio-mittel::before{background:var(--warn)}
body.ui-v2:is(.v2-calm,:has(.v2-tabs)) #content td .badge-prio-niedrig::before{background:var(--ok)}
/* Jahresabschluss: offene Punkte ohne gelbe Flächen */
body.ui-v2.v2-calm #content .ye-item{border-color:var(--border-soft)}
body.ui-v2.v2-calm #content .ye-item.is-open{background:var(--card);border-color:var(--border)}
body.ui-v2.v2-calm #content .ye-item.is-open .ic{background:var(--warn-bg);color:var(--warn)}
body.ui-v2.v2-calm #content .ye-item .t{font-size:13.5px;font-weight:500}
body.ui-v2.v2-calm #content .ye-item .d{font-size:12.5px}

/* ---------- Schritt 74: neue Menüstruktur (7 Einträge) – Kurzbezeichnungen bei schmaleren Fenstern ---------- */
.v2-short{display:none}
@media screen and (min-width:861px) and (max-width:1240px){
  body.ui-v2 .v2-trigger .v2-full{display:none}
  body.ui-v2 .v2-trigger .v2-short{display:inline}
}

/* ---------- Schritt 75: übrige Seiten des Hauptmenüs (V2_CALM_VIEWS erweitert) – nur CSS ----------
   Zusätzlich zu Schritt 73: kleine Beschriftungen in normaler Schrift statt Mono-Versalien, keine farbigen
   Randstreifen an Hinweisboxen/Kennzahlen, Status überall als Punkt + Wort, keine Initialen-Kreise neben Kundennamen.
   Ausgenommen bleibt alles, was den gedruckten Beleg zeigt (Vorschau, Miniatur). */
body.ui-v2.v2-calm #content :is(.dow > div,.doc-action-group-label,.sn-menu .g,.n.miss .k,.art-rail .kicker,.od-kpis .k .l,.pk .l,.t > .l,.tile > .l,dl.iv-kv dt,dl.kv dt,dl.tb-kv dt,.tb-col h3,.art-group span,.thread-day span,.od-kv .k,.tx > .l,.cal-kbd-line .lbl,.bubble-head .th-ch,.iv-head .l,div > span.l):not(.doc-a4-page *):not(.dh-thumb *){font-family:var(--font);text-transform:none;letter-spacing:0;font-size:12.5px}
body.ui-v2.v2-calm #content :is(dl.kv dt,dl.iv-kv dt,dl.tb-kv dt,.od-kv .k){color:var(--muted);font-weight:400}
body.ui-v2.v2-calm #content .tb-col h3{font-size:13px;font-weight:600;color:var(--heading)}
body.ui-v2.v2-calm #content .tb-col h3 i{font-family:var(--font);font-style:normal;font-weight:400;color:var(--text-soft)}
body.ui-v2.v2-calm #content .dow > div{font-size:12px;color:var(--muted)}
body.ui-v2.v2-calm #content .thread-day span{background:none;color:var(--text-soft)}
body.ui-v2.v2-calm #content .bubble-head .th-ch{font-size:11.5px;font-weight:500}
/* Randstreifen */
body.ui-v2.v2-calm #content .info-box{border-left-width:1px;background:var(--bg-subtle);border-color:var(--border);color:var(--text)}
body.ui-v2.v2-calm #content .timer.idle{border-left-width:1px}
body.ui-v2.v2-calm #content .od-kpis{gap:0;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
body.ui-v2.v2-calm #content .od-kpis .k{border:0;border-left:1px solid var(--border-soft);border-top:1px solid var(--border-soft);margin:-1px 0 0 -1px;border-radius:0;background:none;padding:16px 20px}
body.ui-v2.v2-calm #content .od-kpis .k:before{display:none}
body.ui-v2.v2-calm #content .od-kpis .k .l{color:var(--muted);font-size:13px}
body.ui-v2.v2-calm #content .od-kpis .k .v{font-size:24px;font-weight:650}
/* Status überall als Punkt + Wort (nicht im gedruckten Beleg) */
body.ui-v2.v2-calm #content .badge:is(.badge-offen,.badge-bearbeitung,.badge-wartend,.badge-geschlossen,.badge-abgeschlossen,.badge-storniert,.badge-prio-hoch,.badge-prio-mittel,.badge-prio-niedrig):not(.doc-a4-page *),
body.ui-v2.v2-calm #content .pill:is(.offen,.bearb,.wart,.ok):not(.doc-a4-page *){background:none;border:0;padding:0;border-radius:0;font-size:13px;font-weight:400;color:var(--text);gap:7px;display:inline-flex;align-items:center}
body.ui-v2.v2-calm #content .badge:is(.badge-offen,.badge-bearbeitung,.badge-wartend,.badge-geschlossen,.badge-abgeschlossen,.badge-storniert,.badge-prio-hoch,.badge-prio-mittel,.badge-prio-niedrig):not(.doc-a4-page *)::before,
body.ui-v2.v2-calm #content .pill:is(.offen,.bearb,.wart,.ok):not(.doc-a4-page *)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
body.ui-v2.v2-calm #content :is(.badge-offen,.pill.offen,.badge-prio-hoch):not(.doc-a4-page *){color:var(--bad)}
body.ui-v2.v2-calm #content :is(.badge-offen,.pill.offen,.badge-prio-hoch):not(.doc-a4-page *)::before{background:var(--bad)}
body.ui-v2.v2-calm #content :is(.badge-bearbeitung,.pill.bearb):not(.doc-a4-page *)::before{background:var(--brand)}
body.ui-v2.v2-calm #content :is(.badge-geschlossen,.badge-abgeschlossen,.pill.ok,.badge-prio-niedrig):not(.doc-a4-page *)::before{background:var(--ok)}
body.ui-v2.v2-calm #content .badge-prio-mittel:not(.doc-a4-page *)::before{background:var(--warn)}
body.ui-v2.v2-calm #content .badge-storniert:not(.doc-a4-page *){color:var(--text-soft)}
body.ui-v2.v2-calm #content .badge-storniert:not(.doc-a4-page *)::before{background:var(--border-strong)}
/* Initialen-Kreise neben Kundennamen (Zuständig-Spalten behalten ihr Kürzel) */
body.ui-v2.v2-calm #content td .cust > .avatar.xs{display:none}

/* ---------- Schritt 78: Aufklappmenüs nach Entwurf A (Symbol, Kurzbeschreibung, Stand, Schnellanlage) ---------- */
@media screen and (min-width:861px){
  body.ui-v2 .v2-menu{min-width:410px;padding:8px}
  body.ui-v2 .v2-menu .nav-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 10px;border-radius:8px}
  body.ui-v2 .v2-menu .nav-item.hidden{display:none}
  body.ui-v2 .v2-menu .nav-item.active{font-weight:400}
  body.ui-v2 .v2-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--bg-2);color:var(--muted)}
  body.ui-v2 .v2-ic svg{width:18px;height:18px}
  body.ui-v2 .v2-menu .nav-item:hover .v2-ic{color:var(--heading)}
  body.ui-v2 .v2-menu .nav-item.active .v2-ic{background:var(--brand-bg);color:var(--brand-text)}
  body.ui-v2 .v2-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
  body.ui-v2 .v2-menu .v2-lbl{font-weight:500;color:var(--heading);display:inline-flex;align-items:center;gap:7px}
  body.ui-v2 .v2-menu .nav-item.active .v2-lbl{font-weight:600}
  body.ui-v2 .v2-menu .v2-sub{font-size:12px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.ui-v2 .v2-menu .nav-item[data-view="tasks"] .v2-badge{display:none}   /* Stand rechts zeigt bereits „x überfällig“ */
  body.ui-v2 .v2-now{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  body.ui-v2 .v2-now.is-bad{color:var(--bad)}
  body.ui-v2 .v2-now.is-warn{color:var(--warn)}
  body.ui-v2 .v2-now.is-info{color:var(--brand-text)}
  body.ui-v2 .v2-menu-ft{display:flex;flex-wrap:wrap;gap:2px;border-top:1px solid var(--border-soft);margin:6px -8px -8px;padding:7px 9px;background:var(--bg-subtle);border-radius:0 0 10px 10px}
  body.ui-v2 .v2-menu-ft.hidden{display:none}
  body.ui-v2 .v2-new-act{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;border:0;border-radius:6px;background:none;font:inherit;font-size:12.5px;color:var(--text);cursor:pointer}
  body.ui-v2 .v2-new-act svg{width:13px;height:13px;color:var(--muted)}
  body.ui-v2 .v2-new-act:hover,body.ui-v2 .v2-new-act:focus-visible{background:var(--card);color:var(--heading);outline:none;box-shadow:0 0 0 1px var(--border)}
}

/* ---------- Schritt 79: Rautenmuster in der neuen Oberfläche wieder auf allen Seiten, aber nur halb so kräftig ----------
   (bisher: hell .055 / dunkel .12 Deckkraft; jetzt .035 / .06). Ersetzt das Ausblenden aus den Schritten 71–73. */
@media screen{
  body.ui-v2{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M20 1 L39 20 L20 39 L1 20 Z' fill='none' stroke='%232F6FE0' stroke-opacity='.035' stroke-width='1'/></svg>");background-size:40px 40px}
  [data-theme="dark"] body.ui-v2,body.ui-v2[data-theme="dark"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M20 1 L39 20 L20 39 L1 20 Z' fill='none' stroke='%234A86F0' stroke-opacity='.06' stroke-width='1'/></svg>")}
}

/* ---- Schritt 81: Datenschutz-Prüfung (Einstellungen › System) – beide Oberflächen ---- */
.pc{font-size:13.5px;line-height:1.5}
.pc-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.pc-when{color:var(--muted);font-size:13px}
.pc-act{display:flex;gap:8px;flex-wrap:wrap}
.pc-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:16px}
.pc-sum>div{padding:12px 16px;border-left:1px solid var(--border-soft);display:flex;flex-direction:column;min-width:0}
.pc-sum>div:first-child{border-left:0}
.pc-sum .l{color:var(--muted);font-size:12.5px}
.pc-sum b{font-size:22px;font-weight:650;color:var(--heading);font-variant-numeric:tabular-nums;line-height:1.3}
.pc-sum b.ok{color:var(--ok)}.pc-sum b.warn{color:var(--warn)}.pc-sum b.bad{color:var(--bad)}
.pc-sum .s{font-size:12px;color:var(--muted)}
.pc-note{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:10px;color:var(--muted);font-size:12.5px;margin-bottom:20px}
.pc-note svg{width:16px;height:16px;flex:none;margin-top:1px}
.pc-sec{margin-bottom:20px}
.pc-sec h3{font-size:14px;font-weight:600;color:var(--heading);margin:0 0 8px}
.pc-list{background:var(--card);border:1px solid var(--border);border-radius:10px}
.pc-row{display:grid;grid-template-columns:14px minmax(0,1fr) 200px 150px;gap:14px;align-items:center;padding:11px 16px;border-top:1px solid var(--border-soft)}
.pc-row:first-child{border-top:0}
.pc-dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.pc-dot.warn{background:var(--warn)}.pc-dot.bad{background:var(--bad)}.pc-dot.info{background:var(--border-strong)}
.pc-t{min-width:0}
.pc-t b{display:block;font-weight:500;color:var(--heading)}
.pc-t span{display:block;font-size:12.5px;color:var(--muted)}
.pc-r{font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
.pc-r.bad{color:var(--bad)}.pc-r.warn{color:var(--warn)}
.pc-a{text-align:right;white-space:nowrap}
.pc-a .link{font-size:12.5px;cursor:pointer}
@media (max-width:760px){
  .pc-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-sum>div:nth-child(3){border-left:0}
  .pc-sum>div:nth-child(n+3){border-top:1px solid var(--border-soft)}
  .pc-row{grid-template-columns:14px minmax(0,1fr);row-gap:4px}
  .pc-row .pc-r,.pc-row .pc-a{grid-column:2;text-align:left}
}

/* ---- Schritt 85: Wartungsverträge aus Paket + Leistungsbausteinen + AVB-Fassung (beide Oberflächen) ---- */
.ct-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.ct-aside{position:sticky;top:calc(var(--topbar-h) + 12px)}
.ct-h{font-size:13.5px;font-weight:600;color:var(--heading);margin:22px 0 10px}
.ct-form .form-grid.ct-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ct-form .form-grid.ct-g4 .full2{grid-column:span 2}
.ct-count{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--bg-2);color:var(--muted);font-size:11px;font-weight:600;text-align:center;margin-left:4px}
.ct-pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.ct-pkg{display:block;border:1px solid var(--border);border-radius:9px;padding:11px 13px;cursor:pointer;background:var(--card);margin:0;font-weight:400;color:var(--text);font-size:13px}
.ct-pkg input{position:absolute;opacity:0;pointer-events:none}
.ct-pkg.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.ct-pkg b{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:var(--heading)}
.ct-pkg b span{font-weight:500;font-size:12.5px;color:var(--muted)}
.ct-pkg dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12.5px}
.ct-pkg dt{color:var(--muted)}.ct-pkg dd{margin:0;text-align:right}
.ct-pkg-none{display:flex;flex-direction:column;justify-content:center;gap:4px}
.ct-ic{width:28px;height:28px;border-radius:7px;display:inline-grid;place-items:center;background:var(--bg-2);color:var(--muted);flex:none}
.ct-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:10px 0 14px}
.ct-pick-i{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--card);cursor:pointer;font:inherit;color:var(--text)}
.ct-pick-i b{display:block;font-weight:500;color:var(--heading);font-size:13px;line-height:1.25}
.ct-pick-i span span{display:block;font-size:11.5px;color:var(--muted)}
.ct-pick-i.on{border-color:var(--brand);background:var(--brand-bg)}
.ct-pick-i.on .ct-ic{background:var(--brand);color:#fff}
.ct-pick-i.add{border-style:dashed;color:var(--muted);justify-content:center}
.ct-pick-i:hover{border-color:var(--brand-line)}
.ct-mod{border:1px solid var(--border);border-radius:10px;background:var(--card);margin-bottom:10px}
.ct-mod-h{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}
.ct-mod-t b{display:block;font-weight:600;color:var(--heading)}
.ct-mod-t span{display:block;font-size:12px;color:var(--muted)}
.ct-sp{flex:1}
.ct-chev{color:var(--muted);font-size:12px;width:14px;text-align:center}
.ct-mod-b{border-top:1px solid var(--border-soft);padding:12px 14px 14px}
.ct-sec{font-size:12px;font-weight:600;color:var(--heading);margin:14px 0 6px}
.ct-sec:first-child{margin-top:0}
.ct-sec span{font-weight:400;color:var(--muted);margin-left:6px}
.ct-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 12px}
.ct-tablewrap{overflow-x:auto}
table.ct-svc{width:100%;border-collapse:collapse}
table.ct-svc th{text-align:left;font-size:11.5px;font-weight:500;color:var(--muted);padding:0 6px 5px;border-bottom:1px solid var(--border-soft);text-transform:none;letter-spacing:0;font-family:var(--font);background:none}
table.ct-svc td{padding:6px;border-bottom:1px solid var(--border-soft);vertical-align:middle;font-size:13px}
table.ct-svc td:first-child{width:26px}
table.ct-svc td:nth-child(3){width:150px}table.ct-svc td:nth-child(4){width:140px}table.ct-svc td:last-child{width:30px}
table.ct-svc tr.off td:nth-child(2){color:var(--text-soft)}
table.ct-svc select,table.ct-svc input[type=text]{width:100%;min-width:0;padding:5px 8px;font-size:12.5px}
table.ct-svc input[type=checkbox]{width:auto}
.ct-add{display:inline-block;font-size:12.5px;margin-top:6px;cursor:pointer}
.ct-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-ul{margin:0;padding:0;list-style:none;font-size:13px}
.ct-ul li{display:flex;gap:8px;padding:2px 0}
.ct-ul li:before{content:"•";color:var(--muted)}
.ct-ul.x li:before{content:"–"}
.ct-two textarea{width:100%;min-height:52px}
.ct-docs h3{font-size:14px;margin:0 0 2px;color:var(--heading)}
.ct-doc{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--border-soft)}
.ct-docs .hint + .ct-doc{border-top:0;margin-top:6px}
.ct-doc .n{width:24px;height:24px;border-radius:6px;background:var(--bg-2);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--muted);flex:none}
.ct-doc > div{min-width:0;flex:1}
.ct-doc b{display:block;font-weight:500;color:var(--heading);font-size:13px}
.ct-doc span{display:block;font-size:12px;color:var(--muted)}
.ct-doc select{width:100%;margin-top:4px;font-size:12.5px;padding:5px 8px}
.ct-doc .checkbox-row{margin:4px 0 0;font-weight:400;color:var(--text)}
.ct-doc-btns{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.ct-doc-btns .btn{justify-content:flex-start}
.ct-note{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.45}
.ct-legacy{margin-bottom:14px}
/* Einstellungen › Wartungsverträge */
.ct-lib .subtabs{margin-bottom:14px}
.ct-libgrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.ct-liblist{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px}
.ct-li{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;cursor:pointer;color:var(--text);text-decoration:none}
.ct-li:hover{background:var(--bg-subtle)}
.ct-li.on{background:var(--brand-bg)}
.ct-li.on .ct-ic{background:var(--brand);color:#fff}
.ct-li.off{opacity:.6}
.ct-li b{display:block;font-weight:500;color:var(--heading);font-size:13px;line-height:1.2}
.ct-li span span{display:block;font-size:11.5px;color:var(--muted)}
.ct-li.add{color:var(--brand-text);font-size:13px;padding:9px 10px}
.ct-modform-h{display:flex;align-items:flex-start;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ct-modform-h h3{margin:0;font-size:15px;color:var(--heading)}
.ct-rows .ct-row{margin-bottom:6px}
.ct-rows .ct-row input[type=text]{flex:1 1 200px}
.ct-row input[type=checkbox]{flex:none;min-width:0;width:auto}
.ct-row .checkbox-row{margin:0;flex:none;font-weight:400;color:var(--text)}
.ct-pkgrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 12px;padding:12px 0;border-top:1px solid var(--border-soft)}
.ct-pkgrow:first-child{border-top:0;padding-top:0}
.ct-pkgrow .w2{grid-column:span 3}
.ct-pkgrow label{margin-bottom:4px}
.ct-pkgrow input,.ct-pkgrow select{width:100%}
.ct-pkgrow-a{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
table.ct-avbt{width:100%;border-collapse:collapse}
table.ct-avbt th{text-align:left;font-size:11.5px;font-weight:500;color:var(--muted);padding:0 8px 6px;border-bottom:1px solid var(--border-soft);text-transform:none;letter-spacing:0;font-family:var(--font);background:none}
table.ct-avbt td{padding:8px;border-bottom:1px solid var(--border-soft);font-size:13px;vertical-align:top}
table.ct-avbt td b{font-weight:600;color:var(--heading)}
.ct-actions{white-space:nowrap;text-align:right}.ct-actions a{margin-left:12px;cursor:pointer}
.ct-avb-text pre{white-space:pre-wrap;font-family:var(--mono);font-size:12px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px;padding:12px;margin:0;max-height:360px;overflow:auto}
@media (max-width:1100px){
  .ct-layout{grid-template-columns:1fr}
  .ct-aside{position:static}
  .ct-form .form-grid.ct-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-libgrid{grid-template-columns:1fr}
  .ct-pkgrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-pkgrow .w2{grid-column:1/-1}
}
@media (max-width:640px){
  .ct-two{grid-template-columns:1fr}
  .ct-form .form-grid.ct-g4{grid-template-columns:1fr}
  .ct-form .form-grid.ct-g4 .full2{grid-column:auto}
  table.ct-svc td:nth-child(3),table.ct-svc td:nth-child(4){width:auto}
}

/* ---- Schritt 86: fehlende Pflichtangabe in der Leistungsbeschreibung ---- */
.ct-mod input.ct-invalid,.ct-mod select.ct-invalid{border-color:var(--danger,#d64545)!important;box-shadow:0 0 0 3px rgba(214,69,69,.15)}

/* ---- Schritt 89: Auswahlvertrag in der Vertragsliste ---- */
.ct-choice{position:relative}
.ct-choice>summary{list-style:none;cursor:pointer}
.ct-choice>summary::-webkit-details-marker{display:none}
.ct-choice-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:320px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(15,23,42,.14);padding:14px;display:flex;flex-direction:column;gap:6px;text-align:left}
.ct-choice-pop b{font-size:13.5px;color:var(--heading)}
.ct-choice-pop span{font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:4px}
.ct-choice-pop label{font-size:12px;margin:4px 0 0}
.ct-choice-pop select{width:100%!important;max-width:none!important}
.ct-choice-pop .btn{align-self:flex-start;margin-top:6px}
@media (max-width:640px){.ct-choice-pop{position:fixed;left:16px;right:16px;top:auto;width:auto;margin-top:6px}}

/* ---- Schritt 91: Standardkonditionen, Auswahlvertrag je Kunde, Listen-Angaben ---- */
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:500;background:var(--card);color:var(--text);margin:0;cursor:pointer}
.ct-chip.on{border-color:var(--brand);background:var(--brand-bg)}
.ct-chip input{margin:0}
.ct-dev{display:inline-block;font-size:11px;font-weight:600;color:#9a5b00;background:#fff4e0;border:1px solid #f3d29c;border-radius:999px;padding:0 7px;margin-left:6px;vertical-align:1px;line-height:1.5}
[data-theme="dark"] .ct-dev{color:#ffcf85;background:rgba(255,170,40,.12);border-color:rgba(255,170,40,.35)}
.ct-dev.hidden{display:none}
.ct-num{text-align:right;white-space:nowrap}
table.ct-offerpk td{vertical-align:middle}
table.ct-offerpk td:first-child{width:70px}
table.ct-offerpk td:nth-child(3),table.ct-offerpk td:nth-child(4){width:auto}
table.ct-offerpk td:last-child{width:170px}
table.ct-offerpk input[type=number]{width:100%;min-width:0;padding:5px 8px;font-size:12.5px}
.ct-offer .ct-h:first-child{margin-top:0}
.ct-offer-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.ct-offer-btns{display:flex;gap:8px}
.ct-offers .toolbar{margin-bottom:4px}
.ct-offer-it{display:grid;grid-template-columns:1.2fr 1fr 1.5fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--border-soft)}
.ct-offer-it b{font-weight:600;color:var(--heading)}
.ct-offer-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ct-fromoffer{margin-bottom:14px}
.ct-list{margin-top:12px}
table.ct-listtab td{width:auto!important}
table.ct-listtab td:last-child{width:30px!important}
table.ct-listtab select,table.ct-listtab input[type=text]{width:100%;min-width:0}
.ct-fieldrow{flex-wrap:wrap}
.ct-listcfg{flex-basis:100%;margin:2px 0 6px 12px;padding-left:12px;border-left:2px solid var(--border)}
.ct-listcfg .hint{margin-bottom:6px}
.ct-colrow{display:flex;gap:8px;margin-bottom:6px;align-items:center}
.ct-colrow input[type=text]{flex:1 1 160px;min-width:0}
.ct-rowsn{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:400;margin-top:8px;color:var(--muted)}
.ct-rowsn input{width:70px!important;flex:none!important;min-width:0!important}
@media (max-width:900px){.ct-offer-it{grid-template-columns:1fr}.ct-offer-acts{justify-content:flex-start}}
@media (max-width:640px){table.ct-offerpk th:nth-child(3),table.ct-offerpk td:nth-child(3),table.ct-offerpk th:nth-child(4),table.ct-offerpk td:nth-child(4){display:none}}

/* ---------------- Schritt 100: Beleg-Vorschau in den Maßen des PDFs (buildDocPdf()) ----------------
   Gilt nur für .doc-a4-page.doc-mm (Belegdetail-Miniatur, Fokusansicht, Vorschau-Dialog). Die Seite ist
   794 px = 210 mm breit, daher entsprechen mm/pt hier 1:1 den Werten im PDF (Schrift Helvetica,
   Satzspiegel 25/20 mm, Kopf ab 7 mm, Fußzeile ab 260 mm). Abstände sind aus den y-Schritten des PDFs
   abgeleitet; bei Änderungen im PDF hier mitziehen. */
.doc-a4-page.doc-mm{padding:7mm 20mm 0 25mm;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;color:#1F2430;font-size:9.5pt;line-height:1.2}
.doc-a4-page.doc-mm p{margin:0}
.doc-a4-page.doc-mm .doc-header-modern{margin:0 0 20.1mm;align-items:flex-start}
.doc-a4-page.doc-mm .doc-logo-modern{height:16mm;width:auto;display:block}
.doc-a4-page.doc-mm .doc-tag-pill{margin-top:6.25mm;height:5.5mm;padding:0 3.2mm 0 4mm;border-radius:2.75mm;border-width:.25mm;font-size:7pt;letter-spacing:.8mm;line-height:5.5mm;font-weight:700}
.doc-a4-page.doc-mm .doc-info-row{display:flex;justify-content:flex-start;gap:0;margin:0 0 9.5mm}
.doc-a4-page.doc-mm .doc-info-address{flex:0 0 100mm;width:100mm}
.doc-a4-page.doc-mm .doc-sender-line-modern{font-size:6pt;line-height:2.5mm;color:#8B93A1;margin:0 0 2.1mm}
.doc-a4-page.doc-mm .doc-address-modern{font-size:9.5pt;line-height:4.5mm;color:#1F2430}
.doc-a4-page.doc-mm .doc-info-block-modern{position:relative;top:-1mm;font-size:8pt;line-height:4mm;border-collapse:collapse}
.doc-a4-page.doc-mm .doc-info-block-modern td{padding:0;line-height:4mm;white-space:nowrap}
.doc-a4-page.doc-mm .doc-info-block-modern td:first-child{width:27mm;padding:0;color:#8B93A1;font-weight:400}
.doc-a4-page.doc-mm .doc-info-block-modern td:last-child{font-weight:700;color:#1F2430}
.doc-a4-page.doc-mm .doc-subject-modern{font-size:11.5pt;line-height:5mm;font-weight:700;color:#1F2430;margin:0 0 2.5mm}
.doc-a4-page.doc-mm .doc-intro-modern{font-size:9.5pt;line-height:4.4mm;color:#4B5563;margin:0}
.doc-a4-page.doc-mm .doc-salutation-modern{display:block;margin-bottom:3mm}
.doc-a4-page.doc-mm .doc-notes-modern{margin:4.1mm 0 0;font-size:9pt;line-height:4.4mm;font-style:italic;color:#5A5A5A}
/* Positionstabelle wie AutoTable (theme plain): Kopf 7,5 pt fett hell auf Fläche, Zellen 8,5 pt,
   2 mm seitlicher Innenabstand, 6 mm Abstand zwischen Positionen, 1 mm innerhalb einer Position */
.doc-a4-page.doc-mm .pos-table{margin-top:7.2mm;width:100%;border-collapse:collapse;font-size:8.5pt;line-height:1.15;color:#1F2430;border-bottom:.2mm solid #E2E7EF}
.doc-a4-page.doc-mm .pos-table thead th{padding:2.2mm 2mm;font-size:7.5pt;font-weight:700;line-height:1.15;color:#8B93A1;background:#F3F6FA;text-transform:none;letter-spacing:0;text-align:left;border-radius:0;white-space:nowrap}
.doc-a4-page.doc-mm .pos-table tbody td{padding:1mm 2mm;border:0;vertical-align:top}
.doc-a4-page.doc-mm .pos-table tbody tr.pr-first td{padding-top:6mm}
.doc-a4-page.doc-mm .pos-table tbody tr.pr-last td{padding-bottom:6mm}
.doc-a4-page.doc-mm .pos-table .c-pos{width:10mm;box-sizing:border-box}
.doc-a4-page.doc-mm .pos-table .c-n{width:1%;white-space:nowrap}
/* Spaltenbreite wie autoColWidth() im PDF: Kopf wird dort mit 8 pt gemessen + 1 mm Zuschlag */
.doc-a4-page.doc-mm .pos-table th.c-n{padding-right:3.8mm}
.doc-a4-page.doc-mm .pos-table td.c-r{text-align:right}
.doc-a4-page.doc-mm .pos-table td.c-desc strong{font-weight:700}
.doc-a4-page.doc-mm .pos-table td.c-info{font-style:italic;color:#5A5A5A}
.doc-a4-page.doc-mm .pos-table td.c-bul{color:#1F2430}
/* Summenblock: 70 mm + 3 mm Fläche, Zeilen 5 mm, Gesamtsumme 8 mm hoch */
.doc-a4-page.doc-mm .totals-box{width:73mm;max-width:none;margin:2.6mm 0 0 auto;font-size:9pt;color:#111}
.doc-a4-page.doc-mm .totals-box div{display:flex;justify-content:space-between;align-items:baseline;padding:0 0 0 3mm;line-height:5mm;min-height:5mm}
.doc-a4-page.doc-mm .totals-box div span:first-child{padding-right:2mm}
.doc-a4-page.doc-mm .totals-box div span:last-child{white-space:nowrap}
.doc-a4-page.doc-mm .totals-box .grand{margin-top:3mm;height:8mm;align-items:center;padding:0 0 0 3mm;background:#EEF3FA;border-radius:1.2mm;font-weight:700;color:#1F2430}
.doc-a4-page.doc-mm .totals-box .note{font-size:8.5pt;font-style:italic;color:#828282;line-height:4.5mm}
.doc-a4-page.doc-mm .doc-ku-note{margin:2.9mm 0 0;font-size:8pt;line-height:3.5mm;color:#555}
.doc-a4-page.doc-mm .doc-pay-term{margin:5.8mm 0 0;font-size:9.5pt;line-height:4.6mm;font-weight:700;color:#111}
.doc-a4-page.doc-mm .doc-retention-modern{margin:3mm 0 0;font-size:9pt;line-height:4.4mm;font-style:italic;color:#5A5A5A}
.doc-a4-page.doc-mm .doc-bank-text,.doc-a4-page.doc-mm .doc-bank-notice,.doc-a4-page.doc-mm .doc-footer-note{margin:3mm 0 0;font-size:9pt;line-height:4.4mm;color:#111}
.doc-a4-page.doc-mm .doc-pay-box + .doc-bank-notice{margin-top:5.9mm}
/* GiroCode-Box (Variante E, siehe beleg-design-spec Abschnitt 6a) */
.doc-a4-page.doc-mm .doc-pay-box{display:flex;align-items:center;gap:7mm;margin:7.3mm 0 0;padding:5mm;min-height:32mm;box-sizing:border-box;background:#F3F6FA;border-radius:2mm}
.doc-a4-page.doc-mm .doc-pay-qr{flex:none;width:22mm;height:22mm;padding:1.2mm;margin:-1.2mm;background:#fff;border-radius:1mm;box-sizing:content-box;display:block}
.doc-a4-page.doc-mm .doc-pay-qr img{width:22mm;height:22mm;display:block;image-rendering:pixelated}
.doc-a4-page.doc-mm .doc-pay-txt{font-size:8.3pt;line-height:3.9mm;color:#4B5563}
.doc-a4-page.doc-mm .doc-pay-k{font-size:5.8pt;font-weight:700;letter-spacing:.45mm;text-transform:uppercase;color:#8B93A1;line-height:2.5mm;margin-bottom:2.2mm}
.doc-a4-page.doc-mm .doc-pay-h + .doc-pay-iban{margin-top:1.6mm}
.doc-a4-page.doc-mm .doc-pay-iban{color:#1F2430;white-space:pre-wrap}
/* Raten-/Meilensteintabelle wie im PDF */
.doc-a4-page.doc-mm .doc-plan-modern{margin-top:3mm}
.doc-a4-page.doc-mm .doc-plan-title{font-size:9.5pt;font-weight:700;line-height:5mm;margin:0}
.doc-a4-page.doc-mm .doc-plan-table{width:100%;border-collapse:collapse;font-size:9pt;line-height:4mm}
.doc-a4-page.doc-mm .doc-plan-table th{font-weight:700;padding:0 0 .6mm;border-bottom:.2mm solid #C8C8C8}
.doc-a4-page.doc-mm .doc-plan-table td{padding:1mm 0 .6mm}
.doc-a4-page.doc-mm .doc-plan-raten td{border-bottom:.15mm solid #EBEBEB}
.doc-a4-page.doc-mm .doc-plan-raten th:first-child,.doc-a4-page.doc-mm .doc-plan-raten td:first-child{width:40%}
.doc-a4-page.doc-mm .doc-plan-raten th:nth-child(2),.doc-a4-page.doc-mm .doc-plan-raten td:nth-child(2){width:15%}
.doc-a4-page.doc-mm .doc-plan-ms th:first-child,.doc-a4-page.doc-mm .doc-plan-ms td:first-child{width:60%}
.doc-a4-page.doc-mm .doc-plan-ms th:nth-child(2),.doc-a4-page.doc-mm .doc-plan-ms td:nth-child(2){width:15%}
/* Fußzeile: Haarlinie bei 260 mm, Spaltenköpfe 5,8 pt, Werte 7 pt, Seitenzahl bei 287 mm */
.doc-a4-page.doc-mm > .doc-footer-fixed{margin-top:auto;height:37mm;box-sizing:border-box;position:static;background:transparent;padding-top:0}
.doc-a4-page.doc-mm .doc-footer-modern{display:flex;justify-content:space-between;gap:4mm;border-top:.2mm solid #E2E7EF;padding-top:4mm;font-size:7pt;line-height:3.25mm;color:#4B5563}
.doc-a4-page.doc-mm .doc-footer-modern-heading{font-size:5.8pt;line-height:2.5mm;letter-spacing:.45mm;margin-bottom:.8mm}
.doc-a4-page.doc-mm .doc-footer-modern-name{font-weight:700;color:#1F2430}
.doc-a4-page.doc-mm .doc-page-num-modern{position:absolute;right:20mm;bottom:9.3mm;margin:0;font-size:6.5pt;line-height:1;color:#8B93A1}
/* Schritt 101: aufgeteilte Vorschau - einzelne A4-Blätter (siehe docMmPaginate()) */
.doc-a4-page.doc-mm.doc-mm-book{padding:0;min-height:0;display:block;background:transparent !important;box-shadow:none}
.doc-a4-page.doc-mm .doc-mm-sheet{position:relative;width:794px;height:1123px;box-sizing:border-box;padding:7mm 20mm 0 25mm;background-color:#fff;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 4px rgba(11,24,48,.18)}
.doc-a4-page.doc-mm .doc-mm-sheet.doc-mm-pattern{background-repeat:no-repeat;background-position:left top;background-size:100% auto}
.doc-a4-page.doc-mm .doc-mm-sheet + .doc-mm-sheet{margin-top:18px}
.doc-a4-page.doc-mm .doc-mm-sheet.doc-mm-follow{padding-top:27mm}
.doc-a4-page.doc-mm .doc-mm-sheet > *{flex-shrink:0}
.doc-a4-page.doc-mm .doc-mm-sheet > .doc-footer-fixed{margin-top:auto;height:37mm;box-sizing:border-box;background:transparent;padding-top:0}
.doc-a4-page.doc-mm .doc-mm-runhead{position:absolute;top:17.3mm;right:20mm;font-size:8pt;line-height:1;color:#6B7280}
.doc-a4-page.doc-mm .doc-mm-follow > .pos-table.pt-cont{margin-top:0}
.doc-a4-page.doc-mm .pos-table.pt-split{border-bottom:0}
.doc-a4-wrap.doc-a4-book{background:transparent;box-shadow:none;overflow:visible;border-radius:0}
.dh-thumb .doc-a4-page.doc-mm-book .doc-mm-sheet{box-shadow:none}

/* ---------- Schritt 104: Aufklappmenüs nach Entwurf B - einzeilig, feine Linien-Symbole ohne Kachel,
   keine Beschreibung, roter Punkt nur bei Überfälligem, Schnellanlage als eine Zeile „Neu: …“ ---------- */
@media screen and (min-width:861px){
  body.ui-v2 .v2-menu{min-width:250px;width:max-content;padding:6px}
  body.ui-v2 .v2-menu .nav-item{grid-template-columns:16px minmax(0,1fr) auto;gap:10px;min-height:36px;padding:0 10px;border-radius:6px;white-space:nowrap}
  body.ui-v2 .v2-ic{width:16px;height:16px;border-radius:0;background:none;color:var(--muted)}
  body.ui-v2 .v2-ic svg{width:16px;height:16px}
  body.ui-v2 .v2-menu .nav-item.active .v2-ic{background:none;color:var(--brand-text)}
  body.ui-v2 .v2-menu .v2-sub{display:none}
  body.ui-v2 .v2-menu .v2-lbl{font-weight:400;font-size:13.5px}
  body.ui-v2 .v2-menu .nav-item.active .v2-lbl{font-weight:600}
  body.ui-v2 .v2-now{display:none}
  body.ui-v2 .v2-now.is-bad{display:block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:var(--bad);font-size:0;line-height:0;color:transparent;overflow:hidden}
  body.ui-v2 .v2-menu-ft{display:block;margin:6px 0 0;padding:6px 0 0;border-top:1px solid var(--border-soft);background:none;border-radius:0}
  body.ui-v2 .v2-menu-ft.hidden{display:none}
  body.ui-v2 .v2-new-row{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:6px;background:none;font:inherit;font-size:13px;color:var(--text);text-align:left;cursor:pointer;white-space:nowrap}
  body.ui-v2 .v2-new-row svg{width:16px;height:13px;color:var(--muted);flex:none}
  body.ui-v2 .v2-new-row:hover,body.ui-v2 .v2-new-row:focus-visible{background:var(--bg-subtle);color:var(--heading);outline:none}
  body.ui-v2 .v2-menu-ft.open .v2-new-row{color:var(--heading)}
  body.ui-v2 .v2-new-list{display:none;padding:2px 0 0}
  body.ui-v2 .v2-menu-ft.open .v2-new-list{display:block}
  body.ui-v2 .v2-new-list .v2-new-act{display:flex;width:100%;height:32px;padding:0 10px 0 36px;font-size:13px;box-shadow:none}
  body.ui-v2 .v2-new-list .v2-new-act:hover,body.ui-v2 .v2-new-list .v2-new-act:focus-visible{background:var(--bg-subtle);box-shadow:none}
}