/* Schrift lokal statt Google Fonts (03.11.2026): Plus Jakarta Sans, variable Schrift 400–800, SIL Open Font License
   (assets/fonts/OFL.txt). Zeichenbereiche wie bei Google: latin-ext und latin. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* SEA Suite – Stile aus v7 + v8-Ergänzungen am Ende.
   Alle Farben der Themes stehen nur hier in .th-dark / .th-light (Klasse am <html>, gesetzt von applyTheme in app.js).
   --p4t/--p6t: Textfarbe für Prio 4 und 6 (Hellgelb/Weiß brauchen im hellen Theme eine dunkle Variante);
   --viz-*: Diagrammfarben, geprüfte Palette (dataviz-Validator, beide Themes), bewusst nicht die Prioritätsfarben;
   --mark/--logo-bg: Bildmarke und Logo-Fläche (in beiden Themes gleich); --onfill: Schrift/Knopf auf Farbflächen */
body{margin:0}
.th-dark{--done:#2fbf83;--donefg:#0d0f14;--bg:#0d0f14;--card:#161a22;--hi:#1d222c;--line:#2a303c;--text:#eef0f4;--muted:#a0a8b8;--brand:#ff6670;--btn:#e30613;--btnfg:#fff;--p1:#ff6b6b;--p2:#ff9a52;--p3:#f5c04a;--p4:#f9dc8a;--p5:#3ddc97;--p6:#ffffff;--p1bg:rgba(255,107,107,.15);--p2bg:rgba(255,154,82,.15);--p3bg:rgba(245,192,74,.15);--p4bg:rgba(249,220,138,.13);--p5bg:rgba(61,220,151,.13);--p6bg:rgba(255,255,255,.12);--p4t:#f9dc8a;--p6t:#ffffff;--scrim:rgba(0,0,0,.55);--toast:#eef0f4;--toastfg:#12151b;--sel:rgba(255,102,112,.09);--warn:#f5c04a;--logo:#fff;--viz-new:#3987e5;--viz-done:#199e70;--mark:#e30613;--logo-bg:#12151b;--onfill:#fff;--heat-red:#b5403c;--heat-green:#23a26b;--heat-mid:#2a303c;color-scheme:dark}
.th-light{--done:#0e7a52;--donefg:#ffffff;--bg:#f3f4f7;--card:#ffffff;--hi:#f5f6f9;--line:#e1e4ea;--text:#12151b;--muted:#5b6272;--brand:#c4040f;--btn:#d10511;--btnfg:#fff;--p1:#c42a1e;--p2:#b9430a;--p3:#8a5f00;--p4:#e9bf3c;--p5:#0e7259;--p6:#ffffff;--p1bg:#fdeceb;--p2bg:#fdf0e7;--p3bg:#fbf3df;--p4bg:#fdf8e6;--p5bg:#e5f4ef;--p6bg:#eef0f4;--p4t:#8a6d1a;--p6t:#4b5563;--scrim:rgba(16,24,40,.32);--toast:#12151b;--toastfg:#fff;--sel:#fdf1f2;--warn:#8a5f00;--logo:#12151b;--viz-new:#2a78d6;--viz-done:#1baf7a;--mark:#e30613;--logo-bg:#12151b;--onfill:#fff;--heat-red:#f08a82;--heat-green:#5cc293;--heat-mid:#ffffff;color-scheme:light}
html{background:var(--bg)}
.root{background:var(--bg);color:var(--text);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;line-height:1.45;min-height:100vh}
.root *{box-sizing:border-box}
.root button,.root select,.root input{font:inherit;color:inherit}
.root button{cursor:pointer}
.root a{color:inherit;text-decoration:none}
.root :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sr,.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:18px;height:18px;flex:none}
.i-sm{width:14px;height:14px;flex:none}
.app{display:flex;flex-wrap:wrap;min-height:100vh}
.side{flex:1 1 220px;max-width:236px;background:var(--card);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:2px}
/* Hauptnavigation bleibt stehen, Abmelden unten links; bei sehr kleinen Fenstern scrollt nur die Leiste selbst */
.side{position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;overscroll-behavior:contain}
.col{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 18px}
.mark{display:flex;align-items:flex-end;gap:3px;height:24px}
.mark i{display:block;width:7px;background:var(--mark);border-radius:1px}
.wm{display:flex;flex-direction:column;line-height:1;color:var(--logo)}
.wm b{font-size:17px;font-weight:800;letter-spacing:.02em}
.wm span{font-size:11px;font-weight:600;letter-spacing:.18em}
.ed-badge{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);border:1px solid var(--brand);border-radius:6px;padding:2px 6px;margin-left:auto}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:600;text-align:left;min-height:42px}
.nav-item:hover{background:var(--hi);color:var(--text)}
.nav-item.on{background:var(--hi);color:var(--text);box-shadow:inset 3px 0 0 var(--brand)}
.nav-item .lbl{flex:1}
.nav-badge{font-size:11px;font-weight:800;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--p1bg);color:var(--p1);display:inline-grid;place-items:center}
.lock{color:var(--muted);display:inline-flex}
.nav-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:16px 12px 6px}
.spacer{flex:1;min-height:16px}
.user{display:flex;align-items:center;gap:10px;border:0;background:none;padding:10px;border-radius:12px;text-align:left}
.user:hover{background:var(--hi)}
.me{width:36px;height:36px;border-radius:10px;background:var(--btn);color:var(--btnfg);display:grid;place-items:center;font-weight:800;flex:none}
.user small{display:block;color:var(--muted);font-size:12px}
.top{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.top-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 28px}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 12px;min-height:42px;flex:1 1 240px;max-width:420px}
.search:focus-within{border-color:var(--brand)}
.search input,.root .search input:focus-visible{border:0;outline:0;background:none;width:100%;min-height:40px}
.search input::placeholder{color:var(--muted)}
.top-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.sel{background:var(--card);border:1px solid var(--line);border-radius:12px;min-height:42px;padding:0 10px;font-weight:600}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;position:relative;flex:none}
.icon-btn:hover{border-color:var(--muted)}
.pip{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--brand);border:2px solid var(--card)}
.main{padding:26px 28px 120px;max-width:none;width:100%}
.main[data-w="text"]{max-width:1200px}   /* Textseiten lesbar schmal, alle anderen volle Breite (renderMain, 14.11.2026) */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px;margin-bottom:26px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px}
.h1{font-size:28px;margin:0;letter-spacing:-.02em;font-weight:800}
.h2{font-size:18px;margin:0;font-weight:700}
.h2b{font-size:22px;margin:0;font-weight:800;letter-spacing:-.01em}
.muted{color:var(--muted);margin:4px 0 0}
.stand{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px}
.sd{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 3px}
.sd.stale{color:var(--warn);border-color:var(--warn)}
.ch{display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 5px;border-radius:6px;background:var(--hi);border:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.02em;color:var(--text)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px}
.tile{background:var(--hi);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.tile-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;font-weight:600}
.tile-val{font-size:27px;font-weight:800;letter-spacing:-.03em;margin-top:3px}
.tile-hint{font-size:12px;color:var(--muted)}
/* Profimodus (Einstellungen › Darstellung): Erklärtexte (.ex) ausblenden, Klasse pro am <html> */
.pro .ex{display:none!important}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.dist{display:flex;height:8px;border-radius:99px;overflow:hidden;margin-top:16px;gap:2px;background:var(--hi)}
.focus-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.focus{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--hi);border:1px solid var(--line);text-align:left;width:100%;min-height:58px}
.focus:hover{border-color:var(--brand)}
.focus-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.focus-t{font-weight:700}
.focus-s{color:var(--muted);font-size:12px}
.cost{font-weight:800;font-size:13px;white-space:nowrap}
.go{color:var(--brand);display:inline-flex}
.all-ok{display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;background:var(--p5bg);color:var(--p5);font-weight:700}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:16px}
.fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.push{margin-left:auto}
.flabel{color:var(--muted);font-size:12px;font-weight:600}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 12px;border-radius:9px;color:var(--muted);font-weight:600;font-size:13px;min-height:34px}
.seg button.on{background:var(--hi);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:4px 12px 4px 5px;font-size:13px;font-weight:600;min-height:36px}
.chip.off{opacity:.5;border-style:dashed;text-decoration:line-through}
.linkbtn{border:0;background:none;color:var(--brand);font-weight:700;text-decoration:underline;min-height:36px;padding:0 4px}
.linkbtn.need-link{min-height:0;padding:0;color:var(--text);font-weight:600;text-underline-offset:3px;text-decoration-color:var(--muted)}
.linkbtn.need-link:hover,.linkbtn.need-link.on{color:var(--brand);text-decoration-color:currentColor}
.linkbtn.need-link.on{font-weight:800}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(min(100%,320px),calc(33.333% - 12px)),1fr));gap:18px}   /* Automatisch: so viele ≥ 320 px passen, höchstens 3 (15.11.2026) */
.grid.two{grid-template-columns:repeat(auto-fill,minmax(max(min(100%,320px),calc(50% - 9px)),1fr))}
/* Einstellungen › Dashboard „Kunden nebeneinander“ (fest 1/2/3): höchstens so viele Spalten; schmale Fenster brechen um */
.grid.cols-1{grid-template-columns:minmax(0,1fr)}
.grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(max(min(100%,320px),calc(50% - 9px)),1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(max(min(100%,280px),calc(33.333% - 12px)),1fr))} /* User mit 2 Kunden: immer 2 Spalten über die volle Breite – auch wenn ein Filter nur 1 Kachel übrig lässt (Breite bleibt); schmal: 1 Spalte */
.cust{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px}
.cust.crit{border-top:3px solid var(--p1)}
.cust-head{display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;text-align:left;width:100%}
.avatar{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;flex:none;background:var(--hi);border:1px solid var(--line)}
.avatar.ok{background:var(--p5bg);color:var(--p5);border-color:transparent}
.avatar.fav img{width:26px;height:26px;object-fit:contain;display:block}
.th-dark .avatar.fav img{background:#fff;border-radius:6px;padding:2px}
.cust-id{display:flex;flex-direction:column;flex:1;min-width:0}
.cust-name{font-size:18px;font-weight:700}
.cust-sub{color:var(--muted);font-size:12px}
.ch-row{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.issues{display:flex;flex-direction:column;gap:6px}
.issue{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--hi);border:1px solid transparent;font-size:13px;text-align:left;width:100%;min-height:44px}
.issue:hover{border-color:var(--muted)}   /* wie .tile-btn und .btn (13.11.2026) */
.iss-n{font-weight:800;min-width:34px}
.iss-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.more{color:var(--muted);font-size:12px;padding-left:4px}
.growline{display:flex;align-items:center;gap:8px;color:var(--p5);font-size:13px;font-weight:700}
.actions{display:flex;gap:6px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line)}
.act{flex:1;text-align:center;padding:9px 8px;border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--line);min-height:42px;white-space:nowrap}
.act:hover{color:var(--text);border-color:var(--muted)}
a.act{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}  /* externer Report-/Ads-Link sieht aus wie die Knöpfe */
a.btn{text-decoration:none}
.root a.act,.root a.btn{font:inherit}  /* wie die Knöpfe daneben (.root button{font:inherit}) */
.act.main-act{color:var(--text);background:var(--hi);flex:1.6}
.act.add{flex:0 0 44px;color:var(--brand);font-size:18px}
.lwrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.lgrid{display:grid;grid-template-columns:minmax(200px,2fr) 120px 72px 72px 72px 72px 120px 90px minmax(220px,2fr);align-items:center;gap:0 10px;padding:0 18px;min-width:1100px}
.lhead{font-size:12px;font-weight:700;color:var(--muted);min-height:44px;border-bottom:1px solid var(--line)}
.lrow{border:0;border-bottom:1px solid var(--line);background:none;text-align:left;width:100%;min-height:56px}
.lrow:hover{background:var(--hi)}
/* Kundenübersicht: Zahnrad (Kundendaten) neben der Zeile, Kopf mit gleichem Abstand rechts */
.lrow-wrap{position:relative;min-width:min-content}   /* wächst mit der Zeile (min-width der lgrid), Zahnrad bleibt am Zeilenende */
.lgrid.lhead.has-cfg,.lrow-wrap.has-cfg .lgrid.lrow{padding-right:58px}
.lname{display:flex;align-items:center;gap:10px;font-weight:700}
.lname .avatar{width:32px;height:32px;border-radius:9px;font-size:12px}
.lname .avatar.fav img{width:18px;height:18px}
.num{font-weight:800;font-variant-numeric:tabular-nums}
.zero{color:var(--muted);font-weight:500}
.ltop{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.ltop span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ltop-link{cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}   /* Kundenübersicht: wichtigster Check öffnet den Befund */
.ltop-link:hover{color:var(--brand);text-decoration-color:currentColor}
.back{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);font-weight:700;padding:6px 0;margin-bottom:12px;min-height:40px}
.back:hover{color:var(--text)}
.acct-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:18px}
.qlinks{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--hi);border-radius:10px;padding:9px 14px;font-weight:700;font-size:13px;min-height:42px;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--btn);border-color:var(--btn);color:var(--btnfg)}
.btn.ghost{background:none}
.btn.locked{color:var(--muted)}
.fhead{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:6px}
.tabs{display:inline-flex;gap:4px;flex-wrap:wrap}
.tab{border:1px solid transparent;background:none;padding:8px 14px;border-radius:10px;font-weight:700;color:var(--muted);min-height:42px;display:inline-flex;align-items:center;gap:8px}
.tab.on{background:var(--hi);color:var(--text);border-color:var(--line)}
.tab .cnt{font-size:12px;font-weight:800;padding:1px 8px;border-radius:999px;background:var(--bg)}
.grp-title{display:flex;align-items:center;gap:8px;padding:18px 4px 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.frows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:8px}
.frow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--hi);border-radius:12px;padding:10px 14px 10px 10px;text-align:left;width:100%;min-height:60px}
.frow:hover{border-color:var(--muted)}
.frow-wrap{position:relative;min-width:0}
.frow-wrap.has-cfg .frow{padding-right:52px}
.frow-cfg,.gear{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:9px;width:34px;height:34px;min-height:0;padding:0;display:grid;place-items:center}
.frow-cfg{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.frow-cfg:hover,.gear:hover{color:var(--text);border-color:var(--muted)}
.sw{position:relative;width:38px;height:22px;min-height:0;border-radius:999px;border:0;background:var(--line);padding:0;flex:none;vertical-align:middle}
.sw span{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.sw.on{background:var(--done)}
.sw.on span{left:19px}
.sw.crit.on{background:var(--p1)}
.sw.mixed{background:repeating-linear-gradient(135deg,var(--line) 0 4px,var(--hi) 4px 8px);box-shadow:inset 0 0 0 1px var(--line)}
.sw.mixed span{left:11px}
.wds{display:inline-flex;gap:3px;flex-wrap:wrap}
.wd{border:1px solid transparent;background:none;color:var(--muted);border-radius:7px;font-size:11px;font-weight:700;padding:3px 0;width:28px;min-height:0;text-align:center}
.wd.wide{width:auto;padding:3px 8px}
.wd.on{background:var(--p5bg);color:var(--p5);border-color:currentColor}
.wd.part{border-color:var(--p5);border-style:dashed;color:var(--p5)}
.cfg-top{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.inp.cfg-sel{width:auto;max-width:100%}
.cfg-tbl td{vertical-align:middle;max-width:none}
.cfg-name{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.cfg-go{text-align:right;width:50px}
.cfg-crit{display:flex;gap:12px;align-items:center}
.cfg-bar{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.inp.cfg-nameinp{width:min(100vw - 64px,340px)}
.cfg-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px 22px}
.cfg-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cfg-field label{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-weight:700;font-size:13px}
.cfg-field code{font-size:11px;color:var(--muted);font-weight:500}
.cfg-field .inp{width:100%}
.cfg-prio{display:flex;align-items:center;gap:10px}
.cfg-prio .dot{flex:none}
.cfg-field textarea.inp{padding:8px 10px;resize:vertical}
.cfg-hint{font-size:12px;color:var(--muted);margin:0}
.cfg-note{font-size:12px;color:var(--muted);margin:0;white-space:pre-line}
.cfg-field.dirty label span::after{content:' •';color:var(--brand)}
@media (max-width: 820px) {
  .cfg-vars { display: none; }
  /* Zeilen als Blöcke: Name + Zahnrad, darunter An / Kritisch, darunter die Wochentage */
  .dtbl.cfg-tbl thead { display: none; }
  .dtbl.cfg-tbl, .dtbl.cfg-tbl tbody { display: block; width: 100%; }
  .dtbl.cfg-tbl tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
  .dtbl.cfg-tbl tr:first-child { border-top: 0; }
  .dtbl.cfg-tbl td { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; max-width: none; }
  .dtbl.cfg-tbl td:first-child { grid-column: 1 / 4; grid-row: 1; }
  .dtbl.cfg-tbl td.cfg-go { grid-column: 4; grid-row: 1; width: auto; }
  .dtbl.cfg-tbl td.cfg-on { grid-column: 1; grid-row: 2; }
  .dtbl.cfg-tbl td.cfg-crit-td { grid-column: 2; grid-row: 2; }
  .dtbl.cfg-tbl td.cfg-days { grid-column: 1 / -1; grid-row: 3; }
  .dtbl.cfg-tbl td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--muted); }
}
.bar{width:4px;align-self:stretch;border-radius:4px;flex:none}
.ftxt{flex:1;min-width:0;display:flex;flex-direction:column}
.ft{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.age{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.age.old{color:var(--warn);font-weight:700}
.owner{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border-radius:999px;background:var(--hi);border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--muted)}
.lgrid.own{grid-template-columns:minmax(200px,2fr) 120px 56px 72px 72px 72px 72px 120px 90px minmax(220px,2fr);min-width:1160px}
.selrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn.accent{background:transparent;border-color:var(--brand);color:var(--brand)}
.btn.accent:hover{background:var(--sel)}
.btn.sm{min-height:34px;padding:6px 10px;font-size:12px}
.btn:disabled,.pager button:disabled{opacity:.35;cursor:default}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);background:var(--hi);border-radius:999px;padding:2px 10px 2px 3px}
.us-pager{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:10px}   /* Nutzung: 20 je Seite */
.pager{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pager button{width:38px;height:38px;border:0;background:var(--card);display:grid;place-items:center}
.pager button+button{border-left:1px solid var(--line)}
.pager button:hover:not(:disabled){background:var(--hi)}
.sec-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.split{display:inline-flex;align-items:stretch}
.split .btn{border-top-right-radius:0;border-bottom-right-radius:0}
.split .btn:only-child{border-radius:10px}
.split-sel{border:1px solid var(--done);border-left:1px solid rgba(127,127,127,.45);background:var(--done);color:var(--donefg);border-radius:0 10px 10px 0;font-weight:700;font-size:13px;padding:0 8px;min-height:42px}
.menu-wrap{position:relative}
.menu-wrap > .btn svg{transform:rotate(0deg)}
.menu{position:absolute;bottom:calc(100% + 6px);left:0;min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.28);padding:6px;display:flex;flex-direction:column;z-index:5}
.menu button{display:flex;align-items:center;gap:10px;text-align:left;border:0;background:none;padding:10px 12px;border-radius:8px;min-height:42px;font-weight:600}
.menu button:hover{background:var(--hi)}
.menu-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 12px 4px}
.btn.done{background:var(--done);border-color:var(--done);color:var(--donefg)}
.btn.done:hover{filter:brightness(1.06)}
.pg-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.info-strip{font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:10px 14px}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:background .15s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--onfill);transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + span{background:var(--done)}
.switch input:checked + span::after{transform:translateX(18px)}
.switch input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.ck{border-top:1px solid var(--line);padding:14px 0}
.ck.first{border-top:0}
.ck.off .ck-main,.ck.off .pseg{opacity:.45}
.ck-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ck-main{flex:1 1 280px;min-width:0}
.ck-title{font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ck-meta{font-size:12px;color:var(--muted);margin-top:2px}
.badge-c{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--p3);border:1px solid var(--p3);border-radius:5px;padding:0 5px}
.pseg{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:2px;gap:2px;background:var(--card);flex-wrap:wrap}
.pseg button{border:0;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;font-size:12px;font-weight:700;min-height:34px}
.ck-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px;margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--hi)}
.ck-edit .btn-row{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:12px}
.ta,.inp.wide{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14px;color:var(--text);font-weight:500;resize:vertical}
.ck-prev{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px 16px;display:flex;flex-direction:column;gap:6px;align-self:start}
.ck-prev h4{margin:4px 0 0;font-size:17px}
.ck-prev p{margin:0;font-size:13px}
.faq{border-top:1px solid var(--line);padding:12px 0}
.faq:first-child{border-top:0}
.faq summary{font-weight:700;cursor:pointer;min-height:32px;display:flex;align-items:center}
.faq p{margin:8px 0 0;color:var(--muted)}
.ch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.bars{display:flex;align-items:flex-end;gap:4px;height:190px;margin-top:16px;padding-bottom:24px}
.bar-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;min-width:0}
.bar-stack{width:100%;max-width:26px;display:flex;flex-direction:column-reverse;border-radius:4px 4px 0 0;overflow:hidden;gap:1px}
.bar-stack i{display:block;min-height:0}
.bar-x{position:absolute;bottom:-22px;font-size:10px;color:var(--muted);white-space:nowrap}
.pair{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%;width:100%}
.pair i{display:block;width:44%;max-width:12px;border-radius:3px 3px 0 0}
.hbar{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 44px;gap:12px;align-items:center;font-size:13px;padding:6px 0}
.track{height:10px;background:var(--hi);border-radius:99px;overflow:hidden;display:block}
.track i{display:block;height:100%;border-radius:99px;background:var(--done)}
.trend-up{color:var(--p2);font-size:13px;font-weight:700;margin:10px 0 0}
.trend-down{color:var(--done);font-size:13px;font-weight:700;margin:10px 0 0}
.rgrid{display:grid;grid-template-columns:minmax(200px,2fr) repeat(5,minmax(70px,1fr)) minmax(100px,1.2fr);gap:0 10px;align-items:center;padding:0 6px;min-width:780px}
.logo-ph{width:64px;height:40px;border:1px dashed var(--muted);border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--muted)}
.cp-paper{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--bg)}
.cp-list{margin:6px 0 0;padding-left:18px;font-size:14px}
.cp-list li{margin:4px 0}
.adr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)}
.adr.off .ck-main,.adr.off .thr-in{opacity:.45}
.thr-in{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.thr-box{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--hi)}
.thr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.src-l{flex:1;display:flex;flex-direction:column;min-width:0}
.src-l small{font-size:12px;color:var(--muted)}
.src-l small.stale{color:var(--warn);font-weight:700}
.src.picked{border-color:var(--brand);background:var(--sel)}
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.kcol{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.kcol-h{display:flex;align-items:center;gap:8px;font-weight:800;padding:2px 4px 4px}
.kcol-h .cnt{margin-left:auto;font-size:12px;font-weight:800;padding:1px 8px;border-radius:999px;background:var(--hi)}
.kc{background:var(--hi);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.kc.open{border-color:var(--muted)}
.kc.done .kc-title{text-decoration:line-through;color:var(--muted)}
.kc-main{border:0;background:none;padding:0;text-align:left;display:flex;flex-direction:column;gap:6px;width:100%}
.kc-title{font-weight:700}
.kc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.due{font-weight:700}
.due.over{color:var(--p1)}
.due.today{color:var(--p2)}
.kc-link{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--line);background:var(--card);border-radius:10px;padding:6px 10px;font-size:12px;font-weight:600;text-align:left;min-height:36px;max-width:100%}
.kc-link span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-link:hover{border-color:var(--muted)}
.kc-detail{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line);padding-top:10px}
.kc-edit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
.kc-edit .sel{width:100%}
.kc-actions{display:flex;gap:6px;flex-wrap:wrap}
.kempty{color:var(--muted);font-size:13px;text-align:center;padding:16px;border:1px dashed var(--line);border-radius:12px}
.fld .sel{width:100%}
.stepper{list-style:none;margin:0 0 22px;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.stepper li{flex:1 1 110px}
.stepper button{width:100%;display:flex;align-items:center;gap:8px;border:0;border-top:4px solid var(--line);background:none;padding:10px 2px 0;text-align:left;color:var(--muted);font-weight:700;font-size:12px;min-height:44px}
.stepper button:disabled{cursor:default}
.stepper li.done button{border-top-color:var(--done);color:var(--text)}
.stepper li.cur button{border-top-color:var(--brand);color:var(--text)}
.st-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--hi);font-size:11px;flex:none}
.stepper li.done .st-n{background:var(--done);color:var(--donefg)}
.stepper li.cur .st-n{background:var(--brand);color:var(--onfill)}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin-top:18px}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;border:1px solid var(--line);background:var(--hi);border-radius:14px;padding:16px;min-height:96px}
.opt:hover{border-color:var(--muted)}
.opt.on{border-color:var(--brand);background:var(--sel);box-shadow:inset 0 0 0 1px var(--brand)}
.opt b{font-size:15px}
.opt span{font-size:13px;color:var(--muted)}
.opt-ic{color:var(--brand)}
.onb-nav{margin-top:20px;justify-content:space-between}
.newb{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--brand);border:1px solid var(--brand);border-radius:5px;padding:0 5px;flex:none}
.empty{padding:36px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px;margin-top:12px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:100vw;background:var(--card);border-left:1px solid var(--line);z-index:31;display:flex;flex-direction:column;box-shadow:-12px 0 32px rgba(0,0,0,.2)}
.dr-head{padding:16px 22px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.dr-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dr-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.dr-nav .icon-btn{width:38px;height:38px}
.counter{font-size:12px;color:var(--muted);font-weight:600;padding:0 4px}
.dr-title{margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em}
.dr-titlerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;color:var(--muted)}
.dr-meta .old{color:var(--warn);font-weight:700}
.dr-ch{display:inline-flex;align-items:center;gap:6px}
.dr-sep{opacity:.6}
.dr-titlerow .gear{flex:none}
.dr-body{flex:1;overflow:auto;padding:6px 22px 22px;display:flex;flex-direction:column;gap:18px}
.sec p{margin:4px 0 0}
.up{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:14px}
.ai{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--hi)}
.ai-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ai-t{font-weight:800}
.ai-list{margin:0;padding-left:18px;color:var(--muted);font-size:13px}
.tbl{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.trow{display:grid;grid-template-columns:36px minmax(0,1.6fr) minmax(0,1.2fr) 86px;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);font-size:13px}
.trow:first-child{border-top:0}
.thead{font-size:12px;font-weight:700;color:var(--muted);background:var(--hi)}
.trow.ck{background:var(--sel)}
.el{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.el small{display:block;font-weight:500;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.right{text-align:right}
.trow input{width:18px;height:18px;accent-color:var(--btn)}
.tmore{padding:10px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.ignbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hint{font-size:12px;color:var(--muted)}
.mscrim{position:fixed;inset:0;background:var(--scrim);z-index:40;display:grid;place-items:center;padding:16px}
.modal{background:var(--card);border:1px solid var(--line);border-radius:20px;max-width:640px;width:100%;padding:28px;display:flex;flex-direction:column;gap:16px;max-height:92vh;overflow:auto}
.cmp{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:13px}
.cmp div{padding:10px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:6px}
.cmp .h{border-top:0;font-weight:800;background:var(--hi)}
.cmp .h.plan{flex-direction:column;align-items:flex-start;gap:2px}
.cmp .h.plan small{font-size:11px;font-weight:600;color:var(--muted)}
.cmp .h.plan b{font-size:13px;color:var(--text)}
.modal>*{flex-shrink:0}
.ask-modal{max-width:460px;gap:20px}
.ask-text{margin:0;font-size:16px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.yes{color:var(--p5);font-weight:800}
.no{color:var(--muted)}
.reason{font-size:13px;font-weight:700;color:var(--brand)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--toast);color:var(--toastfg);border-radius:12px;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:14px;z-index:50;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}
.toast button{border:0;background:none;color:inherit;text-decoration:underline;font-weight:800;min-height:32px}
.proto{position:fixed;right:14px;bottom:14px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--card);border:1px dashed var(--muted);border-radius:14px;padding:6px 8px 6px 12px;font-size:12px;color:var(--muted);max-width:calc(100vw - 28px)}
.proto .seg button{min-height:30px;padding:4px 10px;font-size:12px}
.form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.frm-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 0;border-top:1px solid var(--line)}
.frm-row:first-child{border-top:0}
.frm-row label{font-weight:700;flex:1 1 220px}
.frm-row .sub{display:block;font-weight:500;color:var(--muted);font-size:12px}
.inp{background:var(--hi);border:1px solid var(--line);border-radius:10px;min-height:40px;padding:0 10px;width:110px}
.tog{width:20px;height:20px;accent-color:var(--btn)}
.stack{display:flex;flex-direction:column;gap:18px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:18px}
.two > *{min-width:0}
.two.set-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}   /* Einstellungen: Allgemein | Dashboard | Passwort */   /* breite Tabellen scrollen in ihrer Karte statt die Seite zu verbreitern */
.lex{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:10px;margin-top:8px}
.lex-i{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--hi);display:flex;flex-direction:column;gap:4px}
.lex-i b{font-size:14px}
.lex-i p{margin:0;font-size:13px;color:var(--muted)}
.onb{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:28px 16px 120px}
.onb-top{width:100%;max-width:720px;display:flex;align-items:center;gap:12px;margin-bottom:36px}
.onb-card{width:100%;max-width:720px}
.steps{display:flex;gap:8px;margin:18px 0}
.steps i{flex:1;height:5px;border-radius:99px;background:var(--line)}
.steps i.on{background:var(--btn)}
.srcs{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.src{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--hi)}
.src label{flex:1;font-weight:700}
.prog{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.prog div{display:flex;align-items:center;gap:10px;font-weight:600}
.prog .wait{color:var(--muted)}
.pbar{height:8px;border-radius:99px;background:var(--hi);overflow:hidden;margin-top:14px}
.pbar i{display:block;height:100%;background:var(--btn);border-radius:99px}

/* v7: zentrale Dateien (Logo, Kanal-Logos, Sprachauswahl) */
.logo-wrap{display:inline-flex;background:var(--logo-bg);border-radius:10px;padding:6px 10px;flex:none}
.logo-wrap img{height:26px;display:block}
a.logo-wrap:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ch[data-ch="G"],.ch[data-ch="MS"],.ch[data-ch="GA4"],.ch[data-ch="MC"],.ch[data-ch="CR"],.ch[data-ch="GPT"]{font-size:0;color:transparent;min-width:20px;width:20px;height:20px;padding:0;border:0;background:transparent center/16px 16px no-repeat}
.ch[data-ch="G"]{background-image:url(assets/favicon_google.ico)}
.ch[data-ch="MS"]{background-image:url(assets/favicon_bing.ico)}
.ch[data-ch="GA4"]{background-image:url(assets/ga4.ico)}
.ch[data-ch="MC"]{background-image:url(assets/gmc.ico)}
.ch[data-ch="CR"]{background-image:url(assets/criteo.png);background-size:contain}   /* Logo 256×138: Seitenverhältnis behalten */
.ch[data-ch="GPT"]{background-image:url(assets/gpt_ads.svg)}
@media (max-width:820px){
.side{max-width:none;flex-basis:100%;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 10px;align-items:center;gap:4px;position:static;height:auto;overflow-y:visible}
.side .nav-label,.side .spacer,.side .user{display:none}
.side .sidebar-user{position:static;padding-top:0;border-top:0}
.brand{padding:0 8px 0 4px}
.nav-item{width:auto;flex:none;white-space:nowrap}
.nav-item.on{box-shadow:inset 0 -3px 0 var(--brand)}
.top-inner,.main{padding-left:16px;padding-right:16px}
.search{max-width:none;flex:1 1 0;min-width:0}   /* Suche und Hell/Dunkel in einer Zeile */
.app{align-content:flex-start}                     /* Navigation und Inhalt oben stapeln, kein Leerraum dazwischen */
.drawer{width:100vw}
.push{margin-left:0}
.trow{grid-template-columns:30px minmax(0,1fr) 80px}
.trow .det{display:none}
}

/* ===== v8: Ergänzungen zu den Stilen aus v7 ===== */
[hidden] { display: none !important; }

/* Prioritätsfarben: Punkt/Balken über data-p, Text über .pc1 … .pc6 (Pill zusätzlich mit Hintergrund).
   Priorität 4 (Niedrig) hellgelb, heller als 3; Priorität 6 (Analyse) weiß – im hellen Theme mit Rand und dunklerer Schrift (--p4t, --p6t) */
.dot[data-p="1"], .bar[data-p="1"], .dist i[data-p="1"] { background: var(--p1); }
.dot[data-p="2"], .bar[data-p="2"], .dist i[data-p="2"] { background: var(--p2); }
.dot[data-p="3"], .bar[data-p="3"], .dist i[data-p="3"] { background: var(--p3); }
.dot[data-p="4"], .bar[data-p="4"], .dist i[data-p="4"] { background: var(--p4); }
.dot[data-p="5"], .bar[data-p="5"], .dist i[data-p="5"] { background: var(--p5); }
.dot[data-p="6"], .bar[data-p="6"], .dist i[data-p="6"] { background: var(--p6); }
.dot[data-c="brand"] { background: var(--brand); }
.dot[data-c="warn"] { background: var(--warn); }
.dot[data-c="muted"] { background: var(--muted); }
.dot[data-c="viz-new"] { background: var(--viz-new); }
.dot[data-c="viz-done"] { background: var(--viz-done); }
.dot-sm { width: 11px; height: 11px; }
.dot[data-p="6"], .bar[data-p="6"], .dist i[data-p="6"] { box-shadow: inset 0 0 0 1px var(--muted); }
.th-light .dot[data-p="4"], .th-light .bar[data-p="4"], .th-light .dist i[data-p="4"] { box-shadow: inset 0 0 0 1px var(--p4t); }

/* Anmeldung */
.auth-card { max-width: 440px; width: 100%; }
.auth-card .h1 { font-size: 26px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.auth-form input { background: var(--hi); border: 1px solid var(--line); border-radius: 10px; min-height: 44px; padding: 0 12px; font-size: 15px; color: var(--text); }
.auth-form input:focus { outline: none; border-color: var(--brand); }
.msg { border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.msg.err { background: var(--p1bg); color: var(--p1); }
.msg.ok { background: var(--p5bg); color: var(--p5); }
.onb-top .lang-slot { margin-left: auto; }
#setLangSlot .slm { display: inline-block; }                 /* Einstellungen: Menü direkt unter dem Knopf, nicht am Kartenrand */
#setLangSlot .slm-menu { left: 0; right: auto; }

/* Sprachauswahl (lang-menu.js) im v7-Look */
.root { --slm-bg: var(--card); --slm-border: var(--line); --slm-text: var(--text); --slm-muted: var(--muted); --slm-hover: var(--hi); --slm-accent: var(--brand); --slm-height: 42px; --slm-radius: 12px; }

/* Laden / Hinweise */
.loading { padding: 40px; text-align: center; color: var(--muted); }
.soon { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px dashed var(--muted); border-radius: 5px; padding: 0 5px; }
.sidebar-user { display: flex; flex-direction: column; gap: 4px; position: sticky; bottom: 0; background: var(--card); padding-top: 8px; border-top: 1px solid var(--line); }   /* Abmelden immer sichtbar, auch wenn die Leiste in sich scrollt */
.logout { border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 12px; text-align: left; padding: 4px 10px; min-height: 32px; }
.logout:hover { color: var(--text); }

/* Kundenliste: Spalten ohne Kosten, mit Analyse */
.lgrid.v8 { grid-template-columns: minmax(200px,2fr) 120px 72px 72px 72px 72px 72px 80px minmax(220px,2fr); min-width: 1080px; }
/* mit Spalte „Tasks“ (Suchanfragen-Checks mit offenen Treffern, nach Wachstum): Prioritäten etwas schmaler, gleiche Mindestbreite */
.lgrid.v8.has-tasks { grid-template-columns: minmax(180px,2fr) 110px 64px 64px 64px 64px 64px 80px 72px minmax(200px,2fr); }
/* Zahlen als Link (Prioritäten → gefilterte Kundenseite, Tasks → Tasks des Kunden) */
.lrow .llink { text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lrow .llink:hover { color: var(--brand); }

/* Befund-Detail: breitere Seitenleiste, Tabelle mit freien Spalten */
.drawer { width: min(100vw, 1680px, max(860px, calc(100vw - 236px))); }  /* Befund-Details: so breit wie möglich, Navigation bleibt sichtbar */
.dwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; position: relative; }   /* relative: .sr in Tabellenköpfen bleibt im Rahmen */
.dtbl { width: 100%; border-collapse: collapse; font-size: 13px; }  /* an die Breite anpassen, umbrechen statt scrollen */
.dtbl th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--hi); padding: 9px 12px; white-space: nowrap; }
.dtbl th[aria-sort] { padding: 0; white-space: normal; vertical-align: bottom; }
/* Befund-Tabelle: Spaltenüberschriften kommen aus den Daten (übersetzt) – normal geschrieben, nicht in Großbuchstaben */
.th-sort { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: normal; }  /* lange Überschriften dürfen zweizeilig werden – spart Breite */
.th-sort:hover { color: var(--text); }
.th-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.th-sort .sort-ind { font-size: 10px; opacity: .45; }
.th-sort.on { color: var(--text); }
.th-sort.on .sort-ind { opacity: 1; color: var(--brand); }
.dtbl td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: top; max-width: 220px; overflow-wrap: break-word; }
.dtbl td a { color: var(--brand); text-decoration: underline; }
/* Links mit erkanntem Ziel (links.py, Regel 22): nackte URL als Knopf mit Zielname, Link um einen Namen mit ↗ */
.dtbl td a.lt, .solve .lt { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; background: var(--card); }
.dtbl td a.lt::after, .solve .lt::after, .dtbl td a.lt-in::after { content: "↗"; font-size: .85em; font-weight: 700; }
.dtbl td a.lt:hover { border-color: var(--brand); }
.dtbl td a.lt:focus-visible, .dtbl td a.lt-in:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dtbl td a.lt-in::after { margin-left: 2px; text-decoration: none; display: inline-block; }
.solve-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.solve-list li { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 4px 14px; align-items: baseline; }
.solve-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.solve-w { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .solve-list li { grid-template-columns: 1fr; } }
.dtbl td.acc { color: var(--muted); max-width: 180px; }
.dtbl td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }  /* Zahlenspalten rechtsbündig */
.dtbl th.num .th-sort { justify-content: flex-end; text-align: right; }
.expl a { color: var(--brand); text-decoration: underline; }
.kv { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px 18px; margin-top: 14px; }
.kv dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.kv dd { margin: 0; }
.notes { white-space: pre-wrap; margin: 6px 0 0; }
.acct-tbl td { vertical-align: middle; }

