/* =====================================================================
Rozeit – Design-System (Aufbau wie Shiftbase, Farben Gartencenter Nickl)
Ersetzt static/rozeit.css 1:1 – alle bisherigen Klassennamen bleiben.
===================================================================== */
/* ---------- Schrift (lokal, kein CDN) --------------------------------
Datei: static/fonts/InterVariable.woff2 (rsms.me/inter, SIL OFL) */
@font-face{font-family:"Inter";src:url("fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* ---------- 1. Farb-Tokens ----------------------------------------- */
:root{
/* Grün – abgeleitet aus CI #718840 (500) / #475b22 (700) / #e8f0d0 (100) */
--g-50:#f5f8ec; --g-100:#e8f0d0; --g-200:#d3e1ad; --g-300:#b7cc85; --g-400:#93ac5e;
--g-500:#718840; --g-600:#5a6f30; --g-700:#475b22; --g-800:#36451a; --g-900:#263113; --g-950:#161d0b;
/* Warme Neutraltöne (leicht gelb-grünlich, passend zum Grün) */
--n-0:#ffffff; --n-25:#fcfbf8; --n-50:#f7f6f2; --n-100:#f0eee8; --n-150:#e9e6de;
--n-200:#e2dfd5; --n-300:#d1cdc1; --n-400:#a8a397; --n-500:#7f7a6e; --n-600:#615d53;
--n-700:#49463f; --n-800:#2f2d28; --n-900:#1c1b18;
/* Akzent CI – nur Zähler-Badges, ArbZG-Verstoß, „Jetzt“-Linie */
--akzent:#e60046; --akzent-bg:#fde6ed;
/* Semantik: Hintergrund / Text / Rand / Vollton */
--ok-bg:#e8f3e6; --ok-text:#25571f; --ok-rand:#bcdab3; --ok:#3a7d2c;
--warn-bg:#fdf4dd; --warn-text:#734a00; --warn-rand:#efd497; --warn:#c28400;
--err-bg:#fdecef; --err-text:#9a1235; --err-rand:#f4bfcc; --err:#cf1240;
--info-bg:#e9f0f7; --info-text:#24507a; --info-rand:#bfd3e7; --info:#3a72a6;
/* Rollen */
--bg:var(--n-50); --flaeche:var(--n-0); --flaeche-2:var(--n-25);
--linie:var(--n-200); --linie-stark:var(--n-300);
--text:var(--n-900); --text-2:var(--n-600); --text-3:var(--n-500); --text-leer:var(--n-400);
--marke:var(--g-700); --marke-hover:var(--g-800);
--fokus:color-mix(in srgb, var(--g-500) 55%, transparent);
/* Alte Variablennamen weiter gültig */
--gruen:var(--g-700); --gruen2:var(--g-500); --pastell:var(--g-100); --pastell2:var(--g-50);
--rot:var(--akzent); --karte:var(--flaeche); --grau:var(--text-2); --hell:var(--text-leer);
--warn-alt:var(--warn);
/* Form */
--r-xs:4px; --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; --radius:var(--r-lg);
--sh-xs:0 1px 2px rgba(28,27,24,.05);
--sh-sm:0 1px 3px rgba(28,27,24,.07),0 1px 2px rgba(28,27,24,.04);
--sh-md:0 6px 16px -4px rgba(28,27,24,.12),0 2px 4px -2px rgba(28,27,24,.06);
--sh-lg:0 28px 56px -16px rgba(28,27,24,.30),0 8px 16px -8px rgba(28,27,24,.12);
--sidebar:248px;
--h-ctl:34px; --h-ctl-k:28px;
--font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
/* ---------- 2. Basis ------------------------------------------------ */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-size:14px;line-height:1.45;color:var(--text);background:var(--bg);
font-feature-settings:"cv11","ss03";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--g-700);text-decoration:none}
a:hover{color:var(--g-800);text-decoration:underline;text-underline-offset:2px}
h1{font-size:22px;line-height:1.25;font-weight:650;letter-spacing:-.018em;margin:0 0 16px}
h2{font-size:16px;line-height:1.3;font-weight:620;letter-spacing:-.01em;margin:0 0 10px}
h3{font-size:14px;font-weight:600;margin:0 0 8px}
.klein{font-size:12px;color:var(--text-2)}
.mono,td.zahl,th.zahl{font-variant-numeric:tabular-nums}
::selection{background:var(--g-200)}
:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
svg.i{flex-shrink:0;display:block}
/* ---------- 3. Logo ------------------------------------------------- */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.logo-mark{display:block;border-radius:22%}
.logo-wort{font-weight:760;font-size:21px;letter-spacing:-.045em;color:var(--g-800);line-height:1}
.sidebar .logo{padding:18px 18px 14px 20px}
/* Altes Markup (R) bleibt lauffähig */
.logo .mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--g-500),var(--g-800));display:grid;place-items:center;color:#fff;font-size:14px}
/* ---------- 4. Layout / Seitenleiste -------------------------------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:var(--n-25);border-right:1px solid var(--linie);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.nav{list-style:none;margin:0;padding:4px 10px;flex:1;overflow:auto}
.nav li+li{margin-top:1px}
.nav a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r);color:var(--n-700);font-size:14px;font-weight:500;transition:background .12s,color .12s}
.nav a:hover{background:var(--n-100);color:var(--text);text-decoration:none}
.nav a.aktiv{background:var(--g-100);color:var(--g-800);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-300) 45%,transparent)}
.nav .ico{width:20px;height:20px;display:grid;place-items:center;color:var(--n-500)}
.nav a:hover .ico{color:var(--n-700)}
.nav a.aktiv .ico{color:var(--g-700)}
.nav .unter a{height:32px;padding-left:40px;font-size:13.5px;color:var(--n-600);position:relative}
.nav .unter a::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:1px;background:var(--linie)}
.nav .unter a.aktiv::before{background:var(--g-500);width:2px;left:18.5px}
.nav .unter a.aktiv{background:transparent;box-shadow:none;color:var(--g-800)}
.nav .unter a.aktiv:hover{background:var(--n-100)}
.sidebar .fuss{border-top:1px solid var(--linie);padding:8px 10px 12px}
.profil{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r)}
.profil:hover{background:var(--n-100)}
.profil a.klein{color:var(--text-3)}
.haupt{flex:1;min-width:0;padding:20px 28px 48px}
/* ---------- 5. Badge (Zähler) -------------------------------------- */
.badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--akzent);color:#fff;
font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--n-25)}
/* ---------- 6. Hinweise: Banner / Flash / Befund ------------------- */
.banner{display:flex;gap:8px;align-items:flex-start;background:var(--warn-bg);border:1px solid var(--warn-rand);color:var(--warn-text);
padding:8px 12px;border-radius:var(--r);font-size:12.5px;margin-bottom:16px}
.banner svg.i{margin-top:1px;color:var(--warn)}
.flash{display:flex;gap:8px;align-items:flex-start;padding:10px 14px;border-radius:var(--r);margin-bottom:12px;border:1px solid;font-size:13.5px}
.flash.ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-rand)}
.flash.fehler{background:var(--err-bg);color:var(--err-text);border-color:var(--err-rand)}
.flash.warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-rand)}
.flash.info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-rand)}
.befund{padding:8px 12px;border-radius:var(--r);margin-bottom:6px;font-size:13px;border:1px solid}
.befund.verstoss{background:var(--err-bg);color:var(--err-text);border-color:var(--err-rand)}
.befund.hinweis{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-rand)}
.befund.info{background:var(--g-50);color:var(--g-800);border-color:var(--g-200)}
/* ---------- 7. Werkzeugleiste -------------------------------------- */
.leiste{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--flaeche);border:1px solid var(--linie);
border-radius:var(--r-lg);padding:8px;margin-bottom:14px;box-shadow:var(--sh-xs)}
.leiste .spacer{flex:1}
.leiste > b{font-weight:600;padding:0 4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.leiste .trenner{width:1px;align-self:stretch;margin:4px 2px;background:var(--linie)}
/* ---------- 8. Buttons --------------------------------------------- */
button,select,input,textarea{font:inherit;color:inherit}
.btn{--b-bg:var(--flaeche);--b-fg:var(--n-800);--b-rand:var(--linie-stark);
display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--h-ctl);padding:0 12px;
border:1px solid var(--b-rand);border-radius:var(--r);background:var(--b-bg);color:var(--b-fg);
font-size:13.5px;font-weight:550;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;
box-shadow:var(--sh-xs);transition:background .12s,border-color .12s,box-shadow .12s,transform .06s}
.btn:hover{background:var(--n-50);border-color:var(--n-400);color:var(--b-fg);text-decoration:none}
.btn:active{transform:translateY(.5px);background:var(--n-100)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--flaeche),0 0 0 4px var(--fokus)}
.btn[disabled],.btn.aus{opacity:.5;pointer-events:none;box-shadow:none}
.btn svg.i{width:16px;height:16px;margin:0 -1px}
/* primär */
.btn.primaer{--b-bg:var(--g-700);--b-fg:#fff;--b-rand:var(--g-800);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(38,49,19,.30)}
.btn.primaer:hover{background:var(--g-800);border-color:var(--g-900);color:#fff}
.btn.primaer:active{background:var(--g-900)}
/* sekundär = Standard .btn ; ghost */
.btn.ghost{--b-bg:transparent;--b-rand:transparent;box-shadow:none;color:var(--n-700)}
.btn.ghost:hover{background:var(--n-100);border-color:transparent}
/* Gefahr (alt: .rot) */
.btn.rot,.btn.gefahr{--b-fg:var(--err-text);--b-rand:var(--err-rand)}
.btn.rot:hover,.btn.gefahr:hover{background:var(--err-bg);border-color:var(--err)}
.btn.gefahr-voll{--b-bg:var(--err);--b-fg:#fff;--b-rand:var(--err);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(120,10,40,.3)}
.btn.gefahr-voll:hover{background:#b00e37;color:#fff}
/* bestätigen (alt: .gruen) – ok-Ton, nicht Markengrün */
.btn.gruen{--b-bg:var(--ok-bg);--b-fg:var(--ok-text);--b-rand:var(--ok-rand)}
.btn.gruen:hover{background:var(--ok);border-color:var(--ok);color:#fff}
/* Größen */
.btn.klein{height:var(--h-ctl-k);padding:0 9px;font-size:12.5px;border-radius:7px}
.btn.klein svg.i{width:14px;height:14px}
.btn.ico{width:var(--h-ctl);padding:0}
.btn.klein.ico{width:var(--h-ctl-k)}
/* ---------- 9. Segment-Control ------------------------------------- */
.segment{display:inline-flex;gap:2px;padding:3px;background:var(--n-100);border:1px solid var(--n-150);border-radius:10px;height:var(--h-ctl)}
.segment a{display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:7px;color:var(--n-600);font-size:13px;font-weight:550;transition:color .12s,background .12s}
.segment a:hover{color:var(--n-900);text-decoration:none;background:color-mix(in srgb,var(--n-0) 50%,transparent)}
.segment a.aktiv{background:var(--flaeche);color:var(--n-900);font-weight:600;box-shadow:0 1px 2px rgba(28,27,24,.10),0 0 0 1px rgba(28,27,24,.06)}
.segment a:focus-visible{outline:2px solid var(--fokus);outline-offset:0}
/* ---------- 10. Eingabefelder -------------------------------------- */
select,input[type=text],input[type=date],input[type=time],input[type=email],input[type=password],input[type=number],input[type=search],textarea{
height:var(--h-ctl);padding:0 10px;max-width:100%;
background:var(--flaeche);color:var(--text);border:1px solid var(--linie-stark);border-radius:var(--r);
box-shadow:inset 0 1px 1px rgba(28,27,24,.03);transition:border-color .12s,box-shadow .12s}
textarea{width:100%;height:auto;min-height:84px;padding:8px 10px;line-height:1.45}
select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f7a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center}
select:hover,input:hover,textarea:hover{border-color:var(--n-400)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--g-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--g-500) 22%,transparent)}
input::placeholder,textarea::placeholder{color:var(--n-400)}
input:disabled,select:disabled,textarea:disabled{background:var(--n-50);color:var(--text-3);cursor:not-allowed}
input[type=checkbox],input[type=radio]{accent-color:var(--g-700);width:16px;height:16px;vertical-align:-3px;margin:0 6px 0 0}
.leiste select{min-width:220px;font-weight:550}
.feld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.feld label{font-size:12.5px;color:var(--n-700);font-weight:550}
.feld input,.feld select{width:100%}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drei{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
/* ---------- 11. Pills / Status ------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600;
line-height:1;white-space:nowrap;border:1px solid transparent;background:var(--n-100);color:var(--n-700);vertical-align:middle}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pill.ok,.pill.genehmigt{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-rand)}
.pill.pend,.pill.offen{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-rand)}
.pill.nein,.pill.abgelehnt{background:var(--err-bg);color:var(--err-text);border-color:var(--err-rand)}
.pill.lauf,.pill.laeuft{background:var(--info-bg);color:var(--info-text);border-color:var(--info-rand)}
.pill.lauf::before,.pill.laeuft::before{animation:rz-puls 1.6s ease-out infinite}
.pill.plan{background:var(--g-50);color:var(--g-700);border-color:var(--g-200)}
.pill.plan::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
/* Abwesenheitsart mit DB-Farbe: */
.pill.art{background:color-mix(in srgb,var(--c,#999) 14%,#fff);color:color-mix(in srgb,var(--c,#999) 40%,var(--n-900));border-color:color-mix(in srgb,var(--c,#999) 35%,#fff)}
.pill.art::before{background:var(--c,#999);opacity:1}
/* Zähler in Pills (Prioritätsansicht) */
summary .pill::before{display:none}
@keyframes rz-puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}100%{box-shadow:0 0 0 6px transparent}}
/* ---------- 12. Avatare -------------------------------------------- */
.avatar{--av-bg:var(--g-100);--av-fg:var(--g-800);
width:32px;height:32px;border-radius:50%;flex-shrink:0;display:inline-grid;place-items:center;
background:var(--av-bg);color:var(--av-fg);font-size:12px;font-weight:650;letter-spacing:.02em;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--av-fg) 14%,transparent)}
.avatar.k{width:28px;height:28px;font-size:11px}
.avatar.gross{width:56px;height:56px;font-size:19px}
/* Farbe stabil je Mitarbeiter: class="avatar f{{ m['id'] % 8 }}" */
.avatar.f0{--av-bg:#e8f0d0;--av-fg:#36451a}
.avatar.f1{--av-bg:#e3edf6;--av-fg:#2a4d70}
.avatar.f2{--av-bg:#f6e9de;--av-fg:#7a461b}
.avatar.f3{--av-bg:#efe6f3;--av-fg:#5a386c}
.avatar.f4{--av-bg:#e0f0ec;--av-fg:#205a4e}
.avatar.f5{--av-bg:#f6ecd0;--av-fg:#6b5110}
.avatar.f6{--av-bg:#f4e3e4;--av-fg:#7c2d33}
.avatar.f7{--av-bg:#ecebe5;--av-fg:#49463f}
/* Avatar mit Abwesenheitsfarbe: style="--c:{{ farbe }}" */
.avatar[style*="--c"]{--av-bg:color-mix(in srgb,var(--c) 18%,#fff);--av-fg:color-mix(in srgb,var(--c) 45%,var(--n-900))}
/* ---------- 13. Karten / Listen / KPI ------------------------------ */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:14px;box-shadow:var(--sh-xs)}
.karte > h2:first-child{display:flex;align-items:baseline;gap:6px}
.karte > h2 .klein{font-weight:500;color:var(--text-3)}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.raster .karte{margin:0}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.kpi .karte{margin:0;text-align:left;padding:14px 16px}
.kpi .wert{font-size:26px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.liste{list-style:none;margin:0;padding:0}
.liste li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--n-150)}
.liste li:last-child{border-bottom:0}
.liste .rechts{margin-left:auto;text-align:right}
.leer{color:var(--text-leer);text-align:center;padding:28px 16px;font-size:13px}
details.karte > summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer}
details.karte > summary::-webkit-details-marker{display:none}
details.karte > summary::before{content:"";width:16px;height:16px;flex-shrink:0;transition:transform .15s;
background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f7a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E")}
details.karte[open] > summary::before{transform:rotate(90deg)}
/* ---------- 14. Tabellen ------------------------------------------- */
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--n-150);vertical-align:middle}
th{font-size:11.5px;font-weight:600;color:var(--text-3);letter-spacing:.03em;text-transform:uppercase;
background:var(--n-25);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:2;white-space:nowrap;padding-top:8px;padding-bottom:8px}
table:not(.plan) tbody tr:hover > td{background:color-mix(in srgb,var(--g-50) 70%,var(--n-0))}
tbody tr:last-child > td{border-bottom:0}
td.zahl,th.zahl{text-align:right}
tr.summe td{font-weight:650;background:var(--n-50);border-top:1px solid var(--linie-stark);border-bottom:0}
.tabwrap{overflow:auto;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.karte > .tabwrap{box-shadow:none}
.herkunft{font-size:11.5px;color:var(--text-3)}
td.unter{color:var(--err-text);font-weight:650;background:var(--err-bg)}
td.ueber{color:var(--warn-text);font-weight:650;background:var(--warn-bg)}
.ze td.mono,td.mono{white-space:nowrap}
.std{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px}
.std.plus{color:var(--ok)}.std.minus{color:var(--err)}
/* ---------- 15. Dienstplan-Raster ---------------------------------- */
table.plan{min-width:960px}
table.plan th{text-transform:none;letter-spacing:0;font-size:12px;vertical-align:bottom}
table.plan th.tag{min-width:124px;padding:8px 8px 7px;color:var(--text-3);font-weight:550}
table.plan th.tag a{display:block;color:inherit;text-decoration:none}
table.plan th.tag .nr{display:block;font-size:19px;font-weight:650;color:var(--n-800);letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
table.plan th.heute{color:var(--g-700);box-shadow:inset 0 -2px 0 var(--g-600);background:var(--g-50)}
table.plan th.heute .nr{display:grid;width:max-content;place-items:center;min-width:30px;height:28px;padding:0 4px;margin-top:2px;border-radius:7px;background:var(--g-700);color:#fff;font-size:16px}
table.plan td.heute{background:color-mix(in srgb,var(--g-50) 75%,transparent)}
table.plan th.ft{background:var(--akzent-bg)}
table.plan th.ft .klein{display:block;color:var(--err-text);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.plan td{padding:4px 5px;height:52px;vertical-align:top;border-left:1px solid var(--n-100)}
table.plan td.name,table.plan th.name{min-width:210px;max-width:230px;position:sticky;left:0;background:var(--flaeche);z-index:3;border-left:0;
box-shadow:1px 0 0 var(--linie)}
table.plan th.name{background:var(--n-25)}
table.plan td.name{padding:8px 12px;vertical-align:middle}
table.plan td.name a{color:var(--n-900);font-weight:600}
table.plan tr.kopf td{font-size:12px;color:var(--text-2);height:auto;padding:6px 8px;background:var(--n-25);font-variant-numeric:tabular-nums;vertical-align:middle}
table.plan tr.kopf td.name{font-size:12px;font-weight:550;color:var(--n-700);background:var(--n-25)}
table.plan tr.kopf td.name .klein{display:block;font-size:11px;color:var(--text-3);font-weight:400}
table.plan tr.abtzeile td{background:var(--n-100);font-weight:650;font-size:13px;height:auto;padding:7px 12px;color:var(--n-800);border-left:0;
border-top:1px solid var(--linie)}
table.plan tr.abtzeile .strich{display:inline-block;width:8px;height:8px;border-radius:2.5px;background:var(--g-500);margin-right:8px;vertical-align:1px}
table.plan .zelle{cursor:pointer;transition:background .1s}
table.plan .zelle:hover{background:var(--g-50)}
table.plan .zelle:empty:hover::after,table.plan .zelle:hover:not(:has(.schicht,.abw))::after{
content:"+";display:grid;place-items:center;height:40px;border:1px dashed var(--g-300);border-radius:var(--r-sm);color:var(--g-600);font-size:16px}
/* Schichtkarte – Farbe kommt aus der Vorlage: style="--c:{{ s['farbe'] or '#718840' }}" */
.schicht{--c:var(--g-500);position:relative;margin:0 0 4px;padding:4px 7px 5px 10px;border-radius:var(--r-sm);cursor:pointer;
font-size:12px;line-height:1.3;color:var(--n-700);font-variant-numeric:tabular-nums;
background:color-mix(in srgb,var(--c) 11%,#fff);
border:1px solid color-mix(in srgb,var(--c) 26%,#fff);
transition:box-shadow .12s,transform .12s,border-color .12s}
.schicht::before{content:"";position:absolute;left:3px;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--c)}
.schicht b{display:block;font-weight:600;color:var(--n-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.schicht:hover{border-color:color-mix(in srgb,var(--c) 55%,#fff);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.schicht:focus-visible{outline:2px solid var(--fokus);outline-offset:1px}
/* offen: noch niemand zugeteilt */
.schicht.offen{background:repeating-linear-gradient(135deg,var(--n-0) 0 6px,var(--n-25) 6px 12px);
border:1px dashed var(--g-400);color:var(--g-700)}
.schicht.offen::before{background:transparent;border:1.5px dashed var(--g-400);width:0;left:3px}
.schicht.offen b{color:var(--g-800)}
/* Entwurf: angelegt, nicht veröffentlicht */
.schicht.entwurf{background:var(--n-0);border:1px dashed color-mix(in srgb,var(--c) 60%,#fff)}
.schicht.entwurf::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c)}
.schicht.entwurf b::after{content:"Entwurf";margin-left:6px;padding:0 5px;border-radius:4px;background:var(--n-100);color:var(--n-600);
font-size:10px;font-weight:600;letter-spacing:.02em;vertical-align:1px}
/* fremd: Schicht in anderer Abteilung */
.schicht.fremd{background:var(--n-50);border:1px solid var(--n-150);color:var(--n-500);cursor:default;font-style:normal;opacity:1}
.schicht.fremd::before{background:repeating-linear-gradient(180deg,var(--n-300) 0 3px,transparent 3px 5px)}
.schicht.fremd b{color:var(--n-600);font-weight:550}
.schicht.fremd:hover{transform:none;box-shadow:none}
/* Abwesenheit – DB-Farbe nur als Tönung: style="--c:{{ ab['farbe'] or '#999' }}" */
.abw{--c:#999;display:flex;align-items:center;gap:5px;margin:0 0 4px;padding:3px 7px;border-radius:var(--r-sm);
font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:color-mix(in srgb,var(--c) 38%,var(--n-900));
background:color-mix(in srgb,var(--c) 18%,#fff);
border:1px solid color-mix(in srgb,var(--c) 38%,#fff)}
.abw::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex-shrink:0;
box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 60%,var(--n-900))}
.abw.pending{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 12%,#fff) 0 5px,#fff 5px 10px);border-style:dashed;opacity:1}
.abw.pending::after{content:"ausstehend";margin-left:auto;font-weight:500;font-size:10.5px;color:var(--n-500)}
/* ArbZG-Marker */
.warnpunkt{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;margin:2px 3px 0 0;
background:var(--akzent);color:#fff;font-size:11px;font-weight:750;line-height:1;cursor:help;box-shadow:0 1px 2px rgba(150,0,40,.3)}
.warnpunkt.h{background:var(--warn-bg);color:var(--warn-text);box-shadow:inset 0 0 0 1px var(--warn-rand)}
.fusszeile{display:flex;align-items:center;gap:20px;padding:10px 16px;margin-top:-1px;background:var(--n-25);border:1px solid var(--linie);
border-radius:0 0 var(--r-lg) var(--r-lg);font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.fusszeile .p{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--akzent);margin-right:7px;vertical-align:1px}
.tabwrap:has(+ .fusszeile){border-radius:var(--r-lg) var(--r-lg) 0 0}
.plan.monat td{height:auto}
.monat .schicht{padding:3px 5px 3px 9px}
.monat .schicht.entwurf b::after{display:none}
/* ---------- 16. Zeiterfassung -------------------------------------- */
.ze td{vertical-align:middle}
.ze tr.ist td{padding-top:8px;padding-bottom:8px}
.ze tr.plan td{color:var(--text-3);font-size:12px;background:transparent;padding-top:0;padding-bottom:10px;border-bottom:1px solid var(--n-150)}
.ze tbody tr.ist:hover > td,.ze tbody tr.ist:hover + tr.plan > td{background:var(--g-50)}
.punkt{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-left:4px;vertical-align:2px}
/* ---------- 17. Abwesenheitskalender ------------------------------- */
.kal th{padding:6px 2px;text-align:center;font-size:11px;text-transform:none;letter-spacing:0;line-height:1.25}
.kal td{padding:0 1px;height:34px;min-width:28px;text-align:center;border-left:1px solid var(--n-100)}
.kal th.we,.kal td.we{background:var(--n-50)}
.kal td.name{text-align:left;padding:6px 12px;min-width:200px;position:sticky;left:0;background:var(--flaeche);z-index:1;box-shadow:1px 0 0 var(--linie)}
.kal .blk{--c:#999;display:block;height:22px;margin:6px 0;border-radius:4px;
background:color-mix(in srgb,var(--c) 30%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,#fff)}
.kal td + td .blk{margin-left:-1px;margin-right:-1px}
.legende{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--text-2);margin-top:12px}
.legende span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;
background:color-mix(in srgb,var(--c) 30%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,#fff)}
/* ---------- 18. Reiter --------------------------------------------- */
.reiter{display:flex;gap:2px;border-bottom:1px solid var(--linie);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.reiter a{padding:10px 12px;color:var(--text-2);font-weight:550;font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;border-radius:6px 6px 0 0}
.reiter a:hover{text-decoration:none;color:var(--text);background:var(--n-100)}
.reiter a.aktiv{color:var(--g-800);border-color:var(--g-700);font-weight:650}
/* ---------- 19. Dialog --------------------------------------------- */
dialog{border:0;padding:0;width:min(580px,calc(100vw - 24px));max-height:calc(100dvh - 48px);border-radius:var(--r-xl);
background:var(--flaeche);color:var(--text);box-shadow:var(--sh-lg),0 0 0 1px rgba(28,27,24,.06)}
dialog[open]{animation:rz-dlg .18s cubic-bezier(.2,.8,.2,1)}
dialog::backdrop{background:rgba(28,27,24,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
dialog[open]::backdrop{animation:rz-fade .18s ease-out}
dialog form.inhalt{padding:0 24px 20px}
dialog .kopfz{display:flex;justify-content:space-between;align-items:center;margin:0 -24px 18px;padding:16px 16px 14px 24px;border-bottom:1px solid var(--n-150)}
dialog .kopfz h2{margin:0;font-size:16.5px}
dialog .kopfz [data-schliessen]{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r);color:var(--n-500);font-size:0;text-decoration:none}
dialog .kopfz [data-schliessen]::before{content:"";width:18px;height:18px;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center/18px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center/18px no-repeat}
dialog .kopfz [data-schliessen]:hover{background:var(--n-100);color:var(--n-900)}
.knoepfe{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin:20px -24px -20px;padding:14px 24px;background:var(--n-25);border-top:1px solid var(--n-150);border-radius:0 0 var(--r-xl) var(--r-xl)}
.knoepfe .btn.rot,.knoepfe .btn.gefahr{margin-right:auto}
.karte .knoepfe,form:not(.inhalt) > .knoepfe{margin:16px 0 0;padding:0;background:none;border:0}
@keyframes rz-dlg{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes rz-fade{from{opacity:0}to{opacity:1}}
.wdh{display:flex;gap:4px}
.wdh label{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--linie-stark);cursor:pointer;font-size:12px;font-weight:600;color:var(--n-600);transition:all .12s}
.wdh label:hover{border-color:var(--g-400);color:var(--g-700)}
.wdh input{display:none}
.wdh label:has(input:checked){background:var(--g-700);color:#fff;border-color:var(--g-700)}
/* ---------- 20. Anmeldeseite --------------------------------------- */
.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(420px,1.05fr) 1fr;background:var(--n-50)}
.login-buehne{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:40px 48px;color:#f3f6ea;
background:
radial-gradient(120% 80% at 0% 0%,rgba(147,172,94,.38) 0%,transparent 55%),
radial-gradient(90% 70% at 100% 100%,rgba(22,29,11,.85) 0%,transparent 60%),
linear-gradient(160deg,var(--g-700) 0%,var(--g-800) 55%,var(--g-900) 100%)}
/* feines Blattadern-/Höhenlinienmuster */
.login-buehne::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.06;
background:repeating-radial-gradient(circle at 78% 42%,transparent 0 22px,#fff 22px 23px)}
/* Ziffernring: 60 Minuten-Striche, 12 Stunden-Striche */
.ziffernring{position:absolute;z-index:-1;width:min(64vh,560px);aspect-ratio:1;right:-50%;opacity:.5;top:50%;transform:translateY(-50%);border-radius:50%;
background:
repeating-conic-gradient(from -1deg,rgba(255,255,255,.55) 0 2deg,transparent 2deg 30deg),
repeating-conic-gradient(from -.3deg,rgba(255,255,255,.22) 0 .6deg,transparent .6deg 6deg);
-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 26px),#000 calc(100% - 25px),#000 100%,transparent 100%);
mask:radial-gradient(closest-side,transparent calc(100% - 26px),#000 calc(100% - 25px),#000 100%,transparent 100%);}
.ziffernring .jetzt{position:absolute;left:50%;top:6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 4px rgba(230,0,70,.25)}
.login-buehne .logo-wort{color:#fff;font-size:24px}
.login-buehne .logo-mark{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 6px 20px rgba(0,0,0,.25)}
.login-claim{max-width:440px}
.login-claim h1{font-size:clamp(30px,3.4vw,44px);line-height:1.08;font-weight:700;letter-spacing:-.035em;margin:0 0 14px;color:#fff}
.login-claim h1 span{color:var(--g-200)}
.login-claim p{margin:0;font-size:15px;line-height:1.55;color:rgba(243,246,234,.78)}
.login-fuss{font-size:12px;color:rgba(243,246,234,.6);letter-spacing:.02em}
.login-form{display:grid;place-items:center;padding:40px 24px}
.login-karte{width:min(380px,100%)}
.login-karte h2{font-size:24px;font-weight:680;letter-spacing:-.025em;margin:0 0 6px}
.login-karte .unterzeile{color:var(--text-2);margin:0 0 26px}
.login-karte input{width:100%;height:42px;font-size:15px;padding:0 12px;border-radius:10px}
.login-karte .btn.primaer{width:100%;height:42px;font-size:15px;border-radius:10px;margin-top:8px}
.login-karte .feld{margin-bottom:16px}
.login-karte .klein{margin-top:28px;color:var(--text-3);text-align:center}
@media (prefers-reduced-motion:reduce){.pill.lauf::before{animation:none}dialog[open]{animation:none}}
/* Altes Login-Markup (.login > .karte) bleibt nutzbar */
.login > .karte{grid-column:1/-1;place-self:center;width:min(380px,92vw);padding:28px}
/* ---------- 20b. Seitenkopf, Dashboard, Muster -------------------- */
.logo-link{display:block;padding:18px 18px 14px 20px}
.logo-link:hover{text-decoration:none}
.sidebar .fuss .nav{padding:0 0 6px;flex:none}
.profil-text{min-width:0;flex:1}
.profil-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profil-text .klein{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-3);font-size:11.5px}
.seitenkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;min-height:36px}
.seitenkopf h1{margin:0}
.sk-titel{min-width:0}
.sk-unter{margin:4px 0 0;font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.sk-aktionen{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.status-pill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;background:var(--flaeche);
border:1px solid var(--linie);font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap;cursor:help;box-shadow:var(--sh-xs)}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.banner.fehler{background:var(--err-bg);border-color:var(--err-rand);color:var(--err-text)}
.banner.fehler svg.i{color:var(--err)}
.karte-kopf{display:flex;align-items:center;gap:8px;min-height:28px;margin-bottom:10px}
.karte-kopf h2{margin:0;font-size:14.5px}
.karte-kopf .meta{font-size:12px;color:var(--text-3)}
.karte-kopf .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}
.karte-link{margin-left:auto;font-size:12.5px;font-weight:550;display:inline-flex;align-items:center;gap:4px}
.zaehler{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--n-100);color:var(--text-2);font-size:11px;font-weight:650;font-variant-numeric:tabular-nums}
.zaehler.akzent{background:var(--akzent);color:#fff}
.meta{font-size:12px;color:var(--text-3)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.kachel{position:relative;display:flex;flex-direction:column;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-lg);box-shadow:var(--sh-xs);
padding:14px 16px;color:inherit;transition:box-shadow .15s,border-color .15s,transform .15s;min-width:0}
a.kachel:hover{text-decoration:none;color:inherit;border-color:var(--linie-stark);box-shadow:var(--sh-md);transform:translateY(-1px)}
.k-kopf{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);font-weight:550}
.k-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--g-50);color:var(--g-700);flex:none}
.k-ico svg{width:16px;height:16px}
.k-wert{display:block;margin-top:12px;font-size:28px;line-height:1;font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--n-900)}
.k-wert.mittel{font-size:21px;letter-spacing:-.015em}
.k-sub{display:block;margin-top:6px;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kachel.achtung .k-ico{background:var(--err-bg);color:var(--err)}
.kachel.achtung .k-wert{color:var(--err-text)}
.kachel.warnung .k-ico{background:var(--warn-bg);color:var(--warn)}
.kachel.info .k-ico{background:var(--info-bg);color:var(--info)}
.kachel.held{background:linear-gradient(150deg,var(--g-600),var(--g-800));border-color:var(--g-800);color:#fff}
.kachel.held .k-kopf,.kachel.held .k-sub{color:rgba(255,255,255,.78)}
.kachel.held .k-wert{color:#fff}
.kachel.held .k-ico{background:rgba(255,255,255,.14);color:#fff}
.dash{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.dash > div > .karte:last-child{margin-bottom:0}
.raster{align-items:start}
.leer{color:var(--text-3);text-align:left;padding:6px 0;font-size:13px}
.leerzustand{text-align:center;padding:40px 24px}
.leerzustand .lz-icon{width:44px;height:44px;margin:0 auto 12px;border-radius:12px;background:var(--g-50);color:var(--g-600);display:grid;place-items:center}
.leerzustand .lz-titel{margin:0;font-weight:600}
.leerzustand .lz-text{margin:4px auto 0;max-width:42ch;color:var(--text-3);font-size:13px}
td .sub,.sub{display:block;font-size:11.5px;color:var(--text-3);line-height:1.35;font-weight:400}
.liste .titel{font-weight:600}
.fusszeile .p.null{background:var(--n-300)}
.kz-soll{color:var(--text-3)}
.kz-prognose{color:var(--text-3)}
.kz-unter{color:var(--err-text);font-weight:650}
.kz-ueber{color:var(--warn-text);font-weight:650}
/* Startseite: Stempelkarte und Tageskarten */
.stempel{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.st-kopf{display:flex;gap:12px;align-items:center;flex:1;min-width:200px}
.st-punkt{width:10px;height:10px;border-radius:50%;background:var(--n-300);flex:none}
.st-titel{font-size:16px;font-weight:620;letter-spacing:-.01em}
.stempel.laeuft{background:linear-gradient(180deg,var(--g-50),#fff);border-color:var(--g-200)}
.stempel.laeuft .st-punkt{background:var(--ok);animation:rz-puls2 2s infinite}
@keyframes rz-puls2{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.stempel .btn{height:40px;padding:0 18px;font-size:14px}
.btn.ausstempeln{--b-fg:var(--err-text);--b-rand:var(--err-rand)}
.tagk{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--n-150);color:inherit}
.tagk:first-of-type{border-top:0}
a.tagk:hover{text-decoration:none;color:inherit}
a.tagk:hover .tk-zeit{color:var(--g-700)}
.tk-datum{width:38px;flex:none;text-align:center;line-height:1}
.tk-wt{display:block;font-size:10.5px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.tk-nr{display:block;font-size:19px;font-weight:650;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tk-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;border-left:3px solid var(--c,var(--g-500));padding-left:12px}
.tk-zeit{font-size:15px;font-weight:620;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tk-info .klein{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-dauer{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.tagk.heute{margin:0 -10px;padding:10px;background:var(--g-50);border-radius:10px;border-top-color:transparent}
.tagk.heute + .tagk{border-top-color:transparent}
.tagk.heute .tk-wt,.tagk.heute .tk-nr{color:var(--g-700)}
.tagk.frei{padding:5px 0}
.tagk.frei .tk-nr{font-size:14px;font-weight:500;color:var(--text-leer)}
.tagk.frei .tk-wt,.tagk.frei .klein{color:var(--text-leer)}
.tagk.frei .tk-info{border-left-color:transparent}
.tagk.abwesend .tk-info{border-left-color:var(--c)}
.marke{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--g-700);border-radius:4px;padding:2px 6px;margin-bottom:3px}
.marke.morgen{background:var(--g-100);color:var(--g-700)}
.schnell{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.schnell .kachel{min-height:96px;padding:14px}
.schnell .kachel b{font-size:14.5px;font-weight:620;margin-top:auto}
.schnell .kachel .klein{font-size:12px;color:var(--text-3)}
.schnell .kachel.krank .k-ico{background:var(--err-bg);color:var(--err)}
.schnell .k-ico{margin-bottom:12px}
/* Krankmeldung */
.krank-kopf{display:flex;gap:14px;align-items:center;margin:0 0 16px}
.krank-kopf .k-ico{width:46px;height:46px;border-radius:13px;background:var(--err-bg);color:var(--err)}
.krank-kopf .k-ico svg{width:22px;height:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{height:34px;padding:0 14px;border:1px solid var(--linie-stark);border-radius:999px;background:#fff;font-size:13.5px;cursor:pointer;color:var(--text)}
.chips button:hover{border-color:var(--g-400)}
.chips button.aktiv{background:var(--g-100);border-color:var(--g-300);color:var(--g-800);font-weight:600}
.upload{display:flex;gap:12px;align-items:center;padding:14px;margin:4px 0 14px;border:1.5px dashed var(--g-300);border-radius:12px;background:var(--g-50);cursor:pointer}
.upload:hover{border-color:var(--g-500)}
.upload .k-ico{background:#fff}
/* Mehr-Menü */
.menue{padding:4px 0}
.menue h3{font-size:11px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin:12px 16px 4px}
.menue .liste li{padding:0;border-color:var(--n-150)}
.menue .liste a{display:flex;align-items:center;gap:12px;flex:1;min-height:48px;padding:0 16px;color:var(--text);font-size:14.5px}
.menue .liste a:hover{text-decoration:none;background:var(--g-50)}
.menue .liste a::after{content:"";margin-left:auto;width:7px;height:7px;border-top:1.75px solid var(--n-400);border-right:1.75px solid var(--n-400);transform:rotate(45deg);flex:none}
.menue .liste a .badge{margin:0 4px 0 auto}
.menue .liste a .badge + ::after{margin-left:0}
.menue .k-ico{width:30px;height:30px;border-radius:8px}
.menue a.abmelden{color:var(--err-text)}
.menue a.abmelden .k-ico{background:var(--err-bg);color:var(--err)}
.profilkarte{display:flex;gap:14px;align-items:center}
@media (display-mode: standalone){.tipp-installieren{display:none}}
.topbar{display:none}
.punkt-badge{position:absolute;top:3px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 2px #fff}
/* ---------- 21. Mobil ---------------------------------------------- */
.mobnav{display:none}
@media (max-width:860px){
.sidebar{display:none}
.mobnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
background:color-mix(in srgb,var(--n-0) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
border-top:1px solid var(--linie)}
.mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;font-size:10.5px;font-weight:550;color:var(--n-500);border-radius:12px}
.mobnav a .ico{display:grid;place-items:center;width:44px;height:28px;border-radius:999px;transition:background .15s}
.mobnav a .ico svg{width:22px;height:22px}
.mobnav a.aktiv{color:var(--g-800);font-weight:650;background:none}
.mobnav a.aktiv .ico{background:var(--g-100);color:var(--g-700)}
.mobnav a:hover{text-decoration:none}
.zwei,.drei{grid-template-columns:1fr}
.raster{grid-template-columns:1fr}
.leiste{gap:6px;padding:6px}
.leiste select{min-width:0;flex:1}
.nur-desktop{display:none !important}
.banner{font-size:11.5px;padding:6px 10px}.banner .lang{display:none}
dialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92dvh}
dialog[open]{animation:rz-sheet .22s cubic-bezier(.2,.8,.2,1)}
.knoepfe{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.login{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.login-buehne{padding:28px 24px 32px;min-height:260px;gap:28px}
.login-claim h1{font-size:28px}
.login-claim p,.login-fuss{display:none}
.ziffernring{width:300px;right:-160px;top:34%}
.login-form{place-items:start center;padding:28px 20px 40px}
}
@keyframes rz-sheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:861px){.nur-mobil{display:none !important}}
/* ---------- 22. Mobil-App (iPhone, PWA) ---------------------------- */
a,button,.btn,summary,.zelle,.schicht{touch-action:manipulation}
@media (max-width:860px){
:root{--gutter:16px;--nav-h:60px;--top-h:52px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:15px;-webkit-tap-highlight-color:transparent}
.haupt{padding:14px var(--gutter) calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px)}
.seitenkopf{margin-bottom:14px;min-height:0;align-items:center}
.seitenkopf h1:not(.gruss){display:none}
.seitenkopf h1.gruss{font-size:24px;letter-spacing:-.025em}
.seitenkopf:not(:has(h1.gruss)):not(:has(.sk-unter)):not(:has(.sk-aktionen > :not(.nur-desktop))){display:none}
h2{font-size:15px}
.klein{font-size:12.5px}
.karte{border-radius:14px;padding:14px 16px;margin-bottom:12px}
.liste li{padding:11px 0;min-height:48px}
select,input[type=text],input[type=date],input[type=time],input[type=email],input[type=password],input[type=number],input[type=search],textarea{font-size:16px;height:44px;border-radius:10px;padding:0 12px;width:100%}
textarea{height:auto;padding:10px 12px}
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;display:flex;align-items:center}
input::-webkit-date-and-time-value{text-align:left}
.btn{height:44px;padding:0 16px;border-radius:11px;font-size:15px}
.btn.klein{height:36px;padding:0 12px;font-size:13px;border-radius:9px}
.btn.ico{width:44px}.btn.klein.ico{width:36px}
.btn.breit{width:100%}
.zwei.paar{grid-template-columns:1fr 1fr}
.drei.zeit{grid-template-columns:1fr 1fr .8fr}
.kacheln{grid-template-columns:1fr 1fr;gap:10px}
.k-wert{font-size:24px}
.dash{grid-template-columns:1fr;gap:0}
.stempel{flex-direction:column;align-items:stretch;gap:14px}
.stempel .btn{height:50px;font-size:16px;width:100%}
.tk-zeit{font-size:16.5px}
/* Kopfzeile */
.topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;
min-height:calc(var(--top-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gutter) 0;
background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
border-bottom:1px solid rgba(28,27,24,.07)}
.tb-logo{display:flex}
.tb-titel{flex:1;min-width:0;font-size:17px;font-weight:620;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-zurueck{width:36px;height:36px;margin-left:-8px;display:grid;place-items:center;color:var(--g-700)}
.tb-chip{border:1px solid var(--warn-rand);background:var(--warn-bg);color:var(--warn-text);font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;cursor:pointer}
.tb-chip.fehler{border-color:var(--err-rand);background:var(--err-bg);color:var(--err-text)}
#schatten-info{position:fixed;inset:auto;top:calc(var(--top-h) + env(safe-area-inset-top) + 6px);right:var(--gutter);left:auto;margin:0;max-width:290px;
padding:12px 14px;font-size:13px;line-height:1.45;border:1px solid var(--linie);border-radius:12px;background:#fff;color:var(--text);box-shadow:var(--sh-lg)}
.banner.fehler{font-size:13px}
/* untere Leiste */
.mobnav{padding:6px 4px calc(4px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92)}
.mobnav a{gap:3px;padding:2px 0;font-size:10.5px;font-weight:550;color:var(--n-500);position:relative}
.mobnav a .ico{position:relative;width:56px;height:30px;border-radius:15px}
.mobnav a .ico svg{width:22px;height:22px;stroke-width:1.9}
.mobnav a.aktiv .ico svg{stroke-width:2.15}
.mobnav a:active .ico{background:var(--g-50)}
/* Reiter als Chips */
.reiter{gap:8px;border:0;margin:0 calc(-1*var(--gutter)) 14px;padding:2px var(--gutter);scroll-snap-type:x proximity}
.reiter::-webkit-scrollbar{display:none}
.reiter a{scroll-snap-align:start;display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--linie);border-radius:18px;background:#fff;font-size:14px;color:var(--n-600);margin:0}
.reiter a.aktiv{background:var(--g-700);border-color:var(--g-700);color:#fff}
.reiter a:hover{background:#fff}
.reiter a.aktiv:hover{background:var(--g-700)}
/* Werkzeugleiste Dienstplan/Arbeitszeit */
.zeitleiste{display:grid;grid-template-columns:44px 1fr 44px auto;grid-template-areas:"abt abt abt abt" "ans ans ans ans" "zur dat vor heu";gap:8px;padding:10px;border-radius:14px}
.zeitleiste > *{display:none}
.zeitleiste .l-abt{grid-area:abt;display:block;width:100%}
.zeitleiste .l-ansicht{grid-area:ans;display:flex;height:40px}
.zeitleiste .l-ansicht a{flex:1;justify-content:center;font-size:14px}
.zeitleiste .l-zur{grid-area:zur;display:inline-flex}.zeitleiste .l-vor{grid-area:vor;display:inline-flex}
.zeitleiste .l-datum{grid-area:dat;display:block;align-self:center;text-align:center;font-size:14.5px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeitleiste .l-heute{grid-area:heu;display:inline-flex}
.zeitleiste .l-neu{display:inline-flex;position:fixed;right:var(--gutter);bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);z-index:45;height:52px;padding:0 20px;border-radius:26px;box-shadow:0 10px 24px rgba(54,69,26,.35)}
/* Dienstplan Tagesansicht */
table.plan.tagplan{min-width:0;table-layout:fixed}
.tagplan th.name,.tagplan td.name{width:38%;min-width:0;max-width:none}
.tagplan td.name{padding:8px 10px}
.tagplan th span{font-size:10px}
.tagplan th span:not(:nth-child(3n+1)){visibility:hidden}
.tagplan td{height:auto;padding:8px 4px}
.tagplan .schicht{font-size:11px;padding:4px 6px 4px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tagplan .schicht b{display:none}
/* Prioritätsliste als Karten */
table.prio thead{display:none}
table.prio,table.prio tbody{display:block}
table.prio tr{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr;grid-template-areas:"ma ma ma std" "hin hin hin hin" "dat sta end pau" "akt akt akt akt";gap:8px 10px;padding:14px 0;border-bottom:1px solid var(--n-150)}
table.prio tr:last-child{border-bottom:0}
table.prio td{border:0;padding:0;white-space:normal;background:none !important}
.prio .c-ma{grid-area:ma}
.prio .c-std{grid-area:std;font-size:16px;font-weight:650;text-align:right}
.prio .c-hin{grid-area:hin;font-size:12.5px;color:var(--warn-text);background:var(--warn-bg) !important;border-radius:8px;padding:6px 10px}
.prio .c-hin:empty{display:none}
.prio .c-dat{grid-area:dat}.prio .c-sta{grid-area:sta}.prio .c-end{grid-area:end}.prio .c-pau{grid-area:pau}
.prio td[data-label]::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.prio .c-akt{grid-area:akt}
.prio .c-akt form{display:flex !important;justify-content:flex-end;gap:8px}
.prio .c-akt .btn{min-width:44px;height:40px}
.prio td.leer{grid-column:1/-1}
details.karte > summary{min-height:36px;font-size:15px}
/* Dialoge als Sheet */
dialog form.inhalt{padding:0 var(--gutter) 0}
dialog form.inhalt::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--n-300);margin:8px auto 0}
dialog .kopfz{position:sticky;top:0;z-index:2;background:#fff;margin:0 calc(-1*var(--gutter)) 12px;padding:10px var(--gutter)}
dialog .knoepfe{position:sticky;bottom:0;margin:16px calc(-1*var(--gutter)) 0;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));border-radius:0;background:#fff}
dialog .knoepfe .btn{flex:1}
dialog .knoepfe .btn.primaer{flex:2}
body:has(dialog[open]){overflow:hidden}
.menue .liste a{min-height:50px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.stempel.laeuft .st-punkt{animation:none}}
@media print{
.sidebar,.mobnav,.leiste,.banner,.btn,.topbar,.status-pill{display:none !important}
.haupt{padding:0} body{background:#fff}
.tabwrap,.karte{box-shadow:none;border-color:#ccc}
.schicht,.abw{-webkit-print-color-adjust:exact;print-color-adjust:exact;transform:none !important}
}
.ma-kopf{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.ma-kopf h1{margin:0}
.ma-kopf .sk-unter{display:block}
@media (max-width:860px){
.dash{grid-template-columns:minmax(0,1fr)}
.kacheln .kachel{padding:12px 14px}
.kacheln .k-kopf{font-size:12px;align-items:flex-start}
.kacheln .k-kopf .k-ico{width:24px;height:24px;border-radius:7px}
.kacheln .k-wert{margin-top:8px;font-size:24px}
.kacheln .k-sub{font-size:11.5px}
.seitenkopf h1.gruss{font-size:23px}
.sk-unter{font-size:13.5px}
}
.aktionen-zeile{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.wochennav{display:flex;align-items:center;justify-content:space-between}
.wochennav b{flex:1;text-align:center}
.kpi .karte .klein{color:var(--text-2);font-weight:550;font-size:12.5px}
.kpi .wert{margin-top:4px}
.kpi .wert.plus,.saldo-w.plus{color:var(--ok)}
.kpi .wert.minus,.saldo-w.minus{color:var(--err-text)}
.kpi .wert .einheit{font-size:14px;font-weight:500;color:var(--text-3);letter-spacing:0}
.saldo-w{font-weight:650;font-variant-numeric:tabular-nums}
@media (max-width:860px){
.wochennav{display:grid;grid-template-columns:44px 1fr 44px;padding:6px}
.wochennav b{font-size:15px}
.aktionen-zeile .btn{flex:1}
.kpi{grid-template-columns:repeat(3,1fr);gap:8px}
.kpi .karte{padding:12px 10px}
.kpi .wert{font-size:22px}
.kpi:has(> .karte:only-child) .karte{grid-column:1/-1;padding:18px}
.kpi:has(> .karte:only-child) .wert{font-size:34px}
}
@media (max-width:860px){
.seitenkopf:not(:has(h1.gruss)) .sk-unter{display:none}
.seitenkopf:not(:has(h1.gruss)):not(:has(.sk-aktionen > :not(.nur-desktop))){display:none}
}
td.std{display:table-cell;font-size:inherit;font-weight:600;text-align:right}
td.std.plus{color:var(--ok)}td.std.minus{color:var(--err-text)}
table.plan th.tag{min-width:104px}
table.plan td.name,table.plan th.name{min-width:196px;max-width:220px}
.leiste select{min-width:200px;max-width:260px}
.achse{position:relative;height:16px}
.achse span{position:absolute;top:0;transform:translateX(-50%);font-variant-numeric:tabular-nums}
.achse span:first-child{transform:none}
@media (max-width:860px){
.haupt:has(.l-neu){padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 96px)}
.tagplan .achse span:not(:nth-child(3n+1)){display:none}
.tagplan th span{visibility:visible !important}
.tagplan .schicht{font-size:0;height:22px;padding:0;min-width:10px}
.tagplan .schicht::before{display:none}
.tagplan td.name .std{display:block;margin-top:2px;font-size:12.5px}
}
.feld{min-width:0}
.feld input,.feld select,.feld textarea{min-width:0}
/* Abnahme-Korrekturen */
table.plan.tagplan{table-layout:fixed;width:100%;min-width:760px}
.tagplan th.name,.tagplan td.name{width:230px}
.tagplan thead th:last-child.zahl{width:90px}
.tagplan td.zahl{vertical-align:middle}
.karte:has(> .tabwrap){overflow:hidden}
.kal .blk.pending{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 25%,#fff) 0 4px,#fff 4px 8px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,#fff)}
.tagk.abwesend .tk-info{border-left-color:color-mix(in srgb,var(--c) 75%,#7a5c00)}
table.plan th.tag .nr{display:flex;align-items:center;height:28px;margin-top:2px}
table.plan th.heute .nr{display:grid}
.kal th:first-child{padding-left:12px;text-align:left}
td.std.minus,td.std.plus{font-weight:600}
input[type=date]::-webkit-calendar-picker-indicator{flex-shrink:0;margin-left:auto}
@media (min-width:861px){
.zeitleiste .l-abt{max-width:210px;min-width:170px}
}
@media (max-width:860px){
.zeitleiste .l-abt,.leiste select{max-width:none;min-width:0;width:100%}
.reiter{scroll-padding-inline:var(--gutter)}
table.plan.tagplan{min-width:0}
.tagplan th.name,.tagplan td.name{width:38%}
.tagplan .schicht{background:color-mix(in srgb,var(--c,#718840) 35%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#718840) 60%,#fff)}
.achse span:first-child{left:0 !important}
}
td.neg{color:var(--err-text)}
@media (max-width:860px){
.tagplan th.nur-desktop,.tagplan td.nur-desktop{display:table-cell !important;width:0 !important;padding:0 !important;border:0 !important;font-size:0;overflow:hidden}
.tagplan thead th:nth-child(2){width:62%}
.tagplan .achse span:first-child{display:none}
}
/* Performance: Ziele je Saison */
.ziel-kopf{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;padding:14px 16px;border-bottom:1px solid var(--n-200,#e6e4dc)}
.ziel-kopf h2{margin:0;flex:1 1 220px;align-self:center}
.ziel-feld{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.ziel-feld small{font-weight:400;color:var(--n-500,#7a786f)}
.ziel-feld input{width:110px;text-align:right}
.ziel-s span{color:var(--g-700,#475b22)}
.ziel-monate{display:flex;gap:3px}
.ziel-monate label{width:26px;height:30px;display:grid;place-items:center;border-radius:7px;font-size:12px;font-weight:600;
background:var(--n-100,#f1efe8);color:var(--n-500,#7a786f);cursor:pointer;user-select:none}
.ziel-monate label.an{background:var(--g-700,#475b22);color:#fff}
.ziel-monate input{display:none}
@media (max-width:640px){.ziel-feld{flex:1 1 40%}.ziel-feld input{width:100%}.ziel-monate{flex:1 1 100%;min-width:0}.ziel-monate label{flex:1 1 0;width:auto;min-width:0}}
.zusatz-neu{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;padding:16px;border-top:1px solid var(--n-200)}
.zusatz-neu select{height:38px}
.zusatz-hinweis{flex:1 1 100%;min-height:1.2em}
.kz-zusatz{color:var(--g-700)}
@media (max-width:640px){.zusatz-neu .ziel-feld{flex:1 1 100%}.zusatz-neu .ziel-feld input,.zusatz-neu select{width:100%!important}}
/* Plan-Assistent */
.as-start{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.as-start .as-text{flex:1 1 480px}.as-start h2{display:flex;gap:8px;align-items:center;margin:0 0 6px}
.as-knoepfe{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.btn.gross{padding:12px 22px;font-size:15px}
.as-hinweise{list-style:none;margin:0;padding:12px 16px;display:flex;flex-direction:column;gap:6px;background:var(--warn-bg,#fdf5e3);border-bottom:1px solid var(--n-200);font-size:13px}
.as-hinweise li{display:flex;gap:8px;align-items:flex-start}
.as-mb{display:flex;gap:14px;flex-wrap:wrap;padding:16px}.as-mb input{width:70px;text-align:center}
.as-quali{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;padding:16px}
.as-quali label{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--n-200);border-radius:9px;cursor:pointer;font-size:14px;background:var(--n-0)}
.as-quali label.an{border-color:var(--g-500);background:var(--g-50,#f3f7e8)}
.as-quali label.geaendert{box-shadow:inset 3px 0 0 var(--g-700)}
.as-quali small{margin-left:auto;color:var(--n-500);font-size:11px}
.hinweis.warn{display:flex;gap:8px;align-items:center;color:var(--warn,#9a6700)}
@media (max-width:640px){.as-knoepfe{flex:1 1 100%}.as-mb .ziel-feld{flex:1 1 28%}.as-mb input{width:100%}}
.pruef{display:flex;gap:5px;align-items:flex-start;font-size:12px;margin-bottom:3px}
.pruef.sperre{color:var(--err-text,#9b1c1c);font-weight:600}.pruef.besetzung{color:var(--warn-text)}.pruef.ok{color:var(--ok-text,#3b5d1a)}
.pr-regeln{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px 20px;padding:16px}
.pr-regeln .ziel-feld span{font-weight:500;font-size:13px;line-height:1.35}.pr-regeln input{width:120px}
.karte[id]{scroll-margin-top:80px}
.pause-live{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.pause-live .pl{padding:8px 12px;border-radius:10px;background:var(--n-0);border:1px solid var(--n-200);font-size:13px}
.pause-live .pl.zu-viele{background:var(--err-bg);border-color:var(--err-rand);color:var(--err-text)}
.schicht .s-pause{display:block;font-size:10.5px;opacity:.75}
.st-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.tausch-auf{margin-top:6px}.tausch-auf summary{cursor:pointer;font-size:12.5px;color:var(--g-700);font-weight:600}
.tausch-auf form{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.tausch-auf select,.tausch-auf input{font-size:13px;max-width:100%}
.verf-form{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}.verf-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.verf-form small{font-weight:400;color:var(--n-500)}.verf-form .breit{flex:1 1 260px}.verf-form .breit input{width:100%}
@media (max-width:640px){.verf-form label{flex:1 1 45%}.verf-form input,.verf-form select{width:100%}}
.schicht[draggable=true]{cursor:grab}.schicht.zieht{opacity:.4}
td.zelle.ziel{outline:2px dashed var(--g-500);outline-offset:-3px;background:var(--g-50)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:9999;padding:12px 18px;border-radius:12px;font-size:14px;max-width:90vw;
box-shadow:0 8px 30px rgba(0,0,0,.18);background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-rand)}
.toast.warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-rand)}.toast.fehler{background:var(--err-bg);color:var(--err-text);border-color:var(--err-rand)}
.oe-wahl{display:flex;flex-wrap:wrap;gap:4px}
.oe-wahl label{display:inline-flex;align-items:center;gap:3px;padding:4px 7px;border:1px solid var(--n-200);border-radius:7px;font-size:12px;cursor:pointer}
.oe-wahl label:has(input:checked){background:var(--g-700,#475b22);color:#fff;border-color:transparent}
.oe-wahl input{margin:0;width:auto}
.as-flex{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;font-size:14px;line-height:1.5;cursor:pointer}
.as-flex input{margin-top:4px;width:18px;height:18px;flex:none}
.mu-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:10px 0}
.mu-vorschau{color:var(--g-700,#475b22);font-weight:600;min-height:18px}
.mu-vorschau.mu-fehler{color:#b42318}
.pill.warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-rand)}
.pill.info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-rand)}
tr.gedimmt td{color:var(--n-500,#8a8a8a)}
.login-karte.impressum h3{font-size:13px;font-weight:620;margin:18px 0 4px;color:var(--text-2)}
.login-karte.impressum p{font-size:13.5px;line-height:1.5;margin:0 0 6px}
.impressum-link{margin-top:6px}