/* HERO App — Neues Design „kompakt + modern" (Beta, Michael 18.10.2026)
   Variante C des Design-Konzepts (Dichte, Zeilenhöhen, 4 Kennzahlen je Reihe, schmale Kopfzeile) mit den modernen Elementen aus B
   (runde farbige Symbole, gefüllte Status-Chips, Pillen-Knöpfe, schwebende Navy-Leiste mit Gold-Aktiv, Navy-Hero-Karte, weiche Schatten,
   große Radien). Seit 22.10.2026 das einzige Design, seit 23.10.2026 auf jeder Seite der App (app/lib/design2.php); greift unter html.d2,
   Grundgerüst darunter: base.css (Rest der früheren style.css). Dunkelmodus: html.d2.dk (System/Hell/Dunkel, Skript im <head>).
   Aufbau: 1 Stilsystem · 2 Grundlagen · 3 Kopf & Navigation · 4 Bausteine · 5 Bereiche (Start/Stempeluhr, Reinigungen, Übersicht,
   Aufgaben, Posteingang, Reinigungen live, Preise, Einstellungen) · 6 Dunkelmodus · 7 Bewegung reduzieren */

/* ================================================================ 1 Stilsystem */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;
 src:url(fonts/pjs-latin.woff2) format("woff2-variations"),url(fonts/pjs-latin.woff2) format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;
 src:url(fonts/pjs-latin-ext.woff2) format("woff2-variations"),url(fonts/pjs-latin-ext.woff2) format("woff2");
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

html.d2{
 /* Flächen & Schrift */
 --bg:#F3F5F8;--surface:#FFFFFF;--surface-2:#EEF1F6;--surface-3:#E6EAF1;--line:#E1E5EC;--line-2:#CDD3DE;
 --ink:#14213A;--muted:#566074;--soft:#5E697D;
 /* Marke */
 --navy-bg:#132A4E;--navy-bg-2:#1F3F6E;--on-navy:#FFFFFF;--navy-soft:#E6EBF3;--navy-text:#132A4E;
 --primary:#132A4E;--on-primary:#FFFFFF;--primary-2:#1F3F6E;
 --gold:#E9B23C;--gold-2:#D69E25;--on-gold:#1B1406;--gold-soft:#FBF1DA;--gold-ink:#7A5300;
 /* fünf Statusrollen — Rot (--danger) nur für echte Fehler/Notfälle */
 --coral:#B24B2B;--coral-soft:#FCEAE3;--coral-line:#F2C9BA;--coral-ink:#8F3A1F;
 --warn:#995B00;--warn-soft:#FFF2D6;--warn-line:#F0D9A5;
 --amp-yellow:#D9A300;   /* Ampel „gelb“ (Leiste „Heute“, 25.10.2026) — eigener Status-Ton, nicht Gold */
 --info:#2A5C99;--info-soft:#E7EFFA;--info-line:#C9DAF0;
 --ok:#2B7349;--ok-soft:#E5F2EA;--ok-line:#BFDCCB;
 --neutral:#566074;--neutral-soft:#ECEFF4;
 --danger:#B42318;--danger-soft:#FDECEA;
 --on-solid:#FFFFFF;
 /* Form */
 --r-sm:10px;--r:14px;--r-lg:20px;--r-pill:999px;
 --h-btn:44px;--h-btn-sm:36px;--h-btn-lg:52px;
 --gap:12px;--pad:14px;
 --sh-1:0 0 0 0 transparent;   /* finales Design (25.10.2026): ruhende Karten ohne Schatten — Trennung über die Tonstufe; Schatten nur Menüs/Dialoge/schwebende Leiste (--sh-pop) */
 --sh-2:0 2px 4px rgba(19,42,78,.05),0 10px 24px rgba(19,42,78,.09);
 --sh-pop:0 18px 40px rgba(10,20,40,.22);
 --focus:0 0 0 3px var(--surface),0 0 0 5px var(--gold);
 --f-ui:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 /* Variablen der früheren style.css auf das System gelegt (alle Seiten und Module nutzen sie) */
 --navy:var(--navy-text);--navy-2:var(--navy-bg-2);--navy-ink:var(--ink);--dark:var(--navy-bg);
 --card:var(--surface);--hover:var(--surface-2);--text:var(--ink);
 --green:var(--ok);--green-soft:var(--ok-soft);
 --red:var(--danger);--red-soft:var(--danger-soft);--red-line:#F2C2BD;--red-ink:#8A1C12;
 --coral-strong:var(--coral);--alert:var(--coral);
 --amber:var(--warn);--amber-soft:var(--warn-soft);--amber-line:var(--warn-line);
 --blue:var(--info);--blue-soft:var(--info-soft);--orange:var(--coral);
 --radius:var(--r-lg);--radius-sm:12px;--shadow:var(--sh-1);--shadow-lg:var(--sh-pop);
 --ring:0 0 0 3px rgba(233,178,60,.65);
 --nav-h:62px;--bar-h:70px;--top-h:52px;   /* --bar-h = Platz, den die schwebende Leiste unten belegt (Module rechnen damit) */
 color-scheme:light;
}
html.d2.dk{
 --bg:#0B1220;--surface:#131C2E;--surface-2:#1A2539;--surface-3:#223049;--line:#24314A;--line-2:#33425E;
 --ink:#E6EBF3;--muted:#A6B0C2;--soft:#8590A5;
 --navy-bg:#0F1D35;--navy-bg-2:#20375C;--navy-soft:#1D2B45;--navy-text:#B9CBEA;
 --primary:#3B69B0;--primary-2:#4A78C0;
 --gold:#F0C058;--gold-2:#F3CD78;--gold-soft:#372C14;--gold-ink:#F3CD78;
 --coral:#F28E6C;--coral-soft:#3A1E16;--coral-line:#6B3424;--coral-ink:#F6A88C;
 --warn:#F0B44C;--warn-soft:#33270F;--warn-line:#5E4A1E;--amp-yellow:#F2C84B;
 --info:#86B3EA;--info-soft:#14253D;--info-line:#25406A;
 --ok:#63C38F;--ok-soft:#132C1E;--ok-line:#24503A;
 --neutral:#A6B0C2;--neutral-soft:#1D283B;
 --danger:#FF8A80;--danger-soft:#3A1614;--red-line:#6A2A25;--red-ink:#FFB4AB;
 --on-solid:#0B1220;
 --sh-1:0 0 0 0 transparent;
 --sh-2:0 2px 4px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.3);
 --sh-pop:0 18px 40px rgba(0,0,0,.55);
 color-scheme:dark;
}

/* ================================================================ 2 Grundlagen */
.d2 body{font-family:var(--f-ui);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;font-feature-settings:"tnum" 1,"lnum" 1}
:where(.d2) a{color:var(--info)}
/* Bedienelemente erben die Schrift des Designs (Systemknöpfe sonst in Arial) */
:where(.d2) :is(button,input,select,textarea){font-family:inherit}
.d2 .muted{color:var(--muted)}
.d2 .pos{color:var(--ok)}.d2 .neg{color:var(--coral-ink)}
:where(.d2) h1{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:.1rem 0 .75rem}
:where(.d2) h1 small,:where(.d2) h1 .muted{font-size:.8rem;font-weight:500}
:where(.d2) h2{font-size:1rem;font-weight:750;letter-spacing:-.01em;color:var(--ink);margin:0 0 .6rem}
:where(.d2) h3{font-size:.92rem;font-weight:700;color:var(--ink);margin:.75rem 0 .4rem}
.d2 main{padding:.85rem 1rem 1.5rem}
.d2 :focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}
.d2 .btn:focus-visible,.d2 input:focus-visible,.d2 select:focus-visible,.d2 textarea:focus-visible{box-shadow:var(--focus)}
:where(.d2) ::selection{background:var(--gold-soft)}
:where(.d2) table,.d2 .num,.d2 .time,.d2 .cnt,.d2 .bndot{font-variant-numeric:tabular-nums}
/* Symbole (navIcon und design2.js): erben die Textfarbe */
.d2 .d2ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:-.18em;margin-right:.4em;line-height:0}
.d2 .d2ic svg{width:1.15em;height:1.15em}
.d2 h1 .d2ic,.d2 h2 .d2ic{width:1.9em;height:1.9em;border-radius:50%;background:var(--navy-soft);color:var(--navy-text);vertical-align:middle;margin-right:.5em}
.d2 h1 .d2ic svg,.d2 h2 .d2ic svg{width:1.05em;height:1.05em}
.d2 h3 .d2ic{color:var(--muted)}

/* ================================================================ 3 Kopf & Navigation */
/* kein backdrop-filter am Kopf: Leiste unten und „Mehr"-Blatt stecken im <header> — ein Filter machte ihn zum Bezugsrahmen für position:fixed */
.d2 header{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.d2 .topbar{min-height:var(--top-h);padding:.3rem 1rem;gap:.6rem}
.d2 header .logo,.d2 .logobtn{color:var(--ink);font-size:.92rem;letter-spacing:.06em;gap:.5rem;min-height:44px}
.d2 header .logo span,.d2 .logobtn span{color:var(--gold-ink)}
.d2 .logo-img{width:32px;height:32px;border-radius:10px;background:#fff;padding:3px;box-shadow:inset 0 0 0 1px var(--line)}
.d2 .desknav a{color:var(--muted);font-size:.88rem;padding:.42rem .7rem;border-radius:var(--r-pill);font-weight:600}
.d2 .desknav a:hover{color:var(--ink);background:var(--surface-2)}
.d2 .desknav a.active{color:var(--on-navy);background:var(--navy-bg)}
.d2.dk .desknav a.active{background:var(--primary)}
.d2 .cnt{background:var(--primary);color:var(--on-primary);font-weight:800;min-width:1.25rem;height:1.25rem}   /* Zähler Navy — Rot nur für offene Probleme (unten, finales Design 25.10.2026) */
.d2 .cnt.urg,.d2 .bndot.urg{color:var(--on-solid)}
.d2 .desknav a.active .cnt{background:var(--gold);color:var(--on-gold)}
/* Hilfe „?" und Initialen nebeneinander */
.d2 .usermenu{display:flex;align-items:center;gap:.45rem;flex:0 0 auto}
.d2 .usermenu .helpbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line-2);
 background:var(--surface);color:var(--ink);font-weight:700;font-size:1rem;text-decoration:none;vertical-align:middle}