/* Kacheln als Prioritätsfilter */
.tile-btn { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; }  /* Inhalt oben, auch bei unterschiedlich langen Hinweisen */
.tile-btn:hover { border-color: var(--muted); }
.tile-btn.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.dist i { cursor: pointer; }
.dist i.on { outline: 2px solid var(--text); outline-offset: 1px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--brand); background: var(--sel); color: var(--text); border-radius: 999px; padding: 2px 4px 2px 12px; font-size: 13px; min-height: 36px; }
.fchip button { border: 0; background: none; color: var(--muted); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.fchip button:hover { color: var(--text); background: var(--hi); }

/* Kanal-Filter: Auswahl statt Ausschluss */
.chip.sel { border-color: var(--brand); background: var(--sel); box-shadow: inset 0 0 0 1px var(--brand); }
.chip.dim { opacity: .55; }
.chip.logo-only { padding: 4px 9px; min-width: 42px; justify-content: center; }
.chip.logo-only .ch { pointer-events: none; }
.main .toolbar { gap: 10px 14px; }

/* ===== Reports ===== */
.rep-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fc-wrap { position: relative; padding: 14px 0 30px 44px; margin-top: 12px; }
.fc-plot { position: relative; height: 220px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.fc-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); pointer-events: none; }
.fc-grid span { position: absolute; left: -44px; width: 36px; transform: translateY(-50%); text-align: right; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px 6px 0 0; outline-offset: 2px; }
.fc-col:hover, .fc-col:focus-visible { background: var(--hi); }
.fc-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; width: 100%; }
.fc-bars i { display: block; width: min(12px, 42%); border-radius: 4px 4px 0 0; }
.fc-new { background: var(--viz-new); }
.fc-done { background: var(--viz-done); }
.fc-col:hover .fc-bars i, .fc-col:focus-visible .fc-bars i { filter: brightness(1.15); }
.fc-x { position: absolute; bottom: -22px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.fc-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; box-shadow: 0 8px 22px rgba(0,0,0,.25); font-size: 12px; min-width: 150px; }
.fc-tip-h { color: var(--muted); margin-bottom: 4px; }
.fc-tip-r { display: flex; align-items: center; gap: 8px; }
.fc-tip-r b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 24px; }
.fc-tip .key { width: 12px; height: 2px; border-radius: 1px; }
.fc-tip .key.new, .lg-sw.new { background: var(--viz-new); }
.fc-tip .key.done, .lg-sw.done { background: var(--viz-done); }
.lg-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.legend b { color: var(--text); }
.hbar .hb-l { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track i { background: var(--viz-new); }
.dtbl.mid td { vertical-align: middle; }

/* Auswahl in der Elemente-Tabelle */
.dtbl .ck-col { width: 38px; padding-right: 0; }
.dtbl .ck-col input { width: 18px; height: 18px; accent-color: var(--btn); cursor: pointer; }
.dtbl tr.is-sel td { background: var(--sel); }
.dtbl tr:is([data-act="selRow"], [data-act="stSelRow"]) { cursor: pointer; }
.dtbl tr:is([data-act="selRow"], [data-act="stSelRow"]):hover td { background: var(--hi); }
.dtbl tr:is([data-act="selRow"], [data-act="stSelRow"]).is-sel:hover td { background: var(--sel); }
/* Meldung bei offener Seitenleiste im freien Bereich links zentrieren; schmal: über der Fußzeile */
/* Seitenleiste offen: Meldung rechts über der Fußleiste – sie darf deren Knöpfe nicht verdecken */
body.drawer-open .toast { left: auto; right: 24px; transform: none; bottom: calc(var(--foot-h, 96px) + 16px); z-index: 60; }

/* Benutzer */
.dash-opt { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }   /* Einstellungen › Dashboard */
.ustate { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/* Benutzerverwaltung: Filterleiste, Tabelle, Mandanten-Auswahl im Formular */
.u-bar .search { min-width: min(100%, 280px); }
.u-bar .u-sel { width: auto; min-width: 150px; max-width: 260px; color: var(--text); }
.u-tbl td .hint { margin-top: 2px; }
.u-tbl .nowrap { white-space: nowrap; }
.u-tbl td.u-act { width: 1%; white-space: nowrap; padding-left: 3px; padding-right: 3px; }   /* Bearbeiten | Sperren | Einladen – feste Spalten */
.u-tbl td.u-act:last-child { padding-right: 12px; }
.u-cust { cursor: help; border-bottom: 1px dotted var(--muted); }
.tag.u-light { background: var(--hi); border: 1px solid var(--line); color: var(--text); }
.u-tenants { display: block; }
#uRolesFs { display: block; }
#uRolesBox { display: flex; flex-wrap: wrap; gap: 6px 18px; }
#uRolesBox[hidden], #uRolesFs[hidden], #uRolesFs .hint[hidden], #uRolesBox label[hidden] { display: none; }
.cbx-group .hint.w-100 { flex-basis: 100%; margin-top: 2px; }
#uRolesFs .hint { margin-top: 6px; }
.u-pw-tools { align-items: center; }
.auth-form .u-pw-tools label.cbx { flex-direction: row; align-items: center; font-weight: 400; color: var(--text); font-size: 14px; }
.auth-form .u-pw-tools input[type="checkbox"] { min-height: 0; padding: 0; }
.tag.u-legacy { background: transparent; border: 1px dashed var(--muted); color: var(--muted); }
.u-tabs { align-self: flex-start; }
.tn-names { color: var(--muted); font-size: 13px; max-width: 520px; }
.tn-modal { width: min(720px, calc(100vw - 32px)); }
.tn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tn-tools .search { flex: 1 1 240px; max-width: none; }
.auth-form .tn-tools label.search { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; color: var(--muted); }
.auth-form .tn-tools label.search input { border: 0; background: none; min-height: 40px; padding: 0; width: 100%; }
.auth-form .tn-tools label.cbx, .auth-form .tn-list label.cbx { flex-direction: row; align-items: center; color: var(--text); font-size: 14px; font-weight: 400; }
.auth-form .tn-tools input[type="checkbox"], .auth-form .tn-list input[type="checkbox"] { min-height: 0; padding: 0; }
.u-tbl th.num { text-align: right; }
.tn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; max-height: min(50vh, 420px); overflow: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.u-tenants .u-tq { width: 100%; margin: 2px 0 8px; color: var(--text); }
.u-tlist { display: flex; flex-wrap: wrap; gap: 6px 18px; max-height: 210px; overflow: auto; }
.u-tlist .cbx[hidden] { display: none; }
.u-tenants .hint { margin-top: 8px; }
.cbx-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cbx-group legend { font-size: 13px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.auth-form .cbx { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); min-height: 32px; }
.cbx input { width: 18px; height: 18px; min-height: 0; accent-color: var(--btn); }
.auth-form input:disabled { opacity: .6; }

/* Spaltenfilter in der Befund-Detailansicht (Chips wie der Prio-Filter, Eingabe als Zeile statt Dialog) */
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.fbar:empty { display: none; }
.fbar .fchip { flex: 0 0 auto; max-width: 100%; }
.fchip .fchip-edit { all: unset; display: block; width: auto; height: auto; cursor: pointer; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }  /* nicht wie das runde × (.fchip button) */
.fchip .fchip-edit:hover { background: none; text-decoration: underline; }
.fchip .fchip-edit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.fpanel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--hi); }
.fpanel .sel { min-height: 40px; }
.fpanel .inp { width: 120px; background: var(--card); color: var(--text); }
.fp-msg { flex-basis: 100%; margin: 0; color: var(--p1); font-size: 13px; }
.fp-msg:empty { display: none; }
.sec-head .btn.on { border-color: var(--brand); color: var(--text); }

