@font-face{font-family:'Manrope';src:url('fonts/manrope.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
/* ============ SHENO DASHBOARD — Styles (Prefix sd__) ============ */
.sd{
  --o:#ff7a1a;      --o-soft:#fff0e4; --o-ink:#c05e10;
  --navy:#1b2a4a;   --ink:#1b2a4a;    --mut:#5a6683;   --faint:#8b93a7;
  --ln:#e7e9ee;     --soft:#f5f6f8;   --sidebar:#f4f5f7;
  --neu:#2f6fed;    --neu-soft:#e7eefc;
  --amber:#d9920c;  --amber-soft:#fbeecd;
  --violet:#6d5ce7; --violet-soft:#ece9fb;
  --gruen:#1f9d57;  --gruen-soft:#e3f5ea;
  --rot:#d64545;    --rot-soft:#fbe4e4;
  --grau:#8b93a7;   --grau-soft:#eceef2;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  font-family:'Manrope','Segoe UI',system-ui,Arial,sans-serif;color:var(--ink);
  min-height:100vh;-webkit-font-smoothing:antialiased}
.sd *{box-sizing:border-box}
.sd__hidden{display:none!important}
.sd button{font-family:inherit;cursor:pointer}
.sd input,.sd select{font-family:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--ln);border-radius:var(--r-sm);padding:10px 12px;background:#fff;width:100%}
.sd input:focus,.sd select:focus{outline:2px solid rgba(255,122,26,.35);border-color:var(--o)}

/* ---------- Login ---------- */
.sd__login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#16233c,#1b2a4a 55%,#24365c);padding:20px}
.sd__logincard{background:#fff;border-radius:18px;padding:34px 30px 26px;width:100%;
  max-width:390px;box-shadow:0 18px 50px rgba(6,14,30,.45)}
.sd__loginlogo{font-size:34px;font-weight:800;letter-spacing:-.5px}
.sd__loginlogo span,.sd__brand span{color:var(--o)}
.sd__loginsub{margin:2px 0 20px;color:var(--mut);font-size:14px}
.sd__loginerr{color:var(--rot);font-size:13.5px;min-height:18px;margin:4px 0 8px}
.sd__loginfoot{margin:16px 0 0;font-size:12.5px;color:var(--mut);text-align:center}

/* ---------- Felder / Buttons ---------- */
.sd__field{display:block;margin:0 0 14px}
.sd__field span{display:block;font-size:13px;font-weight:700;color:var(--mut);margin:0 0 6px}
.sd__btn{border:1px solid var(--ln);background:#fff;border-radius:11px;
  padding:11px 18px;font-size:15px;font-weight:700;color:var(--ink)}
.sd__btn--main{background:var(--o);border-color:var(--o);color:#fff;width:100%}
.sd__btn--main:hover{filter:brightness(1.05)}

/* ---------- App-Shell (Sidebar + Main) ---------- */
.sd__app{display:grid;grid-template-columns:250px 1fr;min-height:100vh;background:#f6f7f8}
.sd__side{background:#fff;border-right:1px solid var(--ln);
  display:flex;flex-direction:column;gap:20px;padding:20px 14px;position:sticky;top:0;height:100vh}
.sd__brand{font-size:24px;font-weight:800;letter-spacing:-.5px;padding:4px 10px}
.sd__brand img{height:24px;width:auto;display:block}
.sd__nav{display:flex;flex-direction:column;gap:3px}
.sd__nav button{display:flex;align-items:center;gap:11px;border:0;background:transparent;
  border-radius:999px;padding:10px 14px;font-size:14.5px;font-weight:600;color:var(--mut);
  text-align:left;width:100%;transition:.13s}
.sd__nav button svg{width:18px;height:18px;flex:none}
.sd__nav button:hover{background:rgba(27,42,74,.06);color:var(--ink)}
.sd__nav button.is-on{background:#f1f2f3;color:var(--ink);font-weight:700}
.sd__navbadge{margin-left:auto;background:var(--o);color:#fff;font-size:11px;font-weight:800;
  border-radius:999px;padding:1px 8px}
.sd__sidefoot{margin-top:auto;background:transparent;border:0;
  padding:12px 10px;font-size:12px;color:var(--faint);line-height:1.5}
/* Benutzer + Abmelden: sitzt unten in der Seitenleiste (die alte Topbar ist entfallen) */
.sd__user{display:flex;align-items:center;gap:10px;padding:12px 10px 2px;border-top:1px solid var(--ln)}
.sd__avatar{flex:none;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--o),#ffab5e);color:#fff;font-weight:800;font-size:13px}
.sd__firma{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd__logout{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;
  background:none;border:0;border-radius:8px;color:var(--faint);cursor:pointer;transition:.13s}
.sd__logout svg{width:16px;height:16px;fill:none}
.sd__logout:hover{background:var(--soft);color:var(--ink)}

.sd__main{min-width:0;display:flex;flex-direction:column}

/* ---------- Panels ---------- */
.sd__panel{padding:26px 32px;max-width:1280px;width:100%;margin-inline:auto}
/* Kalender-Reiter (Plantafel, Etappe 5): vollflaechig — die Tafel bringt eigene
   Polster mit und regelt ihre Hoehe selbst (height:100vh + interner Scroll) */
.sd__panel--tafel{padding:0;max-width:none}

/* ===== Preise-Reiter (früher „Online-Rechner"; CSS-Präfix bleibt sdr-) — Redesign, Airbnb/Stripe-inspiriert ===== */
.sdr-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
@media(max-width:980px){.sdr-grid{grid-template-columns:1fr}}
/* Große Leistungs-Tabs (Hauptnavigation) */
/* Leistungs-Tabs: Segment-Leiste — grauer Track, aktiver Tab als weiße Pille */
.sdr-tabs2{display:flex;gap:4px;background:var(--soft);border:1px solid var(--ln);border-radius:14px;padding:5px;margin-bottom:22px}
.sdr-tabs2--left .sdr-tab2{font-size:15px}
/* Tabs integriert in weiße linke Karte */
/* Leistungs-Tabs: eigene weiße Karte, schlicht (kein grauer Track); aktiver Tab = grauer Hintergrund; gleiche Höhe wie die Service-Karte rechts */
.sdr-tabcard{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:6px 8px;margin-bottom:12px;height:86px;display:flex;align-items:center}
.sdr-tabcard .sdr-tabs2{margin:0;width:100%;background:none;border:0;padding:0;gap:2px}
.sdr-tabcard .sdr-tab2{border-radius:12px;padding:18px 5px;gap:9px;font-size:16px;font-weight:800}
.sdr-tabcard .sdr-tab2 svg{width:21px;height:21px}
.sdr-tabcard .sdr-tab2.is-on{background:var(--soft);box-shadow:none;color:var(--ink)}
.sdr-tabcard .sdr-tab2:hover{background:rgba(27,42,74,.05);color:var(--ink)}
.sdr-tabcard .sdr-tab2.is-on:hover{background:var(--soft)}
.sdr-leftcard{background:#fff;border:1px solid var(--ln);border-radius:20px;padding:20px 16px 8px;margin-bottom:12px}
.sdr-leftcard .sdr-acc{border:0;border-radius:0;background:none;margin:0;overflow:visible}
.sdr-leftcard .sdr-acchd{display:none}
.sdr-leftcard .sdr-accin{margin-top:0;border-top:0}
.sdr-leftcard .sdr-accpad{padding:0 4px 12px}
.sdr-tab2{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:9px;background:none;border:0;border-radius:10px;padding:11px 10px;font-size:15px;font-weight:700;color:var(--mut);cursor:pointer;font-family:inherit;transition:background .15s,color .15s,box-shadow .15s}
.sdr-tab2 svg{width:19px;height:19px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#aeb4c0;transition:color .15s}
.sdr-tab2:hover{color:var(--ink);background:rgba(255,255,255,.65)}
.sdr-tab2.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(27,42,74,.10),0 0 0 1px rgba(27,42,74,.05)}
.sdr-tab2.is-on svg{color:var(--o)}
@media(max-width:560px){.sdr-tab2{flex-direction:column;gap:6px;font-size:13px;padding:12px 8px 14px}.sdr-tab2.is-on::after{left:16px;right:16px;bottom:6px}}
/* Kompakte Beispielrechnung-Section (linke Spalte) */
.sdx{margin-bottom:22px}
.sdx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sdx-head h2{margin:0;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.sdx-head p{margin:3px 0 0;font-size:13px;color:var(--mut)}
.sdx-svc{display:flex;gap:6px;background:var(--soft);border:1px solid var(--ln);border-radius:11px;padding:5px}
.sdx-svcbtn{border:0;background:none;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:700;color:var(--mut);cursor:pointer;font-family:inherit;white-space:nowrap}
.sdx-svcbtn:hover{color:var(--ink)}
.sdx-svcbtn.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(27,42,74,.12)}
.sdx-pane{display:none;flex-wrap:wrap;gap:16px 24px;align-items:flex-start}
.sdx-pane.is-on{display:flex}
.sdx-f{display:flex;flex-direction:column;gap:7px}
.sdx-f>span{font-size:12px;font-weight:700;color:var(--mut)}
.sdx-f .ctrl{display:flex;align-items:center;gap:8px}
.sdx-f .km-eur{font-size:11px;color:var(--faint);font-weight:600}
.sdr-card{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:24px 26px}
/* Section-Überschrift ÜBER der weißen Box: Icon · Titel · Info-Blase (Erklärtext im Tooltip) */
.sdr-sechd{display:flex;align-items:center;gap:9px;margin:28px 0 12px}
.sdr-sechd h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--mut)}
.sdr-sechico{flex:none;display:grid;place-items:center;width:22px;height:22px;color:var(--mut)}
.sdr-sechico svg{width:22px;height:22px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sdr-info{position:relative;flex:none;display:grid;place-items:center;width:18px;height:18px;margin:0;padding:0;border:0;background:none;color:#bcc2cc;cursor:help}
.sdr-info svg{width:16px;height:16px;fill:none;stroke-width:1.9;stroke-linecap:round}
.sdr-info:hover,.sdr-info:focus-visible{color:var(--mut);outline:none}
.sdr-info::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);width:max-content;max-width:240px;padding:8px 11px;border-radius:9px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;line-height:1.45;text-align:left;white-space:normal;opacity:0;visibility:hidden;transition:opacity .13s;pointer-events:none;z-index:6}
.sdr-info:hover::after,.sdr-info:focus-visible::after{opacity:1;visibility:visible}
.sdr-gcard{margin-top:0}
.sdr-extiers{display:flex;flex-direction:column;gap:12px}
.sdr-exrow{display:flex;align-items:center;gap:10px}
.sdr-exrow>span{font-size:13.5px;font-weight:600;color:var(--ink)}
.sdr-exrow>b{color:var(--faint);font-weight:400;font-size:15px}
.sdr-sech2{margin-top:24px}
/* ---- Preis-Karte je Leistung (nur aktive sichtbar, via Umschalter oben) ---- */
.sdr-acc{display:none;background:#fff;border:1px solid var(--ln);border-radius:20px;margin-bottom:12px;overflow:hidden}
.sdr-acc.is-on{display:block}
.sdr-acchd{width:100%;display:flex;align-items:center;gap:15px;background:none;border:0;padding:14px 18px;cursor:default;font-family:inherit;text-align:left}
.sdr-accico{flex:none;display:grid;place-items:center;color:#12151b}
.sdr-accico svg{width:30px;height:30px;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sdr-acctxt{flex:1;min-width:0}
.sdr-acctxt b{display:block;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.sdr-acctxt em{display:block;font-size:12.5px;font-style:normal;color:var(--mut);margin-top:2px}
.sdr-acctoggle{display:none}
.sdr-accbody{display:block}
.sdr-accin{overflow:hidden;border-top:1px solid var(--ln)}
.sdr-accpad{padding:22px 20px 24px}
/* Leistung an/aus — eigene weiße Karte oben in der rechten Spalte, über der Beispielrechnung */
.sdr-svccard{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:13px 15px;margin-bottom:12px;height:86px;display:flex;flex-direction:column;justify-content:center;position:relative}
.sdr-svcrow{display:none;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.sdr-svcrow.is-on{display:flex}
.sdr-svcrow b{font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sdr-svchint{position:absolute;left:15px;right:15px;bottom:10px;margin:0;font-size:12px;color:var(--mut);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* aus = alles darunter ausgegraut (die Bedienung sperrt zusätzlich das JS per disabled) */
.sdr-acc.is-off .sdr-sec,.sdr-acc.is-off .sdr-disc{opacity:.4;pointer-events:none;transition:opacity .15s}
/* Tab einer ausgeschalteten Leistung */
.sdr-tab2.is-off{color:#c3c9d4}
.sdr-tab2.is-off.is-on{color:var(--mut)}
.sdr-tab2.is-off.is-on::after{background:#d7dbe2}
.sdr-tabchip{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);background:var(--soft);border:1px solid var(--ln);border-radius:5px;padding:1px 5px}
/* Hinweis in der Live-Section */
.sdr-liveoff{display:none;margin-bottom:12px;padding:9px 11px;border:1px solid var(--ln);border-radius:9px;background:var(--soft);font-size:12px;font-weight:700;color:var(--mut);line-height:1.4}
.sdr-live.is-off .sdr-liveoff{display:block}
.sdr-live.is-off .sdr-liveprice,.sdr-live.is-off .sdr-otwrap,.sdr-live.is-off .sdr-livesub{opacity:.4;pointer-events:none}
.sdr-sec{margin-bottom:26px}
.sdr-sec:last-child{margin-bottom:0}
.sdr-sech{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
/* Konfig-Feld links: Label ÜBER dem Feld, Feld darunter über volle Spaltenbreite */
.sdr-frow{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin-bottom:0}
.sdr-frow>label{flex:none;min-width:0;font-size:12.5px;font-weight:700;color:var(--mut);margin:0}
.sdr-frow.hot>label{color:var(--ink)}
.sdr-frow .sdr-inp{width:158px;justify-content:space-between;padding:10px 13px;border-radius:10px}
.sdr-frow .sdr-inp input{flex:1;min-width:0;width:auto;text-align:left}
.sdr-inp{flex:none;width:118px;display:flex;align-items:center;justify-content:flex-end;gap:5px;border:1px solid transparent;border-radius:9px;padding:8px 12px;background:#f3f4f6;transition:border-color .12s,background .12s,box-shadow .12s}
.sdr-inp:hover{background:#eceef1}
.sdr-inp:focus-within{border-color:var(--o);background:#fff}
.sdr-inp input{width:52px;border:0;padding:0;margin:0;background:none;text-align:right;font-size:15px;font-weight:600;color:var(--ink);font-family:inherit}
.sdr-inp input:focus{outline:none}
.sdr-inp .sdr-u{font-size:12px;font-weight:600;color:var(--faint);pointer-events:none;white-space:nowrap}
.sdr-g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Zusammengehörige Felder unter EINEM Label (z. B. Etage ohne/mit Aufzug) */
.sdr-fgroup{grid-column:1/-1;display:flex;flex-direction:column;gap:7px}
.sdr-fgroup>label{font-size:12.5px;font-weight:700;color:var(--mut)}
.sdr-fpair{display:flex;flex-wrap:wrap;gap:12px 16px}
/* Unterfeld: kein grauer Kasten — nur eine kleine Bildunterschrift über dem weißen Feld */
.sdr-fsub{display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:0}
.sdr-fsub>span{font-size:11.5px;font-weight:700;color:var(--faint)}
.sdr-fsub .sdr-inp{width:150px;padding:10px 13px;border-radius:10px}
.sdr-fsub .sdr-inp input{flex:1;min-width:0;width:auto;text-align:left}
/* Aufleuchten in beide Richtungen — je Feld genau EIN Rahmen, klare Linie + zarte Fläche, kein Glow */
.is-linked>label,.sdr-modrow.is-linked b{color:var(--o-ink)}
.sdr-frow.is-linked>.sdr-inp,.sdr-modrow.is-linked .sdr-inp,.sdr-fgroup.is-linked .sdr-fsub .sdr-inp,
.sdr-mf.is-linked .sdr-mctrl{border-color:var(--o);background:var(--o-soft)}
.sdr-fgroup.is-linked .sdr-fsub>span{color:var(--o-ink)}
/* Gegenstücke in der Live-Section */
.sdr-mf.is-linked .sdr-mname,.sdr-opt.is-linked .sdr-optlab{color:var(--o-ink)}
.sdr-mf.is-linked .sdr-mctrl input,.sdr-mf.is-linked .sdr-mctrl select{background:none}
.sdr-opt.is-linked .sdr-optbox{border-color:var(--o)}
.sdr-othint.is-linked{color:var(--o-ink)}
.sdr-frow,.sdr-fgroup,.sdr-modrow,.sdr-fsub{transition:border-color .13s,background .13s,box-shadow .13s}
.sdr-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:560px){.sdr-g2,.sdr-g3{grid-template-columns:1fr}}
.sdr-disc{margin-top:22px}
/* Klapp-Feld: kein grauer Kasten — nur Text + Pfeil, der Pfeil zeigt schon, dass es aufgeht */
.sdr-discbtn{width:100%;background:none;border:0;display:flex;align-items:center;justify-content:flex-start;gap:7px;font-size:14px;font-weight:700;color:var(--mut);padding:4px 0;border-radius:0;cursor:pointer;font-family:inherit;transition:color .15s}
.sdr-discbtn:hover{background:none;color:var(--ink)}
.sdr-discbtn svg{width:16px;height:16px;transition:transform .2s;color:currentColor}
.sdr-disc.open .sdr-discbtn{background:#eef0f3;border-color:#dfe2e8}
.sdr-disc.open .sdr-discbtn svg{transform:rotate(180deg)}
.sdr-discbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.sdr-disc.open .sdr-discbody{grid-template-rows:1fr}
.sdr-discin{overflow:hidden}
.sdr-discin .sdr-pad{padding-top:20px}
/* Nur die Beispielrechnung klebt; Schalter-Karte + Live-Hinweis scrollen weg.
   align-self:stretch ist nötig: das Raster steht auf align-items:start, sonst ist die
   rechte Spalte nur so hoch wie ihr Inhalt und die Karte hat keinen Klebe-Spielraum. */
.sdr-pvwrap{position:static;align-self:stretch}
.sdr-live{position:sticky;top:24px}
@media(max-width:980px){.sdr-pvwrap{align-self:start}.sdr-live{position:static}}
.sdr-pv{display:none;background:#fff;border:1px solid var(--ln);border-radius:18px;padding:18px 18px 20px;box-shadow:0 12px 34px -18px rgba(27,42,74,.2)}
.sdr-pv.is-on{display:flex;flex-direction:column}
.sdr-pv .sdr-pvlogo{order:0;margin-bottom:14px}
.sdr-pv .sdr-pvtop{order:1;margin-bottom:12px}
.sdr-pv .sdr-total{order:2;margin-top:0;margin-bottom:16px}
.sdr-pv .sdr-map{order:3;margin:0}
.sdr-pvtop{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.sdr-pvlogo{width:100%;height:54px;border-radius:12px;display:grid;place-items:center;background:#f2f3f5;border:1px dashed #d7dae1;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--faint)}
.sdr-pvtop b{display:block;font-size:14px;color:var(--ink)}
.sdr-pvtop span{font-size:12px;color:var(--mut)}
.sdr-map{position:relative;border-radius:13px;overflow:hidden;margin-bottom:16px;border:1px solid var(--ln)}
.sdr-map svg{display:block;width:100%;height:240px}
.sdr-map .mk{position:absolute;font-size:10px;font-weight:700;color:var(--ink);background:#fff;border-radius:6px;padding:2px 7px;box-shadow:0 1px 4px rgba(0,0,0,.14);white-space:nowrap}
.sdr-map .mka{left:9px;bottom:12px}
.sdr-map .mkb{right:9px;top:12px}
.sdr-map .km{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ink);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:3px 11px;box-shadow:0 2px 8px rgba(27,42,74,.3)}
.sdr-pv .sdr-route{order:4;margin:10px 0 0}
.sdr-route{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 12px;background:var(--soft);border:1px solid var(--ln);border-radius:11px;font-size:12px;font-weight:700}
.sdr-route .rt{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.sdr-route .rt svg{width:15px;height:15px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}
.sdr-route .rt-from svg{color:var(--o)}
.sdr-route .rt-to .rt-obj-ico{display:inline-flex}
.sdr-route .rt-to svg{color:var(--ink)}
.sdr-route .rt-obj{font-style:normal}
.sdr-route .rt-arrow{color:var(--faint);font-weight:800}
.sdr-route .rt-km{margin-left:auto;background:var(--ink);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap}
.sdr-brk{border-top:1px solid var(--ln);margin-top:2px}
.sdr-brk .r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;font-size:14px;min-height:46px}
.sdr-brk .r span{color:var(--mut);flex:none}
.sdr-brk .r b{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;font-weight:600;color:var(--ink)}
.sdr-brk .r b i{font-style:normal;font-size:12.5px;color:var(--faint)}
.sd input.sdr-pin{width:76px;text-align:right;font-size:14px;font-weight:600;color:var(--ink);border:1px solid #e6e7ea;border-radius:9px;padding:8px 10px;background:#fff}
.sd input.sdr-pin:focus{outline:none;border-color:var(--o)}
.sd select.sdr-psel{width:auto;min-width:0;max-width:170px;font-size:13px;font-weight:600;color:var(--ink);border:1px solid #e6e7ea;border-radius:9px;padding:8px 10px;background:#fff;cursor:pointer}
.sd select.sdr-psel:focus{outline:none;border-color:var(--o)}
.sdr-brk .r b .sub{flex-basis:100%;font-size:11.5px;color:var(--faint);font-weight:500;text-align:right}
/* Aufzug-Switch */
.sdr-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.sdr-switch input{position:absolute;opacity:0;width:0;height:0}
.sdr-track{position:relative;width:40px;height:23px;border-radius:999px;background:#d7dbe2;transition:background .18s;flex:none}
.sdr-track::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.sdr-switch input:checked + .sdr-track{background:var(--o)}
.sdr-switch input:checked + .sdr-track::after{transform:translateX(17px)}

/* ===== Live-Handy-Vorschau ===== */
/* Live-Hinweis zwischen Schalter-Karte und Beispielrechnung —
   padding = 16px Karten-Innenabstand + 1px Rahmen, damit er mit den Kartentiteln fluchtet */
.sdr-livecap{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--mut);margin:0 0 12px}
.sdr-livedot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.16)}
.sdr-phone{position:relative;width:100%;max-width:360px;margin:0 auto;background:#0d1320;border-radius:46px;padding:12px;box-shadow:0 34px 70px -26px rgba(13,19,32,.6)}
.sdr-phone::after{content:"";position:absolute;top:25px;left:50%;transform:translateX(-50%);width:46px;height:5px;background:#2a3242;border-radius:99px;z-index:5}
.sdr-phonescreen{position:relative;background:#f5f6f8;border-radius:34px;overflow:hidden;height:76vh;min-height:540px;display:flex;flex-direction:column}
.sdr-statusbar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 22px 6px;font-size:12px;font-weight:800;color:var(--ink)}
.sdr-sbdots{display:inline-flex;gap:3px}
.sdr-sbdots i{width:4px;height:4px;border-radius:50%;background:var(--ink);opacity:.55}
.sdr-phonescroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px 22px}
.sdr-phonescroll::-webkit-scrollbar{width:0}
.sdr-toollogo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:74px;margin:6px 0 14px;background:#fff;border:1.5px dashed #cfd4dd;border-radius:16px;color:var(--faint);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s}
.sdr-toollogo svg{width:20px;height:20px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sdr-toollogo:hover{border-color:var(--o);color:var(--o-ink)}
.sdr-toolhead{display:flex;align-items:center;gap:12px;background:var(--navy);color:#fff;border-radius:16px;padding:14px 16px;margin-bottom:14px}
.sdr-toolheadico{display:inline-flex;width:34px;height:34px;flex:none;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border-radius:10px}
.sdr-toolheadico svg{width:20px;height:20px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#fff}
.sdr-toolheadtxt b{display:block;font-size:16px;font-weight:800;line-height:1.15}
.sdr-toolheadtxt em{font-style:normal;font-size:12px;opacity:.72}
.sdr-toolcard{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:15px 15px 16px;margin-bottom:14px}
.sdr-toolcardh{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:12px}
.sdr-fpane{display:none;flex-direction:column;gap:12px}
.sdr-fpane.is-on{display:flex}
.sdr-mf{display:flex;flex-direction:column;gap:6px}
.sdr-mf>span{font-size:12.5px;font-weight:700;color:var(--mut)}
.sdr-mf-row{flex-direction:row;align-items:center;justify-content:space-between}
.sdr-mctrl{position:relative;display:flex;align-items:center}
.sdr-mctrl input,.sdr-mctrl select{width:100%;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:#fff;border:1px solid #e2e4ea;border-radius:11px;padding:12px 13px}
.sdr-mctrl input{padding-right:44px}
.sdr-mctrl i{position:absolute;right:13px;font-style:normal;font-size:13px;font-weight:700;color:var(--faint);pointer-events:none}
.sdr-mctrl input:focus,.sdr-mctrl select:focus{outline:none;border-color:var(--o)}
.sdr-mf .km-eur{font-size:11px;color:var(--faint);font-weight:600;margin-top:2px}
.sdr-opts{display:flex;flex-direction:column}
.sdr-opt{display:flex;align-items:center;gap:10px;padding:7px 2px;cursor:pointer;border-bottom:1px solid #f4f5f7}
.sdr-opt:last-child{border-bottom:0}
.sdr-opt input{position:absolute;opacity:0;width:0;height:0}
.sdr-optbox{flex:none;width:19px;height:19px;border-radius:6px;border:1.6px solid #cfd4dd;background:#fff;position:relative;transition:.15s}
.sdr-opt input:checked+.sdr-optbox{background:var(--o);border-color:var(--o)}
.sdr-opt input:checked+.sdr-optbox::after{content:"";position:absolute;left:5.5px;top:2px;width:4px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.sdr-optlab{font-size:13px;font-weight:600;color:var(--ink)}
.sdr-optlab em{font-style:normal;font-size:10px;font-weight:800;color:var(--o-ink);background:var(--o-soft);border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:middle}
/* Wunschtermin klappt zu — spart die größte Höhe in der rechten Spalte */
.sdr-calbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;border:0;background:none;cursor:pointer;font-family:inherit}
.sdr-calbtn .sdr-livesubh{margin:0}
.sdr-calpick{display:inline-flex;align-items:center;gap:6px;color:var(--mut)}
.sdr-calpick b{font-size:13px;font-weight:700;color:var(--ink)}
.sdr-calpick svg{width:16px;height:16px;transition:transform .2s}
.sdr-calwrap.open .sdr-calpick svg{transform:rotate(180deg)}
.sdr-cal{display:none;margin-top:11px}
.sdr-calwrap.open .sdr-cal{display:block}
.sdr-calhd{text-align:center;font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:7px}
.sdr-calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.sdr-calwk span{text-align:center;font-size:9.5px;font-weight:800;color:var(--faint);padding-bottom:2px}
.sdr-caldays span{height:30px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ink);border-radius:7px;cursor:pointer}
.sdr-caldays span.busy{color:#c8cdd7;text-decoration:line-through;cursor:not-allowed}
.sdr-caldays span.free{background:#eafaf0;color:#159a52}
.sdr-caldays span.sel{background:var(--o);color:#fff}
.sdr-callegend{display:flex;justify-content:center;gap:12px;margin-top:8px;font-size:10.5px;font-weight:700;color:var(--mut)}
.sdr-callegend span{display:inline-flex;align-items:center;gap:5px}
.sdr-callegend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.sdr-callegend i.free{background:#eafaf0;border:1px solid #b7e9cb}
.sdr-callegend i.busy{background:#eceef1}
.sdr-callegend i.sel{background:var(--o)}
/* Preis oben: kein grauer Kasten mehr — weiß, linksbündig, nur eine Trennlinie darunter */
.sdr-liveprice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.sdr-liveprice .lab{font-size:12px;font-weight:700;color:var(--mut)}
.sdr-liveprice .val{font-size:32px;font-weight:800;color:var(--ink);letter-spacing:-.02em;transition:transform .17s;transform-origin:center center}
.sdr-liveprice .val.flash{transform:scale(1.06)}
.sdr-liveprice .rng{font-size:12px;font-weight:600;color:var(--faint)}
/* Express-Zuschlag / Frühbucher-Rabatt sichtbar machen */
.sdr-zu{display:none;margin-top:13px;font-size:11px;font-weight:700;color:var(--o-ink);background:rgba(255,122,26,.09);border-radius:999px;padding:5px 12px;line-height:1.3}
.sdr-zu.is-on{display:inline-block}
.sdr-zu.is-minus{color:#159a52;background:rgba(21,154,82,.10)}
.sdr-toolcta{width:100%;border:0;border-radius:14px;background:var(--o);color:#fff;font-family:inherit;font-size:15px;font-weight:800;padding:15px;cursor:pointer;box-shadow:0 8px 20px -8px rgba(255,122,26,.6)}
.sdr-toolcta:hover{filter:brightness(1.04)}
.sdr-toolfine{text-align:center;font-size:11px;color:var(--faint);font-weight:600;margin-top:9px}
.sdr-modcard{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:16px;margin-bottom:0}
/* Zusatz-Module: Name · Preis · An/Aus · Löschen — Raster für alle Zeilen gleich */
.sdr-modhd,.sdr-modrow{display:grid;grid-template-columns:minmax(0,1fr) 104px 44px 28px;align-items:center;gap:12px}
.sdr-modhd{padding:0 0 9px;border-bottom:1px solid var(--ln)}
.sdr-modhd span{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.sdr-modhd2{text-align:right}
.sdr-modhd3{grid-column:3/5}
.sdr-modrow{padding:8px 0;border-bottom:1px solid #f4f5f7}
.sdr-modlist .sdr-modrow:last-child{border-bottom:0}
.sdr-modname{min-width:0;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);background:none;border:1px solid transparent;border-radius:9px;padding:8px 10px}
.sdr-modname::placeholder{color:var(--faint);font-weight:600}
.sdr-modname:hover{border-color:var(--ln)}
.sdr-modname:focus{outline:none;background:#fff;border-color:var(--o)}
.sdr-modrow .sdr-inp{width:104px;padding:8px 11px;border-radius:9px}
.sdr-modrow .sdr-inp input{width:100%;text-align:right}
.sdr-moddel{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;color:#c3c9d4;cursor:pointer;transition:.13s}
.sdr-moddel svg{width:15px;height:15px;fill:none}
.sdr-moddel:hover{background:#fdecec;color:#d64545}
.sdr-modadd{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:12px;padding:11px;border:1px dashed #d4d8e0;border-radius:11px;background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--mut);cursor:pointer;transition:.13s}
.sdr-modadd svg{width:15px;height:15px;fill:none}
.sdr-modadd:hover{border-color:var(--o);color:var(--o-ink);background:var(--o-soft)}
/* Preis-Hinweis an den Optionen rechts */
.sdr-optprice{margin-left:auto;font-size:12px;font-weight:700;color:var(--faint);white-space:nowrap}
.sdr-optsleer{padding:4px 2px;font-size:12.5px;font-weight:600;color:var(--faint);line-height:1.45}

/* ===== Flache Live-Section (rechts) ===== */
.sdr-live{background:none;border:0;padding:0}
.sdr-pricecard,.sdr-inputcard{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:16px}
.sdr-pricecard{padding:22px 18px 20px}
.sdr-inputcard{margin-top:12px}
.sdr-inputcard>.sdr-otwrap:first-child{margin-top:0}
.sdr-livelogo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-bottom:14px;background:#fafbfc;border:1.5px dashed #cfd4dd;border-radius:12px;color:var(--faint);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s}
.sdr-livelogo svg{width:18px;height:18px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sdr-livelogo:hover{border-color:var(--o);color:var(--o-ink)}
.sdr-live .sdr-liveprice .val{font-size:40px;line-height:1.06}
.sdr-livesub{margin-top:11px;padding-top:11px;border-top:1px solid var(--ln)}
.sdr-livesubh{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.sdr-livetitle{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:12px}
.sdr-livehd{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.sdr-livehd>b{font-size:15px;font-weight:800;color:var(--ink)}
.sdr-livetag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--mut)}
.sdr-live .sdr-fpane{gap:0}
.sdr-live .sdr-toolcard{margin:0;padding:0;border:0}
/* Objekt-Typ-Karten */
.sdr-otwrap{margin-top:11px}
.sdr-othint{margin-top:7px;font-size:11.5px;font-weight:700;color:var(--faint)}
.sdr-otype{display:none;gap:7px}
.sdr-otype.is-on{display:flex}
/* Objektart: reine Text-Pillen, kein Icon */
.sdr-otbtn{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 8px;background:#fff;border:1.5px solid var(--ln);border-radius:10px;color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.sdr-otbtn:hover{border-color:#cfd4dd}
.sdr-otbtn.is-on{background:var(--o-soft);border-color:var(--o);color:var(--o-ink)}
/* Felder links bündig (gestapelt) in der rechten Section */
/* Live-Zeile: links „Fläche / 10 € pro m²", rechts das Feld — je Zeile ein feiner Trenner */
.sdr-live .sdr-mf{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;margin:0;border-bottom:1px solid #f1f2f5}
.sdr-live .sdr-fpane .sdr-mf:last-child{border-bottom:0;padding-bottom:0}
.sdr-live .sdr-mf-row{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
/* Zeile 1: nur der Name („Fläche") im Grau der linken Labels — Zeile 2 heller: „(10 €/m²) (750 €)" */
.sdr-mlab{display:flex;flex-direction:column;gap:2px;min-width:0}
.sdr-mlab b{font-size:13.5px;font-weight:600;color:var(--mut);letter-spacing:-.1px;line-height:1.35}
.sdr-mlab em{display:flex;flex-wrap:wrap;gap:5px;font-style:normal;font-size:12px;font-weight:600;color:var(--faint);line-height:1.3}
.sdr-mrate,.sdr-mamt{font-weight:600;color:var(--faint)}
.sdr-mrate:empty,.sdr-mamt:empty{display:none}
.sdr-live .sdr-mf.is-factor .sdr-mrate{color:var(--o)}
.sdr-live .sdr-mctrl{flex:none;width:118px;display:flex;align-items:center;justify-content:flex-end;gap:5px;border:1px solid #e6e7ea;border-radius:9px;padding:6px 10px;background:#fff;transition:border-color .12s,box-shadow .12s}
.sdr-live .sdr-mctrl:hover{border-color:#d4d6db}
.sdr-live .sdr-mctrl:focus-within{border-color:var(--o)}
/* Nur der Rahmen aussen zeigt den Fokus — das Feld darin bekommt KEINEN zweiten Ring */
.sdr-live .sdr-mctrl input:focus,.sdr-live .sdr-mctrl select:focus{box-shadow:none;border-color:transparent}
.sdr-live .sdr-mctrl input{width:100%;min-width:0;border:0;padding:0;background:none;text-align:right;font-size:14px;font-weight:600;color:var(--ink);font-family:inherit}
.sdr-live .sdr-mctrl input:focus{outline:none}
.sdr-live .sdr-mctrl select{width:100%;min-width:0;border:0;padding:0;background:none;text-align:right;font-size:14px;font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer}
.sdr-live .sdr-mctrl select:focus{outline:none}
.sdr-live .sdr-mctrl i{position:static;font-style:normal;font-size:12px;font-weight:600;color:var(--faint);white-space:nowrap}
/* Stepper: kleine Pfeile direkt am Wert, Einheit bleibt rechts daneben */
.sdr-step{flex:none;display:flex;flex-direction:column;gap:1px;margin-left:5px}
.sdr-step button{display:grid;place-items:center;width:15px;height:10px;padding:0;border:0;border-radius:3px;background:none;color:#b4bac6;cursor:pointer;transition:color .1s,background .1s}
.sdr-step svg{width:9px;height:9px;fill:none}
.sdr-step button:hover{color:var(--ink);background:#f1f2f5}
.sdr-step button:active{background:var(--o-soft);color:var(--o-ink)}
/* Nummernfeld: Wert rechtsbündig direkt vor den Pfeilen */
.sdr-live .sdr-mctrl input{text-align:right}
/* Speichern gilt für die ganze Seite → sitzt im Seitenkopf, nicht in der Vorschau-Karte */
.sdr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.sdr-headtxt{min-width:0}
@media(max-width:980px){.sdr-head{flex-direction:column;gap:14px}}
/* Speichern: standardmäßig nur orange umrandet; sobald etwas geändert wurde, voll orange (.is-dirty) */
.sdr-savebtn{flex:none;margin-top:4px;border:2px solid var(--o);border-radius:11px;background:transparent;color:var(--o);font-family:inherit;font-size:14px;font-weight:800;padding:11px 21px;cursor:pointer;transition:background .15s,color .15s,filter .15s}
.sdr-savebtn.is-dirty,.sdr-savebtn.is-saved{background:var(--o);color:#fff}
.sdr-savebtn.is-dirty:hover{filter:brightness(1.06)}
.sdr-swlab{font-size:12.5px;font-weight:600;color:var(--mut)}
.sdr-total{margin-top:18px}
.sdr-total .lab{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--faint)}
.sdr-total .val{font-size:34px;font-weight:800;letter-spacing:-.6px;margin-top:5px;color:var(--ink);transition:color .12s}
.sdr-total .val.flash{color:var(--o)}
.sdr-total .rng{font-size:13px;color:var(--mut);margin-top:5px}
.sdr-total .rng b{color:var(--ink);font-weight:600}

/* ---- Kalkulation (Betreiber-Rechner) ---- */
.sdk-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
@media(max-width:980px){.sdk-grid{grid-template-columns:1fr}}
.sdk-svc{display:flex;gap:6px;background:var(--soft);border:1px solid var(--ln);border-radius:12px;padding:5px;margin-bottom:22px}
.sdk-svcbtn{flex:1;border:0;background:none;border-radius:9px;padding:9px 8px;font-size:13.5px;font-weight:700;color:var(--mut);cursor:pointer;font-family:inherit;white-space:nowrap}
.sdk-svcbtn:hover{color:var(--ink)}
.sdk-svcbtn.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(27,42,74,.12)}
.sdk-pane .sd__grid2{gap:16px}
.sdk-pane .sd__field{margin-bottom:0}
.sdk-result{position:sticky;top:24px}
@media(max-width:980px){.sdk-result{position:static}}
.sdk-rlabel{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--faint)}
.sdk-rval{font-size:38px;font-weight:800;letter-spacing:-.6px;color:var(--ink);margin-top:6px;transition:color .12s}
.sdk-rval.flash{color:var(--o)}
.sdk-rnote{font-size:13px;color:var(--mut);margin-top:2px}
.sdk-rbrk{margin:18px 0 4px;border-top:1px solid var(--ln)}
.sdk-rbrk .r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--ln);font-size:13px}
.sdk-rbrk .r span{color:var(--mut)}
.sdk-rbrk .r b{font-weight:600;color:var(--ink)}
.sdk-rbrk .r.rnote span{color:var(--o-ink);font-weight:700}
.sdk-rbtn{width:100%;margin-top:18px;opacity:.55;cursor:not-allowed}
.sdk-rhint{font-size:11.5px;color:var(--faint);margin:10px 0 0;text-align:center;line-height:1.4}
.sd__panelhead h1{margin:0;font-size:26px;letter-spacing:-.02em}
.sd__panelhead p{margin:5px 0 22px;color:var(--mut);font-size:14.5px}
.sd__card{background:#fff;border:1px solid var(--ln);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(27,42,74,.04),0 8px 24px rgba(27,42,74,.05);margin:0 0 20px}
.sd__card--pad{padding:20px 22px}
.sd__card h2{margin:0 0 14px;font-size:17px}
.sd__cardsub{margin:-8px 0 14px;font-size:13.5px;color:var(--mut)}
.sd__cardhd{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.sd__cardhd h2{margin:0}
.sd__link{background:none;border:0;color:var(--o);font-size:13px;font-weight:700;padding:0}
.sd__link:hover{color:var(--o-ink)}
.sd__grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:640px){.sd__grid2{grid-template-columns:1fr}}
.sd__savebar{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.sd__savebar .sd__btn--main{width:auto}
#sd-savestatus{font-size:13.5px;color:var(--gruen);font-weight:700}

/* ---------- Übersicht: KPIs ---------- */
.sd__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 20px}
.sd__kpi{background:#fff;border:1px solid var(--ln);border-radius:var(--r-lg);padding:18px 20px;
  box-shadow:0 1px 2px rgba(27,42,74,.04),0 8px 24px rgba(27,42,74,.05)}
.sd__kpitop{margin:0 0 12px}
.sd__kpiico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.sd__kpiico svg{width:20px;height:20px}
.sd__kpiico--neu{background:var(--neu-soft);color:var(--neu)}
.sd__kpiico--angebot{background:var(--violet-soft);color:var(--violet)}
.sd__kpiico--o{background:var(--o-soft);color:var(--o-ink)}
.sd__kpiico--ok{background:var(--gruen-soft);color:var(--gruen)}
.sd__kpilabel{font-size:13px;color:var(--mut)}
.sd__kpival{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:4px;
  font-variant-numeric:tabular-nums}
@media(max-width:820px){.sd__kpis{grid-template-columns:repeat(2,1fr)}}

/* ---------- Übersicht: zwei Spalten ---------- */
.sd__two{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin:0 0 20px}
@media(max-width:820px){.sd__two{grid-template-columns:1fr}}
.sd__uliste{display:flex;flex-direction:column}
.sd__urow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--ln)}
.sd__urow:first-child{border-top:0}
.sd__utitle{font-size:14px;font-weight:600}
.sd__usub{font-size:12.5px;color:var(--mut);margin-top:1px}
.sd__urow>div:first-child{flex:1;min-width:0}

/* Status-Pills */
.sd__pill{font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap}
.sd__pill--neu{background:var(--neu-soft);color:var(--neu)}
.sd__pill--in_bearbeitung{background:var(--amber-soft);color:var(--amber)}
.sd__pill--angebot_gesendet{background:var(--violet-soft);color:var(--violet)}
.sd__pill--bestaetigt{background:var(--gruen-soft);color:var(--gruen)}
.sd__pill--abgeschlossen{background:var(--grau-soft);color:var(--grau)}
.sd__pill--abgelehnt{background:var(--rot-soft);color:var(--rot)}

/* Kapazitäts-Balken */
.sd__capbar{margin:0 0 14px}
.sd__capbartop{display:flex;justify-content:space-between;font-size:13.5px;margin:0 0 6px}
.sd__capbartop b{font-weight:700}
.sd__bar{height:8px;border-radius:999px;background:var(--soft);overflow:hidden}
.sd__bar>i{display:block;height:100%;border-radius:999px;background:var(--o);width:0}
.sd__bar>i.is-frei{background:var(--gruen)}
.sd__bar>i.is-wenig{background:var(--amber)}
.sd__bar>i.is-voll{background:var(--rot)}
.sd__bar>i.is-gesperrt{background:var(--grau)}

/* ---------- Übersicht: Wochenstreifen ---------- */
.sd__wcap{font-size:12.5px;color:var(--faint);margin:-4px 0 14px}
.sd__week{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.sd__wday{background:var(--soft);border:1px solid var(--ln);border-radius:var(--r-md);
  padding:15px 14px 17px;display:flex;flex-direction:column;gap:12px;min-height:158px;cursor:pointer;transition:.13s}
.sd__wday:hover{border-color:var(--o);box-shadow:0 3px 12px rgba(255,122,26,.14);transform:translateY(-1px)}
.sd__wday.is-heute{outline:2px solid var(--o);outline-offset:-2px}
.sd__wdh{display:flex;align-items:baseline;justify-content:space-between}
.sd__wdh b{font-size:15px}
.sd__wdh span{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.sd__wst{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700}
.sd__wst i{width:10px;height:10px;border-radius:50%;flex:none;background:currentColor}
.sd__wpts{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:auto}
.sd__wpts small{font-size:14px;font-weight:700;color:var(--faint)}
.sd__wday--frei .sd__wst{color:var(--gruen)}
.sd__wday--wenig .sd__wst{color:var(--amber)}
.sd__wday--voll .sd__wst{color:var(--rot)}
.sd__wday--gesperrt .sd__wst{color:var(--grau)}
@media(max-width:820px){.sd__week{grid-template-columns:repeat(4,1fr)}}

/* ---------- Kalender ---------- */
.sd__kaltools{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:0 0 12px}
.sd__pool{display:flex;background:#fff;border:1px solid var(--ln);border-radius:999px;padding:4px}
.sd__pool button{border:0;background:transparent;border-radius:999px;padding:8px 16px;
  font-size:14px;font-weight:700;color:var(--mut)}
.sd__pool button.is-on{background:var(--o);color:#fff}
.sd__pool em{font-style:normal;font-weight:400;font-size:12px;opacity:.85;margin-left:4px}
.sd__monthnav{display:flex;align-items:center;gap:10px}
.sd__monthnav strong{min-width:150px;text-align:center;font-size:16px}
.sd__monthnav button{width:38px;height:38px;border-radius:10px;border:1px solid var(--ln);
  background:#fff;font-size:20px;line-height:1}
.sd__legend{display:flex;gap:16px;font-size:12.5px;color:var(--mut);margin:0 0 10px}
.sd__legend span{display:flex;align-items:center;gap:6px}
.sd__dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.sd__dot--frei{background:var(--gruen)}
.sd__dot--wenig{background:var(--amber)}
.sd__dot--voll{background:var(--rot)}
.sd__dot--gesperrt{background:#5a6474}
.sd__kalbox{max-width:880px;margin:0 auto;border:1px solid var(--ln);border-radius:20px;
  padding:18px;background:#fff;box-shadow:0 1px 2px rgba(27,42,74,.04)}
.sd__kalwrap{background:transparent;border:0;border-radius:0;padding:8px 0 0}
.sd__kalhead{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;
  font-size:12px;font-weight:700;color:var(--mut);text-align:center;margin:0 0 7px}
.sd__kal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.sd__tag{min-height:82px;border:2px solid var(--ln);border-radius:12px;background:#fff;
  padding:8px 9px;text-align:left;display:flex;flex-direction:column;gap:4px;
  font-size:13px;position:relative;transition:.12s}
.sd__tag:hover{border-color:var(--o);box-shadow:0 3px 12px rgba(255,122,26,.14)}
.sd__tag b{font-size:19px;font-weight:800;line-height:1}
.sd__tag small{color:var(--mut);font-size:11.5px}
.sd__cap{color:var(--mut);font-size:11px;font-weight:700;align-self:flex-end;margin-top:auto}
.sd__bar{height:6px;border-radius:999px;background:#eef0f4;overflow:hidden;margin-top:5px}
.sd__bar i{display:block;height:100%;border-radius:999px;background:var(--gruen);transition:width .2s}
.sd__tag--wenig .sd__bar i{background:var(--amber)}
.sd__tag--voll .sd__bar i{background:var(--rot)}
.sd__tag--leer{visibility:hidden}
.sd__tag--vergangen{opacity:.4;pointer-events:none}
.sd__tag--frei{border-color:var(--gruen)}
.sd__tag--wenig{border-color:var(--amber);background:#fffaf0}
.sd__tag--voll{border-color:var(--rot);background:#fff5f4}
.sd__tag--gesperrt{border-color:#c7ccd6;background:#eceef2;color:#5a6474}
.sd__tag--gesperrt b{text-decoration:line-through}
.sd__tag--heute b{color:var(--o)}
.sd__kalstatus{font-size:13px;color:var(--mut);min-height:18px;margin-top:12px}
@media(max-width:640px){
  .sd__tag{min-height:64px;padding:6px 7px}
  .sd__tag b{font-size:16px}
  .sd__tag small,.sd__cap{font-size:10px}
}

/* ---------- Anfragen ---------- */
.sd__anfragen{display:flex;flex-direction:column;gap:10px}
.sd__anfrage{background:#fff;border:1px solid var(--ln);border-radius:14px;
  padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;
  box-shadow:0 1px 2px rgba(27,42,74,.04)}
.sd__anfrage h4{margin:0;font-size:15px}
.sd__anfrage p{margin:0;font-size:13px;color:var(--mut)}
.sd__anfrage select{width:auto;font-size:13.5px;padding:7px 10px;grid-row:1/3}
.sd__leer{color:var(--mut);font-size:14px;padding:20px;text-align:center}

/* ---------- Video-Rundgänge (Etappe 1, 19.07.) ---------- */
.sd__videokopf{margin:34px 0 12px}
.sd__videokopf h2{margin:0 0 2px;font-size:18px}
.sd__videokopf p{margin:0;font-size:13px;color:var(--mut)}
.sd__videos{display:flex;flex-direction:column;gap:10px}
.sd__video{background:#fff;border:1px solid var(--ln);border-radius:14px;
  padding:14px 16px;box-shadow:0 1px 2px rgba(27,42,74,.04)}
.sd__video h4{margin:0 0 2px;font-size:15px}
.sd__video p{margin:0;font-size:13px;color:var(--mut)}
.sd__videozeile{display:flex;align-items:center;gap:14px;justify-content:space-between}
.sd__videoplay{flex:none;font-size:13.5px;padding:8px 14px;border:1px solid var(--ln);
  border-radius:10px;background:#fff;cursor:pointer;font-weight:700}
.sd__videoplay:hover{border-color:var(--o);color:var(--o)}
.sd__video video{display:block;width:100%;max-height:420px;margin-top:12px;
  border-radius:10px;background:#000}

/* ============ SHENO v2 — PLANTAFEL · Namensraum svp- ============ */
/* Manrope kommt vom Dashboard selbst (lokal <head>, im Plugin self-hosted) — das
   eigene @font-face der Standalone-Datei ist hier raus, sein Pfad existiert nicht. */

/* Popover und Toast liegen ausserhalb von .svp (position:fixed) — sie brauchen dieselben
   Variablen und dieselbe Schrift, sonst loesen ihre var()-Aufrufe ins Leere. */
/* ⚠️ .svp-plusz gehoert hier mit rein: der Maus-Zeiger haengt (position:fixed) am <body>,
   also AUSSERHALB von .svp. Ohne diesen Eintrag loesen seine var()-Aufrufe ins Leere und
   der Kreis ist farblos. Gleiche Falle wie bei Popover und Toast. */
.svp,.svp-pop,.svp-toast,.svp-plusz,.svp-mtip,.svp-mtax{
  --o:#ff7a1a;      --o-soft:#fff0e4; --o-ink:#c05e10;
  --navy:#1b2a4a;   --ink:#1b2a4a;    --mut:#5a6683;   --faint:#8b93a7;
  --ln:#e7e9ee;     --soft:#f5f6f8;   --canvas:#f6f7f8; --sidebar:#fff;
  --grau-soft:#eceef2;
  --schiene:#eef0f3;   /* leere Zeit im Monats-Balken (Nachtmodus dunkelt sie ab) */
  --r-lg:20px; --r-md:14px; --r-sm:10px;

  /* ---- Service-Farben: Foto-Toene des Nutzers (17.07.).
     Gruen = Umzug · Koralle = Entruempelung · Gelb = Haushaltsaufloesung.
     🔴 ACHTUNG KONTRAST: Diese drei Toene sind aus der Foto-Vorlage uebernommen, dort
     steht weisser Text drauf. Das ergibt WEIT unter 4.5:1 (gemessen: siehe STAND).
     Die frueheren Toene (Blau/Violett/Dunkelgruen) waren bewusst dunkel, damit weisser
     Text >= 4.5:1 erreicht — dieser Schutz ist mit der Foto-Entscheidung aufgegeben.
     Der Nutzer wurde gewarnt und hat sich fuer den Foto-Look entschieden ("erst mal").
     Wenn es im Betrieb bei Sonnenlicht kneift: hier die Toene abdunkeln, sonst nichts. ---- */
  /* 18.07., 9. Runde: alle drei Toene EINE STUFE DUNKLER (Nutzer: "damit man die
     weisse Schrift besser lesen kann") — die Foto-Originale #3ecb77/#f05c5c/#f5c242
     lagen bei ~2:1 Kontrast. Immer noch nicht 4.5:1, aber deutlich besser. */
  --svc-umzug:#2fb166;          --svc-umzug-d:#27965a;    /* Gruen   (dunkler) */
  --svc-entruempelung:#e64b4b;  --svc-entruempelung-d:#cc3a3a; /* Koralle (dunkler) */
  --svc-haushalt:#dfa118;       --svc-haushalt-d:#c48d10;  /* Gelb    (dunkler) */
  /* Transport (18.07., 4. Leistung im Vormerkungs-Dialog): BLAU — die einzige
     Grundfarbe, die weder mit den Foto-Leistungen noch mit den Fahrerfarben
     (gruen/rot/orange) kollidiert. Nicht aus der Foto-Vorlage; bei Bedarf tauschen. */
  --svc-transport:#4a8fe7;      --svc-transport-d:#2f6fc4;

  /* ---- Auslastung im Monat: NEUTRALE Grau-Stufen (Nutzer-Entscheidung 17.07.).
     Grund: seit die Services gruen/koralle/gelb sind, waere ein gruen/orange/roter
     Streifen doppeldeutig (gruen = "Umzug" UND "freier Tag"). Farbe heisst ab jetzt
     ausschliesslich LEISTUNG, die Auslastung laeuft ueber Helligkeit. ---- */
  --st-frei:#c8cdd6;
  --st-wenig:#7c8697;
  --st-voll:#2b3648;

  /* ---- Fahrer-Farben (Nutzer-Entscheidung 17.07.): Isa gruen · Edin rot · Amar orange.
     ⚠️ Die fruehere Regel "kein Rot, kein Orange als Kolonnenfarbe" ist damit bewusst
     aufgegeben — Edins Rot liegt nah am Alarmrot (der Konfliktrahmen traegt deshalb
     zwingend den weissen Trennring), Amars Orange nah am Akzent. Weisser Text auf diesen
     Toenen liegt bei ~2-3:1, wie bei den Foto-Farben: vom Nutzer so gewollt.
     Laufzeit-Aenderungen aus den Einstellungen schreibt farbenAnwenden() hierher. ---- */
  --kol-k1:#2fb166;   /* Isa  — gruen  (9. Runde dunkler, wie die Leistungsfarben) */
  --kol-k2:#e64b4b;   /* Edin — rot    */
  --kol-k3:#e08c0b;   /* Amar — orange */

  /* Alarmrot: NUR Konflikt. Bewusst viel dunkler als das Entruempelungs-Koralle
     (#f05c5c), damit der Rahmen auf einem Korallblock noch als Alarm liest. */
  --rot:#c81e1e;    --rot-soft:#fbe4e4;
  /* Heute: Rot wie in der Foto-Vorlage (ersetzt Orange als Heute-Marke). */
  --heute:#e8453c;

  /* Raster — die vier Zahlen aus zeitraster-consumer.md, Abschnitt 7 */
  --pph:48px;        /* Pixel pro Stunde ⇒ 30 Min = 24px, 15-Min-Snap = 12px */
  --axis:58px;
  /* EIN Knopf fuer die Tagesbreite in der Woche (Nutzer: "Tage etwas schmaler").
     Groesser = breitere Tage, mehr Text pro Block, weniger Ruhe. */
  --tagbreite:160px; /* 18.07.: 160 = Auto-Wert bei 3 Fahrern (Nutzer: "perfekte Breite") */
  /* --spur:182px ist am 17.07. entfallen: die Tagesspalten teilen sich jetzt gleichmaessig
     die Bildschirmbreite, die Spuren darin in Prozent. Wer eine Mindestbreite wieder
     einfuehrt, holt sich die seitlich scrollende 2788px-Woche zurueck. */

  font-family:'Manrope','Segoe UI',system-ui,Arial,sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
}
/* ⚠️ NUR FUER DIESE MOCKUP-DATEI, nicht ins Plugin uebernehmen: <body> hat 8px
   Standard-Aussenabstand. */
body{margin:0}
/* Layout-Historie, damit niemand im Kreis baut: erst innen scrollend (620px-Deckel),
   dann Seiten-Scroll ("wirkt eingekapselt"), jetzt WIEDER fest — aber aus neuem Grund:
   das Mausrad NAVIGIERT seit 17.07. (Monat vor/zurueck, Woche tageweise). Ein Rad, das
   gleichzeitig scrollt UND navigiert, waere unberechenbar; also steht die Seite fest. */
.svp{background:var(--canvas); height:100vh; overflow:hidden}
.svp *,.svp-pop *,.svp-toast *{box-sizing:border-box}
.svp button{font-family:inherit;cursor:pointer;color:inherit;border:0;background:transparent}
.svp select{font-family:inherit;font-size:14px;color:var(--ink);
  border:1px solid var(--ln);border-radius:var(--r-sm);padding:9px 10px;background:#fff;width:100%}
.svp select:focus,.svp button:focus-visible{outline:2px solid rgba(255,122,26,.35);border-color:var(--o)}
.svp svg{width:18px;height:18px;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svp-hidden{display:none !important}

/* Feste Fensterhöhe (18.07.): war min-height:100vh (durfte wachsen) — dann wurde ein zu
   hoher Schichtplan unten abgeschnitten statt innen zu scrollen. Da .svp ohnehin
   height:100vh + overflow:hidden hat (nichts scrollt auf Seitenebene), deckelt height:100vh
   die Kette sauber; die Panels (Zeitraster, Schichtplan) scrollen jetzt INNEN. */
.svp-shell{display:grid;grid-template-columns:232px 1fr;height:100vh;min-height:0}
/* Eingeklappte Seitenleiste: ganz weg, die Tafel bekommt die volle Breite. */
.svp .svp-shell.is-zu{grid-template-columns:1fr}
.svp .svp-shell.is-zu .svp-side{display:none}
.svp-seite{width:32px;height:32px;border-radius:8px;color:var(--mut);flex:none;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.svp-seite:hover{background:var(--soft);color:var(--ink)}
.svp-seite svg{width:17px;height:17px}

/* ---------- Seitenleiste ---------- */
.svp-side{background:var(--sidebar);border-right:1px solid var(--ln);
  padding:22px 16px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.svp-brand{font-size:26px;font-weight:800;letter-spacing:-.5px;padding:0 8px}
.svp-brand span{color:var(--o)}
.svp-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.svp-nav__group{margin:0 0 4px;padding:0 10px;font-size:11px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.svp-nav__sep{height:1px;background:var(--ln);margin:14px 6px}
.svp-nav button{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:999px;
  font-size:14.5px;font-weight:600;color:var(--mut);text-align:left;transition:background .15s}
.svp-nav button:hover{background:var(--soft)}
.svp-nav button.is-on{background:#f1f2f3;color:var(--ink);font-weight:700}
.svp-nav button svg{flex:none;color:var(--faint)}
.svp-nav button.is-on svg{color:var(--ink)}
.svp-badge{margin-left:auto;background:var(--o);color:#fff;font-size:11px;font-weight:800;
  border-radius:999px;padding:1px 7px}
/* Hell/Dunkel-Switch in der Seitenleiste, direkt ueber dem Firmen-Fuss (18.07.) */
.svp-side__nacht{display:flex;padding:0 6px;margin-bottom:12px}
.svp-side__foot{display:flex;align-items:center;gap:10px;padding:0 6px}
.svp-avatar{width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--o),#ffab5e);color:#fff;font-size:12.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.svp-side__firma{font-size:13.5px;font-weight:700;line-height:1.25;display:flex;flex-direction:column}
.svp-side__firma em{font-style:normal;font-size:12px;font-weight:400;color:var(--faint)}

/* ---------- Hauptbereich ---------- */
/* Keine Deckelung: die Plantafel nimmt die volle Bildschirmbreite (Nutzer-Wunsch 17.07.).
   Vorher max-width:1720px — auf breiten Monitoren stand rechts Rand statt Kalender.
   Hoehe: Fenster fest, die Karte fuellt es, die Legende sitzt damit immer ganz unten.
   min-height:0 auf jeder Stufe ist Pflicht — ohne das weigern sich Flex-/Grid-Kinder
   zu schrumpfen und der Inhalt drueckt unsichtbar aus dem Fenster. */
.svp-main{padding:18px 24px;max-width:none;margin-inline:auto;width:100%;
  height:100%;display:flex;flex-direction:column;min-height:0}
.svp-calcard{display:flex;flex-direction:column;min-height:0;max-height:100%}
/* In Woche/Tag folgt die KARTE der Rasterhoehe (Nutzer 17.07. spaet: "die ganze
   Section soll kleiner werden, mit der Legende unten") — sie klebt oben an und endet
   direkt unter der Legende. Nur der Monat streckt sich weiter auf volle Hoehe. */
/* 56. Runde (Nutzer): Der Gap ueber der Zeitachse muss in ALLEN vier Ansichten
   gleich sein — wie im Schichtplan. Das fruehere `align-self:start` liess die
   Woche/Tag-Karte auf Inhaltshoehe schrumpfen, die fest unten sitzende Achse bekam
   dadurch je Ansicht einen anderen Abstand. Jetzt streckt sich die Karte ueberall
   auf die volle Rahmenhoehe; den Hoehen-Rest (Rundung der Auto-Stundenhoehe)
   schluckt das Zeitraster INNEN, die Legende bleibt an der Kartenunterkante. */
.svp .svp-calcard.is-kompakt{align-self:stretch}
.svp .svp-calcard.is-kompakt .svp-scroll{flex:1 1 auto}
/* flex:0 1 auto statt flex:1: der Scrollbereich nimmt sich nur die Hoehe seines
   Inhalts (Raster), darf aber schrumpfen und innen scrollen, wenn er nicht passt. */
.svp-scroll{flex:0 1 auto;min-height:0}
.svp-month{flex:1;min-height:0;display:flex;flex-direction:column}
.svp-month .svp-month__grid{flex:1;min-height:0}
.svp-col{min-height:0;overflow:auto}
.svp-panelhead{margin:0 0 12px}
.svp-panelhead h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.svp-panelhead p{margin:3px 0 0;font-size:13.5px;color:var(--mut)}
/* stretch statt start + flex:1: die Kalenderkarte fuellt die Fensterhoehe (fest, 17.07.). */
.svp-grid{display:grid;grid-template-columns:268px minmax(0,1fr);gap:18px;
  align-items:stretch;flex:1;min-height:0;position:relative}
/* Einklapp-Pfeil zwischen Mittelspalte und Kalender (18.07., 10. Runde): schwebt
   in der Fuge, erscheint beim Drueberfahren. Klick versteckt die beiden linken
   Karten — nur der Kalender bleibt; der Pfeil dreht sich und bleibt greifbar.
   Die Navigations-Leiste ganz links ist bewusst NICHT einklappbar. */
.svp .svp-links-zu{position:absolute;left:277px;top:50%;transform:translate(-50%,-50%);
  width:22px;height:56px;border-radius:999px;background:#fff;border:1px solid var(--ln);
  color:var(--mut);font-size:15px;font-weight:800;z-index:15;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s,background .15s;
  box-shadow:0 2px 8px rgba(27,42,74,.14)}
.svp-grid:hover .svp-links-zu{opacity:1}
.svp .svp-links-zu:hover{background:var(--soft);color:var(--ink)}
.svp .svp-grid.is-links-zu{grid-template-columns:minmax(0,1fr)}
.svp-grid.is-links-zu .svp-col{display:none}
.svp .svp-grid.is-links-zu .svp-links-zu{left:14px}
.svp-col{display:flex;flex-direction:column;gap:14px}
.svp-card{background:#fff;border:1px solid var(--ln);border-radius:var(--r-lg)}
.svp-card--pad{padding:16px}
.svp-cardhd{margin:0 0 12px;font-size:13px;font-weight:800;display:flex;
  justify-content:space-between;align-items:baseline;gap:8px}
.svp-cardhd em{font-style:normal;font-size:12px;font-weight:400;color:var(--faint)}
.svp-hint{margin:10px 0 0;font-size:12px;color:var(--faint);line-height:1.45}

/* ---------- Mini-Monat ---------- */
.svp-mini__hd{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}
.svp-mini__hd b{font-size:14px;font-weight:800}
.svp-mini__nav{display:flex;gap:2px}
.svp-mini__nav button{width:26px;height:26px;border-radius:8px;color:var(--mut);font-size:15px;
  transition:background .15s}
.svp-mini__nav button:hover{background:var(--soft)}
.svp-mini__head{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin:0 0 4px}
.svp-mini__head span{text-align:center;font-size:10.5px;font-weight:700;color:var(--faint)}
/* Mini-Kalender GROESSER (Nutzer 17.07.: "in die Hoehe zieh") — er ist jetzt das
   Kapazitaets-Cockpit: hell = frei · mittelgrau = gebucht · dunkel = ausgebucht.
   ⚠️ BEWUSST Graustufen, nicht gruen/rot: Gruen und Rot GEHOEREN jetzt Isa und Edin.
   Eine rote Mini-Kachel wuerde "Edin" schreien statt "voll". */
.svp-mini{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.svp-mini button{height:38px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:background .15s}
.svp-mini button:hover{background:var(--soft)}
.svp-mini button.is-out{color:#c8cdd6}
.svp-mini button.is-past{color:#c8cdd6}
.svp-mini button.is-week{background:var(--soft)}
.svp-mini button.is-teil{background:#e5e8ed}
/* KEIN Schwarz mehr im Mini-Kalender (Nutzer 18.07., 7. Runde): "ausgebucht" ist
   ein dunkleres Grau statt der fast-schwarzen Kachel — die Stufung hell/mittel/
   dunkel bleibt lesbar, ohne dass etwas nach "Fehler" schreit. */
.svp .svp-mini button.is-voll{background:#c6ccd6;color:var(--ink)}
/* Auswahl: dezentes Grau statt dunkler Kachel (das zweite Schwarz von frueher). */
.svp .svp-mini button.is-sel{background:#e2e6ec;color:var(--ink);font-weight:800}
/* HEUTE ist die einzige Farbe: ROETLICHE Kachel, Zahl weiss — vorher rote Zahl
   (Nutzer: "die Zahl soll dementsprechend nicht mehr roetlich sein").
   Steht bewusst NACH is-sel: heute bleibt auch ausgewaehlt rot. */
.svp .svp-mini button.is-today{background:var(--heute);color:#fff;font-weight:800}
/* Jahresuebersicht: 12 Monate in 3 Spalten, greifbar gross. */
.svp-mini--jahr{grid-template-columns:repeat(3,1fr)}
.svp .svp-mini--jahr button{height:46px;font-size:13px;font-weight:700}

/* ---------- Zeitraum-Tabs der Kolonnen-Karte ---------- */
.svp-koltabs{display:flex;gap:2px;background:var(--soft);border-radius:999px;padding:2px}
.svp .svp-koltabs button{padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;
  color:var(--mut)}
.svp .svp-koltabs button.is-on{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(27,42,74,.12)}

/* ---------- Kolonnen-Liste: Gesicht + Auftraege + Stunden + Balken ---------- */
.svp-kol{display:flex;flex-direction:column;gap:12px}
.svp-kol__row{display:flex;align-items:center;gap:9px;font-size:12.5px}
.svp-kol__t{line-height:1.3;flex:1;min-width:0}
.svp-kol__t b{display:block;font-size:13px;font-weight:800}
.svp-kol__t em{font-style:normal;font-size:11.5px;color:var(--mut);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;display:block}
.svp-kol__bar{display:block;height:5px;border-radius:999px;background:var(--grau-soft);
  overflow:hidden;margin-top:5px}
.svp-kol__bar i{display:block;height:100%;border-radius:999px}
.svp-kol__ums{display:block;font-style:normal;font-size:11px;color:var(--faint);margin-top:4px}

/* ---------- Fahrer-Schalter in der Kopfleiste ---------- */
/* Eigener Scrollbereich (Nutzer 19.07.): bei vielen Mitarbeitern schob die Reihe bisher
   alles rechts daneben zusammen (Zahnrad/Ansichts-Tabs wurden gequetscht). Jetzt hat sie
   eine Obergrenze und scrollt INNERHALB — der Rest der Leiste bleibt, wo er ist.
   `flex:0 1 auto` + `min-width:0` ist der eigentliche Hebel: ohne min-width:0 weigert sich
   ein Flex-Kind, unter seine Inhaltsbreite zu schrumpfen, und overflow greift nie. */
/* ⚠️ 13. Runde (Nutzer): Die harte Obergrenze `max-width:min(52vw,420px)` ist RAUS —
   "wenn man sein Fenster weiter in die Breite zieht, sollten alle Mitarbeiter sichtbar
   gemacht werden". Mit `flex:1 1 auto` nimmt sich die Reihe jetzt ALLEN Platz, der
   zwischen Titelblock und rechter Knopfgruppe frei ist, und waechst mit dem Fenster.
   `min-width:0` bleibt der Hebel, damit sie bei engem Fenster trotzdem schrumpfen darf
   und INNEN scrollt, statt die Knopfgruppe zu quetschen.
   Abstand negativ (Nutzer: "Stoß an Stoß oder eventuell sogar ein wenig überlappen") —
   die Gesichter schuppen sich um 6 px. */
.svp-fahrer{display:flex;gap:0;align-items:center;flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;
/* ⚠️ KEIN `scroll-behavior:smooth`: damit wird jedes Setzen von `scrollLeft` zu einer
   animierten Fahrt — der Wert bleibt zunaechst stehen, und das Selbst-Wandern (alle 16 ms
   ein Stueck) sowie das Ziehen wuerden dagegenarbeiten. Beim Testen war die Leiste
   dadurch ueberhaupt nicht per Skript scrollbar. Weich gescrollt wird hier nirgends. */
  cursor:grab}
.svp-fahrer.is-zieht{cursor:grabbing;user-select:none}
.svp-fahrer > *{flex:none}
/* Scrollbalken UNSICHTBAR (Nutzer 19.07.): der Streifen wird gezogen, nicht gescrollt —
   ein Balken unter den Gesichtern sah nach "kaputtem Layout" aus. Gescrollt werden kann
   trotzdem (Rad/Touchpad/Trackpad-Wisch), es sieht nur niemand. */
.svp-fahrer{scrollbar-width:none;-ms-overflow-style:none}
.svp-fahrer::-webkit-scrollbar{display:none}
/* Ueberlappung (13. Runde): negativer Rand schuppt die Gesichter uebereinander; das
   jeweils linke liegt oben, damit die Reihe wie ein Stapel wirkt. Beim Hover kommt das
   angefasste nach vorn (z-index), sonst schnitte der Nachbar es an. */
/* Abstand als Variable (19. Runde): der Regler "Mitarbeiter: Abstand" im Zahnrad
   schreibt --fabstand; -6 px bleibt der Standard der 13. Runde. */
.svp .svp-fahrer__btn{padding:2px;border-radius:50%;
  margin-right:var(--fabstand,-6px);position:relative}
.svp .svp-fahrer__btn:last-child{margin-right:0}
.svp .svp-fahrer__btn:hover{z-index:3}
/* Groesser und OHNE weissen Rahmen (Nutzer 17.07. spaet).
   ⚠️ 14. Runde (Nutzer): "entnimm mir bitte die Schattierungen von allen Icons, ich mag
   es nicht wenn Schattierungen da sind" — der frueher hier stehende `box-shadow` ist RAUS
   und darf NICHT zurueckkommen (auch nicht als Hover-Schatten). */
/* 60. Runde (Nutzer): "die Icons von den Mitarbeitern ein Stückchen größer" — 48 → 54 px.
   ⚠️ Wer diese Zahl anfasst, muss die Rechnung unten bei .svp-fahrer__grp mitziehen
   (Kachelhoehe = Ring + 2×2 px Knopf-Polster) UND das senkrechte Polster von
   .svp-calhd__lstack .svp-fahrer (Hover waechst auf ×1,45 = 78,3 px, Platz ist 54+2×14=82). */
.svp-fahrer__btn .svp-ring{width:46px;height:46px;font-size:13px;border:0;
  box-shadow:none;transition:transform .15s,opacity .15s,filter .15s}
/* Deutlich staerkeres Aufpoppen (Nutzer 13. Runde) — ohne Schatten. */
.svp-fahrer__btn:hover .svp-ring{transform:scale(1.45)}
/* Ausgeblendet = ausgegraut, nicht weg: man SIEHT, dass gefiltert ist, und kommt mit
   einem Klick zurueck. Ein verschwundener Schalter waere eine Sackgasse. */
.svp-fahrer__btn.is-aus .svp-ring{filter:grayscale(1);opacity:.35}
/* ---- Gruppen-Kacheln in der Leiste (16. Runde) ----
   Die Mitglieder-Gesichter schuppen sich zu einem Stapel; die Kachel traegt die
   Gruppenfarbe als duennen Rahmen, damit man Gruppen voneinander unterscheidet. */
/* ⚠️ 19. Runde (Nutzer): Beim Umschalten Mitarbeiter ⇄ Gruppen darf sich die HOEHE des
   ganzen Kalenders NICHT verschieben ("statisch, steif"). Die Kachel ist deshalb auf
   exakt dieselbe Gesamthoehe gebracht wie ein Einzel-Gesicht:
   Einzel = 46 px Ring + 2×2 px Knopf-Polster = 50 · Gruppe = 50 px fest (border-box,
   2 px Rand, 46 px Inhalt). Wer Ring- oder Polstergroessen aendert, muss BEIDE Seiten
   dieser Rechnung nachziehen und die Kopfhoehe nachmessen.
   (60. Runde: 48/52 → 54/58. ⚠️ 72. Runde auf Nutzerwunsch wieder auf 46/50 —
   "noch ein ticken kleiner". Beide Seiten immer gemeinsam.) */
.svp .svp-fahrer__grp{display:flex;align-items:center;box-sizing:border-box;
  height:50px;padding:0 10px 0 0;
  border-radius:999px;border:2px solid var(--grpfarbe, var(--ln));background:#fff}
/* 17. Runde (Nutzer): "Gruppenicon und Mitarbeitericons sollen IMMER die gleiche
   Groesse haben" — dieselben 48 px wie `.svp-fahrer__btn .svp-ring`. Das erste Gesicht
   deckt mit -2 px den Kachel-Rand ab und sitzt buendig im linken Bogen (wie die
   Stammdaten-Pille der 14. Runde). */
.svp .svp-fahrer__grp .svp-ring{width:46px;height:46px;font-size:13px;
  margin-right:-16px;border:2px solid #fff}
.svp .svp-fahrer__grp .svp-ring:first-child{margin-left:-2px}
.svp .svp-fahrer__grp .svp-ring:last-child{margin-right:0}
/* 18. Runde (Nutzer): Gruppen-Kacheln poppen beim Drueberfahren GENAUSO auf wie die
   einzelnen Gesichter — gleicher Faktor 1,45, gleiche Animation. Skaliert wird die
   GANZE Kachel (die Gesichter darin wachsen mit); die Einzel-Ringe bleiben ohne
   eigenes transform, sonst raestete der Stapel auseinander. */
.svp .svp-fahrer__grp{transition:transform .15s}
.svp .svp-fahrer__grp:hover{transform:scale(1.45)}
.svp .svp-fahrer__grp:hover .svp-ring{transform:none}
/* ⚠️ 19. Runde: Das fruehere Extra-Polster im Gruppen-Modus (14 px) ist RAUS — es hat
   genau den Hoehensprung verursacht, den der Nutzer gemeldet hat. Seit die Kachel fest
   52 px hoch ist (= Einzel-Knopf), reichen die normalen 12 px auch fuer den Hover:
   52 × 1,45 ≈ 75,4 px passt in 52 + 24 = 76 px. `is-gruppen` bleibt als Haken am
   Element (JS setzt es weiter), traegt aber kein eigenes Polster mehr. */
.svp-fahrer__mehr{background:var(--soft);color:var(--mut);font-weight:800;
  display:flex;align-items:center;justify-content:center}
body.svp-nacht .svp .svp-fahrer__grp{background:#1e1e1e}
body.svp-nacht .svp .svp-fahrer__grp .svp-ring{border-color:#1e1e1e}
/* Fahrer-Hover-Hervorhebung (18.07.): nicht-fokussierte Bloecke/Spalten/Icons leiser. */
.svp-b--dim{opacity:.16;transition:opacity .12s}
.svp-mday__drv--dim{opacity:.2;transition:opacity .12s}
.svp .svp-fahrer__btn.is-leise .svp-ring{opacity:.4;transition:opacity .12s}

/* ---------- Kolonnen-Kreis (Nutzer: "mit so nem Kreis") ---------- */
/* Gesichter ueberall deutlich groesser (Nutzer 17.07.) — sie sind das Erkennungsmerkmal,
   nicht Dekoration.
   ⚠️ Zwei Klassen am selben Element (.svp-ring .svp-filter__ava) = gleiche Spezifitaet,
   also gewinnt die SPAETERE Regel. .svp-ring{width:24px} steht weiter unten und hat das
   hier ueberfahren. Deshalb der Eltern-Selektor — nicht aus Schoenheit, sondern damit
   die Regel gewinnt, egal wo sie steht. */
.svp-filter__row .svp-filter__ava{width:40px;height:40px;font-size:13px}
/* Kopf der Tag-Ansicht: Gesicht gross, Name normal (nicht die 21px der Tageszahl).
   `.svp `-Prefix aus demselben Grund wie oben: sonst schlaegt das spaetere .svp-ring{24px}. */
.svp .svp-ring--gross{width:56px;height:56px;font-size:18px}
.svp-pill--kol b{font-size:13px;font-weight:800;margin-top:4px}
.svp-pill--kol em{font-size:11px}
.svp-ring{position:relative;overflow:hidden;width:24px;height:24px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;letter-spacing:-.2px;
  background:var(--soft);border:1.5px solid var(--ln);color:var(--mut)}
/* In der Seitenleiste tragen die Ringe die Gesichter — deutlich groesser (Nutzer 17.07.).
   Zwei Klassen im Selektor ⇒ schlaegt .svp-ring sicher, unabhaengig von der Reihenfolge. */
.svp-kol__row .svp-ring{width:52px;height:52px;font-size:17px}
.svp-kol__row{gap:12px}
/* Kolonnen-Ringe bleiben bewusst NEUTRAL/entsaettigt: Farbe heisst in dieser Tafel
   "Leistung". Wuerden die Ringe kraeftig, haetten wir ein drittes Farbsystem. */
/* ENTSCHIEDEN 17.07. abends: Mitarbeiter sind NEUTRAL (weisser Grund, grauer Rand) —
   Farbe gehoert ausschliesslich den Leistungen. Die frueheren Pastell-Toene je Fahrer
   sind raus; die Klassen bleiben als Haken (Selektoren/JS haengen daran). */
.svp-ring--k1,.svp-ring--k2,.svp-ring--k3,.svp-ring--k4{
  background:#fff;border-color:#e2e5ea;color:var(--mut)}

/* ---------- Kalender-Kopf ---------- */
/* 13. Runde (Nutzer, Screenshot): "oberhalb haben wir noch ziemlich viel freie Fläche" —
   Kartenpolster oben von 16 auf 8 px, damit der Titelblock hoeher sitzt. */
/* ⚠️ 64. Runde: oben 8 → 12 px. Seit die Gesichter-Box 16 px hoeher sitzt (Flucht mit
   den rechten Icons), reichte der vergroesserte Hover-Kreis 2 px ueber die Kartenkante —
   und die Karte hat `overflow:hidden`, haette also abgeschnitten. Die 4 px sind
   NACHGEMESSEN, nicht geschaetzt: Hover-Oberkante 16 px vs. Kartenkante 18 px. */
.svp-calcard{padding:12px 18px 14px;overflow:hidden}
/* ⚠️ `flex-wrap` + `align-items:flex-start` (Nutzer 19.07., 24. Runde): die Mitarbeiter-
   Leiste sitzt jetzt LINKS OBEN in einer eigenen Zeile unter dem Titel. Ohne Umbruch
   quetschte sie sich neben die Navigation, ohne flex-start haengt sie mittig. */
/* 6. Büro-Runde: Gesichter nicht mehr mittig, sondern IN der linken Gruppe direkt
   neben der KW ⇒ das 4.-Runden-Grid (1fr auto 1fr) ist wieder Flex: links
   Titel · KW · Gesichter · Undo, rechts die Knopfgruppe (margin-left:auto).
   10. Büro-Runde: KEIN Umbruch mehr + feste Mindesthoehe (Nutzer: die Leiste wurde
   "mal hoch, mal flach", sobald der Titel breiter wurde). Wird es eng, schrumpft
   die GESICHTER-Leiste (sie kann scrollen) — nie die Hoehe der Kopfzeile. */
/* ⚠️ `flex:none` ist Pflicht (11. Runde): .svp-calcard ist ein Spalten-Flex, die
   Kopfzeile also ein Flex-KIND mit dem Standard flex-shrink:1. Sie wurde dadurch auf
   ihre min-height zusammengedrueckt, sobald es eng wurde — der Titelblock (71 px) ragte
   sichtbar aus der 56-px-Zeile heraus. Nicht entfernen.
   min-height traegt weiter das Versprechen der 10. Runde (konstante Kopfhoehe, springt
   nie); der Wert ist mit dem zweizeiligen Titelblock von 56 auf 72 px gewachsen. */
/* ⚠️ 14. Runde (Nutzer): "die Oberkante vom Monat auf gleicher Höhe wie die Oberkante
   vom ersten Icon". Dafuer richtet sich die Kopfzeile oben aus (statt mittig) — die
   Gesichter-Box bekommt einen genau berechneten Versatz (s. .svp-fahrerbox margin-top).
   Die rechte Knopfgruppe bleibt per `align-self` mittig, sie hat mit der Kante nichts zu tun. */
/* ---- Kopfleiste als RASTER (71. Runde, Nutzer) ----
   Drei Spalten, zwei Zeilen:
     Spalte 1: Datumsblock, ueber BEIDE Zeilen
     Spalte 2: Gesichter (Zeile 1) · Suchfeld (Zeile 2)
     Spalte 3: Werkzeuge (Zeile 1) · Ansichts-Tabs (Zeile 2) — rechtsbuendig
   ⚠️ Warum Grid und nicht wieder verschachtelte Flex-Zeilen: Mit einem gemeinsamen
   Wrapper fuer Suche+Tabs wurde dessen Breite von BEIDEN bestimmt (655 px) und presste
   die Gesichter auf 147 px. Im Raster teilen sich Gesichter und Suche eine Spalte, die
   Tabs stehen in ihrer eigenen — die Gesichter behalten dadurch ~500 px.
   Die Zeilen liegen 6 px auseinander: derselbe Abstand, den die Tab-Zeile schon vor dem
   Umbau zum Zahnrad hatte (Nutzer-Vorgabe).
   ⚠️ `align-items:start` ist der Kern der Flucht: Titel, Gesichter und Werkzeuge
   beginnen dadurch alle auf derselben Oberkante. */
/* ⚠️ 85. Runde: Mittelspalte mit MINDESTBREITE (war minmax(0,…)). Seit dort der
   zentrierte Titel wohnt, gab die Spalte auf schmalen Fenstern als erste nach und
   der Titel verschwand komplett (bei 1120 px auf 0 px gemessen). Jetzt weicht
   stattdessen die Gesichter-Spalte — die scrollt ohnehin innen. */
.svp-calhd{display:grid;grid-template-columns:auto minmax(200px,1fr) auto;
  grid-template-rows:auto auto;align-items:start;
  /* 72. Runde: row-gap 6 → 4 px, damit die Zeilen noch etwas enger stehen. */
  column-gap:14px;row-gap:4px;margin:0 0 8px;flex:none}
/* ⚠️ 87. Runde (Nutzer): Kopf-Zeile 1 — DATUM ganz links als Block (Monat gross,
   Jahr + KW klein darunter), GESICHTER direkt daneben LINKSBUENDIG, Werkzeuge rechts.
   Zeile 2: Suchfeld + Werkzeug-Icons ebenfalls linksbuendig unter den Gesichtern,
   Tabs rechts. (86. Runde hatte Gesichter und Suchfeld mittig — der Nutzer wollte
   sie "wieder komplett nach links".) Der Titelblock spannt beide Zeilen, weil er
   als Stapel jetzt wieder hoeher ist als eine Knopfreihe. */
.svp-calhd > .svp-titelblock{grid-column:1;grid-row:1;justify-self:start}
.svp-calhd > .svp-calhd__lstack{grid-column:2;grid-row:1;justify-self:start;min-width:0;
  /* Deckel: der Streifen scrollt ohnehin innen (Ziehen + Fade an den Enden), er darf
     die Mittelspalte nicht ueber die Kopfbreite hinaus aufblaehen. */
  max-width:100%}
.svp-calhd > .svp-calhd__r{grid-column:3;grid-row:1}
/* 73. Runde: Zeile 2, Mitte — Werkzeuge links, Suchfeld MITTIG. Die beiden `1fr` links
   und rechts sind gleich breit, dadurch sitzt das Feld exakt in der Spaltenmitte,
   unabhaengig davon, wie viele Icons links stehen. */
/* ⚠️ 87. Runde: Die drei Werkzeuge (Heute · Konflikt · Vollbild) stehen in Spalte 1
   unter dem Datum — so bleibt in Spalte 2 die volle Breite fuer das Suchfeld unter
   den Mitarbeiter-Icons. */
.svp-calhd__mitte{grid-column:1;grid-row:2;
  display:flex;align-items:center;gap:10px;min-width:0;min-height:38px}
/* ⚠️ 74. Runde (Nutzer): Das Feld steht RECHTS am Spaltenende, direkt neben den
   Ansichts-Tabs ("das hat optisch besser gepasst") — die mittige Ausrichtung der
   73. Runde ist damit wieder raus, samt ihrer absoluten Positionierung und dem
   Breiten-Deckel. Die Werkzeuge schieben sich per `margin-right:auto` nach links,
   das Feld faellt ans rechte Ende. Es darf bis 180 px schrumpfen, bevor die
   Gesichter darueber Platz abgeben muessen. */
/* ⚠️ 84. Runde (Nutzer): 320 → 400 px ("um 60, 70, 80 oder 100 Pixel breiter").
   `flex:0 1 400px` waere WIRKUNGSLOS: bei flex-shrink > 0 deckelt der Browser den
   Platzbedarf eines Flex-Kindes auf dessen INHALTSbreite — das Feld sass dadurch
   trotz 320er Wunsch bei ~199 px. Feste Breite ist der einzige Weg, der hier wirklich
   greift; das Schrumpfen uebernehmen die Media-Queries unten.
   86. Runde (Nutzer): 400 → 370 px. 87. Runde: 370 → 330 px ("40 Pixel schmaler"). */
.svp-calhd > #svp-suche{flex:none;width:330px;max-width:100%}
/* Die drei Werkzeuge links: gleiche Pillen-Optik wie die Kopf-Icons, nur kleiner —
   sie sind Zubehoer, keine Hauptnavigation. */
/* 74. Runde: `margin-right:auto` schiebt die Werkzeuge nach links und das Suchfeld
   damit ans rechte Spaltenende. */
.svp-werkz2{display:flex;align-items:center;gap:6px;flex:none;margin-right:auto}
.svp .svp-werkz2 button{position:relative;width:34px;height:34px;flex:none;
  border:1px solid var(--ln);border-radius:999px;background:#fff;color:var(--mut);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color .15s,color .15s,background .15s}
.svp .svp-werkz2 button svg{width:16px;height:16px;color:var(--faint)}
.svp .svp-werkz2 button:hover{border-color:#cfd4de;color:var(--ink)}
.svp .svp-werkz2 button:hover svg{color:var(--ink)}
/* Aktiv (Vollbild an) — dieselbe Marke wie die aktive Ansichts-Pille. */
.svp .svp-werkz2 button.is-on{border-color:var(--ink);color:var(--ink)}
.svp .svp-werkz2 button.is-on svg{color:var(--ink)}
/* Konflikt-Zaehler: kleine rote Zahl am Warndreieck. Leer ⇒ unsichtbar, damit ein
   sauberer Plan keinen Alarm-Punkt traegt. */
.svp-werkz2__zahl{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;
  padding:0 3px;border-radius:999px;background:var(--rot);color:#fff;
  font-size:9.5px;font-weight:800;font-style:normal;line-height:15px;text-align:center}
.svp-werkz2__zahl:empty{display:none}
/* Nichts zu tun ⇒ der Knopf sagt es ehrlich, statt ins Leere zu springen. */
.svp .svp-werkz2 button:disabled{opacity:.4;cursor:default}
.svp .svp-werkz2 button:disabled:hover{border-color:var(--ln);color:var(--mut)}
body.svp-nacht .svp .svp-werkz2 button{background:#1e1e1e;border-color:#333}
body.svp-nacht .svp .svp-werkz2 button:hover{border-color:#4a4a4a;color:#ececec}
/* 82. Runde (Nutzer): Tabs rechtsbuendig — ohne den Schichtplan-Tab ist die Reihe
   schmaler als die Werkzeug-Zeile darueber, ohne `end` bliebe rechts eine Luecke.
   ⚠️ 83. Runde (Nutzer): Suchfeld und Tabs teilen sich EINE Zelle (.svp-calhd__tr,
   Spalte 3) — vorher endete die Suche in der Mittelspalte und der column-gap des
   Kopf-Rasters klaffte sichtbar zwischen Feld und Tabs. */
/* ⚠️ 87. Runde: Suchfeld linksbuendig in Spalte 2, direkt unter den Gesichtern.
   ⚠️ z-index PFLICHT, kein Feinschliff: Die Gesichter-Box darueber ragt per negativem
   Rand 13 px in diese Zeile (Hover-Reserve, s. .svp-fahrerbox) — unsichtbar, aber sie
   fing die Klicks ab; die oberen ~9 px des Feldes waren dadurch tot (elementFromPoint
   landete dort auf .svp-fahrer statt im Eingabefeld). 6, weil .svp-fahrerbox selbst
   auf z-index 5 liegt. */
.svp-calhd > #svp-suche{grid-column:2;grid-row:2;justify-self:start;
  position:relative;z-index:6}
.svp-calhd > #svp-modes{grid-column:3;grid-row:2;justify-self:end}
/* ---- 55. Runde: linke Spalte = Schalter-Zeile UEBER den Gesichtern ----
   Links-Logik des Nutzers: "alles, was mit Mitarbeitern und Ansichten zu tun
   hat, auf der linken Seite" — Verwaltungs-Knopf + #svp-vopt linksbuendig,
   darunter die Gesichter-Reihe (dadurch ruecken die Fotos etwas nach unten). */
/* 56. Runde (Nutzer): "alles komprimierter, alles in einer Höhe" — Schalter und
   Gesichter stehen jetzt in EINER Zeile (Knopf · Optionen · Gesichter), mittig
   ausgerichtet. Der Kopf wird dadurch flacher und der Inhalt rueckt nach oben. */
/* 71. Runde: `flex-start` statt `center` — nur so rechnet der negative Rand der
   Gesichter-Box exakt und die Flucht mit Titel und Werkzeugen stimmt. */
.svp-calhd__lstack{display:flex;flex-direction:row;align-items:flex-start;gap:12px;
  min-width:0;flex:1 1 auto}
/* 60. Runde: Gesichter ganz nach links, Knoepfe dahinter. ⚠️ 61. Runde: die Knoepfe
   sind ganz nach RECHTS zum Zahnrad gewandert — links steht nur noch die Gesichter-Box,
   die Huelle .svp-calhd__lctl gibt es nicht mehr. */
/* ⚠️ 63. Runde (Nutzer): "genau im gleichen Design wie das Zahnrad-Symbol und das
   Export-Symbol" — also die Filter-Pille statt des grauen Kreises: weisser Grund,
   1 px Rand, 36 px hoch, dieselben Hover-Farben. Die Werte sind bewusst mit
   `.svp-filter summary` identisch gehalten; wer dort etwas aendert, aendert es hier mit.
   (#svp-schnell braucht keine eigene Regel mehr — es traegt seit der 63. Runde die
   Klasse `svp-filter` direkt im Markup.) */
.svp .svp-mitarbset{flex:none;height:36px;padding:0 13px;border:1px solid var(--ln);
  border-radius:999px;background:#fff;color:var(--mut);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.svp .svp-mitarbset svg{width:15px;height:15px;color:var(--faint)}
.svp .svp-mitarbset:hover{border-color:#cfd4de;color:var(--ink)}
.svp .svp-mitarbset:hover svg{color:var(--ink)}
body.svp-nacht .svp .svp-mitarbset{background:#1e1e1e;border-color:#333}
body.svp-nacht .svp .svp-mitarbset:hover{border-color:#4a4a4a;color:#ececec}
/* Gesichter in der linken Gruppe: linksbuendig ab der KW, schrumpfbar (min-width:0),
   ueberzaehlige scrollen im eigenen Streifen (s. .svp-fahrer-Basisregeln). */
/* Titelblock (9. Büro-Runde): RUECKGAENGIG/WIEDERHERSTELLEN klein ÜBER dem Monatstitel
   (das war mit "Vor/Zurueck" gemeint — nicht das Kalender-Blaettern). Ausgegraut =
   nichts vorhanden; Zustand zieht undoKnoepfe() nach. */
/* FESTE Breite (Nutzer, 11. Runde): "damit die Icons von den Mitarbeitern nicht nach
   rechts oder links verschieben, also schön statisch bleiben". Vorher war der Block
   inhaltsbreit — "Mo, 13. Juli" schob die Gesichter-Box weiter als "Juli". flex:0 0 auto
   + feste width ⇒ die Gesichter starten IMMER bei derselben x-Position, egal welche
   Ansicht oder welcher Monat gerade offen ist. */
/* 13. Runde: Breite von 300 auf **132 px** runter — der Nutzer wollte "so schmal wie
   möglich, sodass wirklich alles reinpasst", nachdem Jahr und KW unter den Monat
   gewandert sind. 132 px traegt den laengsten Fall ("Mo, 13. September" wird gekuerzt,
   alle Monatsnamen und "Jul – Aug" passen ganz).
   ⚠️ Die FESTE Breite bleibt der Kern (11. Runde): nur so starten die Mitarbeiter-
   Gesichter in jeder Ansicht an derselben x-Position. Nicht auf `auto` stellen. */
/* 69. Runde: Der Block fuellt die ganze Kopfhoehe. ⚠️ 71. Runde (Nutzer): Der Text darin
   steht wieder OBEN, nicht mittig — "Juli, das Datum und die Oberkante von den Icons …
   alles soll oben in einer Flucht sein". Mittig gesetzt begann "Juli" tiefer als die
   Gesichter daneben. */
/* ⚠️ 87. Runde (Nutzer): wieder ein STAPEL — Monat gross oben, darunter EINE kleine
   Zeile mit Jahr und Kalenderwoche. (Die mittige Einzeiler-Fassung der 85./86. Runde
   ist damit Geschichte.) Feste Breite wie vor der 85. Runde: sonst wuechse der Block
   mit dem Titel und schoebe die Mitarbeiter-Gesichter bei jedem Blaettern hin und her
   (Nutzer-Beschwerde der 11. Runde). 185 statt 120 px: nachgemessen braucht der
   laengste Monatsname ("September") bei 34 px genau 179 px — bei den zuerst
   gesetzten 150 px stand dort "Septemb…". */
.svp-titelblock{display:flex;flex-direction:column;gap:1px;align-items:flex-start;
  justify-content:flex-start;
  flex:0 0 185px;width:185px;min-width:185px;overflow:hidden}
/* 61. Runde: Undo/Redo unter den Titel. ⚠️ 66. Runde: ganz aus dem Titelblock RAUS,
   sie stehen jetzt oben rechts bei den uebrigen Werkzeugen. */
/* Jahr und Kalenderwoche als je EIGENE Zeile unter dem Monat.
   13. Runde (Nutzer): "das Jahr würde ich deutlich größer schreiben und in einer besseren
   Schriftart". 12 → 17 px, in der Display-Schnitt-Optik des Sheno-Designs (leichtes
   Gewicht + negative Laufweite, wie .saas-display-title im Anfrage-Tool) — dadurch liest
   es sich als Teil des Titels statt als Kleingedrucktes. Die KW bleibt klein: sie ist
   Beiwerk, nicht Ueberschrift. */
/* ⚠️ 66. Runde (Nutzer): "dann kann man dem Tag, Datum und Jahr mehr Höhe bieten,
   sodass es ein bisschen größer dargestellt wird" — der Platz der beiden Pfeile
   (22 px) ist frei geworden und geht an die Schrift: Jahr 17 → 21 px, KW 12 → 13,5 px,
   Monat 22 → 27 px (s. .svp-calhd h2). Die feste Blockbreite bleibt der Kern. */
/* 87. Runde: Jahr UND Kalenderwoche teilen sich diese eine Zeile unter dem Monat. */
.svp-titel__sub{display:flex;align-items:baseline;gap:7px;white-space:nowrap;
  line-height:1.2}
/* ⚠️ 87. Runde (Nutzer): "in einer kleineren Schrift" — Jahr 26 → 15 px. Es ist jetzt
   Unterzeile, nicht mehr zweite Ueberschrift; der Monat allein traegt den Kopf. */
.svp-titel__sub i{font-style:normal;font-size:15px;font-weight:600;color:var(--mut);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.svp-undo{display:flex;align-items:center;gap:2px}
.svp .svp-undo button{width:26px;height:22px;padding:0;border:0;border-radius:7px;
  display:flex;align-items:center;justify-content:center;background:transparent;
  color:var(--faint);cursor:pointer;transition:background .12s,color .12s,opacity .12s}
.svp .svp-undo button svg{width:14px;height:14px}
.svp .svp-undo button:hover:not(:disabled){background:var(--soft);color:var(--ink)}
.svp .svp-undo button:disabled{opacity:.3;cursor:default}
body.svp-nacht .svp .svp-undo button:hover:not(:disabled){background:#2a2a2a;color:#ececec}
/* Hülle um die Gesichter (7. Büro-Runde): gibt dem Hover-Zoom innen Luft statt ihn an
   der Scroll-Kante abzuschneiden. 8. Runde: RAHMENLOS (Nutzer) — keine Umrandung,
   kein eigener Grund; nur die Schatten der Gesichter selbst bleiben. */
/* Polster links auf 0 (12. Runde): jedes Pixel hier schiebt die Gesichter nach rechts. */
/* ⚠️ 14. Runde — der Versatz ist GERECHNET, nicht geschaetzt: Im Titelblock stehen ueber
   dem Monat die Undo-Pfeile (22 px hoch). Die Gesichter-Reihe hat oben 12 px Polster
   (Platz fuers Hover-Vergroessern). Damit die OBERKANTE des ersten Gesichts genau auf der
   Oberkante von "Juli" liegt, muss die Box tiefer ansetzen: 22 − 12 = 10 px, minus 2 px
   Ueberhang der Zeilenhoehe des h2 (nachgemessen) ⇒ **8 px**.
   Wer eine der beiden Zahlen aendert, muss diese hier nachziehen und NACHMESSEN. */
.svp-fahrerbox{background:transparent;border:0;border-radius:999px;
  /* 55. Runde: margin-top 8→0 — den Versatz nach unten uebernimmt jetzt die
     Schalter-Zeile darueber (der 14.-Runden-Rechenwert galt ohne diese Zeile). */
  padding:0 6px 0 0;display:flex;margin-top:0;
  /* 13. Runde: die Box durfte sich den freien Platz NEHMEN (`flex:1 1 auto`), damit auf
     breiten Fenstern mehr Gesichter sichtbar werden.
     ⚠️ 60. Runde: wieder `0 1 auto`. Seit die Gesichter GANZ LINKS stehen und die beiden
     Knoepfe DAHINTER kommen, haette eine wachsende Box die Knoepfe ans andere Ende des
     Kopfes geschoben. Ohne Wachstum ist die Box so breit wie ihre Gesichter — die
     Knoepfe sitzen direkt dahinter, und sichtbar sind trotzdem alle Gesichter, die
     hineinpassen (schrumpfen + innen scrollen bleibt unveraendert). */
  flex:0 1 auto;min-width:132px;
  /* ⚠️ 64./70. Runde (Nutzer): "die Oberkante von den Icons soll mit der Oberkante von
     den rechten Icons auf einer Flucht sein". Sie lag 16 px tiefer — nicht wegen der
     Ausrichtung, sondern weil die Gesichter-REIHE oben 14 px Polster braucht (Klemm-
     schutz fuer den Hover-Zoom, s. unten) plus 2 px Knopf-Polster. Das Polster darf
     nicht weg, also wandert die Box um genau diesen Betrag nach oben.
     ⚠️ `margin-top` statt `top`: Seit Zeile 1 OBEN ausrichtet (70. Runde), verschiebt der
     negative Rand exakt und nimmt die 16 px auch aus der LAYOUT-Hoehe — mit `position:
     relative` blieben sie als tote Luft unter den Gesichtern stehen und der Kopf war
     16 px hoeher als noetig. (Bei `align-items:center`, wie bis zur 69. Runde, waere das
     falsch gewesen: dort haette der Rand die Box nur zur Haelfte verschoben.)
     ⚠️ Wer das Reihen-Polster oder die Ringgroesse aendert, muss diese 13 px NACHMESSEN
     (= Reihen-Polster 11 + Knopf-Polster 2).
     ⚠️ 71. Runde: derselbe Rand auch UNTEN. Das untere Polster ist reine Hover-Reserve
     und stand als tote Luft zwischen den Gesichtern und der Tab-Zeile — der Nutzer wollte
     "weiterkomprimieren". Die Box beansprucht im Layout jetzt nur noch ihre sichtbaren
     54 px; der vergroesserte Kreis ragt beim Drueberfahren in die Zeile darunter, liegt
     dank `z-index` aber DARUEBER statt dahinter. */
  margin-top:-13px;margin-bottom:-13px;
  /* ⚠️ 75. Runde (Nutzer): dasselbe Spiel WAAGERECHT. Das erste Gesicht sass 10 px
     weiter rechts als der „Heute"-Knopf in der Zeile darunter — 8 px Polster der
     Gesichter-Reihe (Klemmschutz fuer den Hover nach links) + 2 px Knopf-Polster.
     Beide werden gebraucht, also wandert die BOX um genau diesen Betrag nach links;
     sichtbar beginnt die Reihe dadurch exakt an der Spaltenkante.
     ⚠️ Wer Reihen- oder Knopf-Polster aendert, muss diese 10 px NACHMESSEN. */
  margin-left:-10px;
  position:relative;z-index:5}
.svp-calhd__lstack .svp-fahrer{justify-content:flex-start}
/* Weicher Fade an BEIDEN Enden des Streifens (Nutzer: "dahinter verschwinden"):
   per mask — die Gesichter tauchen beim Scrollen aus dem Nichts auf. */
/* 12. Runde (Nutzer): "platziere die Icons so weit links wie möglich, sodass wir nicht
   viel Platz verlieren". Der Fade lief vorher auch LINKS ueber 16 px und das Polster
   war beidseitig 10 px — zusammen ~26 px, in denen das erste Gesicht blass anfing.
   Jetzt: links kein Fade und nur 2 px Polster (das Gesicht beginnt praktisch am Rand),
   rechts bleibt der Fade — dort verschwinden die ueberzaehligen im Nichts. */
/* ---- Rand-Fade der Gesichter-Reihe (15. Runde, Nutzer) ----
   "Das soll so ein kleiner cooler Fade sein, in Weiß, sodass sie quasi hinter so einer
   Wolke verschwinden — links und rechts ebenso."
   Umgesetzt per `mask`: die Reihe wird an der Kante durchsichtig, darunter liegt die
   weisse Karte ⇒ die Gesichter loesen sich auf, statt an einer harten Kante abgeschnitten
   zu werden (14. Runde war der Fade ganz weg, dadurch der "weisse Balken").
   ⚠️ Die Seiten schalten EINZELN (`is-fade-l` / `is-fade-r`, gesetzt von fahrerFade):
   ein Fade an einem Ende, hinter dem gar nichts mehr liegt, laesst ein Gesicht ohne
   Grund verblassen — genau die Beschwerde aus der 14. Runde. */
.svp-calhd__lstack .svp-fahrer.is-fade-l:not(.is-fade-r){
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 22px);
  mask-image:linear-gradient(to right, transparent 0, #000 22px)}
.svp-calhd__lstack .svp-fahrer.is-fade-r:not(.is-fade-l){
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent 100%)}
.svp-calhd__lstack .svp-fahrer.is-fade-l.is-fade-r{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 22px,
    #000 calc(100% - 22px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 22px,
    #000 calc(100% - 22px), transparent 100%)}
.svp-calhd__lstack .svp-fahrer{
  /* ⚠️ Polster RINGSUM ist Pflicht (13./14. Runde): `overflow-x:auto` klemmt in BEIDE
     Richtungen ab. Das Gesicht waechst beim Hover auf 46 × 1,45 ≈ 66,7 px — ohne Luft
     schnitte die Reihe den Kreis oben, unten UND an den Enden glatt ab. Wer den
     Hover-Faktor oder die Ringgroesse erhoeht, muss dieses Polster mitziehen
     (72. Runde: 14 → 11 px, weil der Ring auf 46 px geschrumpft ist — 10,35 je Seite
     werden gebraucht). */
  padding:11px 12px 11px 8px}
/* Rueckgaengig / Wiederherstellen */
/* .svp-undo-Kopfknoepfe: seit der 8. Büro-Runde entfernt (nur noch Strg+Z/Y). */
/* nowrap: der Titel darf nie zweizeilig werden — er ist Teil der festen Kopfhoehe. */
/* 85. Runde: 27 → 34 px (Nutzer: "irgendwie so mit einer größeren Schrift").
   ⚠️ 87. Runde: `line-height:1` — der Nutzer will die Monatsangabe "oben perfekt
   buendig" mit den Icons rechts. Bei der Standard-Zeilenhoehe (1.2) sass ueber den
   Grossbuchstaben rund 7 px Luft, das Wort begann sichtbar tiefer als die Knopfreihe,
   obwohl die KAESTEN exakt auf einer Linie lagen. */
.svp-calhd h2{margin:0;font-size:34px;font-weight:800;letter-spacing:-.02em;
  line-height:1;white-space:nowrap;
  /* Notbremse fuer die feste 300-px-Breite: der laengste Fall ist die Tages-Ansicht
     ("Mi, 24. September"). Passt er nicht, wird gekuerzt statt den Block zu sprengen. */
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* "‹ Heute ›" (.svp-calnav) ist RAUS (Nutzer, Büro-Session) — stattdessen die KW. */
/* Seit der 11. Runde KEINE Pille mehr (Rahmen/Polster raus) — die KW steht als
   kleine Beschriftung neben dem Jahr im Titelblock. */
.svp-kw{font-size:13.5px;font-weight:700;color:var(--mut);letter-spacing:.02em;
  white-space:nowrap;font-variant-numeric:tabular-nums;
  /* inline-block, damit das transform der Blitz-Animation ueberhaupt greift. */
  display:inline-block}
body.svp-nacht .svp-kw{color:#9a9a9a}
/* Roter Blitz beim Wochenwechsel. ⚠️ 61. Runde (Nutzer): EINMAL aufleuchten, NICHT
   pulsieren — der Doppelschlag der 60. Runde ist raus. Ein Anschlag in Rot, dann
   ruhig zurueck in die normale Farbe. */
@keyframes svp-kwblitz{
  0%  {color:#e8453c;transform:scale(1.14)}
  55% {color:#e8453c;transform:scale(1.03)}
  100%{color:var(--mut);transform:scale(1)}
}
.svp-kw.is-blitz{animation:svp-kwblitz .42s ease-out}
body.svp-nacht .svp-kw.is-blitz{animation-name:svp-kwblitz-n}
@keyframes svp-kwblitz-n{
  0%  {color:#ff6b60;transform:scale(1.14)}
  55% {color:#ff6b60;transform:scale(1.03)}
  100%{color:#9a9a9a;transform:scale(1)}
}
/* Wer Bewegung abgestellt hat, bekommt den Wechsel ohne Zappeln. */
@media (prefers-reduced-motion: reduce){
  .svp-kw.is-blitz{animation-duration:.01s}
}
/* Rechte Gruppe: klebt ganz rechts und behaelt ihre Breite — schrumpfen tut links
   die Gesichter-Box, nicht die Schalter (10. Büro-Runde: feste Kopfhoehe).
   70./71. Runde: oben buendig mit den Gesichtern (s. Raster oben). `align-items:center`
   bleibt fuer die Knoepfe UNTEREINANDER — die sind unterschiedlich hoch (Undo 22 px,
   Pillen 36) und sollen weiter auf einer Mittellinie sitzen. */
.svp-calhd__r{display:flex;align-items:center;gap:10px;flex:none;
  align-self:flex-start;justify-content:flex-end;margin-left:auto}
/* ---- Werkzeugreihe oben rechts ----
   14.–17. Runde: Sie stand lange ZWEIZEILIG mit `flex-wrap` und einer max-width von
   460 px; die Ansichts-Tabs lagen als zweite Zeile darin.
   ⚠️ 69. Runde (Nutzer): Die zweite Zeile ist eine Ebene HOEHER gewandert
   (.svp-calhd__z2, volle Restbreite) — sonst passten Suchfeld (320 px) und Tabs
   (323 px) nicht nebeneinander und das Suchfeld brach in eine dritte Zeile um.
   Hier bleibt damit nur noch EINE Reihe: Undo · Stammdaten · Ansicht · Export · Zahnrad.
   Kein flex-wrap, keine max-width, kein Pseudo-Umbruch mehr. */
.svp-calhd__r--stapel{flex-wrap:nowrap;justify-content:flex-end;gap:8px}
.svp-calhd__r--stapel > .svp-undo{order:0;margin-right:2px}
/* 81. Runde (Nutzer): Welt-Switch direkt LINKS neben dem Mitarbeiter-Knopf. */
.svp-calhd__r--stapel > #svp-dart{order:1}
.svp-calhd__r--stapel > #svp-mitarb-set{order:2}
.svp-calhd__r--stapel > #svp-schnell{order:3}
.svp-calhd__r--stapel > #svp-exportmenu{order:4}
.svp-calhd__r--stapel > #svp-set{order:5}
.svp-calhd__r--stapel > #svp-exportmenu,
.svp-calhd__r--stapel > #svp-set{flex:none}
/* Zeile 2: Tabs rechtsbuendig, das Suchfeld mittig darunter (s. Grid-Zuweisung oben). */
.svp-calhd > #svp-modes{flex:none}

/* Export-Menü (2. Büro-Runde): Pille wie der Filter, darunter zwei Einträge PDF/CSV. */
.svp-exportmenu summary svg{width:14px;height:14px;color:var(--faint)}
/* Nur fuer Screenreader sichtbar — der Knopf zeigt seit der 15. Runde nur das Symbol,
   die Beschriftung muss trotzdem vorlesbar bleiben. */
.svp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.svp-export__pop{width:238px;padding:6px}
.svp .svp-export__pop button{width:100%;display:flex;flex-direction:column;align-items:flex-start;
  gap:1px;padding:9px 11px;border:0;border-radius:9px;background:transparent;cursor:pointer;
  font:inherit;text-align:left}
.svp .svp-export__pop button:hover{background:var(--soft)}
.svp .svp-export__pop button b{font-size:13px;font-weight:800;color:var(--ink)}
.svp .svp-export__pop button span{font-size:11px;font-weight:600;color:var(--mut)}
body.svp-nacht .svp .svp-export__pop button:hover{background:#2a2a2a}
body.svp-nacht .svp .svp-export__pop button b{color:#ececec}

/* ---------- Kolonnen-Filter ---------- */
.svp-filter{position:relative}
.svp-filter summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  height:36px;padding:0 13px;border:1px solid var(--ln);border-radius:999px;background:#fff;
  font-size:13px;font-weight:700;color:var(--mut);white-space:nowrap}
.svp-filter summary::-webkit-details-marker{display:none}
.svp-filter summary:hover{border-color:#cfd4de;color:var(--ink)}
.svp-filter[open] summary{border-color:var(--o);color:var(--ink)}
.svp-filter summary svg{width:15px;height:15px;color:var(--faint)}
.svp-filter summary b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
/* Zeigt an, dass gerade NICHT alles sichtbar ist — sonst sucht man Auftraege, die der
   Filter versteckt. Der haeufigste Denkfehler bei Filtern. */
.svp-filter.is-aktiv summary{border-color:var(--o);background:var(--o-soft,#fff6ef);color:var(--o-ink,#8a4b12)}
.svp-filter.is-aktiv summary b{color:inherit}
/* Das Panel darf nie laenger werden als das Fenster (Nutzer 19.07.): mit vielen Fahrern
   rutschte der Knopf "+ Fahrer hinzufuegen" unten aus dem Bild und war nicht mehr
   erreichbar. Jetzt scrollt notfalls das ganze Panel. */
.svp-filter__pop{position:absolute;right:0;top:42px;z-index:20;width:238px;background:#fff;
  border:1px solid var(--ln);border-radius:var(--r-md);padding:7px;
  box-shadow:0 12px 32px rgba(27,42,74,.16);
  overflow-y:auto;overscroll-behavior:contain}
.svp-filter__row{display:flex;align-items:center;gap:9px;width:100%;padding:8px;border-radius:9px;
  cursor:pointer;font-size:13px;text-align:left;transition:background .12s}
.svp-filter__row:hover{background:var(--soft)}
.svp-filter__box{width:17px;height:17px;border-radius:5px;border:1.5px solid #c8cdd6;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800}
.svp .svp-filter__row.is-on .svp-filter__box{background:var(--o);border-color:var(--o)}
.svp-filter__t{flex:1;line-height:1.25}
.svp-filter__t b{display:block;font-size:12.5px;font-weight:700}
.svp-filter__t em{font-style:normal;font-size:11px;color:var(--faint)}
.svp-filter__n{font-size:11px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}
.svp-filter__sep{height:1px;background:var(--ln);margin:6px 4px}
.svp-filter__all{display:flex;gap:6px;padding:2px 4px 4px}
.svp .svp-filter__all button{flex:1;padding:7px;border-radius:8px;background:var(--soft);
  font-size:12px;font-weight:700;color:var(--mut)}
.svp .svp-filter__all button:hover{background:var(--grau-soft);color:var(--ink)}

/* ---------- Hell/Dunkel-Switch (Mond links · Sonne rechts) ---------- */
.svp-tagnacht{display:flex;gap:2px;background:var(--soft);border-radius:999px;padding:3px}
.svp .svp-tagnacht button{width:28px;height:28px;border-radius:50%;color:var(--faint);
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.svp .svp-tagnacht button.is-on{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(27,42,74,.14)}
.svp .svp-tagnacht svg{width:15px;height:15px}

/* ---------- Einstellungen ---------- */
/* ⚠️ 63. Runde: Diese drei Zeilen sind die MASSVORLAGE fuer alle reinen Symbol-Pillen
   im Kopf (Stammdaten · Ansicht · Export · Zahnrad) — der Nutzer wollte sie "genau im
   gleichen Design". Wer hier 36 px oder 17 px aendert, muss die Sammelregel weiter
   unten (.svp-mitarbset, #svp-schnell, #svp-exportmenu) mitziehen. */
.svp-set summary{padding:0;width:36px;justify-content:center}
.svp-set summary svg{width:17px;height:17px}
/* Dieselbe Vorlage fuer die drei anderen — Export war 14 px, Stammdaten/Ansicht 15 px
   mit 13 px Polster und damit 7 px breiter als das Zahnrad. */
.svp .svp-mitarbset,
.svp-schnell summary,
.svp-exportmenu summary{padding:0;width:36px;justify-content:center}
.svp .svp-mitarbset svg,
.svp-schnell summary svg,
.svp-exportmenu summary svg{width:17px;height:17px}
.svp-set__pop{width:272px}
/* Minimalistischer (Nutzer 17.07. spaet): Ueberschrift leichter statt fett,
   Schieber als feine graue Linie mit weissem Griff statt orange/dunkel. */
.svp-set__h{margin:2px 0 8px;padding:0 4px;font-size:11px;font-weight:600;
  letter-spacing:.7px;text-transform:uppercase;color:var(--faint)}
.svp-set__row{display:flex;align-items:center;gap:10px;padding:0 4px}
.svp-set__row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;
  height:4px;border-radius:999px;background:var(--grau-soft);outline:none}
.svp-set__row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid #c8cdd6;
  box-shadow:0 1px 3px rgba(27,42,74,.22);cursor:pointer}
.svp-set__row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:#fff;border:1px solid #c8cdd6;box-shadow:0 1px 3px rgba(27,42,74,.22);cursor:pointer}
.svp-set__row b{font-size:12.5px;font-weight:600;min-width:52px;text-align:right;
  font-variant-numeric:tabular-nums}
/* Als BUTTON erkennbar (Nutzer 17.07. spaet): Rand + weisse Flaeche statt grauem Chip. */
.svp .svp-set__auto{padding:5px 12px;border-radius:8px;background:#fff;
  border:1px solid #c8cdd6;font-size:11px;font-weight:700;color:var(--ink);
  transition:border-color .15s,background .15s}
.svp .svp-set__auto:hover{border-color:var(--ink);background:var(--soft)}
.svp-set__hint{margin:8px 4px 2px;font-size:11px;line-height:1.45;color:var(--faint)}
.svp .svp-set__monatmodi{display:flex;gap:4px}
.svp .svp-set__monatmodi button{flex:1;padding:6px 2px;border-radius:8px;background:#fff;
  border:1px solid #c8cdd6;font-size:11px;font-weight:700;color:var(--mut);
  transition:border-color .15s,color .15s,background .15s}
.svp .svp-set__monatmodi button.is-on{border-color:var(--ink);color:var(--ink);
  background:var(--soft)}
.svp .svp-set__zeit select{width:auto;flex:1;min-width:0}
/* Scrollbare Fahrer-/Positionsliste im Panel (Nutzer 19.07.). */
.svp-set__liste{max-height:222px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;padding-right:2px}
.svp-set__liste::-webkit-scrollbar{width:6px}
.svp-set__liste::-webkit-scrollbar-thumb{background:#d3d7de;border-radius:99px}
.svp-set__liste::-webkit-scrollbar-track{background:transparent}
body.svp-nacht .svp-set__liste::-webkit-scrollbar-thumb{background:#3d3d3d}
.svp-set__farbe{display:flex;align-items:center;gap:9px;padding:5px 4px}
.svp-set__farbe .svp-ring{width:26px;height:26px}
/* ⚠️ NUR der Name bekommt flex:1 — die fruehere Regel `.svp-set__farbe span`
   traf auch den Gesichts-Ring (ebenfalls ein span): flex:1 setzt die Basis
   auf 0 und laesst wachsen, die width:26px wurde ignoriert → die Gesichter
   waren 103x26-Ellipsen (Nutzer-Fund 18.07., "nur die Augen zu sehen"). */
.svp-set__farbe .svp-set__name{flex:1;font-size:12.5px;font-weight:700}
/* RUND und minimalistisch (Nutzer 17.07. spaet) — nur der Farbkreis, kein Kasten. */
.svp-set__farbe input[type=color]{width:26px;height:26px;padding:0;border:1px solid var(--ln);
  border-radius:50%;background:none;cursor:pointer;overflow:hidden}
/* ---- 13. Runde (Nutzer): EIN Hover-Prinzip fuer ALLE Farbkreise ----
   "wenn man über die Farbe geht, dass es aufploppt oder größer wird — dabei merkt man:
   das kann man anklicken. Das kannst du wirklich bei allen machen."
   Deshalb bewusst ein SAMMEL-Selektor: jeder runde Farbwaehler im Kalender, egal ob
   Mitarbeiter, Position oder Gruppe, wird beim Drueberfahren groesser und wirft
   einen weichen Ring. Neue Farbfelder erben das automatisch. */
.svp input[type=color]{transition:transform .15s cubic-bezier(.2,.7,.3,1),box-shadow .15s}
.svp input[type=color]:hover{transform:scale(1.28);
  box-shadow:0 3px 10px rgba(27,42,74,.22)}
.svp input[type=color]:active{transform:scale(1.12)}
body.svp-nacht .svp input[type=color]:hover{box-shadow:0 3px 10px rgba(0,0,0,.55)}
.svp-set__farbe input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.svp-set__farbe input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.svp-set__farbe input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
/* Name editierbar (18.07., Einstell-Panel): unauffaellig bis Hover/Fokus, damit die Liste
   ruhig bleibt, aber klar umbenennbar ist. */
.svp .svp-set__farbe input.svp-set__name{flex:1;min-width:0;font-size:12.5px;font-weight:700;
  color:var(--ink);background:transparent;border:1px solid transparent;border-radius:7px;
  padding:4px 6px;transition:border-color .15s,background .15s}
.svp .svp-set__farbe input.svp-set__name:hover{border-color:var(--ln)}
.svp .svp-set__farbe input.svp-set__name:focus{outline:none;border-color:var(--ink);
  background:var(--soft)}
/* Entfernen-Knopf je Zeile — dezent, wird erst beim Hover rot. */
.svp .svp-set__del{flex:none;width:24px;height:24px;border-radius:50%;background:none;
  border:1px solid transparent;color:var(--faint);font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s,background .15s}
.svp .svp-set__del:hover{color:var(--rot);border-color:var(--rot-soft);background:var(--rot-soft)}
/* Hinzufuegen-Knopf: gestrichelt = "leere Spur anlegen". */
.svp .svp-set__add{display:block;margin:8px 4px 0;padding:8px 12px;width:calc(100% - 8px);
  border-radius:9px;background:#fff;border:1px dashed #c3c8d2;color:var(--mut);font-size:12px;
  font-weight:700;cursor:pointer;text-align:center;
  transition:border-color .15s,color .15s,background .15s}
.svp .svp-set__add:hover{border-color:var(--ink);color:var(--ink);background:var(--soft)}
.svp .svp-set__add span{font-weight:800;font-size:14px;margin-right:2px}
body.svp-nacht .svp .svp-set__add{background:#2a2a2a;border-color:#3a3a3a}

/* ---- Suchfeld im Kopf (67. Runde, Nutzer) ----
   "In dem gleichen Design, in diesem gleichen runden Design" wie die Ansichts-Tabs:
   derselbe graue Trog, dieselbe Hoehe, dieselbe Rundung. Zugeklappt ist es nur die
   Lupe und kostet damit fast keine Breite — die gehoert den Gesichtern (10. Büro-Runde).
   ⚠️ Die Hoehe muss zu .svp-modes passen (Trog 3 px Polster + 38 px Pille): wer dort
   etwas aendert, misst hier nach. */
/* ⚠️ 68. Runde: dauerhaft offenes Feld statt Lupe zum Aufklappen. Breite 320 px
   (Nutzer: "ungefähr 400 Pixel, 300 Pixel"), schrumpfbar bis 180 px, damit auf schmalen
   Fenstern die Gesichter nicht gequetscht werden. Hoehe bleibt 38 px = .svp-modes. */
/* ⚠️ 71. Runde: `flex:none` statt `0 1 320px`. Seit die Gesichter in derselben Zeile
   um den Platz konkurrieren, schrumpfte das Feld sonst auf ~200 px zusammen — die
   Gesichter geben nach (sie scrollen ohnehin innen), das Suchfeld behaelt seine Breite. */
.svp-suche{position:relative;display:flex;align-items:center;
  flex:none;width:320px;
  background:var(--soft);border-radius:999px;padding:0 6px 0 10px;height:38px;
  box-sizing:border-box;transition:background .12s,box-shadow .12s}
.svp-suche:focus-within{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ln)}
.svp-suche__lupe{display:flex;align-items:center;justify-content:center;flex:none;
  color:var(--faint)}
.svp-suche__lupe svg{width:16px;height:16px}
.svp-suche input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);padding:0 8px}
.svp-suche input::placeholder{color:var(--faint);font-weight:500}
/* Das ✕ erscheint erst, wenn etwas drinsteht — sonst waere es ein toter Knopf. */
.svp .svp-suche__x{display:flex;width:24px;height:24px;border:0;flex:none;
  border-radius:999px;background:transparent;color:var(--mut);cursor:pointer;
  align-items:center;justify-content:center;font-size:12px;line-height:1;padding:0}
.svp .svp-suche__x:hover{background:#fff;color:var(--ink)}
/* Trefferliste: haengt unter dem Feld, rechtsbuendig wie die uebrigen Aufklapper. */
/* 84. Runde: Breite an das FELD gekoppelt (war fest 320 px und stand nach der
   Verbreiterung schmaler als das Feld darueber). */
.svp-suche__pop{position:absolute;right:0;top:44px;z-index:40;width:100%;min-width:280px;
  background:#fff;border:1px solid var(--ln);border-radius:var(--r-md);padding:6px;
  box-shadow:0 12px 32px rgba(27,42,74,.16);max-height:340px;overflow-y:auto}
.svp .svp-suche__tr{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;
  border:0;border-radius:9px;background:transparent;cursor:pointer;font:inherit;
  text-align:left;transition:background .12s}
.svp .svp-suche__tr:hover{background:var(--soft)}
.svp-suche__pkt{width:9px;height:9px;border-radius:50%;flex:none}
.svp .svp-suche__tr > span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.svp .svp-suche__tr b{font-size:12.5px;font-weight:800;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svp .svp-suche__tr em{font-style:normal;font-size:11px;color:var(--mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svp-suche__leer{margin:0;padding:10px 8px;font-size:12px;color:var(--faint)}
body.svp-nacht .svp-suche{background:#242424}
body.svp-nacht .svp-suche.is-auf{background:#1e1e1e;box-shadow:inset 0 0 0 1.5px #333}
body.svp-nacht .svp-suche.is-auf input{color:#ececec}
body.svp-nacht .svp-suche__pop{background:#1e1e1e;border-color:#333}
body.svp-nacht .svp .svp-suche__tr:hover{background:#2a2a2a}
body.svp-nacht .svp .svp-suche__tr b{color:#ececec}

/* ---- Gruppenbild in der Verwaltung (67. Runde) ---- */
.svp .svp-verw__grpbild{border:0;background:transparent;padding:0;cursor:pointer;
  flex:none;border-radius:50%;transition:transform .12s}
.svp .svp-verw__grpbild:hover{transform:scale(1.08)}
.svp-verw__grpbild .svp-ring{width:34px;height:34px;font-size:12px;border:2px solid var(--ln)}
.svp .svp-verw__grpbildweg{border:0;background:transparent;color:var(--faint);
  cursor:pointer;font-size:11px;line-height:1;padding:2px 3px;border-radius:6px;flex:none;
  margin-left:-4px;align-self:flex-start}
.svp .svp-verw__grpbildweg:hover{background:var(--soft);color:var(--ink)}
/* Die Dateiauswahl selbst bleibt unsichtbar — geklickt wird das Bild darueber. */
.svp-sr-datei{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* Gruppen-Kachel MIT eigenem Bild: so schmal wie ein Personen-Knopf, kein Stapel-Polster. */
.svp .svp-fahrer__grp--bild{padding:0;border-width:2px}
.svp .svp-fahrer__grp--bild .svp-ring{margin:0;border:0}
/* Ring einer Gruppe im Plan (Schichtkarten, Schicht-Fenster): traegt ihre Farbe als Rand. */
.svp-ring--grp{border-width:2px;border-style:solid}

.svp-modes--farbe button{font-size:12px;padding:7px 12px}
.svp-modes{display:flex;gap:2px;background:var(--soft);border-radius:999px;padding:3px}
.svp-modes button{padding:7px 16px;border-radius:999px;font-size:13px;font-weight:700;color:var(--mut);
  transition:background .15s,color .15s}
.svp-modes button.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(27,42,74,.1)}

/* ---------- Die Tafel: ein Grid, sticky Kopf + sticky Achse ---------- */
/* ⚠️ KEIN max-height mehr (war 620px). Das war der Grund fuer den eigenen Scrollbalken
   im Kalender — er sah aus wie ein Fenster im Fenster, und die Legende klebte in der
   Mitte der Seite statt unten (Nutzer 17.07.).
   overflow:auto bleibt fuer die WAAGRECHTE Richtung noetig (feste Tagesbreite ⇒ breite
   Wochen). Senkrecht entsteht dadurch kein Balken, weil die Hoehe jetzt dem Inhalt folgt:
   kein Ueberlauf, kein Balken. Die Seite scrollt. */
.svp-scroll{overflow:auto;border:1px solid var(--ln);border-radius:var(--r-md);
  background:#fff}
/* Der WAAGRECHTE Scrollbalken ist versteckt (18.07., Nutzer: "Zeitachse verschwindet
   beim Hin- und Her-Scrollen"): Ziehen am Balken kaempft gegen das Puffer-Fenster —
   jede Randnaehe baut die Tafel um und setzt scrollLeft zurueck, waehrend die Maus
   den Daumen festhaelt. Ergebnis: Dauerumbauten, scheinbar leere Tage, Achse "weg".
   Seitlich bewegt man sich per MAUSRAD (ein Tag je Rastung), Pfeilen oder Touchpad —
   der Balken war nie Teil des Konzepts. Senkrecht scrollt es normal weiter.
   (Chrome-Pseudo reicht: das Mockup laeuft in Chrome; scrollbar-width:none wuerde
   in Firefox auch den senkrechten Balken mitreissen.)
   ⚠️ height:0 statt :horizontal{display:none} — das :horizontal-Pseudo griff in
   Chrome schlicht nicht (gemessen 18.07.). Und weil JEDE ::-webkit-scrollbar-Regel
   den senkrechten Balken mit auf Eigenbau umstellt, bekommt der hier gleich einen
   sichtbaren Daumen — sonst waere er ein unsichtbarer weisser Streifen. */
#svp-scroll::-webkit-scrollbar{height:0;width:10px}
#svp-scroll::-webkit-scrollbar-thumb{background:#c8cdd6;border-radius:999px}
#svp-scroll::-webkit-scrollbar-track{background:transparent}
/* Kein width:max-content — sonst koennen die Spalten nicht wachsen, wenn Platz da ist
   (Tagesansicht mit 3 Kolonnen liesse sonst die halbe Karte leer). Die Spalten sind
   minmax(min,1fr): passt alles rein, strecken sie sich; passt es nicht, halten sie ihr
   Minimum und der Container scrollt seitlich. */
/* ⚠️ padding-bottom ist kein Kosmetik-Wert: das letzte Achsen-Label ("20:00") ist mit
   translateY(-50%) auf seine Linie zentriert und ragt dadurch ~7px unter das Raster.
   Diese 7px allein lieferten einen senkrechten Scrollbalken — und weil die Woche breiter
   als das Fenster ist, frass der waagrechte Balken nochmal 17px Hoehe und verstaerkte es.
   Ergebnis war ein Kalender, der ohne Grund in sich scrollte. */
.svp-tafel{display:grid;grid-auto-rows:auto;position:relative;min-width:100%;
  padding-bottom:10px}
/* ⚠️ WOCHE braucht width:max-content (18.07., Nutzer-Bugfund "Zeitachse verschwindet
   beim Scrollen"): ohne das bleibt die Tafel-BOX fensterbreit und nur ihre Grid-SPUREN
   laufen ueber (Puffer-Fenster = 21 x 160px). position:sticky darf ein Element aber
   nur innerhalb seiner Box verschieben — die Achse klebte also exakt bis
   Fensterbreite minus Achsbreite (gemessen: 616px) und wanderte dann mit ab.
   NUR fuer die Woche: in der Tag-Ansicht sind die Spalten minmax(...,1fr) und sollen
   die Karte fuellen — mit max-content wuerden sie auf ihr Minimum fallen (genau der
   Grund, warum hier frueher pauschal KEIN max-content stand). Das JS setzt die
   Klasse je Ansicht. */
.svp .svp-tafel--breit{width:max-content}
.svp-corner{position:sticky;top:0;left:0;z-index:12;background:#fff;
  border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);
  grid-column:1;grid-row:1}
.svp-axis{position:sticky;left:0;z-index:8;background:#fff;grid-column:1;grid-row:2;
  border-right:1px solid var(--ln)}
.svp-axis__h{position:absolute;right:8px;transform:translateY(-50%);
  font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap}

/* Tages-Pill im sticky Kopf.
   ⚠️ Die Pills sind <button>. `.svp button{background:transparent}` (0-1-1) schlaegt eine
   nackte Klasse (0-1-0) — deshalb hier und bei .svp-mday der `.svp `-Prefix. Ohne ihn
   sind die sticky Pills durchsichtig und die Bloecke scrollen sichtbar dahinter durch. */
.svp .svp-pill{position:sticky;top:0;z-index:9;background:#fff;grid-row:1;
  border-bottom:1px solid var(--ln);border-left:1px solid var(--ln);
  padding:9px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;transition:background .15s}
.svp .svp-pill:hover{background:var(--soft)}
/* Foto-Vorlage: grosse Zahl, Wochentag klein+grau darunter, HEUTE in Rot. */
.svp-pill b{font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.svp-pill em{font-style:normal;font-size:11px;font-weight:600;color:var(--faint)}
.svp-pill.is-today b,.svp-pill.is-today em{color:var(--heute)}
/* Auswahl bewusst LEISE (helles Grau statt dunkelblauer Vollflaeche, Foto-Vorlage).
   ⚠️ Der Grund ist nicht nur Optik: der heutige Tag ist meistens AUCH der ausgewaehlte.
   Die alte dunkle is-sel-Flaeche faerbte Zahl und Wochentag weiss und hat damit das
   rote "heute" komplett aufgefressen — heute war nie rot zu sehen. Deshalb darf die
   Auswahl die Textfarbe nicht mehr anfassen. */
.svp .svp-pill.is-sel{background:#f6f7f8}
.svp-pill.is-sel b{color:var(--ink)}
.svp-pill.is-sel em{color:var(--mut)}
.svp .svp-pill.is-today.is-sel b,.svp .svp-pill.is-today.is-sel em{color:var(--heute)}
.svp-pill__n{font-size:10.5px;color:var(--faint);font-weight:700}
/* Spur-Koepfe: gleiche Aufteilung wie die Bloecke darunter, damit die Zuordnung
   Kolonne → Spur ohne Raten lesbar ist. */
/* Spur-Koepfe als Gesichter. Das Raster ist dasselbe wie bei den Bloecken darunter —
   jede Zelle zentriert ihren Kreis, damit die Zuordnung Gesicht → Spur ohne Raten sitzt. */
/* ⚠️ Muss die VOLLE Spaltenbreite haben, sonst driftet es.
   Die Bloecke darunter teilen die Spalte in reinem Prozent (left: spur*100/n %). Die
   Pille hat aber 8px Innenabstand links/rechts — ein Raster mit width:100% waere also
   16px schmaler als die Spalte, und die Gesichter saessen neben ihrer Spur (gemessen:
   4–6px daneben). Deshalb der negative Rand: er hebt das Padding exakt auf.
   Bleibt nur richtig, solange .svp-pill horizontal 8px Padding hat. */
.svp-pill__kols{display:grid;gap:0;margin:5px -8px 0;width:calc(100% + 16px);padding:0}
.svp-pill__kolzelle{display:flex;justify-content:center;align-items:center;min-width:0}
/* Gross genug, dass sich die Koepfe beruehren (Nutzer 17.07.).
   width:100% + gap:0 heisst: der Kreis ist so breit wie SEINE SPUR — bei 150px Tag und
   3 Kolonnen also 50px, und die Nachbarn stossen genau aneinander. Das rechnet das Raster
   selbst, also stimmt es auch, wenn der Breiten-Regler bewegt wird. max-width verhindert
   nur den Unfall, dass EINE Kolonne auf einem 320px-Tag einen 320px-Kopf bekommt. */
.svp-pill__kol{position:relative;overflow:hidden;width:100%;aspect-ratio:1;max-width:60px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:13px;font-weight:800;
  background:var(--soft);border:2px solid #fff;color:var(--mut);
  box-shadow:0 1px 4px rgba(27,42,74,.18)}

/* Foto-Vorlage: die Rasterflaeche ist NICHT gekachelt — durchgehend weiss, nur der
   heutige Tag bekommt eine leichte graue Spalte. Wochenende und Vergangenheit hatten
   vorher eigene Toene (#fcfcfd / #fafafb); das war die "Kachelung", die stoerte. */
.svp-col__day{position:relative;border-left:1px solid var(--ln);grid-row:2;background:#fff}
/* Heute-Spalte bewusst SEHR weich (Nutzer, 17.07.: "das dunkle Graue weicher").
   Vorher #f7f7f8 — das las sich als eigene Flaeche statt als leiser Hinweis. */
.svp-col__day.is-today{background:#fbfbfc}
/* (Das Hover-/Grab-Band-Overlay fuer Mehrtage-Bloecke ist am 18.07. wieder RAUS —
   Nutzer-Wunsch: zurueck zur schlichten Variante. Ein Mehrtage-Block zeigt sich als
   verbundene Tages-Segmente (svp-b--span-*) mit Links/Rechts-Griffen; kein gestreiftes
   Hintergrund-Muster, kein aufklappendes Overlay mehr.) */
/* Transparente Zieh-Vorschau (18.07.): waehrend man einen Mehrtage-Block an der Seite
   ausdehnt, zeigt ein durchscheinendes gruenes Feld, wie weit es geht — der echte
   (dunkle) Block entsteht erst beim Loslassen. Nur waehrend des Ziehens sichtbar. */
.svp-spanprev{position:absolute;z-index:8;border-radius:10px;pointer-events:none;
  background:color-mix(in srgb, var(--bg,#3ecb77) 30%, transparent);
  border:2px dashed var(--bg,#3ecb77);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  color:color-mix(in srgb, var(--bg,#3ecb77) 80%, #000);font-size:12px;font-weight:800}
.svp-line{position:absolute;left:0;right:0;height:1px;background:#f1f2f5;pointer-events:none}
/* Halbstunden-Linien raus (Foto zeigt nur volle Stunden). Das Snapping bleibt bei 15 Min —
   die Linie war nur Optik, keine Funktion. */
.svp-line--half{display:none}
.svp-now{position:absolute;left:0;right:0;height:2px;background:var(--heute);z-index:6;pointer-events:none}
.svp-now::before{content:'';position:absolute;left:-3px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--heute)}

/* ---------- Auftrags-Block: kraeftige Vollflaeche ---------- */
.svp-b{position:absolute;border-radius:var(--r-sm);padding:6px 8px;overflow:hidden;cursor:grab;
  text-align:left;display:flex;flex-direction:column;gap:1px;min-height:15px;
  background:var(--bg);color:#fff;border:1px solid var(--bg);
  box-shadow:0 1px 3px rgba(27,42,74,.16)}
.svp-b:hover{box-shadow:0 4px 14px rgba(27,42,74,.24);z-index:7}
/* Hover-Aufklapper (Nutzer-Idee): schmale Spuren zeigen fast nur `groesse`. Zeigt man
   auf einen Block, nimmt er kurz die volle Tagesbreite und gibt Kunde/Ort/Zeit frei.
   ⚠️ Die Verzoegerung (siehe AUF_VERZUG im Skript) ist kein Feinschliff, sondern noetig:
   ohne sie klappt beim blossen Ueberfahren des Bretts eine Box nach der anderen auf. */
.svp-b{transition:left .13s ease, width .13s ease}
/* ⚠️ Alle drei brauchen !important: left/width/z-index stehen INLINE am Block (aus
   blockEl), und eine nackte Klasse verliert gegen inline. Ohne das !important auf
   z-index klappt der Block zwar auf, liegt aber UNTER seinen Nachbarn — er verdeckt
   sie also nicht, sondern verschwindet hinter ihnen. */
.svp .svp-b--auf{left:3px !important;width:calc(100% - 6px) !important;z-index:9 !important;
  box-shadow:0 8px 24px rgba(27,42,74,.28)}
.svp .svp-b--auf em,.svp .svp-b--auf .svp-b__z{display:block}
.svp .svp-b--auf b{display:block;font-size:12.5px}
.svp .svp-b--auf.svp-b--mitring b{padding-right:28px}
.svp .svp-b--auf .svp-b__ring{display:flex;position:absolute;right:5px;top:5px;
  width:22px;height:22px;font-size:10.5px}
/* min/max-height (10. Runde): kleine Auftraege wachsen beim Aufklappen ORDENTLICH
   in die Tiefe (mind. 170px, gedeckelt bei 500), damit Titel, Zeit, Core-Daten
   und der Ansehen-Knopf ganz unten lesbar Platz haben. */
.svp .svp-b--auf{align-items:stretch;justify-content:flex-start;padding:6px 8px;
  min-height:170px;max-height:500px}
/* ⚠️ Der Textabstand rechts gilt NUR, wenn wirklich ein Kreis im Block sitzt
   (--mitring, also farbModus 'kolonne'). Sonst verschenkt jeder Block 26px an einen
   Kreis, den es gar nicht gibt — und genau die 26px entscheiden in einer 42px-Spur
   darueber, ob "2 Zi" noch reinpasst. */
.svp-b b{font-size:12.5px;font-weight:800;line-height:1.25;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.svp-b--mitring b{padding-right:26px}
.svp-b em{font-style:normal;font-size:11px;line-height:1.25;color:rgba(255,255,255,.82);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svp-b__z{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.75)}
/* Kolonnen-Kreis auf dem Block — traegt jetzt das Mitarbeiter-Foto */
.svp-b__ring{position:absolute;right:5px;top:5px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--bg);overflow:hidden;
  font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
/* Das Foto liegt UEBER dem Kuerzel und deckt es ab. Faellt es aus, entfernt sich das
   <img> per onerror und das Kuerzel darunter wird wieder sichtbar. */
.svp-ava{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;display:block}

/* Variante 1: Gesicht halb ueber der Blockkante (Nutzer-Zeichnung).
   ⚠️ overflow:hidden am Block MUSS dafuer weg, sonst schneidet er die obere Haelfte ab —
   das kostet die Ellipsis-Kuerzung, deshalb bekommt der Titel sie hier direkt.
   Bekannte Schwaeche dieser Variante: bei zwei Bloecken derselben Kolonne direkt
   untereinander (Do 16., K1 8–12 und 11–15 = der Konfliktfall) ragt der Kreis des
   unteren in den oberen. Genau darum steht Variante 2 zur Wahl. */
/* Text ZENTRIERT unterm Gesicht (17.07.): das Kuerzel sitzt in der Flucht des Icons. */
.svp-b--mitava{overflow:visible;text-align:center}
.svp-b--mitava > b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:.4px}
.svp-b__ava{position:absolute;left:50%;top:0;transform:translate(-50%,-42%);
  width:40px;height:40px;border-radius:50%;overflow:hidden;z-index:8;
  display:flex;align-items:center;justify-content:center;
  background:var(--soft);border:2.5px solid #fff;color:var(--mut);
  font-size:11px;font-weight:800;box-shadow:0 2px 8px rgba(27,42,74,.28);
  transition:width .16s ease,height .16s ease,transform .16s ease}
/* Beim Zeigen waechst das Gesicht aufs Doppelte und rueckt dabei NACH OBEN aus dem Block
   (-82% statt -42%), damit es den Plan darunter nicht verdeckt (Nutzer 17.07.). */
.svp .svp-b:hover .svp-b__ava{width:80px;height:80px;transform:translate(-50%,-82%);z-index:12}
/* Text unter dem Gesicht — Klasse setzt blockEl nur ab 70px Blockhoehe.
   ⚠️ .svp-Prefix noetig (0-2-0): .svp-b--schmal{padding:4px 5px} steht SPAETER in der
   Datei und wuerde mit gleicher Spezifitaet das padding-top zuruecksetzen — genau auf
   den schmalen Bloecken, wo der Text unterm Gesicht am wichtigsten ist. */
.svp .svp-b--textunten{padding-top:26px}
/* Auf sehr flachen Bloecken wuerde der Kreis den ganzen Block verdecken. */
.svp-b--kurz .svp-b__ava{width:24px;height:24px;font-size:9px;left:auto;right:4px;
  transform:translateY(-40%)}
.svp .svp-b--kurz:hover .svp-b__ava{width:44px;height:44px;transform:translateY(-60%)}
/* Mitarbeiter-Streifen im Modus "Beides" (63. Runde). Sitzt INNEN an der linken Kante,
   damit der Block-Radius und der rote Konflikt-Rahmen unangetastet bleiben. Ueber dem
   Block-Grund (z-index 1), aber unter Gesicht (8) und Aktionsknoepfen. */
.svp-b__kolstreifen{position:absolute;left:0;top:0;bottom:0;width:5px;z-index:1;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.5)}
.svp-b--kurz .svp-b__kolstreifen{width:4px}
.svp-b--umzug{--bg:var(--svc-umzug)}
.svp-b--entruempelung{--bg:var(--svc-entruempelung)}
.svp-b--haushalt{--bg:var(--svc-haushalt)}
.svp-b--transport{--bg:var(--svc-transport)}
/* Vergangenheit (18.07.): Bloecke vor HEUTE klar ausgegraut/entsaettigt, damit auf einen
   Blick "erledigt/vorbei" lesbar ist. Beim Drauffahren wieder voll (Buero will reinschauen).
   :not(.svp-b--dim) laesst den Fahrer-Hover-Dimmer (.16) gewinnen, wenn der aktiv ist. */
.svp .svp-b--past:not(.svp-b--dim){opacity:.4;filter:grayscale(.55)}
.svp .svp-b--past:not(.svp-b--dim):hover{opacity:1;filter:none}
/* Status auf dem ZWEITEN Kanal: hohl = Anfrage (ohne Farbwahrnehmung unterscheidbar) */
.svp-b--anfrage{background:#fff;color:var(--bg);border:2px dashed var(--bg);box-shadow:none}
.svp-b--anfrage em{color:var(--mut)}
.svp-b--anfrage .svp-b__z{color:var(--faint)}
.svp-b--anfrage .svp-b__ring{background:var(--bg);color:#fff}
/* Schmal-Stil: greift nach der BREITE (nicht der Hoehe wie --kurz, beide kombinierbar).
   Bei 3 Kolonnen auf einer geteilten Tagesspalte bleiben pro Spur ~45-60px — da frisst
   der 22px-Kolonnenkreis + 26px Textabstand die ganze Zeile. Der Kreis darf deshalb weg:
   die Spur-Koepfe in der Pill daruber zeigen dieselbe Zuordnung in derselben Reihenfolge
   und Breite. `groesse` bleibt stehen, `ort` faellt — in schmalen Lagen zaehlt nur groesse. */
/* ⚠️ Der Kreis bleibt hier SICHTBAR — nur kleiner. Frueher stand hier display:none, um
   Platz fuer Text zu schaffen. Seit der Kreis das Mitarbeiter-Gesicht traegt, waere das
   genau verkehrt: bei 42px Spur sagt ein Gesicht mehr als ein abgeschnittenes "2 Zi".
   Der Text kommt per Hover-Aufklapper zurueck. */
.svp-b--schmal{padding:4px 5px}
.svp-b--schmal .svp-b__ring{width:18px;height:18px;font-size:9px;right:3px;top:3px}
.svp-b--schmal b{font-size:11px}
.svp-b--schmal.svp-b--mitring b{padding-right:21px}
.svp-b--schmal em{display:none}
.svp-b--schmal .svp-b__z{font-size:9.5px}
.svp-b--schmal .svp-b__warn{right:3px;bottom:3px;width:14px;height:14px;font-size:9px}

/* Letzte Stufe: passt nicht mal `groesse`, bleibt nur noch Farbe + Gesicht + Lage.
   Das ist bewusst kein Notbehelf — es sind die drei Dinge, die man ohne Lesen erfasst:
   WAS (Farbe), WER (Gesicht), WANN (Position). Der Rest per Hover. */
.svp-b--ikon{align-items:center;justify-content:center;padding:2px}
.svp-b--ikon b,.svp-b--ikon em,.svp-b--ikon .svp-b__z{display:none}
.svp-b--ikon .svp-b__ring{position:static;width:20px;height:20px;font-size:9.5px}

/* Kurz-Stil ab 30px Hoehe */
.svp-b--kurz{flex-direction:row;align-items:center;gap:5px;padding:2px 6px}
.svp-b--kurz em,.svp-b--kurz .svp-b__z{display:none}
.svp-b--kurz b{font-size:11px;padding-right:24px}
.svp-b--kurz .svp-b__ring{width:17px;height:17px;font-size:9px;top:50%;transform:translateY(-50%)}

/* Dauer-Plakat unten im GEBUCHTEN Block (Nutzer 18.07., 5. Runde): dieselbe Optik
   wie in den freien Luecken, nur in Weiss und ohne "frei" — man sieht auf einen
   Blick, wie viele Stunden der Block frisst. Schriftgroesse setzt schmalPruefen
   passend zur GEMESSENEN Blockgroesse (inline); zu kleine Bloecke lassen es weg.
   Beim Hover-Aufklapper verschwindet es — dort stehen die Details ohnehin. */
.svp-b__dauer{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  font-weight:800;letter-spacing:-.5px;line-height:1;color:#fff;opacity:.95;
  font-variant-numeric:tabular-nums;pointer-events:none;display:none}
/* 10. Runde revidiert: im Aufklapper stoert das Plakat unten (dort sitzt jetzt der
   Ansehen-Knopf) — die Dauer steht aufgeklappt OBEN in der Zeitzeile ("· 5 h"). */
.svp .svp-b--auf .svp-b__dauer{display:none !important}

/* Core-Daten-Zeile: Objekt · m² · Fuellgrad — nur im Aufklapper (18.07., 8. Runde). */
.svp-b__core{display:none;font-size:11px;font-weight:700;opacity:.92;line-height:1.35}
.svp .svp-b--auf .svp-b__core{display:block}
/* Mehrtage-Zeitraum unten im Aufklapper (18. Runde): "eingeplant 18.–23." — sitzt
   ueber der Aktions-Zeile, leicht abgesetzt. */
.svp-b__spaninfo{display:none;margin-top:auto;font-size:11px;font-weight:800;
  letter-spacing:.2px;opacity:.95}
.svp .svp-b--auf .svp-b__spaninfo{display:block}
/* Wenn die Zeitraum-Zeile da ist, schiebt SIE den Knopf runter — nicht doppelt. */
.svp .svp-b--auf .svp-b__spaninfo + .svp-b__akt{margin-top:6px}

/* Aktions-Zeile nur im Aufklapper (18.07., 9. Runde): Auftrag ansehen / Bearbeiten.
   pointerdown stoppt im Skript — sonst wuerde der Knopf-Druck das Ziehen starten. */
.svp-b__akt{display:none}
/* margin-top:auto = der Knopf sitzt GANZ UNTEN im aufgeklappten Block (10. Runde). */
/* Ein Stueck nach oben (17. Runde): margin-bottom haelt den Knopf frei von der jetzt
   groesseren Greif-Flaeche unten. */
.svp .svp-b--auf .svp-b__akt{display:flex;gap:5px;margin-top:auto;padding-top:8px;
  margin-bottom:12px}
.svp-b__akt button{flex:1;padding:5px 8px;border:0;border-radius:999px;
  background:rgba(255,255,255,.22);color:#fff;font-family:inherit;font-size:10.5px;
  font-weight:800;cursor:pointer;transition:background .15s}
.svp-b__akt button:hover{background:rgba(255,255,255,.4)}
/* Anfrage-Bloecke sind hohl (weisser Grund): dort gefuellte Chips im Blockton. */
.svp-b--anfrage .svp-b__akt button{background:var(--bg);color:#fff}
/* Anfrage-Bloecke sind hohl (weisser Grund) — dort Plakat im Blockton statt Weiss. */
.svp-b--anfrage .svp-b__dauer{color:var(--bg)}

/* Zeitfenster LINKS am aufgeklappten Block (Nutzer 18.07., 5. Runde): Start oben,
   Ende unten — dieselbe Handschrift wie die Zeitachse am Monats-Panel (dunkler
   Chip, weisse Schrift). Nur sichtbar, solange der Block aufgeklappt ist. */
.svp-b__tf{display:none}
.svp .svp-b--auf .svp-b__tf{display:block;position:absolute;left:0;top:0;height:100%;width:0}
.svp-b__tf i{position:absolute;left:-8px;transform:translate(-100%,-50%);font-style:normal;
  font-size:10px;font-weight:700;color:#fff;background:#1b2a4a;border-radius:4px;
  padding:2px 5px;white-space:nowrap}
.svp-b__tf i:first-child{top:0}
.svp-b__tf i:last-child{top:100%}
body.svp-nacht .svp-b__tf i{background:#ececec;color:#151515}

/* ---------- Ueberlappung: uebereinander, nicht versetzt ----------
   Der spaetere Block liegt DRUEBER (z-index) und zeigt an seiner Oberkante eine
   gestrichelte Linie — dort schneidet er in den darunterliegenden. Beide rot umrandet. */
/* ⚠️ Der rote Rahmen allein reicht NICHT — gemessen:
      Alarmrot auf Koralle (Leistungsfarbe)  = 1,75:1
      Alarmrot auf Kolonnenfarben            = 1,01–1,24:1  ← praktisch unsichtbar
   Grund: die Blockfarben muessen dunkel genug fuer weissen Text sein, und Alarmrot ist
   ebenfalls dunkel — gleiche Helligkeit, kein Kontrast. Deshalb liegt zwischen Fuellung
   und rotem Rahmen ein WEISSER Trennring (inset). Rot auf Weiss = 5,74:1, und das gilt
   auf jeder Blockfarbe, in beiden Farbmodi. Wer den Trennring entfernt, macht den
   Konflikt auf dunklen Bloecken unsichtbar. */
.svp-b--konflikt{outline:2px solid var(--rot);outline-offset:-2px;
  box-shadow:inset 0 0 0 4px #fff, 0 1px 3px rgba(27,42,74,.16)}
.svp-b--konflikt:hover{box-shadow:inset 0 0 0 4px #fff, 0 4px 14px rgba(27,42,74,.24)}
.svp-b--drueber{border-top:3px dashed rgba(255,255,255,.95);
  box-shadow:0 -3px 12px rgba(200,30,30,.4), 0 4px 14px rgba(27,42,74,.24)}
/* Kombination: der Trennring muss auch am oberen "drueber"-Block erhalten bleiben. */
.svp-b--konflikt.svp-b--drueber,
.svp-b--konflikt.svp-b--drueber:hover{
  box-shadow:inset 0 0 0 4px #fff, 0 -3px 12px rgba(200,30,30,.45), 0 4px 14px rgba(27,42,74,.24)}
.svp-b--anfrage.svp-b--drueber{border-top:3px dashed var(--rot)}
/* Marke "kein Angebot" (17.07. abends): schnell angelegte Auftraege haben noch keinen
   Preis — der Kalender muss das ehrlich zeigen, sonst sehen geblockte Termine wie fertige
   Auftraege aus. Weisser Chip mit Rand, damit er auf farbigen UND hohlen Bloecken liest. */
.svp-b__ang{position:absolute;left:5px;bottom:4px;height:16px;padding:0 6px;border-radius:999px;
  background:#fff;color:var(--o-ink);border:1px solid var(--o);
  font-size:9px;font-weight:800;line-height:1;letter-spacing:.2px;white-space:nowrap;
  display:flex;align-items:center;box-shadow:0 1px 3px rgba(27,42,74,.22)}
.svp-b--schmal .svp-b__ang,.svp-b--ikon .svp-b__ang,.svp-b--kurz .svp-b__ang{padding:0 4px}
.svp-b__warn{position:absolute;right:5px;bottom:4px;width:18px;height:18px;border-radius:50%;
  background:var(--rot);color:#fff;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
/* Angefasster Block wird UNSICHTBAR, nicht nur blass (Nutzer 17.07.). Vorher opacity:.4:
   dann standen beim Ziehen zwei Dinge da — die alte Lage als Geist und der Ghost an der
   neuen. Der Ghost SAGT schon, wo es hingeht; die alte Lage ist in dem Moment nur Laerm.
   visibility statt display: das Element behaelt seine Groesse, sonst rechnet das Layout
   waehrend des Ziehens neu. */
.svp-b--drag{visibility:hidden}
/* Greif-Flaeche unten GROESSER (17. Runde, Nutzer: "mehr Flaeche, nicht so ein
   Gefummel") — 16px statt 8, dickerer Griff-Balken. */
.svp-b__grip{position:absolute;left:0;right:0;bottom:0;height:16px;cursor:ns-resize;z-index:6}
.svp-b__grip::after{content:'';position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  width:26px;height:3px;border-radius:3px;background:transparent}
.svp-b:hover .svp-b__grip::after{background:rgba(255,255,255,.7)}
.svp-b--anfrage:hover .svp-b__grip::after{background:#c8cdd6}
/* Griffe LINKS + RECHTS fuer Mehrtage-Bloecke (17. Runde): an der Seite anpacken
   und ueber mehrere Tage ziehen (Baustelle 2–3 Wochen). Breiter Greifstreifen. */
.svp-b__grip-x{position:absolute;top:0;bottom:0;width:14px;cursor:ew-resize;z-index:6}
.svp-b__grip-x--l{left:0}
.svp-b__grip-x--r{right:0}
.svp-b__grip-x::after{content:'';position:absolute;top:50%;width:3px;height:26px;
  border-radius:3px;background:transparent;transform:translateY(-50%)}
.svp-b__grip-x--l::after{left:3px}
.svp-b__grip-x--r::after{right:3px}
.svp-b:hover .svp-b__grip-x::after{background:rgba(255,255,255,.7)}
.svp-b--anfrage:hover .svp-b__grip-x::after{background:#c8cdd6}
/* Mehrtage-Block: an den Innentagen keine runden Ecken + kein Seitenrand, damit die
   Segmente zu einem durchgehenden Band verschmelzen. */
.svp-b--span-mitte{border-radius:0}
.svp-b--span-start{border-top-right-radius:0;border-bottom-right-radius:0}
.svp-b--span-ende{border-top-left-radius:0;border-bottom-left-radius:0}

/* Ghost beim Ziehen */
/* Ghost traegt die FARBE DES ANGEFASSTEN BLOCKS (Nutzer 17.07.): faesst man einen gruenen
   Umzug an, ist die gestrichelte Vorschau gruen mit gruenem Schleier. Vorher immer orange —
   damit sah jedes Ziehen gleich aus und man verlor, was man da eigentlich schiebt.
   --gbg setzt das Skript pro Zug; color-mix macht daraus den Schleier, ohne dass fuer jede
   Service-Farbe eine eigene Regel noetig ist. */
.svp-ghost{position:absolute;border-radius:var(--r-sm);
  border:2.5px dashed var(--gbg,var(--o));
  background:color-mix(in srgb, var(--gbg,var(--o)) 16%, transparent);
  pointer-events:none;z-index:10}
.svp-ghost__t{position:absolute;left:7px;top:4px;font-size:11.5px;font-weight:800;
  color:var(--gbg,var(--o-ink));
  background:rgba(255,255,255,.9);border-radius:5px;padding:1px 5px}
/* Konflikt: --gbg wird im Skript auf Alarmrot gesetzt (inline schlaegt Klasse), hier nur
   die Textfarbe. */
.svp-ghost--bad .svp-ghost__t{color:#8f2a2a}

/* Gap-Plus */
/* Gap-Flaeche (17.07. spaet): beim Zeigen auf freie Zeit markiert sich die GANZE
   Luecke — vom Ende des vorigen bis zum Anfang des naechsten Auftrags — sanft grau
   (im Fahrer-Modus im Fahrerton), unten steht die Lueckenlaenge ("4 h frei").
   --pbg setzt das Skript; left/width/top ebenfalls. */
.svp-plus{position:absolute;left:4px;right:4px;border-radius:var(--r-sm);
  border:2px dashed color-mix(in srgb, var(--pbg,#8b93a7) 45%, transparent);
  background:color-mix(in srgb, var(--pbg,#8b93a7) 9%, transparent);
  z-index:4;pointer-events:none}
/* Lueckenlaenge als kleines Plakat (Nutzer 18.07.): Stundenzahl GROSS und fett,
   darunter "frei" als gesperrte Versalien — beides im Lueckenton.
   ⚠️ KEINE festen Schriftgroessen hier: das Plakat darf die Box NIE beruehren oder
   ueberragen (Nutzer 18.07., 2. Runde). Das Skript misst Spurbreite + Lueckenhoehe
   und setzt font-size/letter-spacing INLINE — grosse Luecke = 30px-Zahl, schmale
   Spur oder kurze Luecke = kleiner, zu wenig Platz = Label ganz weg (Plus-Badge
   und Uhrzeit sagen dann alles Noetige). */
.svp-plus__h{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1;
  white-space:nowrap;color:color-mix(in srgb, var(--pbg,#8b93a7) 80%, #000)}
.svp-plus__h b{font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.svp-plus__h em{font-style:normal;font-weight:700;text-transform:uppercase;opacity:.8}
/* Nur noch die nackte Uhrzeit — seit 18.07. (6. Runde) UEBER dem Plus an der
   Fingerspitze, nicht mehr unter dem Zeiger. Heller Schein statt Kasten, damit sie
   auf den Rasterlinien lesbar bleibt. */
.svp-plusz{position:absolute;z-index:11;pointer-events:none;
  transform:translate(-50%,-100%);
  font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;
  text-shadow:0 0 4px #fff,0 0 8px #fff}
/* T-Traeger-Linie (18.07.): waagerechte Rasterlinie exakt auf der gerasteten Zeit,
   von Spurrand zu Spurrand, an beiden Enden ein senkrechtes Stueck nach oben und
   unten — wie die Flansche eines Doppel-T-Traegers. Farbe = Spurfarbe/Schwarz. */
.svp-tlinie{position:absolute;height:0;border-top:2px solid var(--tl,#1b2a4a);
  z-index:5;pointer-events:none;opacity:.85}
.svp-tlinie::before,.svp-tlinie::after{content:'';position:absolute;top:-5px;
  width:2px;height:12px;background:var(--tl,#1b2a4a)}
.svp-tlinie::before{left:0}
.svp-tlinie::after{right:0}
/* Plus-BADGE ueber der Mausspitze (18.07., ersetzt das Plus IM Cursor): der Zeiger
   bleibt der normale Pfeil, darueber schwebt ein kleiner Kreis mit Plus, der beim
   Betreten der freien Flaeche AUFPOPPT (Scale mit leichtem Ueberschwung). Die
   Uhrzeit darunter (.svp-plusz) bleibt unveraendert schwarz — Nutzer: "cool".
   Fixed am <body> wie die Uhrzeit; die Farbe (Spurfarbe bzw. Schwarz) kommt inline. */
/* Seit 18.07. (6. Runde) DEUTLICH kleiner (16px): der Zeiger ist jetzt die
   Zeige-HAND (cursor:pointer), das Mini-Plus sitzt direkt an der Fingerspitze,
   die Uhrzeit darueber. Beim Rastern (Zeit-Schritt) pulst es kurz auf — das
   macht das Skript per Web-Animation, im Stand ist Ruhe. */
.svp-plusk{position:fixed;z-index:11;pointer-events:none;width:16px;height:16px;
  border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;line-height:1;
  transform:translate(-50%,-100%) scale(.3);opacity:0;
  box-shadow:0 2px 6px rgba(27,42,74,.35);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .12s}
.svp-plusk.is-da{transform:translate(-50%,-100%) scale(1);opacity:1}

.svp-scrollhint{margin:8px 0 0;font-size:11.5px;color:var(--faint)}

/* ---------- Monat ---------- */
.svp-month{padding-top:2px}
.svp-month__head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 6px}
.svp-month__head span{text-align:center;font-size:11.5px;font-weight:700;color:var(--faint)}
/* Foto-Vorlage 3 (17.07. spaet): der Monat ist EIN weisses Blatt. gap:0 — die Linien
   kommen von den Zellen (border rechts/unten), aussen ein Rahmen. minmax(0,1fr) wie
   gehabt gegen das Aufdruecken der Spalten. Zeilen setzt zeichneMonat (echte Wochenzahl,
   1fr — das Raster fuellt die Fensterhoehe). */
/* overflow:visible statt hidden: das Hover-Gesicht der obersten Zeile ragt ueber das
   Raster hinaus. Preis: die Zellecken ueberdecken die Rundung des Rahmens minimal. */
.svp-month__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;
  border:1px solid var(--ln);border-radius:var(--r-sm);overflow:visible;background:#fff}
/* Zelle: weiss, ECKIG. Datum GROSS links, Fahrer-Spalten rechts daneben (17.07.).
   overflow:visible NUR wegen des ausweichenden Hover-Gesichts (translateY nach oben) —
   mit hidden wuerde genau diese Bewegung an der Zellkante abgeschnitten. */
.svp .svp-mday{min-height:0;border:0;border-right:1px solid #f0f1f4;border-bottom:1px solid #f0f1f4;
  border-radius:0;background:#fff;padding:8px 9px;text-align:left;
  display:flex;flex-direction:row;gap:8px;position:relative;overflow:visible}
.svp .svp-mday:nth-child(7n){border-right:0}
.svp .svp-mday:nth-last-child(-n+7){border-bottom:0}
.svp .svp-mday:hover{background:#fcfcfd}
/* Mindestens doppelt so gross wie vorher (13px → 27px). */
.svp-mday b{font-size:27px;font-weight:800;line-height:1;flex:none}
/* Fahrer-Minispalten rechts vom Datum: Gesicht oben, darunter der Tag als SENKRECHTER
   Zeitbalken (06–20 Uhr). Farbige Stuecke an ihrer echten Tageszeit, Luecken im ganz
   hellen Fahrerton. gap:0 = die Gesichter stossen aneinander (Nutzer: "Stoss an Stoss").
   Fahrer ohne Auftrag tauchen gar nicht auf: leere Kachel = niemand faehrt. */
.svp-mday__spalten{display:flex;gap:0;flex:1;min-height:0;min-width:0;
  justify-content:flex-end;padding:0}
/* Schmaler + kleiner (Nutzer 17.07. spaet: "zu eingequetscht"): Gesicht 30px statt 38,
   Balken 14px statt 20 — drei Fahrer passen jetzt entspannt neben die Tageszahl. */
.svp-mday__drv{display:flex;flex-direction:column;align-items:center;gap:4px;width:30px;
  min-height:0;flex:none}
.svp-mday__drv .svp-ring{width:30px;height:30px;font-size:10px;flex:none;
  border:2px solid #fff;transition:transform .15s;z-index:2;position:relative}
/* Auslastungs-Ring (18.07., Monats-Modus "Ring"): das Gesicht bekommt einen Ring,
   der sich mit der Tages-Auslastung fuellt (conic-gradient, Rest hellgrau) —
   gruen = wenig, gelb = mittel, ab 2/3 rot; voller Tag = komplett roter Ring. */
.svp-mring{border-radius:50%;padding:3px;display:inline-flex;flex:none}
/* Modi "Ring"/"Gesicht": keine Zeitbalken — die Spalte traegt nur das Gesicht. */
.svp-mday__drv--ohnebalken{width:36px;justify-content:flex-start}
/* Hover: Gesicht weicht erst NACH OBEN aus und waechst DANN (17.07.) — es darf die
   Sicht auf den Balken nicht verstellen. Braucht overflow:visible an Zelle und Raster. */
/* Hover-Gesicht so gross wie in der Woche (80px): 30px x 2.67 (Nutzer 17.07. spaet). */
.svp-mday__drv:hover .svp-ring,
.svp-mday__drv--fix .svp-ring{transform:translateY(-34px) scale(2.67);z-index:7}
/* --fix (17. Runde): solange das aufgeklappte Panel offen ist, BLEIBT das Gesicht
   gross und mittig ueber dem Balken — auch wenn die Maus laengst unten im Panel auf
   einer freien Luecke steht (Nutzer: "soll fixiert bleiben, nicht wieder kleiner
   werden"). Setzt/entfernt mtipZeig/mtipWeg. */
.svp-mday__tl{position:relative;flex:1;width:14px;min-height:0;border-radius:4px;overflow:hidden}
.svp-mday__tl i{position:absolute;left:0;right:0;display:block}
/* Plus in der groessten Luecke des Balkens — erscheint beim Zeigen, klick = anlegen. */
.svp-mday__plus{position:absolute;left:50%;transform:translate(-50%,-50%);width:14px;height:14px;
  border-radius:50%;background:#fff;color:var(--mut);font-size:13px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 1px 4px rgba(27,42,74,.3);opacity:0;transition:opacity .15s;z-index:3}
.svp-mday__drv:hover .svp-mday__plus{opacity:1}
/* Vergangene Tage: NICHT mehr die ganze Kachel ausgrauen (Nutzer 17.07.) — nur die Zahl
   etwas schwaecher und die Fahrer-Spalten (Gesichter + Balken) blass. */
.svp .svp-mday.is-past{background:#fff}
.svp-mday.is-past b{color:#c8cdd2;font-weight:700}
.svp-mday.is-past .svp-mday__spalten{opacity:.35}
/* Nachbarmonat: leere weisse Zelle — sichtbar sind nur Tage des eigenen Monats. */
.svp .svp-mday.is-out{background:#fff}
.svp .svp-mday.is-today{background:#f7f7f8}
.svp-mday.is-today b{color:var(--heute)}
/* Aufgeklappter Tagesbalken (ersetzt die Schwebe-Box, 17.07.): der Balken selbst wird
   ~3,5x hoeher und zellbreit, verlaengert sich NACH UNTEN und zeigt Auftraege UND
   Luecken als beschriftete Stuecke. Die Luecken sind klickbar (+ = Auftrag anlegen).
   Fixed am <body>, sonst wuerde ihn die Zelle abschneiden; interaktiv, deshalb KEIN
   pointer-events:none — er bleibt stehen, solange die Maus auf ihm ist. */
/* Rahmen GANZ DUENN hellgrau (Nutzer 18.07., 7. Runde) — vorher 2px. */
.svp-mtip{position:fixed;z-index:60;background:#fff;border:1px solid #e2e5ea;
  border-radius:10px;overflow:hidden;box-shadow:0 16px 44px rgba(27,42,74,.32);
  display:flex;flex-direction:column;
  box-sizing:border-box;  /* liegt ausserhalb von .svp — erbt dessen Reset nicht */
  /* Wachs-Animation (Nutzer 17.07. abends: "genauso wie bei der Woche"): das Panel
     startet in der Geometrie des schmalen Balkens und waechst auf Zellbreite + volle
     Hoehe. Dieselbe Handschrift wie der Block-Aufklapper (.svp-b--auf, .13s ease). */
  transition:left .16s ease,width .16s ease,height .16s ease,top .16s ease}
/* Die Beschriftungen kommen erst, wenn das Panel (fast) offen ist — waehrend des
   Wachsens waeren sie zerquetschter Laerm. visibility statt opacity: die Anfrage-Stuecke
   tragen fruher inline-opacity, die eine Klassen-Opacity ueberfahren wuerde. */
.svp-mtip:not(.svp-mtip--auf) .svp-mtip__seg{visibility:hidden}
.svp-mtip__seg{display:flex;align-items:center;gap:7px;padding:0 10px;min-height:20px;
  color:#fff;font-size:11.5px;font-weight:700;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis}
.svp-mtip__seg b{font-weight:800;letter-spacing:.4px}
/* ⚠️ KEIN .svp-Prefix und voller Button-Reset: das Panel haengt am <body>, ausserhalb
   von .svp — dort greift weder ein .svp-Selektor noch der .svp-button-Reset. */
.svp-mtip__seg--frei{background:#fff;color:var(--mut);font-weight:600;cursor:pointer;
  text-align:left;justify-content:flex-start;border:0;border-radius:0;
  font-family:inherit;font-size:11.5px;width:100%}
.svp-mtip__seg--frei:hover{background:var(--soft);color:var(--ink)}
/* Plus NEUTRAL SCHWARZ, keine Farbkugel (Nutzer 17.07. abends) — Orange hiess vorher
   "Aktion", aber im Panel konkurrierte es mit den Leistungsfarben. Die Uhrzeit ist aus
   der Zeile raus: sie steht jetzt an der Zeitachse links daneben (.svp-mtax). */
.svp-mtip__seg--frei i{font-style:normal;font-weight:800;font-size:15px;line-height:1;
  flex:none;color:var(--ink)}

/* Zeitachse LINKS neben dem aufgeklappten Panel (Nutzer 17.07. abends): gestrichelte
   Linien an den Stueck-Grenzen, die Uhrzeit daneben. Eigenes fixed-Element am <body> —
   das Panel selbst hat overflow:hidden und koennte nichts neben sich zeigen. */
.svp-mtax{position:fixed;z-index:60;pointer-events:none}
.svp-mtax__z{position:absolute;right:0;display:flex;align-items:center;gap:5px;
  transform:translateY(-50%);white-space:nowrap}
/* Schwarz hinterlegt, weisse Schrift (Nutzer 17.07. spaet): auf dem bunten Kalender
   darunter war das helle Label kaum zu erkennen. */
.svp-mtax__z b{font-size:10px;font-weight:700;color:#fff;
  background:#1b2a4a;border-radius:4px;padding:2px 5px}
.svp-mtax__z i{display:block;width:12px;border-top:2px dashed #1b2a4a}

/* ---------- Legende (wechselt mit der Ansicht) ---------- */
/* ---------- Zeitleiste unten (18.07., 3. Entwurf: Zwei-Etagen-Lineal) ----------
   Ganzes Jahr auf einen Blick: MONATE oben (spannen ueber ihre Tage), darunter je Tag
   ein bodenstaendiger Mini-Balken (Hoehe+Farbe = Auslastung). Vergangenes ausgegraut,
   die aktuelle Position OBEN als roter Marker. Kein Zoom, kein "Jahr"-Text, keine
   +/- Knoepfe mehr (Nutzer 18.07.) → volle Flaeche fuers Lineal. */
/* Hoehe 96 → 132 px (Nutzer 19.07.): die Auslastungsbalken hatten zu wenig Luft, um
   Unterschiede ueberhaupt zu zeigen. Die Balkenreihe bekommt den Zuwachs (flex:1). */
/* ---- 19. Runde (Nutzer): Zeitachse in der Hoehe ZIEHBAR ----
   `--tlh` traegt die Gesamthoehe (Standard 144 = alte 132 + die frueheren 12 px
   margin-top, die jetzt in der Griffzone aufgehen). Der Regler dafuer ist die
   MARKER-ZEILE selbst: die ganze Flaeche zwischen Kalender und Streifen ist Griff
   ("da soll keine Luecke sein — die Luecke ist der Griff"), 23 px hoch, gross genug,
   dass das rote Dreieck nie untergeht. Beim Ziehen aendert sich NUR die Balken-Grafik
   (.svp-tl__days hat flex:1); Monats- und Tageszahlen-Reihe behalten ihre festen
   Hoehen ("die sind gerade perfekt so"). */
.svp-tl{flex:none;margin-top:0;display:flex;align-items:stretch;height:var(--tlh,144px)}
/* ---- 52. Runde (Nutzer): Achse dockt am Kalender AN ----
   In Woche/Tag ist die Kalender-Karte KOMPAKT (align-self:start) — das svp-grid
   streckte sich aber trotzdem auf die volle Resthoehe (flex:1) und schob die Achse
   an den Fensterboden: dazwischen klaffte ein Riesen-Gap. Mit `is-kompakt` (setModus)
   nimmt das Grid nur noch seine Inhaltshoehe, die Achse rueckt direkt unter die
   Karte; freier Platz liegt jetzt UNTER der Achse statt mittendrin.
   Monat/Schichtplan fuellen die Hoehe ohnehin — dort aendert sich nichts. */
.svp-main.is-kompakt .svp-grid{flex:0 1 auto}
.svp-tl__wrap{flex:1;display:flex;flex-direction:column;min-width:0}
/* Marker-Zeile = Griffzone: rotes Dreieck unten, darueber Luft zum Anfassen. */
.svp-tl__markrow{position:relative;height:23px;flex:none;cursor:ns-resize;
  touch-action:none}
.svp-tl__mark{position:absolute;bottom:0;transform:translateX(-50%);width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--heute);pointer-events:none}
/* Senkrechte Linie unter dem Dreieck: das Lot vom Dreieck bis auf den roten Tag in der
   untersten Reihe. Laenge folgt der ziehbaren Hoehe.
   ⚠️ 66. Runde: Sie ist eine VERBINDUNG, kein Messinstrument — dazwischen liegt die
   Jahres-Skala, die eine andere Einteilung hat (s. zeichneTimeline). Ihre beiden Enden
   stimmen, der Weg dazwischen ist Deko. Deshalb bewusst blass. */
.svp-tl__mark::after{content:'';position:absolute;left:50%;top:8px;width:2px;
  height:calc(var(--tlh,144px) - 26px);
  transform:translateX(-50%);background:var(--heute);opacity:.28}
/* Heute liegt ausserhalb des Ausschnitts: Dreieck klebt blass am Rand und zeigt nur
   noch die Richtung an — ohne Lot, das sonst auf einen beliebigen Tag zeigen wuerde. */
.svp-tl__mark.is-fern{opacity:.4}
.svp-tl__mark.is-fern::after{display:none}
/* Zoom-Knopf der Achse (19. Runde): schaltet die Balken-Grafik zwischen ganzem Jahr
   und dem 35-Tage-Ausschnitt der Tageszahlen-Reihe um. Sitzt rechts in der Griffzone. */
/* 20. Runde (Nutzer): aus dem Zoom-KNOPF wurde ein SCHALTER — zwei Pillen im Trog,
   wie die grossen Ansichts-Tabs, nur klein. Beschriftung "Tagesauslastung /
   Monatsauslastung" statt "Jahr / 35 Tage". */
.svp-tl__zoomsw{position:absolute;right:0;bottom:0;display:flex;gap:2px;
  background:var(--soft);border-radius:999px;padding:2px;cursor:default}
/* 52. Runde (Nutzer): Icon-Schalter statt Text — je Zustand ein Mini-Balkendiagramm
   (currentColor faerbt die Balken, deshalb reicht der Farbwechsel der Knopf-Regeln). */
.svp .svp-tl__zoomsw button{border:0;background:transparent;cursor:pointer;font:inherit;
  color:var(--mut);padding:3px 8px;border-radius:999px;display:flex;align-items:flex-end;
  white-space:nowrap;transition:color .15s,background .15s}
.svp .svp-tl__zoomsw svg{display:block}
.svp .svp-tl__zoomsw button:hover{color:var(--ink)}
.svp .svp-tl__zoomsw button.is-on{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(27,42,74,.12)}
body.svp-nacht .svp-tl__zoomsw{background:#242424}
body.svp-nacht .svp .svp-tl__zoomsw button.is-on{background:#3a3a3a;color:#ececec}
/* GERADE Oberkante, weisser Grund, zwei gestapelte Reihen (Monate / Tage). */
.svp-tl__strip{position:relative;flex:1;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--ln);border-radius:12px;overflow:hidden;min-width:0}
/* Obere Reihe: Monate. Jeder Monat spannt per flex-grow ueber seine Tageszahl,
   dadurch sitzen die Tage darunter genau buendig. */
/* ---- Tagesleiste des aktuellen Monats (Nutzer 19.07.) ----
   Sitzt GANZ OBEN auf der Zeitachse, durchgehend ueber die volle Breite: grosse fette
   Tageszahl, darunter der Wochentag klein und fett. Zeigt bewusst nur den Monat, in dem
   der Kalender gerade steht — ueber ein ganzes Jahr blieben pro Tag ~3px, da waere von
   "gross und fett" nichts uebrig. */
/* Verschmolzen (19.07.): sitzt als UNTERSTE Reihe im Streifen, kein eigener Kasten mehr. */
.svp-tl__mdays{display:flex;height:38px;flex:none;border-top:1px solid var(--ln);
  cursor:grab;touch-action:pan-y;will-change:transform}
.svp-tl__mdays.is-zieht{cursor:grabbing;user-select:none}
.svp-tl__md{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;cursor:pointer;overflow:hidden;
  border-right:1px solid #f2f4f6;transition:background .12s}
.svp-tl__md:last-child{border-right:0}
.svp-tl__md:hover{background:var(--soft)}
.svp-tl__md b{font-size:15px;font-weight:800;color:var(--ink);line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.svp-tl__md em{font-size:9px;font-weight:800;font-style:normal;color:var(--faint);
  line-height:1.1;letter-spacing:.02em}
/* Wochenende leiser, Vergangenheit ausgegraut, heute rot, gewaehlter Tag hinterlegt. */
.svp-tl__md.is-we b{color:var(--mut)}
.svp-tl__md.is-past{opacity:.45}
.svp-tl__md.is-today b,.svp-tl__md.is-today em{color:var(--heute)}
/* Die gerade gezeigte Woche gruen hinterlegt (Nutzer 19.07.) — man sieht auf der
   Jahresachse sofort, wo man steht. Gruen und nicht rot: rot ist hier "heute". */
.svp-tl__md.is-cur{background:color-mix(in srgb, #2fae66 16%, #fff)}
.svp-tl__md.is-cur b{color:#1e7d47}
.svp-tl__md.is-cur.is-past{opacity:.8}
/* ⚠️ HEUTE schlaegt die gruene Wochen-Markierung (Nutzer 19.07.): sonst gewinnt die
   spaetere `.is-cur b`-Regel und der heutige Tag war innerhalb der laufenden Woche
   gruen statt rot. Zahl UND Wochentag rot, plus ein roter Fuss als Anker. */
.svp-tl__md.is-today b,.svp-tl__md.is-today em,
.svp-tl__md.is-today.is-cur b,.svp-tl__md.is-today.is-cur em{color:var(--heute)}
.svp-tl__md.is-today{position:relative}
.svp-tl__md.is-today::after{content:'';position:absolute;left:18%;right:18%;bottom:0;
  height:2px;background:var(--heute);border-radius:2px}
/* Monatsgrenze im gleitenden Fenster: kraeftige Linie + Monatskuerzel statt Wochentag. */
.svp-tl__md.is-mstart{border-left:2px solid #cfd4dc}
/* ---- JAHRESWECHSEL: EINE durchgehende Linie (Nutzer 19.07., 22. Runde) ----
   ⚠️ Vorher ein 3-px-Rahmen an je einer Zelle in ALLEN DREI Reihen. Das sah krumm aus, und
   zwar zu Recht: Monats- und Auslastungsreihe laufen auf der Jahres-Skala (365 Tage), die
   Tageszahlen-Reihe auf ihrem eigenen 35-Tage-Fenster — derselbe 1. Januar landet dort an
   einer anderen x-Position. Jetzt wird die Linie EINMAL als Overlay ueber die beiden
   Jahres-Reihen gelegt, prozentual positioniert. Duenn (1 px), mit Pfeil und Jahreszahl. */
/* 19. Runde (Nutzer): Jahreslinie DICKER (2 px — so kraeftig wie der Heute-Strich) und
   weiter nach unten gezogen ("hier faengt ein neues Jahr an").
   ⚠️ `bottom:38px` ist KEINE halbe Sache: die Tageszahlen-Reihe darunter laeuft auf
   der 35-Tage-Skala, die Linie auf der Jahres-Skala — durchgezogen saesse sie dort an
   der falschen x-Position. Stattdessen uebernimmt `.svp-tl__md.is-jahrstart` (gleiche
   2 px) die Fortsetzung an der SKALENRICHTIGEN Stelle der Tagesreihe. */
/* 20. Runde (Nutzer): Linie und Jahreszahl WEICHER — "nicht schwarz komplett", sondern
   Grautoene. Die Linie markiert, sie dominiert nicht. */
.svp-tl__jahr{position:absolute;top:0;bottom:38px;width:0;z-index:3;pointer-events:none;
  border-left:2px solid #c3c8d2}
/* top:1px, nicht negativ — der Streifen hat `overflow:hidden`, alles oberhalb 0 wird
   abgeschnitten. Schriftgroesse = die der Monatsbeschriftungen (Nutzer 19. Runde). */
.svp-tl__jahr b{position:absolute;top:1px;left:0;transform:translateX(-50%);
  font-size:11px;font-weight:800;color:var(--mut);background:#fff;
  padding:0 4px;border-radius:3px;line-height:1.3;white-space:nowrap}
/* Kleiner Pfeil unter der Jahreszahl — etwas TIEFER (20. Runde, 13 → 16 px) und im
   selben weichen Ton wie die Linie, auf die er zeigt. */
.svp-tl__jahr i{position:absolute;top:16px;left:0;transform:translateX(-50%);
  width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:5px solid #c3c8d2}
body.svp-nacht .svp-tl__jahr{border-left-color:#4a4a4a}
body.svp-nacht .svp-tl__jahr b{color:#9a9a9a;background:#1e1e1e}
body.svp-nacht .svp-tl__jahr i{border-top-color:#4a4a4a}
/* In der Tageszahlen-Reihe bleibt nur eine dezente Kante — andere Skala, s. oben. */
/* Fortsetzung der Jahreslinie in der Tagesreihe — gleicher weicher Ton (20. Runde). */
.svp-tl__md.is-jahrstart{border-left:2px solid #c3c8d2}
body.svp-nacht .svp-tl__md.is-jahrstart{border-left-color:#4a4a4a}
.svp-tl__md em.is-mname{color:var(--ink);font-weight:800}
body.svp-nacht .svp-tl__md.is-mstart{border-left-color:#3d3d3d}
body.svp-nacht .svp-tl__md em.is-mname{color:#ececec}
body.svp-nacht .svp-tl__mdays{border-top-color:#2a2a2a}
body.svp-nacht .svp-tl__md{border-right-color:#262626}
body.svp-nacht .svp-tl__md b{color:#ececec}
body.svp-nacht .svp-tl__md.is-cur{background:color-mix(in srgb, #2fae66 22%, #1e1e1e)}
body.svp-nacht .svp-tl__md.is-cur b{color:#5fd694}
/* Monate sitzen jetzt ZWISCHEN Auslastung und Monatstagen ⇒ Trennlinie nach oben. */
.svp-tl__months{display:flex;height:22px;flex:none;border-top:1px solid var(--ln)}
.svp-tl__mo{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:0;overflow:hidden;
  white-space:nowrap;border-right:1px solid #eef0f3;font-size:11px;font-weight:800;
  color:var(--ink);cursor:pointer;transition:background .12s}
.svp-tl__mo:last-child{border-right:0}
.svp-tl__mo:hover{background:var(--soft)}
.svp .svp-tl__mo.is-past{color:var(--faint)}
/* Gruen wie die Tage darueber — beide markieren "hier bin ich gerade". Rot bleibt allein
   "heute" vorbehalten. Der Monat wird NICHT ganz gefaerbt, sondern nur anteilig (Band). */
.svp-tl__mo.is-cur{color:#1e7d47}
.svp-tl__molbl{position:relative;z-index:1}
.svp-tl__moband{position:absolute;top:0;bottom:0;z-index:0;
  background:color-mix(in srgb, #2fae66 22%, #fff)}
body.svp-nacht .svp-tl__mo.is-cur{color:#5fd694}
body.svp-nacht .svp-tl__moband{background:color-mix(in srgb, #2fae66 26%, #1e1e1e)}
/* Untere Reihe: je Tag eine schmale Spalte mit bodenstaendigem Auslastungs-Balken. */
.svp-tl__days{display:flex;flex:1;min-width:0}
.svp-tl__d{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;
  justify-content:center;cursor:pointer;border-right:1px solid #f6f7f9;transition:background .12s}
.svp-tl__d--mstart{border-left:1px solid #e6e8ec}   /* Monatsgrenze etwas kraeftiger */
.svp-tl__d:last-child{border-right:0}
/* Klickbar (springt zum Tag) UND greifbar (13. Runde: Monate schieben) ⇒ Greifhand.
   Der Klick bleibt: er feuert nur, wenn NICHT gezogen wurde (s. tlZiehenVerdrahten). */
.svp-tl__days{cursor:grab}
.svp-tl__months{cursor:grab}
/* 18. Runde: `is-zieht` sitzt am CONTAINER (#svp-timeline), weil die Reihen waehrend
   des Zugs neu gebaut werden — eine Klasse auf der Reihe waere nach dem ersten Schritt
   weg. Die Einrast-Animation (`is-rastet`, 14. Runde) ist KOMPLETT RAUS (Nutzer:
   "statisch, das rote Dreieck bleibt mittig") — nicht wieder einbauen, ebenso wenig
   wie ein transform auf den Reihen. */
#svp-timeline.is-zieht,#svp-timeline.is-zieht *{cursor:grabbing;user-select:none}
.svp-tl__d:hover{background:var(--soft)}
.svp-tl__dbar{width:68%;min-height:2px;border-radius:2px 2px 0 0}
/* Vergangene Tage/Monate ausgegraut — wie in der Wochenkarte. */
.svp .svp-tl__d.is-past{opacity:.36}
/* Aktuelle Woche / gewaehlter Tag: heller Band + heutiger Tag als rote Linie.
   ⚠️ 13. Runde: Mischung gegen **transparent** statt gegen #fff — und zwar HIER in der
   Basis-Regel, nicht als Nacht-Override. Der Override hat nicht gegriffen (irgendetwas
   Spaeteres gewann), und ein transparenter Schleier braucht gar keine zwei Faelle: er
   liegt auf hellem wie auf dunklem Grund richtig. Nicht wieder gegen #fff mischen. */
.svp .svp-tl__d.is-cur{background:color-mix(in srgb, var(--heute) 12%, transparent)}
.svp .svp-tl__d.is-today::after{content:'';position:absolute;top:0;bottom:0;left:50%;
  transform:translateX(-50%);width:2px;background:var(--heute);opacity:.6}
/* Datums-Tooltip (liegt ausserhalb von .svp ⇒ feste Farben). */
.svp-tltip{position:fixed;z-index:90;background:#1b2a4a;color:#fff;font-size:12px;
  font-weight:700;padding:5px 9px;border-radius:7px;pointer-events:none;white-space:nowrap;
  box-shadow:0 4px 14px rgba(6,14,30,.35);transform:translate(-50%,-130%)}
body.svp-nacht .svp-tltip{background:#ececec;color:#151515}
body.svp-nacht .svp-tl__strip{background:#1e1e1e;border-color:#2a2a2a}
body.svp-nacht .svp-tl__months{border-top-color:#2a2a2a}
body.svp-nacht .svp-tl__mo{border-right-color:#2a2a2a;color:#ececec}
body.svp-nacht .svp-tl__d{border-right-color:#262626}

/* ---------- Schichtplan (18.07.): Mitarbeiter-Zeilen × Wochentage ----------
   Eigene Ansicht fuer Schichtbetriebe (Gastro): jede Ressource eine Zeile, die 7 Tage
   als Spalten, in die Zellen kommen Schicht-Chips (Frueh/Spaet/Nacht). Klick auf eine
   Zelle wechselt die Schicht durch. Nutzt dieselben KOLONNEN wie der Rest. */
/* position:relative = Anker fuer die Leer-Woche-Box, die sich darueberlegt. */
.svp-schicht{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:2px;
  position:relative}
/* Feste Zeilenhöhe (Nutzer 18.07.): Zeilen werden NICHT mehr gestreckt, wenn wenige
   Mitarbeiter da sind. Werden es zu viele, wächst das Raster über die Kartenhöhe hinaus
   → overflow:auto blendet einen vertikalen Scrollbalken ein; die Kopfzeile klebt (sticky). */
/* Zeilenhoehe 19.07. von 64 auf 78px: das Gesicht ist groesser und die Uhrzeit steht
   zweizeilig darunter/daneben — bei 64px stiess beides aneinander. */
.svp-sch__grid{flex:1;min-height:0;display:grid;grid-auto-rows:78px;align-content:start;
  border:1px solid var(--ln);border-radius:12px;overflow:auto;background:#fff}
/* Kopf: Ecke + Wochentage. Ecke und Namensspalte kleben links beim Querscrollen. */
.svp-sch__corner{display:flex;align-items:center;padding:0 14px;font-size:10.5px;font-weight:800;
  color:var(--faint);text-transform:uppercase;letter-spacing:.4px;background:var(--soft);
  border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);
  position:sticky;left:0;top:0;z-index:4}
/* ⚠️ Exakt das Design der Wochen-Pillen (Nutzer 19.07., 23. Runde, mit Screenshot):
   WEISSER Grund statt grauem, Trennlinie links statt rechts, gleiche Polsterung — sonst
   sehen Schichtplan und Wochenansicht aus wie zwei verschiedene Programme. */
.svp-sch__dh{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:#fff;padding:9px 8px;
  border-left:1px solid var(--ln);border-bottom:1px solid var(--ln);
  position:sticky;top:0;z-index:2}
.svp-sch__dh:first-of-type{border-left:0}
/* Tageskopf im DESIGN DER WOCHENANSICHT (Nutzer 19.07.): grosse Tageszahl, Wochentag
   klein darunter — dieselben Groessen wie .svp-pill (26px / 11px), damit Schichtplan
   und Wochenansicht nicht wie zwei Programme aussehen. */
.svp-sch__dh b{font-size:26px;font-weight:800;color:var(--ink);line-height:1.05;
  letter-spacing:-.02em}
.svp-sch__dh em{font-size:11px;font-weight:600;color:var(--faint);font-style:normal;
  line-height:1.1}
/* Heute wie in der Wochenansicht: nur die SCHRIFT rot, keine farbige Flaeche. */
.svp-sch__dh.is-today b,.svp-sch__dh.is-today em{color:var(--heute)}
.svp .svp-sch__dh.is-past{opacity:.5}
/* Namensspalte links (klebt) */
.svp-sch__name{display:flex;align-items:center;gap:10px;padding:0 12px;background:#fff;
  border-right:1px solid var(--ln);border-bottom:1px solid #eef0f3;
  position:sticky;left:0;z-index:1}
/* Gleiche Groesse wie die Gesichter im Raster (Nutzer 19.07.): 34px links neben 42px
   im Plan sah aus wie zwei verschiedene Dinge. */
.svp-sch__name .svp-ring{width:42px;height:42px;font-size:15px;flex:none}
.svp-sch__nm{display:flex;flex-direction:column;min-width:0}
.svp-sch__nm b{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.svp-sch__nm em{font-size:11px;color:var(--mut);font-style:normal}
/* Tageszellen */
.svp .svp-sch__cell{border:0;border-right:1px solid #eef0f3;border-bottom:1px solid #eef0f3;
  background:#fff;padding:5px;cursor:pointer;display:flex;align-items:stretch;
  transition:background .12s,opacity .12s}
/* Fahrer-Hervorhebung (19.07.): der betroffene tritt hervor, die anderen zurueck.
   Bleibt — verworfen wurde nur die Karten-Optik, nicht der Effekt. */
/* `is-fern` wird seit 19.07. nicht mehr gesetzt (kein Abdunkeln mehr) — Regel entfernt.
   Hervorgehoben wird nur noch mit einem Rahmen/hellen Grund. */
/* 19. Runde (Nutzer): Die Hover-Hervorhebung war ein 2-px-SCHWARZER Rahmen — "deutlich
   duenner, eventuell in einer Highlightfarbe wie Rot". Jetzt 1 px im Heute-Rot; das
   funktioniert hell wie dunkel, der Nacht-Sonderfall (weisser Rahmen) entfaellt. */
.svp .svp-b.is-fokus{box-shadow:0 0 0 1px var(--heute)}
.svp .svp-sch__cell.is-fokus .svp-sch__chip{background:var(--soft);
  box-shadow:inset 0 0 0 1px var(--heute)}
.svp .svp-stapel__k.is-fokus{box-shadow:inset 0 0 0 1px var(--heute)}
.svp .svp-sch__name.is-fokus{background:var(--soft)}
body.svp-nacht .svp .svp-sch__cell.is-fokus .svp-sch__chip{background:#2a2a2a}
.svp .svp-sch__cell:hover{background:var(--soft)}
/* 13. Runde (Nutzer): "nicht das Rot wie im Schichtplan, sondern dieses Weiße" —
   der Schichtplan uebernimmt exakt die Heute-Optik der WOCHENANSICHT
   (.svp-col__day.is-today): eine sehr weiche, fast weisse Flaeche statt des roten
   Schleiers. Rot bleibt allein die SCHRIFT im Spaltenkopf (.svp-sch__dh.is-today b),
   genau wie die Pille in der Woche. Wert absichtlich identisch mit Zeile ~1243. */
.svp .svp-sch__cell.is-today{background:#fbfbfc}
.svp .svp-sch__cell.is-past{opacity:.5}
/* ---- Schicht-Chip ----
   ⚠️ ZURUECKGEBAUT am 19.07. (7. Runde). Der Zwischenstand mit bildschirmfuellendem
   Gesicht (Quadrat auf voller Zeilenhoehe), Farbflaeche im Hintergrund und Position ganz
   rechts wurde vom Nutzer verworfen: "sieht schrecklich aus". Es gilt wieder der ruhige
   Stand davor — 42px-Gesicht, kein Hintergrund, Position klein UNTER der Uhrzeit.
   Nicht erneut aufblasen. */
/* Mitarbeiter-Pastell raus (Büro-Session) — seit der 3. Büro-Runde toent die
   POSITIONS-Farbe (--posfarbe); ohne Position bleibt der Chip transparent. */
.svp-sch__chip{flex:1;border-radius:10px;padding:4px 6px;display:flex;
  flex-direction:row;align-items:center;gap:8px;min-width:0;
  background:color-mix(in srgb, var(--posfarbe, transparent) 14%, transparent)}
body.svp-nacht .svp-sch__chip{
  background:color-mix(in srgb, var(--posfarbe, transparent) 20%, transparent)}
.svp-sch__chip .svp-ring{width:42px;height:42px;font-size:15px;flex:none}
.svp-sch__ctx{display:flex;flex-direction:column;gap:0;min-width:0;line-height:1.05}
/* Die Uhrzeit ist ein eigener Knopf: Klick DARAUF bearbeitet die Zeit, Klick daneben
   (in die Box) macht die Schicht frei. Deshalb sitzt sie in einem <button>, und die
   Zelle selbst ist ein <div> — verschachtelte <button> waeren ungueltiges HTML. */
/* Uhrzeit EINZEILIG ("18–04"), darunter klein die Position — Stand vor der 6. Runde. */
.svp .svp-sch__zeit{display:flex;flex-direction:column;align-items:flex-start;
  gap:1px;min-width:0;text-align:left}
.svp .svp-sch__zeit b{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.1;
  letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Ohne Ende etwas leiser — es ist eine halbe Angabe, das darf man sehen. */
.svp .svp-sch__zeit.is-offen b{color:var(--mut)}
.svp .svp-sch__zeit em{font-size:10.5px;font-weight:700;font-style:normal;color:var(--mut);
  line-height:1.1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svp .svp-sch__cell:focus-visible{outline:2px solid var(--heute);outline-offset:-2px}
/* „Vorwoche übernehmen" als grosser Blickfang MITTIG im Kalender (Nutzer 19.07.) —
   vorher ein schmaler Streifen oben rechts, den man uebersehen hat. */
/* ---- Schichten ziehen (Nutzer 19.07.) ----
   Der Geist ist eine Kopie am Zeiger; das Original bleibt blass stehen, damit sichtbar
   ist, WOHER die Schicht kommt. `pointer-events:none` ist Pflicht — sonst findet
   elementFromPoint immer nur den Geist und nie das Ziel darunter. */
.svp-zieh__geist{position:fixed;z-index:95;pointer-events:none;margin:0;
  opacity:.95;box-shadow:0 10px 26px rgba(27,42,74,.26);border-radius:10px;
  transform-origin:top left}
body.svp-zieht{cursor:grabbing}
body.svp-zieht *{cursor:grabbing !important}
.svp .is-quelle{opacity:.32}
/* ⚠️ Die gruene Flaeche/Umrandung am Ablegeziel ist RAUS (Nutzer 19.07.): sie hat den
   halben Tag eingefaerbt und vom eigentlichen Vorgang abgelenkt. Wohin die Schicht faellt,
   sagt jetzt allein der Einfuege-Strich. Klasse `is-ziel` bleibt fuer die Logik bestehen,
   zeichnet aber nichts mehr. */
/* Waehrend des Ziehens hat "+ Schicht" nichts verloren — man kann nicht gleichzeitig
   einen Block halten und einen Knopf druecken. */
body.svp-zieht .svp-stapel__add{opacity:0;pointer-events:none}
/* Einfuege-Strich wie in der Wochenplanung: waagerechter Strich mit T-Enden, in der
   Akzentfarbe. Zeigt, WO die Schicht in der Tagesliste landet. */
.svp-zieh__marke{position:absolute;left:6px;right:6px;height:0;z-index:8;pointer-events:none;
  border-top:2px solid var(--heute)}
.svp-zieh__marke::before,.svp-zieh__marke::after{content:'';position:absolute;top:-5px;
  width:2px;height:10px;background:var(--heute);border-radius:1px}
.svp-zieh__marke::before{left:-1px}
.svp-zieh__marke::after{right:-1px}

/* ---- Aus-/Einblenden animiert (Nutzer 19.07.) ----
   `is-geht` laeuft VOR dem Neuzeichnen: die Schichten des abgewaehlten Mitarbeiters
   blassen aus und schrumpfen leicht. Erst danach ruecken die anderen per FLIP nach.
   `is-kommt` ist die Gegenrichtung beim Wiedereinblenden. */
.svp .is-geht{opacity:0;transform:scale(.94);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
@keyframes svp-kommt{from{opacity:0;transform:scale(.94)} to{opacity:1;transform:none}}
.svp .is-kommt{animation:svp-kommt .3s ease both}

/* ---- Leere Woche: MINIMALISTISCH (Nutzer 19.07.) ----
   Keine Box, kein Rahmen, kein Schatten, keine Farbe. Der Text steht direkt auf dem
   ausgegrauten Kalender, der Knopf hat nur einen leichten grauen Grund. */
.svp-sch__leerbox{position:absolute;inset:0;z-index:6;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(255,255,255,.82)}
.svp-sch__leerinner{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:8px;max-width:380px}
.svp-sch__leerinner b{font-size:16px;font-weight:800;color:var(--ink);line-height:1.25}
.svp-sch__leerinner span{font-size:12.5px;font-weight:600;color:var(--mut);line-height:1.45}
.svp .svp-sch__leerbtn{margin-top:8px;display:flex;align-items:center;gap:8px;border:0;
  border-radius:10px;background:#eceef1;color:var(--ink);padding:11px 20px;font:inherit;
  font-size:13px;font-weight:800;cursor:pointer;transition:background .12s}
.svp .svp-sch__leerbtn i{font-style:normal;font-size:15px;color:var(--mut)}
.svp .svp-sch__leerbtn:hover{background:#e2e5e9}
.svp .svp-sch__leerskip{border:0;background:transparent;color:var(--faint);font:inherit;
  font-size:12px;font-weight:700;cursor:pointer;padding:2px}
.svp .svp-sch__leerskip:hover{color:var(--ink)}
body.svp-nacht .svp-sch__leerbox{background:rgba(21,21,21,.82)}
body.svp-nacht .svp-sch__leerinner b{color:#ececec}
body.svp-nacht .svp .svp-sch__leerbtn{background:#2e2e2e;color:#ececec}
body.svp-nacht .svp .svp-sch__leerbtn:hover{background:#383838}
/* Plus-Zeile unter dem letzten Mitarbeiter: unsichtbar, bis die Maus ins Raster kommt,
   dann faehrt sie sanft auf. `grid-column:1/-1` = ueber die ganze Breite. */
.svp .svp-sch__plus{grid-column:1/-1;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:12px;font-weight:800;color:var(--mut);
  display:flex;align-items:center;justify-content:center;gap:7px;
  height:0;opacity:0;transform:translateY(-6px);overflow:hidden;
  transition:height .16s ease,opacity .16s ease,transform .16s ease}
.svp-sch__grid:hover .svp-sch__plus{height:42px;opacity:1;transform:none}
.svp .svp-sch__plus:hover{color:var(--ink);background:var(--soft)}
.svp .svp-sch__plus span{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px}
body.svp-nacht .svp .svp-sch__plus span{background:#f0f0f0;color:#1e1e1e}
body.svp-nacht .svp .svp-sch__plus:hover{background:#2a2a2a;color:#ececec}
/* "+1" = an dem Tag liegen weitere Schichten, die im Raster keinen Platz haben. */
.svp-sch__mehr{margin-left:auto;align-self:center;flex:none;font-size:10px;font-weight:800;
  color:var(--mut);background:#eef0f3;border-radius:999px;padding:2px 6px;line-height:1.2;
  margin-right:6px}
body.svp-nacht .svp-sch__mehr{background:#2f2f2f;color:#c8c8c8}
/* Leere Zelle: WIRKLICH leer (Nutzer 19.07.) — das graue Geister-Gesicht ist raus.
   Nur beim Drueberfahren ein leiser gestrichelter Rahmen mit "+", damit die Zelle
   ueberhaupt als klickbar erkennbar bleibt. */
.svp-sch__leer{flex:1;display:flex;align-items:center;justify-content:center;border-radius:10px;
  border:1.5px dashed transparent;transition:border-color .12s,background .12s}
.svp-sch__leer i{font-style:normal;font-size:20px;font-weight:700;
  color:transparent;transition:color .12s}
.svp .svp-sch__cell.is-leer:hover .svp-sch__leer{border-color:#e3e6ea}
.svp .svp-sch__cell.is-leer:hover .svp-sch__leer i{color:#c4c9d1}
body.svp-nacht .svp .svp-sch__zeit b{color:#ececec}
body.svp-nacht .svp .svp-sch__zeit.is-offen b,
body.svp-nacht .svp .svp-sch__zeit em{color:#9a9a9a}
body.svp-nacht .svp .svp-sch__cell.is-leer:hover .svp-sch__leer{border-color:#333}
/* Nachtmodus */
body.svp-nacht .svp-sch__grid,
body.svp-nacht .svp-sch__name,
body.svp-nacht .svp .svp-sch__cell{background:#1e1e1e}
body.svp-nacht .svp-sch__corner,
/* Wie die Wochen-Pillen im Nachtmodus (#1e1e1e), nicht mehr das hellere Kopf-Grau. */
body.svp-nacht .svp-sch__dh{background:#1e1e1e}
body.svp-nacht .svp-sch__grid{border-color:#2a2a2a}
body.svp-nacht .svp-sch__corner,
body.svp-nacht .svp-sch__dh,
body.svp-nacht .svp-sch__name{border-right-color:#2a2a2a}
body.svp-nacht .svp .svp-sch__cell{border-right-color:#262626;border-bottom-color:#262626}
/* Der Abweich-Punkt (19.07. frueh) ist wieder RAUS: seit der Chip weder Farbe noch
   Vorlagen-Namen zeigt, gibt es keine "Vorlage", von der etwas abweichen koennte. */

/* ---- Schicht-Popover (19.07.): freie Schichtzeiten je Zelle ----
   Bewusst klein und direkt an der Zelle — kein Vollbild-Dialog wie die Vormerkung.
   Vorlagen bleiben als Ein-Klick-Abkuerzung, die Zeiten darunter sind frei. */
.svp-schpop{position:fixed;z-index:75;width:268px;background:#fff;border:1px solid var(--ln);
  border-radius:14px;box-shadow:0 14px 40px rgba(27,42,74,.18);padding:12px}
.svp-schpop__hd{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.svp-schpop__hd .svp-ring{width:30px;height:30px;font-size:11px;flex:none}
.svp-schpop__ht{display:flex;flex-direction:column;min-width:0}
.svp-schpop__ht b{font-size:13px;font-weight:800;color:var(--ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svp-schpop__ht em{font-size:11px;color:var(--mut);font-style:normal}
/* Gruppen-Zugehoerigkeit im Fenster-Kopf (19.07.). :empty ⇒ die Zeile verschwindet
   restlos, damit der Kopf bei Personen ohne Gruppe genauso flach bleibt wie bisher. */
.svp-schpop__grp{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.svp-schpop__grp:empty{display:none}
.svp .svp-schpop__x{margin-left:auto;border:0;background:transparent;color:var(--mut);
  font-size:15px;line-height:1;cursor:pointer;padding:3px 4px;border-radius:7px}
.svp .svp-schpop__x:hover{background:var(--soft);color:var(--ink)}
.svp-schpop__lbl{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mut);margin:0 0 6px}
/* Schmaler (Nutzer 19.07.): die Selects brauchen nicht die volle Breite, "14:00" ist kurz.
   Der Rest der Zeile gehoert dem Ein/Aus-Schalter fuers Ende. */
.svp-schpop__zeit{display:flex;align-items:center;gap:6px;margin:0 0 4px}
.svp-schpop__zeit select{flex:0 1 84px;min-width:0;border:1.5px solid var(--ln);
  border-radius:9px;padding:7px 6px;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink);background:#fff;cursor:pointer}
/* Schalter fuers Ende: normal nur ein rundes Symbol, beim Drueberfahren faehrt die
   Beschriftung "ohne Ende" nach RECHTS auf (Nutzer 19.07.: "schöner, animiert").
   Farbig: gruen = Ende ist gesetzt (Haken), rot = ohne Ende (X). */
.svp .svp-schpop__endean{margin-left:auto;flex:none;display:flex;align-items:center;gap:0;
  height:30px;padding:0 6px;border-radius:999px;border:1.5px solid var(--ln);
  background:#fff;cursor:pointer;font:inherit;overflow:hidden;
  transition:gap .18s ease,padding .18s ease,border-color .18s ease,background .18s ease}
.svp-schpop__endeikon{position:relative;width:16px;height:16px;flex:none;border-radius:50%;
  transition:background .18s ease}
/* Haken (Ende gesetzt) */
.svp .svp-schpop__endean[aria-pressed="true"] .svp-schpop__endeikon{background:#2fae66}
.svp .svp-schpop__endean[aria-pressed="true"] .svp-schpop__endeikon::after{content:'';position:absolute;
  left:5px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg)}
/* X (ohne Ende) */
.svp .svp-schpop__endean[aria-pressed="false"] .svp-schpop__endeikon{background:#e64b4b}
.svp .svp-schpop__endean[aria-pressed="false"] .svp-schpop__endeikon::before,
.svp .svp-schpop__endean[aria-pressed="false"] .svp-schpop__endeikon::after{content:'';position:absolute;
  left:4px;top:7px;width:8px;height:2px;background:#fff;border-radius:1px}
.svp .svp-schpop__endean[aria-pressed="false"] .svp-schpop__endeikon::before{transform:rotate(45deg)}
.svp .svp-schpop__endean[aria-pressed="false"] .svp-schpop__endeikon::after{transform:rotate(-45deg)}
/* Beschriftung faehrt seitlich auf — max-width statt display, damit es animierbar ist. */
.svp .svp-schpop__endean span{max-width:0;opacity:0;white-space:nowrap;font-size:11.5px;
  font-weight:800;color:var(--mut);
  transition:max-width .18s ease,opacity .16s ease,margin .18s ease}
.svp .svp-schpop__endean:hover,.svp-schpop__endean:focus-visible{border-color:#c8cdd6;background:var(--soft)}
.svp .svp-schpop__endean:hover span,.svp-schpop__endean:focus-visible span{max-width:80px;opacity:1;margin-left:6px}
.svp .svp-schpop__endean[aria-pressed="false"] span{max-width:80px;opacity:1;margin-left:6px;color:#c0392b}
body.svp-nacht .svp-schpop__endean{background:#1e1e1e;border-color:#333}
body.svp-nacht .svp-schpop__endean:hover{background:#2a2a2a}
.svp-schpop__zeit select:focus{outline:0;border-color:var(--heute)}
.svp-schpop__zeit i{font-style:normal;font-size:11.5px;color:var(--mut);font-weight:700}
.svp-schpop__dauer{font-size:11px;color:var(--mut);margin:0 0 12px;min-height:14px}
.svp-schpop__dauer b{color:var(--ink);font-weight:800}
.svp-schpop__lbl span{font-weight:600;letter-spacing:0;text-transform:none;color:var(--faint)}
/* Personenwahl im Schicht-Fenster: waagerecht scrollbar, damit auch 15 Leute passen. */
/* ⚠️ Polster ringsum, NICHT nur unten: der aktive Kreis wird per `scale` groesser und
   traegt einen Ring aus `box-shadow`. Ohne Luft schneidet `overflow-x:auto` beides oben
   und seitlich ab — die Kreise sahen abgeflacht aus (Nutzer 19.07.). */
.svp-schpop__wer{display:flex;gap:6px;margin:0 0 12px;overflow-x:auto;padding:4px 4px 5px;
  scrollbar-width:none}
.svp-schpop__wer::-webkit-scrollbar{display:none}
/* ⚠️ Die NICHT gewaehlten sind nicht mehr ausgegraut (Nutzer 19.07.) — man soll alle
   Gesichter gleich gut erkennen. Markiert wird allein der Gewaehlte, mit einem roten Ring. */
.svp .svp-schpop__wer button{border:0;background:transparent;padding:0;cursor:pointer;flex:none;
  border-radius:50%;transition:transform .12s}
.svp .svp-schpop__wer button:hover{transform:scale(1.06)}
.svp-schpop__wer .svp-ring{width:38px;height:38px;font-size:13px}
.svp .svp-schpop__wer button.is-akt .svp-ring{box-shadow:0 0 0 2.5px var(--heute)}
/* Ziehbar, damit man auch bei vielen Mitarbeitern alle erreicht. */
.svp .svp-schpop__wer{cursor:grab}
.svp .svp-schpop__wer.is-zieht{cursor:grabbing;user-select:none}
/* Die Stile der Tausch-LISTE (.svp-schpop__tausch/-z) sind in der 68. Runde mit dem
   Markup entfallen — getauscht wird nur noch per Ziehen. */
/* ---- Verwaltungsfenster: Mitarbeiter + Positionen (Nutzer 19.07.) ---- */
.svp-verw{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(27,42,74,.34)}
/* FESTE Groesse (12. Runde, Nutzer): "der Tab soll eine fixe Breite und eine fixe Höhe
   haben und sich nicht bewegen". Vorher war es `max-height` ⇒ das Fenster sprang bei
   jedem Reiter-Wechsel auf die Hoehe des jeweiligen Inhalts. Jetzt steht der Rahmen
   still und NUR das Blatt darin scrollt. `height` statt `max-height` ist der Kern. */
.svp-verw__box{width:min(680px,100%);height:min(78vh,620px);display:flex;
  flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 64px rgba(27,42,74,.28)}
/* ⚠️ `flex:none` an Kopf UND Reitern (15. Runde, Nutzer-Bugmeldung: "wenn man mehrere
   Gruppen erstellt und scrollt, rutscht das Ganze so weit nach oben, dass die Tabs
   überschnitten werden"). Die Box ist ein Spalten-Flex mit FESTER Hoehe — Kopf und
   Reiter sind Flex-Kinder mit dem Standard `flex-shrink:1` und wurden vom wachsenden
   Blatt zusammengequetscht, bis der Inhalt darueberlief. Dieselbe Falle wie bei
   `.svp-calhd` in der 11. Runde. NICHT entfernen. */
.svp-verw__hd{display:flex;align-items:center;padding:14px 16px;flex:none;
  border-bottom:1px solid var(--ln)}
.svp-verw__hd b{font-size:15px;font-weight:800;color:var(--ink)}
.svp-verw__hd button{margin-left:auto;border:0;background:transparent;color:var(--mut);
  font-size:16px;cursor:pointer;padding:4px 6px;border-radius:8px}
.svp-verw__hd button:hover{background:var(--soft);color:var(--ink)}
/* REITER (11. Runde, Nutzer): "oben Tabs, wo man Mitarbeiter / Positionen / feste
   Schichten / Gruppen einstellen kann". Ersetzt das frühere Zweispalten-Grid
   (.svp-verw__body/.svp-verw__sp) samt Sammel-Bereich darunter — dort stand alles
   gleichzeitig und wurde eng. Jetzt hat jeder Bereich die volle Fensterbreite. */
/* 15. Runde (Nutzer): Reiter als **einzelne PILLEN** statt Unterstrich-Slider — gleiche
   Optik wie die Anzeige-Wahl im Positionen-Reiter, nur ohne gemeinsamen Trog.
   ⚠️ `flex:none` ist Pflicht, siehe Kommentar an .svp-verw__hd (Tab-Ueberlappungs-Bug). */
.svp-verw__tabs{display:flex;gap:6px;padding:12px 16px;flex:none;flex-wrap:wrap;
  border-bottom:1px solid var(--ln)}
.svp .svp-verw__tabs button{flex:none;cursor:pointer;
  padding:8px 16px;font:inherit;font-size:12.5px;font-weight:700;color:var(--mut);
  border:1.5px solid var(--ln);border-radius:999px;background:#fff;white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s}
.svp .svp-verw__tabs button:hover{color:var(--ink);border-color:#c8cdd6}
/* Aktive Pille: voll gefuellt — eindeutig, auch ohne Unterstrich. */
.svp .svp-verw__tabs button.is-akt{color:#fff;background:var(--ink);border-color:var(--ink)}
body.svp-nacht .svp .svp-verw__tabs button{background:#1e1e1e;border-color:#3a3a3a}
body.svp-nacht .svp .svp-verw__tabs button.is-akt{background:#f0f0f0;border-color:#f0f0f0;
  color:#1e1e1e}
/* ---- 13. Runde (Nutzer): EINGABEFELDER IM SHENO-DESIGN ----
   "Unser Design hat ja immer überall große minimalistische abgerundete Felder zum
   Eintippen." Uebernommen aus `websites/alstermove/anfrage_tool.html` (.amf__input):
   2 px Rahmen · border-radius:999px · 40 px hoch · 13,5 px / 600 · Fokus = Akzent-Orange.
   ⚠️ Die Schriftart musste NICHT angefasst werden — der Kalender laeuft schon auf
   Manrope (s. @font-face oben), derselben Schrift wie das Anfrage-Tool.
   Gilt nur INNERHALB des Verwaltungsfensters, damit die kompakten Felder im
   Schicht-Fenster und in der Kopfleiste unveraendert bleiben. */
.svp .svp-verw input[type=text],
.svp .svp-verw select,
.svp .svp-verw .svp-set__farbe input.svp-set__name{
  border:2px solid var(--ln);border-radius:999px;background:#fff;color:var(--ink);
  font-family:inherit;font-size:13.5px;font-weight:600;height:40px;padding:0 14px;
  transition:border-color .15s,background .15s}
.svp .svp-verw input[type=text]:hover,
.svp .svp-verw .svp-set__farbe input.svp-set__name:hover{border-color:#c8cdd6}
.svp .svp-verw input[type=text]:focus,
.svp .svp-verw select:focus,
.svp .svp-verw .svp-set__farbe input.svp-set__name:focus{
  outline:none;border-color:var(--o);background:#fff}
body.svp-nacht .svp .svp-verw input[type=text],
body.svp-nacht .svp .svp-verw select,
body.svp-nacht .svp .svp-verw .svp-set__farbe input.svp-set__name{
  background:#1e1e1e;border-color:#3a3a3a;color:#ececec}
/* Ein Blatt = ein Reiter-Inhalt. Nur das aktive ist sichtbar (svp-hidden).
   `flex:1 1 auto` + `min-height:0` ⇒ das Blatt fuellt die feste Fensterhoehe und
   scrollt INNEN; der Fensterrahmen bleibt dadurch stehen. */
.svp-verw__blatt{padding:16px;overflow-y:auto;min-height:0;flex:1 1 auto}
/* Anzahl IN der Reiter-Pille (17. Runde, Nutzer — ersetzt die grosse Zeile der
   16. Runde): "schreib es nicht gross drunter, sondern einfach in der Pille (8)".
   Leerer Inhalt ⇒ kein Abstand, die Pille sieht aus wie vorher. */
.svp .svp-verw__tabs button i{font-style:normal;font-weight:700;opacity:.6;
  font-variant-numeric:tabular-nums}
.svp .svp-verw__tabs button i:empty{display:none}
/* Speichern-Knopf (13. Runde): ausgegraut, solange nichts geaendert wurde — sobald es
   etwas zu sichern gibt, wird er voll ausgefuellt (dunkel) und damit sichtbar aktiv. */
/* 16. Runde (Nutzer): "die Farbe auf schwarz" — nicht mehr das Navy `--ink`, sondern
   echtes Schwarz. Gilt auch fuer die aktive Anzeige-Pille bei den Positionen. */
/* 68. Runde: eigener Fuss unter den Reiter-Blaettern — der Knopf gilt fuer alle vier
   Bereiche und bleibt beim Scrollen im Blatt sichtbar.
   ⚠️ 75. Runde (Nutzer): "der klebt zu weit an der Kante unten" — der Fuss hatte unten
   0 px Polster, der Knopf sass also direkt auf der Fensterkante. Jetzt 16 px rundum,
   passend zum Polster der Blaetter darueber. */
.svp-verw__fuss{flex:none;padding:12px 16px 16px;border-top:1px solid var(--ln)}
body.svp-nacht .svp-verw__fuss{border-color:#333}
/* ⚠️ 75. Runde: nicht mehr ueber die volle Breite. Ein Knopf, der die ganze Fensterbreite
   fuellt, wirkt wie eine Wand; er ist jetzt inhaltsbreit und rechtsbuendig — dort, wo man
   den Abschluss einer Eingabemaske erwartet. */
.svp .svp-verw__save{display:block;width:auto;margin:0 0 0 auto;
  padding:10px 26px;border-radius:999px;border:0;font:inherit;font-size:13px;font-weight:800;
  cursor:pointer;background:#111;color:#fff;
  transition:background .15s,color .15s,opacity .15s}
.svp .svp-verw__save:hover:not(:disabled){opacity:.88}
.svp .svp-verw__save:disabled{background:var(--soft);color:var(--faint);cursor:default}
body.svp-nacht .svp .svp-verw__save{background:#f0f0f0;color:#1e1e1e}
body.svp-nacht .svp .svp-verw__save:disabled{background:#2a2a2a;color:#6a6a6a}
/* Mitarbeiter in ZWEI Spalten (12. Runde, Nutzer) — bei 8+ Leuten war die einspaltige
   Liste unnoetig lang, obwohl rechts die halbe Fensterbreite leer stand.
   ⚠️ `minmax(0,1fr)` statt `1fr` (15. Runde, Nutzer: "man darf NIE nach rechts scrollen
   müssen"): `1fr` heisst in Wahrheit `minmax(auto,1fr)` — die Spalte wird also nie
   schmaler als ihr Inhalt. Gesicht (40) + Name + Farbkreis + ✕ waren zusammen breiter
   als die halbe Fensterbreite ⇒ das Blatt lief 721 statt 680 px und musste quer
   gescrollt werden. Mit `minmax(0,…)` darf die Spalte schrumpfen, und `min-width:0`
   an den Zeilen gibt die Schrumpfung an die Felder weiter. */
.svp-verw__zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px}
.svp-verw__zwei > *{min-width:0}
@media (max-width:560px){.svp-verw__zwei{grid-template-columns:minmax(0,1fr)}}
/* GROESSERE Gesichter (Nutzer: "die Icons deutlich größer machen") — 26 → 40 px in der
   Mitarbeiterliste und 20 → 34 px in den Gruppen-Pillen. */
.svp-verw__zwei .svp-set__farbe .svp-ring{width:40px;height:40px;font-size:14px}
.svp-verw__zwei .svp-set__farbe{gap:10px;padding:6px 4px}
/* Positionen "näher aneinanderrücken" (Nutzer): das Namensfeld stand auf flex:1 und
   schob das ✕ ans ganz rechte Ende der Zeile — es sah "viel zu breit gezogen" aus.
   Jetzt waechst der Name nur bis zu seiner Textbreite, das ✕ folgt direkt dahinter. */
#svp-verw-pos .svp-set__farbe{gap:7px}
#svp-verw-pos .svp .svp-set__farbe input.svp-set__name,
#svp-verw-pos input.svp-set__name{flex:0 1 auto;width:auto;max-width:150px}
#svp-verw-pos .svp-set__del{margin-right:auto}
body.svp-nacht .svp-verw__tabs{border-bottom-color:#333}
/* Wochentag-Reihe der festen Schichten (unveraendert, nur ohne eigenen Trennstrich). */
.svp-verw__wtrow{display:flex;gap:6px;margin:8px 0 10px;flex-wrap:wrap}
.svp-verw__wt{position:relative;border:1px solid var(--ln);background:#fff;border-radius:999px;
  padding:5px 12px;font:inherit;font-size:12px;font-weight:800;color:var(--mut);cursor:pointer}
.svp-verw__wt:hover{background:var(--soft);color:var(--ink)}
.svp-verw__wt.is-akt{background:var(--ink);border-color:var(--ink);color:#fff}
/* Zaehler am Wochentag: wie viele feste Schichten dort hinterlegt sind. */
.svp-verw__wt i{font-style:normal;margin-left:5px;font-size:10.5px;opacity:.65}
.svp-verw__slot{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.svp-verw__slotzeit,.svp-verw__slotpos{border:1px solid var(--ln);border-radius:9px;
  background:#fff;padding:5px 7px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink)}
/* ⚠️ 14. Runde (Nutzer): "die Zeiten deutlich schmaler, sodass viel mehr Platz für die
   Auswahl der Positionen — die ist aktuell ein kleiner Minitab, das ist ungenügend."
   Die Zeit braucht nur "16:00" bzw. "offen" ⇒ feste, knappe Breite; ALLES andere geht
   an die Position. `flex:none` an den Zeiten ist noetig, sonst teilen sich die drei
   Selects den Platz gleichmaessig (Standard `flex:0 1 auto` mit Inhaltsbreite).
   ⚠️ Selektor MUSS `select` enthalten: die allgemeine Feld-Regel der 13. Runde
   (`.svp .svp-verw select`, Spezifitaet 0-2-1) setzt Polster und Radius aller Felder im
   Fenster — eine reine Klassen-Regel (0-2-0) verliert dagegen und die Zeiten blieben breit. */
.svp .svp-verw select.svp-verw__slotzeit{flex:none;width:92px;min-width:92px;
  text-align:center;padding:0 8px}
.svp .svp-verw select.svp-verw__slotpos{flex:1 1 auto;min-width:0;padding:0 14px}
.svp-verw__slotstrich{color:var(--mut);font-weight:800}
/* ---- Gruppen / Kolonnen im Verwaltungsfenster (19.07.) ---- */
.svp-verw__grp{border:1px solid var(--ln);border-radius:12px;padding:8px 10px 10px;
  margin-bottom:8px;background:#fff}
/* Der Farbkreis der Gruppe erbt die .svp-set__farbe-Rundung (gleiche Optik wie Personen). */
.svp-verw__grpkopf{display:flex;align-items:center;gap:9px}
.svp-verw__grpkopf input[type=color]{width:22px;height:22px;flex:none;padding:0;
  border:1px solid var(--ln);border-radius:50%;background:none;cursor:pointer;overflow:hidden}
.svp-verw__grpkopf input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.svp-verw__grpkopf input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.svp-verw__grpkopf i{font-style:normal;font-size:11px;color:var(--faint);flex:none}
/* Mitglieder-Auswahl: ALLE Personen stehen da, zugeordnete sind voll, die anderen blass.
   Bewusst kein Aufklapp-Menue — die Zuordnung ist ein Blick + ein Klick. */
.svp-verw__mitgl{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* ---- 14. Runde (Nutzer-Foto): Mitglieder-Pille im Sheno-Look ----
   Vorlage war ein Screenshot: weisse Pille, **kraeftiger dunkler Rand**, Name mittig,
   und das Gesicht liegt **exakt auf der linken Rundung** — es deckt den Bogen ab, statt
   daneben zu sitzen ("dass das Icon sich quasi perfekt über die Kante vom Rand legt").
   Der Trick: Pille exakt so hoch wie das Gesicht (38 px), `padding-left:0`,
   `border-radius:999px` ⇒ der linke Halbkreis der Pille IST der Gesichtskreis. Das
   Gesicht bekommt `margin:-2px` gegen die Rahmenstaerke, damit es den Rand ueberlappt
   statt ihn frei zu lassen. */
.svp .svp-verw__mitgl button{display:flex;align-items:center;gap:10px;
  padding:0 18px 0 0;height:38px;
  border-radius:999px;border:2px solid var(--ln);background:#fff;cursor:pointer;
  font-size:13px;font-weight:800;color:var(--mut);opacity:.55;
  transition:opacity .15s,border-color .15s,color .15s,transform .15s}
.svp .svp-verw__mitgl button:hover{opacity:.9;border-color:#c3c8d2}
/* Zugeordnet = voller Kontrast + dunkler Rand, genau wie in der Vorlage. */
.svp .svp-verw__mitgl button.is-drin{opacity:1;color:var(--ink);border-color:var(--ink)}
/* Gesicht randlos und buendig: Groesse = Pillenhoehe, negativer Rand deckt den Rahmen. */
.svp .svp-verw__mitgl .svp-ring{width:38px;height:38px;font-size:13px;flex:none;
  margin:-2px 0 -2px -2px;box-shadow:none;border:0}
/* Aufleuchten beim Drueberfahren (Nutzer 13. Runde) — ohne Schatten (Nutzer 14. Runde:
   "entnimm mir bitte die Schattierungen von allen Icons"). */
.svp .svp-verw__mitgl button:hover{opacity:1;transform:translateY(-1px)}
/* Gruppen-Punkte (klein, farbig) — hinter dem Namen in der Mitarbeiter-Liste und als
   Pille im Schicht-Fenster. EIN Baustein fuer beide Orte. */
.svp-grppunkt{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.svp-grppille{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 5px;
  border-radius:999px;font-size:10px;font-weight:700;color:var(--mut);
  background:var(--soft);border:1px solid var(--ln)}
.svp-verw__grpmarker{display:flex;gap:3px;flex:none;margin-right:2px}
body.svp-nacht .svp-verw__grp{background:#242424;border-color:#333}
body.svp-nacht .svp .svp-verw__mitgl button{background:#242424;border-color:#333}
body.svp-nacht .svp-grppille{background:#2a2a2a;border-color:#3a3a3a}
/* Farbwaehler je Position (Büro-Session 3. Runde). */
.svp .svp-set__posfarbe{width:26px;height:26px;padding:0;border:1px solid var(--ln);
  border-radius:8px;background:#fff;cursor:pointer;flex:none}
body.svp-nacht .svp .svp-set__posfarbe{background:#242424;border-color:#333}
body.svp-nacht .svp-verw__blatt{border-top-color:#333}
body.svp-nacht .svp-verw__wt{background:#242424;border-color:#333;color:#9a9a9a}
body.svp-nacht .svp-verw__wt.is-akt{background:#f0f0f0;border-color:#f0f0f0;color:#1e1e1e}
body.svp-nacht .svp-verw__slotzeit,body.svp-nacht .svp-verw__slotpos{
  background:#242424;border-color:#333;color:#ececec}
body.svp-nacht .svp-verw__box{background:#242424}
body.svp-nacht .svp-verw__hd{border-bottom-color:#333}
body.svp-nacht .svp-verw__hd b{color:#ececec}
/* Die Symbolreihe .svp-vopt ist in der 59. Runde entfallen (Nutzer: nur noch zwei
   Icons oben links) — ihre Stile sind mit ihr gegangen. */
/* ---- Icon-Auswahl (13. Runde) ---- */
.svp-icons{position:fixed;inset:0;z-index:96;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(27,42,74,.34)}
.svp-icons__box{width:min(560px,100%);height:min(74vh,560px);display:flex;
  flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 64px rgba(27,42,74,.28)}
.svp-icons__such{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ln)}
.svp .svp-icons__such input{flex:1;min-width:0;border:2px solid var(--ln);border-radius:999px;
  background:#fff;color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:600;
  height:40px;padding:0 14px;transition:border-color .15s}
.svp .svp-icons__such input:focus{outline:none;border-color:var(--o)}
.svp .svp-icons__weg{flex:none;border:2px solid var(--ln);border-radius:999px;background:#fff;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--mut);padding:0 14px;
  height:40px;cursor:pointer;transition:border-color .15s,color .15s}
.svp .svp-icons__weg:hover{border-color:var(--ink);color:var(--ink)}
.svp-icons__body{flex:1 1 auto;overflow-y:auto;min-height:0;padding:14px 16px 18px}
.svp-icons__gr{margin-bottom:14px}
.svp-icons__gr > p{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.7px;
  text-transform:uppercase;color:var(--faint)}
.svp-icons__gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
/* Ein Icon-Feld: gleiches Hover-Prinzip wie die Farbkreise (13. Runde) — es waechst,
   damit man merkt, dass man es anklicken kann. */
.svp .svp-icons__b{aspect-ratio:1;border:1px solid var(--ln);border-radius:12px;background:#fff;
  color:var(--mut);cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;transition:transform .15s cubic-bezier(.2,.7,.3,1),box-shadow .15s,
    border-color .15s,color .15s}
.svp .svp-icons__b svg{width:22px;height:22px}
.svp .svp-icons__b:hover{transform:scale(1.12);color:var(--ink);border-color:var(--ink);
  box-shadow:0 4px 12px rgba(27,42,74,.16)}
.svp .svp-icons__b.is-akt{border-color:var(--o);color:var(--o);border-width:2px}
.svp-icons__leer{font-size:12.5px;color:var(--faint);padding:8px 2px}
body.svp-nacht .svp-icons__box{background:#242424}
body.svp-nacht .svp-icons__such{border-bottom-color:#333}
body.svp-nacht .svp .svp-icons__such input,
body.svp-nacht .svp .svp-icons__weg,
body.svp-nacht .svp .svp-icons__b{background:#1e1e1e;border-color:#3a3a3a;color:#ececec}
/* Icon-Knopf in der Positionszeile (zeigt das aktuelle Symbol). */
.svp .svp-set__ikon{flex:none;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--ln);background:#fff;color:var(--mut);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:transform .15s cubic-bezier(.2,.7,.3,1),box-shadow .15s,border-color .15s,color .15s}
.svp .svp-set__ikon svg{width:18px;height:18px}
.svp .svp-set__ikon:hover{transform:scale(1.18);color:var(--ink);border-color:var(--ink);
  box-shadow:0 3px 10px rgba(27,42,74,.18)}
.svp .svp-set__ikon em{font-style:normal;font-size:15px;line-height:1;opacity:.55}
body.svp-nacht .svp .svp-set__ikon{background:#1e1e1e;border-color:#3a3a3a}
/* Anzeige-Wahl oben im Positionen-Reiter.
   14. Runde (Nutzer): "die Tabs sollen komplett abgerundete Kanten links und rechts haben
   und die gleiche Form wie die anderen Tabs" ⇒ Pillen-Gruppe im Stil von .svp-modes
   (grauer Trog, aktive Pille weiss). Vorher waren es eckige 9-px-Kaesten. */
.svp-verw__anzeige{display:flex;gap:2px;margin:0 0 14px;background:var(--soft);
  border-radius:999px;padding:3px}
.svp .svp-verw__anzeige button{flex:1;padding:8px 10px;border-radius:999px;
  background:transparent;border:0;font-family:inherit;font-size:12px;font-weight:700;
  color:var(--mut);cursor:pointer;white-space:nowrap;
  transition:color .15s,background .15s}
.svp .svp-verw__anzeige button:hover{color:var(--ink)}
/* 16. Runde (Nutzer): aktive Pille KOMPLETT SCHWARZ statt weiss — deutlicher Kontrast. */
.svp .svp-verw__anzeige button.is-on{color:#fff;background:#111}
body.svp-nacht .svp-verw__anzeige{background:#242424}
body.svp-nacht .svp .svp-verw__anzeige button{background:transparent}
body.svp-nacht .svp .svp-verw__anzeige button.is-on{background:#3a3a3a;color:#ececec}
/* ---- Kleiner Hinweis mit OK (12. Runde) ----
   z-index ueber dem Verwaltungsfenster (90), sonst laege er darunter. */
.svp-hinweis{position:fixed;inset:0;z-index:95;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(27,42,74,.34)}
.svp-hinweis__box{width:min(340px,100%);background:#fff;border-radius:14px;padding:18px;
  box-shadow:0 24px 64px rgba(27,42,74,.28);text-align:center}
.svp-hinweis__box b{display:block;font-size:14px;font-weight:800;color:var(--ink);margin-bottom:6px}
.svp-hinweis__box p{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--mut)}
.svp .svp-hinweis__box button{padding:9px 26px;border-radius:9px;border:0;cursor:pointer;
  background:var(--ink);color:#fff;font:inherit;font-size:12.5px;font-weight:800}
.svp .svp-hinweis__box button:hover{opacity:.88}
body.svp-nacht .svp-hinweis__box{background:#242424}
body.svp-nacht .svp-hinweis__box b{color:#f0f0f0}
body.svp-nacht .svp .svp-hinweis__box button{background:#f0f0f0;color:#1e1e1e}
/* ---- Aufklapp-Schnellzugriff (58. Runde, Nutzer-Idee aus der 57.) ----
   Kleiner Pfeil DIREKT hinter der Symbolreihe; das Panel darunter zeigt dieselben
   Schalter mit Worten. Immer sichtbar — auch ohne Gruppen, denn genau dann braucht
   man den Weg zur Gruppen-Anlage unten im Panel. */
/* 59. Runde: der zweite Kopf-Knopf, oeffnet beim Drueberfahren.
   63. Runde: Aussehen kommt komplett von `.svp-filter` (Klasse im Markup) — hier bleibt
   nur, was die Pille NICHT mitbringt. */
.svp-schnell{position:relative;flex:none}
.svp .svp-schnell summary{justify-content:center}
/* Unsichtbare Bruecke ueber den Spalt zwischen Knopf und Panel: ohne sie verlaesst
   der Zeiger auf dem Weg nach unten kurz das <details> und der Hover-Aufklapper
   fiele einem unter der Hand wieder zu. */
.svp-schnell__pop::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
/* ⚠️ 61. Runde: RECHTSbuendig — der Knopf sitzt jetzt oben rechts neben dem Zahnrad,
   ein linksbuendiges Panel wuerde ueber die Kartenkante hinausragen (wie .svp-filter__pop,
   die aus demselben Grund rechts haengt). */
/* 63. Runde: Optionen waagerecht statt untereinander.
   ⚠️ 68. Runde (Nutzer): Aus den KACHELN (Symbol oben, Text darunter) sind wieder
   ZEILEN geworden — "das Icon soll links sein, und rechts davon der Text" — und die
   GRUPPEN stehen jetzt als SPALTEN nebeneinander ("du solltest mir Spalten erstellen,
   quasi für Sortierung, Planen"). Also: waagerecht sind die Themen, senkrecht ihre
   Optionen. Dazu deutlich flacher: die Kacheln waren "viel zu groß und dick". */
.svp-schnell__pop{position:absolute;right:0;top:40px;z-index:30;
  width:max-content;max-width:min(92vw,560px);
  background:#fff;border:1px solid var(--ln);border-radius:var(--r-md);padding:10px;
  box-shadow:0 12px 32px rgba(27,42,74,.16);
  max-height:min(70vh,540px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;align-items:flex-start;gap:6px}
/* Eine Spalte = ein Thema (Sortierung, Planen, Oben zeigen …). */
.svp-schnell__sp{display:flex;flex-direction:column;min-width:140px;flex:0 0 auto}
.svp-schnell__sp + .svp-schnell__sp{border-left:1px solid var(--ln);padding-left:6px}
/* Der Fuss (Gruppen verwalten + Hinweis) steht unter ALLEN Spalten, nicht in einer. */
.svp-schnell__fuss{flex-basis:100%;order:9;margin-top:2px;padding-top:8px;
  border-top:1px solid var(--ln)}
body.svp-nacht .svp-schnell__sp + .svp-schnell__sp,
body.svp-nacht .svp-schnell__fuss{border-color:#333}
/* Ueberschriften: groesser, dunkler, in der Display-Optik des Sheno-Designs (leichtes
   Gewicht + negative Laufweite, wie .svp-titel__sub i) statt des fruehereren
   Kapitaelchen-Kleingedruckten (Nutzer: "ein bisschen größer, schönere Schrift,
   vielleicht in einem dunklen Ton"). */
.svp-schnell__h{margin:0 4px 5px;font-size:12.5px;font-weight:700;
  letter-spacing:-.01em;text-transform:none;color:var(--ink)}
/* Optionen einer Spalte: untereinander, kompakte Zeilen. */
.svp-schnell__reihe{display:flex;flex-direction:column;gap:2px;align-items:stretch}
/* ⚠️ 68. Runde: Icon LINKS, Text rechts daneben — und flach (28 px statt 60+).
   Aktiv wird nur noch durch Flaeche + Textfarbe markiert, kein 1,5-px-Rahmen mehr:
   der machte die Zeilen optisch "dick". */
.svp .svp-schnell__row{display:flex;flex-direction:row;align-items:center;gap:8px;
  width:100%;min-width:0;
  padding:6px 8px;border:0;border-radius:8px;
  background:transparent;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--mut);text-align:left;
  line-height:1.2;transition:background .12s,color .12s}
.svp .svp-schnell__row:hover{background:var(--soft);color:var(--ink)}
.svp .svp-schnell__row svg{width:16px;height:16px;color:var(--faint);flex:none}
.svp .svp-schnell__row:hover svg{color:var(--ink)}
.svp .svp-schnell__row span{flex:1 1 auto;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.svp .svp-schnell__row.is-on{background:var(--soft);color:var(--ink);font-weight:800}
.svp .svp-schnell__row.is-on svg{color:var(--ink)}
/* Der Haken ist zurueck (68. Runde): bei Zeilen ohne Rahmen ist er die klarste
   Zustandsmarke — er sitzt rechts und haelt seinen Platz, damit nichts springt. */
.svp .svp-schnell__row .svp-schnell__hak{display:block;width:14px;height:14px;
  margin-left:auto;color:transparent;flex:none}
.svp .svp-schnell__row.is-on .svp-schnell__hak{color:var(--o)}
/* Dieselben beschrifteten Zeilen auch im Zahnrad (Farbwahl, 59. Runde) — beides sind
   Aufklapp-Panels, also darf es sich gleich anfuehlen. */
.svp-set__farbe{margin:0 0 2px}
body.svp-nacht .svp-schnell__pop{background:#1e1e1e;border-color:#333}
body.svp-nacht .svp .svp-schnell__row:hover{background:#2a2a2a}
body.svp-nacht .svp .svp-schnell__row.is-on{color:#ececec}
body.svp-nacht .svp .svp-schnell__row.is-on svg{color:#ececec}
/* Knopf im Zahnrad, der das Fenster oeffnet. */
.svp .svp-set__oeffnen{width:100%;display:flex;align-items:center;justify-content:center;
  gap:7px;padding:9px;border-radius:9px;border:1.5px solid var(--ln);background:#fff;
  font:inherit;font-size:12.5px;font-weight:800;color:var(--ink);cursor:pointer}
.svp .svp-set__oeffnen:hover{border-color:var(--ink);background:var(--soft)}
body.svp-nacht .svp .svp-set__oeffnen{background:#1e1e1e;border-color:#333;color:#ececec}
/* Farbwaehler im Schicht-Fenster. */
.svp-schpop__farbe{display:flex;align-items:center;gap:8px;margin:0 0 12px;cursor:pointer}
.svp-schpop__farbe input[type=color]{width:26px;height:26px;padding:0;flex:none;
  border:1px solid var(--ln);border-radius:50%;background:none;cursor:pointer}
.svp-schpop__farbe input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.svp-schpop__farbe input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.svp-schpop__farbe input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
.svp-schpop__farbe span{font-size:11.5px;font-weight:700;color:var(--mut)}
/* Positions-Knoepfe: umbrechend, damit auch acht Rollen ohne Quetschen passen. */
.svp-schpop__pos{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.svp .svp-schpop__pos button{border:1.5px solid var(--ln);background:#fff;border-radius:999px;
  padding:5px 11px;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;
  color:var(--ink);transition:all .12s}
.svp .svp-schpop__pos button:hover{border-color:#c8cdd6}
.svp .svp-schpop__pos button.is-akt{background:var(--ink);border-color:var(--ink);color:#fff}
body.svp-nacht .svp-schpop__pos button{background:#1e1e1e;border-color:#333;color:#ececec}
body.svp-nacht .svp-schpop__pos button.is-akt{background:#f0f0f0;border-color:#f0f0f0;color:#1e1e1e}
/* ⚠️ OHNE `.svp `-Prefix: das Popover haengt am <body>, nicht in .svp (wie .svp-schpop__zeit
   darueber). Mit Prefix greift die Regel nie. */
.svp-schpop__txt{width:100%;border:1.5px solid var(--ln);border-radius:9px;
  padding:8px 9px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);
  background:#fff;margin:0 0 12px}
.svp-schpop__txt::placeholder{font-weight:600;color:var(--faint)}
.svp-schpop__txt:focus{outline:0;border-color:var(--heute)}
body.svp-nacht .svp-schpop__txt{background:#1e1e1e;border-color:#333;color:#ececec}
/* Untereinander statt nebeneinander (Nutzer 19.07.): Speichern volle Breite, Entfernen
   darunter bewusst leise — weiss mit hauchduennem Rahmen, keine Signalfarbe. */
.svp-schpop__fuss{display:flex;flex-direction:column;gap:6px}
/* Vollrunde Pillen wie im uebrigen Design (Nutzer 19.07.).
   Der Speichern-Knopf ist LEISE, solange nichts geaendert wurde, und leuchtet erst auf,
   wenn es etwas zu speichern gibt (`is-aktiv`) — so sieht man auf einen Blick, ob eine
   Aenderung offen ist. */
.svp .svp-schpop__ok{flex:1;border:0;border-radius:999px;background:#eceef1;color:var(--mut);
  padding:10px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
  transition:background .15s,color .15s}
.svp .svp-schpop__ok.is-aktiv{background:var(--ink);color:#fff}
.svp .svp-schpop__ok.is-aktiv:hover{opacity:.88}
body.svp-nacht .svp .svp-schpop__ok{background:#2e2e2e;color:#9a9a9a}
body.svp-nacht .svp .svp-schpop__ok.is-aktiv{background:#f0f0f0;color:#1e1e1e}
/* ⚠️ `.svp `-Prefix noetig: das Popover haengt INNERHALB von .svp, und ein allgemeiner
   `.svp button`-Stil (0,1,1) schlaegt sonst diese Regel (0,1,0) — Rahmen und Schrift
   kamen dadurch in Tintenblau statt im gewuenschten hellen Grau. */
/* 13. Runde (Nutzer): "soll rot umrandet und rot geschrieben sein — dann wird klarer,
   dass da ein Button ist, diese Schicht zu entfernen". Vorher blass grau, es sah aus
   wie ein deaktivierter Hinweis. Gefuellt wird er erst beim Drueberfahren — die
   Loesch-Absicht soll man bestaetigen, nicht aus Versehen treffen. */
.svp .svp-schpop__weg{width:100%;border:1.5px solid var(--rot);background:#fff;
  border-radius:999px;padding:10px 12px;font:inherit;font-size:12.5px;font-weight:800;
  color:var(--rot);cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.svp .svp-schpop__weg:hover{background:var(--rot);border-color:var(--rot);color:#fff}
body.svp-nacht .svp .svp-schpop__weg{background:#1e1e1e;border-color:var(--rot);color:#ff6b6b}
body.svp-nacht .svp .svp-schpop__weg:hover{background:var(--rot);color:#fff}
body.svp-nacht .svp-schpop{background:#242424;border-color:#333}
body.svp-nacht .svp-schpop__zeit select{background:#1e1e1e;border-color:#333}
body.svp-nacht .svp-schpop__ok{background:#f0f0f0;color:#1e1e1e}

/* ---------- Schichtplan-Stapel (Nutzer 19.07.) ----------
   Kein Mitarbeiter-Raster: je Tag EIN Stapel, nach Startzeit sortiert. Oben steht, wer
   aufmacht. Dadurch darf dieselbe Person an einem Tag auch mehrfach vorkommen. */
.svp-stapel{flex:1;min-height:0;display:grid;grid-template-rows:auto 1fr;
  border:1px solid var(--ln);border-radius:12px;overflow:hidden;background:#fff}
/* ⚠️ 64. Runde (Nutzer: "die Daten 16, 17 … sind ein bisschen versetzt zu den Blöcken"):
   Kopfzeile und Koerper sind ZWEI Grids uebereinander — der Koerper scrollt, der Kopf
   nicht. Der Scrollbalken nahm dem Koerper ~15 px Breite weg: Kopfspalten 137,1 px,
   Koerperspalten 135 px. Der Versatz wuchs von Spalte zu Spalte auf zuletzt 12 px.
   `scrollbar-gutter:stable` laesst BEIDE denselben Platz freihalten — der Kopf braucht
   dafuer einen eigenen Scroll-Kontext (overflow:hidden), sonst greift die Regel nicht. */
.svp-stapel__kopf,.svp-stapel__body{display:grid;grid-template-columns:repeat(7,minmax(132px,1fr));
  scrollbar-gutter:stable}
.svp-stapel__kopf{overflow:hidden}
.svp-stapel__body{min-height:0;overflow:auto}
/* position:relative = Anker fuer den Einfuege-Strich beim Ziehen. */
/* 67. Runde: Abstand UND Innenpolster folgen dem Regler — auf "Kompakt" (2 px) passen
   dadurch spuerbar mehr Karten in dieselbe Spalte. */
.svp-stapel__sp{position:relative;display:flex;flex-direction:column;
  gap:var(--schgap, 6px);padding:var(--schgap, 6px) 6px;
  min-width:0;border-right:1px solid #eef0f3}
.svp-stapel__sp:last-child{border-right:0}
/* 13. Runde: wie .svp-sch__cell.is-today — Heute-Optik der Wochenansicht. */
.svp-stapel__sp.is-today{background:#fbfbfc}
/* ⚠️ DUNKELMODUS (12. Runde, Nutzer-Fund mit Screenshot): Die "heute"-Flaechen
   mischten das Rot gegen **#fff** — im Dunkelmodus wurde daraus eine fast weisse
   Flaeche, die den ganzen Tag ueberstrahlte ("der wird komplett mit einem weißen
   Hintergrund gemacht"). Wer hier etwas aendert: NIE gegen #fff mischen.
   13. Runde: Schichtplan und Stapel nehmen jetzt denselben dunklen Ton wie die
   Heute-Spalte der Wochenansicht (#262626, s. body.svp-nacht .svp-col__day.is-today).
   Nur die Zeitachse behaelt den roten Schleier — dort IST rot die Bedeutung. */
body.svp-nacht .svp .svp-sch__cell.is-today,
body.svp-nacht .svp-stapel__sp.is-today{background:#262626}
/* (Der frühere Nacht-Override für .svp-tl__d.is-cur ist entfallen — die Basis-Regel
   mischt seit der 13. Runde selbst gegen `transparent` und gilt in beiden Modi.) */
.svp-stapel__sp.is-past{opacity:.5}
/* Eine Karte = eine Schicht. Gesicht + Name gross, darunter Zeit und Position. */
/* cursor:grab — die Karte laesst sich anfassen und auf einen anderen Tag ziehen
   (19.07.). ⚠️ Hier setzen, nicht in einer frueheren Regel: gleiche Spezifitaet, die
   SPAETERE gewinnt, und diese steht weiter unten. */
/* ⚠️ Die Pastell-Toenung nach MITARBEITERfarbe (24. Runde, --kolfarbe) ist auf Nutzer-
   Wunsch raus. Seit der 3. Büro-Runde toent stattdessen die POSITIONS-Farbe
   (--posfarbe aus POS_FARBEN: Barmann/Kellner/Shisha) — Farbe = Rolle, nicht Person.
   Ohne Position faellt die Karte auf neutrales Grau zurueck. */
/* ⚠️ 67. Runde (Nutzer): Karten-Hoehe und -Abstand sind ueber zwei Regler im Zahnrad
   einstellbar ("kleine Laptops brauchen jeden Pixel"). `--schkarte` ist ein FAKTOR
   (0,7–1,4) auf Polster, Gesicht und Schrift — dadurch schrumpft die Karte als Ganzes
   und nicht nur ihr Rand. `--schgap` ist der Abstand zwischen den Karten.
   Beide wirken live per CSS-Variable, ohne Neuzeichnen. */
.svp .svp-stapel__k{display:flex;align-items:center;
  gap:calc(9px * var(--schkarte, 1));
  /* 68. Runde: Innenpolster getrennt regelbar — mal `--schkarte`, damit der
     Hoehen-Regler weiterhin alles gemeinsam skaliert.
     75. Runde: links und rechts haben jetzt EIGENE Variablen. */
  padding:calc(var(--schpady, 7px) * var(--schkarte, 1))
          calc(var(--schpadr, 7px) * var(--schkarte, 1))
          calc(var(--schpady, 7px) * var(--schkarte, 1))
          calc(var(--schpadl, 7px) * var(--schkarte, 1));border:0;
  border-radius:10px;cursor:grab;text-align:left;min-width:0;
  background:color-mix(in srgb, var(--posfarbe, #dfe3e8) 14%, #fff);
  transition:background .12s,box-shadow .12s}
body.svp-nacht .svp .svp-stapel__k{
  background:color-mix(in srgb, var(--posfarbe, #444) 20%, #1e1e1e)}
.svp .svp-stapel__k:active{cursor:grabbing}
.svp .svp-stapel__k:hover{background:color-mix(in srgb, var(--posfarbe, #dfe3e8) 26%, #fff);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--posfarbe, #d7dbe2) 45%, #fff)}
.svp-stapel__k .svp-ring{width:calc(38px * var(--schkarte, 1));
  height:calc(38px * var(--schkarte, 1));
  font-size:calc(13px * var(--schkarte, 1));flex:none}
/* Aufbau (Nutzer 19.07.): Gesicht · Name mit der Taetigkeit DARUNTER · Uhrzeit ganz
   rechts. So liest man die Spalte von rechts als reine Zeitliste ab — "wer faengt wann an". */
.svp-stapel__kt{display:flex;flex-direction:column;gap:1px;min-width:0}
/* ⚠️ 75. Runde (Nutzer): In `b` steht jetzt der NAME, in `em` die Position — die
   Hierarchie wurde getauscht (s. zeichneStapel). Der Name darf deshalb deutlich
   groesser werden: 12,5 → 14 px. Die Position bleibt klein, sie ist ueber die
   Kartenfarbe ohnehin schon erkennbar. */
.svp-stapel__kt b{font-size:calc(14px * var(--schkarte, 1));font-weight:800;
  color:var(--ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svp-stapel__kt em{font-style:normal;font-size:calc(10.5px * var(--schkarte, 1));
  font-weight:600;color:var(--mut);
  line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:4px}
/* ⚠️ Der Farbverlauf nach Schichtbeginn (--zeitton) ist am 19.07. wieder RAUS (Nutzer:
   "einfach nur schlicht schwarz ueberall"). Seit die Karten die Mitarbeiterfarbe tragen,
   waeren zwei Farbsysteme uebereinander ohnehin zu viel. */
.svp-stapel__zeit{margin-left:auto;align-self:center;flex:none;padding-left:6px;
  font-style:normal;font-size:14px;font-weight:800;line-height:1.05;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
body.svp-nacht .svp-stapel__zeit{color:#ececec}
/* Beginn oben, Ende darunter — immer zweizeilig, rechtsbuendig (Nutzer 23. Runde).
   Das Ende erbt den Farbton des Beginns, nur leiser: der Verlauf soll nicht abreissen. */
.svp-stapel__zeit{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.svp-stapel__zeit b{font-size:14px;font-weight:800;line-height:1.05}
.svp-stapel__zeit u{text-decoration:none;font-size:12px;font-weight:800;
  line-height:1.05;opacity:.6}
/* `is-offen` faerbt bewusst NICHT um — offene und feste Schichten sollen gleich lesbar
   sein. Die Klasse bleibt als Haken fuer die Logik (nur eine Zeile statt zwei). */
/* ⚠️ Die frueheren Dunkelmodus-Farben (#ececec / #9a9a9a) sind RAUS: sie standen weiter
   unten und haben den Schichtbeginn-Farbton ueberschrieben — im Dunkelmodus war die
   Uhrzeit wieder einheitlich grau. Den Ton setzt jetzt allein die Regel weiter oben. */
/* Luecke zwischen zwei Karten: normal ein schmaler Spalt, beim Drueberfahren geht sie
   auf und zeigt "+ Schicht" (Nutzer 19.07.). Die Nachbarkarten weichen dadurch sichtbar
   auseinander — man sieht, WO die neue Schicht landet. */
.svp .svp-stapel__luecke{flex:none;height:6px;margin:-3px 0;padding:0;border:0;
  background:transparent;border-radius:8px;cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-size:11px;font-weight:800;color:transparent;
  transition:height .16s ease,margin .16s ease,background .16s ease,color .16s ease}
.svp .svp-stapel__luecke i{font-style:normal;font-size:13px}
/* ⚠️ UMGEBAUT (Nutzer, Büro-Session 4. Runde): das CSS-:hover mit transition-delay
   STOTTERTE — beim Aufgehen verschieben sich die Nachbarkarten, der Zeiger rutscht aus
   der Luecke, :hover endet, sie klappt zu, der Zeiger ist wieder drin … Endlos-Zappeln.
   Jetzt entscheidet ein JS-TIMER (3 s, s. luecke() in zeichneStapel): erst wer bewusst
   in dem Bereich verweilt, bekommt das Plus (`is-auf`); Verlassen raeumt sofort auf.
   :hover zeichnet hier NICHTS mehr. */
.svp .svp-stapel__luecke.is-auf{height:30px;margin:0;background:var(--soft);color:var(--mut);
  box-shadow:inset 0 0 0 1.5px #e3e6ea}
body.svp-nacht .svp .svp-stapel__luecke.is-auf{background:#2a2a2a;box-shadow:inset 0 0 0 1.5px #333}
/* Waehrend des Ziehens stoert die Luecke nur — der Einfuege-Strich uebernimmt. */
body.svp-zieht .svp-stapel__luecke{pointer-events:none}
/* Karte, mit der getauscht wird. */
.svp .svp-stapel__k.is-tausch{box-shadow:inset 0 0 0 2px var(--heute)}
/* Hinweis am Zeiger waehrend des Ziehens. */
.svp-zieh__hinweis{position:fixed;z-index:96;pointer-events:none;
  background:var(--ink);color:#fff;border-radius:8px;padding:5px 9px;
  font-size:11.5px;font-weight:800;white-space:nowrap;
  box-shadow:0 4px 14px rgba(27,42,74,.28)}
body.svp-nacht .svp-zieh__hinweis{background:#f0f0f0;color:#1e1e1e}
/* "+ Schicht" sitzt DIREKT unter der letzten Karte (Nutzer 19.07.) — vorher schob
   `margin-top:auto` es ans Spaltenende, teils 350 px unter dem letzten Eintrag. Dort
   plant niemand: man will da weitermachen, wo die Liste aufhoert. */
.svp .svp-stapel__add{border:1.5px dashed transparent;background:transparent;
  border-radius:10px;padding:8px;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;
  color:transparent;transition:all .12s}
.svp-stapel__sp:hover .svp-stapel__add{border-color:#e3e6ea;color:var(--mut)}
.svp .svp-stapel__add:hover{border-color:#d7dbe2;background:var(--soft);color:var(--ink)}
/* Offener Slot-Platz (feste Schicht je Wochentag, noch unbesetzt): gleiche Anatomie wie
   eine Karte, aber gestrichelt und leise — sichtbar "hier fehlt noch jemand", ohne mit
   den echten Schichten zu konkurrieren. ⚠️ Bewusst NICHT .svp-stapel__k (Ziehen/Tauschen/
   Fokus greifen ueber diese Klasse und braeuchten eine Schicht dahinter). */
.svp .svp-stapel__slot{display:flex;align-items:center;gap:9px;padding:7px;
  background:transparent;
  border:1.5px dashed color-mix(in srgb, var(--posfarbe, #9aa2ab) 55%, #fff);
  border-radius:10px;
  cursor:pointer;text-align:left;min-width:0;font:inherit;
  transition:background .12s,border-color .12s}
.svp .svp-stapel__slot:hover{
  background:color-mix(in srgb, var(--posfarbe, #dfe3e8) 10%, #fff);
  border-color:color-mix(in srgb, var(--posfarbe, #66707c) 80%, #fff)}
.svp-stapel__slotring{flex:none;width:38px;height:38px;border-radius:50%;
  border:1.5px dashed #cfd4db;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:var(--mut)}
.svp .svp-stapel__slot .svp-stapel__kt b{color:var(--mut)}
.svp .svp-stapel__slot .svp-stapel__zeit{color:var(--mut)}
body.svp-nacht .svp .svp-stapel__slot{border-color:#3d3d3d}
body.svp-nacht .svp .svp-stapel__slot:hover{background:#2a2a2a;border-color:#666}
body.svp-nacht .svp-stapel__slotring{border-color:#3d3d3d;color:#9a9a9a}
body.svp-nacht .svp .svp-stapel__slot .svp-stapel__kt b,
body.svp-nacht .svp .svp-stapel__slot .svp-stapel__zeit{color:#9a9a9a}
body.svp-nacht .svp-stapel{background:#1e1e1e;border-color:#2a2a2a}
body.svp-nacht .svp-stapel__sp{border-right-color:#262626}
body.svp-nacht .svp .svp-stapel__k:hover{
  background:color-mix(in srgb, var(--posfarbe, #444) 30%, #1e1e1e);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--posfarbe, #3d3d3d) 45%, #1e1e1e)}
body.svp-nacht .svp-stapel__kt b,body.svp-nacht .svp-stapel__kt i{color:#ececec}

/* Positions-Beschriftung mit Symbol (13. Runde): Symbol und Text in einer Zeile,
   das Symbol nimmt die Textfarbe an (stroke:currentColor). */
.svp-poslbl{display:inline-flex;align-items:center;gap:5px}
.svp-poslbl svg{flex:none}
.svp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:12px 0 0;
  padding-top:12px;border-top:1px solid var(--ln);font-size:11.5px;color:var(--mut)}
.svp-legend span{display:flex;align-items:center;gap:6px}
.svp-legend__sep{width:1px;height:14px;background:var(--ln)}
.svp-key{width:15px;height:11px;border-radius:3px;flex:none}
.svp-key--hohl{background:#fff;border:2px dashed var(--mut)}
.svp-key--konflikt{background:#fff;border:2px solid var(--rot)}
.svp-key--ring{width:18px;height:18px;border-radius:50%;background:var(--soft);
  border:1.5px solid var(--ln);font-size:8.5px;font-weight:800;color:var(--mut);
  display:flex;align-items:center;justify-content:center}

/* ---------- Popover ---------- */
/* max-height + overflow (18.07.): mit den Kunden-Feldern ist das Popover ~550px hoch —
   auf kleinen Fenstern scrollt es innen, statt unten aus dem Bild zu haengen.
   ⚠️ box-sizing:border-box am Dialog SELBST (Bugfix 18.07., 8. Runde): der Reset
   `.svp-pop *` erfasst nur die KINDER — der Dialog blieb content-box. Im Panel
   (width:100% + 36px Padding) ragte damit alles rechts ueber den Rand hinaus. */
.svp-pop{position:fixed;z-index:70;width:352px;background:#fff;border:1px solid var(--ln);
  border-radius:var(--r-md);box-shadow:0 12px 34px rgba(27,42,74,.18);padding:14px;
  max-height:calc(100vh - 24px);overflow:auto;box-sizing:border-box;
  /* Sanfter Hoehen-Uebergang Stufe 1 -> Stufe 2 (16. Runde): der Balken steht schon
     in Stufe 1, das Fenster waechst nur nach unten — die Schiene morpht mit (Flexbox
     laesst sie jeden Frame mitwachsen). Greift nur, wenn das Skript die Hoehe explizit
     setzt; beim Oeffnen/Schliessen bleibt height:auto = keine Animation. */
  transition:height .3s cubic-bezier(.4,0,.2,1)}
.svp-pop__hd{display:flex;justify-content:space-between;align-items:center;margin:0 0 3px}
.svp-pop__hd b{font-size:14.5px;font-weight:800}
.svp-pop__hd button{width:24px;height:24px;border-radius:6px;color:var(--faint);font-size:13px}
.svp-pop__hd button:hover{background:var(--soft)}
.svp-pop__when{margin:0 0 12px;font-size:12.5px;color:var(--mut);font-weight:700}
/* Fahrer als Bestaetigung, nicht als Frage: Gesicht + Name. Ersetzt das Kolonnen-Select. */
.svp-pop__fahrer{display:flex;align-items:center;gap:9px;margin:-4px 0 12px}
.svp-pop__fahrer .svp-ring{width:34px;height:34px;font-size:12px}
.svp-pop__fahrer b{font-size:13px;font-weight:800;display:block;line-height:1.25}
.svp-pop__fahrer em{font-style:normal;font-size:11px;color:var(--faint);display:block}
.svp-pop__fahrer > span:last-child{flex:1;min-width:0}
/* Fahrer-Zeitachse AUSSERHALB des Dialogs (18.07., 11. Runde — ersetzt den Balken
   IN der Box, "alles eingequetscht"): links neben der Box schwebt die Mini-Spalte
   aus der Monatsansicht — Gesicht oben, darunter der Tag als senkrechter Balken,
   Uhrzeiten als dunkle Chips daneben (lesbar auf Schleier UND Kalender). Klick
   auf einen FREIEN Abschnitt waehlt genau diese Luecke — "von hier bis hier ist
   frei" — feinjustiert wird rechts in den Feldern. Baut und positioniert das
   Skript (popBarZeig/popBarLage). */
/* 12. Runde: die Schiene wohnt wieder IN der Box — als linke Spalte in KOMPLETTER
   Formular-Laenge. Gesicht direkt ueber dem Balken (nur EINMAL — das doppelte
   Kopf-Icon ist raus), Uhrzeiten als kleine graue Marken links am Balken. */
/* Mehr LUFT zwischen Schiene und Inhalt (14. Runde: 22 statt 12). */
.svp-pop__spalten{display:flex;gap:22px;align-items:stretch}
.svp-pop__inhalt{flex:1;min-width:0}
.svp-pop__rail{display:flex;flex-direction:column;gap:6px;flex:none;
  align-items:flex-end}
/* Gesicht NOCH groesser (14. Runde: 64px) — die einzige Fahrer-Kennung. */
/* 14. Runde (Nutzer): "entnimm mir die Schattierungen von allen Icons" — Schlagschatten
   raus. Der weisse Rand bleibt: er trennt das Gesicht vom Balken darunter. */
.svp-pop__rail .svp-ring{width:64px;height:64px;font-size:18px;flex:none;
  border:2px solid #fff;box-shadow:none;margin-right:-13px}
.svp-popbar__u{display:flex;gap:5px;align-items:stretch;flex:1}
/* Uhrzeiten besser lesbar (13. Runde): groesser + mehr Platz. */
.svp-popbar__z{position:relative;width:38px}
.svp-popbar__z span{position:absolute;right:2px;transform:translateY(-50%);
  font-size:10px;font-weight:700;color:var(--faint);white-space:nowrap}
/* Die Zeitachse-Spalte bleibt im Dashboard-Grau (--schiene), waehrend die Box
   reinweiss ist (15. Runde, Nutzer). OHNE Rand — so liest sie als weiche graue
   Spalte, nicht als umrandetes Kaestchen. */
.svp-popbar__b{position:relative;width:44px;border-radius:10px;
  background:var(--schiene);cursor:pointer}
.svp-popbar__b i{position:absolute;left:0;right:0}
/* FREIE Abschnitte (15. Runde: OHNE Strichel-Rand, nur die Stundenzahl — beim
   Drueberfahren leuchtet sie auf und die Flaeche toent sich leicht; Klick
   waehlt die Luecke direkt). */
.svp-popbar__frei{position:absolute;left:2px;right:2px;border-radius:6px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  overflow:hidden;transition:background .12s}
.svp-popbar__frei b{font-weight:800;font-size:13px;color:#5a6683;letter-spacing:-.3px;
  transition:transform .12s,color .12s}
.svp-popbar__frei:hover{background:rgba(90,102,131,.12)}
.svp-popbar__frei:hover b{color:var(--ink);transform:scale(1.2)}
/* Auswahl-Rahmen in der LEISTUNGSFARBE (14. Runde, Skript setzt sie inline):
   oben das Kuerzel (UMZ), darunter die Dauer gross — und an beiden Kanten ein
   GRIFF zum Ziehen (Start oben, Ende unten). */
.svp-pop__sel{position:absolute;left:0;right:0;background:rgba(255,122,26,.28);
  border:2px solid var(--o);border-radius:8px;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  white-space:nowrap;overflow:visible;z-index:3}
/* GROESSER und deutlicher (15. Runde): "UMZ" 10,5px, Dauer 18px. */
.svp-pop__sel b{font-size:10.5px;font-weight:800;letter-spacing:.7px;line-height:1}
.svp-pop__sel em{font-style:normal;font-size:18px;font-weight:800;line-height:1;
  letter-spacing:-.4px}
/* Beim ZIEHEN wird der Rahmen gestrichelt — man sieht "der ist gerade angefasst". */
.svp-pop__sel.is-zieht{border-style:dashed}
.svp-pop__griff{position:absolute;left:50%;transform:translateX(-50%);width:30px;height:12px;
  pointer-events:auto;cursor:ns-resize;display:flex;align-items:center;justify-content:center}
.svp-pop__griff::after{content:'';width:16px;height:4px;border-radius:99px;background:#fff;
  border:1px solid rgba(27,42,74,.4)}
.svp-pop__griff--oben{top:-7px}
.svp-pop__griff--unten{bottom:-7px}
/* Start/Ende der Auswahl als dunkle Marken AN der Zeitleiste (14. Runde). */
.svp-popbar__mark{position:absolute;right:0;transform:translateY(-50%);display:flex;
  align-items:center;gap:2px;z-index:2}
.svp-popbar__mark b{font-size:9px;font-weight:800;color:#fff;background:#1b2a4a;
  border-radius:4px;padding:1px 4px}
.svp-popbar__mark i{display:block;width:6px;border-top:2px dashed #1b2a4a}
body.svp-nacht .svp-popbar__mark b{background:#ececec;color:#151515}
body.svp-nacht .svp-popbar__mark i{border-top-color:#ececec}
/* Start/Ende als Auswahlfelder. Volles Eigen-Styling: das Popover haengt
   ausserhalb von .svp, der Select-Reset greift hier nicht. */
.svp-pop__zeiten{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.svp-pop__zeiten span{font-size:12px;font-weight:700;color:var(--mut)}
.svp-pop__zeiten select{flex:1;font-family:inherit;font-size:13px;color:var(--ink);
  border:1px solid var(--ln);border-radius:999px;padding:8px 12px;background:#fff}
.svp-pop__lbl{margin:0 0 6px;font-size:11.5px;font-weight:800;color:var(--mut)}
.svp-pop__svc{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
/* PILLEN mit LEISTUNGS-ICON (14. Runde: LKW/Muell/Haus/Paket statt Farbpunkt).
   Beim DRUEBERFAHREN fuellt sich die Pille schon komplett in der Leistungsfarbe
   mit weisser Schrift ("wie wenn man klickt") — die Wahl selbst genauso. */
.svp-pop__svc button{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--ln);background:#fff;font-size:13px;font-weight:700;text-align:left;
  width:100%;transition:background .15s,border-color .15s,color .15s}
.svp-pop__svc i{width:17px;height:17px;flex:none;display:flex}
.svp-pop__svc i svg{width:100%;height:100%;stroke-width:2}
.svp-pop__svc button[data-svc="umzug"] i{color:var(--svc-umzug)}
.svp-pop__svc button[data-svc="entruempelung"] i{color:var(--svc-entruempelung)}
.svp-pop__svc button[data-svc="haushalt"] i{color:var(--svc-haushalt)}
.svp-pop__svc button[data-svc="transport"] i{color:var(--svc-transport)}
.svp-pop__svc button:hover,.svp-pop__svc button.is-on{color:#fff;border-color:transparent}
.svp-pop__svc button:hover i,.svp-pop__svc button.is-on i{color:#fff}
.svp-pop__svc button[data-svc="umzug"]:hover,
.svp-pop__svc button[data-svc="umzug"].is-on{background:var(--svc-umzug)}
.svp-pop__svc button[data-svc="entruempelung"]:hover,
.svp-pop__svc button[data-svc="entruempelung"].is-on{background:var(--svc-entruempelung)}
.svp-pop__svc button[data-svc="haushalt"]:hover,
.svp-pop__svc button[data-svc="haushalt"].is-on{background:var(--svc-haushalt)}
.svp-pop__svc button[data-svc="transport"]:hover,
.svp-pop__svc button[data-svc="transport"].is-on{background:var(--svc-transport)}
/* 16. Runde: Stufe 1 hat jetzt SCHON die Schiene links (der Balken steht von
   Anfang an da) — darum GLEICHE Breite wie Stufe 2, nur die Hoehe morpht. Die
   Klasse bleibt als Haken (Skript verzweigt daran), setzt aber keine Breite mehr. */
.svp-pop select{margin:0 0 12px}
/* Kunden-Felder (18.07.): das Minimum fuers Telefon — Name + Telefon Pflicht,
   E-Mail optional (am Telefon buchstabieren ist Quaelerei; der Kunde traegt sie
   spaeter selbst im Anfrage-Tool ein). Eigenes Styling noetig: das Popover haengt
   ausserhalb von .svp, der .svp-select-Reset greift hier nicht. */
.svp-pop input[type=text],.svp-pop input[type=tel],.svp-pop input[type=email]{
  width:100%;font-family:inherit;font-size:13px;color:var(--ink);
  border:1px solid var(--ln);border-radius:999px;padding:9px 14px;background:#fff;
  margin:0 0 7px}
.svp-pop input:focus{outline:2px solid rgba(255,122,26,.35);border-color:var(--o)}
.svp-pop input::placeholder{color:var(--faint);font-weight:600}
/* Lokal/Fern (nur Umzug + Transport): Planungs-Info, keine Angebots-Info — ob der
   Slot passt, haengt am Punkte-Pool (fern ab 100 km) und an der Fahrzeit. */
.svp-pop__seg{display:flex;gap:2px;background:var(--soft);border-radius:999px;
  padding:3px;margin:0 0 7px}
.svp-pop__seg button{flex:1;padding:7px 4px;border-radius:999px;border:0;
  background:transparent;font-family:inherit;font-size:12px;font-weight:700;
  color:var(--mut);cursor:pointer;transition:background .15s,color .15s}
.svp-pop__seg button.is-on{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(27,42,74,.1)}
.svp-pop__go:disabled,.svp-pop__go2:disabled{opacity:.45;cursor:not-allowed}
/* --- Vormerkung IM Monats-Panel (Nutzer 18.07., 4. Runde) --- */
/* Kein eigener Kasten mehr neben dem Panel: der Dialog zieht IN das aufgeklappte
   Tages-Panel ein, das dabei nach oben zum Formular aufwaechst. Titel + Datumszeile
   sind hier versteckt ("nicht 'Vormerkung Donnerstag bla'") — es bleiben Gesicht,
   Leistungs-Tabs und die Fragen. position:static, weil das Panel traegt und
   positioniert; die Innen-Scrollbarkeit faengt zu hohe Formulare ab. */
.svp-pop--panel{position:static;border:0;box-shadow:none;border-radius:0;
  max-height:100%;overflow:auto;width:100%;padding:16px 18px}
.svp-pop--panel .svp-pop__hd,.svp-pop--panel .svp-pop__when{display:none}
/* Im Panel eine Nummer GROESSER (Nutzer 18.07., 5. Runde: "das Fenster ein bisschen
   groesser") — mehr Padding, groessere Tabs und Felder, Farbpunkte 15px. */
.svp-pop--panel .svp-pop__lbl{font-size:12.5px}
.svp-pop--panel .svp-pop__svc button{padding:12px 16px;font-size:14px;border-radius:999px}
.svp-pop--panel .svp-pop__svc i{width:18px;height:18px}
.svp-pop--panel input[type=text],.svp-pop--panel input[type=tel],
.svp-pop--panel input[type=email]{font-size:14px;padding:10px 16px}
/* Gesicht im Panel eine Nummer GROESSER (9. Runde). */
.svp-pop--panel .svp-pop__fahrer .svp-ring{width:48px;height:48px;font-size:15px}
/* Der ganze Kasten mit RUNDEN Ecken, wenn er das Formular traegt — und seit der
   7. Runde (Nutzer 18.07.) KOMPLETT OHNE Rand auf weissem Grund: der Fokus-
   Schleier grenzt ihn ohnehin ab, ein Strich waere doppelt. */
.svp-mtip--form{border-radius:16px;border:0;background:#fff}
/* Fokus-Schleier: solange die Panel-Vormerkung offen ist, graut alles drumherum
   aus — Klick auf den Schleier schliesst. z 55 = unter Panel (60) und Toast (80). */
.svp-fokus{position:fixed;inset:0;z-index:55;background:rgba(27,42,74,.25);
  opacity:0;transition:opacity .2s}
.svp-fokus.is-da{opacity:1}
body.svp-nacht .svp-fokus{background:rgba(0,0,0,.5)}
.svp-pop__warn{margin:0 0 10px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--rot-soft);color:#8f2a2a;font-size:11.5px;font-weight:700;line-height:1.4}
/* Komplett runde Form auch hier (18.07., 8. Runde: "alles so mit abgerundet"). */
.svp-pop__go{width:100%;background:var(--o);color:#fff;border-radius:999px;padding:11px 18px;
  font-weight:700;font-size:14px}
/* Zweiter Weg: gleich anlegen UND zum Angebot. Bewusst leiser als der Hauptknopf —
   der schnelle Telefon-Fall ist der haeufige, das Angebot der ausfuehrliche. */
.svp-pop__go2{width:100%;margin-top:7px;background:#fff;color:var(--o-ink);
  border:1px solid var(--o);border-radius:999px;padding:10px 18px;font-weight:700;font-size:13px;
  transition:background .15s}
.svp-pop__go2:hover{background:var(--o-soft)}
/* Stiller Rueckweg zur Leistungs-Auswahl (18.07.). Voller Button-Reset: das Popover
   haengt ausserhalb von .svp, dort greift kein .svp-Button-Reset. */
/* ERKENNBAR als Knopf (14. Runde): Rand + dunklere Schrift statt blassem Text.
   ⚠️ button.-Prefix noetig: der Reset `.svp button{border:0}` (0-1-1) schlaegt
   sonst die nackte Klasse — der Rand war weg, sobald der Dialog in .svp lag. */
button.svp-pop__zurueck{width:100%;margin-top:7px;padding:9px;border:1px solid var(--ln);
  border-radius:999px;background:#fff;font-family:inherit;font-size:12.5px;
  font-weight:700;color:var(--mut);cursor:pointer;
  transition:color .15s,background .15s,border-color .15s}
button.svp-pop__zurueck:hover{background:var(--soft);color:var(--ink);border-color:#c8cdd6}

/* ---------- Toast ---------- */
.svp-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:var(--navy);color:#fff;font-size:13.5px;font-weight:700;
  padding:10px 12px 10px 20px;border-radius:999px;box-shadow:0 8px 26px rgba(6,14,30,.4);
  display:flex;align-items:center;gap:14px}
.svp-toast button{background:rgba(255,255,255,.14);color:#fff;border-radius:999px;
  padding:6px 13px;font-size:12.5px;font-weight:800;transition:background .15s}
.svp-toast button:hover{background:rgba(255,255,255,.26)}

/* ============ NACHTMODUS (Nutzer 17.07. spaet) ============
   Umschalten setzt `svp-nacht` an den <body> — so erwischt die Ueberschreibung auch
   die fixed-Elemente ausserhalb von .svp (Popover, Toast, Panel, Achse, Uhrzeit).
   Erst die Token, dann die Stellen, die Weiss hart gesetzt haben. */
/* Ton: NEUTRALES Grau, kein Blauschwarz (Nutzer-Korrektur 17.07. spaet, 2. Runde). */
body.svp-nacht{background:#151515}
body.svp-nacht .svp,body.svp-nacht .svp-pop,body.svp-nacht .svp-toast,
body.svp-nacht .svp-plusz,body.svp-nacht .svp-mtip,body.svp-nacht .svp-mtax{
  --navy:#ececec; --ink:#ececec; --mut:#a6a6a6; --faint:#7d7d7d;
  --ln:#2d2d2d; --soft:#272727; --canvas:#151515; --sidebar:#1e1e1e;
  --grau-soft:#323232; --o-soft:#3a2c1c; --o-ink:#ffb27a;
  --schiene:#2c2c2c;
}
body.svp-nacht .svp-card,body.svp-nacht .svp-scroll,body.svp-nacht .svp-corner,
body.svp-nacht .svp-axis,body.svp-nacht .svp .svp-pill,body.svp-nacht .svp-col__day,
body.svp-nacht .svp-month__grid,body.svp-nacht .svp .svp-mday,
body.svp-nacht .svp-filter__pop,body.svp-nacht .svp-pop,body.svp-nacht .svp select,
body.svp-nacht .svp-filter summary,
body.svp-nacht .svp-pop__svc button{background:#1e1e1e}
body.svp-nacht .svp-col__day.is-today,body.svp-nacht .svp .svp-mday:hover,
body.svp-nacht .svp .svp-pill.is-sel{background:#262626}
body.svp-nacht .svp .svp-mday.is-today{background:#2b2b2b}
body.svp-nacht .svp-line{background:#262626}
body.svp-nacht .svp .svp-mday{border-right-color:#2a2a2a;border-bottom-color:#2a2a2a}
body.svp-nacht .svp-modes button.is-on,body.svp-nacht .svp .svp-koltabs button.is-on,
body.svp-nacht .svp .svp-tagnacht button.is-on{background:#3a3a3a;color:#ececec}
body.svp-nacht .svp-nav button.is-on{background:#272727}
body.svp-nacht .svp-mtip,body.svp-nacht .svp-mtip__seg--frei{background:#1e1e1e}
body.svp-nacht .svp-mtip__seg--frei:hover{background:#272727}
body.svp-nacht .svp-mtax__z b{background:#ececec;color:#151515}
body.svp-nacht .svp-mtax__z i{border-top-color:#ececec}
body.svp-nacht .svp-b--anfrage{background:#1e1e1e}
body.svp-nacht .svp-ghost__t{background:rgba(30,30,30,.92)}
body.svp-nacht .svp-toast{background:#383838}
body.svp-nacht .svp .svp-mini button.is-teil{background:#323232}
body.svp-nacht .svp .svp-mini button.is-voll{background:#4a4f58;color:#ececec}
body.svp-nacht .svp .svp-mini button.is-sel{background:#3a3a3a;color:#ececec}
body.svp-nacht .svp-plusz{text-shadow:0 0 4px #1e1e1e,0 0 8px #1e1e1e}
body.svp-nacht .svp-set__row input[type=range]::-webkit-slider-thumb{
  background:#3a3a3a;border-color:#4a4a4a}
body.svp-nacht .svp-b__ang{background:#1e1e1e}
body.svp-nacht .svp-mday__plus{background:#3a3a3a;color:#ececec}
body.svp-nacht .svp .svp-set__auto{background:#272727;border-color:#3a3a3a;color:#a6a6a6}
body.svp-nacht .svp-pop input[type=text],body.svp-nacht .svp-pop input[type=tel],
body.svp-nacht .svp-pop input[type=email]{background:#1e1e1e}
body.svp-nacht .svp-pop__seg button.is-on{background:#3a3a3a;color:#ececec}
body.svp-nacht .svp-pop__zeiten select{background:#1e1e1e}

/* ---- Gruppen-Avatar "Einheit" (Gruppen-Etappe 2) ----
   Ueberall dort, wo eine Schicht ein Gesicht traegt, steht bei einer GRUPPEN-Schicht
   stattdessen ein kleiner Stapel der Mitglieder-Gesichter; die Gruppenfarbe liegt als
   Rahmen auf jedem Ring (die Gesichter selbst bleiben neutral — Regel vom 17.07.).
   ⚠️ Bewusst GANZ UNTEN im Stylesheet: die Kontext-Regeln (.svp-sch__chip .svp-ring
   usw.) haben dieselbe Spezifitaet — hier unten gewinnt die spaetere Regel und die
   Stapel-Ringe bleiben klein, egal in welchem Container sie stecken. */
.svp .svp-einh{display:inline-flex;align-items:center;flex:none}
.svp .svp-einh .svp-ring{width:26px;height:26px;font-size:10px;
  border:2px solid var(--grpfarbe,#e2e5ea);background:#fff}
.svp .svp-einh .svp-ring + .svp-ring{margin-left:-9px}
.svp .svp-einh .svp-einh__mehr{background:var(--soft);color:var(--mut);font-weight:800;
  font-size:9px;display:flex;align-items:center;justify-content:center}
body.svp-nacht .svp .svp-einh .svp-ring{background:#1e1e1e}

/* ---- 54. Runde (Nutzer, Büro): Wochen-/Tages-Bloecke in SCHICHTPLAN-OPTIK ----
   "Das Design von den Bloecken bei Schichtplan uebernehmen auf Tag und Woche,
   mit den Farben und so weiter." Vorbild ist .svp-sch__chip: weiche Pastell-
   Karte (color-mix 14 % der Farbe auf dem Grund), DUNKLE Schrift statt weiss
   auf satter Flaeche. Die Farbe bleibt die LEISTUNGS-Farbe (--bg, Legende
   Umzug/Entruempelung/... gilt weiter) — nur die Dosierung wechselt von
   vollflaechig auf getoent. Bewusst GANZ UNTEN: ueberschreibt die
   .svp-b-Grundregeln von oben mit gleicher/hoeherer Spezifitaet. */
.svp .svp-b{background:color-mix(in srgb, var(--bg) 14%, #fff);color:var(--ink);
  border:1px solid color-mix(in srgb, var(--bg) 32%, #fff);border-radius:10px;
  box-shadow:0 1px 2px rgba(27,42,74,.10)}
.svp .svp-b:hover{box-shadow:0 4px 14px rgba(27,42,74,.18)}
.svp .svp-b em{color:var(--mut)}
.svp .svp-b .svp-b__z{color:var(--mut)}
/* Der Foto-Ring: Rand jetzt in der Leistungs-Farbe statt weiss — auf Pastell
   braucht der Kreis die Kante, sonst schwimmt er. */
.svp .svp-b__ring{background:#fff;color:var(--bg);
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--bg) 55%, #fff)}
/* Anfrage bleibt der zweite Kanal (hohl/gestrichelt) — Schrift aber dunkel
   wie im Schicht-Chip, nur der Rahmen traegt die volle Farbe. */
.svp .svp-b--anfrage{background:#fff;color:var(--ink);border:2px dashed var(--bg)}
/* Nachtmodus: gleiche Dosierung wie der Schicht-Chip (20 % auf dunklem Grund). */
body.svp-nacht .svp .svp-b{background:color-mix(in srgb, var(--bg) 20%, #1e1e1e);
  color:#ececec;border-color:color-mix(in srgb, var(--bg) 38%, #1e1e1e)}
body.svp-nacht .svp .svp-b em,body.svp-nacht .svp .svp-b .svp-b__z{color:#9a9a9a}
body.svp-nacht .svp .svp-b--anfrage{background:#1e1e1e;color:#ececec}

@media(max-width:1431px){ /* war 1180 — die Dashboard-Seitenleiste (250 px + 1 px Rand) geht der Tafel verloren, Schwelle deshalb +251 (Etappe 5) */
  .svp-grid{grid-template-columns:minmax(0,1fr)}
  .svp-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  /* 84. Runde: das Suchfeld hat eine feste Breite (s. oben) — hier gibt es Platz
     zurueck, bevor Gesichter und Tabs gequetscht werden. */
  .svp-calhd > #svp-suche{width:260px}
  /* 85. Runde: schmales Fenster ⇒ kleinerer Titel, damit der Mitte noch echte
     Breite fuer Gesichter und Suchfeld bleibt. */
  .svp-calhd h2{font-size:26px}
  .svp-titel__sub i{font-size:20px}
  /* ⚠️ 87. Runde: Der Titelblock hat jetzt eine FESTE Breite und kann deshalb nicht
     mehr von selbst nachgeben — bei 1120 px lief der Kopf dadurch ueber (185 + 200 +
     474 + 28 Abstaende = 887 px bei ~830 px Platz). Hier also beides kleiner: Block
     185 → 140 px (passt zum 26-px-Monat dieser Stufe) und Mindestbreite der Mitte
     200 → 155 px. Nachgemessen stehen bei 1120 px Fenster genau 802 px zur Verfuegung:
     140 + 155 + 474 + 28 = 797 px. (Mit 180 px Mitte fehlten noch 20 px.) */
  .svp-calhd{grid-template-columns:auto minmax(155px,1fr) auto}
  .svp-titelblock{flex-basis:140px;width:140px;min-width:140px}
}
@media(max-width:1071px){ /* war 820 — +251 wie oben; unter 820 px wird die Dashboard-Leiste zur Topbar, die Schwelle deckt beide Faelle */
  .svp-calhd > #svp-suche{width:180px}
  .svp-shell{grid-template-columns:1fr}
  .svp-side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;
    border-right:0;border-bottom:1px solid var(--ln)}
  .svp-nav{flex-direction:row;overflow-x:auto}
  .svp-nav__group,.svp-nav__sep,.svp-side__foot{display:none}
  .svp-main{padding:18px 14px}
}

/* ============================================================
   TAGESANSICHT QUER (75. Runde, Nutzer-Entwurf)
   Mitarbeiter als ZEILEN links, Zeit waagerecht oben. Die Transponierte der
   bisherigen Tagesansicht — dort standen die Leute in Spalten und die Zeit lief
   senkrecht. Zweck laut Nutzer: "wenn jemand von 6 bis 20 Uhr arbeitet, geht der
   Balken komplett nach rechts in die Länge" — Auslastung wird als Laenge lesbar.

   Aufbau: ein Grid mit zwei Spalten (Namensspalte + Zeitflaeche). Die Kopfzeile
   klebt oben, die Namensspalte links — beide per `position:sticky`, damit bei vielen
   Mitarbeitern beides stehen bleibt.
   ⚠️ Die Bloecke liegen in PROZENT der Zeitflaeche (nicht in px): so passt sich die
   Ansicht jeder Fensterbreite an, ohne dass etwas nachgerechnet werden muss.
   ============================================================ */
.svp-tq{flex:1;min-height:0;overflow:auto;border:1px solid var(--ln);
  border-radius:12px;background:#fff}
body.svp-nacht .svp-tq{background:#1e1e1e;border-color:#2a2a2a}
/* --namsp = Breite der Namensspalte; einmal hier, damit Kopf und Zeilen sie teilen. */
.svp-tq{--namsp:150px;position:relative}
/* ---- Zieh-Fahne (77. Runde) ----
   Duenne Senkrechte von der Zeitachse bis zum gezogenen Balken, oben das Zeit-Schild.
   `pointer-events:none` ist Pflicht: sonst liegt sie unter dem Zeiger und faengt die
   Trefferpruefung ab — genau die Falle, die in der 76. Runde den Zeiten-Tausch
   verhindert hat. */
.svp-tq__fahne{position:absolute;width:0;z-index:12;pointer-events:none}
.svp-tq__fahne::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1.5px;
  background:var(--ink);opacity:.35}
/* Die Ende-Fahne etwas leiser — der Anfang fuehrt. */
.svp-tq__fahne--e::before{opacity:.22}
.svp-tq__fahne--e b{background:var(--mut)}
/* Ganzer-Tag-Angebot: beide Fahnen in der Akzentfarbe. */
.svp-tq__fahne.is-ganz::before{background:var(--o);opacity:.6}
.svp-tq__fahne.is-ganz b{background:var(--o)}
.svp-tq__fahne b{position:absolute;top:4px;left:0;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:11px;font-weight:800;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
  font-variant-numeric:tabular-nums;box-shadow:0 2px 8px rgba(27,42,74,.3)}
body.svp-nacht .svp-tq__fahne::before{background:#ececec}
body.svp-nacht .svp-tq__fahne b{background:#ececec;color:#1e1e1e}
/* ---- Griffe zum Strecken (77. Runde) ---- */
/* ⚠️ 78. Runde (Nutzer-Fehlermeldung): Die Griffe waren 9 px breit und UNSICHTBAR.
   Wer den Block am linken Rand anfasste, um ihn zu verschieben, hat gestreckt — der
   Block sprang auf volle Laenge. Zwei Aenderungen: schmaler (6 px) und DAUERHAFT
   sichtbar, damit man die Zone erkennt, bevor man sie greift. */
.svp-tqb__griff{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize;z-index:2}
.svp-tqb__griff--a{left:0}
.svp-tqb__griff--e{right:0}
.svp-tqb__griff::before{content:'';position:absolute;top:30%;bottom:30%;width:2px;
  border-radius:2px;background:var(--ink);opacity:.18;transition:opacity .12s,top .12s,bottom .12s}
.svp-tqb__griff--a::before{left:2px}
.svp-tqb__griff--e::before{right:2px}
.svp-tqb__griff:hover::before{opacity:.55;top:18%;bottom:18%}
/* Auf schmalen Balken wuerden zwei Griffe die ganze Flaeche belegen. */
.svp-tqb--schmal .svp-tqb__griff{width:4px}
.svp-tqb--schmal .svp-tqb__griff::before{display:none}
/* Ganzer Tag angeboten (78. Runde): der Balken zeigt sein Ziel schon waehrend des Zugs. */
.svp .svp-tqb.is-ganz{outline:2px dashed var(--o);outline-offset:-2px}
@keyframes svp-tq-ganz{0%{opacity:.55}50%{opacity:1}100%{opacity:.55}}
.svp .svp-tqb.is-ganz{animation:svp-tq-ganz .9s ease-in-out infinite}
.svp-tq__kopf{display:grid;grid-template-columns:var(--namsp) 1fr;
  position:sticky;top:0;z-index:6;background:#fff;border-bottom:1px solid var(--ln)}
body.svp-nacht .svp-tq__kopf{background:#1e1e1e;border-bottom-color:#2a2a2a}
.svp-tq__ecke{position:sticky;left:0;z-index:2;background:#fff;
  border-right:1px solid var(--ln)}
body.svp-nacht .svp-tq__ecke{background:#1e1e1e;border-right-color:#2a2a2a}
/* Stundenleiste: gleichmaessige Spalten ueber den ganzen Arbeitstag. */
/* ⚠️ 76. Runde (Nutzer): Die Stunden sollen "die gleiche Größe wie die Kalendertage"
   haben — also dieselbe Anatomie wie .svp-pill in der Wochenansicht: grosse Zahl,
   kleine graue Einheit darunter, mittig. Vorher standen sie als 10,5-px-Kleinkram
   linksbuendig an der Rasterlinie und wirkten wie Beiwerk statt wie eine Achse.
   ⚠️ Senkrechte Trennstriche sind hier RAUS (s. .svp-tq__spur) — die Achse traegt
   ihre Gliederung ueber die Zahlen selbst. */
.svp-tq__std{display:grid;height:auto}
.svp-tq__std span{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:8px 2px;overflow:hidden;white-space:nowrap}
.svp-tq__std b{font-size:20px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.svp-tq__std i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--faint)}
body.svp-nacht .svp-tq__std b{color:#ececec}
/* Die aktuelle Stunde in Rot — dieselbe Regel wie „heute" bei den Tages-Pillen. */
.svp-tq__std span.is-jetzt b,.svp-tq__std span.is-jetzt i{color:var(--heute)}
/* Eine Mitarbeiter-Zeile. */
.svp-tq__zeile{display:grid;grid-template-columns:var(--namsp) 1fr;
  border-bottom:1px solid #eef0f3}
body.svp-nacht .svp-tq__zeile{border-bottom-color:#262626}
.svp-tq__zeile:last-child{border-bottom:0}
.svp-tq__zeile.is-leise{opacity:.45}
.svp-tq__name{position:sticky;left:0;z-index:2;display:flex;align-items:center;gap:9px;
  padding:8px 10px;background:#fff;border-right:1px solid var(--ln);min-width:0}
body.svp-nacht .svp-tq__name{background:#1e1e1e;border-right-color:#2a2a2a}
.svp-tq__name .svp-ring{width:32px;height:32px;font-size:12px;flex:none}
.svp-tq__nt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.svp-tq__nt b{font-size:13px;font-weight:800;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svp-tq__nt em{font-style:normal;font-size:10.5px;color:var(--mut);
  font-variant-numeric:tabular-nums}
body.svp-nacht .svp-tq__nt b{color:#ececec}
/* Die Zeitflaeche einer Zeile — Bezugsrahmen fuer die Balken (Prozent). */
.svp-tq__spur{position:relative;min-height:52px}
/* ⚠️ 76. Runde (Nutzer): "die vertikalen Striche von den Zeiten nach unten im Raster
   entfernen … es sollen nur horizontale graue Striche zu sehen sein." Der frühere
   Hintergrund-Verlauf mit einer Linie je Stunde ist deshalb RAUS. Die Gliederung
   tragen jetzt allein die Zeilentrenner (.svp-tq__zeile border-bottom) und die
   Balken selbst. Nicht wieder einbauen. */
/* ---- Balken im Stil der SCHICHTKARTEN (76. Runde, Nutzer) ----
   "Übernehmen wir das Design von den Blöcken vom Schichtplan-Tool auch in der
   Tagesansicht." Also dieselbe Anatomie wie .svp-stapel__k: helle Toenung der
   Leistungsfarbe statt Vollflaeche, Gesicht links, Name gross + Zusatz klein darunter,
   Uhrzeit rechtsbuendig zweizeilig (Beginn oben, Ende darunter).
   ⚠️ Der Wechsel von Vollfarbe auf Toenung ist bewusst: auf der Vollflaeche stand
   weisser Text, der bei schmalen Balken schlecht las. Getoent traegt der Balken dunkle
   Schrift — dieselbe Entscheidung wie im Schichtplan (24. Runde) und bei den
   Woche/Tag-Bloecken (54. Runde, Pastelloptik). */
.svp .svp-tqb{position:absolute;top:6px;bottom:6px;border-radius:10px;
  display:flex;align-items:center;gap:calc(9px * var(--schkarte, 1));
  padding:0 calc(var(--schpadr, 7px) * var(--schkarte, 1))
          0 calc(var(--schpadl, 7px) * var(--schkarte, 1));
  min-width:0;border:0;cursor:grab;text-align:left;overflow:hidden;
  background:color-mix(in srgb, var(--bal, #dfe3e8) 20%, #fff);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bal, #d7dbe2) 35%, #fff);
  transition:background .12s,box-shadow .12s}
.svp .svp-tqb:hover{z-index:3;
  background:color-mix(in srgb, var(--bal, #dfe3e8) 32%, #fff);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--bal, #d7dbe2) 55%, #fff),
             0 4px 14px rgba(27,42,74,.18)}
.svp .svp-tqb:active{cursor:grabbing}
body.svp-nacht .svp .svp-tqb{color:#ececec;
  background:color-mix(in srgb, var(--bal, #444) 26%, #1e1e1e);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bal, #444) 40%, #1e1e1e)}
body.svp-nacht .svp .svp-tqb:hover{
  background:color-mix(in srgb, var(--bal, #444) 38%, #1e1e1e)}
.svp-tqb__t{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.svp-tqb__t b{font-size:calc(13px * var(--schkarte, 1));font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svp-tqb__t em{font-style:normal;font-size:calc(10.5px * var(--schkarte, 1));
  font-weight:600;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.svp-nacht .svp-tqb__t em{color:#9a9a9a}
.svp-tqb .svp-ring{width:calc(30px * var(--schkarte, 1));height:calc(30px * var(--schkarte, 1));
  font-size:calc(11px * var(--schkarte, 1));flex:none}
/* Uhrzeit rechts — wie .svp-stapel__zeit: Beginn oben, Ende leiser darunter. */
.svp-tqb__zeit{margin-left:auto;align-self:center;flex:none;padding-left:6px;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.svp-tqb__zeit b{font-size:calc(13px * var(--schkarte, 1));font-weight:800;line-height:1.05}
.svp-tqb__zeit u{text-decoration:none;font-size:calc(11px * var(--schkarte, 1));
  font-weight:800;line-height:1.05;opacity:.6}
/* Anfrage statt bestaetigt: gestrichelter Rahmen — derselbe zweite Kanal wie in der
   Wochenansicht, damit der Status auch ohne Farbwahrnehmung lesbar bleibt. Auf getoenter
   Flaeche wirkt "hohl" nicht mehr, deshalb hier die Strichelung. */
.svp .svp-tqb.is-anfrage{background:#fff;
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--bal, #d7dbe2) 60%, #fff)}
.svp .svp-tqb.is-anfrage .svp-tqb__t b::after{content:' · Anfrage';font-weight:600;
  color:var(--mut);font-size:.85em}
body.svp-nacht .svp .svp-tqb.is-anfrage{background:#1e1e1e}
/* Schmale Balken: alles ausser Gesicht und Zeit wird sonst zu Brei. */
.svp .svp-tqb--schmal{padding-left:4px;padding-right:4px;gap:4px}
.svp-tqb--schmal .svp-tqb__t{display:none}
/* Doppelbelegung: derselbe rote Rahmen wie im Wochenraster. */
.svp .svp-tqb.is-konflikt{outline:2px solid var(--rot);outline-offset:-2px}
/* Jetzt-Linie, nur wenn der gezeigte Tag heute ist. */
.svp-tq__jetzt{position:absolute;top:0;bottom:0;width:2px;background:var(--heute);
  z-index:4;pointer-events:none}
.svp-tq__jetzt::before{content:'';position:absolute;left:-3px;top:0;width:8px;height:8px;
  border-radius:50%;background:var(--heute)}
/* Freier Tag: die Zeile bleibt, sagt aber warum sie leer ist. */
.svp-tq__frei{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--faint)}
/* Ziel-Balken beim Zeiten-Tausch (76. Runde) — dieselbe Marke wie im Schichtplan
   (.svp-stapel__k.is-tausch): man sieht, WORAUF man gerade abzielt. */
.svp .svp-tqb.is-tausch{box-shadow:inset 0 0 0 2.5px var(--heute),0 4px 14px rgba(27,42,74,.2)}

/* ============================================================
   SCHICHTPLAN, 3. ANSICHT: ZEITSTRAHL (77. Runde, Nutzer)
   Tage als Zeilen links (Datum gross), Uhrzeit waagerecht oben.
   Die Umkehrung der Tagesansicht quer — dort sind es Mitarbeiter.
   ============================================================ */
.svp-str{flex:1;min-height:0;overflow:auto;border:1px solid var(--ln);
  border-radius:12px;background:#fff;--datsp:96px}
body.svp-nacht .svp-str{background:#1e1e1e;border-color:#2a2a2a}
.svp-str__kopf{display:grid;grid-template-columns:var(--datsp) 1fr;
  position:sticky;top:0;z-index:6;background:#fff;border-bottom:1px solid var(--ln)}
body.svp-nacht .svp-str__kopf{background:#1e1e1e;border-bottom-color:#2a2a2a}
.svp-str__ecke{position:sticky;left:0;z-index:2;background:#fff;
  border-right:1px solid var(--ln)}
body.svp-nacht .svp-str__ecke{background:#1e1e1e;border-right-color:#2a2a2a}
.svp-str__std{display:grid}
.svp-str__std span{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:8px 2px;overflow:hidden;white-space:nowrap}
.svp-str__std b{font-size:18px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.svp-str__std i{font-style:normal;font-size:10px;font-weight:600;color:var(--faint)}
body.svp-nacht .svp-str__std b{color:#ececec}
/* Eine Tageszeile. --strh kommt aus dem Skript: Zeilenhoehe = Spuren x Anzahl. */
.svp-str__zeile{display:grid;grid-template-columns:var(--datsp) 1fr;
  border-bottom:1px solid #eef0f3;min-height:64px}
body.svp-nacht .svp-str__zeile{border-bottom-color:#262626}
.svp-str__zeile:last-child{border-bottom:0}
.svp-str__zeile.is-today{background:#fbfbfc}
body.svp-nacht .svp-str__zeile.is-today{background:#262626}
.svp-str__zeile.is-past{opacity:.62}
/* Datum links — gleiche Anatomie wie die Tages-Pillen der Wochenansicht. */
.svp-str__dat{position:sticky;left:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;padding:8px 6px;background:#fff;
  border-right:1px solid var(--ln)}
body.svp-nacht .svp-str__dat{background:#1e1e1e;border-right-color:#2a2a2a}
.svp-str__zeile.is-today .svp-str__dat{background:#fbfbfc}
body.svp-nacht .svp-str__zeile.is-today .svp-str__dat{background:#262626}
.svp-str__dat b{font-size:24px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
  color:var(--ink)}
.svp-str__dat em{font-style:normal;font-size:11px;font-weight:600;color:var(--mut)}
.svp-str__dat i{font-style:normal;font-size:10px;color:var(--faint)}
body.svp-nacht .svp-str__dat b{color:#ececec}
.svp-str__zeile.is-today .svp-str__dat b,
.svp-str__zeile.is-today .svp-str__dat em{color:var(--heute)}
/* Die Zeitflaeche — Bezugsrahmen der Balken (Prozent). Hoehe kommt aus --strh. */
.svp-str__spur{position:relative;height:var(--strh, 80px);overflow:visible}
.svp-str__leer{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--faint)}
/* ---- Der duenne Balken (Nutzer: "kein dicker Balken, ein duenner Strich,
   am Ende abgerundet") ---- Gesicht sitzt davor und ueberragt den Strich. */
.svp .svp-strb{position:absolute;display:flex;align-items:center;gap:6px;
  border:0;background:transparent;padding:0;cursor:pointer;min-width:0;
  text-align:left;overflow:visible}
/* Der Strich selbst: Kapsel in der Positions- bzw. Mitarbeiterfarbe. */
.svp .svp-strb::before{content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:var(--strichh, 8px);border-radius:999px;
  background:color-mix(in srgb, var(--posfarbe, var(--kolfarbe, #8b93a7)) 55%, #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--posfarbe, var(--kolfarbe, #8b93a7)) 70%, #fff);
  transition:height .12s,background .12s}
.svp .svp-strb:hover::before{height:calc(var(--strichh, 8px) + 3px);
  background:color-mix(in srgb, var(--posfarbe, var(--kolfarbe, #8b93a7)) 75%, #fff)}
body.svp-nacht .svp .svp-strb::before{
  background:color-mix(in srgb, var(--posfarbe, var(--kolfarbe, #8b93a7)) 55%, #1e1e1e)}
/* Offenes Ende: der Strich franst nach rechts aus statt hart zu enden. */
.svp .svp-strb.is-offen::before{
  -webkit-mask-image:linear-gradient(to right,#000 78%,transparent 100%);
  mask-image:linear-gradient(to right,#000 78%,transparent 100%)}
/* Gesicht sitzt AUF dem Strichanfang und ragt darueber hinaus. */
.svp-strb__ava{position:relative;z-index:2;flex:none}
.svp-strb__ava.svp-ring{width:26px;height:26px;font-size:10px;border:2px solid #fff}
body.svp-nacht .svp-strb__ava.svp-ring{border-color:#1e1e1e}
.svp-strb__ava.svp-einh{transform:scale(.62);transform-origin:left center;margin-right:-14px}
/* Name laeuft auf dem Strich mit — bei kurzen Balken blendet er sich aus. */
.svp-strb__t{position:relative;z-index:2;font-size:11px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(255,255,255,.72);border-radius:999px;padding:1px 7px}
body.svp-nacht .svp-strb__t{color:#ececec;background:rgba(30,30,30,.72)}
/* Schicht-Bloecke in Woche/Monat (77. Runde): Die Farbe kommt nicht aus einer festen
   Leistungsfarbe, sondern aus der Position bzw. dem Mitarbeiter — deshalb setzt das
   Skript --bg direkt. Diese Regel liefert nur den Rueckfall, falls einmal keine da ist. */
.svp-b--schicht{--bg:#8b93a7}

/* ---- Datenart-Switch im Kopf (78. Runde, Nutzer) ----
   Gleicher Trog wie .svp-modes, damit die beiden nebeneinander als eine Leiste lesen —
   der Nutzer wollte "so einen Switch-Button direkt neben Monat". Mit Wort statt nur
   Symbol: "Aufträge" und "Arbeitszeiten" erkennt man an einem Icon allein nicht. */
.svp-dart{display:flex;gap:2px;background:var(--soft);border-radius:999px;padding:3px;
  flex:none}
/* 81. Runde: 6px statt 7px Hoehen-Polster — so ist der Switch exakt 36 px hoch wie
   alle Nachbarn der Werkzeug-Reihe (Mitarbeiter-Knopf, Export, Zahnrad). */
.svp .svp-dart button{display:flex;align-items:center;gap:6px;
  padding:6px 13px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:var(--mut);white-space:nowrap;
  transition:background .15s,color .15s}
.svp .svp-dart button svg{width:15px;height:15px;flex:none}
.svp .svp-dart button:hover{color:var(--ink)}
.svp .svp-dart button.is-on{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(27,42,74,.1)}
body.svp-nacht .svp-dart{background:#242424}
body.svp-nacht .svp .svp-dart button.is-on{background:#3a3a3a;color:#ececec}
/* In Zeile 2 links neben den Ansichts-Tabs. */
/* (Die Grid-Platzierung neben den Ansichts-Tabs — 78. Runde — ist seit der 81. Runde
   raus: der Switch steht jetzt in der Werkzeug-Reihe, s. .svp-calhd__r--stapel.) */

/* ===== EINBETTUNG ins Dashboard (Etappe 5) — greift nur unter .sd, das Archiv-Original bleibt unberuehrt ===== */
.sd .svp-side{display:none}          /* Prototyp-Attrappe der Navigation; ihr Nacht-Switch fehlt damit — offener Punkt */
.sd .svp-shell{grid-template-columns:1fr}
/* ---------- Modal + Toast ---------- */
.sd__modalbg{position:fixed;inset:0;background:rgba(10,18,34,.55);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:18px}
.sd__modal{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:420px}
.sd__modal h3{margin:0 0 16px;font-size:17px}
.sd__auftrag{border:1px dashed #f0c49a;border-radius:12px;padding:12px 13px;margin:0 0 18px;background:var(--o-soft)}
.sd__auftrag-lbl{display:block;font-size:11.5px;font-weight:800;letter-spacing:.3px;
  text-transform:uppercase;color:var(--o-ink);margin:0 0 9px}
.sd__auftrag-btns{display:flex;flex-wrap:wrap;gap:8px}
.sd__auftrag-btn{border:1px solid var(--o);background:#fff;color:var(--o-ink);border-radius:10px;
  padding:9px 13px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.12s}
.sd__auftrag-btn:hover{background:var(--o);color:#fff}
.sd__modalbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.sd__modalbtns .sd__btn--main{width:auto}
.sd__toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-size:14px;font-weight:700;
  padding:11px 20px;border-radius:999px;z-index:60;box-shadow:0 8px 26px rgba(6,14,30,.4)}

/* ---------- Responsive: Sidebar -> Topbar ---------- */
@media(max-width:820px){
  .sd__app{grid-template-columns:1fr}
  .sd__side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;
    gap:10px;border-right:0;border-bottom:1px solid var(--ln)}
  .sd__nav{flex-direction:row;flex:1;overflow-x:auto;gap:4px}
  .sd__nav button{white-space:nowrap}
  .sd__sidefoot{display:none}
}