.d2 .usermenu .helpbtn:hover{background:var(--surface-2)}
.d2 .userbtn{width:38px;height:38px;border:0;background:var(--gold);color:var(--on-gold);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line-2)}
.d2 .navbadge{background:var(--coral);color:var(--on-solid);border-color:var(--surface)}
.d2 .userpanel{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop);padding:.4rem;width:280px}
.d2 .userhead{border-color:var(--line)}
.d2 .userpanel a{color:var(--ink);min-height:44px;border-radius:12px;font-size:.93rem}
.d2 .userpanel a:hover,.d2 .userpanel a.active{background:var(--surface-2)}
.d2 .userpanel .ico{color:var(--muted)}
.d2 .userpanel a.logout,.d2 .userpanel a.logout .ico{color:var(--coral-ink)}
/* Darstellung (System/Hell/Dunkel) im Konto-Menü */
.d2menu{margin:0}
.d2 .d2menu-hd{display:flex;align-items:center;gap:.65rem;padding:.45rem .7rem 0;font-size:.8rem;font-weight:650;color:var(--muted)}
.d2 .d2menu-hd .ico{width:19px;height:19px;color:var(--muted)}
.d2seg{display:flex;gap:2px;margin:.15rem .5rem .45rem;padding:3px;border-radius:12px;background:var(--surface-2)}
.d2seg button{flex:1;min-height:36px;border:0;border-radius:9px;background:none;font:inherit;font-size:.82rem;font-weight:650;color:var(--muted);cursor:pointer}
.d2seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.d2seg.big{margin:0;max-width:420px}
.d2seg.big button{min-height:44px;font-size:.92rem}
.d2 .langform select{min-height:40px}

/* Untere Leiste: schwebend, Navy, aktiv in Gold */
@media(max-width:1099.98px){
 .d2 .bottomnav{left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);border-radius:22px;border:0;padding:0 4px;
  background:var(--navy-bg);box-shadow:0 10px 26px rgba(10,20,40,.32);-webkit-backdrop-filter:none;backdrop-filter:none}
 .d2.dk .bottomnav{background:#16243F;box-shadow:0 10px 26px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06)}
 .d2 .bottomnav a,.d2 .bottomnav button{height:var(--nav-h);color:rgba(255,255,255,.72);padding:.35rem .1rem .2rem;gap:.15rem}
 .d2 .bottomnav .active,.d2 .bottomnav button[aria-expanded=true]{color:var(--gold)}
 .d2 .bottomnav .active::before{display:none}
 .d2 .bottomnav .active .bnico::after{content:'';position:absolute;left:50%;bottom:-6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold)}
 .d2 .bnico .ico{width:22px;height:22px}
 .d2 .bnlbl{font-size:.66rem;font-weight:650;letter-spacing:.01em}
 .d2 .bndot{background:var(--coral);color:var(--on-solid);border-color:var(--navy-bg);font-weight:800}
 .d2.dk .bndot{border-color:#16243F}
 .d2 body:has(.bottomnav){padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 14px)}
 .d2 .menu-panel{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 10px);left:10px;right:10px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-pop);padding:.4rem}
 .d2 .menu-panel a{color:var(--ink);min-height:48px;border-radius:12px;padding:.6rem .75rem;font-size:.95rem}
 .d2 .menu-panel a .ico{width:20px;height:20px;color:var(--muted)}
 .d2 .menu-panel a:hover{background:var(--surface-2)}
 .d2 .menu-panel a.active{background:var(--navy-soft);color:var(--navy-text);font-weight:700}
 .d2 .menu-panel a.active .ico{color:var(--navy-text)}
 .d2 .sheet-backdrop{background:rgba(10,18,32,.42)}
 .d2 .fab-back{right:14px;width:48px;height:48px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--sh-2);font-size:1.25rem}
 .d2 body:has(.bottomnav) .fab-back{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 12px)}
}
/* Reiter einer Gruppe: Pillen, aktiv Navy */
.d2 .tabs{gap:.35rem;margin:0 0 .8rem;padding:.1rem 0 .15rem}
.d2 .tabs a{min-height:36px;display:inline-flex;align-items:center;padding:.35rem .9rem;font-size:.86rem;font-weight:600;color:var(--muted);
 background:var(--surface);border:0;box-shadow:inset 0 0 0 1px var(--line)}
.d2 .tabs a:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.d2 .tabs a.active{background:var(--navy-bg);color:var(--on-navy);box-shadow:none}
.d2.dk .tabs a.active{background:var(--primary)}

/* ================================================================ 4 Bausteine */
/* Karten: große Radien, weiche Schatten, kein Rand */
.d2 .card{background:var(--surface);border:0;border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:.9rem 1rem;margin-bottom:.75rem}
.d2 .card .card{box-shadow:none;border:0;background:var(--surface-2)}   /* Karte in der Karte: Tonstufe statt Rahmen (finales Design, 25.10.2026) */
.d2 .card>h2:first-child,.d2 .card>.hd:first-child{margin-top:0}
.d2 .hd{margin:0 0 .55rem}
.d2 .hd:has(>h1){margin:.1rem 0 .7rem}
.d2 .ihint summary{color:var(--soft)}
.d2 .ihint summary:hover,.d2 .ihint[open] summary{background:var(--info-soft);color:var(--info)}
.d2 .ihint-body{background:var(--info-soft);border:0;border-radius:var(--r);color:var(--ink);padding:.6rem 2.6rem .6rem .85rem}
/* Hinweise: ruhige Zeilen statt Kästen mit dickem Rand */
.d2 .flash,.d2 .warn,.d2 .err{border:0;border-radius:var(--r);padding:.65rem .9rem;margin-bottom:.75rem;font-size:.93rem}
.d2 .flash{background:var(--ok-soft);color:var(--ok)}
.d2 .warn{background:var(--warn-soft);color:var(--ink);box-shadow:inset 3px 0 0 var(--warn)}
.d2 .err{background:var(--danger-soft);color:var(--red-ink);box-shadow:inset 3px 0 0 var(--danger)}

/* Knöpfe: Pillen, drei Höhen, klare Rollen */
.d2 .btn{min-height:var(--h-btn);border-radius:var(--r-pill);padding:.5rem 1.1rem;font-weight:700;font-size:.92rem;letter-spacing:.005em;
 background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.d2 .btn:hover{border-color:var(--ink);background:var(--surface)}
.d2 .btn:active{transform:scale(.97)}
.d2 .btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.d2 .btn.primary:hover{background:var(--primary-2);border-color:var(--primary-2)}
.d2 .btn.gold{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}   /* Gold nur Fokus/aktiv — Gold-Knöpfe sind Hauptknöpfe in Navy (finales Design, 26.10.2026) */
.d2 .btn.gold:hover{background:var(--primary-2);border-color:var(--primary-2)}
.d2 .btn.green{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}   /* Grün nur für „fertig" — Hauptknöpfe Navy (finales Design, 25.10.2026) */
.d2 .btn.green:hover{background:var(--primary-2);border-color:var(--primary-2)}
/* „rot" ist kein Alarm mehr: Umriss in Koralle (Rot nur für echte Notfälle) */
.d2 .btn.red{background:var(--surface);color:var(--coral-ink);border-color:var(--coral-line)}
.d2 .btn.red:hover{background:var(--coral-soft);border-color:var(--coral)}
.d2 .btn.big{min-height:var(--h-btn-lg);font-size:1.05rem;border-radius:var(--r-pill);box-shadow:none;margin:.3rem 0}
.d2 .btn.big.green,.d2 .btn.big.gold,.d2 .btn.big.red{box-shadow:none}
.d2 .btn.sm{min-height:var(--h-btn-sm);padding:.25rem .8rem;font-size:.82rem}
.d2 .btn.linkbtn{background:none;border:0;min-height:36px;color:var(--muted)}
.d2 td .btn,.d2 .todorow .btn,.d2 .fixrow .btn,.d2 .editrow .btn,.d2 .taskrow .btn{min-height:36px}
.d2 .btnrow{gap:.45rem}
/* Felder */
:where(.d2) input,:where(.d2) select,:where(.d2) textarea{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:12px;min-height:44px;font-size:.95rem}
:where(.d2) input:focus,:where(.d2) select:focus,:where(.d2) textarea:focus{border-color:var(--info);box-shadow:0 0 0 3px var(--info-soft)}
:where(.d2) input[type=checkbox],:where(.d2) input[type=radio]{accent-color:var(--primary);min-height:0;width:1.15rem;height:1.15rem}
:where(.d2) label{color:var(--muted);font-size:.78rem;font-weight:650}
.d2 .chk{color:var(--ink);font-size:.92rem;min-height:40px}
:where(.d2) details summary{color:var(--muted)}
/* Chips: gefüllt, fünf Rollen */
.d2 .badge{border-radius:var(--r-pill);padding:.14rem .55rem;font-size:.72rem;font-weight:700;box-shadow:none;background:var(--neutral-soft);color:var(--neutral)}
/* Status-Abzeichen wie .d2-st (finales Design, 26.10.2026): heller Grund + Wort (ohne eigenen Punkt: viele Abzeichen bringen schon „●“/„✓“ im Text mit) — wartet grau (pending), läuft blau (open), erledigt/abgeschlossen grün, abgelehnt rot */
.d2 :is(.badge.pending,.badge.approved,.badge.open,.badge.rejected,.badge.locked){display:inline-flex;align-items:center;gap:5px;box-shadow:none}
.d2 .badge.pending{background:var(--surface-3);color:var(--muted)}
.d2 .badge.approved{background:var(--s-done-soft);color:var(--s-done)}
.d2 .badge.open{background:var(--s-run-soft);color:var(--s-run)}   /* „läuft" (Reinigung), Monat noch offen = läuft */
.d2 .badge.rejected{background:var(--s-prob-soft);color:var(--s-prob)}
.d2 .badge.locked{background:var(--s-done-soft);color:var(--s-done)}
.d2 .statuschip{border:0;background:var(--neutral-soft);color:var(--neutral);padding:.32rem .85rem;font-size:.86rem}
.d2 .statuschip.on{background:var(--ok);color:var(--on-solid)}
.d2 .statuschip.pause{background:var(--gold);color:var(--on-gold)}
/* Tabellen */
:where(.d2) table{font-size:.9rem}
:where(.d2) th{color:var(--muted);font-size:.68rem;letter-spacing:.06em}
:where(.d2) th,:where(.d2) td{border-color:var(--line);padding:.5rem .45rem}
:where(.d2) tr:first-child th{border-bottom-color:var(--line-2)}
@media(hover:hover){:where(.d2) tr:hover>td{background:var(--surface-2)}}
.d2 tr.holiday td{background:var(--gold-soft)}
.d2 .weekrow td{background:var(--surface-2);color:var(--navy-text);border-color:var(--line)}
.d2 .stat .v{color:var(--ink)}
/* Zähler-Kacheln: vier in einer Reihe, die erste gefüllt (Navy) */
.d2 .d2kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 .85rem}
.d2 .d2k{display:flex;flex-direction:column;gap:2px;min-width:0;min-height:64px;padding:.55rem .65rem;border-radius:16px;background:var(--surface);
 box-shadow:var(--sh-1);color:var(--ink);text-decoration:none}