/* Element-Aktionen in der Zeile (✓ erledigt, Auge = Ausblend-Menü) wie im bisherigen System */
.dtbl td.row-act, .dtbl th.row-act { width: 1%; white-space: nowrap; text-align: right; padding-left: 4px; }
/* gleiches Grün wie „Alles erledigt“ (.btn.done) */
.ra-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--done); border-radius: 8px; background: var(--done); color: var(--donefg); cursor: pointer; margin-left: 4px; }
.ra-btn:hover { filter: brightness(1.06); }
.ra-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--done); }
.ra-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.menu.pop { position: fixed; bottom: auto; z-index: 70; min-width: 250px; }  /* über Meldungen (z 60): offenes Menü hat Vorrang */
body.menu-open .toast { opacity: 0; pointer-events: none; }
.menu-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 12px 4px; }
.menu .menu-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); }
.menu .menu-row .inp { width: 70px; min-height: 34px; background: var(--card); color: var(--text); }
.menu .menu-row input[type="date"] { width: 140px; }
.menu .menu-row .btn { min-height: 34px; padding: 0 12px; margin-left: auto; font-weight: 700; }

/* Übersicht: Prioritäts-Pills der Kunden-Kacheln sind zugleich Filter für die Kachel */
.pills .pill-btn { border: 1px solid transparent; font-family: inherit; font-size: 12px; font-weight: 700; line-height: inherit; cursor: pointer; }
.pill-btn:hover { border-color: currentColor; }
.pill-btn.on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.pill-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Befund-Tabelle: eigener Scrollbereich in der Seitenleiste – waagerechte Scroll-Leiste immer im Bild,
   Kopfzeile oben, Auswahl links und Aktionen (✓ / Auge) rechts festgeheftet */
/* scrollbar-gutter: Platz für die senkrechte Leiste immer frei – sonst wird die Tabelle schmaler, sobald (z. B. beim
   Aufklappen verschachtelter Zeilen) die Leiste erscheint, und alle Spalten springen */
.drawer .dwrap { overflow: auto; max-height: max(240px, var(--table-h, 60vh)); overscroll-behavior: contain; scrollbar-gutter: stable; }
.drawer .dtbl { border-collapse: separate; border-spacing: 0; }
.drawer .dtbl thead th { position: sticky; top: 0; z-index: 2; }
.drawer .dtbl .ck-col, .drawer .dtbl .row-act { position: sticky; z-index: 1; background: var(--card); }
.drawer .dtbl .ck-col { left: 0; }
.drawer .dtbl .row-act { right: 0; box-shadow: -10px 0 10px -10px rgba(0, 0, 0, .35); }
.drawer .dtbl thead .ck-col, .drawer .dtbl thead .row-act { z-index: 3; background: var(--hi); }
.drawer .dtbl tr.is-sel td.ck-col, .drawer .dtbl tr.is-sel td.row-act { background: linear-gradient(var(--sel), var(--sel)), var(--card); }
.drawer .dtbl tr[data-act="selRow"]:hover td.ck-col, .drawer .dtbl tr[data-act="selRow"]:hover td.row-act { background: var(--hi); }
.drawer .dtbl tr[data-act="selRow"].is-sel:hover td.ck-col, .drawer .dtbl tr[data-act="selRow"].is-sel:hover td.row-act { background: linear-gradient(var(--sel), var(--sel)), var(--card); }

/* ===== Varianten und Abstände (statt style="…" in app.js) ===== */
/* mit .root davor: so stark wie die Basisregeln (.root button …, .sec p), wie zuvor die Inline-Styles */
.root .pc1 { color: var(--p1); }
.root .pc2 { color: var(--p2); }
.root .pc3 { color: var(--p3); }
.root .pc4 { color: var(--p4t); }
.root .pc5 { color: var(--p5); }
.root .pc6 { color: var(--p6t); }
.root .pill.pc1 { background: var(--p1bg); }
.root .pill.pc2 { background: var(--p2bg); }
.root .pill.pc3 { background: var(--p3bg); }
.root .pill.pc4 { background: var(--p4bg); }
.root .pill.pc5 { background: var(--p5bg); }
.root .pill.pc6 { background: var(--p6bg); }
.root .c-muted { color: var(--muted); }
.root .c-brand { color: var(--brand); }
.root .linkbtn.bare { padding: 0; }
.root .linkbtn.name-link { padding: 0; text-decoration: none; color: var(--text); }
.root .linkbtn.more-link { text-align: left; font-size: 13px; min-height: 32px; }
.root button.growline { border: 0; background: none; padding: 0; min-height: 32px; }
.root button.ftxt { border: 0; background: none; padding: 0; text-align: left; }
.root .frow.no-click { cursor: default; }
.root .frows.one-col { grid-template-columns: 1fr; }
.root .muted.growth-intro { margin: 8px 4px 0; }
.root .lrow .ch-row { justify-content: flex-start; }
.root .lwrap .empty { margin: 16px; }
.root .tag.plain { padding: 2px 10px; }
/* Abstände: .m-0 steht vor .mt-*, damit „m-0 mt-10“ oben 10px und sonst 0 ergibt */
.root .m-0 { margin: 0; }
.root .mt-0 { margin-top: 0; }
.root .mt-6 { margin-top: 6px; }
.root .mt-8 { margin-top: 8px; }
.root .mt-10 { margin-top: 10px; }
.root .mt-12 { margin-top: 12px; }
.root .mt-14 { margin-top: 14px; }
.root .mt-22 { margin-top: 22px; }
.root .mb-0 { margin-bottom: 0; }
.root .mb-22 { margin-bottom: 22px; }
.root .mr-6 { margin-right: 6px; }
.root .mr-10 { margin-right: 10px; }
.root .ml-auto { margin-left: auto; }
.root .py-6 { padding-top: 6px; padding-bottom: 6px; }
.root .flex-1 { flex: 1; }
.root .flex-nowrap { flex-wrap: nowrap; }
.root .fs-13 { font-size: 13px; }
.root .fs-24 { font-size: 24px; }
.root .fs-26 { font-size: 26px; }

/* Befund-Details als eigene Seite (#/befund/…): Inhalt der früheren Seitenleiste im Hauptbereich.
   .drawer bleibt als Klasse, damit Tabelle, Filter und Menüs ihre Regeln behalten; .fpage hebt Überlagerung und Breite auf */
.drawer.fpage { position: relative; top: auto; right: auto; bottom: auto; width: auto; max-width: none; z-index: auto; box-shadow: none; border: 1px solid var(--line); border-radius: 16px; }
.fpage .dr-body { overflow: visible; flex: none; }
.fpage .crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.fpage .crumbs .back { margin: 0; padding: 0; min-height: 32px; }
.fpage .crumb-cur { color: var(--text); font-weight: 700; }

/* Kundenliste passt sich ihrer Breite an (03.11.2026) statt unsichtbar zu scrollen: unter 1.080 px ohne
   „Wichtigster Befund“, unter 700 px auch ohne Kanäle, Prioritäten im Kopf als Farbpunkt (Zahlen sind farbig) */
.lwrap { container-type: inline-size; }
.lh-p { display: inline-flex; align-items: center; gap: 6px; }
.lh-p .dot { display: none; }
@container (max-width: 1079px) {
  .lgrid.v8 { grid-template-columns: minmax(160px,2fr) 96px repeat(6, minmax(44px,64px)); min-width: 0; }
  .lgrid.v8 > :nth-child(9) { display: none; }
  .lgrid.v8.has-tasks { grid-template-columns: minmax(130px,2fr) 96px repeat(5, minmax(44px,64px)) minmax(44px,92px) minmax(44px,64px); }
  .lgrid.v8.has-tasks > :nth-child(9) { display: block; }
  .lgrid.v8.has-tasks > :nth-child(10) { display: none; }
}
@container (max-width: 700px) {
  .lgrid.v8 { grid-template-columns: minmax(60px,1fr) repeat(6, 34px); gap: 0 4px; padding: 0 12px; }
  .lgrid.lhead.has-cfg, .lrow-wrap.has-cfg .lgrid.lrow { padding-right: 42px; }   /* Zahnrad kompakt, passt bei 390 px */
  .lrow-wrap .frow-cfg { right: 6px; width: 30px; height: 30px; }
  .lgrid.v8 > :nth-child(2) { display: none; }
  .lgrid.v8.has-tasks { grid-template-columns: minmax(60px,1fr) repeat(6, 34px); }
  .lgrid.v8.has-tasks > :nth-child(9) { display: none; }   /* Handy: ohne Tasks */
  .lh-p .dot { display: inline-block; }
  .lh-p .lh-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lname { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .lname .avatar { display: none; }
}

/* Schmale Ansicht: Navigation nur mit Symbolen, damit alle Punkte in eine Zeile passen (Beschriftung bleibt für
   Screenreader und als Tooltip); die Leiste verbreitert die Seite nicht mehr (min-width) */
@media (max-width: 820px) {
  .side { min-width: 0; position: relative; }   /* unsichtbare Beschriftungen (.lbl, absolut) bleiben in der Leiste – sonst wird die Seite breiter */
  .side .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side .nav-item { padding: 10px; gap: 4px; }
  .side .logout { padding: 10px; min-height: 42px; }
}
@media (max-width: 480px) {
  .modal { padding: 20px; }
  .cmp { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); font-size: 12px; }
  .cmp div { padding: 8px 9px; }
  .side .brand { display: none; }
  .side { justify-content: space-between; padding: 6px 8px; gap: 2px; max-width: 100vw; }
  .side .nav-item { padding: 10px 5px; }     /* bis zu 12 Symbole (interne Admins: Benutzer + Nutzung) passen in 360 px */
  .side .logout { padding: 10px 5px; }
}