.d2 .d2k:first-child{background:var(--navy-bg);color:var(--on-navy)}
.d2.dk .d2k:first-child{background:#1C3560}
.d2 .d2kl{display:flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;color:var(--muted);min-width:0}
.d2 .d2kl span{overflow:hidden;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.d2 .d2k:first-child .d2kl{color:rgba(255,255,255,.8)}
.d2 .d2kl .ico{width:14px;height:14px}
.d2 .d2kv{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.d2 .d2kbar{display:block;height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden;margin-top:auto}
.d2 .d2kbar i{display:block;height:100%;background:var(--ok);border-radius:2px}
.d2 .d2k:hover{box-shadow:var(--sh-2)}
@media(max-width:420px){.d2 .d2kpis{gap:6px}.d2 .d2k{padding:.45rem .5rem;border-radius:14px}.d2 .d2kv{font-size:1.08rem}.d2 .d2kl{font-size:.62rem}.d2 .d2kl .ico{display:none}}
/* bestehende Kennzahl-Gruppen der Module im selben Stil */
.d2 .cj-dk,.d2 .rcv-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.d2 .cj-dkpi,.d2 .rcv-kpi{border:0!important;border-radius:14px!important;background:var(--surface-2)!important;color:var(--ink)!important;padding:.5rem .6rem!important;min-width:0}
.d2 .cj-dkpi:first-child,.d2 .rcv-kpi:first-child{background:var(--navy-bg)!important;color:var(--on-navy)!important}
.d2 .cj-dkpi:first-child *,.d2 .rcv-kpi:first-child *{color:inherit!important}
.d2.dk .cj-dkpi:first-child,.d2.dk .rcv-kpi:first-child{background:#1C3560!important}
.d2 .cj-dkpi b,.d2 .rcv-kpi b{font-size:1.15rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
@media(max-width:480px){.d2 .cj-dkpi b,.d2 .rcv-kpi b{font-size:.98rem}.d2 .cj-dk,.d2 .rcv-kpis{gap:6px!important}.d2 .cj-dkpi,.d2 .rcv-kpi{padding:.45rem .5rem!important}}
.d2 .cj-dkpi small,.d2 .rcv-kpi small{font-size:.68rem;opacity:.85;display:block;line-height:1.25}
.d2 .cj-dkpi.warn,.d2 .rcv-kpi.warn,.d2 .rcv-kpi.over{box-shadow:inset 0 -3px 0 var(--warn)!important}
@media(max-width:700px){.d2 .rcv-dash .rcv-kpi{display:flex;flex-direction:column;align-items:flex-start}}

/* Listen-Zeilen (Übersicht „Das liegt bei dir", Aufgaben, Nachrichten): Symbol im Kreis · Text · Pfeil */
.d2 .todorow{position:relative;display:flex;align-items:center;gap:.6rem;min-height:52px;margin:0;padding:.45rem .5rem .45rem .2rem;border:0;border-radius:0;
 border-top:1px solid var(--line);background:transparent;color:var(--ink)}
.d2 .todos h2+.todorow,.d2 .todos .todorow:first-of-type{border-top:0}
.d2 .todorow .ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;
 background:var(--neutral-soft);color:var(--neutral);font-size:1rem}
.d2 .todorow.urgent .ico{background:var(--coral);color:var(--on-solid)}
.d2 .todorow.warn .ico{background:var(--warn);color:var(--on-solid)}
.d2 .todorow.info .ico{background:var(--info);color:var(--on-solid)}
.d2 .todorow .ico svg{width:17px;height:17px}
.d2 .todorow .tinfo{flex:1 1 0;min-width:0;font-size:.9rem;line-height:1.35}
.d2 .todorow.warn,.d2 .todorow.urgent,.d2 .todorow.info{background:transparent;box-shadow:none;color:var(--ink)}
/* Zeile mit Zusatz-Knopf (Entwurf an Gast …): Text, Pfeil, ⏰ in Zeile 1, der Knopf darunter eingerückt */
.d2 .todorow:has(>form){flex-wrap:wrap;row-gap:.3rem}
.d2 .todorow:has(>form) .tinfo{flex:1 1 0}
.d2 .todorow>a.btn{order:3;margin-left:0}
.d2 .todorow>.tsnz{order:4}
.d2 .todorow>form{order:5;flex:1 1 100%;padding-left:44px}
.d2 .todorow>form .btn{min-height:36px}
/* „Öffnen" deckt die ganze Zeile ab (Zeile antippen = öffnen); ⏰ und Zusatz-Knopf liegen darüber */
.d2 .todorow>a.btn{min-width:36px;min-height:36px;width:36px;padding:0;border:0;background:transparent;color:var(--soft);font-size:0;gap:0;position:static}
.d2 .todorow>a.btn::after{content:'';width:9px;height:9px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);margin-left:-4px;font-size:0}
.d2 .todorow>a.btn::before{content:'';position:absolute;inset:0;z-index:1}
.d2 .todorow>a.btn:hover{color:var(--ink)}
.d2 .todorow:hover{background:var(--surface-2)}
.d2 .todorow>form,.d2 .todorow .tsnz{position:relative;z-index:2}
.d2 .todorow .tsnz>summary{min-height:36px;min-width:36px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center}
.d2 .todorow .tsnz>summary svg{width:17px;height:17px}
.d2 .tsnz[open]>summary{background:var(--navy-bg);color:var(--on-navy);border-color:var(--navy-bg)}
.d2 .tsnzmenu{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-pop)}
.d2 .tsnzrow{border-color:var(--line-2);background:var(--surface-2)}
.d2 .tgroup{color:var(--muted);font-size:.68rem;letter-spacing:.08em}
.d2 .infocard,.d2 .inforow{background:var(--info-soft);border:0;color:var(--ink);border-radius:var(--r)}
/* Wischen (design2.js): Aktionen hinter der Zeile */
.d2 .d2sw{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.d2 .d2sw:first-of-type{border-top:0}
.d2 .d2sw>.todorow{border-top:0;background:var(--surface);transition:transform .22s cubic-bezier(.2,.8,.2,1);touch-action:pan-y}
.d2 .d2sw>.todorow.drag{transition:none}
.d2 .d2sw-acts{position:absolute;inset:0 0 0 auto;display:flex;width:148px}
.d2 .d2sw-acts button{flex:1;border:0;font:inherit;font-size:.72rem;font-weight:800;color:var(--on-solid);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.d2 .d2sw-acts button svg{width:18px;height:18px}
.d2 .d2sw-acts .a1{background:var(--warn)}
.d2 .d2sw-acts .a2{background:var(--neutral)}
.d2 .d2sw-hint{font-size:.74rem;color:var(--soft);margin:.4rem 0 0}

/* Touch-Ziele am Handy mindestens 44 px (die Pillen bleiben optisch schlank, die Tippfläche wächst) */
@media(pointer:coarse){
 .d2 .tabs a,.d2 .btn,.d2 .btn.sm,.d2 .jumplist a,.d2 .jumpsel>summary,.d2 .d2seg button,.d2 .cj-chip,.d2 .catchip,.d2 .dg-more{min-height:44px}
 .d2 .todorow .tsnz>summary,.d2 .gm-ux-acts .btn.sm,.d2 .gm-ux-acts .gm-uxmenu>summary.btn.sm{min-width:44px;min-height:44px;width:44px}
 .d2 .dgrid .todos .todorow .tsnz>summary{min-width:44px;min-height:44px;width:44px}
 /* der Pfeil ist nur ein Zeichen — getippt wird die ganze Zeile (a::before deckt sie ab) */
 .d2 .todorow>a.btn,.d2 .dgrid .todos .todorow>a.btn{min-width:22px;width:22px;min-height:44px}
}
/* Toast: kleine Meldung, eine Zeile, oben (Pilot 19.10.2026: lange Texte wurden mit der Pillen-Rundung zum Oval über dem ganzen Bildschirm) */
.d2 .toast,.d2 body:has(.bottomnav) .toast,.d2 body:has(.cjk) .toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);bottom:auto;left:50%;right:auto;
 width:auto;max-width:min(92vw,26rem);height:auto;min-height:0;max-height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:.4rem;
 background:var(--ink);color:var(--bg);border-radius:12px;padding:.4rem .45rem .4rem .8rem;font-weight:600;font-size:.84rem;line-height:1.25;
 white-space:nowrap;overflow:hidden;box-shadow:var(--sh-pop,0 6px 18px -6px rgba(0,0,0,.4));transform:translate(-50%,-8px)}
.d2 .toast.show,.d2 body:has(.bottomnav) .toast.show,.d2 body:has(.cjk) .toast.show{transform:translate(-50%,0)}
.d2 .toast>span{text-overflow:ellipsis;overflow:hidden}
.d2 .toast.cj-t1{display:block;text-overflow:ellipsis}
.d2 .toast .toastx{width:24px;height:24px;font-size:1rem}
@media(min-width:1100px){.d2 .toast,.d2 body:has(.bottomnav) .toast{left:auto;right:1.25rem;transform:translateY(-8px)}.d2 .toast.show,.d2 body:has(.bottomnav) .toast.show{transform:none}}
.d2 .toast.neg{background:var(--danger);color:#fff}
.d2.dk .toast.neg{color:#1B0705}
/* Fehler wirklich rot (Referenzfotos 26.10.2026): am Handy (Leiste unten) gewann „.d2 body:has(.bottomnav) .toast" (dunkel wie jede Bestätigung),
   Design A färbte nur den Text rot (.neg) — rote Schrift auf Navy sah aus wie „gespeichert". Gleich spezifisch wie die Grundregel + .neg. */
.d2 body:has(.bottomnav) .toast.neg,.d2 body:has(.cjk) .toast.neg,html.d2[data-da] body .toast.neg{background:var(--danger);color:#fff}
.d2.dk body:has(.bottomnav) .toast.neg,.d2.dk body:has(.cjk) .toast.neg,html.d2.dk[data-da] body .toast.neg{color:#1B0705}
.d2 .toast .toastx{background:rgba(127,127,127,.25);color:inherit}

/* Fortschrittsring (design2.js) */
.d2 .d2ring{position:relative;width:52px;height:52px;flex:0 0 auto}
.d2 .d2ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.d2 .d2ring circle{fill:none;stroke-width:6}
.d2 .d2ring .bgc{stroke:var(--surface-2)}
.d2 .d2ring .fg{stroke:var(--ok);stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1)}
.d2 .d2ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:.72rem;font-weight:800;letter-spacing:-.02em;color:inherit}

/* ================================================================ 5 Bereiche */

/* ---------- Team-Start: Stempeluhr oben (Ausstempeln nicht rot, Pause Gold) ---------- */
.d2[data-page=clock] main,.d2[data-page=home] main{display:flex;flex-direction:column}
.d2[data-page=clock] main>*,.d2[data-page=home] main>*{order:2}
.d2[data-page=clock] main>.tabs,.d2[data-page=home] main>.tabs{order:0}
.d2[data-page=clock] main>.card:has(.clockstate),.d2[data-page=home] main>.card:has(.clockstate){order:1}
.d2 .card:has(>.clockstate){padding:.9rem 1rem 1rem}
.d2 .clockstate{display:grid;grid-template-columns:1fr auto;grid-template-areas:"chip chip" "lbl lbl" "time brk";align-items:end;text-align:left;margin:0 0 .4rem;gap:.15rem .6rem}
.d2 .clockstate .statuschip{grid-area:chip;justify-self:start}
.d2 .clockstate>.muted:nth-of-type(1){grid-area:lbl;margin-top:.55rem!important;font-size:.78rem}
.d2 .clockstate .time{grid-area:time;font-size:2.6rem;margin:0;color:var(--ink);letter-spacing:-.03em;line-height:1}
.d2 .clockstate>.muted:last-child{grid-area:brk;font-size:.8rem;padding-bottom:.35rem}
.d2 .catlabel{text-align:left;margin:.7rem 0 .2rem;font-size:.66rem;color:var(--muted);letter-spacing:.09em}
.d2 .catchips{justify-content:flex-start;gap:.35rem;margin:.35rem 0 .5rem}
.d2 .catchip{min-height:44px;padding:.35rem .85rem;font-size:.86rem;background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.d2 .catchip.active{background:var(--navy-bg);color:var(--on-navy);border-color:var(--navy-bg)}
.d2.dk .catchip.active{background:var(--primary);border-color:var(--primary)}
.d2 .catchip:not(.active):hover{background:var(--gold-soft);border-color:var(--gold)}
.d2 .catnow{text-align:left;color:var(--ok);font-size:.84rem;margin:0 0 .5rem}
.d2 #punchform{display:flex;flex-wrap:wrap;gap:.5rem}
.d2 #punchform .punchbtn{flex:1 1 40%;margin:0}
.d2 #punchform .punchbtn.red{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-2)}
.d2 #punchform .punchbtn.red:hover{border-color:var(--ink)}
.d2 #punchform .punchbtn.gold{background:var(--primary);color:var(--on-primary)}   /* „Pause starten": Hauptknopf Navy (26.10.2026) */
.d2 #punchform #geostatus{flex-basis:100%}
.d2 #punchform>.warn,.d2 #punchform>.prqcard{flex-basis:100%}
.d2 .ct-day{border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
.d2 .msgcard{box-shadow:var(--sh-1),inset 4px 0 0 var(--gold)}
.d2 .fixme{background:var(--surface);box-shadow:var(--sh-1),inset 4px 0 0 var(--coral)}
.d2 .pushcard{box-shadow:var(--sh-1),inset 4px 0 0 var(--info)}
.d2 .autofix{box-shadow:var(--sh-1),inset 4px 0 0 var(--gold)}
/* Aufgaben-Zeilen (Stempeluhr, Übersicht) */
.d2 .taskrow{border-color:var(--line);padding:.5rem 0;gap:.6rem}
.d2 .taskrow.mine{background:var(--gold-soft);border-left:0;box-shadow:inset 3px 0 0 var(--gold);border-radius:0 12px 12px 0}
.d2 .taskbox{width:28px;height:28px;flex-basis:28px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface)}
.d2 .taskbox:hover,.d2 .taskbox:focus{border-color:var(--ok);background:var(--ok-soft)}
.d2 .tasktop{background:var(--navy-bg);color:var(--on-navy);border-radius:6px}
.d2.dk .tasktop{background:#2A4573}
.d2 .taskspan{background:var(--surface-2);border:0;color:var(--muted)}
.d2 .taskspan.last{background:var(--warn-soft);color:var(--warn)}
.d2 .overdue{color:var(--coral-ink)}

/* ---------- Übersicht (Admin) ---------- */
.d2[data-page=dash] .dg-head h1{font-size:1.25rem}
.d2[data-page=dash] .dgrid{gap:.75rem}
.d2 .dg-editbtn{background:transparent;border-color:var(--line-2);color:var(--muted)}
.d2 .dcell>.card{border-radius:var(--r-lg)}
.d2 .dg-more{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.d2 .dg-morebar{background:linear-gradient(transparent,var(--surface) 50%)!important}
.d2 .dg-bar{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-pop),inset 4px 0 0 var(--gold)}
.d2 .dg-ctl{background:var(--surface-2);border-color:var(--line)}
.d2 .dg-ctl button{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.d2 .dgrid.is-edit .dcell>.card::after{background:linear-gradient(transparent,var(--surface))}
@media(min-width:700px){
 .d2 .dgrid .todos .todorow{min-height:46px;padding:.35rem .45rem .35rem .15rem;margin:0;border-radius:0}
 .d2 .dgrid .todos .todorow .ico{width:30px;height:30px;flex-basis:30px}
 .d2 .dgrid .todos .todorow>a.btn{min-height:32px;min-width:32px;width:32px;padding:0;font-size:0;border:0;background:transparent}
 .d2 .dgrid .todos .todorow .tsnz>summary{min-height:32px;min-width:32px;padding:0}
}
.d2 .dashclock .statuschip{font-size:.8rem}
/* „Heute im Dienst" */
.d2 table.dashtoday td{border-color:var(--line)}

/* ---------- Kontrolle: Reihenfolge der Bereiche (19.10.2026, kontrolle.css — Leiste/Steuerleiste wie oben bei der Übersicht) ---------- */
.d2[data-page=approvals] .dg-head h1{margin:0}
.d2 .dg-editbtn:hover{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.d2 .kzlist.is-edit .kzsec{outline-color:var(--line-2)}
.d2 .kzlist.is-edit .kzsec.off{outline-color:var(--line)}
.d2 .kzlist.is-edit .kzsec>.card{border-radius:0 0 var(--r-lg) var(--r-lg)}
.d2 .kzlist.is-edit .kzsec>.card::after{background:linear-gradient(transparent,var(--surface))}
.d2 .kzlist.is-edit .dg-ctl{border-radius:var(--r-lg) var(--r-lg) 0 0}
.d2 .kzlist.is-edit .kzsec{border-radius:var(--r-lg)}

/* ---------- Meine Reinigungen + laufender Auftrag ---------- */
.d2 .cj-head h1{font-size:1.3rem}
.d2 .cj-clock{background:var(--neutral-soft)!important;color:var(--neutral)!important;font-weight:700}
.d2 .cj-clock.work{background:var(--s-run-soft)!important;color:var(--s-run)!important}   /* eingestempelt = läuft (blau), Pause = blau gedämpft (finales Design 26.10.2026) */
.d2 .cj-clock.break{background:var(--surface-3)!important;color:var(--s-run)!important}
.d2 .cj-job{background:var(--surface)!important;border:0!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh-1)!important;padding:.85rem .95rem!important;margin-bottom:.7rem!important}
.d2 .cj-jtop{gap:.4rem!important;align-items:center}
.d2 .cj-apt{font-size:1.15rem!important;font-weight:800!important;letter-spacing:-.02em}
.d2 .cj-n{background:var(--navy-bg)!important;color:var(--on-navy)!important}
.d2.dk .cj-n{background:#2A4573!important}
/* die laufende Reinigung (finales Design 26.10.2026): ruhige Karte wie die anderen, blauer Rand + blauer Fortschritt = läuft (vorher Navy-Fläche mit Gold) */
.d2 .cj-job.running{box-shadow:inset 0 0 0 2px var(--s-run)!important}
.d2 .cj-job.running .cj-apt{font-size:1.6rem!important}
.d2 .cj-job.running .cj-bar i{background:var(--s-run)!important}
.d2 .cj-job.running .d2ring .fg{stroke:var(--s-run)}
.d2 .cj-job .d2ring{position:absolute;top:.75rem;right:.8rem}
.d2 .cj-job:has(.d2ring) .cj-jtop{padding-right:64px}
.d2 .cj-job:has(.d2ring){position:relative}
.d2 .cj-job.running .cj-bar,.d2 .cj-job:has(.d2ring) .cj-bar{display:none}
/* Kästen in der Karte → Chips/Zeilen */
.d2 .cj-key,.d2 .cj-keys{border-radius:12px!important}
.d2 .cj-acts{gap:.45rem!important}
.d2 .cj-acts .btn{flex:1 1 40%}
.d2 .cj-prog{margin-top:.45rem}
.d2 .cj-bar{height:6px!important;border-radius:999px!important;background:var(--surface-2)!important}
.d2 .cj-bar i{background:var(--ok)!important;border-radius:999px!important}
/* Sprungleiste und Abschnitte im Auftrag */
.d2 .cj-jhead{gap:.5rem}
.d2 .cj-jump{background:color-mix(in srgb,var(--bg) 94%,transparent)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.d2 .cj-chip{border-radius:999px!important;background:var(--surface)!important;color:var(--ink)!important;border:0!important;box-shadow:inset 0 0 0 1px var(--line)!important;min-height:36px}
.d2 .cj-chip[aria-current],.d2 .cj-chip.on,.d2 .cj-chip.active{background:var(--navy-bg)!important;color:var(--on-navy)!important;box-shadow:none!important}
.d2 .cj-sec{background:var(--surface)!important;border:0!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh-1)!important}
.d2 .cj-sechd{min-height:48px}
.d2 .cj-ck{border-color:var(--line)!important}
.d2 .cj-box{border-radius:50%!important;width:30px!important;height:30px!important;min-width:30px;border:2px solid var(--line-2)!important;background:var(--surface)!important;color:transparent!important}
.d2 .cj-ck.st-done .cj-box,.d2 .cj-box[aria-pressed=true]{background:var(--ok)!important;border-color:var(--ok)!important;color:var(--on-solid)!important}
.d2 .cj-ck.st-done .cj-t{color:var(--soft);text-decoration:line-through;text-decoration-color:var(--line-2)}
.d2 .cj-tag{border-radius:999px!important}
.d2 .cj-actbar{background:color-mix(in srgb,var(--surface) 96%,transparent)!important;border-top:1px solid var(--line)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
 box-shadow:0 -8px 24px rgba(10,20,40,.08)!important}
/* „Jetzt dran" (design2.js) */
.d2 .d2now{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 .75rem;padding:.75rem .85rem;border-radius:var(--r-lg);background:var(--gold-soft);color:var(--ink);box-shadow:inset 4px 0 0 var(--gold)}
.d2 .d2now .d2now-ic{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center}
.d2 .d2now .d2now-ic svg{width:18px;height:18px}
.d2 .d2now-tx{flex:1;min-width:0}
.d2 .d2now-tx small{display:block;font-size:12.5px;font-weight:650;color:var(--gold-ink)}   /* kein Großbuchstaben-Label (finales Design 26.10.2026) */
.d2 .d2now-tx b{display:block;font-size:.95rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.d2 .d2now .btn{flex:0 0 auto}
.d2 .cj-ck.d2-target{animation:d2flash 1.4s ease-out 1}
@keyframes d2flash{0%{box-shadow:0 0 0 3px var(--gold)}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- Aufgaben (eigene --ui- und --bk- Farben der Module auf das System gelegt) ---------- */
.d2 .tk-app,.d2 .tk-dlg,.d2 .tk-team,.d2 .tk-page,.d2 .tk-toast,.d2 .bk-app,.d2 .bk-dlg,.d2 .bk-page,.d2 .bk-tip{
 --ui-ink:var(--ink);--ui-ink-2:var(--ink);--ui-ink-3:var(--muted);--ui-ink-4:var(--soft);--ui-bg:var(--bg);--ui-sunken:var(--surface-2);
 --ui-line:var(--line);--ui-line-2:var(--line-2);--ui-grid:var(--line);--ui-navy:var(--primary);--ui-navy-2:var(--primary-2);--ui-gold:var(--gold);--ui-gold-soft:var(--gold-soft);
 --ui-blue:var(--info);--ui-blue-t:var(--info-soft);--ui-ok:var(--ok);--ui-ok-t:var(--ok-soft);--ui-warn:var(--warn);--ui-warn-t:var(--warn-soft);--ui-bad:var(--coral);--ui-bad-t:var(--coral-soft);
 --ui-r-xl:var(--r-lg);--ui-r-lg:18px;--ui-sh-1:var(--sh-1);--ui-sh-2:var(--sh-2);--ui-sh-3:var(--sh-pop);
 --bk-ink:var(--ink);--bk-ink-2:var(--ink);--bk-ink-3:var(--muted);--bk-ink-4:var(--soft);--bk-bg:var(--bg);--bk-sunken:var(--surface-2);--bk-line:var(--line);--bk-line-2:var(--line-2);
 --bk-grid:var(--line);--bk-we:var(--surface-2);--bk-navy:var(--primary);--bk-navy-2:var(--primary-2);--bk-gold:var(--gold);--bk-gold-soft:var(--gold-soft);
 --bk-ok:var(--ok);--bk-ok-t:var(--ok-soft);--bk-warn:var(--warn);--bk-warn-t:var(--warn-soft);--bk-bad:var(--coral);--bk-bad-t:var(--coral-soft);--bk-sh-1:var(--sh-1);--bk-sh-2:var(--sh-2)}
/* Dunkelmodus: Navy als SCHRIFT wird hell (Flächen/Rahmen der Module nutzen seit 23.10.2026 direkt --primary) */
.d2.dk .tk-app,.d2.dk .tk-dlg,.d2.dk .tk-team,.d2.dk .tk-page,.d2.dk .tk-toast,.d2.dk .bk-app,.d2.dk .bk-dlg,.d2.dk .bk-page,.d2.dk .bk-tip{
 --ui-navy:var(--navy-text);--ui-navy-2:var(--navy-text);--bk-navy:var(--navy-text);--bk-navy-2:var(--navy-text)}
.d2 body:has(.tk-app),.d2 body:has(.tk-page){background:var(--bg)}
.d2 .tk-hd h1{font-size:1.3rem}
.d2 .tk-row{min-height:46px;padding:3px 12px}
@media (hover:hover) and (pointer:fine){.d2 .tk-row:hover{background:var(--surface-2)}}
.d2 .tk-qa{background:var(--surface-2)}
.d2 .tk-seg{background:var(--surface-2)}
.d2 .tk-seg a.on{background:var(--surface);color:var(--ink)}
.d2 .tk-app .tk-qa input,.d2 .tk-app .tk-qa select,.d2 .tk-app .tk-srch input,.d2 .tk-app select.tk-sel{background:var(--surface);color:var(--ink)}
.d2 .tk-btn{border-radius:var(--r-pill)}
.d2 .tk-btn.pri{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.d2 .tk-fab{background:var(--gold)!important;color:var(--on-gold)!important;box-shadow:var(--sh-2)!important}
@media(max-width:1099.98px){.d2 .tk-fab{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 14px)!important}}
.d2 .tk-pill,.d2 .tk-chip{border-radius:var(--r-pill)}

/* ---------- Posteingang: Listen-Zeilen statt Karten mit Knopf-Stapel ---------- */
.d2 .gm-list{gap:0!important;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.d2 .gm-row.gm-ux{border:0;border-radius:0;box-shadow:none;background:var(--surface);border-top:1px solid var(--line)}
.d2 .gm-row.gm-ux:first-child{border-top:0}
.d2 .gm-row.gm-ux:hover{box-shadow:none;background:var(--surface-2)}
.d2 .gm-row.gm-ux.unread{background:var(--surface)}
.d2 .gm-row.gm-ux.unread:not(.g-urgent){box-shadow:inset 3px 0 0 var(--gold)}
.d2 .gm-row.gm-ux.g-urgent{border-color:var(--line);box-shadow:inset 3px 0 0 var(--coral)}
.d2 .gm-row.gm-ux.g-closed{background:var(--surface)}
.d2 .gm-ux-fg{padding:.55rem .7rem .55rem .75rem;align-items:center}
.d2 .gm-ux-av{border-radius:50%;background:var(--navy-bg);color:var(--on-navy)}
.d2.dk .gm-ux-av{background:#2A4573}
.d2 .gm-row.gm-ux.g-urgent .gm-ux-av{background:var(--coral);color:var(--on-solid)}
.d2 .gm-row.gm-ux.g-closed .gm-ux-av{background:var(--neutral-soft);color:var(--muted)}
.d2 .gm-row.gm-ux.unread .gm-ux-av::after{border-color:var(--surface)}
.d2 .gm-row.gm-ux .gm-chk{padding-top:0}
.d2 .gm-row.gm-ux a.gm-link{align-items:center}
.d2 .gm-row.gm-ux .gm-prev{margin-top:0}
.d2 .gm-ux-chips{margin-top:.2rem}
.d2 .gm-row.gm-ux .gm-meta{margin-top:.15rem}
.d2 .gm-ux-acts{flex-direction:row!important;align-items:center!important;gap:.3rem!important}
.d2 .gm-ux-acts .btn.sm{min-width:40px;min-height:40px;width:40px;padding:0;border-radius:50%;background:var(--surface);border-color:var(--line-2)}
.d2 .gm-ux-acts .btn.sm .gm-ux-lbl{display:none}
.d2 .gm-ux-acts .btn.sm .gm-ux-ico{display:inline!important}
.d2 .gm-grp{margin:.9rem 0 .4rem;font-size:.68rem;letter-spacing:.09em}
.d2 .gm-grp .gm-grp-n{background:var(--neutral-soft);color:var(--ink)}
.d2 .gm-grp-urgent .gm-grp-n{background:var(--coral);color:var(--on-solid)}
.d2 .gm-grp-waiting .gm-grp-n{background:var(--navy-bg);color:var(--on-navy)}
.d2 .gm-uxmenu-pop{background:var(--surface)!important;color:var(--ink);border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--sh-pop)!important}
.d2 .gm-uxp1 .btn.sm{min-height:36px}
.d2 .gm-ux-swipe{background:var(--ok)}

/* ---------- Reinigungen live: Kennzahlen, Zeitleiste je Person mit Jetzt-Linie ---------- */
.d2 .cj-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px!important}
.d2 .cj-kpi{border:0!important;border-radius:14px!important;background:var(--surface)!important;box-shadow:var(--sh-1);color:var(--ink)!important;padding:.5rem .6rem!important;min-width:0;font-size:.72rem}
.d2 .cj-kpi:first-child{background:var(--navy-bg)!important;color:var(--on-navy)!important}
.d2.dk .cj-kpi:first-child{background:#1C3560!important}
.d2 .cj-kpi b{font-size:1.15rem;display:block;color:inherit!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){.d2 .cj-kpis{gap:6px!important}.d2 .cj-kpi{padding:.45rem .5rem!important}.d2 .cj-kpi b{font-size:1rem}}
.d2 .d2tl{padding:.8rem .9rem .9rem}
.d2 .d2tl-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem .8rem;margin-bottom:.5rem}
.d2 .d2tl-hd h2{margin:0}
.d2 .d2tl-leg{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .55rem;font-size:.72rem;color:var(--muted)}
.d2 .d2tl-leg i{display:inline-block;width:12px;height:8px;border-radius:3px;margin-right:-.25rem;vertical-align:middle}
.d2 .d2tl-grid{position:relative;padding-top:4px}
.d2 .d2tl-axis,.d2 .d2tl-lane{display:grid;grid-template-columns:4.6rem minmax(0,1fr);align-items:center}
.d2 .d2tl-axis{height:18px;font-size:.66rem;color:var(--soft);font-variant-numeric:tabular-nums}
.d2 .d2tl-track{position:relative;height:100%}
.d2 .d2tl-axis b{position:absolute;top:0;transform:translateX(-50%);font-weight:600}
.d2 .d2tl-lane{height:34px;border-top:1px solid var(--line)}
.d2 .d2tl-lane .d2tl-track{height:26px}
.d2 .d2tl-who{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:.4rem}
.d2 .d2tl-job{position:absolute;top:2px;bottom:2px;min-width:6px;border-radius:7px;padding:0 .3rem;font-size:.66rem;font-weight:800;line-height:22px;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis;text-decoration:none;color:var(--on-solid);background:var(--neutral)}
.d2 .d2tl-job.done,.d2 .d2tl-leg .done{background:var(--ok)}
.d2 .d2tl-job.running,.d2 .d2tl-leg .running{background:var(--gold);color:var(--on-gold)}
.d2 .d2tl-job.paused,.d2 .d2tl-leg .paused{background:var(--warn)}
.d2 .d2tl-job.todo,.d2 .d2tl-leg .todo{background:var(--surface-2);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.d2 .d2tl-job.plan{background-color:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line-2);background-image:repeating-linear-gradient(135deg,var(--surface-2) 0 4px,transparent 4px 8px)}
.d2 a.d2tl-job:hover{filter:brightness(1.08)}
.d2 .d2tl-now{position:absolute;top:0;bottom:0;left:calc(4.6rem + (100% - 4.6rem) * var(--x) / 100);width:2px;margin-left:-1px;background:var(--coral);pointer-events:none}
.d2 .d2tl-now span{position:absolute;top:-6px;left:50%;transform:translateX(-50%);background:var(--coral);color:var(--on-solid);font-size:.6rem;font-weight:800;padding:0 .3rem;border-radius:999px;line-height:16px}
.d2 .cj-filter{gap:.5rem!important}

/* ---------- Preiskalender (19.10.2026, Michael: „die alte Ansicht war besser"): wie im alten Design — flächige Ampel, Buchungsblöcke mit
   Namen. Hier nur Flächen/Kopf fürs neue Design; die Zellen sind immer hell, darum feste dunkle Schrift (auch im Dunkelmodus lesbar) ---------- */
.d2 .pr-wide{--pr-we:var(--surface-2);--pr-today:rgba(233,178,60,.16);--pr-grid:var(--line)}
.d2 .pr-grid .pr-apt{background:var(--surface);box-shadow:-24px 0 0 0 var(--surface)}
.d2 .pr-apt b{color:var(--ink)}
.d2 .pr-c{color:#0B2240}.d2 .pr-c.l-{color:#5C6370}
.d2 .pr-hrow th,.d2 .pr-drow th,.d2 .pr-mrow th{background:var(--surface)}
.d2 .pr-hrow th.we,.d2 .pr-drow th.we{background:var(--pr-we)}.d2 .pr-hrow th.today,.d2 .pr-drow th.today{background:var(--pr-today)}
.d2 .pr-seg{background:var(--surface);border-color:var(--line-2)}
.d2 .pr-warn{border-radius:var(--r)}
.d2 .pr-panel{background:var(--surface);color:var(--ink)}

/* ---------- Einstellungen: gruppierte Liste, am Handy einspaltig ---------- */
.d2 .settop{background:var(--bg);top:calc(var(--top-h) + env(safe-area-inset-top,0px))}
.d2 .settop input[type=search]{border-radius:var(--r-pill);padding-left:1rem}
.d2 .jumplist a,.d2 .jumpsel>summary{background:var(--surface);border:0;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);min-height:36px}
.d2 .setsec{padding:0;overflow:hidden}
.d2 .setsec>.setbar{margin:0;padding:.55rem 1rem;background:var(--surface-2);border-bottom:1px solid var(--line)}
.d2 .setsec>.setbar+*{margin-top:0}
.d2 .setsec .setmod{background:transparent;color:var(--muted);padding:0;font-size:.66rem;letter-spacing:.09em}
.d2 .setsec .card,.d2 .setsec .card .card{border:0;box-shadow:none;padding:0;margin:0;background:transparent;border-radius:0}
.d2 .setsec>.card,.d2 .setsec>:not(.setbar):not(.card){padding:.8rem 1rem 1rem}
.d2 .setsec>.card+.card{margin-top:0;border-top:1px solid var(--line)}
/* Sprungliste am Handy als gruppierte Liste mit Pfeil */
@media(max-width:768px){
 .d2 .jumpsel[open] .jumplist{flex-direction:column;flex-wrap:nowrap;gap:0;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
 .d2 .jumpsel[open] .jumplist a{border-radius:0;box-shadow:none;border-top:1px solid var(--line);min-height:48px;padding:.5rem 1rem;justify-content:space-between;font-size:.92rem}
 .d2 .jumpsel[open] .jumplist a:first-child{border-top:0}
 .d2 .jumpsel[open] .jumplist a::after{content:'';width:8px;height:8px;border-right:2px solid var(--soft);border-top:2px solid var(--soft);transform:rotate(45deg);flex:0 0 auto}
}
.d2 .modblock{border-color:var(--line)}
@media(max-width:700px){
 .d2 .grid.cols2,.d2 .grid.cols3{grid-template-columns:minmax(0,1fr)!important}
 .d2 .setsec [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
 .d2 .setsec input,.d2 .setsec select,.d2 .setsec textarea{max-width:100%!important}
 .d2 .setsec table{display:block;overflow-x:auto}
}

/* ---------- Konto ---------- */
.d2 .qrbox{background:#fff}
.d2 .codes code{background:var(--surface-2);color:var(--ink)}

/* ---------- Urlaubskalender, Monatsbericht (Kern) ---------- */
.d2 .cal-cell,.d2 .vc-cell{background:var(--surface);border-color:var(--line)}
.d2 .cal-we,.d2 .vc-we{background:var(--surface-2)}
.d2 .vc-hol{background:var(--gold-soft)}
.d2 .vc-sel{background:var(--gold-soft);border-color:var(--gold)}
.d2 .repbar{background:var(--surface-2)}
.d2 .reptab tr.reptotal td{background:var(--surface-2)}
.d2 .vacrep{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.d2 .cl14-row{background:var(--surface);border-color:var(--line)}
.d2 .cl14-p{background:var(--surface-2)}
.d2 .modchk,.d2 .modusers summary{min-height:44px}

/* ---------- Zugänge: Wohnungs-Chips (Mehrfachauswahl), „nur diese / alle der Gruppe", Gespeichert-Karte (19.10.2026) ---------- */
.d2 .ac-tile{background:var(--surface);border:0;border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.d2 .ac-val,.d2 .ac-admin-row code,.d2 .ac-hist code{background:var(--surface-2);color:var(--ink)}
.d2 .ac-val.open{background:var(--ok-soft);color:var(--ink)}
.d2 .ac-chip{background:var(--surface);border-color:var(--line-2);color:var(--ink);border-radius:var(--r)}
.d2 .ac-chip:not(.on):hover{background:var(--gold-soft);border-color:var(--gold)}
.d2 .ac-chip.on,.d2 .ac-chip:has(input:checked){background:var(--navy-bg);border-color:var(--navy-bg);color:var(--on-navy)}
.d2.dk .ac-chip.on,.d2.dk .ac-chip:has(input:checked){background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.d2 .ac-chip small{color:var(--muted)}
.d2 .ac-chip.on small,.d2 .ac-chip:has(input:checked) small{color:inherit;opacity:.8}
.d2 .ac-mode{border-color:var(--line);border-radius:var(--r);background:var(--surface-2)}
.d2 .ac-done h2{color:var(--ok)}
.d2 .badge.ac-grp{background:var(--gold-soft);color:var(--gold-ink)}

/* ================================================================ 6 Dunkelmodus — Rest */
.d2.dk img{opacity:.94}
.d2.dk .logo-img{opacity:1;background:#fff}
.d2.dk .btn.gold,.d2.dk .btn.gold:hover{color:var(--on-primary)}
.d2.dk .todorow>a.btn.gold{color:var(--soft)}
/* Buchungskalender im Dunkelmodus: Plattform-Farben als Schrift heller, Feiertags-Schatten dunkel getönt, „!"-Chip auf dem Balken lesbar */
.d2.dk .bk-av.ch-booking,.d2.dk .bk-pill.st0,.d2.dk .bk-pill.st1{color:#8FB4F5}.d2.dk .bk-av.ch-direct{color:#6FD3A6}.d2.dk .bk-av.ch-other{color:#C2AEF2}
.d2.dk .bk-app,.d2.dk .bk-page,.d2.dk .bk-dlg{--bk-hol:#3A2C14;--bk-holx:#2A2214}
.d2 .bk-bar .bk-c.bk-cbed{background:var(--coral-soft);color:var(--coral-ink)}
/* Auswahl-Listen hell und dunkel lesbar (29.10.2026): Einträge immer mit Fläche + Schrift des Designs, auch in Gruppen */
:where(.d2) select :is(option,optgroup){background:var(--surface);color:var(--ink)}
:where(.d2) select option:disabled{color:var(--muted)}
.d2.dk #docview{background:var(--bg)}
.d2.dk .sheet-backdrop{background:rgba(0,0,0,.6)}
/* Avatare (Initialen in fester Farbe je Person, base.css): im Dunkelmodus getönte Fläche, helle Schrift im selben Farbton */
.d2.dk .uav{background:#223049;color:#C9D3E3}
.d2.dk .uav.c0{background:#1A2E52;color:#9DBDF5}.d2.dk .uav.c1{background:#13372A;color:#86D6B0}.d2.dk .uav.c2{background:#2B2346;color:#C5B3F0}.d2.dk .uav.c3{background:#3F1D25;color:#F3A7B3}
.d2.dk .uav.c4{background:#3A2C10;color:#F0C674}.d2.dk .uav.c5{background:#0F3532;color:#86D3CB}.d2.dk .uav.c6{background:#223049;color:#C9D3E3}.d2.dk .uav.c7{background:#22284A;color:#AEB7F0}

/* ================================================================ 6b Alle übrigen Seiten (19.10.2026)
   Die Module tragen seit 23.10.2026 die Rollen oben selbst (var(--surface), var(--line), var(--ok) …; vorher legte ein Farb-Übersetzer
   ihre festen Farben beim Ausliefern um). Hier: was dann noch fehlt — Fläche bis unten, Tippziele ≥ 44 px am Handy, Unterreiter der Module als Pillen, Schalter. */
html.d2{background:var(--bg)}
/* Unterreiter der Module (Gästemappe, Check-in, Hilfe, Statistik, Forderungen, Automatik, Wohnungen …): Pillen wie die Reiter oben */
.d2 :is(.gb-subnav,.ci-subnav,.gma-sub,.hp-seg,.ap-pills,.gd-langs,.gb-langs,.gm-filters,.st-chs,.rcv-seg)>a{border-radius:var(--r-pill)}
/* Schalter (Benachrichtigungen): Knopf bleibt weiß, Bahn aus dem System */
.d2 :is(input.nt-cb,input.nt-all){background:var(--line-2)}
.d2 :is(input.nt-cb,input.nt-all)::after{background:#fff}
.d2 :is(input.nt-cb,input.nt-all):checked{background:var(--primary)}
.d2 :is(input.nt-cb.mail,input.nt-all[data-col=mail]):checked{background:var(--gold-2)}
.d2.dk :is(input.nt-cb,input.nt-all):not(:checked):not(:indeterminate){background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.d2.dk :is(input.nt-cb,input.nt-all):not(:checked):not(:indeterminate)::after{background:var(--muted)}
.d2.dk :is(input.nt-cb,input.nt-all):checked{background:var(--navy-text)}
.d2.dk :is(input.nt-cb.mail,input.nt-all[data-col=mail]):checked{background:var(--gold-2)}
.d2.dk :is(input.nt-cb,input.nt-all):checked::after{background:var(--surface)}
.d2 input.nt-all:indeterminate{background:color-mix(in srgb,var(--primary) 45%,var(--line-2))}
.d2 input.nt-all[data-col=mail]:indeterminate{background:color-mix(in srgb,var(--gold-2) 50%,var(--line-2))}
@media(pointer:coarse){
 /* Kopf: Hilfe „?" und Konto-Knopf */
 .d2:not([data-page="prices"]) .usermenu .helpbtn{width:44px;height:44px}
 .d2:not([data-page="prices"]) .userbtn{width:44px;height:44px}
 /* Pfad der Einstellungen */
 .d2:not([data-page="prices"]) .crumbs a,.d2:not([data-page="prices"]) .crumbs .crumb-off{line-height:44px}
 /* Unterreiter, Segmente, Filter-Pillen der Module */
 .d2:not([data-page="prices"]) :is(.gb-subnav,.ci-subnav,.gma-sub,.hp-seg,.ap-pills,.gd-langs,.gb-langs,.gm-filters,.st-chs,.rcv-seg,.st-seg,.tk-seg,.bk-seg,.ci-filter)>:is(a,button,label){min-height:44px;display:inline-flex;align-items:center}
 /* Felder: mindestens 44 px hoch (Module mit eigenen, kleineren Feldern eingeschlossen) */
 .d2:not([data-page="prices"]) main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=color]),select){min-height:44px!important}
 /* Aufklapper: ganze Zeile tippbar */
 .d2:not([data-page="prices"]) main details>summary{min-height:44px}
 .d2:not([data-page="prices"]) main details>summary:not([class]){padding-top:.65rem;padding-bottom:.55rem;margin-top:0;margin-bottom:0}
 /* Text-Links in Tabellen und Absätzen: unsichtbar höhere Tippfläche (Innenabstand eines Inline-Elements verschiebt keine Zeile) */
 .d2:not([data-page="prices"]) main :is(td,th,p,li,dd)>a:not([class]),.d2:not([data-page="prices"]) main td>a.muted{padding-top:14px;padding-bottom:14px}
 .d2:not([data-page="prices"]) main .btn.sm,.d2:not([data-page="prices"]) main button.btn,.d2:not([data-page="prices"]) main a.btn{min-height:44px}
}
/* Überschrift + ⓘ: das ⓘ bleibt neben der Überschrift statt allein in eine eigene Zeile zu rutschen */
.d2 .hd:has(>:is(h1,h2,h3)+.ihint:last-child):not(:has(>.ihint[open])){flex-wrap:nowrap;align-items:flex-start}
.d2 .hd:has(>:is(h1,h2,h3)+.ihint:last-child)>.ihint{flex:0 0 auto;margin-top:-10px}
/* Datei-Auswahl: Knopf als Pille statt Systemknopf, nie breiter als die Karte */
.d2 input[type=file]{max-width:100%;min-height:44px;padding:.3rem .4rem;font-size:.86rem;color:var(--muted)}
.d2 input[type=file]::file-selector-button{margin-right:.6rem;min-height:36px;padding:.35rem .95rem;border:1px solid var(--line-2);border-radius:var(--r-pill);
 background:var(--surface-2);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
/* Anmeldung: Logo auf heller Kachel, „APP" in lesbarem Gold */
.d2 .login-wrap h1 span{color:var(--gold-ink)!important}
.d2.dk .login-wrap img{background:#fff;border-radius:18px;padding:8px;opacity:1}
/* Toast im Dunkelmodus: dunkle Pille statt heller */
.d2.dk .toast:not(.neg){background:var(--surface-3);color:var(--ink);box-shadow:var(--sh-pop)}
/* Buchungskalender: Zahl-Chips auf den Balken dunkel getönt (weiße Schrift bleibt lesbar), aktives Segment mit Textfarbe */
.d2 .bk-bar .bk-c{background:rgba(8,16,32,.24)}
.d2 .bk-seg .on,.d2 .bk-seg .on:hover{color:var(--ink)}
@media(max-width:700px){
 /* Tabellen mit Eingabefeldern bzw. in Scroll-Rahmen: Spalten nicht zerquetschen — lieber waagrecht schieben */
 .d2 main table td>:is(input:not([type]),input[type=text],input[type=email],input[type=url],input[type=search]){min-width:8rem}
 .d2 main table td>:is(input[type=number],input[type=time],input[type=date],select){min-width:4.75rem}
 .d2 main td[style*="overflow-wrap:anywhere"],.d2 main td[style*="word-break"]{min-width:12rem}
 .d2 main :is(.tblscroll,[style*="overflow-x:auto"])>table :is(td,th):not(:first-child){min-width:5.5rem}
 /* Gästemappe-Listen (Empfehlungen, Extras): Knöpfe unter den Text statt daneben */
 .d2 .gb-a .gb-row{grid-template-columns:auto minmax(0,1fr)}
 .d2 .gb-a .gb-row>.gb-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-start}
}

/* ================================================================ 8 Finales Design — Fundament (Michael 25.10.2026, Anleitung: docs/design-final.md)
   Gilt für jede Seite (auch mit Design A). Seiten-eigene Regeln stehen in public_html/assets/d2-*.css (lädt automatisch, design2ExtraCss).
   Statusfarben: Grün nur fertig · Blau läuft · Grau noch nicht gestartet/offen · Rot nur offene Probleme/echte Fehler · Orange nur knapp/Warnung.
   Navy für Navigation und Hauptknöpfe, Gold nur Fokus/aktiv. Ruhende Karten ohne Schatten, Trennung über die Tonstufe (surface / surface-2). */
html.d2{
 --s-done:var(--ok);--s-done-soft:var(--ok-soft);
 --s-run:var(--info);--s-run-soft:var(--info-soft);
 --s-todo:#A3ABB8;--s-todo-soft:var(--surface-3);
 --s-prob:var(--danger);--s-prob-soft:var(--danger-soft);
 --s-warn:var(--warn);--s-warn-soft:var(--warn-soft);
 --prio-a:var(--navy-soft);--prio-a-ink:var(--navy-text);--prio-b:#F6E7C8;--prio-b-ink:#7A5200;--prio-c:#DDEFE3;--prio-c-ink:#24503A;--prio-d:var(--surface-3);--prio-d-ink:var(--muted);
 --page-x:16px;--sec-gap:24px;--measure:75ch;--r-panel:14px;--r-tile:10px;
}
html.d2.dk{--s-todo:#5B6578;--prio-b:#3A2E14;--prio-b-ink:#F0CF8A;--prio-c:#163324;--prio-c-ink:#9BD8B3}
@media(min-width:700px){html.d2{--page-x:24px;--sec-gap:28px}}
@media(min-width:1440px){html.d2{--page-x:32px;--sec-gap:32px}}
/* Schrift: Plus Jakarta Sans auch mit Design A (Ukrainisch fällt auf Commissioner zurück, das Design A mitbringt) */
html.d2[data-da]{--f-da:"Plus Jakarta Sans","Commissioner",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
/* Seitenrand und Lesebreite einheitlich */
html.d2 main{padding-left:max(var(--page-x),env(safe-area-inset-left,0px));padding-right:max(var(--page-x),env(safe-area-inset-right,0px))}
html.d2 .topbar{padding-left:max(var(--page-x),env(safe-area-inset-left,0px));padding-right:max(var(--page-x),env(safe-area-inset-right,0px))}
html.d2 main :is(.card>p,.ihint-body,.d2-text),html.d2 main>p,html.d2 main .card>p.muted{max-width:var(--measure)}
/* Flächen: keine Rahmen um ruhende Karten (auch mit Design A), Karte in der Karte = Tonstufe */
html.d2[data-da] .card{border-color:transparent}
html.d2[data-da] .card .card{border:0;background:var(--surface-2)}
/* keine kleinen Großbuchstaben-Labels */
.d2 :is(th,.catlabel,.tgroup,.modlbl,.tsnzhead,.catlangs label,.weekrow td:first-child,.cal-head div,.vc-head div){text-transform:none;letter-spacing:0}
:where(.d2) th{font-size:.78rem;font-weight:650}
/* Zahlen gleich breit */
.d2 :is(td,.num,.time,.d2-num,.d2-kpi .n){font-variant-numeric:tabular-nums}
/* Zähler im Menü: Navy; nur offene Probleme rot */
.d2 :is(.desknav,.dnmore-panel) a[href$="p=cj_problems"] .cnt{background:var(--s-prob);color:var(--on-solid)}

/* Seitenkopf: eine Frage zuerst — Titel + ein Satz „wichtigster Befund" */
.d2 .d2-head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:space-between;margin:0 0 var(--sec-gap)}
.d2 .d2-head h1{margin:0}
.d2 .d2-head .d2-meta{font-size:13px;color:var(--muted)}
.d2 .d2-find{flex-basis:100%;margin:4px 0 0;font-size:14px;max-width:var(--measure)}
.d2 .d2-head>.d2-find{order:3;max-width:none}.d2 .d2-head::after{content:'';flex-basis:100%;order:2}   /* Befund immer in eigener Zeile (max-width ließ ihn sonst neben den Titel rutschen) */
.d2 .d2-warn-t{color:var(--s-warn);font-weight:700}
.d2 .d2-prob-t{color:var(--s-prob);font-weight:700}
/* Abschnitte und Raster */
.d2 .d2-sec{margin-top:var(--sec-gap)}
.d2 .d2-sec>h2:first-child{font-size:1.1rem;margin:0 0 12px}
.d2 .d2-cols{display:grid;gap:var(--sec-gap) 24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
/* Flächen: Panel (ruhige Fläche) und Kachel darin (Tonstufe) */
.d2 .d2-panel{background:var(--surface);border-radius:var(--r-panel);padding:20px}
.d2 .d2-tile{background:var(--surface-2);border-radius:var(--r-tile);padding:14px}
@media(max-width:699.98px){.d2 .d2-panel{padding:14px}}
/* Kennzahlen als Schrift: große Zahl, darunter was sie heißt (fett), darunter grauer Kontext/Vergleich — eine ruhige Zeile */
.d2 .d2-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:16px 24px;background:var(--surface);border-radius:var(--r-panel);
 padding:18px 20px;margin:0 0 var(--sec-gap);box-shadow:none}
html.d2[data-da] .card.d2-kpis{border:0;padding:18px 20px}
html.d2 .d2-kpi,html.d2 a.d2-kpi{display:block;min-width:0;color:var(--ink);text-decoration:none}
.d2 a.d2-kpi:hover .t{text-decoration:underline;text-underline-offset:3px}
.d2 .d2-kpi .n{display:block;font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.d2 .d2-kpi .n.is-prob{color:var(--s-prob)}.d2 .d2-kpi .n.is-warn{color:var(--s-warn)}.d2 .d2-kpi .n.is-done{color:var(--s-done)}
.d2 .d2-kpi .t{display:block;font-size:13.5px;font-weight:650;margin-top:2px}
.d2 .d2-kpi .s{display:block;font-size:12.5px;color:var(--muted)}
@media(max-width:699.98px){.d2 .d2-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:14px 16px}.d2 .d2-kpi .n{font-size:24px}}
/* Status-Chip: Wort + Punkt in der Statusfarbe (nie nur Farbe) */
.d2 .d2-st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;line-height:1.5;padding:1px 9px;border-radius:999px;background:var(--surface-3);color:var(--muted);white-space:nowrap}
.d2 .d2-st::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.d2 .d2-st.is-done{background:var(--s-done-soft);color:var(--s-done)}
.d2 .d2-st.is-run{background:var(--s-run-soft);color:var(--s-run)}
.d2 .d2-st.is-wait{background:var(--surface-3);color:var(--muted)}
.d2 .d2-st.is-warn{background:var(--s-warn-soft);color:var(--s-warn)}
.d2 .d2-st.is-prob{background:var(--s-prob-soft);color:var(--s-prob)}
/* rote Fahne mit Anzahl: NUR offene Probleme, führt ins Problem-Center */
html.d2 .d2-flag,html.d2 a.d2-flag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--s-prob);background:var(--s-prob-soft);padding:2px 8px;border-radius:999px;
 text-decoration:none;white-space:nowrap}
.d2 .d2-flag svg{width:12px;height:12px}
.d2 a.d2-flag:hover{text-decoration:underline}
/* Fortschrittsbalken (oben an einer Karte oder frei): grau = noch nicht gestartet, blau = läuft, blau gedämpft = unterbrochen, grün = fertig */
.d2 .d2-bar{display:block;height:5px;background:var(--s-todo-soft);overflow:hidden}
.d2 .d2-bar>i{display:block;height:100%;background:var(--s-todo)}
.d2 .d2-bar.is-done>i{background:var(--s-done)}
.d2 .d2-bar.is-run>i{background:var(--s-run)}
.d2 .d2-bar.is-pause>i{background:var(--s-run);opacity:.45}
/* Legende */
.d2 .d2-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}
.d2 .d2-legend i{display:inline-block;width:18px;height:5px;border-radius:3px;vertical-align:middle;margin-right:6px;background:var(--s-todo)}
.d2 .d2-legend i.is-done{background:var(--s-done)}.d2 .d2-legend i.is-run{background:var(--s-run)}.d2 .d2-legend i.is-wait{background:var(--s-todo)}
.d2 .d2-legend i.is-prob{background:var(--s-prob)}.d2 .d2-legend i.is-warn{background:var(--s-warn)}
/* Filter-Chips (z. B. Personen am Handy) */
.d2 .d2-chips{display:flex;gap:6px;flex-wrap:wrap}
.d2 .d2-chip{font:inherit;font-size:13px;font-weight:600;border:0;min-height:32px;padding:6px 12px;border-radius:999px;background:var(--surface-2);color:var(--ink);cursor:pointer}
.d2 .d2-chip[aria-pressed=true]{background:var(--navy-bg);color:var(--on-navy)}
.d2.dk .d2-chip[aria-pressed=true]{background:var(--primary);color:#fff}
@media(pointer:coarse){.d2 .d2-chip{min-height:44px}}
/* Tabelle: ruhig, Linien nur zwischen Zeilen, Zahlen rechts */
.d2 .d2-table{width:100%;border-collapse:collapse;font-size:14px}
.d2 .d2-table th{font-size:12.5px;font-weight:650;color:var(--muted);text-align:left;padding:8px;border-bottom:1px solid var(--line-2);background:none}
.d2 .d2-table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.d2 .d2-table tr:last-child td{border-bottom:0}
.d2 .d2-table :is(th,td).num{text-align:right}

/* ================================================================ 7 Bewegung reduzieren */
@media(prefers-reduced-motion:reduce){
 .d2 *,.d2 *::before,.d2 *::after{animation:none!important;transition:none!important}
 .d2 .btn:active{transform:none}
}