/* Beispielkunde und Einrichtungsstand (06.11.2026, demo.py) */
.demo-tag{display:inline-block;vertical-align:middle;margin-left:8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--brand);border:1px solid var(--brand);border-radius:5px;padding:0 5px}
.cust.demo{border-style:dashed}
.demo-banner{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 14px;border:1px dashed var(--brand);border-radius:12px;color:var(--text);font-size:13px}
.demo-banner .i-sm{color:var(--brand);margin-top:2px}
.dr-head .demo-banner{margin:14px 0 0}
.setup-state{display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;background:var(--hi);color:var(--muted);font-weight:700}
.first-steps{margin-bottom:22px}
.first-steps .steps{margin:12px 0;padding-left:22px;display:grid;gap:6px;font-weight:600}
.warn-txt{color:var(--warn)}
.dtbl td .demo-link{background:none;border:0;padding:0;color:var(--brand);text-decoration:underline;cursor:pointer;text-align:left}
.dtbl td.acc .demo-link{white-space:nowrap}
.demo-tip{position:fixed;z-index:70;max-width:320px;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 12px;box-shadow:0 8px 22px rgba(0,0,0,.25);font-size:13px}
.nav-badge.news{background:var(--sel);color:var(--brand)}
.news-list{padding:4px 24px}
.news-item{padding:16px 0;border-top:1px solid var(--line)}
.news-item:first-child{border-top:0}
.news-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)}
.root .news-t{font-size:16px;font-weight:700;line-height:1.35;margin:4px 0 0}
.news-t a{color:inherit;text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:3px}
.news-item p{margin:6px 0 0;font-size:14px;line-height:1.5}
.news-mini{display:flex;flex-direction:column;margin:8px 0 6px}
.news-mini .news-item{padding:11px 0}
.root .news-mini .news-t{font-size:14px}
.news-strip{margin:-8px 0 22px;padding:8px 8px 8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px}
.news-strip-row{display:flex;align-items:center;gap:10px}
.news-strip .i-sm{color:var(--brand);flex:none}
.news-strip-d{color:var(--muted);flex:none;font-size:13px}
.news-strip-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.news-strip .linkbtn{flex:none;min-height:32px}
.news-strip .x{flex:none;border:0;background:none;color:var(--muted);display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;cursor:pointer}
.news-strip .x:hover{background:var(--hi);color:var(--text)}
.news-mini + .linkbtn{margin-left:-4px}
@media (max-width:640px){.news-strip-d{display:none}.news-strip-t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}}
/* Kundendaten mit Tabs (Grundeinstellungen, Briefing, Abrechnung) – 07.11.2026 */
.root textarea{font:inherit;color:inherit}
.pf-tabs{border-bottom:1px solid var(--line);padding-bottom:10px}
.pf-tabs .tab .lock{margin-left:2px}
.pf-card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;min-height:34px}   /* Höhe des Knopfs: Überschrift springt beim Bearbeiten nicht */
.pf-card-h .h2{margin-right:auto}
.pf-block{padding-top:6px}
.pf-block + .pf-block{border-top:1px solid var(--line);margin-top:14px}
.pf-block .pf-sub{margin:8px 0 0}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pf-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--hi);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}
.pf-x{border:0;background:none;color:var(--muted);display:inline-flex;padding:2px;margin-right:-6px;border-radius:999px;min-height:24px;min-width:24px;align-items:center;justify-content:center}
.pf-x:hover{color:var(--text);background:var(--line)}
.pf-country{width:min(100%,300px)}
.pf-sub{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 0}
.pf-tasks{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pf-tasks li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--hi);border:1px solid var(--line);border-radius:12px}
.pf-tasks li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:6px;flex:none}
.pf-quote{margin:10px 0 0;padding:12px 14px;border-left:3px solid var(--line);background:var(--hi);border-radius:0 10px 10px 0;white-space:pre-wrap}
.pf-intern{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:3px 10px}
.pf-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px 18px;margin-top:12px}
.pf-form .wide{grid-column:1/-1}
.pf-form textarea.inp{min-height:84px}
/* Knopfzeile in Formularen und Dialogen (formActs): rechts [Abbrechen] [Hauptaktion], links Löschen/Nebenaktionen */
.form-acts{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.form-acts .fa-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-right:auto}
.form-acts .btn.busy{opacity:.75;cursor:progress}
.auth-form .form-acts{margin-top:4px}   /* Dialoge: Abstand kommt schon vom gap des Formulars */
.pf-rows{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pf-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr)) auto;gap:8px;align-items:center}
.pf-row .inp{width:100%;min-width:0}
.pf-rows-kpis .pf-row{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1fr) auto}
.pf-rows-contacts .pf-row{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1fr) auto}
.pf-form-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.root .nowrap{white-space:nowrap}
.pf-links{display:flex;flex-direction:column;margin-top:8px}
.pf-links > *{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-weight:600;min-width:0}
.pf-links > a:hover{color:var(--brand)}
.pf-links span{color:var(--muted);font-weight:500;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pf-links > :last-child{border-bottom:0}
.pf-dir{font-size:12px;font-weight:700;color:var(--muted)}
.pf-note{font-size:12px;color:var(--muted);margin:0}
.pf-del{width:1%;text-align:right}
.pf-kv dt{align-self:center}
.pf-kv dt label{cursor:pointer}
.pf-kv dd .inp{width:100%}
.pf-kv dd textarea.inp{padding:8px 10px;resize:vertical}
.pf-etbl td{padding-top:6px;padding-bottom:6px}
.pf-etbl{table-layout:fixed;width:100%;min-width:420px}
.pf-etbl .inp{width:100%;min-width:0;padding-left:8px;padding-right:8px}
.pf-etbl select.inp{padding-right:2px}
.pf-etbl th,.pf-etbl td{padding-left:6px;padding-right:6px}
.pf-etbl th:last-child{width:50px}
.pf-etbl-kpis th:nth-child(1){width:24%}
.pf-etbl-kpis th:nth-child(2){width:31%}
.pf-etbl-kpis th:nth-child(3){width:17%}
.pf-etbl th,.pf-del{position:relative}   /* .sr (absolut) bleibt in der scrollenden Tabelle, sonst wird die Seite breiter */
.pf-links-edit > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:8px;align-items:center;padding:6px 0}
.pf-links-edit .inp{width:100%;min-width:0}
.pf-tasks-edit li{align-items:center;padding:6px 8px 6px 12px}
.pf-tasks-edit li::before{margin-top:0}
.pf-tasks-edit .inp{flex:1;min-width:0;width:auto}
.pf-adder{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pf-text-edit textarea.inp{width:100%;padding:8px 10px;resize:vertical;margin-top:6px}
.pf-quote-edit textarea.inp{border-left:3px solid var(--line)}
.pf-del .icon-btn,.pf-row .icon-btn{width:36px;height:36px}
@media (max-width:640px){
  .pf-rows .pf-row{grid-template-columns:1fr auto;padding:10px;border:1px solid var(--line);border-radius:12px}
  .pf-row > .inp{grid-column:1}
  .pf-row > .icon-btn{grid-column:2;grid-row:1}
}
/* Werbekonten anlegen / verknüpfen (nur intern) */
.pf-acc{border-top:1px solid var(--line);margin-top:16px;padding-top:4px}
.pf-req{color:var(--brand)}
.pf-acc-ch{width:auto;min-width:160px}
/* Kundenliste: Sortierung per Spaltenkopf und Filter wie auf der Befund-Seite */
.lhead .th-sort{padding:0;min-height:44px;gap:5px}
.lhead .lh-p .th-sort{gap:6px}
.cust-fhead{margin:4px 0 10px}
/* Suchfeld in der Seite (Kundenliste, Checks, Check-Einstellungen): wie die Suche der Suchanfragen-Treffer (.tblbar .search) */
.sec-head .page-q{flex:0 1 260px;min-width:170px;min-height:34px;border-radius:10px}
.root .sec-head .page-q input{min-height:32px}
.toolbar .page-q{margin-left:auto;flex:1 1 180px;min-width:180px;max-width:320px}
/* Upgrade-Dialog: aufklappbare Zeilen (Fragezeichen rechts in der Zelle, Stichpunkte über die ganze Breite) */
.cmp .up-tg-cell{padding:0}
.up-tg{border:0;background:none;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 14px;text-align:left;font-weight:inherit;color:inherit;cursor:pointer;min-height:40px}
.up-tg:hover{color:var(--brand)}
.up-tg svg{flex:none;width:17px;height:17px;color:var(--muted);transition:color .15s}
.up-tg:hover svg,.up-tg.open svg{color:var(--brand)}
.cmp .up-details{grid-column:1/-1;display:block;border-top:0;padding:0 14px 10px 14px}
.up-details ul{margin:0;padding-left:16px;display:grid;gap:4px;color:var(--muted)}
.up-details li{padding:0}
@media (prefers-reduced-motion:reduce){.up-tg svg{transition:none}}

/* KPIs (Recht v3/kpis): Farbe = Pfeil aus der Java-App – rot schlechter, gelb stabil, grün besser */
.k-red{color:var(--p1)}.k-yellow{color:var(--p3)}.k-green{color:var(--p5)}.k-none{color:var(--muted);font-weight:500}
.kar{width:13px;height:13px;flex:none}.kar-down{transform:rotate(180deg)}.kar-flat{transform:rotate(90deg)}
.kpis{display:flex;flex-direction:column;gap:3px}
.kpi{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:9px;border:1px solid transparent;font-size:13px;min-height:30px}
.kpi.hot{background:var(--p1bg)}   /* rote KPI in der Kundenkachel: nur zart hinterlegt, ohne Rahmen (10.11.2026) */
.kpi-n{flex:1;min-width:0;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-v{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.kpi-d{display:inline-flex;align-items:center;justify-content:flex-end;gap:2px;min-width:72px;font-size:12px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.kf-sec{display:flex;flex-direction:column;gap:12px;margin-top:20px;padding-top:18px;border-top:1px dashed var(--line)}
.kf-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kf-title{font-size:15px;font-weight:700;margin:0;flex:1;min-width:140px}
.kf-chips{display:flex;gap:6px;flex-wrap:wrap}
.kchip{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap;border:1px solid transparent;min-height:28px;cursor:pointer}
.kchip.k-red{background:var(--p1bg)}.kchip.k-yellow{background:var(--p3bg)}.kchip.k-green{background:var(--p5bg)}
.root button.kchip{font-size:12px;font-weight:700}.root button.kchip.k-red{color:var(--p1)}.root button.kchip.k-yellow{color:var(--p3)}.root button.kchip.k-green{color:var(--p5)}  /* gegen .root button{font:inherit;color:inherit} */
.kchip:hover{border-color:currentColor}.kchip.on{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.kf-sec .focus-list{margin-top:0}
.kfocus{gap:12px;padding:0 14px 0 0;overflow:hidden;min-height:58px}
.kf-bar{align-self:stretch;width:5px;flex:none;background:currentColor}
.kfocus .focus-txt{flex:1;min-width:0}
.kfocus .focus-t,.kfocus .focus-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-v{display:flex;flex-direction:column;align-items:flex-end;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.kf-v small{color:var(--muted);font-size:12px;font-weight:500}
@media (max-width:480px){.kfocus .kf-v small{display:none}.kfocus .kpi-d{min-width:0}}
/* KPI-Knopf auf der Kundenseite (nur Symbol) und KPI-Seite des Kunden */
.root button.btn-icon{padding:0;width:42px}
.root button.btn-icon .i{width:19px;height:19px}
.kpi-tbl th.num{text-align:right}
.h1 .i{width:24px;height:24px;vertical-align:-3px}
@media (max-width:820px){
  /* KPI-Tabelle als Blöcke: Name | Wert, darunter Zeitraum | Veränderung (Kennzahl steckt meist im Namen) */
  .dtbl.kpi-tbl thead{display:none}
  .dtbl.kpi-tbl,.dtbl.kpi-tbl tbody{display:block;width:100%}
  .dtbl.kpi-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
  .dtbl.kpi-tbl tr:first-child{border-top:0}
  .dtbl.kpi-tbl td{padding:0;border:0;max-width:none}
  .dtbl.kpi-tbl td:nth-child(1){grid-column:1;grid-row:1}
  .dtbl.kpi-tbl td:nth-child(2){display:none}
  .dtbl.kpi-tbl td:nth-child(3){grid-column:1;grid-row:2;font-size:12px;color:var(--muted)}
  .dtbl.kpi-tbl td:nth-child(4){grid-column:2;grid-row:1}
  .dtbl.kpi-tbl td:nth-child(5){grid-column:2;grid-row:2}
}
/* KPI-Maske (#/kunde/{id}/kpis) */
.kpi-top{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.kpi-top>div{flex:1;min-width:240px}
.kpi-form{display:flex;flex-direction:column;gap:14px}
.kpi-form .h2{margin:0}
.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kpi-grid .inp,.kpi-grid .sel{width:100%}
.kpi-wide,.kpi-custom{grid-column:1/-1}
.kpi-custom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kpi-evhead{display:flex;align-items:center;gap:12px;margin-top:4px}
.kpi-eval{display:flex;flex-direction:column;gap:10px}
.kpi-evrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:600}
.root .inp.kpi-amt{width:96px}
.kpi-adv{display:flex;flex-direction:column;gap:8px}
.kpi-advrow{display:grid;grid-template-columns:12px 64px minmax(140px,220px) 96px 110px;align-items:center;gap:10px}
.kpi-dot{width:10px;height:10px;border-radius:50%;background:currentColor}
.kpi-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.kpi-check input{width:18px;height:18px;accent-color:var(--btn)}
.kpi-acts{white-space:nowrap;text-align:right;width:1%}
.root button.kpi-ib{width:34px;height:34px;border-radius:9px;display:inline-grid;margin-left:4px;color:var(--muted)}
.root button.kpi-ib:hover:not(:disabled){color:var(--text);border-color:var(--muted)}
.root button.kpi-ib:disabled{opacity:.35;cursor:default}
.kpi-tbl tr.sel-row td{background:var(--sel)}
@media (max-width:820px){
  .kpi-grid,.kpi-custom{grid-template-columns:1fr}
  .kpi-advrow{grid-template-columns:12px 1fr 1fr;grid-template-areas:"d n n" "s s s" "a a t"}
  .kpi-advrow .kpi-dot{grid-area:d}.kpi-advrow b{grid-area:n}.kpi-advrow select:first-of-type{grid-area:s}.kpi-advrow input{grid-area:a;width:100%}.kpi-advrow select:last-of-type{grid-area:t}
  .dtbl.kpi-tbl td.kpi-acts{grid-column:1/-1;grid-row:3;text-align:left;padding-top:6px}
  .root button.kpi-ib{margin:0 6px 0 0;width:40px;height:40px}
}
/* Drag & Drop: Griff als Hinweis, gezogenes Element halb durchsichtig */
[draggable="true"]{cursor:grab}
.dragging{opacity:.45}
.grip{display:inline-flex;color:var(--muted);margin-right:6px;vertical-align:-2px;cursor:grab}
.grip .i-sm{width:14px;height:14px;fill:currentColor}
.cust{position:relative}
/* Kundenkachel: Greif-Hand nur im Streifen oberhalb des Namens (13.11.2026), die Kachel selbst zeigt den normalen Zeiger */
.cust[draggable="true"]{cursor:auto}
.grip-card{position:absolute;top:0;left:0;right:0;height:20px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;margin:0;cursor:grab}
.grip-card svg{transform:rotate(90deg)}
.cust:hover .grip-card,.cust:focus-within .grip-card{opacity:1}
@media (hover:none){.grip-card{display:none}}
@media (prefers-reduced-motion:reduce){.grip-card{transition:none}}
/* KPI-Brennpunkte: Kundenname links vor dem KPI-Namen, lange Namen gekürzt (voller Name im Tooltip) */
.kf-cust{flex:none;width:110px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-cust-m{display:none}
@media (max-width:480px){.kf-cust{display:none}.kf-cust-m{display:inline;font-weight:700;color:var(--text)}}  /* Handy: Kunde in der zweiten Zeile, KPI-Name behält die Breite */
/* KPIs auf der Kundenseite */
.ktiles-head{display:flex;align-items:center;gap:12px;margin-top:20px}
.ktiles{margin-bottom:20px;padding-bottom:20px;border-bottom:1px dashed var(--line)}   /* KPIs über den Befund-Kacheln */
.ktiles-head .kf-title{flex:1}
.ktiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:10px}
.ktile{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;background:var(--hi);border:1px solid var(--line);min-width:0}
.ktile.hot{background:var(--p1bg);border-color:var(--p1)}
.ktile-n{color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ktile-v{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ktile .kpi-d{justify-content:flex-start;min-width:0}
.ktile-p{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Maske: Conversion-Kategorien */
.kpi-catset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.kpi-catset legend{padding:0;margin-bottom:2px}
.kpi-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 14px}
.kpi-cat{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;min-height:30px}
.kpi-cat input{width:17px;height:17px;accent-color:var(--btn);flex:none}
.kpi-catlist{display:block;color:var(--muted);font-size:11px;font-weight:500}
/* Seite Checks für Light: kostenlose Scripts oben, weitere in der Vollversion darunter */
.ck-sec{margin:6px 0 2px}.ck-sec .h2{margin:0}
.badge-c.badge-free{color:var(--p5);background:var(--p5bg);border-color:transparent}
.root a.btn.sm{font:inherit;font-size:12px;font-weight:700}
.ck-more{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.ck-more-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}.ck-more-head>div{flex:1;min-width:240px}
.ck-more-head .h2{margin:0;display:flex;align-items:center;gap:8px}
.ck-more-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 14px}
.ck-more-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0}
.ck-more-list li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Nutzung (#/nutzung, Regel 23) */
.us-sel { display: flex; flex-direction: column; gap: 2px; }
.us-sel .inp { width: auto; min-width: 220px; max-width: 100%; }
.us-tbl td { vertical-align: top; }
.us-trend { white-space: nowrap; color: var(--muted); }
.us-trend.up { color: var(--done); }
.us-trend.down { color: var(--p1); }
.us-flag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: 1px; }
.us-flag.churn { background: var(--p1bg); color: var(--p1); }
.us-flag.upg { background: var(--p3bg); color: var(--p3); }
/* Aktivierung neuer User (Erst-Login): nicht aktiviert grau, aktiviert grün, Daten da grün mit Rand */
.us-flag.act-open { background: var(--hi); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.us-flag.act-confirmed { background: var(--p5bg); color: var(--p5); }
.us-flag.act-data { background: var(--p5bg); color: var(--p5); box-shadow: inset 0 0 0 1px currentColor; }
.us-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.us-bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.us-bars li { display: grid; grid-template-columns: minmax(110px, 160px) 1fr 48px; align-items: center; gap: 10px; font-size: 13px; }
.us-bl { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-bar { height: 10px; background: transparent; }
.us-bar span { display: block; height: 100%; background: var(--viz-new); border-radius: 0 4px 4px 0; }
.us-bv { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.mb-8 { margin-bottom: 8px; }
.us-agg td { background: var(--hi); }

/* Mail (#/mail) */
.ml-form { max-width: 640px; }
.ml-form textarea { width: 100%; min-height: 140px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text); resize: vertical; }
.ml-form .hint { font-weight: 400; }
.kv dd.ml-warn { color: var(--warn); font-weight: 600; }
.mt-0 { margin-top: 0; }

/* Team: Dashboard eines Kollegen ansehen (Regel 24) */
.team-sel { width: auto; min-width: 150px; max-width: 260px; min-height: 40px; font-size: 13px; font-weight: 600; color: var(--text); }
.team-sel.on { color: var(--text); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.toolbar .seg button { padding: 6px 10px; }   /* Filterleiste über den Kundenkarten in einer Zeile (1440 px) */

/* Übersetzungen prüfen (System › Übersetzungen) */
.tr-bar { margin-bottom: 0; }
.tr-bar .search { max-width: 420px; }
.tr-bar .tr-q { color: var(--muted); flex: none; }
.tiles.tr-tiles { margin-top: 0; }
.tr-list { display: flex; flex-direction: column; gap: 10px; }
.tr-row { display: flex; flex-direction: column; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.tr-part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 22px; }   /* Check: Name und Beschreibung untereinander, ein Speichern */
.tr-part.paired + .tr-part.paired { border-top: 1px dashed var(--line); padding-top: 12px; }
.tr-noexpl { color: var(--muted); font-style: italic; }
.tr-row.dirty { border-color: var(--brand); }
.tr-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tr-en { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.tr-checks { margin-top: 6px; }
.tr-st { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.tr-st.st-missing { background: var(--p1bg); color: var(--p1); }
.tr-st.st-machine { background: var(--p3bg); color: var(--p3); }
.tr-st.st-reviewed { background: var(--p5bg); color: var(--p5); }
.tr-st.st-corr { background: var(--hi); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.root .tr-inp { width: 100%; min-height: 40px; padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.45; color: var(--text); resize: vertical; }
.tr-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.tr-dirty { color: var(--brand); }
.tr-conflict { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--p3bg); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-more { text-align: center; }
@media (max-width: 860px) { .tr-part { grid-template-columns: 1fr; } }

/* Tasks › Suchanfragen-Checks */
.tk-group { display: flex; flex-direction: column; gap: 10px; }
.tk-ghead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tk-ghead .linkbtn { display: inline-flex; align-items: center; gap: 4px; }
.tk-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tk-open { color: var(--p2); }
.tk-zero { color: var(--muted); font-weight: 600; }
.st-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.st-crumbs .back { margin: 0; padding: 0; min-height: 32px; }
.tiles.st-tiles { margin-top: 0; }
.st-tbl th .th-sort { padding: 9px 7px; }
.st-tbl td { padding: 8px 7px; }
.st-tbl .ck-col { padding-left: 12px; }
.st-tbl td.st-term { max-width: 300px; min-width: 180px; }
.st-tbl td.st-term .linkbtn { display: inline-flex; align-items: flex-start; gap: 6px; text-align: left; min-height: 0; padding: 0; color: var(--text); text-decoration: none; font-weight: 600; }
.st-tbl td.st-term .linkbtn svg { flex: none; margin-top: 2px; color: var(--muted); }
.st-tbl td.st-term .linkbtn:hover span { text-decoration: underline; }
.st-tbl .st-state { margin-left: 4px; }
.st-tbl tr.st-open > td { background: var(--hi); }
.st-tbl tr.st-detail > td { background: var(--hi); border-top: 0; max-width: none; padding-top: 0; }
.st-tbl .row-act { white-space: nowrap; }
.st-tbl .row-act .ra-btn + .ra-btn { margin-left: 4px; }
.st-dtbl { background: var(--card); margin-top: 6px; }
.st-dtbl td { max-width: 260px; }
.st-dtbl td.st-c { text-align: center; }
/* Details scrollen in ihrer Zelle: tragen nichts zur Breite der Haupttabelle bei (sonst rutschen Läufe und Knöpfe aus dem Bild) */
.st-tbl tr.st-detail .dwrap { width: 0; min-width: 100%; }
.st-dtbl th .th-sort { padding: 8px 7px; }
.st-mt { font-family: ui-monospace, Consolas, monospace; font-size: 12px; white-space: nowrap; cursor: help; }
.st-ts { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; font-weight: 800; cursor: help; }
.st-ts-add { color: var(--p5); background: var(--p5bg); }
.st-ts-exc { color: var(--p1); background: var(--p1bg); }
.st-ts-both { color: var(--p3); background: var(--p3bg); }
.st-ts-none { color: var(--muted); }
.st-form { display: flex; flex-direction: column; gap: 14px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; }
.st-grid label, .st-lbl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.st-grid .inp, .st-grid .sel { width: 100%; color: var(--text); font-weight: 500; }
.st-static { min-height: 40px; display: flex; align-items: center; font-weight: 600; }
.st-schedrow { display: flex; flex-direction: column; gap: 6px; }
.st-sched { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.st-sched .seg { flex-wrap: nowrap; }
.st-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.st-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.st-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--btn); }
.root .inp.st-num { width: 90px; text-align: right; }
.st-fhead { display: flex; flex-direction: column; gap: 2px; }
.st-flist { display: flex; flex-direction: column; gap: 8px; }
.st-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--hi); }
.st-frow .sel { min-height: 40px; }
.st-fval { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 220px; }
.st-chips { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 200px; }
.st-chips .chip { padding: 2px 4px 2px 10px; }
.st-chips .chip .x { border: 0; background: none; color: var(--muted); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; }
.st-chips .chip .x:hover { color: var(--text); background: var(--hi); }
.root .inp.st-chip-in { flex: 1; min-width: 160px; width: auto; }
.st-regex { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ra-btn.st-del { background: none; border-color: var(--line); color: var(--muted); margin-left: auto; }
.ra-btn.st-del:hover { color: var(--text); filter: none; border-color: var(--muted); }

.tk-ghead .h2, .tk-group .h2 { margin: 0; }
/* Tabellenleiste (Befund-Details, Suchanfragen): links Anzahl bzw. Aktionen der Auswahl, rechts Suche/Filter/Export.
   Feste Mindesthöhe (Knöpfe „sm“) – mit und ohne Auswahl gleich hoch, die Tabelle darunter springt nicht. Klebt oben. */
.tblbar { position: sticky; top: 72px; z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 54px; padding: 8px 12px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.tblbar-l { flex: 1 1 320px; min-width: 0; min-height: 36px; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.tblbar-r { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tblbar-hint { flex: 1 1 0; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tblbar .btn.on { border-color: var(--brand); color: var(--text); }
.tblbar .menu { top: calc(100% + 6px); bottom: auto; z-index: 70; }
.tblbar .search { flex: 0 1 220px; min-width: 170px; min-height: 34px; border-radius: 10px; }   /* so hoch wie die Knöpfe „sm“ */
.root .tblbar .search input { min-height: 32px; }
/* Schmaler als Anzahl/Auswahl-Knöpfe + Suche/Filter/Export: immer zwei Zeilen (links oben, rechts darunter) – auch ohne
   Auswahl, sonst bräche die Leiste erst beim Auswählen um und die Tabelle spränge */
.tblbar { container-type: inline-size; }
@container (max-width: 1060px) { .tblbar-l, .tblbar-r { flex-basis: 100%; } .tblbar-r { justify-content: flex-end; } }
.dr-intro { display: flex; align-items: flex-start; gap: 24px; }
.dr-all { flex: 0 0 auto; max-width: 300px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.root .dr-all .hint { margin: 0; }
@media (max-width: 700px) {
  .tblbar { top: 8px; }
  .tblbar-hint { display: none; }
  .dr-intro { flex-direction: column; gap: 12px; }
  .dr-all { align-items: flex-start; text-align: left; max-width: none; }
}
/* News: Kategorie-Buttons */
.news-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.root .news-cats .chip { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 12px; color: var(--text); }
.news-cats .chip:hover { border-color: var(--muted); }
.news-cat-n { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.news-cats .chip.sel .news-cat-n { color: var(--brand); }
/* News einzeln abhaken: ganze Box klickbar, ungelesen mit Markierung links, gelesen gedämpft */
.news-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.news-list .news-tick { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; margin: 0 -24px; padding: 16px 24px; border-left: 3px solid transparent; }
/* Mauszeiger: Box = abhaken (grüner Haken) bzw. Haken zurücknehmen (grauer Pfeil), Überschrift = Link (Hand) */
.news-list .news-tick.is-new, .news-list .news-tick.is-new *, .root .news-tick.is-new .news-check { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='11' fill='%2322a06b' stroke='white' stroke-width='2'/%3E%3Cpath d='M8 13.5l3.2 3.2 7-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 13 13, pointer; }
.news-list .news-tick.is-read, .news-list .news-tick.is-read *, .root .news-tick.is-read .news-check { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='11' fill='%236b7280' stroke='white' stroke-width='2'/%3E%3Cpath d='M10 9l-3.2 3.2 3.2 3.2M7 12.2h7.3a3.3 3.3 0 0 1 0 6.6H12' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 13 13, pointer; }
.news-list .news-tick .news-t a { cursor: pointer; }
.news-list .news-tick:hover { background: var(--hi); }
.news-list .news-tick.is-new { border-left-color: var(--brand); }
.news-tick .news-body { flex: 1; min-width: 0; }
.news-tick.is-read .news-t { font-weight: 600; color: var(--muted); }
.news-tick.is-read p { opacity: .8; }
.root .news-check { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: transparent; display: grid; place-items: center; cursor: pointer; margin-top: 2px; }
.news-tick:hover .news-check { border-color: var(--muted); color: var(--muted); }
.root .news-tick.is-read .news-check { background: var(--done); border-color: var(--done); color: var(--donefg); }
.news-check:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 700px) { .news-list .news-tick { margin: 0 -16px; padding: 14px 16px; } }
/* News-Streifen aufgeklappt: News des Tages */
.root .news-strip-tg { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 13px; }
.news-strip-tg:hover { color: var(--brand); }
.news-strip.open .news-strip-row { padding-bottom: 6px; }
.news-today { border-top: 1px solid var(--line); padding: 2px 8px 2px 0; }
.news-today .news-item { padding: 12px 0; }
.root .news-today .news-t { font-size: 15px; }
@media (max-width:640px){ .news-strip-row { flex-wrap: wrap; } .news-strip-t { flex-basis: calc(100% - 40px); } }
/* Tasks-Tabelle wie KPI-Übersicht */
.tk-tbl tr.tk-tr { cursor: pointer; }
.tk-tbl tr.tk-tr:hover td { background: var(--hi); }
.tk-tbl td .kpi-catlist { margin-top: 2px; }
.cust-tasks { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.cust-tasks .h2 { display: inline-flex; align-items: center; gap: 8px; }
.st-wds { gap: 4px; }
.root .st-wds .wd { width: 34px; padding: 6px 0; font-size: 12px; }
/* Tasks-Tabelle schmal (wie kpi-tbl ab 820 px): Einheit hinter den Zahlen, weil die Spaltenköpfe fehlen */
.tk-unit { display: none; }
@media (max-width:820px) { .tk-tbl .tk-unit { display: inline; } .tk-tbl td.num .tk-unit { font-weight: 500; } }
.tt-sep { color: var(--muted); font-weight: 500; }
/* Kundenkachel: Zeile je Task-Typ unter den Checks (neutral, wie die Wachstumszeile aufgebaut) */
.root button.taskline { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; min-height: 32px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.taskline svg { color: var(--muted); flex: none; }
.taskline:hover { color: var(--brand); }
.taskline:hover svg { color: var(--brand); }
/* Task-Konfigurationen als Zeilen in der Kundenkachel (freie Plätze unter den Checks) */
.tk-issues { margin-top: 6px; }
.tk-issue .tk-ico { display: inline-grid; place-items: center; width: 8px; color: var(--muted); }
.tk-issue .tk-ico svg { width: 14px; height: 14px; }
.tk-issue .iss-n { color: var(--text); }

/* Mail-Vorlagen (System › Mail, 10.11.2026) */
.mx-welcome-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mx-welcome + .mx-welcome { margin-top: -6px; }   /* Versand- und Welcome-Schalter als Paar */
.ml-warn-text { color: var(--warn); }
.text-right { text-align: right; }
.mx-edit label { display: block; font-weight: 600; font-size: 13px; color: var(--muted); }
.mx-edit .inp { width: 100%; margin-top: 4px; color: var(--text); }
.mx-head { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.mx-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 6px; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--hi); margin-top: 4px; }
.mx-tools .push { margin-left: auto; }
.mx-tools .mx-ph { width: auto; min-height: 30px; padding: 4px 8px; font-size: 13px; }
.mx-editor, .mx-area { min-height: 280px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 0 0 10px 10px; background: var(--card); color: var(--text); line-height: 1.5; overflow: auto; }
.mx-editor:focus, .mx-area:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.mx-area { width: 100%; font: 13px/1.5 ui-monospace, Consolas, monospace; resize: vertical; display: block; }
.mx-editor h2 { font-size: 20px; margin: 0 0 8px; }
.mx-editor p { margin: 0 0 10px; }
.mx-editor a { color: var(--brand); }
.mx-subject { margin: 8px 0; }
.mx-preview { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff; }
.btn.danger { color: var(--p1, #c4161c); }
.btn-row .push { margin-left: auto; }
.mx-filter { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: flex-end; }
.mx-filter label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; color: var(--muted); }
.mx-filter .inp { min-width: 140px; color: var(--text); }
.mx-filter .mx-days { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 400; }
.mx-filter .mx-days .inp { min-width: 0; width: 80px; }
label.mx-check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-weight: 400; min-height: 40px; }
.mx-lang { min-height: 30px; padding: 2px 6px; font-size: 13px; min-width: 96px; }
#mxTpl { min-width: 240px; }
.mx-logtpl { width: auto; min-width: 200px; }

/* Startseite „Old School“ (Einstellung Darstellung, 12.11.2026): Zeilen wie die bisherige Anwendung – links Kunde mit
   KPIs, Issues A (Prio 1–3) / B (4–6) als farbiger Text, Tasks, Zeiterfassung (Dummy, nur intern). Spalten je nach Recht */
.os-list { display: flex; flex-direction: column; gap: 10px; }
.os-hrow, .os-row { display: grid; gap: 20px; grid-template-columns: minmax(260px, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
.os-list.has-t .os-hrow, .os-list.has-t .os-row { grid-template-columns: minmax(260px, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(130px, .6fr); }
.os-list.has-z .os-hrow, .os-list.has-z .os-row { grid-template-columns: minmax(260px, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(230px, .9fr); }
.os-list.has-t.has-z .os-hrow, .os-list.has-t.has-z .os-row { grid-template-columns: minmax(260px, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(130px, .6fr) minmax(230px, .9fr); }
.os-hrow { padding: 0 18px; font-size: 13px; font-weight: 700; color: var(--muted); }
.os-row { background: var(--card); border: 1px solid var(--line); border-left: 3px solid transparent; border-radius: 12px; padding: 14px 18px; align-items: start; }
.os-row.crit { border-left-color: var(--p1); }
.os-row.demo { border-style: dashed; border-left-style: solid; }
.os-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.root .os-doc, .root .os-eye { background: none; border: 0; padding: 2px; color: var(--muted); cursor: pointer; display: inline-flex; border-radius: 6px; }
.root .os-doc:hover, .root .os-eye:hover, .root .os-eye.on { color: var(--text); }
.root .os-name { font: inherit; font-size: 17px; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.root .os-name:hover { color: var(--brand); }
.os-kpis { display: grid; grid-template-columns: auto 24px auto 24px; gap: 10px 12px; margin: 12px 0 0 34px; align-items: center; justify-content: start; }
.os-kpi { display: flex; flex-direction: column; align-items: center; text-align: center; }
.os-kv { font-size: 16px; font-style: italic; font-weight: 600; }
.os-kn { font-size: 12px; color: var(--muted); }
.os-ka { display: inline-flex; }
.os-ka .kar { width: 20px; height: 20px; }
.os-col { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.os-lbl { display: none; font-size: 12px; font-weight: 700; color: var(--muted); }
.root .os-i { font: inherit; font-size: 15px; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.root .os-i:hover { text-decoration: underline; }
.os-ok { color: var(--p5); font-weight: 600; }
.os-setup { color: var(--muted); font-size: 13px; }
.os-more, .os-newtask { font-size: 13px; }
.root .os-i.os-task { color: var(--text); font-weight: 500; }
.root .os-newtask { margin-top: 4px; }
.os-time { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.root .os-time .inp { width: 100%; min-height: 34px; }
.os-time-row { display: flex; gap: 6px; }
.root .os-time-row .inp { flex: 1; }
.root .btn.os-ok-btn { background: var(--done); color: var(--donefg); border-color: var(--done); min-height: 34px; min-width: 64px; justify-content: center; }
@media (max-width: 1100px) {
  .os-hrow { display: none; }
  .os-list .os-row, .os-list.has-t .os-row, .os-list.has-z .os-row, .os-list.has-t.has-z .os-row { grid-template-columns: 1fr 1fr; }
  .os-left { grid-column: 1 / -1; }
  .os-lbl { display: block; }
}
@media (max-width: 640px) {
  .os-list .os-row, .os-list.has-t .os-row, .os-list.has-z .os-row, .os-list.has-t.has-z .os-row { grid-template-columns: 1fr; }
  .os-kpis { margin-left: 0; }
}

/* Erst-Login (Regel 25, 12.11.2026): Willkommenskarte mit Schmerz-Frage, Einrichtungsstand; Glocke mit Abzeichen und Panel */
.card.ob { border: 1px solid var(--brand); display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }   /* wie der Abstand zwischen den Karten der Begrüßung */
.card.ob.all-done { border-color: var(--done); }   /* Grundset komplett eingerichtet: ganze Karte grün */
.ob-head { display: flex; align-items: flex-start; gap: 12px; }
.ob-head .h2 { flex: 1; margin: 0; }
.root .ob-head .x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.root .ob-head .x:hover { color: var(--text); }
.ob-q { font-weight: 700; margin: 0; }
.ob-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ob-pains { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.root .ob-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--hi); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; color: var(--text); font: inherit; }
.root .ob-opt:hover { border-color: var(--brand); }
.root .ob-opt.primary { border-color: var(--brand); background: var(--sel); }
.ob-opt b { font-size: 15px; }
.ob-opt small { color: var(--muted); font-size: 13px; }
.ob-rec { background: var(--hi); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ob-rec-h { font-size: 15px; margin-bottom: 4px; }
.ob-rec .muted { margin: 6px 0 12px; }
.ob-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--done); font-weight: 700; }
.root .ob-opt { position: relative; }
.root .ob-opt.done { border-color: var(--done); }
.root .ob-opt.done b { padding-right: 30px; }
.ob-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--done); color: var(--donefg); display: inline-grid; place-items: center; }
.ob-opt .ob-tick { position: absolute; top: 12px; right: 12px; }
.ob-congrats { display: flex; align-items: flex-start; gap: 12px; background: var(--p5bg); border: 1px solid var(--done); border-radius: 12px; padding: 14px 16px; margin-top: 12px; }
.ob-congrats > .ob-tick { width: 28px; height: 28px; margin-top: 1px; }
.ob-congrats b { display: block; font-size: 16px; margin-bottom: 4px; }
.ob-steps { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ob-steps li { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 14px; }
.ob-steps li small { display: block; font-size: 12px; color: var(--muted); }
.ob-steps li.done { color: var(--text); }
.ob-steps li.now { color: var(--text); font-weight: 700; }
.ob-steps li.now small { font-weight: 400; }
.ob-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: inline-grid; place-items: center; }
.ob-steps li.done .ob-ico { background: var(--done); border-color: var(--done); color: var(--donefg); }
.ob-steps li.now .ob-ico { border-color: var(--brand); color: var(--brand); }
@media (max-width: 760px) { .ob-choice, .ob-steps { grid-template-columns: 1fr; } }

.nav-badge.bell { background: var(--btn); color: var(--btnfg); }
.msg-panel { position: fixed; z-index: 70; width: 340px; max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 6px; }
.msg-h { font-weight: 800; font-size: 14px; padding: 2px 4px 6px; }
.root .msg-item { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: none; border: 0; border-radius: 10px; padding: 8px; cursor: pointer; color: var(--text); font: inherit; }
.root .msg-item:hover { background: var(--hi); }
.msg-item.new b::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--btn); margin-left: 6px; vertical-align: middle; }
.msg-item small { display: block; color: var(--muted); font-size: 13px; }
.msg-item .msg-d { font-size: 12px; margin-top: 2px; }

/* Light: Kanäle ohne Konto ausgegraut (Klick → Upgrade-Dialog), 12.11.2026 */
.root .chip.ch-locked { opacity: .45; filter: grayscale(1); cursor: pointer; }
.root .chip.ch-locked:hover, .root .chip.ch-locked:focus-visible { opacity: .7; }

/* Quick Actions: Dialog mit Vorschau der Ziele (12.11.2026) */
.qa-modal h2 { display: flex; align-items: center; gap: 8px; }
.qa-targets ul { margin: 6px 0 0; padding-left: 18px; max-height: 240px; overflow: auto; }
.qa-targets li { margin: 2px 0; }
.qa-targets ul.ng-list { list-style: none; padding-left: 0; }
.menu button .qa-cap { display: block; font-size: 11px; opacity: .7; margin-top: 2px; }
.menu button[disabled] { opacity: .5; cursor: not-allowed; }
.qa-unit { display: flex; align-items: center; gap: 6px; }
.qa-unit .inp { flex: 1; }
.qa-set { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.qa-set legend { padding: 0; margin-bottom: 4px; }
/* Überschriften im Dialog „Ausschließen“ und Anzahl in der Tabellenleiste: normal geschrieben, keine Großbuchstaben */
.ng-lbl, .tblbar-n { font-size: 13px; font-weight: 700; color: var(--text); }
.tblbar-n { white-space: nowrap; }
.ng-kwbox { display: grid; gap: 6px; }
.root textarea.ng-kw { width: 100%; min-height: 110px; padding: 8px 10px; resize: vertical; line-height: 1.5; background: var(--card); color: var(--text); }

/* Verschachtelte Zeilen im Befund (z. B. Anzeigengruppen unter ihrer Kampagne), 13.11.2026 */
/* Verschachtelte Zeilen: Kinder sehen aus wie normale Zeilen (Plakette + Einrückung genügen), der Pfeil hat eine
   schmale eigene Spalte wie in der Java-App. Zugeklappte Kinder bleiben im DOM mit visibility: collapse – die Tabelle
   behält so ihre Spaltenbreiten, beim Auf-/Zuklappen springt nichts. */
.el-tbl tr.nested td.nest-cell { padding-left: 28px; }
.el-tbl tr.nest-off { visibility: collapse; }
.el-tbl th.nest-col, .el-tbl td.nest-col { width: 1%; padding-left: 4px; padding-right: 0; text-align: center; }
.nest-tg { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; width: 18px; padding: 2px 0; display: inline-flex; justify-content: center; vertical-align: 1px; }
.nest-tg:hover, .nest-tg:focus-visible { color: var(--text); }
/* Ebenen-Plakette der Scripts vor verschachtelten Zeilen („AG“), aus formatting._Cleaner */
.lvl-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 15px; padding: 0 5px; margin-right: 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--card); vertical-align: 1px; white-space: nowrap; }

/* Zeiterfassung in der Kundenkachel (14.11.2026): Summe links, geteilter Knopf rechts, Feld als Menü darunter */
.time-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.time-sum { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 12px; color: var(--muted); }
.time-split { display: inline-flex; position: relative; }
.time-split .time-quick { border-top-right-radius: 0; border-bottom-right-radius: 0; display: inline-flex; align-items: center; gap: 5px; }
.time-split .time-more { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; padding-left: 6px; padding-right: 6px; }
.time-pop { position: absolute; right: 0; top: calc(100% + 6px); width: 300px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; z-index: 50;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.28); }   /* wie .menu, aber Formular (unter Meldungen z 60) */
.time-pop.pop-up { top: auto; bottom: calc(100% + 6px); }   /* unten kein Platz: nach oben (placeTimePop) */
.time-pop .inp { width: 100%; }
.time-pop .flabel { margin-top: 4px; }
.time-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.time-chips .chip { min-height: 30px; padding: 0 10px; }
.time-chips .sug-wrap { width: 96px; }
.time-chips .sug-wrap .inp { min-height: 30px; }
.time-pop .form-acts { margin-top: 8px; }
.os-month { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
/* Vorschlagsliste der Zeiterfassung (sugInput): öffnet beim Fokus, über Meldungen nicht (z 60) */
.sug-wrap { position: relative; width: 100%; }
.os-time-row .sug-wrap { flex: 1; }
.sug-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 220px; overflow-y: auto; z-index: 56; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.sug-list.sug-up { top: auto; bottom: calc(100% + 4px); }
.sug-i { padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-i:hover, .sug-i.act { background: var(--hi); }
.sug-i.on { font-weight: 700; }
/* Seite Zeiterfassung (14.11.2026): Monat je Tag × User, Farbskala der Tagessumme (heatStyle in app.js, Tokens --heat-*) */
.tt-tbl th, .tt-tbl td { white-space: nowrap; }
.tt-tbl thead th { position: sticky; top: 0; z-index: 1; }
.tt-tbl tbody th, .tt-tbl tfoot th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); background: var(--card); }
.tt-tbl .tt-cell { min-width: 64px; font-variant-numeric: tabular-nums; }
.tt-tbl tr.tt-we th { opacity: .7; }
.tt-tbl tr.tt-today th { color: var(--text); font-weight: 800; }
.tt-tbl tr.tt-today td, .tt-tbl tr.tt-today th { border-top: 2px solid var(--brand); border-bottom: 2px solid var(--brand); }
.tt-tbl tr.tt-today .tt-cell { font-weight: 800; }
.tt-tbl td.tt-link { padding: 0; }
.tt-tbl .tt-cell-link { display: block; width: 100%; min-height: 37px; padding: 8px 12px; border: 0; background: none; color: inherit; font: inherit;
  text-align: right; cursor: pointer; }   /* ganze Zelle klickbar; heute immer umrahmt, sonst beim Drüberfahren */
.tt-tbl tr.tt-today .tt-cell-link { font-weight: 800; box-shadow: inset 0 0 0 2px var(--brand); }
.tt-tbl .tt-cell-link:hover, .tt-tbl .tt-cell-link:focus-visible { box-shadow: inset 0 0 0 3px var(--brand); outline: none; }
.tt-pager { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.tt-pager .tt-mlabel { min-width: 150px; text-align: center; font-weight: 700; }
.tt-pager .tt-pg:disabled { opacity: .35; cursor: default; }
.tt-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tt-sub .muted { margin-top: 6px; }
.tt-tbl .tt-user { font: inherit; font-weight: 700; }
.tt-tbl tfoot td, .tt-tbl tfoot th { font-weight: 800; border-top: 2px solid var(--line); }
.tt-etbl tr.tt-today td { background: var(--sel); }
.tt-modal { width: min(520px, 100%); }
.tt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tt-modal .inp, .tt-modal .sel { width: 100%; font-weight: 400; }   /* Felder im Label: nicht fett, volle Breite (auch Datum) */
/* Tacho der Kundenauslastung (tachoHtml): Kachel und Old School */
.tacho { display: inline-flex; width: 46px; height: 26px; flex: none; }
.tacho svg { width: 100%; height: 100%; }
.tacho-arc path { fill: none; stroke-width: 7; }
.tacho-arc .s1 { stroke: var(--p1); } .tacho-arc .s3 { stroke: var(--p4); } .tacho-arc .s5 { stroke: var(--p5); }
.tacho-needle { stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; }
.tacho-hub { fill: var(--text); }
/* Kundendaten › Abrechnung: Kachel Stundenlimit (pfLimitTile) */
.pf-limit .tile-label { display: flex; align-items: center; gap: 6px; }
.pf-limit .pf-limit-edit { margin-left: auto; width: 28px; height: 28px; }
.pf-limit .inp { width: 100%; margin-top: 8px; }
.pf-limit .form-acts { margin-top: 8px; }
/* Breite Bildschirme (14.11.2026): mehr Rand, Checks der Kundenseite zweispaltig (Befund-Details: Erklärung seit 15.11.2026 wieder über der Tabelle) */
@media (min-width: 1600px) {
  .main { padding-left: 36px; padding-right: 36px; }
  .fgrps { columns: 2; column-gap: 24px; }
  .fgrp { break-inside: avoid; }
  .fgrp .grp-title { padding-top: 14px; }
}
/* Seitenleiste einklappbar, System-Gruppe, Untereinträge (renderSide, 14.11.2026) */
.nav-grp { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.nav-grp:hover { color: var(--text); }
.nav-subs { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 30px; border-left: 1px solid var(--line); }
.nav-sub { border: 0; background: none; text-align: left; padding: 6px 10px; border-radius: 0 8px 8px 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-sub:hover { background: var(--hi); color: var(--text); }
.nav-sub.on { color: var(--text); box-shadow: inset 2px 0 0 var(--brand); }
.side-btn { margin-left: auto; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--muted); cursor: pointer; }   /* dezenter Rahmen wie .icon-btn (15.11.2026) */   /* Menü ein-/ausklappen, oben in der Leiste neben dem Logo */
.side-btn:hover { color: var(--text); border-color: var(--muted); }
.side-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.side .brand { flex-wrap: wrap; row-gap: 8px; }
.side .brand .side-btn { order: 2; }
.side .brand .ed-badge { order: 3; margin-left: 2px; }   /* „Light“ bricht unter das Logo um, der Knopf bleibt daneben */
@media (max-width: 820px) { .side-btn, .nav-subs { display: none; } }
@media (min-width: 821px) {
  .side-min .side { flex: 0 0 68px; max-width: 68px; padding: 18px 10px; }
  .side-min .side .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side-min .side .nav-item { justify-content: center; padding: 10px; gap: 0; position: relative; }
  .side-min .side .nav-badge { position: absolute; top: 5px; right: 5px; min-width: 0; width: 9px; height: 9px; padding: 0; font-size: 0; }
  .side-min .side .nav-label { padding: 0; margin: 10px 6px; border-top: 1px solid var(--line); }
  .side-min .side .brand { padding: 2px 0 14px; justify-content: center; flex-direction: column; gap: 10px; }
  .side-min .side .side-btn { margin-left: 0; }
  .side-min .side .logo-wrap { padding: 4px; }
  .side-min .side .logo-wrap img { height: auto; width: 38px; }
  .side-min .side .user { justify-content: center; padding: 8px 0; }
  .side-min .side .user > span:not(.me) { display: none; }
  .side-min .side .logout { justify-content: center; display: flex; padding: 10px 0; }
}
/* News als Kachel in der Begrüßung (heroNewsTile) unter dem Verteilungsbalken, füllt den Rest der Karte */
.hero-main { display: flex; flex-direction: column; }
.tile-news { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-top: 16px; flex: 1; }
.tile-news .tile-label { display: flex; align-items: center; gap: 6px; }
.tile-news .tile-label .i-sm { color: var(--brand); }
.tile-news .hn-d { color: var(--muted); font-weight: 500; font-size: 12px; }
.tile-news .x { margin-left: auto; border: 0; background: none; color: var(--muted); width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; }
.tile-news .x:hover { background: var(--hi); color: var(--text); }
.hn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.hn-list li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hn-list a { color: var(--text); text-decoration: none; }
.hn-list a:hover { color: var(--brand); text-decoration: underline; }
.hn-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; font-size: 12px; }
.hn-foot .linkbtn { margin-left: auto; min-height: 28px; }
.tile-news.open .tile-label { padding-bottom: 4px; }
.tile-news .news-today { padding-right: 0; }
.tile-news .hn-foot .hn-tg { margin-left: 0; }
.tile-news .newb { display: none; }   /* ohne „Neu“-Abzeichen in der Kachel (User 14.11.2026) */
/* Handy (≤ 640 px): „Guten Morgen“ und „Heute zuerst“ zeigt die Startseite nur, wenn ein interner User sie einschaltet
   (Einstellungen › Mobile Ansicht, mobHero/mobToday); die Klassen wählen, welcher Teil zu sehen ist */
.cust-more { display: flex; flex-direction: column; gap: 14px; }   /* Hülle um Pills, Checks, Tasks – Abstände wie vorher in .cust */
.cust-more:empty { display: none; }
@media (max-width: 640px) {
  /* Einstellungen › Mobile Ansicht (mobHero/mobToday, Standard aus); der Knopf .mob-hero-tg blendet beide vorübergehend ein */
  .u-int:not(.mob-hero-on) .hero > .hero-main,
  .u-int:not(.mob-today-on) .hero > .hero-today { display: none; }
}
.root .tile-news .hn-less { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--text); }   /* Einklappen im Kopf (15.11.2026) */
.tile-news .hn-less:hover { color: var(--brand); }
/* Tacho als Knopf (öffnet die Zeiten des Kunden, 15.11.2026) */
.root button.tacho { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 6px; }
.root button.tacho:hover { background: var(--hi); }
.root button.tacho:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* KPI-Seite: Zeile = Klick zu den Einstellungen, ziehen nur am Griff links */
.kpi-tbl .kpi-row { cursor: pointer; }
.kpi-tbl .kpi-row:hover td { background: var(--hi); }
.kpi-tbl .kpi-grip { cursor: grab; padding: 6px 4px; margin: -6px 4px -6px -6px; border-radius: 6px; }
.kpi-tbl .kpi-grip:hover { background: var(--line); color: var(--text); }
.kpi-tbl .kpi-grip:active { cursor: grabbing; }
.tt-tbl td .linkbtn.bare { min-height: 0; padding: 0; vertical-align: baseline; }   /* Mitarbeiter-Link in „Zeiten bei …“ auf Zeilenhöhe */
/* Favoriten-Stern (Kundenliste, Kundendaten; 15.11.2026) */
.fav-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border: 0; background: none; padding: 0; border-radius: 6px; color: var(--muted); cursor: pointer; }
.fav-btn:hover { background: var(--hi); color: var(--text); }
.fav-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.fav-btn.on { color: var(--p3); }
.fav-btn.on svg { fill: currentColor; }
.lname .fav-btn { margin-right: 4px; }
.pf-name { display: flex; align-items: center; gap: 6px; }
/* „Heute zuerst“ und KPI-Brennpunkte: mit Filter unsichtbare Platzhalter-Zeilen bis zur Anzahl ohne Filter (padList, 15.11.2026) */
.focus-list { position: relative; }
.focus-ph { visibility: hidden; }
.fl-empty { position: absolute; left: 0; right: 0; top: 0; }
.kf-more { min-height: 32px; }

/* ---------- Handy (≤ 640 px, alle User; 15.11.2026): feste Navigation unten, kompakte Kundenliste, Kundenseite mit großen KPIs ----------
   Die Klassen .m* zeichnet app.js nur auf dem Handy (isMob). „Mehr“ blendet die Seitenleiste als Blatt ein (more-open am <html>). */
.tabbar { display: none; }
.mhead { margin: 0 0 12px; }
.root .mh1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.mprio { display: flex; flex-wrap: wrap; gap: 4px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 14px; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mprio span { display: inline-flex; align-items: baseline; gap: 5px; }
.mprio b { font-size: 22px; font-weight: 800; }
.mprio [data-p="1"] b, .mrow-st[data-p="1"], .mtile[data-p="1"] > span { color: var(--p1); }
.mprio [data-p="2"] b, .mrow-st[data-p="2"], .mtile[data-p="2"] > span { color: var(--p2); }
.mprio [data-p="3"] b, .mrow-st[data-p="3"], .mtile[data-p="3"] > span { color: var(--p3); }
.mprio [data-p="4"] b, .mrow-st[data-p="4"], .mtile[data-p="4"] > span { color: var(--p4t); }
.mprio [data-p="6"] b, .mrow-st[data-p="6"], .mtile[data-p="6"] > span { color: var(--p6t); }
.mtile[data-p="5"] > span { color: var(--p5); }
.mseg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--line); border-radius: 12px; margin-bottom: 12px; }
.root .mseg button { min-height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.root .mseg button.on { background: var(--card); color: var(--text); }
.mlist { display: flex; flex-direction: column; gap: 10px; }
.mrow { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.root .mrow-head { display: flex; flex-direction: column; gap: 10px; width: 100%; border: 0; background: none; padding: 0; text-align: left; }
.mrow-top { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.mrow-top .avatar { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
.mrow-top .avatar.fav img { width: 22px; height: 22px; }
.mrow-top .cust-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow-top > .i-sm { color: var(--muted); }
.mrow-st { font-size: 12px; font-weight: 600; color: var(--muted); }
.mkpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.mkpis.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* genau vier KPIs: 2 × 2 statt 3 + 1 */
.mkpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.mkpi-n, .mtile-n { max-width: 100%; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkpi-n { font-size: 11px; }
.mkpi-v { font-size: 17px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkpi .kpi-d, .mtile .kpi-d { min-width: 0; font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.mkpi .kpi-d.k-red, .mtile .kpi-d.k-red { background: var(--p1bg); }
.mkpi .kpi-d.k-yellow, .mtile .kpi-d.k-yellow { background: var(--p3bg); }
.mkpi .kpi-d.k-green, .mtile .kpi-d.k-green { background: var(--p5bg); }
.mkpi .kpi-d.k-none, .mtile .kpi-d.k-none { padding: 1px 0; }
/* Kundenseite */
.mstrip { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px 10px; padding: 2px 16px 6px; scrollbar-width: none; position: relative; }
.mstrip::-webkit-scrollbar { display: none; }
.root .mstrip-b { flex: none; width: 62px; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 600; }
.mstrip-b .avatar { width: 54px; height: 54px; border-radius: 18px; border: 2.5px solid var(--line); background: var(--card); color: var(--text); font-size: 15px; }
.mstrip-b[data-p="1"] .avatar { border-color: var(--p1); }
.mstrip-b[data-p="2"] .avatar { border-color: var(--p2); }
.mstrip-b[data-p="3"] .avatar { border-color: var(--p3); }
.mstrip-b[data-p="4"] .avatar { border-color: var(--p4); }
.mstrip-b > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.root .mstrip-b.on { color: var(--text); font-weight: 800; }
.mstrip-b.on .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.mcust { display: flex; flex-direction: column; gap: 14px; border-radius: 22px; margin-bottom: 10px; }
.mcust-head { display: flex; align-items: center; gap: 10px; }
.mcust-pos { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.mtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mtiles.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mtile { background: var(--hi); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.mtile[data-p="1"] { background: var(--p1bg); } .mtile[data-p="2"] { background: var(--p2bg); } .mtile[data-p="3"] { background: var(--p3bg); }
.mtile[data-p="4"] { background: var(--p4bg); } .mtile[data-p="5"] { background: var(--p5bg); } .mtile[data-p="6"] { background: var(--p6bg); }
.mtile-n { font-size: 12px; }
.mtile-v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtile-d { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
.mtile-d small { font-size: 11px; color: var(--muted); }
.mcust-acts { display: flex; gap: 8px; }
.root .mcust-acts > * { flex: 1; justify-content: center; min-height: 44px; font: inherit; font-weight: 700; }
.mswipe { text-align: center; font-size: 12px; color: var(--muted); margin: 0 0 14px; }
@media (max-width: 640px) {
  .side { display: none; }
  .more-open body { overflow: hidden; }
  .more-open .side { display: flex; position: fixed; inset: 0 0 calc(62px + env(safe-area-inset-bottom)) 0; z-index: 40; flex-direction: column; align-items: stretch; gap: 2px; height: auto; max-width: none; padding: 16px 14px; overflow-y: auto; border: 0; }
  .more-open .side .brand { display: flex; padding: 2px 10px 14px; }
  .more-open .side .lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .more-open .side .nav-item { width: 100%; padding: 10px 12px; gap: 11px; min-height: 46px; }
  .more-open .side .nav-item.on { box-shadow: inset 3px 0 0 var(--brand); }
  .more-open .side .nav-label, .more-open .side .user { display: flex; }
  .more-open .side .spacer { display: block; }
  .more-open .side .sidebar-user { position: static; padding-top: 8px; border-top: 1px solid var(--line); }
  .more-open .side .logout { padding: 10px 12px; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .root .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; min-width: 0; border: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 700; padding: 6px 2px; }
  .root .tab.on { color: var(--brand); }
  .tab .i { width: 22px; height: 22px; }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab-dot { position: absolute; top: 9px; left: calc(50% + 6px); width: 10px; height: 10px; border-radius: 50%; background: var(--p1); border: 2px solid var(--card); }
  .col { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .main { padding-bottom: 40px; }
  .toast { bottom: calc(74px + env(safe-area-inset-bottom)); }
  html[data-view="overview"]:not(.has-q) .top, html[data-view="customer"]:not(.has-q) .top { display: none; }
  html[data-view="overview"] .main, html[data-view="customer"] .main { padding-top: 18px; }
  /* News über der Navigation (mobNewsHtml): rund ein Fünftel der Höhe, Überschriften scrollen in sich */
  .mnews { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 30; height: 20vh; height: 20dvh; min-height: 124px; display: flex; flex-direction: column; background: var(--card); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, .08); }
  .mnews-h { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px 2px 16px; font-size: 13px; }
  .mnews-h > .i-sm { color: var(--brand); }
  .mnews-h .hn-d { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .root .mnews-h .x { flex: none; width: 40px; height: 40px; border: 0; background: none; color: var(--muted); border-radius: 10px; display: inline-grid; place-items: center; }
  .mnews .hn-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 10px; gap: 8px; }
  .mnews .hn-list li { flex: none; }   /* nicht stauchen – die Liste scrollt */
  .has-mnews[data-view="overview"] .main { padding-bottom: calc(max(20vh, 124px) + 28px); }
  /* Kundenliste: Name in eigener Zeile über den sechs Zahlen (sonst bleiben ihm nur rund 70 px) */
  .lgrid.v8, .lgrid.v8.has-tasks { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0 12px; }
  .lgrid.v8 > :first-child { grid-column: 1 / -1; }
  .lgrid.lrow.v8 { padding-top: 10px; padding-bottom: 8px; row-gap: 4px; }
  .lrow .lname { font-size: 15px; }
}

/* Kundenliste: eigene Ansicht pflegen (Regel 28, 15.11.2026) – Knöpfe am Zeilenende in einer Hülle: Zahnrad, Papierkorb („aus meiner
   Ansicht entfernen“) bzw. auf der Seite „Kunde hinzufügen“ der Knopf „Hinzufügen“ / der Hinweis „In deiner Ansicht“ */
.cust-pg { margin-bottom: 16px; }
.cust-pg .muted { margin: 4px 0 0; }
.frow-acts { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.frow-acts .frow-cfg { position: static; transform: none; }
.root .frow-del:hover { color: var(--p1); border-color: var(--p1); }
.lgrid.lhead.has-del, .lrow-wrap.has-del .lgrid.lrow { padding-right: 58px; }
.lgrid.lhead.has-cfg.has-del, .lrow-wrap.has-cfg.has-del .lgrid.lrow { padding-right: 98px; }
.lgrid.lhead.has-add, .lrow-wrap.has-add .lgrid.lrow { padding-right: 172px; }
/* Seite „Kunde hinzufügen“: ohne Spalte „Wichtigster Check“ – so bleibt Platz für den Knopf, ohne dass die Liste quer scrollt */
.lgrid.v8.has-add > :last-child, .lrow-wrap.has-add .lgrid.v8 > :last-child { display: none; }
.lgrid.v8.has-add, .lrow-wrap.has-add .lgrid.v8 { grid-template-columns: minmax(200px,2fr) 120px 72px 72px 72px 72px 72px 80px; min-width: 0; }
.lgrid.v8.has-tasks.has-add, .lrow-wrap.has-add .lgrid.v8.has-tasks { grid-template-columns: minmax(180px,2fr) 110px 64px 64px 64px 64px 64px 80px 72px; }
#dashAddForm select { width: 100%; }
.frow-in { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--p5); white-space: nowrap; }
/* KPI-Einstellungen: „KPIs kopieren“ unter dem Hinweis der leeren Liste (Auswahl, Knopf, Erklärung) */
.kpi-copy { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px 12px; margin: 14px auto 6px; max-width: 640px; }
.kpi-copy label { flex: 1 1 280px; max-width: 380px; display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 13px; font-weight: 700; color: var(--muted); }
.kpi-copy select { width: 100%; }
.kpi-copy .hint { flex-basis: 100%; text-align: center; }
#kpiCopyForm select { width: 100%; }
.kpi-top > .btn-row { flex: none; min-width: 0; }   /* Knöpfe rechts (KPIs kopieren, KPI anlegen), nicht als zweite Spalte */