/* ================= Gestaltungssystem (Runde 7 D, 21.10.2026) =================
   Alle Grundwerte stehen hier – spätere Abschnitte setzen keine eigenen Grundfarben mehr (sie wurden hierher gezogen).
   Schrift:  Seitentitel --fs-titel (24 px) · Abschnitt/Kartentitel --fs-abschnitt · Text 1rem · klein --fs-klein · Kennzeichen --fs-mini.
             Grundschrift 15 px am Rechner, 16 px am Telefon (html font-size weiter unten).
   Abstände: 4/8/12/16/24/32 (--sp-1 … --sp-6); die älteren Namen --s1 … --s3 (8/16/24) bleiben gültig.
   Radien:   Feld, Knopf, Menüeintrag 8 · Karte, Menü 12 · Blatt, Dialog 16 · Pille rund.
   Schatten: Karten kaum (--shadow-sm), Menüs und Blätter deutlich (--shadow-lg) – Tiefe nur, wo etwas über dem Inhalt liegt.
   Farbrollen: Primär Klarblau (ein gefüllter Knopf je Seite) · Akzent Klarblau („hier bin ich“, Fokus, Verweise) · Mint nur als Schmuck
             (Zeichen, Illustrationen, nie für Text) · Erfolg · Warnung ·
             Fehler · neutral – je als Text/Fläche-Paar (--st-…) mit mindestens 4,5:1, hell und dunkel.
   Seitenleiste: eigene Rollen (--sb-…), hell auf hellem Grund, im Dunkelmodus eine Stufe über dem Seitengrund.
   Runde 12 W (02.11.2026, „workes – Work Easy“): helleres, freundlicheres Design. Klarblau #0a58ca statt Navy und Indigo:
   ein Ton für Knöpfe, Verweise und Auswahl, 6,4:1 auf Weiß (Indigo hatte 6,3:1), dazu Mint #7cf0d9 aus dem Zeichen als Schmuck.
   Blau steht für Verlässlichkeit bei Geld und Rechnungen, wirkt aber leichter als Navy; die Statusfarben (offen, bezahlt,
   überfällig …) bleiben unverändert, damit ihre Bedeutung bleibt. --navy ist in der Anwendung jetzt die Primärfarbe
   (gefüllte Knöpfe, aktive Pillen, Schritte); auf der Website bleibt es die Tinte der Überschriften (site.css). */
:root{
  --navy:#14213d;--navy-700:#1f3a63;--navy-800:#0d1830;--navy-50:#eef3fa;--navy-100:#d8e3f1;
  --primary:#0a58ca;--primary-700:#0847a6;--primary-800:#073a87;--primary-50:#eef5ff;--primary-100:#d9e8ff;--mint:#7cf0d9;--mint-600:#2dd4bf;
  --akzent:#2a74e6;--akzent-600:#0a58ca;--akzent-700:#0847a6;--akzent-50:#eef5ff;--akzent-100:#dbe9ff;
  --bg:#f5f7fb;--panel:#fff;--line:#e4e8ee;--line-strong:#cfd7e2;--text:#172033;--muted:#55616f;--muted-2:#66727f;
  --green:#1a9a66;--green-50:#e5f6ee;--red:#c93c3c;--red-50:#fdeaea;--amber:#c47d06;--amber-50:#fff4dc;--gray-50:#eef1f5;--gray-600:#5c6572;
  --grad-brand:linear-gradient(135deg,#073a87 0%,#0847a6 45%,#0a58ca 100%);--grad-accent:linear-gradient(135deg,#2a74e6,#5b95f5);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --fs-titel:1.6rem;--fs-abschnitt:1.075rem;--fs-klein:.8125rem;--fs-mini:.75rem;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --s1:8px;--s2:16px;--s3:24px;--pad:20px;--feld-h:40px;
  --radius-sm:10px;--radius:16px;--radius-lg:20px;--radius-pill:999px;
  /* Runde 15 D (03.11.2026, „zu eckig und altmodisch“): runde Karten mit weichem Schatten statt harter Rahmen, Felder als ruhige graue
     Fläche, Pillen-Knöpfe, mehr Luft. Feld- und Knopfränder bleiben bei 3:1 (WCAG 1.4.11); Farbtöne je Hauptpunkt nur für Menü-Zeichen. */
  --radius-feld:12px;--radius-karte:18px;--radius-knopf:999px;--luft:26px;
  --karte-rand:rgba(20,45,90,.07);--karte-linie:#e9edf3;--shadow-karte:0 1px 2px rgba(20,45,90,.04),0 6px 20px -8px rgba(20,45,90,.10);
  --feld-bg:#f3f6fa;--feld-bg-ruhig:#eceff4;--feld-rand:#848c98;--feld-rand-hover:#6b7584;
  --knopf2-bg:#edf3fe;--knopf2-bg-hover:#e0ebfd;--knopf2-rand:#5f8bd0;--knopf2-text:#0847a6;
  --f-blau:#0a58ca;--f-indigo:#4f46e5;--f-violett:#7c3aed;--f-tuerkis:#0d9488;--f-gruen:#16a34a;--f-orange:#ea580c;--f-rosa:#db2777;--f-schiefer:#475569;--sb-f-anteil:13%;
  /* Weiche, leicht bläuliche Schatten (Runde 12 W): Tiefe ohne grauen Schleier. */
  --shadow-xs:0 1px 2px rgba(20,45,90,.05);
  --shadow-sm:0 1px 2px rgba(20,45,90,.04),0 2px 6px rgba(20,45,90,.04);
  --shadow:0 1px 3px rgba(20,45,90,.07),0 4px 12px -6px rgba(20,45,90,.06);
  --shadow-md:0 6px 18px -4px rgba(20,45,90,.10),0 2px 6px -2px rgba(20,45,90,.05);
  --shadow-lg:0 18px 44px -10px rgba(20,45,90,.20),0 4px 12px -4px rgba(20,45,90,.07);
  --ring:0 0 0 3px rgba(42,116,230,.35);
  --t-fast:140ms;--t-normal:200ms;--t-slow:300ms;--ease:cubic-bezier(.2,.8,.3,1);
  --sidebar:252px;--topbar-h:64px;
  /* Status (Text auf Fläche): Entwurf neutral · offen blau · teilbezahlt/angefragt gelb · bezahlt grün · überfällig rot · Kennzeichen indigo */
  --st-offen:#1d4ed8;--st-offen-bg:#e8effd;--st-ok:#047857;--st-ok-bg:#e3f5ec;--st-warn:#92400e;--st-warn-bg:#fef3c7;
  --st-err:#b42318;--st-err-bg:#fde8e7;--st-neutral:#4b5563;--st-neutral-bg:#eef0f3;--st-akzent:#4338ca;--st-akzent-bg:#eef0fe;
  /* Seitenleiste */
  --sb-bg:#fdfdff;--sb-line:#e8ecf2;--sb-text:#3a4454;--sb-strong:#172033;--sb-muted:#636d7c;--sb-icon:#6b7584;
  --sb-hover:#f0f4fb;--sb-active-bg:#e6f0ff;--sb-active-text:#0847a6;--sb-active-icon:#0a58ca;--sb-kachel:#fff;--sb-fokus:#0a58ca;
  --sb-brand-blatt:#0a58ca;--sb-brand-linie:#fff;--sb-brand-linie-o:.92;--sb-brand-akzent:#0a58ca;
}
/* Nur die Anwendung: Rahmen von Feldern, Knöpfen und Filtern mit 3:1 (WCAG 1.4.11) auf Weiß und auf dem Seitengrund, Nebentext dunkler.
   Die Website (site.css) behält die helleren Grundwerte von oben. */
body.chrome-app{--muted:#556070;--muted-2:#646e7d;--line-strong:#848c98;--akzent-text:#0a58ca;--gut-text:#137a50;--red:#b93333;--green:#137a50;
  /* Runde 12 W: In der Anwendung ist „navy“ die Primärrolle – gefüllte Knöpfe, aktive Pillen, Schritte, KI-Knopf – jetzt Klarblau. */
  --navy:#0a58ca;--navy-700:#0847a6;--navy-800:#073a87;--navy-50:#eef5ff;--navy-100:#d9e8ff}
@media (max-width:900px),(pointer:coarse){:root{--feld-h:44px}}
:root[data-theme=dark]{
  --bg:#0d1422;--panel:#151d2e;--line:#243044;--line-strong:#31405a;--text:#e6ebf3;--muted:#9aa7b8;--muted-2:#8593a6;
  --navy-50:#17263f;--navy-100:#223a5e;--akzent-50:#16243f;--akzent-100:#213a63;--primary-50:#16243f;--primary-100:#213a63;--gray-50:#1b2537;--gray-600:#b4bfcd;
  --green-50:#12301f;--red-50:#3a1c1c;--amber-50:#3a2c12;--red:#f08a8a;
  --shadow-xs:0 1px 2px rgba(0,0,0,.28);--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow:0 1px 3px rgba(0,0,0,.42);
  --shadow-md:0 6px 16px -4px rgba(0,0,0,.5);--shadow-lg:0 16px 40px -8px rgba(0,0,0,.6),0 4px 10px -4px rgba(0,0,0,.4);
  --st-offen:#9cc2ff;--st-offen-bg:#1b2740;--st-ok:#8fe0b5;--st-ok-bg:#12301f;--st-warn:#f3c777;--st-warn-bg:#3a2c12;
  --st-err:#f3a7a7;--st-err-bg:#3a1c1c;--st-neutral:#b4bfcd;--st-neutral-bg:#1b2537;--st-akzent:#c7d2fe;--st-akzent-bg:#232a4d;
  --sb-bg:#111a29;--sb-line:#223047;--sb-text:#c9d2df;--sb-strong:#eef2f8;--sb-muted:#8b97a8;--sb-icon:#93a0b3;
  --sb-hover:rgba(255,255,255,.05);--sb-active-bg:rgba(94,158,247,.17);--sb-active-text:#dbe9ff;--sb-active-icon:#8ec1ff;--sb-kachel:rgba(255,255,255,.04);--sb-fokus:#8ec1ff;
  --sb-brand-blatt:#8fc4ff;--sb-brand-linie:#12406e;--sb-brand-linie-o:.55;--sb-brand-akzent:#8ec1ff;
  --karte-rand:rgba(160,180,210,.10);--karte-linie:#243044;--shadow-karte:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.65);
  --feld-bg:#101827;--feld-bg-ruhig:#141c2b;--feld-rand:#66778f;--feld-rand-hover:#8593a6;
  --knopf2-bg:#17284a;--knopf2-bg-hover:#1d3260;--knopf2-rand:#5a7fb8;--knopf2-text:#d4e4ff;
  --f-blau:#8ec1ff;--f-indigo:#a5b4fc;--f-violett:#c4b5fd;--f-tuerkis:#5eead4;--f-gruen:#86efac;--f-orange:#fdba74;--f-rosa:#f9a8d4;--f-schiefer:#cbd5e1;--sb-f-anteil:22%;
  color-scheme:dark;
}
:root[data-theme=dark] body.chrome-app{--muted:#a3b0c1;--muted-2:#93a1b4;--line-strong:#66778f;--akzent-text:#8ec1ff;--gut-text:#8fe0b5;--red:#f08a8a;--green:#1a9a66;--navy-50:#17263f;--navy-100:#223a5e}
*{box-sizing:border-box}
html{font-size:93.75%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--navy-700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.25}
h1{font-size:1.6rem}h2{font-size:1.15rem}h3{font-size:1.05rem}
small,.muted{color:var(--muted)}
.muted-2{color:var(--muted-2)}
.ico{width:18px;height:18px;flex:none;vertical-align:-3px}
.ico-xs{width:13px;height:13px}
.ico-big{width:44px;height:44px;color:var(--muted-2)}
.inline{display:inline}
.right{text-align:end}.center{text-align:center}.nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}
/* Zahlen der Arbeitsflaeche laufen tabellarisch: Betraege, Summen und Kennzahlen stehen dann
   untereinander. Auf Segoe UI ist das wirkungslos (dort sind die Ziffern ohnehin gleich breit,
   gemessen 8,625px fuer 1 und 0), auf SF Pro unter macOS und iOS nicht – dort wandern die
   Nachkommastellen heute von Zeile zu Zeile. Geprueft: "font:inherit" an Knopf und Feld gibt die
   Angabe weiter, und nirgends in der Datei steht ein font-variant-numeric:normal, das sie
   zuruecknimmt. Die oeffentliche Seite bleibt aussen vor, sie hat ihre eigene Regel. */
body.chrome-app,body.chrome-bare{font-variant-numeric:tabular-nums}
.mt{margin-top:1rem}.mb{margin-bottom:1rem}.mt-2{margin-top:2rem}
.hidden{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 12px;border-radius:var(--radius-sm);z-index:999}
.skip:focus{left:8px}
/* Nur fuer Screenreader – clip statt Verschieben, damit RTL nichts spiegeln muss */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}

/* ---------- Marke ---------- */
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1.15rem;color:var(--text);text-decoration:none!important;letter-spacing:-.02em}
.brand-name b{color:var(--akzent);font-weight:700}
.brand-mark{display:inline-grid;place-items:center;flex:none}
.brand-side{display:flex;align-items:center;min-height:var(--topbar-h);padding:0 20px;color:#fff;border-bottom:1px solid rgba(255,255,255,.10)}
.brand-big{justify-content:center;padding:0 0 20px;font-size:1.6rem}
.brand-big .brand-mark svg{width:36px;height:36px}

/* ---------- App-Rahmen ---------- */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{background:var(--navy);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.nav{padding:4px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.nav-group{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.45);padding:14px 10px 4px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);color:rgba(255,255,255,.82);font-weight:500;text-decoration:none!important;border-inline-start:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff;border-inline-start-color:var(--akzent);font-weight:600}
.nav-item .ico{width:19px;height:19px;opacity:.9}
.nav-count{margin-inline-start:auto;background:var(--red);color:#fff;font-size:.72rem;padding:1px 7px;border-radius:99px;font-weight:700}
.sidebar-foot{padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.1)}
.plan-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(42,116,230,.18);color:#c6ddff;font-size:.8rem;padding:5px 10px;border-radius:99px;font-weight:600}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:10px;padding:0 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;min-height:var(--topbar-h)}
.topbar .lbl{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.company-switch summary{font-weight:600}
.gsearch{position:relative;flex:1;max-width:340px;min-width:120px}
/* [type=search] muss mit: die allgemeine Feldregel weiter unten hat dieselbe Genauigkeit, steht später und setzte den Innenabstand zurück. Die Lupe lag dadurch auf dem Wort "Suchen", und das Feld war zwei Pixel höher als die übrigen Bedienelemente der Kopfleiste. */
.gsearch input[type=search]{padding-inline-start:36px;padding-top:8px;padding-bottom:8px;font-size:.88rem;background:#f5f7fa}
.gsearch .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-2);width:16px;height:16px}
/* Dieselbe Suche im Seitenkopf, nur schmaler und ohne den grauen Grund der Kopfleiste */
.gsearch-page{flex:0 1 300px;max-width:300px;min-width:180px}
.gsearch-page input[type=search]{background:var(--panel)}
.notif summary{position:relative}
.notif-count{position:absolute;top:2px;right:2px;background:var(--red);color:#fff;font-size:.72rem;min-width:16px;height:16px;padding:0 4px;border-radius:99px;display:grid;place-items:center;font-weight:700}
.usermenu summary{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px;line-height:1}
.avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy-50);color:var(--navy);font-weight:700;flex:none;font-size:.88rem}
.burger{display:none}
.backdrop{display:none}
.content{padding:24px 24px 56px;max-width:1320px;width:100%}
.content-narrow{max-width:920px}
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head .topbar-title{flex:1;min-width:200px}
.subtitle{color:var(--muted);font-size:.88rem;margin-top:4px;max-width:75ch}
.page-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* flex-wrap: Auf schmalen Geraeten passten Text und Knoepfe eines Hinweisbandes nicht nebeneinander
   und schoben die Seite seitlich hinaus. Umbrechen ist hier besser als quetschen. */
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.88rem;border:1px solid transparent}
.banner-demo{background:var(--akzent-50);border-color:var(--akzent-100);color:var(--akzent-600)}
.banner-warn{background:var(--amber-50);border-color:#f3dfae;color:#7a5200}
.banner a{font-weight:600}

/* ---------- Bare (Anmelden) ---------- */
.bare{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.bare-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 34px;width:100%;max-width:460px}
.bare-box.wide{max-width:680px}
.bare-box h2{margin-bottom:4px;font-size:1.15rem}
.bare-box .field{margin-bottom:14px}
.bare-box .btn-primary.btn-block{padding:11px}

/* ---------- Flash ---------- */
.flash{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.88rem;border:1px solid transparent}
.flash span{flex:1;display:flex;align-items:center;gap:8px}
.flash-success{background:var(--green-50);color:#0f6b46;border-color:#bfe8d3}
.flash-error{background:var(--red-50);color:#9b2626;border-color:#f5c6c6}
.flash-info{background:var(--navy-50);color:#1f3c66;border-color:var(--navy-100)}
.flash-x{background:none;border:0;font-size:1.15rem;color:inherit;cursor:pointer;opacity:.6;padding:0 4px}
.flash-x:hover{opacity:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--panel);color:var(--text);font:inherit;font-weight:500;font-size:.88rem;cursor:pointer;text-decoration:none!important;white-space:nowrap;line-height:1.2;transition:background .12s,border-color .12s}
.btn:hover{background:var(--gray-50)}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
.btn-accent{background:var(--akzent);border-color:var(--akzent);color:#fff}
.btn-accent:hover{background:var(--akzent-600);border-color:var(--akzent-600)}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{background:#15804f}
.btn-danger{color:var(--red);border-color:#f0c4c4}
.btn-danger:hover{background:var(--red-50)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--gray-600)}
.btn-ghost:hover{background:var(--gray-50);color:var(--text)}
.btn-sm{padding:4px 12px;font-size:.8rem}
.btn-sm .ico{width:15px;height:15px}
.btn-icon{padding:8px}
.btn-lg{padding:12px 20px;font-size:.95rem}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.btn-block{width:100%;justify-content:center}
.dd{position:relative;display:inline-block}
.dd summary{list-style:none;cursor:pointer}
.dd summary::-webkit-details-marker{display:none}
.dd-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;z-index:30;display:flex;flex-direction:column}
/* min-width schlaegt max-width: Mit festen 340px war das Menue auf einem 320px-Bildschirm breiter
   als das Fenster, und die max-width von 92vw kam gar nicht zum Zug. min() nimmt den kleineren Wert. */
.dd-wide{min-width:min(340px,92vw);max-width:92vw}
.company-switch .dd-menu{left:0;right:auto}
.dd-menu form{display:block}
.dd-menu .btn,.dd-menu .dd-item{display:flex;width:100%;justify-content:flex-start;border:0;border-radius:var(--radius-sm);background:none;padding:8px 12px;font-weight:500;color:var(--text);text-align:start;gap:8px;align-items:center}
.dd-menu .btn:hover,.dd-menu .dd-item:hover{background:var(--gray-50);text-decoration:none}
.dd-menu .btn.is-current{background:var(--akzent-50)}
.dd-menu .btn-danger{color:var(--red)}
.dd-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.dd-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.dd-head small{display:block;font-weight:400}
.dd-empty{padding:16px 12px;color:var(--muted);font-size:.88rem}
.notif-item{flex-direction:column;align-items:flex-start!important;gap:2px!important;font-size:.88rem;white-space:normal}
.notif-item.unread{background:var(--akzent-50)}
.notif-item small{color:var(--muted)}

/* ---------- Karten / Raster ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h2{flex:1}
.card-body{padding:20px}
.card-body.tight{padding:0}
.card-foot{padding:16px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-side{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.kpi .label{font-size:.8rem;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
.kpi .value{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:.8rem;color:var(--muted)}
.kpi.warn .value{color:var(--red)}.kpi.good .value{color:var(--green)}.kpi.primary .value{color:var(--navy)}
.kpi-link{position:absolute;inset:0}

/* ---------- Tabellen ---------- */
.table-wrap{overflow-x:auto}
table.table{width:100%;border-collapse:collapse;font-size:.95rem}
.table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:start;padding:12px 16px;border-bottom:1px solid var(--line-strong);font-weight:600;white-space:nowrap;background:#f8fafc}
.table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.table th:first-child,.table td:first-child{padding-inline-start:20px}
.table th:last-child,.table td:last-child{padding-inline-end:20px}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#f8fafd}
.table tr.row-link{cursor:pointer}
.table .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.table .actions{white-space:nowrap;text-align:end}
.table .actions .btn{margin-inline-start:4px}
.table tfoot td{font-weight:600;background:#f8fafc;border-top:1px solid var(--line-strong)}
.table .sub{display:block;font-size:.8rem;color:var(--muted)}
/* Eine Zusatzzeile, die warnt: ueberfaellige Betraege sollen sich vom Rest abheben. */
.table .sub.sub-warn{color:var(--red);font-weight:600}
/* Was in weniger als einer Woche endgueltig verschwindet, hebt sich ab. */
.table tr.pk-bald td{background:var(--amber-50)}
/* Zusatzzeile in einer Beschreibungsliste. Ohne diese Regel lief sie ohne Abstand hinter den
   Wert – aus „unbegrenzt“ und „2 Konten“ wurde „unbegrenzt2 Konten“. */
.dl .sub{display:block;font-size:.8rem;font-weight:400;color:var(--muted);margin-top:2px}
.table a.strong{color:var(--text);font-weight:600}
.table-sm td,.table-sm th{padding:8px 12px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:600;line-height:1.3;white-space:nowrap;background:var(--gray-50);color:var(--gray-600)}
.badge.s-entwurf{background:var(--gray-50);color:var(--gray-600)}
.badge.s-offen{background:var(--navy-50);color:var(--navy)}
.badge.s-teilbezahlt{background:var(--amber-50);color:#9a6400}
.badge.s-bezahlt,.badge.s-angenommen,.badge.s-erledigt{background:var(--green-50);color:#0f6b46}
.badge.s-ueberfaellig,.badge.s-abgelehnt{background:var(--red-50);color:#9b2626}
.badge.s-storniert{background:var(--gray-50);color:var(--muted);text-decoration:line-through}
.badge.b-neutral{background:var(--gray-50)}.badge.b-blue{background:var(--navy-50);color:var(--navy)}.badge.b-teal{background:var(--akzent-50);color:var(--akzent-600)}
.badge.b-green{background:var(--green-50);color:#0f6b46}.badge.b-red{background:var(--red-50);color:#9b2626}.badge.b-amber{background:var(--amber-50);color:#9a6400}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.field label{font-size:.8rem;font-weight:600;color:var(--gray-600)}
/* Kleiner Hinweistext – auch neben Schaltflaechen, nicht nur unter einem Feld */
.help{font-size:.8rem;color:var(--muted)}
.field.check{flex-direction:row;align-items:center;gap:8px}
/* Ohne flex:none schrumpft das Kaestchen neben einem langen Text mit – auf der
   Registrierungsseite blieben davon 13 Pixel uebrig. */
.field.check input[type=checkbox],.field.check input[type=radio]{flex:none}
.field.check label{font-weight:500;color:var(--text)}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=search],input[type=tel],input[type=url],input[type=color],select,textarea{width:100%;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font:inherit;font-size:.95rem;color:var(--text);background:#fff;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--akzent);box-shadow:var(--ring)}
input[readonly]{background:#f7f8fa;color:var(--muted)}
input[type=color]{padding:2px;height:38px;width:60px}
input[type=file]{font-size:.88rem}
textarea{min-height:84px;resize:vertical;line-height:1.45}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-inline-end:32px}
.input-group{display:flex;align-items:stretch}
.input-group input{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.input-group .addon{display:flex;align-items:center;padding:0 12px;border:1px solid var(--line-strong);border-inline-start:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#f7f8fa;color:var(--muted);font-size:.88rem;white-space:nowrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid .full{grid-column:1/-1}
.form-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.form-actions .spacer{flex:1}
.hint{display:inline-flex;color:var(--muted-2);vertical-align:middle}
/* Auf den Kennzahl-Kacheln liegt ein unsichtbarer Verweis ueber der ganzen Karte. Ohne eigene
   Malschicht fing er auch das Fragezeichen ab – die Erklaerung war nicht zu oeffnen. */
.kpi .hint{position:relative;z-index:1}
.hint:hover{color:var(--akzent-600)}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .search{position:relative;flex:1;min-width:200px;max-width:380px}
.toolbar .search input{padding-inline-start:36px}
.toolbar .search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.toolbar select{width:auto;min-width:140px}
.pills{display:flex;gap:4px;flex-wrap:wrap}
.pill{padding:8px 12px;border-radius:99px;font-size:.88rem;font-weight:500;color:var(--gray-600);background:var(--panel);border:1px solid var(--line);text-decoration:none!important}
.pill:hover{background:var(--gray-50)}
.pill.active{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Zahl an einem Filterreiter: sagt vor dem Klick, ob dahinter etwas liegt. */
.pill-count{display:inline-block;margin-inline-start:5px;padding:0 5px;min-width:16px;text-align:center;border-radius:99px;background:var(--gray-50);color:var(--muted);font-size:.72rem;font-weight:700;line-height:1.5}
/* Heller als die Pille ergab 4,02:1 – unter den 4,5, die kleine fette Schrift braucht.
   Dunkler statt heller: 22 % Schwarz ueber #0a58ca ergibt #3d36b2, weiss darauf 8,5:1. */
.pill.active .pill-count{background:rgba(0,0,0,.22);color:#fff}
/* Gespeicherte Filter. Der Name und das Entfernen sitzen in einem Chip nebeneinander, damit klar
   ist, dass das Kreuz zu genau diesem Filter gehoert. */
.saved-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-8px 0 16px}
.saved-filters .chip{display:inline-flex;align-items:center;border-radius:99px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.saved-filters .chip>a{display:inline-flex;align-items:center;gap:5px;padding:5px 4px 5px 11px;font-size:.88rem;font-weight:500;color:var(--gray-600);text-decoration:none!important}
.saved-filters .chip:hover{border-color:var(--line-strong)}
.saved-filters .chip.active{background:var(--akzent-50);border-color:var(--akzent)}
.saved-filters .chip.active>a{color:var(--text)}
.saved-filters .chip-x{background:none;border:0;padding:5px 9px 5px 5px;color:var(--muted-2);cursor:pointer;line-height:0}
.saved-filters .chip-x:hover{color:var(--red)}
.saved-filters .chip-add>summary{list-style:none}
.saved-filters .chip-add>summary::-webkit-details-marker{display:none}
/* Elf Reiter passen nicht auf jeden Bildschirm. Statt eines grauen Systembalkens, der 16 Pixel Hoehe
   frisst und trotzdem uebersehen wird, blendet die Kante aus, solange in dieser Richtung noch Reiter
   stehen. Welche Seite ausblendet, setzt app.js ueber data-ovf. */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.tabs::-webkit-scrollbar{height:0;width:0}
/* Zwoelf Reiter passen in keine Zeile. Waagerecht scrollen versteckt die Haelfte davon – in der
   Verwaltung bricht die Leiste deshalb um, statt den Rest hinter dem Rand zu lassen. */
.tabs.tabs-wrap{flex-wrap:wrap;overflow-x:visible;-webkit-mask-image:none;mask-image:none;row-gap:0}
/* Trennt in der Verwaltung den taeglichen Betrieb von den Einstellungen der Plattform */
.tab.tab-cut{margin-inline-start:12px;border-inline-start:1px solid var(--line);padding-inline-start:20px}
.tabs>.hint{align-self:center;margin-inline-start:-4px;margin-inline-end:4px}
.tabs[data-ovf=end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.tabs[data-ovf=start]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.tabs[data-ovf=both]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
@media (prefers-reduced-motion:reduce){.tabs{scroll-behavior:auto}}
.tab{padding:12px 16px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none!important;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--navy);border-color:var(--akzent)}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty h3{margin:12px 0 6px;color:var(--text)}
.empty p{margin:0 auto 16px;max-width:75ch}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;font-size:.95rem}
.dl dt{color:var(--muted);font-weight:500}
/* Lange Adressen und Schluessel muessen umbrechen duerfen. Ohne min-width:0 kann eine Gitterspalte
 nicht unter ihre kleinste Inhaltsbreite; die Seite bekam davon auf dem Handy eine Ueberbreite. */
.dl dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.notice{background:var(--amber-50);border:1px solid #f3dfae;color:#7a5200;border-radius:10px;padding:12px 16px;font-size:.88rem}
.notice-blue{background:var(--navy-50);border-color:var(--navy-100);color:#1f3c66}
.notice-teal{background:var(--akzent-50);border-color:var(--akzent-100);color:var(--akzent-600)}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--gray-50);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.8rem}
.explain{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px dashed var(--line-strong);border-radius:10px;padding:12px 16px;font-size:.88rem;color:var(--muted);margin-bottom:16px}
.explain .ico{color:var(--akzent-600);margin-top:2px}
.explain b{color:var(--text)}
/* Zeilenlaenge: ein Erklaertext ueber die ganze Inhaltsbreite (1320 px) ist kaum zu lesen. */
.explain>span{max-width:75ch}

/* ---------- Beleg-Editor ---------- */
.pos-table{width:100%;min-width:900px;border-collapse:collapse;font-size:.88rem}
.pos-table td:nth-child(2),.pos-table th:nth-child(2){min-width:260px}
.pos-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 12px;text-align:start;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.pos-table th.c-menge,.pos-table th.c-preis,.pos-table th.c-rabatt{text-align:end}
.pos-table td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.pos-table input,.pos-table select,.pos-table textarea{padding:8px;font-size:.88rem}
.pos-table textarea{min-height:0;height:56px;margin-top:8px;font-size:.8rem}
.pos-table .num input{text-align:end}
.pos-table .c-nr{width:44px;color:var(--muted);text-align:center;font-weight:600}@media (min-width:761px){.pos-table td.c-nr{padding-top:16px}}
.pos-table .c-menge{width:90px}.pos-table .c-einheit{width:110px}.pos-table .c-preis{width:120px}.pos-table .c-rabatt{width:80px}.pos-table .c-ust{width:90px}
.pos-table .c-summe{width:120px;text-align:end;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}@media (min-width:761px){.pos-table td.c-summe{padding-top:16px}}
.pos-table .c-tools{width:96px;white-space:nowrap;padding-top:8px}
.pos-table .c-tools .btn{padding:5px}
.ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);max-height:260px;overflow:auto;margin-top:4px;display:none}
.ac-list.open{display:block}
.ac-item{padding:8px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;font-size:.88rem}
.ac-item:hover,.ac-item.hl{background:var(--akzent-50)}
.ac-item small{color:var(--muted)}.ac-item b{font-weight:600}
.ac-empty{padding:10px 12px;color:var(--muted);font-size:.88rem}
.totals{margin-inline-start:auto;width:100%;max-width:380px;font-size:.95rem}
.totals .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.totals .row.grand{font-weight:700;font-size:1.15rem;border-bottom:0;border-top:2px solid var(--text);margin-top:4px;padding-top:10px}
/* Die rechte Spalte (Nummer, Datum, Fristen, Rabatt, Sprache, Vertrag) hat die meisten Felder, die linke
   nur Kunde, Anschrift, Mail und Betreff: die breitere Spalte gehoert dahin, wo mehr drinsteht. */
.editor-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px}
.sticky-bar{position:sticky;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:12px 0;margin:0 -24px -56px;padding-inline-start:24px;padding-inline-end:24px;display:flex;gap:8px;align-items:center;z-index:15;flex-wrap:wrap}
/* Umbricht auf schmalen Geräten: ohne Umbruch schob die Importzeile des Bankabgleichs die
   ganze Seite bei 320 px auf 510 px Breite. */
.range{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.range>input,.range .input-group{flex:1;min-width:0}
.range-sep{color:var(--muted);font-size:.8rem;white-space:nowrap}
/* Die Schnellerfassung in der Liste der offenen Posten. Auf dem Rechner haelt sie ihre Breite,
   darunter nicht: Als feste Angabe im Element schob sie die Seite auf dem Telefon hinaus, und
   aus dem Stilblatt war sie nicht zu erreichen. */
.zahl-schnell{min-width:360px}
@media (max-width:900px){.zahl-schnell{min-width:0}}
.quick{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.quick .btn{padding:4px 8px;font-size:.72rem;border-radius:6px;font-weight:500}

/* ---------- Beleg-Detail ---------- */
.doc-hero .amount{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.doc-hero .meta{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:.88rem;margin-top:8px}
.progress{height:8px;background:var(--gray-50);border-radius:99px;overflow:hidden;margin:8px 0}
.progress i{display:block;height:100%;background:var(--green);border-radius:99px}
.timeline{list-style:none;margin:0;padding:0;font-size:.88rem}
.timeline li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);align-items:center}
.timeline li:last-child{border-bottom:0}
.timeline .t{color:var(--muted);min-width:82px;font-variant-numeric:tabular-nums}
.doc-preview{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 32px;font-size:.95rem}
.doc-preview .pv-items{width:100%;border-collapse:collapse;margin:16px 0}
.doc-preview .pv-items th{text-align:start;font-size:.72rem;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:6px 4px}
.doc-preview .pv-items td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.doc-preview .pv-items .num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-preview .desc{color:var(--muted);font-size:.8rem;white-space:pre-line}
/* Die Positionstabelle behaelt ihre Spaltenbreiten (Betraege sollen nicht umbrechen) und
   scrollt dafuer auf schmalen Geraeten in sich, statt die Seite breiter zu machen. */
.doc-preview .pv-scroll{overflow-x:auto}
@media (max-width:520px){.doc-preview{padding:20px 16px}}
.steps{display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem;margin-bottom:16px}
.step{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:var(--gray-50);color:var(--muted)}
.step.done{background:var(--green-50);color:#0f6b46}
/* Dunkelgruen auf dunkelgruen ergab 2,2:1 – derselbe helle Ton wie bei den Statusmarken. */
:root[data-theme=dark] .step.done{color:#8fe0b5}
.step.now{background:var(--navy);color:#fff}
.chart{width:100%;height:auto;display:block}
/* Die zweite Skala am rechten Rand gilt nur dem Telefon (siehe Diagramm im Abschnitt Responsive). */
.chart text.achse-r{display:none}
.legend{display:flex;gap:16px;font-size:.8rem;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:99px;margin-inline-end:6px;vertical-align:-1px}
.logo-preview{max-height:90px;max-width:260px;border:1px solid var(--line);padding:8px;border-radius:var(--radius-sm);background:#fff}
.file-link{display:inline-flex;align-items:center;gap:6px}
.tasks{list-style:none;margin:0;padding:0}
.tasks li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.88rem}
.tasks li:last-child{border-bottom:0}
.tasks li span{flex:1}
.tasks li .ico{color:var(--akzent-600)}
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);font-size:.88rem}
.checks li:last-child{border-bottom:0}
.checks li>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.checks li small{color:var(--muted)}
.check-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none}
.checks li.ok .check-ico{background:var(--green-50);color:var(--green)}
.checks li.warn .check-ico{background:var(--red-50);color:var(--red)}
.codes{display:grid;grid-template-columns:repeat(4,max-content);gap:8px;margin-top:10px}
.codes .kbd{font-size:.95rem;padding:4px 12px;background:#fff}
.qr{border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px;background:#fff}
.layout-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.layout-opt{border:2px solid var(--line);border-radius:var(--radius);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;position:relative}
.layout-opt:has(input:checked){border-color:var(--akzent);background:var(--akzent-50)}
.layout-opt input{position:absolute;opacity:0}
.layout-opt b{font-size:.95rem}.layout-opt small{color:var(--muted);font-size:.8rem}
.layout-opt .btn{align-self:flex-start;margin-top:4px}
.layout-thumb{display:block;height:90px;border-radius:6px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.layout-thumb i{position:absolute;left:10%;right:10%;height:8px;border-radius:2px;background:#e3e7ee}
.layout-thumb i:nth-child(1){top:14px;width:30%;background:var(--navy)}
.layout-thumb i:nth-child(2){top:40px;background:var(--navy);opacity:.9}
.layout-thumb i:nth-child(3){top:56px;height:20px;background:#f0f2f5}
.layout-thumb-modern i:nth-child(1){top:0;left:0;right:0;width:auto;height:22px;border-radius:0}
.layout-thumb-modern i:nth-child(2){top:44px;height:2px}
.layout-thumb-minimal i:nth-child(1){background:#172033;height:6px}
.layout-thumb-minimal i:nth-child(2){background:transparent;border-bottom:1px solid #172033;height:0;border-radius:0}
/* Zugang & Paket: der Kopf der Kundenseite. Eine grosse Aussage statt sieben grauer Zeilen –
   Paketname und Preis lesbar, ein Satz in ganzen Worten, die Einzelheiten als Kacheln daneben. */
/* Kundenlink: die Seite, die der Kunde des Kunden sieht. Der Betrag und der Satz dazu sind die
   ganze Nachricht – alles andere steht daneben oder darunter. */
.beleg-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:start}
.beleg-betrag{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:10px 0 0;color:var(--navy)}
.beleg-zusatz{margin:4px 0 0;font-size:.8rem;color:var(--muted)}
.beleg-satz{margin:12px 0 0;font-size:.95rem;line-height:1.6}
.beleg-qr{text-align:center}
.beleg-qr .muted{font-size:.8rem;margin-top:8px;max-width:170px}
.beleg-bank{border-top:1px solid var(--line)}
.beleg-bank h3{margin:0 0 10px;font-size:.95rem}
.beleg-bank dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0;font-size:.95rem}
.beleg-bank dt{color:var(--muted)}
.beleg-bank dd{margin:0;font-weight:600;overflow-wrap:anywhere}
@media (max-width:700px){.beleg-kopf{grid-template-columns:minmax(0,1fr)}.beleg-qr{text-align:start}}
:root[data-theme=dark] .beleg-betrag{color:#9cc2ff}
/* Einstellungen: eine Kachel je Bereich. Zwoelf Reiter sagen nur, wie etwas heisst – die Kachel
   sagt, was drinsteht und wie es heute aussieht. */
.einst-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.einst-kachel{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);text-decoration:none!important;color:inherit}
.einst-kachel:hover{border-color:var(--akzent)}
.einst-kachel.offen{border-color:#f3dfae;background:var(--amber-50)}
.einst-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--gray-50);color:var(--navy)}
.einst-kachel.offen .einst-ico{background:#fff;color:#9a6400}
.einst-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.einst-text b{font-size:.95rem}
.einst-was{font-size:.8rem;color:var(--muted);line-height:1.45}
/* var(--green) ergibt auf Weiss nur 3,6:1; derselbe dunklere Ton wie bei .btn-success:hover. */
.einst-stand{font-size:.8rem;font-weight:600;color:#15804f;display:flex;align-items:center;gap:5px;margin-top:4px}
.einst-kachel.offen .einst-stand{color:#9a6400}
.einst-stand.neutral{color:var(--muted);font-weight:500}
.einst-stand.neutral .ico{color:var(--muted-2)}
:root[data-theme=dark] .einst-ico{color:#9cc2ff}
:root[data-theme=dark] .einst-stand{color:#8fe0b5}
:root[data-theme=dark] .einst-kachel.offen{border-color:#5a4520}
:root[data-theme=dark] .einst-kachel.offen .einst-ico{background:var(--panel);color:#e0b563}
:root[data-theme=dark] .einst-kachel.offen .einst-stand{color:#e0b563}
.zugang-kopf{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
.zugang-paket{font-size:1.6rem;font-weight:700;color:var(--navy);line-height:1.15;margin:10px 0 2px}
.zugang-preis{font-size:1.15rem;font-weight:600;color:var(--text)}
.zugang-preis small{font-weight:400;color:var(--muted);font-size:.8rem;margin-inline-start:4px}
.zugang-satz{margin:12px 0 0;font-size:.95rem;line-height:1.65;color:var(--muted)}
.zugang-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.zugang-fakten{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.zugang-fakten li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;background:var(--gray-50);border-radius:10px;padding:8px 12px}
.zugang-fakten span{color:var(--muted);font-size:.8rem}
.zugang-fakten b{font-weight:600;text-align:end;font-size:.95rem}
/* Die Funktionsliste ist Nachschlagewerk, nicht Einstieg: zugeklappt, zweispaltig, mit Kreuz
   fuer das, was nicht dabei ist. */
/* Eine Karte, die sich auf- und zuklappen laesst. Der Kopf bleibt derselbe, er bekommt nur
   einen Zeiger und traegt den Klick. */
.karte-klapp>summary{cursor:pointer;list-style:none}
.karte-klapp>summary::-webkit-details-marker{display:none}
.karte-klapp>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-3px;flex:none}
.karte-klapp[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.karte-klapp:not([open])>summary{border-bottom:0}
.zugang-mehr{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.zugang-mehr>summary{cursor:pointer;font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:8px;list-style:none}
.zugang-mehr>summary::-webkit-details-marker{display:none}
.zugang-mehr>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-inline-start:2px;margin-top:-3px}
.zugang-mehr[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.zugang-funktionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px;margin-top:10px}
.zugang-funktionen .checklist li.aus{color:var(--muted)}
.zugang-funktionen .checklist li.aus .ico{color:var(--line-strong)}
@media (max-width:860px){.zugang-kopf{grid-template-columns:minmax(0,1fr);gap:18px}.zugang-funktionen{grid-template-columns:minmax(0,1fr)}}
.plan-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{border:2px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;display:flex;flex-direction:column;gap:10px;position:relative}
.plan.current{border-color:var(--akzent)}
.plan .price{font-size:1.9rem;font-weight:700;letter-spacing:-.02em}
.plan .price small{font-size:.8rem;font-weight:500;color:var(--muted)}
.plan ul{margin:0;padding-inline-start:20px;color:var(--gray-600);font-size:.88rem;flex:1}
.plan .btn{justify-content:center}
/* Weiss auf Tuerkis waren 2,5:1. Dunkelblau auf demselben Tuerkis kommt auf 6,4:1 und
   entspricht dem Zeichen im Benutzermenue. */
.plan-tag{position:absolute;top:-11px;right:16px;background:var(--akzent);color:var(--navy);font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px}
/* Aktionspreis: der beworbene Preis gross, der regulaere klein und durchgestrichen daneben. */
.plan .plan-chip-aktion{background:rgba(42,116,230,.14);color:var(--akzent-600);align-self:flex-start}
.plan .price-alt{margin:-4px 0 0;font-size:.95rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.plan .price-alt s{color:var(--gray-600)}
.plan .price-hint{margin:0;font-size:.8rem;color:var(--muted)}

/* Eigener Bestätigungsdialog */
.px-dialog{border:0;border-radius:var(--radius);padding:24px;max-width:460px;width:calc(100% - 32px);box-shadow:var(--shadow-lg);color:var(--text);font:inherit}
.px-dialog::backdrop{background:rgba(15,42,74,.45)}
.px-dialog-msg{font-size:.95rem;line-height:1.5;margin-bottom:20px}
.px-dialog-actions{display:flex;gap:8px;justify-content:flex-end}

/* ---------- Responsive ---------- */
/* Zwischen 901 und 1100 Pixeln kostet die Seitenleiste mehr, als das breitere Fenster
   einbringt. Schmalere Leiste und schmaleres Polster drehen das um: gemessen 724 -> 784 px
   Inhaltsbreite bei 1024 px. Darunter bleibt alles, wie es ist – die Schublade auf dem Tablet
   behaelt ihre 252 px, das Telefon sein 16-px-Polster. */
@media (min-width:901px) and (max-width:1100px){
  /* 224 und nicht 200: Gemessen braucht der laengste deutsche Menuepunkt („Produkte &
     Leistungen") 221 Pixel Leistenbreite, um nicht umzubrechen. Bei 200 brechen zwei Punkte um,
     bei 224 keiner – und die Umkehr ist trotzdem behoben: 745 statt 709 Pixel Inhalt bei
     1024 px, gegen 721 bei 768 px. (Italienisch braeuchte 316 Pixel; „Amministratore della
     piattaforma" bricht schon bei den heutigen 252 um – das ist eine Frage des Wortes, nicht
     der Leiste.) */
  :root{--sidebar:224px}
  .content{padding-inline:20px}
}
@media (max-width:1100px){
  /* minmax(0,1fr) statt 1fr: Eine Spalte darf nie breiter werden als der Platz, den sie hat.
     Mit blossem 1fr wuchs sie auf die Mindestbreite ihres Inhalts – auf dem Dashboard schob die
     Umsatzgrafik die Seite dadurch auf 541 px, obwohl das Fenster nur 320 px breit war. */
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-side{grid-template-columns:minmax(0,1fr)}.editor-head{grid-template-columns:minmax(0,1fr)}.plan-cards{grid-template-columns:minmax(0,1fr)}.layout-pick{grid-template-columns:minmax(0,1fr)}
}
/* Drei Kennzahlen untereinander brauchen 426 Pixel Hoehe, nebeneinander 137. Nur die Kennzahl-
   zeilen, nicht jedes Dreierraster: In der Uebersicht stehen in einem .grid-3 drei Texttafeln,
   die nebeneinander zu schmal wuerden. */
@media (min-width:561px) and (max-width:900px){
  .grid-3:has(>.kpi){grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);z-index:50;transform:translateX(-100%);transition:transform .2s}
  .app.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  .app.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(15,42,74,.4);z-index:45}
  .burger{display:inline-flex}
  .nav-collapse{display:none}
  .topbar{padding:8px 12px;gap:6px}
  .topbar .lbl{display:none}
  .gsearch{max-width:none}
  .content{padding:16px 16px 44px}
  .sticky-bar{margin:0 -16px -44px;padding-inline-start:16px;padding-inline-end:16px}
  /* minmax(0,1fr) statt 1fr: Sonst waechst die Spalte auf die Mindestbreite ihres Inhalts. Im
     Rechnungseditor schob ein Eingabefeld mit Anhaengsel („Tagen") die Seite so 20px hinaus. */
  .grid-2,.grid-3,.form-grid,.form-grid-3{grid-template-columns:minmax(0,1fr)}
  .grid-4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html{font-size:90.625%}
  .codes{grid-template-columns:repeat(2,max-content)}
}
/* Eingabefelder auf Telefon und Tablet.
   Zwei Dinge zugleich: 44 Pixel Hoehe, weil ein Daumen kein Mauszeiger ist, und 16 Pixel
   Schrift, weil Safari bei kleinerer Schrift beim Antippen hineinzoomt – die Seite steht
   danach schief, und man muss sie von Hand zurueckziehen. Die Grenze liegt bei 900 Pixeln,
   dort schaltet auch die Grundschrift um; bis 700 galt sie nur fuer das Telefon, und auf dem
   Tablet standen die Felder wieder bei 13,3 Pixeln. */
@media (max-width:900px){
  input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
  input[type=password],input[type=search],input:not([type]),select,textarea{min-height:44px;font-size:16px}
  /* Die beiden Suchfelder haben eigene, schwerere Regeln – hier noch einmal mit gleichem Gewicht. */
  .gsearch input[type=search],.cmdk-head input[type=search]{font-size:16px}
  textarea{min-height:72px}
  .btn{min-height:44px}
  .btn-sm{min-height:44px}
  .pos-table input,.pos-table select{font-size:16px;min-height:44px}
  .pos-table textarea{min-height:44px;height:44px;font-size:16px}
  /* Kaestchen und Schalter ebenso: 16 Pixel trifft niemand verlaesslich. */
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
}

/* Das Diagramm auf dem Telefon.
   Sein Rahmen ist 760 Pixel breit; auf 375 Pixeln Bildschirm bleiben davon 92 Pixel Hoehe –
   Saeulen von zwei Millimetern, aus denen niemand etwas abliest. Es behaelt deshalb eine
   Mindestbreite und laesst sich im Behaelter schieben; 520 Pixel ergeben 157 Pixel Hoehe.
   Der Behaelter steht beim Aufruf am rechten Ende: Der laufende Monat ist der, um den es geht
   (app.js). Die Schrift in den Einheiten der Grafik gleicht die Verkleinerung aus. */
@media (max-width:700px){
  .chart-wrap{overflow-x:auto;overscroll-behavior-x:contain}
  /* Solange links aeltere Monate verdeckt sind, zeigt ein Verlauf es an (data-ovf aus app.js). */
  .chart-wrap[data-ovf=start],.chart-wrap[data-ovf=both]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
  .chart-wrap[data-ovf=end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .chart{min-width:520px}
  .chart text{font-size:16px}
  .chart text.achse-r{display:inline}
}

/* Vier Kennzahlen untereinander sind auf dem Telefon vier Bildschirme weit auseinander.
   Nebeneinander stehen sie beim Aufschlagen zusammen – dafuer eine Zahl, die in die halbe
   Breite passt, und weniger Rand. */
@media (max-width:700px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi .sub{font-size:.72rem}
}

/* Auf dem Telefon steht zuerst, was zu tun ist: Heute wichtig, faellige Rechnungen,
   Schnellzugriff. Der Rueckblick – Diagramm und zuletzt bearbeitete Belege – kommt danach. */
/* Bis zur vollen Breite gilt dasselbe wie auf dem Telefon: erst was zu tun ist, dann der
   Rueckblick. Zwischen 701 und 1100 Pixeln stand die Handlungsspalte sonst erst nach einer
   ganzen Bildschirmhoehe Diagramm. */
@media (max-width:1100px){.dash-grid>:nth-child(2){order:-1}}

/* Zwoelf Reiter brauchen umgebrochen fuenf Zeilen – ein Drittel des Bildschirms, bevor der
   Inhalt anfaengt. Auf dem Telefon bleibt eine Zeile, die sich schieben laesst; das
   Verlaufsbild am Rand zeigt, dass dort noch etwas kommt. In jeden Bereich fuehren ohnehin
   auch die Kacheln im Ueberblick. */
@media (max-width:700px){
  .tabs.tabs-wrap{flex-wrap:nowrap;overflow-x:auto}
  .tab.tab-cut{margin-inline-start:6px;padding-inline-start:12px}
}

/* ---------- Leiste am unteren Rand (nur Telefon) ----------
   Oben in der Kopfleiste liegen zehn Bedienelemente. Wer das Gerät mit einer Hand hält, kommt
   dort nicht hin. Unten stehen die fünf Wege, die im Alltag zählen. Die Leiste liegt über allem,
   deshalb bekommt der Inhalt unten Platz – sonst verdeckt sie die letzte Zeile jeder Liste. */
.tabbar{display:none}
@media (max-width:700px){
  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;
    position:fixed;inset-inline:0;bottom:0;z-index:40;
    background:var(--panel);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar .tab-i{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 4px 8px;min-height:56px;border:0;background:none;cursor:pointer;
    color:var(--muted);font:inherit;font-size:.72rem;text-decoration:none;line-height:1.1;
  }
  .tabbar .tab-i .ico{width:21px;height:21px}
  .tabbar .tab-i.active{color:var(--text);font-weight:600}
  .tabbar .tab-i.active .ico{color:var(--akzent)}
  /* Der Hauptweg sticht hervor: eine neue Rechnung ist das, was am häufigsten ansteht. */
  .tabbar .tab-neu{
    align-self:center;width:52px;height:52px;min-height:0;border-radius:50%;
    background:var(--navy);color:#fff;box-shadow:var(--shadow-lg);margin-top:-14px;padding:0;
  }
  .tabbar .tab-neu .ico{width:24px;height:24px}
  /* Platz für die Leiste: sonst steht die letzte Zeile jeder Liste hinter ihr. */
  .content{padding-bottom:88px}
  .sticky-bar{bottom:calc(56px + env(safe-area-inset-bottom))}
  /* Im Belegeditor ist die Leiste im Weg: Dort zaehlt nur die eine Aufgabe, und unten stehen
     schon die Knoepfe zum Speichern. Zwei Leisten uebereinander nehmen auf 844 Pixeln ein
     Sechstel des Bildschirms. */
  main:has(.pos-table) + .tabbar{display:none}
  main.content:has(.pos-table){padding-bottom:20px}
  main:has(.pos-table) .sticky-bar{bottom:0}
}

/* Die Knopfleiste im Belegeditor.
   Fuenf Knoepfe untereinander nehmen auf dem Telefon 173 von 812 Pixeln. Der Hauptknopf steht
   allein in der ersten Zeile; darunter das Speichern des Entwurfs und die drei Nebenwege, die
   dort nur ihr Zeichen zeigen. Ihr Name steht im aria-label weiter – eine Vorlesehilfe haette
   sonst nur „Schaltflaeche“ zu melden. */
@media (max-width:700px){
  .sticky-bar{gap:8px;padding:10px 0}
  .sticky-bar .btn-primary{flex:1 0 100%;order:-1;justify-content:center}
  .sticky-bar button[name=stay]{flex:1 1 auto}
  .sticky-bar #previewToggle .lbl,.sticky-bar .btn-ghost .lbl,.sticky-bar .btn-danger .lbl{display:none}
}
/* Was nur auf breiten Geraeten Sinn ergibt: Zusatzangaben und Nebenwege in Baendern.
   Auf dem Telefon bleibt die Aussage und der eine Weg, der weiterhilft. */
@media (max-width:700px){.nur-breit{display:none}}
/* ---------- Listen auf dem Telefon ----------
   Eine Tabelle mit acht Spalten wird auf 390 Pixeln zur Schiebearbeit: sichtbar sind Nummer,
   halber Kundenname und ein Datum, der Betrag liegt rechts außerhalb. Unter 700 px wird aus jeder
   Zeile eine Karte. Die erste Zelle ist die Überschrift, die übrigen nennen ihre Beschriftung
   selbst – ohne Kopfzeile wüsste sonst niemand, ob ein Datum das Belegdatum oder die Fälligkeit
   ist.

   Das gilt nur für Listen, die ihre Rollen mitbringen (z-titel und die übrigen z-Klassen). Ohne
   sie weiß das Stilblatt nicht, was Überschrift, was Betrag und was entbehrlich ist: Eine
   Auswertung oder eine Tabelle in der Verwaltung würde zu einem Raster aus zwei Spalten ohne
   Beschriftung, und ihre Knöpfe wären weg. Die bleibt eine Tabelle und lässt sich schieben.
   Kennt ein Browser :has() nicht, bleiben alle Listen Tabellen – das ist der alte Zustand. */
@media (max-width:700px){
  .table-wrap:has(td.z-titel){overflow-x:visible}
  .table:has(td.z-titel){display:block;width:100%}
  .table:has(td.z-titel) thead{display:none}
  .table:has(td.z-titel) tbody{display:block}
  .table:has(td.z-titel) tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
    gap:3px 12px;position:relative;padding:12px 14px 12px;
    border-bottom:1px solid var(--line);
  }
  .table:has(td.z-titel) tbody tr:last-child{border-bottom:0}
  .table:has(td.z-titel) tbody tr:hover{background:none}
  .table:has(td.z-titel) td{display:block;padding:2px 0;border:0;text-align:start;white-space:normal}
  .table:has(td.z-titel) td.num{text-align:start}
  .table:has(td.z-titel) td.z-status,.table:has(td.z-titel) td.z-betrag{text-align:end}
  .table:has(td.z-titel) td.c-sel{padding:0}
  .table:has(td.z-titel) td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:.8rem}
  /* Vier Zeilen je Datensatz: Nummer und Status, Kunde, Frist und Betrag, Aktionen.
     Was auf dem Telefon niemand braucht, bleibt weg – es steht auf der Belegseite. */
  .table td.z-titel{grid-column:1;grid-row:1;font-size:.95rem;font-weight:600}
  .table td.z-status{grid-column:2;grid-row:1;text-align:end}
  /* Platz fuer das Auswahlkaestchen nur dort, wo es eines gibt – sonst bricht die Nummer
     ohne Grund um. */
  .table tbody tr:has(td.c-sel) td.z-titel,
  .table tbody tr:has(td.c-sel) td.z-status{padding-inline-end:26px}
  .table td.z-kunde{grid-column:1/3;grid-row:2;color:var(--muted)}
  .table td.z-meta{grid-column:1;grid-row:3;font-size:.88rem;color:var(--muted)}
  .table td.z-betrag{grid-column:2;grid-row:3;text-align:end;font-size:1.15rem;font-weight:600}
  .table td.z-offen{grid-column:1;grid-row:4;font-size:.88rem}
  /* „Offen: –“ ist keine Auskunft, sondern eine leere Zeile mit Text. Ist nichts offen,
     steht dort ein Gedankenstrich – dann faellt die Zeile auf dem Telefon weg. */
  .table td.z-offen:has(.muted){display:none}
  /* Die Knoepfe je Zeile fallen weg: Auf dem Telefon ist die ganze Zeile der Knopf, und zwei
     Symbole von 20 Pixeln trifft niemand mit dem Daumen. Alles, was sie koennen, steht auf
     der Belegseite – einen Fingertipp entfernt. Wo die Ueberschrift kein Link ist, bleiben sie
     stehen: Sonst waere die Zeile auf dem Telefon eine Sackgasse. */
  .table tbody tr:has(td.z-titel a) td.actions{display:none}
  /* Ausnahme: Listen, deren Knoepfe es nirgends sonst gibt – Pausieren, Jetzt erstellen, Mahnung
     erstellen. Dort stehen sie als fuenfte Zeile der Karte, mit Abstand fuer den Daumen. */
  .table.table-aktionen tbody tr:has(td.z-titel a) td.actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
  .table.table-aktionen td.actions .inline{display:contents}
  .table.table-aktionen td.actions .btn{margin:0;min-height:44px}
  /* Mit :has() davor: Die allgemeine Zellenregel oben traegt den Zusatz und waere sonst staerker. */
  .table:has(td.z-titel) td.z-weg{display:none}
  /* Auswahlkästchen und Aktionen an den Rand, nicht in den Textfluss. */
  .table td.c-sel{position:absolute;top:12px;inset-inline-end:12px;width:auto;padding:0}
  .table:has(td.z-titel) td.actions{grid-column:1/3;grid-row:5;text-align:end}
  .table td.actions .btn{margin:0 0 0 6px}
  .table:has(td.z-titel) td:empty{display:none}
  .table:has(td.z-titel) tfoot{display:block}
  .table:has(td.z-titel) tfoot tr{display:flex;justify-content:space-between;gap:10px;padding:10px 14px}
  .table:has(td.z-titel) tfoot td{padding:0}
}
/* ---------- Mittlere Breiten: zwei Spalten weichen ----------
   Die Rechnungsliste braucht 1068 Pixel. Sichtbar sind 707 (1024 px Fenster), 963 (1280) und
   1049 (1366) – erst ab rund 1385 px passt sie. Bis dahin lagen Brutto, Offen und die
   Zeilenaktionen rechts ausserhalb; dass man schieben kann, zeigt seit dem 2. Oktober ein
   Schatten, aber schieben muss man trotzdem. Datum und Netto stehen auf der Belegseite und
   weichen deshalb hier – nur in Listen, die ihre Kopfzellen selbst dafuer gekennzeichnet haben.
   „screen": Auf Papier (A4 sind rund 794 Pixel) gehoeren alle Spalten aufs Blatt. */
@media screen and (min-width:701px) and (max-width:1384px){
  .table:has(thead th.z-weg) .z-weg{display:none}
  /* 8 statt 14 Pixel: Die acht Spalten sparen damit 96 Pixel – genau die, die bei 768 und
     1024 px noch fehlten (gemessen 744 gegen 719 bzw. 760 gegen 743). */
  .table:has(thead th.z-weg) th,.table:has(thead th.z-weg) td{padding-inline:8px}
}

/* ---------- Positionseditor auf dem Telefon ----------
   Neun Spalten und 900 Pixel Mindestbreite bedeuten auf einem 390-Pixel-Gerät: seitlich schieben,
   um eine Menge einzutragen. Genau daran scheitert das Rechnungschreiben unterwegs.

   Unter 760 px wird aus jeder Zeile eine Karte: Bezeichnung über die ganze Breite, darunter zwei
   Reihen mit je drei Feldern. Die Beschriftungen stehen in data-l am Feld – ohne Kopfzeile wüsste
   sonst niemand, ob dort Menge, Rabatt oder Steuersatz steht. */
@media (max-width:760px){
  .pos-table{min-width:0;display:block;font-size:.88rem}
  .pos-table thead{display:none}
  .pos-table tbody{display:block;counter-reset:pos}
  .pos-table tr.pos-row{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 10px;align-items:end;
    counter-increment:pos;border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:12px;margin-bottom:12px;background:var(--panel);
  }
  .pos-table td{display:block;padding:0;border:0;vertical-align:baseline}
  /* Die Breiten der Desktop-Spalten (90 bis 120 Pixel, Bezeichnung mindestens 260) gelten sonst weiter –
     ein Gitterelement mit fester Breite dehnt sich nicht auf seinen Bereich, sondern ragt hinaus.
     tr.pos-row td wiegt (0,2,2) und schlaegt jede dieser Regeln, auch die spaetere fuer c-tools. */
  .pos-table tr.pos-row td{width:auto;min-width:0}
  .pos-table td[data-l]::before{
    content:attr(data-l);display:block;font-size:.72rem;text-transform:uppercase;
    letter-spacing:.05em;color:var(--muted);margin-bottom:4px;font-weight:600;
  }
  /* Nummer links, Werkzeuge rechts – beide über die ganze Zeile gelegt, jede an ihren Rand gerückt.
     Mit festen Spalten (1/4 und 4/7) bekamen die Werkzeuge 150 Pixel für 220 und liefen aus der Karte. */
  .pos-table .c-nr{grid-column:1/-1;grid-row:1;justify-self:start;width:auto;padding:0;display:flex;align-items:center;gap:6px;
    color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
  /* Ohne Zeigegerät gibt es kein Überfahren: Der Griff muss von sich aus sichtbar sein. */
  .pos-table .pos-griff{opacity:1;margin-top:0}
  .pos-table .c-tools{grid-column:1/-1;grid-row:1;justify-self:end;width:auto;padding:0;display:flex;align-items:center;gap:0;white-space:nowrap}
  .pos-table .c-tools .btn{padding:8px;min-width:44px;min-height:44px;justify-content:center}
  /* Hoch, Runter, Entfernen bleiben sichtbar; Duplizieren und „Als Produkt speichern“ stehen im Menü. */
  .pos-table .c-tools>[data-dup],.pos-table .c-tools>[data-produkt]{display:none}
  .pos-table .pos-mehr{display:inline-block}
  .pos-table .pos-mehr .dd-menu{min-width:220px;white-space:normal}
  .pos-table .pos-griff{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .pos-table .c-bez{grid-column:1/7;grid-row:2}
  .pos-table .c-menge{grid-column:1/3;grid-row:3}
  .pos-table .c-einheit{grid-column:3/5;grid-row:3}
  .pos-table .c-preis{grid-column:5/7;grid-row:3}
  .pos-table .c-rabatt{grid-column:1/3;grid-row:4}
  .pos-table .c-ust{grid-column:3/5;grid-row:4}
  .pos-table .c-summe{grid-column:5/7;grid-row:4;width:auto;padding:0;text-align:end;font-size:1.15rem;font-weight:600}
  /* 16 Pixel, nicht 1rem: Unter 16 zoomt Safari auf dem iPhone beim Antippen hinein. */
  .pos-table input,.pos-table select{width:100%;padding:10px;font-size:16px;min-height:44px}
  .pos-table .num input{text-align:end}
  .pos-table textarea{height:44px;min-height:44px;margin-top:8px;font-size:16px}
  /* Die Karte trägt schon einen Rahmen; ein zweiter darum herum wirkt gestapelt. */
  .card-body.tight.table-wrap{padding:12px 12px 0}
}
@media (max-width:600px){.page-actions .btn span.lbl{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Sprachumschalter ---------- */
.lang-switch summary{gap:6px}
.lang-switch .dd-menu{min-width:170px}
/* Untermenue im Benutzermenue: eine Zeile, die sich oeffnet. Ohne sie standen zwoelf Sprachen
   fest im Menue und schoben das Abmelden unter den Bildrand. */
.dd-sub>summary{list-style:none;cursor:pointer}
.dd-sub>summary::-webkit-details-marker{display:none}
.dd-sub>summary small{margin-inline-start:auto}
.dd-sub>summary .ico-xs{margin-inline-start:2px;transition:transform var(--t-fast) var(--ease)}
.dd-sub[open]>summary .ico-xs{transform:rotate(180deg)}
.dd-sub[open]>summary{background:var(--gray-50)}
/* Zwoelf Sprachen passen nicht auf jeden Bildschirm: die Liste bekommt eine Hoehe und scrollt selbst,
   damit das Menue darunter erreichbar bleibt. */
.dd-sub-menu{max-height:236px;overflow-y:auto;margin:2px 0 2px 10px;padding-inline-start:6px;border-inline-start:2px solid var(--line)}
@media (prefers-reduced-motion:reduce){.dd-sub>summary .ico-xs{transition:none}}
.dd-menu a.dd-item.is-current,.dd-menu .btn.is-current{background:var(--akzent-50,#eef5ff);font-weight:600}
.bare-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.bare-top .brand-big{flex:1;justify-content:flex-start}
.lang-bare summary{padding:6px 8px}
@media (max-width:900px){.site-cta .lang-switch{align-self:flex-start}}

/* Erweiterungen: Kalkulation (intern) */
.card-intern{border-inline-start:4px solid var(--akzent-600)}
.kalk-box{background:var(--gray-50);border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:8px}
.kalk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kalk-grid>div{display:flex;flex-direction:column;gap:2px}
.kalk-grid .lbl{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:4px}
.kalk-grid b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.kalk-grid .sub{font-size:.8rem;color:var(--muted)}
.kalk-rabatt{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;font-size:.88rem}
.kalk-rabatt label{font-weight:600}
.neg{color:var(--red)}
[hidden]{display:none!important}

/* Georgisch: keine Großschreibung (Mtavruli) in Überschriften */
:lang(ka) th,:lang(ka) .nav-group,:lang(ka) .site-footer h4,:lang(ka) .doc-preview .pv-items th{text-transform:none}

/* ---------- Zugang ---------- */
.banner-info{background:var(--navy-50);border-color:var(--navy-100);color:#1f3c66}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:.95rem}
.checklist .ico{color:var(--akzent-600)}

/* ---------- Design 2: Verläufe, weichere Flächen, ruhigere Seitenleiste ---------- */
/* Grundwerte: im Gestaltungssystem am Dateianfang (Runde 7 D). */
body.chrome-app{background:var(--bg)}
.brand-name{letter-spacing:-.025em}
/* Die Marke traegt den Akzent als Farbe, nicht als Verlauf im Text; siehe die Logo-Regel weiter unten. */
.brand-mark svg{display:block;filter:drop-shadow(0 2px 4px rgba(11,32,56,.25))}
.brand-side{padding:20px 20px 14px}
.brand-side .brand-name{color:#fff}
.sidebar{background:#0c2239}
/* Der Lichtschein ueber der Seitenleiste ist in beiden Breiten auf display:none gesetzt; die Flaeche bleibt eine Flaeche. */
.sidebar>*{position:relative}
.nav-item{border-inline-start:0;padding:8px 12px;border-radius:10px;color:rgba(255,255,255,.78)}
.nav-item .ico{opacity:.7;transition:opacity .12s,color .12s}
.nav-item:hover .ico,.nav-item.active .ico{opacity:1;color:#c6ddff}
.nav-item.active{background:rgba(255,255,255,.12);box-shadow:inset 3px 0 0 var(--akzent);color:#fff}
.nav-group{color:rgba(255,255,255,.55)}
.sidebar-foot{border-top-color:rgba(255,255,255,.08)}
.plan-chip{background:rgba(255,255,255,.07);color:#c6ddff;border:1px solid rgba(42,116,230,.35)}
.topbar{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:rgba(228,233,240,.9)}
.gsearch input{background:#eef2f8;border-color:transparent;transition:background .12s,border-color .12s}
.gsearch input:focus{background:#fff;border-color:var(--akzent)}
.avatar{background:var(--navy-50);color:var(--navy)}
/* Kein Akzentstrich unter jeder Seitenueberschrift: Der Akzent soll Bedeutung tragen, nicht jede
   Ueberschrift schmuecken. Design 4 setzt ihn schon auf display:none. */
/* Kartenkoepfe sind flach; dieser kaum sichtbare Verlauf wurde vom spaeteren background:none ohnehin ueberdeckt. */
.kpi{transition:border-color .15s}
/* Die farbige Oberkante der Kennzahlen ist entfallen (Design 4 setzt .kpi::before auf display:none);
   den Status traegt jetzt das Zeichen im Kopf der Kachel. */
.kpi:hover{border-color:var(--line-strong)}
.btn{transition:background .12s,border-color .12s,box-shadow .12s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy);border-color:transparent;box-shadow:var(--shadow-xs)}
.btn-primary:hover{background:var(--grad-brand);filter:brightness(1.1)}
/* Der Akzentknopf ist flach; siehe Design 4 weiter unten. */
.btn-success{background:var(--green);border-color:transparent}
.dd-menu .btn-primary{background:none;box-shadow:none;color:var(--text)}
/* Der Tabellenkopf stand mit #6b7683 auf #f6f8fb bei 4,34:1 und blieb damit unter den 4,5:1, die
   fuer kleine Schrift gefordert sind – bei 11px in Grossbuchstaben faellt das im Alltag auf.
   #626c78 kommt auf 5,02:1 und sieht praktisch gleich aus. */
.table th{background:#f6f8fb;color:#626c78}
.table tbody tr:hover{background:#f3f7fc}
.tabs{gap:6px}
.tab{border-radius:10px 10px 0 0;padding:12px 16px}
.tab:hover{background:rgba(42,116,230,.06)}
/* Der aktive Reiter wird von der Akzentlinie unten markiert, nicht von einer Flaeche (background:none in Design 4). */
.pill.active{background:var(--akzent-600);border-color:var(--akzent-600)}
.badge{font-weight:600}
.empty .ico-big{color:var(--muted-2)}
.flash{box-shadow:var(--shadow-xs)}
.notice{border-radius:var(--radius-sm)}
.bare{background:var(--bg);position:relative;overflow:hidden}
.bare::before,.bare::after{content:"";position:absolute;border-radius:50%;filter:blur(48px);pointer-events:none}
/* Erste Fassung der Farbkreise der Anmeldeseite; sie wird weiter unten vollstaendig neu gesetzt. */
.bare-box{position:relative;z-index:1;border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius);padding:34px 36px}
.bare-box .btn-primary.btn-block{padding:12px;border-radius:var(--radius-sm)}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=search],input[type=tel],input[type=url],select,textarea{transition:border-color .12s,box-shadow .12s,background .12s}
@media (prefers-reduced-motion:reduce){.kpi,.btn,.feature,.plan{transition:none!important}}
/* ---------- Design 2b: Komfort ---------- */
.brand-side .brand-mark svg{width:30px;height:30px}
.brand-side{font-size:1.15rem}
.brand-big .brand-mark svg{width:40px;height:40px}
@keyframes pxy-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.content{animation:pxy-in .22s ease-out}
.flash{transition:opacity .5s,transform .5s,margin .4s,max-height .4s;max-height:200px;overflow:hidden}
.flash.is-fading{opacity:0;transform:translateY(-4px);margin-bottom:0;max-height:0;padding-top:0;padding-bottom:0;border-width:0}
.sidebar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.table tr.row-link:hover td{background:#eef6fb}
.card-head .btn-sm{border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){.content{animation:none}.flash{transition:none}}
/* ---------- Support / Admin ---------- */
.msg-list{list-style:none;margin:0;padding:0}
.msg{padding:14px 20px;border-bottom:1px solid var(--line)}
.msg:last-child{border-bottom:0}
.msg-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.88rem;margin-bottom:4px}
.msg-text{white-space:pre-line;font-size:.95rem}
.msg-reply{margin-top:12px;padding:12px;border-radius:10px;background:var(--akzent-50);border:1px solid var(--akzent-100)}
.msg-admin{background:var(--navy-50)}
.card-admin{border-color:#f3dfae;background:var(--panel)}
.card-admin .card-head{background:none}
.banner .btn{margin-inline-start:auto}
/* ---------- Design 3: Schrift, Anmeldebühne ---------- */
/* Grundwerte: im Gestaltungssystem am Dateianfang (Runde 7 D). */
h1,h2{font-family:var(--font-display)}
.bare{padding:0;display:block}
.bare-stage{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);position:relative;z-index:1}
.bare-aside{position:relative;display:flex;flex-direction:column;justify-content:center;padding:56px 64px;color:#fff;background:linear-gradient(160deg,#073a87 0%,#0847a6 50%,#0a58ca 100%);overflow:hidden}
.bare-aside::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.6px);background-size:22px 22px;opacity:.55;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 92%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 92%)}
/* Kein tuerkiser Lichtkreis auf der Anmeldeflaeche: Tuerkis traegt in dieser Oberflaeche keine
   Bedeutung, und die Flaeche hat mit Verlauf und Punktraster schon zwei Schichten. */
.bare-aside>*{position:relative}
.bare-aside-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.75rem;letter-spacing:-.03em;margin-bottom:30px;font-family:var(--font-display)}
.bare-aside-brand b{color:#c6ddff}
.bare-aside-brand svg{filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.bare-aside h2{font-size:2.1rem;line-height:1.12;letter-spacing:-.03em;margin:0 0 22px;max-width:520px;color:#fff}
.bare-aside ul{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:12px;font-size:.95rem;color:rgba(255,255,255,.88);max-width:520px}
.bare-aside li{display:flex;gap:10px;align-items:flex-start}
.bare-aside li .ico{color:#c6ddff;margin-top:4px;flex:none;width:16px;height:16px}
.bare-aside-foot{font-size:.8rem;color:rgba(255,255,255,.6)}
.bare-box{align-self:center;justify-self:center;margin:40px 24px;width:calc(100% - 48px)}
@media (max-width:900px){.bare-stage{grid-template-columns:1fr;min-height:100vh;align-items:center}.bare-aside{display:none}.bare-box{margin:24px auto}}
/* Bei 393 Pixeln blieben dem Formular nur 271 Pixel (Aussenrand 24+24, Innenabstand 36+36). */
@media (max-width:480px){.bare-box{padding:24px 16px;width:calc(100% - 24px);margin:12px auto}}
/* Logo 4: flache Marke */
.brand-mark svg,.bare-aside-brand svg{filter:none}
.brand-mark{margin-inline-end:1px}
.brand-name{font-family:var(--font-display);font-weight:700}
.brand-name b{background:none;color:var(--akzent);-webkit-text-fill-color:initial}
.brand-side .brand-name b,.mock-brand i{color:#c6ddff}

/* ---------- Komfort ---------- */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-inline-end:40px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;display:inline-flex}
.pw-toggle:hover{color:var(--akzent-600);background:var(--gray-50)}
/* Gemessen 26 x 26 Pixel: Der Knopf liegt im Feld und kann deshalb nicht nach aussen wachsen –
   das Feld ist 44 hoch, also nimmt er die ganze Hoehe und 44 Pixel Breite. */
@media (max-width:900px){.pw-toggle{min-width:44px;min-height:44px;justify-content:center;padding:0}}
.sortlink{color:inherit;text-decoration:none!important;white-space:nowrap}
.sortlink:hover,.sortlink.active{color:var(--navy)}
.c-sel,.table th.c-sel{width:34px;text-align:center}
.c-sel input{width:16px;height:16px;accent-color:var(--akzent)}
.bulk-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border-radius:var(--radius-sm);background:var(--navy-50);border:1px solid var(--navy-100);position:sticky;top:64px;z-index:10}
.bulk-bar b{font-size:1.15rem}
.px-help{max-width:420px}
.px-help h3{margin:0 0 10px}
.px-help table{width:100%;border-collapse:collapse;font-size:.95rem}
.px-help td{padding:6px 4px;border-bottom:1px solid var(--line)}
.px-help td:first-child{width:110px;white-space:nowrap}
#autosaveInfo{white-space:nowrap}
.c-tools .btn{padding:4px}
.pos-table .c-tools{width:126px}
/* Das Menü „Weitere Aktionen“ der Position gibt es nur in der Kartenform des Telefons. */
.pos-mehr{display:none}
/* ---------- Admin: SEO und Besucher ---------- */
.serp{padding:12px 16px;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:var(--panel)}
.serp-url{font-size:.78rem;color:#1a7f3c;word-break:break-all}.serp-title{color:#1a0dab;font-size:1.05rem;font-weight:500;margin:2px 0}.serp-desc{font-size:.86rem;color:#4d5156}
.checks{list-style:none;margin:0;padding:0}.checks li{display:flex;gap:8px;align-items:flex-start;padding:8px 16px;border-bottom:1px solid var(--line);font-size:.88rem}.checks li:last-child{border-bottom:0}.checks li .ico{margin-top:3px;flex:none}.checks li.ok .ico{color:var(--green)}.checks li.warn .ico{color:var(--amber)}
.hours{display:flex;align-items:flex-end;gap:2px;height:60px}.hours i{flex:1;background:var(--akzent);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
/* ---------- Dunkelmodus (App und Anmeldeseiten) ---------- */
/* Rot als Schrift: #c93c3c erreicht auf dunklem Grund nur 3,4:1 und bleibt damit unter den 4,5:1,
   die kleine Schrift braucht; im Menue stand es fast unsichtbar auf rotem Grund. Der hellere Ton
   kommt auf 7:1. Die beiden Zaehler tragen Rot als Flaeche und behalten den kraeftigen Ton –
   sonst stuende weisse Schrift auf hellem Rot. */
:root[data-theme=dark] .nav-count,:root[data-theme=dark] .notif-count{background:#c93c3c;color:#fff}
:root[data-theme=dark] .btn-danger{border-color:#6b3232}
/* Dunkle Grundwerte: im Gestaltungssystem am Dateianfang (Runde 7 D). */
:root[data-theme=dark] body.chrome-app{background:var(--bg)}
:root[data-theme=dark] body.chrome-bare .bare,:root[data-theme=dark] .bare{background:var(--bg)}
:root[data-theme=dark] .bare-box{background:rgba(21,29,46,.96);border-color:var(--line)}
:root[data-theme=dark] .topbar{background:rgba(21,29,46,.9);border-bottom-color:var(--line)}
:root[data-theme=dark] .gsearch input{background:#1b2537}
:root[data-theme=dark] .gsearch input:focus{background:#101827}
:root[data-theme=dark] .card-head{background:none}
:root[data-theme=dark] .table th,:root[data-theme=dark] .table tfoot td{background:none;color:var(--muted)}
:root[data-theme=dark] .table tbody tr:hover,:root[data-theme=dark] .table tr.row-link:hover td{background:#1c283b}
:root[data-theme=dark] input[type=text],:root[data-theme=dark] input[type=number],:root[data-theme=dark] input[type=email],:root[data-theme=dark] input[type=password],:root[data-theme=dark] input[type=date],:root[data-theme=dark] input[type=search],:root[data-theme=dark] input[type=tel],:root[data-theme=dark] input[type=url],:root[data-theme=dark] select,:root[data-theme=dark] textarea{background:#101827;color:var(--text);border-color:var(--line-strong)}
:root[data-theme=dark] input[readonly]{background:#141c2b;color:var(--muted)}
:root[data-theme=dark] .input-group .addon{background:#141c2b;border-color:var(--line-strong)}
:root[data-theme=dark] .btn{background:var(--panel);color:var(--text);border-color:var(--line-strong)}
:root[data-theme=dark] .btn:hover{background:#1c283b}
:root[data-theme=dark] .btn-primary,:root[data-theme=dark] .btn-accent,:root[data-theme=dark] .btn-success{color:#fff}
:root[data-theme=dark] .btn-ghost{background:transparent;border-color:transparent;color:var(--gray-600)}
:root[data-theme=dark] .pill{background:var(--panel);border-color:var(--line-strong);color:var(--gray-600)}
/* Der ausgewaehlte Filter sah im Dunkeln aus wie die uebrigen – die allgemeine Dunkelregel
   wiegt genauso viel wie .pill.active und steht spaeter. */
:root[data-theme=dark] .pill.active{background:var(--akzent-600);border-color:var(--akzent-600);color:#fff}
:root[data-theme=dark] .dd-menu,:root[data-theme=dark] .ac-list,:root[data-theme=dark] .px-dialog{background:var(--panel);border-color:var(--line-strong);color:var(--text)}
:root[data-theme=dark] .dd-menu .btn,:root[data-theme=dark] .dd-menu .dd-item{background:none;color:var(--text)}
:root[data-theme=dark] .dd-menu .btn:hover,:root[data-theme=dark] .dd-menu .dd-item:hover{background:#1c283b}
:root[data-theme=dark] .explain{background:var(--panel);border-color:var(--line-strong)}
/* --akzent-600 (#0a58ca) auf dem dunklen Grund #151d2e ergibt 2,68:1; fuer ein
   bedeutungstragendes Zeichen fordert WCAG 1.4.11 mindestens 3:1. Der helle Indigoton,
   den im Dunkelmodus schon die Fliesstextlinks tragen, kommt auf 8,6:1. */
:root[data-theme=dark] .explain .ico{color:#93c2ff}
:root[data-theme=dark] .notice{background:#3a2c12;border-color:#5a4520;color:#f3d9a4}
:root[data-theme=dark] .notice-blue{background:var(--navy-50);border-color:var(--navy-100);color:#c7d8f2}
:root[data-theme=dark] .notice-teal{background:var(--akzent-50);border-color:var(--akzent-100);color:#c6ddff}
:root[data-theme=dark] .flash-success{background:#12301f;color:#a8e6c4;border-color:#1f4d33}
:root[data-theme=dark] .flash-error{background:#3a1c1c;color:#f3b4b4;border-color:#5a2a2a}
:root[data-theme=dark] .flash-info{background:var(--navy-50);color:#c7d8f2;border-color:var(--navy-100)}
:root[data-theme=dark] .banner-warn{background:#3a2c12;border-color:#5a4520;color:#f3d9a4}
:root[data-theme=dark] .banner-info{background:var(--navy-50);border-color:var(--navy-100);color:#c7d8f2}
:root[data-theme=dark] .banner-demo{background:var(--akzent-50);border-color:var(--akzent-100);color:#c6ddff}
:root[data-theme=dark] .badge.b-teal{color:#c6ddff}
:root[data-theme=dark] .kbd{background:#1b2537;border-color:var(--line-strong);color:var(--text)}
/* Dunkle Fassung des aktiven Reiters: Design 4 setzt auch sie auf background:none. */
:root[data-theme=dark] .kpi,:root[data-theme=dark] .card,:root[data-theme=dark] .card-admin{background:var(--panel)}
:root[data-theme=dark] .kpi.primary .value{color:#9cc2ff}
/* Der Paketname im Kopf der Kundenseite und die Paketkarten: Beide standen im Dunkelmodus
   unsichtbar da – der Name in Marineblau auf dunklem Grund, die Karten weiss mit hellem Text. */
:root[data-theme=dark] .zugang-paket{color:#9cc2ff}
:root[data-theme=dark] .plan{background:var(--panel)}
:root[data-theme=dark] .plan-tag{color:#0d1422}
:root[data-theme=dark] .card-admin{background:var(--panel);border-color:#5a4520}
:root[data-theme=dark] .sticky-bar{background:rgba(21,29,46,.94);border-top-color:var(--line)}
:root[data-theme=dark] .pos-table th{background:none}
:root[data-theme=dark] .msg-reply{background:var(--akzent-50);border-color:var(--akzent-100)}
:root[data-theme=dark] .msg-admin{background:var(--navy-50)}
:root[data-theme=dark] .serp{background:#fff;color:#172033}
:root[data-theme=dark] .bulk-bar{background:var(--navy-50);border-color:var(--navy-100)}
:root[data-theme=dark] .avatar{color:#9cc2ff}
:root[data-theme=dark] .empty h3,:root[data-theme=dark] a.strong{color:var(--text)}
:root[data-theme=dark] a{color:#8fc4ff}
:root[data-theme=dark] .nav-item{color:rgba(255,255,255,.78)}
:root[data-theme=dark] .chart text{fill:var(--muted)}
:root[data-theme=dark] .hours i{opacity:.9}
:root[data-theme=dark] .mock-kpi,:root[data-theme=dark] .mock-row{background:#fff}
/* Rechnungs-Check: Pflichtangabe fehlt */
.checks li.err .ico{color:var(--red)}
.checks li .sub{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}

/* Erste Schritte: erledigte Punkte zurückhaltend darstellen */
.card-start .tasks li.done{color:var(--muted)}
.card-start .tasks li.done .ico{color:var(--green)}

/* ---------- Illustrationen: ein Stil für alle leeren Listen und Erfolgsmomente ---------- */
:root{--illu-paper:#fff;--illu-line:var(--line-strong);--illu-soft:var(--navy-50);--illu-accent:var(--akzent);--illu-ground:rgba(15,42,74,.06)}
:root[data-theme=dark]{--illu-paper:#1b2537;--illu-line:#3a4a63;--illu-soft:#26395a;--illu-accent:var(--akzent);--illu-ground:rgba(0,0,0,.35)}
.illu{width:132px;height:106px;display:block;margin:0 auto 4px}
.illu .p{fill:var(--illu-paper);stroke:var(--illu-line);stroke-width:2.5;stroke-linejoin:round}
.illu .s{fill:var(--illu-soft)}
.illu .a{fill:var(--illu-accent)}
.illu .ao{fill:none;stroke:var(--illu-accent);stroke-width:2.5;stroke-linecap:round}
.illu .l{fill:none;stroke:var(--illu-line);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.illu .r{fill:none;stroke:var(--illu-line);stroke-width:2.5;stroke-linecap:round;opacity:.7}
.illu .c{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.illu .g{fill:var(--illu-ground)}
.empty .illu{margin-bottom:2px}
.empty-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* Kennzahl mit Verlaufslinie und Vergleich zum Vormonat */
.kpi-spark{padding-bottom:18px;overflow:hidden}
/* Die Linie liegt auf der Kartenunterkante statt im Fluss: Sonst ist die Umsatzkachel 30
   Pixel hoeher als ihre Nachbarn, und die Zeile wird insgesamt hoeher. */
.spark{position:absolute;inset-inline:0;bottom:0;width:100%;height:30px;margin:0;display:block}
.spark .sf{fill:var(--akzent);opacity:.10}
.spark .sl{fill:none;stroke:var(--akzent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.trend{display:inline-flex;align-items:center;gap:2px;font-weight:600}
.trend.up{color:var(--green)}.trend.down{color:var(--red)}
.tasks li.urgent .ico{color:var(--red)}

/* ---------- Seitenleiste: eingeklappter Zustand ---------- */
.nav-collapse{display:flex;align-items:center;gap:10px;margin:4px 12px 8px;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:rgba(255,255,255,.6);font:inherit;font-size:.88rem;cursor:pointer;transition:background .15s,color .15s;position:relative}
.nav-collapse:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-collapse .ico{width:18px;height:18px}
/* Nur auf breiten Bildschirmen: Unter 900 Pixeln ist die Leiste Schublade oder Blatt, und ein
   gemerktes „mini“ aus dem Rechner liess dort Beschriftungen, Gruppen und Fusszeile verschwinden. */
@media (min-width:901px){
body.nav-mini{--sidebar:74px}
body.nav-mini .sidebar .brand span,body.nav-mini .nav-item>span,body.nav-mini .nav-group,body.nav-mini .nav-collapse span,body.nav-mini .sidebar-foot{display:none}
body.nav-mini .nav-item{justify-content:center;padding:10px;border-inline-start-width:0;position:relative}
body.nav-mini .nav-item.active{box-shadow:inset 3px 0 0 var(--akzent)}
body.nav-mini .nav-collapse{justify-content:center}
body.nav-mini .nav-collapse .ico{transform:rotate(180deg)}
body.nav-mini .brand-side{justify-content:center;padding-inline-start:0;padding-inline-end:0}
body.nav-mini .nav-count{position:absolute;top:3px;right:6px;margin:0;padding:0 5px;font-size:.72rem}
body.nav-mini .nav-item::after,body.nav-mini .nav-collapse::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.96);background:var(--navy-800);color:#fff;padding:5px 9px;border-radius:6px;font-size:.8rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:60;box-shadow:var(--shadow-lg)}
body.nav-mini .nav-item:focus-visible::after{opacity:1;transform:translateY(-50%) scale(1)}
/* Nur mit Maus: Auf dem Tablet machte das Einblenden beim ersten Tipp daraus ein „Zeigen“, erst der
   zweite Tipp öffnete den Punkt (Safari wertet sichtbar werdende Inhalte als Hover-Menü). */
@media (hover:hover){body.nav-mini .nav-item:hover::after,body.nav-mini .nav-collapse:hover::after{opacity:1;transform:translateY(-50%) scale(1)}}
}
.app{transition:grid-template-columns .18s ease}
@media (prefers-reduced-motion:reduce){.app{transition:none}body.nav-mini .nav-item::after{transition:none}}

/* ---------- Menü „Neu“ ---------- */
.btn-neu{font-weight:600}
.dd-item .kbd-hint{margin-inline-start:auto;font-size:.72rem;color:var(--muted-2);border:1px solid var(--line);border-radius:6px;padding:0 5px}

/* ---------- Befehlssuche ---------- */
.cmdk{position:fixed;inset:0;background:rgba(11,32,56,.45);z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;animation:pxy-in .14s ease}
.cmdk-box{width:min(560px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.cmdk-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cmdk-head .ico{color:var(--muted)}
.cmdk-head input{flex:1;border:0;background:none;font:inherit;font-size:.95rem;color:var(--text);outline:none;padding:0}
.cmdk-list{list-style:none;margin:0;padding:6px;max-height:46vh;overflow:auto}
.cmdk-list li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:.95rem}
.cmdk-list li em{margin-inline-start:auto;font-style:normal;font-size:.72rem;color:var(--muted-2)}
.cmdk-list li.on{background:var(--navy-50)}
:root[data-theme=dark] .cmdk-list li.on{background:var(--navy-100)}
.cmdk-list li.leer{color:var(--muted);cursor:default}
.cmdk-foot{display:flex;gap:16px;align-items:center;padding:8px 16px;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted);flex-wrap:wrap}
body.cmdk-open{overflow:hidden}

/* Tabellen: etwas mehr Luft, ruhigerer Wechsel beim Überfahren */
.table tbody tr{transition:background .12s}
.table .actions{display:flex;gap:2px;justify-content:flex-end;align-items:center}
.row-dd{position:relative}
.row-dd .dd-menu{min-width:210px}
.dd-menu .dd-item.danger,.dd-item.danger{color:var(--red)}
:root[data-theme=dark] .dd-menu .dd-item.danger{color:var(--red)}
.badge .ico-xs{opacity:.85;margin-inline-end:1px}
@media (prefers-reduced-motion:reduce){.table tbody tr{transition:none}}

/* ---------- Meldungen oben rechts ---------- */
.toasts{position:fixed;top:64px;right:16px;z-index:110;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toasts .toast{pointer-events:auto;margin:0;box-shadow:var(--shadow-lg);background:var(--panel);animation:toast-in .22s cubic-bezier(.2,.8,.3,1)}
.toasts .flash-success{background:var(--green-50)}
.toasts .flash-error{background:var(--red-50)}
.toasts .flash-info{background:var(--navy-50)}
@keyframes toast-in{from{opacity:0;transform:translateX(14px) scale(.98)}to{opacity:1;transform:none}}
.toast.is-fading{opacity:0;transform:translateX(14px);max-height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0}
/* Häkchen zeichnet sich kurz */
.check-anim .ring{opacity:.35}
.check-anim .tick{stroke-dasharray:16;stroke-dashoffset:16;animation:tick-draw .34s .06s ease forwards}
@keyframes tick-draw{to{stroke-dashoffset:0}}
@media (max-width:720px){.toasts{top:auto;bottom:12px;right:12px;left:12px;width:auto}}
/* Auf dem Telefon liegt unten die Tab-Leiste; die Meldungen stehen darueber. Hinter der 720px-Regel,
   weil beide gleich schwer wiegen und die spaetere gewinnt. */
@media (max-width:700px){
  /* 76 statt 66 Pixel: Der runde Knopf „Neu“ ragt 14 Pixel über die Leiste und lag sonst unter der Meldung. */
  .toasts{bottom:calc(76px + env(safe-area-inset-bottom))}
  .toasts .toast{padding:10px 12px;gap:8px}
  /* Im Belegeditor gibt es keine Tab-Leiste, dort liegt unten die Speichern-Leiste. */
  main:has(.pos-table) .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.toasts .toast{animation:none}.check-anim .tick{animation:none;stroke-dashoffset:0}}

/* ---------- Dateifeld zum Ablegen ---------- */
.drop{position:relative;border:1.5px dashed var(--line-strong);border-radius:10px;background:var(--gray-50);padding:16px;text-align:center;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--akzent);background:var(--akzent-50)}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-hint{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:.88rem;pointer-events:none}
.drop-hint .ico{color:var(--muted-2)}
.drop-hint b{color:var(--text);font-weight:600}
.drop-file{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.88rem;pointer-events:none}
.drop-file .ico{color:var(--green)}
.drop-file b{font-weight:600}
.drop-file em{font-style:normal;color:var(--muted);margin-inline-start:6px}
.drop.has-file{border-style:solid;border-color:var(--green);background:var(--green-50)}
:root[data-theme=dark] .drop{background:#1b2537}
:root[data-theme=dark] .drop:hover,:root[data-theme=dark] .drop.over{background:var(--akzent-50)}
:root[data-theme=dark] .drop.has-file{background:var(--green-50)}

/* ---------- Schaltfläche arbeitet gerade ---------- */
.btn.is-busy{position:relative;pointer-events:none;opacity:.85}
.btn.is-busy::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;display:inline-block;margin-inline-end:2px;animation:spin .7s linear infinite}
.btn.is-busy .ico{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-busy::before{animation-duration:2s}}

/* ---------- Feine Bewegungen ---------- */
.card{transition:border-color .16s ease}
.dd-menu{animation:pxy-in .13s ease}
input[type=checkbox]{transition:transform .12s ease}
input[type=checkbox]:active{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){.card,.kpi,input[type=checkbox]{transition:none}.dd-menu{animation:none}}

/* ---------- Live-Vorschau im Belegeditor ---------- */
.preview-pane{display:none}
body.with-preview .preview-pane{display:flex;flex-direction:column;position:fixed;top:var(--topbar-h);right:0;bottom:0;width:min(46vw,620px);background:var(--gray-50);border-inline-start:1px solid var(--line);z-index:40}
body.with-preview .content{padding-inline-end:calc(min(46vw,620px) + 20px)}
.preview-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel);font-size:.88rem}
.preview-head .muted{margin-inline-start:auto;font-size:.8rem}
.preview-pane iframe{flex:1;width:100%;border:0;background:#fff}
.preview-note{margin:0;padding:8px 16px;border-top:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:.8rem}
#previewToggle[aria-pressed=true]{background:var(--navy-50);border-color:var(--navy-100);color:var(--navy)}
:root[data-theme=dark] #previewToggle[aria-pressed=true]{background:var(--navy-100);color:#fff}
@media (max-width:1199px){
  body.with-preview .preview-pane{left:0;width:auto;top:var(--topbar-h)}
  body.with-preview .content{padding-inline-end:20px}
}

/* Einklappbare Karten */
details.collapse>summary.card-head{cursor:pointer;list-style:none;user-select:none}
details.collapse>summary.card-head::-webkit-details-marker{display:none}
details.collapse>summary.card-head::after{content:"";width:8px;height:8px;border-inline-end:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);transform:rotate(45deg);margin-inline-start:auto;transition:transform .15s}
details.collapse[open]>summary.card-head::after{transform:rotate(-135deg)}
details.collapse>summary.card-head:hover::after{border-color:var(--text)}
@media (prefers-reduced-motion:reduce){details.collapse>summary.card-head::after{transition:none}}

/* SEO-Bereich: Reiter, Zeichenzähler, Social-Vorschau */
.subtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:-4px 0 16px}
.subtab{border:0;background:none;font:inherit;font-size:.88rem;color:var(--muted);padding:8px 12px;border-bottom:2px solid transparent;cursor:pointer;border-radius:10px 10px 0 0;transition:color .15s,border-color .15s,background .15s}
.subtab:hover{color:var(--text);background:var(--gray-50)}
.subtab.active{color:var(--text);border-bottom-color:var(--akzent);font-weight:600}
.zeichen{font-weight:500;font-size:.72rem;padding:1px 8px;border-radius:99px;margin-inline-start:6px}
.zeichen.gut{background:var(--green-50);color:#0f6b46}
.zeichen.kurz{background:var(--gray-50);color:var(--muted)}
.zeichen.lang{background:var(--amber-50);color:#9a6400}
/* Ohne diese beiden Zeilen stand die dunkle Schrift des Zaehlers im Dunkelmodus auf dunklem Grund. */
:root[data-theme=dark] .zeichen.gut{color:#8fe0b5}
:root[data-theme=dark] .zeichen.lang{color:#f3c777}
.social-preview{display:flex;gap:0;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:420px}
.sp-img{aspect-ratio:1200/630;background:var(--gray-50);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.88rem}
.sp-img img{width:100%;height:100%;object-fit:cover}
.sp-text{padding:10px 12px;background:var(--panel)}
.sp-text small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.sp-text b{display:block;font-size:.95rem;margin:2px 0}
.sp-text span{font-size:.8rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.subtab{transition:none}}

.layout-thumb-elegant i:nth-child(1){top:12px;left:10%;width:44%;background:var(--akzent)}
.layout-thumb-elegant i:nth-child(2){top:38px;height:2px;width:26%;background:var(--akzent)}
.layout-thumb-elegant i:nth-child(3){top:52px;height:16px;background:#f6f8fa}
/* Einrichtung: Schrittanzeige */
.steps-setup{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 10px;padding:0}
.steps-setup li{display:flex;flex-direction:column;gap:1px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);position:relative}
.steps-setup .nr{position:absolute;top:10px;right:12px;width:20px;height:20px;border-radius:50%;background:var(--gray-50);color:var(--muted);display:grid;place-items:center;font-size:.72rem;font-weight:700}
.steps-setup b{font-size:.95rem}
.steps-setup em{font-style:normal;font-size:.8rem;color:var(--muted)}
.steps-setup li.done{border-color:var(--green);background:var(--green-50)}
.steps-setup li.done .nr{background:var(--green);color:#fff}
@media (max-width:640px){.steps-setup{grid-template-columns:1fr}}

/* Anmeldeseiten: ruhige Hintergrundformen, nur angedeutet */
.bare{position:relative;overflow:hidden}
.bare::before,.bare::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
/* Keine Farbkreise hinter dem Anmeldeformular: Die Identitaet traegt die Markenflaeche links,
   die Formularseite bleibt eine ruhige Flaeche. Die leeren Pseudoelemente oben schaden nicht. */
.bare-stage,.bare-box{position:relative;z-index:1}
/* feines Punktraster über der ganzen Fläche */
/* Nur die Markenflaeche links traegt ein Punktraster (.bare-aside::before); ein zweites ueber der
   ganzen Buehne war dieselbe Aussage zweimal. */
/* Die dunklen Fassungen der entfallenen Kreise und des Buehnenrasters sind damit ebenfalls weg. */

/* ---------- Einheitliche Bewegungswerte ---------- */
/* Grundwerte: im Gestaltungssystem am Dateianfang (Runde 7 D). */

/* ---------- Verlauf eines Belegs ---------- */
.tl{list-style:none;margin:0;padding:14px 16px 16px;position:relative}
.tl::before{content:"";position:absolute;left:27px;top:22px;bottom:22px;width:2px;background:var(--line)}
.tl li{display:flex;align-items:flex-start;gap:12px;padding:7px 0;position:relative}
.tl-dot{width:24px;height:24px;border-radius:50%;background:var(--gray-50);color:var(--muted);display:grid;place-items:center;flex:none;z-index:1;border:2px solid var(--panel)}
.tl-ok .tl-dot{background:var(--green-50);color:var(--green)}
.tl-warn .tl-dot{background:var(--amber-50);color:var(--amber)}
.tl-datum{font-size:.8rem;color:var(--muted);min-width:76px;font-variant-numeric:tabular-nums;padding-top:3px}
.tl-text{font-size:.88rem;padding-top:2px}
/* Statuswechsel weich andeuten */
.badge{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
@media (prefers-reduced-motion:reduce){.badge{transition:none}}

/* Positionen umsortieren */
.pos-table .c-nr{position:relative}
.pos-table .c-nr::before{content:attr(data-nr);position:absolute;left:0;right:0;top:16px;color:var(--muted);font-weight:600;font-size:.88rem;pointer-events:none}
/* In der Kartenform des Telefons gehoert die Nummer in den Fluss: absolut gesetzt laege sie
   sonst ueber dem Griff zum Verschieben. */
@media (max-width:760px){
  .pos-table .c-nr{position:static}
  .pos-table .c-nr::before{position:static;inset:auto;font-size:.72rem;letter-spacing:.05em}
}
.pos-griff{opacity:0;background:none;border:0;color:var(--muted-2);cursor:grab;padding:2px 4px;margin-top:32px;border-radius:6px;transition:opacity var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.pos-griff:focus-visible{opacity:1}
/* Mit Maus erscheint der Griff beim Zeigen. Auf Touch-Geräten steht er immer da: Ein Griff, der erst
   beim Antippen der Zeile sichtbar wird, kostete auf iPhone und iPad den ersten Tipp – ins Textfeld
   der Position musste man zweimal tippen. */
@media (hover:hover){.pos-row:hover .pos-griff{opacity:1}}
@media (hover:none){.pos-griff{opacity:.55;touch-action:none}}
.pos-griff:hover{color:var(--text);background:var(--gray-50)}
.pos-griff:active{cursor:grabbing}
.pos-row.zieht{background:var(--navy-50);box-shadow:var(--shadow-lg)}
:root[data-theme=dark] .pos-row.zieht{background:var(--navy-100)}
@media (prefers-reduced-motion:reduce){.pos-griff{transition:none}}

/* Blättern in Listen */
.seiten{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px}
.seiten .is-off{opacity:.45;pointer-events:none}

/* SEO: Hinweise je Seite */
.hinweis{display:flex;align-items:flex-start;gap:4px;font-size:.8rem;margin-bottom:4px;line-height:1.4}
.hinweis.err{color:var(--red)}
.hinweis.warn{color:var(--amber)}
.hinweis .ico{margin-top:2px;flex:none}

/* Belegvorschau bleibt immer heller Druckbogen: Sie zeigt das Blatt, das der Kunde bekommt.
   Ohne diese Insel erbt sie im Dunkelmodus die helle Schriftfarbe und steht dann fast
   unlesbar auf weissem Grund. */
:root[data-theme=dark] .doc-preview{
  --line:#e4e9f0;--line-strong:#c9d2de;--text:#172033;--muted:#55616f;--muted-2:#66727f;
  --navy:#0f2a4a;--navy-700:#163a66;--navy-50:#e9eef5;--navy-100:#d3dde9;--gray-50:#eef1f5;
  color:#172033;
}
:root[data-theme=dark] .doc-preview a{color:#163a66}

/* Die öffentliche Website bleibt immer hell. Der Dunkelmodus ist eine Einstellung des
   Arbeitsbereichs; auf der Website hatte er nur die Schriftfarbe umgestellt, nicht die
   weissen Flächen – helle Schrift auf weissem Grund war das Ergebnis. */
:root[data-theme=dark] body.chrome-site{
  --bg:#f3f6fb;--panel:#fff;--line:#e4e9f0;--line-strong:#c9d2de;--text:#172033;--muted:#55616f;--muted-2:#66727f;
  --navy-50:#e9eef5;--navy-100:#d3dde9;--akzent-50:#eef5ff;--akzent-100:#dbe9ff;--gray-50:#eef1f5;--gray-600:#5c6572;
  --green-50:#e5f6ee;--red-50:#fdeaea;--amber-50:#fff4dc;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);--shadow:0 1px 3px rgba(16,24,40,.08);--shadow-lg:0 12px 32px rgba(16,24,40,.14);
  --illu-paper:#fff;--illu-line:#c9d2de;--illu-soft:#e9eef5;--illu-ground:rgba(15,42,74,.08);
  color:var(--text);color-scheme:light;
}
/* Auf der hellen Website müssen auch die Schaltflächen ihre hellen Werte behalten. Die dunkle
   Regel für .btn setzt sonst weissen Grund unter weisse Schrift – die Schaltfläche verschwindet. */
:root[data-theme=dark] body.chrome-site .btn{background:var(--panel);color:var(--text);border-color:var(--line-strong)}
:root[data-theme=dark] body.chrome-site .btn:hover{background:var(--gray-50)}
:root[data-theme=dark] body.chrome-site .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
:root[data-theme=dark] body.chrome-site .btn-accent{background:var(--akzent-600);border-color:var(--akzent-600);color:#fff}
:root[data-theme=dark] body.chrome-site .btn-success{background:var(--green);border-color:var(--green);color:#fff}
:root[data-theme=dark] body.chrome-site .btn-ghost{background:transparent;border-color:transparent;color:var(--gray-600)}
:root[data-theme=dark] body.chrome-site .btn-ghost:hover{background:var(--gray-50);color:var(--text)}
/* Auch im Dunkelmodus behalten Haupt-Schaltflächen ihre Markenfarbe. Die allgemeine dunkle
   .btn-Regel hatte sie eingeebnet, sodass „Neue Rechnung“ und „Neues Angebot“ gleich aussahen. */
:root[data-theme=dark] .btn-primary{border-color:transparent;color:#fff}
:root[data-theme=dark] .btn-accent{background:var(--akzent-600);border-color:transparent;color:#fff}
:root[data-theme=dark] .btn-success{background:var(--green);border-color:transparent;color:#fff}
:root[data-theme=dark] .dd-menu .btn-primary{background:none;color:var(--text)}
/* Kurzes Aufblinken, damit man das angesprungene Feld sofort findet */
.fix-blink{animation:fixBlink 1.4s ease-out}
@keyframes fixBlink{0%,100%{box-shadow:none}15%,55%{box-shadow:0 0 0 3px var(--akzent)}}
.checks li .btn{margin-inline-start:auto;flex:none}

/* ---------- Detailbereich neben der Liste ---------- */
/* Klick auf eine Zeile zeigt den Beleg rechts, statt die Seite zu wechseln. Auf schmalen Geraeten
   nimmt der Bereich die volle Breite ein – dort waere ein 380px-Streifen sinnlos. */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);background:var(--panel);border-inline-start:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:60;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .18s ease}
.drawer[hidden]{display:none}
.drawer.open{transform:translateX(0)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:59;opacity:0;transition:opacity .18s ease}
.drawer-backdrop[hidden]{display:none}
.drawer-backdrop.open{opacity:1}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:1.15rem;margin:0}
.drawer-head .sub{color:var(--muted);font-size:.88rem;margin-top:4px}
.drawer-body{flex:1;overflow-y:auto;padding:14px 16px}
.drawer-body h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:20px 0 8px;font-weight:600}
.drawer-body h3:first-child{margin-top:0}
.drawer-zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.drawer-zahlen>div{background:var(--gray-50);border-radius:10px;padding:8px 12px}
.drawer-zahlen .label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.drawer-zahlen b{font-size:1.15rem}
.drawer-zahlen b.warn{color:var(--red)}
.drawer-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.drawer-timeline li{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:.88rem;border-inline-start:2px solid var(--line);padding-inline-start:12px;margin-inline-start:5px}
.drawer-timeline li.ok{border-inline-start-color:var(--akzent)}
.drawer-timeline li.warn{border-inline-start-color:var(--amber)}
.drawer-timeline li span{flex:1;min-width:0}
.drawer-timeline time{color:var(--muted);font-size:.8rem;white-space:nowrap}
.drawer-items{list-style:none;margin:0;padding:0}
.drawer-items li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:.88rem;border-bottom:1px solid var(--line)}
.drawer-items li:last-child{border-bottom:0}
.drawer-actions{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-top:1px solid var(--line);background:var(--gray-50)}
tr.row-link.is-open{background:var(--akzent-50)}
@media (prefers-reduced-motion:reduce){.drawer,.drawer-backdrop{transition:none}}

/* ---------- Leserichtung von rechts nach links (Arabisch) ----------
   Abstände und Rahmen drehen sich von selbst, weil sie „Anfang“ und „Ende“ heißen. Alles, was
   fest an einer Bildschirmkante sitzt, steht hier: Es kennt nur links und rechts. Die Vorschau
   der Drucklayouts bleibt bewusst unverändert – sie zeigt ein Blatt Papier, und das Blatt sieht
   in jeder Sprache gleich aus. */
[dir="rtl"] .gsearch .ico{left:auto;right:10px}
[dir="rtl"] .tabs[data-ovf]{-webkit-mask-image:none;mask-image:none}
[dir="rtl"] .toolbar .search .ico{left:auto;right:11px}
[dir="rtl"] .notif-count{right:auto;left:2px}
[dir="rtl"] .dd-menu{right:auto;left:0}
[dir="rtl"] .company-switch .dd-menu{left:auto;right:0}
[dir="rtl"] .plan-tag{right:auto;left:16px}
[dir="rtl"] .pw-toggle{right:auto;left:6px}
[dir="rtl"] .steps-setup .nr{right:auto;left:12px}
[dir="rtl"] .tl::before{left:auto;right:27px}
[dir="rtl"] .toasts{right:auto;left:16px}
[dir="rtl"] body.nav-mini .nav-count{right:auto;left:6px}
[dir="rtl"] body.nav-mini .nav-item::after,[dir="rtl"] body.nav-mini .nav-collapse::after{left:auto;right:calc(100% + 8px)}
[dir="rtl"] .drawer{right:auto;left:0;transform:translateX(-100%)}
[dir="rtl"] .drawer.open{transform:translateX(0)}
[dir="rtl"] body.with-preview .preview-pane{right:auto;left:0}
[dir="rtl"] .skip{left:auto;right:-999px}
[dir="rtl"] .skip:focus{right:8px}
@media (max-width:1024px){
  [dir="rtl"] .sidebar{left:auto;right:0;transform:translateX(100%)}
  [dir="rtl"] body.nav-open .sidebar{transform:translateX(0)}
}
@media (max-width:720px){
  [dir="rtl"] .toasts{left:12px;right:12px}
}

/* Auswahl zwischen mehreren gleichwertigen Wegen: je Zeile eine Beschreibung und eine Schaltflaeche.
   Bewusst keine Radiokreise – die Wahl wird sofort wirksam und nicht erst beim Absenden. */
.wahl-liste{display:grid;gap:10px}
.wahl{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:#fff}
.wahl.ist-gewaehlt{border-color:var(--akzent);background:var(--akzent-50)}
.wahl b{display:block;font-size:.95rem}
.wahl .ico{color:var(--akzent-600);vertical-align:-2px}
.wahl-aktion{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0}
.wahl-marke{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;color:var(--akzent-600);white-space:nowrap}
:root[data-theme=dark] .wahl-marke{color:#c6ddff}
.mandatstext{border:1px dashed var(--line-strong);border-radius:10px;padding:12px 16px;font-size:.88rem;color:var(--gray-600);background:var(--gray-50);margin:16px 0 12px;max-height:220px;overflow:auto}
:root[data-theme=dark] .wahl{background:var(--panel)}
:root[data-theme=dark] .wahl.ist-gewaehlt{background:var(--akzent-50)}
:root[data-theme=dark] .mandatstext{background:var(--panel);color:var(--muted)}
@media (max-width:560px){.wahl{flex-direction:column}.wahl-aktion{align-items:stretch;width:100%}}

/* ---------- Das Menü auf dem Telefon: ein Blatt von unten ----------
   Bisher kam die Schublade des Rechners von links: einundzwanzig Zeilen untereinander, die
   obersten am oberen Bildrand – dort, wo ein Daumen nicht hinkommt – dazu Marke und
   „Einklappen“, die auf dem Telefon nichts zu suchen haben. Unter 700 px ist das Menü ein Blatt,
   das von unten hereinkommt: Griff, Titel und Schließen oben, zwei Spalten Kacheln nach Bereichen,
   unten Paket, Profil und Abmelden. Die Kacheln liegen im unteren Drittel des Bildschirms, wo der
   Daumen ohnehin ist. Auf dem Rechner ändert sich nichts. */
.sheet-kopf,.sheet-konto{display:none}
@media (max-width:700px){
  .sidebar{
    position:fixed;inset-inline:0;top:auto;bottom:0;width:auto;height:auto;
    max-height:min(92vh,780px);max-height:min(92svh,780px);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;
    transform:translateY(103%);visibility:hidden;
    transition:transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s .24s;
    box-shadow:var(--shadow-lg);padding-bottom:env(safe-area-inset-bottom);
  }
  .app.nav-open .sidebar{transform:none;visibility:visible;transition:transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s}
  /* Arabisch: die Schubladenregel fuer rtl (rechts, translateX) gilt sonst auch fuer das Blatt. */
  [dir="rtl"] .sidebar{left:0;right:0;transform:translateY(103%)}
  [dir="rtl"] .app.nav-open .sidebar{transform:none}
  .sidebar::before{display:none}
  .brand-side,.nav-collapse{display:none}
  .sheet-kopf{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;cursor:pointer;
    padding:8px 12px 8px 16px;font-size:.95rem;
  }
  .sheet-kopf b{grid-column:2;color:#fff;font-weight:600}
  .sheet-griff{
    grid-column:1/4;grid-row:1;justify-self:center;align-self:start;
    width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.35);margin-bottom:2px;
  }
  .sheet-kopf b{grid-row:2}
  .sheet-zu{
    grid-column:3;grid-row:2;justify-self:end;display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.10);color:#fff;cursor:pointer;
  }
  .sheet-zu .ico{width:18px;height:18px}
  .nav{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;align-content:start;
    padding:2px 12px 14px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  /* Solange unten noch Kacheln folgen, blendet ein Verlauf sie an (data-ovf aus app.js). */
  .nav[data-ovf=end],.nav[data-ovf=both]{-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
  /* Die Uebersicht steht allein vor dem ersten Bereich – halb breit saehe sie vergessen aus. */
  .nav>.nav-item:first-child{grid-column:1/3}
  /* Hinter dem offenen Blatt soll die Seite stehen bleiben. */
  body:has(.app.nav-open){overflow:hidden}
  .nav-group{grid-column:1/3;padding:12px 4px 2px;font-size:.72rem}
  .nav-item{
    min-height:46px;padding:7px 10px;border-radius:var(--radius-sm);gap:9px;
    background:rgba(255,255,255,.06);color:rgba(255,255,255,.88);font-size:.88rem;line-height:1.2;
  }
  .nav-item .ico{width:20px;height:20px;flex:0 0 auto;opacity:.85}
  .nav-item.active{box-shadow:inset 0 0 0 1.5px var(--akzent);background:rgba(42,116,230,.18)}
  .nav-count{margin-inline-start:auto;flex:0 0 auto}
  .sidebar-foot{
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    padding:10px 14px 12px;
  }
  .sheet-konto{display:flex;gap:6px;margin-inline-start:auto}
  .sheet-konto .inline{display:contents}
  .sheet-konto-i{
    display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border:0;
    border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.8rem;
    font-weight:500;text-decoration:none!important;cursor:pointer;
  }
  .sheet-konto-i .ico{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* ---------- Die Kopfleiste auf dem Telefon ----------
   Auf dem Rechner ist die Kopfleiste ein Werkzeugstreifen: Suche, Neu, Firma, Glocke, Konto
   nebeneinander. Auf 375 Pixeln stand davon ein linksbuendiger Haufen ungleich breiter Knoepfe
   mit leerem Rand rechts, darunter die Suche in einer zweiten Zeile – schief. Jetzt ist sie eine
   App-Leiste: Menue links, daneben der Firmenname, rechts Suche, Glocke und Konto, alles auf
   einer Hoehe von 56 Pixeln. „Neu“ steckt schon in der Leiste unten, die Suche hat ihre eigene
   Seite. Seit Runde 3 (F9) hell wie am Rechner: eine Kopfzeile, ein Stil – der dunkle Streifen machte drei Stile auf einer Seite. */
.nur-schmal{display:none}
@media (max-width:700px){
  .nur-schmal{display:inline-flex}
  .topbar,:root[data-theme=dark] .topbar{
    flex-wrap:nowrap;gap:2px;padding:env(safe-area-inset-top) 6px 0 4px;min-height:calc(56px + env(safe-area-inset-top));
    background:var(--panel);border-bottom:1px solid var(--line);box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .topbar .gsearch,.topbar .neu-dd{display:none}
  .topbar .burger{order:1}
  .topbar .company-switch{order:2;flex:1 1 auto;min-width:0;display:flex;justify-content:flex-start}
  .topbar .such-link{order:3}
  .topbar .notif{order:4}
  .topbar .usermenu{order:5}
  .topbar .btn-ghost,:root[data-theme=dark] .topbar .btn-ghost{
    color:var(--text);background:transparent;border-color:transparent;min-width:44px;min-height:44px;
    padding:8px;justify-content:center;border-radius:var(--radius-sm);
  }
  .topbar .btn-ghost:hover,.topbar .btn-ghost:focus-visible,.topbar details[open]>summary.btn-ghost,
  :root[data-theme=dark] .topbar .btn-ghost:hover,:root[data-theme=dark] .topbar .btn-ghost:focus-visible,:root[data-theme=dark] .topbar details[open]>summary.btn-ghost{background:var(--gray-50);color:var(--text)}
  .topbar .btn-ghost .ico{color:currentColor;opacity:.9}
  /* Der Firmenname als Titel neben dem Menue: sichtbar, weiss, mit Pfeil – und nicht laenger als der
     Platz. Links neben ihm steht ein Knopf, rechts stehen drei; „in der Mitte“ saehe deshalb immer
     nach links verrutscht aus. */
  .topbar .company-switch summary{max-width:100%;gap:6px;padding-inline:6px 8px;justify-content:flex-start;font-size:.95rem;font-weight:600;letter-spacing:-.01em}
  .topbar .company-switch summary>.ico:first-child{display:none}
  .topbar .company-switch .lbl{display:inline;max-width:52vw;color:var(--text)}
  .topbar .company-switch .ico-xs{width:14px;height:14px;opacity:.8}
  .topbar .usermenu summary{padding:6px}
  .topbar .usermenu .lbl{display:none}
  .topbar .avatar{width:32px;height:32px}
  .notif-count{top:4px;right:4px;box-shadow:0 0 0 2px var(--panel)}
  /* Klappmenues aus der Leiste: ein Blatt ueber die ganze Breite, kein schmaler Zettel am Rand. */
  .topbar .dd-menu,.topbar .company-switch .dd-menu{
    position:fixed;left:10px;right:10px;top:calc(56px + env(safe-area-inset-top) + 8px);
    width:auto;min-width:0;max-width:none;max-height:min(70vh,560px);overflow:auto;overscroll-behavior:contain;border-radius:14px;
  }
  /* Die Leistenregel oben trifft jeden Geisterknopf in der Leiste – auch „alle gelesen“ im Blatt der
     Benachrichtigungen, der damit weiss auf weiss stand. Im Blatt gilt wieder die Menueform. */
  .topbar .dd-menu .btn-ghost,:root[data-theme=dark] .topbar .dd-menu .btn-ghost{color:var(--text);background:none;min-width:0;min-height:38px;padding:5px 10px;justify-content:flex-start;border-radius:var(--radius-sm)}
  .topbar .dd-menu .btn-ghost:hover,.topbar .dd-menu .btn-ghost:focus-visible{background:var(--gray-50)}
  :root[data-theme=dark] .topbar .dd-menu .btn-ghost:hover,:root[data-theme=dark] .topbar .dd-menu .btn-ghost:focus-visible{background:#1c283b}
  .topbar .dd-menu .btn-ghost .ico{color:currentColor}
  /* Die Sammelleiste klebt unter der Kopfleiste – die ist auf dem Telefon 56 Pixel hoch, nicht 64. */
  .bulk-bar{top:calc(56px + env(safe-area-inset-top))}
  /* Das Suchfeld der Suchseite nimmt die ganze Breite, nicht 300 Pixel rechtsbuendig. */
  .page-actions:has(.gsearch-page){flex:1 1 100%}
  .page-actions .gsearch-page{flex:1 1 100%;max-width:none;min-width:0}

  /* Der Rest der Seite: ruhiger, mit mehr Luft und weicheren Kanten. */
  .content{padding:16px 16px 88px}
  .page-head{align-items:center}
  .page-head .topbar-title h1::after{margin-top:6px}
  .banner{padding:12px;border-radius:var(--radius-sm);font-size:.88rem;gap:8px 12px;margin-bottom:12px}
  .banner .btn{min-height:36px;padding:5px 10px}
  /* Die Leiste unten: der Hauptweg mit dem Markenverlauf, der Rest ruhig. */
  .tabbar .tab-neu{background:var(--navy)}
  .tabbar .tab-i .ico{opacity:.85}
  .tabbar .tab-i.active .ico{opacity:1}
}

/* Diagrammbalken in Marineblau: Im Dunkelmodus braucht dieselbe Reihe eine helle Entsprechung –
   Navy auf dunkler Karte war schlicht unsichtbar. */
.chart .b-navy{fill:var(--navy)}
.legend .b-navy{background:var(--navy)}
:root[data-theme=dark] .chart .b-navy{fill:#9cc2ff}
:root[data-theme=dark] .legend .b-navy{background:#9cc2ff}

/* Die Layoutwahl versteckt ihr Radio – der Tastaturfokus braucht deshalb einen eigenen Ring. */
.layout-opt:has(input:focus-visible){outline:3px solid var(--akzent);outline-offset:2px}

/* Tuermen sich mehrere Banner (Rechtstexte, Ankuendigung, Admin-Zugriff), ruecken sie zusammen. */
.banner + .banner{margin-top:-4px}

/* ================= Design 4: klar, ruhig, einheitlich =================
   Weniger Verlauf, mehr Ordnung: flache Flaechen mit feinen Linien, ein Akzent (Indigo) fuer
   „hier bin ich“ und „hier geht es weiter“, Farbe sonst nur fuer Bedeutung (rot = ueberfaellig,
   gruen = bezahlt). Die Symbole kommen aus Lucide, jeder Menuepunkt hat ein eigenes. Die Regeln
   stehen gesammelt am Ende, damit die aelteren Schichten nicht einzeln angefasst werden muessen. */
/* Grundwerte: im Gestaltungssystem am Dateianfang (Runde 7 D). */
body.chrome-app,:root[data-theme=dark] body.chrome-app{background:var(--bg)}

/* ---------- Seitenleiste (Rechner und Schublade; das Blatt auf dem Telefon bleibt) ---------- */
@media (min-width:701px){
  .sidebar{background:#0c2239;border-inline-end:1px solid rgba(255,255,255,.05)}
  .sidebar::before{display:none}
  .brand-side{padding:18px 20px 12px}
  .nav{padding:4px 10px 10px;gap:1px}
  /* .46 ergab 3,7:1 auf dem dunklen Grund – fuer eine Versalzeile dieser Groesse zu wenig. */
  .nav-group{padding:20px 12px 8px;font-size:.72rem;letter-spacing:.1em;color:rgba(214,226,240,.58)}
  .nav-item{position:relative;gap:11px;padding:7px 12px;min-height:36px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;color:rgba(226,234,244,.8);transition:background .12s,color .12s}
  .nav-item .ico{width:18px;height:18px;opacity:.72;color:inherit}
  .nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav-item:hover .ico{opacity:1;color:#fff}
  .nav-item.active{background:rgba(255,255,255,.09);box-shadow:none;color:#fff;font-weight:600}
  .nav-item.active .ico{opacity:1;color:#c6ddff}
  .nav-item.active::before{content:"";position:absolute;inset-inline-start:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#5b95f5}
  .nav-item:focus-visible{outline:2px solid #c6ddff;outline-offset:-2px}
  body.nav-mini .nav-item.active{box-shadow:none}
  body.nav-mini .nav-item.active::before{inset-inline-start:-6px}
  .nav-collapse{color:rgba(226,234,244,.62)}
  .plan-chip{background:rgba(255,255,255,.06);border-color:rgba(199,210,254,.28)}
}
.nav-count{min-width:20px;text-align:center;line-height:1.35;font-variant-numeric:tabular-nums}
/* Der Fokusring auf dunklem Grund: Indigo auf der Leistenfarbe kommt auf 1,41:1, #c6ddff auf 4,22:1
   und auf der Seitenleiste auf 10,8:1 – derselbe helle Ton, den .nav-item schon benutzt. */
.sidebar :focus-visible{outline-color:#c6ddff}

/* ---------- Kopfleiste und Seitenkopf ---------- */
@media (min-width:701px){
  .topbar{background:rgba(255,255,255,.9);border-bottom-color:var(--line)}
  .gsearch input{background:#f1f4f8;border-color:#e6eaf0}
  .gsearch input:hover{border-color:var(--line-strong)}
}
.gsearch input:focus{background:var(--panel);border-color:var(--akzent);box-shadow:var(--ring)}
.page-head .topbar-title h1{font-size:1.75rem;font-weight:700;letter-spacing:-.025em}
.page-head .topbar-title h1::after{display:none}
.page-head .subtitle{margin-top:3px}

/* ---------- Karten ---------- */
.card-head{background:none}
.card-head h2 .ico{color:var(--muted-2)}

/* ---------- Kennzahlen: Symbol als Chip statt farbiger Oberkante ---------- */
.kpi{padding:20px;gap:8px;box-shadow:none}
.kpi::before{display:none}
.kpi:hover{border-color:var(--line-strong)}
.kpi .label{font-size:.8rem;font-weight:500;color:var(--muted)}
.kpi .label>.ico,.kpi .label>span>.ico{width:30px;height:30px;padding:6px;border-radius:var(--radius-sm);background:var(--akzent-50);color:var(--akzent-600);margin-inline-end:4px;vertical-align:middle}
.kpi.primary .label>.ico,.kpi.primary .label>span>.ico{background:var(--navy-50);color:var(--navy-700)}
.kpi.warn .label>.ico,.kpi.warn .label>span>.ico{background:var(--red-50);color:var(--red)}
.kpi.good .label>.ico,.kpi.good .label>span>.ico{background:var(--green-50);color:var(--green)}
.kpi .value{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
:root[data-theme=dark] .kpi.primary .label>.ico,:root[data-theme=dark] .kpi.primary .label>span>.ico{color:#9cc2ff}
:root[data-theme=dark] .kpi .label>.ico,:root[data-theme=dark] .kpi .label>span>.ico{color:#c6ddff}
:root[data-theme=dark] .kpi.good .label>.ico,:root[data-theme=dark] .kpi.good .label>span>.ico{color:#8fe0b5}

/* ---------- Schaltflaechen und Felder ---------- */
.btn,.btn-sm,.btn-icon,.btn-lg{border-radius:var(--radius-sm)}
.btn{box-shadow:var(--shadow-xs);line-height:1.5}
.btn-ghost,.dd-menu .btn,.dd-menu .dd-item{box-shadow:none}
.btn-primary,.btn-primary:hover{background:var(--navy);box-shadow:var(--shadow-xs);filter:none}
.btn-primary:hover{background:var(--navy-700)}
.btn-accent,.btn-accent:hover{background:var(--akzent-600);filter:none;box-shadow:var(--shadow-xs)}
.btn-accent:hover{background:#0847a6}
.btn-success,.btn-success:hover{background:var(--green)}
.btn-success:hover{background:#15804f}
.btn:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
:root[data-theme=dark] .btn-primary{background:#1d4c80}
:root[data-theme=dark] .btn-primary:hover{background:#245a96}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--red)}
input:user-invalid:focus,select:user-invalid:focus,textarea:user-invalid:focus{box-shadow:0 0 0 3px rgba(201,60,60,.28)}

/* ---------- Tabellen ---------- */
.table th{background:#f8fafc;color:#5b6675}
.table tbody tr:hover,.table tr.row-link:hover td,.table tr.row-link:focus-within td{background:#f7f9fc}
/* Die Aktionsspalte war per display:flex keine Tabellenzelle mehr: ihre Trennlinie sass hoeher als
   die der Nachbarzellen, jede Zeile hatte dort eine Luecke. Jetzt bleibt sie Zelle, die Knoepfe
   stehen nebeneinander in einer Reihe. */
.table td.actions{display:table-cell;white-space:nowrap;text-align:end}
.table td.actions>*{display:inline-flex;vertical-align:middle}
.table td.actions>*+*{margin-inline-start:2px}

/* ---------- Reiter und Filter ---------- */
.tab{font-weight:500;border-radius:10px 10px 0 0;transition:color .12s,background .12s}
.tab:hover{color:var(--text);background:var(--gray-50)}
.tab:focus-visible{outline-offset:-3px}
.tab.active{color:var(--navy);border-bottom-color:var(--akzent);background:none}
:root[data-theme=dark] .tab.active{background:none;color:var(--text)}
.pill{transition:background .12s,border-color .12s,color .12s}

/* ---------- Hinweisbaender ---------- */
.banner{border-radius:10px}
@media (min-width:701px){
  /* Die Links zu Impressum, Datenschutz und Vertragsbedingungen klebten ohne Abstand aneinander. */
  .banner .nur-breit{display:inline-flex;flex-wrap:wrap;gap:4px 16px}
}

/* ---------- Belegeditor: Skonto ----------
   In der halben Spalte blieben fuer Prozent und Tage je rund 30 Pixel: aus „0“ wurde „C“. Die
   Gruppen behalten jetzt eine Mindestbreite und brechen lieber in eine zweite Zeile um. */
.range .input-group{flex:1 1 96px;min-width:96px}
.range .input-group input{min-width:44px}

/* ---------- Menues ---------- */
.dd-menu{border-radius:var(--radius);padding:4px;box-shadow:var(--shadow-lg)}
.dd-menu .dd-item .ico,.dd-menu .btn .ico{color:var(--muted-2)}
.dd-menu .dd-item:hover .ico,.dd-menu .btn:hover .ico{color:var(--akzent-600)}

/* ---------- Seitenmenue in Gruppen (Verwaltung, Einstellungen) ----------
   Breit: Menue links, Inhalt rechts; das Menue bleibt beim Scrollen stehen. Schmal: eine waagerechte
   Leiste mit Zeichen, die unter der Kopfleiste stehen bleibt – zwoelf Reiter in fuenf Zeilen fielen weg. */
.sub-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.sub-main{min-width:0}
.sub-nav{position:sticky;top:calc(var(--topbar-h) + 16px);display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow)}
.sub-nav-g{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--muted-2);padding:12px 10px 4px}
.sub-nav-i{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--text);font-weight:500;font-size:.88rem;text-decoration:none!important;transition:background .12s,color .12s}
.sub-nav-i .ico{width:18px;height:18px;color:var(--muted-2);transition:color .12s}
.sub-nav-i:hover{background:var(--gray-50)}
.sub-nav-i:hover .ico{color:var(--navy-700)}
.sub-nav-i.active{background:var(--akzent-50);color:var(--navy);font-weight:600}
.sub-nav-i.active .ico{color:var(--akzent-600)}
.sub-nav-i.active::before{content:"";position:absolute;inset-inline-start:-8px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--akzent)}
.sub-nav-i .nav-count{margin-inline-start:auto}
.sub-nav-i:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
:root[data-theme=dark] .sub-nav-i.active{background:rgba(42,116,230,.14);color:var(--text)}
:root[data-theme=dark] .sub-nav-i.active .ico{color:#c6ddff}
:root[data-theme=dark] .sub-nav-i:hover .ico{color:var(--text)}
@media (max-width:1100px){
  .sub-shell{grid-template-columns:1fr;gap:14px}
  .sub-nav{position:sticky;top:var(--topbar-h);z-index:15;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:6px;gap:4px;border-radius:var(--radius-sm);margin-inline:-2px}
  .sub-nav::-webkit-scrollbar{display:none}
  .sub-nav-g{display:none}
  .sub-nav-i{flex:none;white-space:nowrap;padding:7px 12px;font-size:.88rem;border-radius:99px}
  .sub-nav-i.active::before{display:none}
  .sub-nav-i.active{box-shadow:inset 0 0 0 1px var(--akzent-100)}
  .sub-nav[data-ovf=end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .sub-nav[data-ovf=start]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
  .sub-nav[data-ovf=both]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
}
/* Die Verwaltung hat elf Bereiche. Im Schiebeband sieht man auf dem Telefon drei davon, und zu
   einem Bereich weiter hinten kommt man nur durch Wischen – in den Einstellungen fuehren
   wenigstens die Kacheln im Ueberblick hinein, in der Verwaltung gibt es diesen Weg nicht.
   Sie bricht deshalb um: drei Zeilen Navigation, dafuer jeder Bereich mit einem Griff. */
@media (max-width:700px){
  .sub-nav-viel{flex-wrap:wrap;overflow-x:visible;-webkit-mask-image:none;mask-image:none;row-gap:6px}
  .sub-nav-viel .sub-nav-i{padding:8px 12px;font-size:.88rem}
  .sub-nav-viel .sub-nav-i .ico{width:16px;height:16px}
}

/* Zwischen Telefon und Rechner ist Platz fuer zwei, drei Zeilen – dann sind alle zwoelf Bereiche
   zu sehen. Das Schiebeband mit dem Verlauf am Rand bleibt dem Telefon vorbehalten. */
@media (min-width:701px) and (max-width:1100px){
  .sub-nav{flex-wrap:wrap;overflow-x:visible;-webkit-mask-image:none;mask-image:none}
}
/* Die Kopfleiste ist nur auf dem Telefon 56 Pixel hoch; darueber gilt --topbar-h aus der Regel oben. */
@media (max-width:700px){
  .sub-nav{top:56px}
}
/* Benutzermenue: Name und Adresse untereinander – nebeneinander brach der Name in zwei Zeilen. */
.usermenu .dd-head{flex-direction:column;align-items:flex-start;gap:1px}
/* Im Dunkelmodus faerbt die allgemeine Linkregel alle <a> hellblau – das Seitenmenue ist Navigation, kein Fliesstext. */
:root[data-theme=dark] .sub-nav-i{color:var(--text)}
:root[data-theme=dark] .sub-nav-i:hover{background:#1c283b}
/* Geöffnetes Klappmenü in Tabellen und Karten: fest am Bildschirm neben dem Knopf (Lage setzt app.js). */
.dd-menu.dd-schwebend{position:fixed;right:auto;z-index:45;max-height:calc(100vh - 16px);overflow:auto;overscroll-behavior:contain}

/* ---------- Verwaltung: Detailseiten mit Kopf und Bereichen ----------
   Oben die Person bzw. das Unternehmen mit Status, Kennzahlen und den Hauptaktionen, darunter
   Bereiche statt einer Seite von über 4000 Pixeln. Seltene und gefährliche Aktionen im Menü „Mehr“. */
.brotkrumen{margin:0 0 10px;font-size:.88rem}
.brotkrumen a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:500}
.brotkrumen a:hover{color:var(--text);text-decoration:none}
.profil-kopf{padding:18px 20px 16px;margin-bottom:14px}
.profil-haupt{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.profil-bild{flex:none;width:52px;height:52px;border-radius:var(--radius);display:grid;place-items:center;background:var(--akzent-50);color:var(--akzent-600);font-weight:700;font-size:1.15rem}
.profil-bild-firma{background:var(--navy-50);color:var(--navy-700)}
.profil-bild-firma .ico{width:26px;height:26px}
.profil-titel{flex:1 1 260px;min-width:0}
.profil-titel h2{font-size:1.15rem;margin:0;overflow-wrap:anywhere}
.profil-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:8px;color:var(--muted);font-size:.88rem}
.profil-aktionen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-inline-start:auto}
.profil-fakten{display:flex;flex-wrap:wrap;gap:10px 28px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.profil-fakten div{min-width:0}
.profil-fakten dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:600}
.profil-fakten dd{margin:2px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.profil-fakten dd.neg{color:var(--red)}
:root[data-theme=dark] .profil-bild{color:#c6ddff}
:root[data-theme=dark] .profil-bild-firma{color:#9cc2ff}
.detail-reiter{margin-bottom:16px}
.tab-zahl{display:inline-block;min-width:20px;padding:0 6px;margin-inline-start:4px;border-radius:99px;background:var(--gray-50);color:var(--muted);font-size:.72rem;font-weight:600;text-align:center;line-height:1.5}
.tab.active .tab-zahl{background:var(--akzent-50);color:var(--akzent-600)}
:root[data-theme=dark] .tab.active .tab-zahl{color:#c6ddff}
.mitglieder{list-style:none;margin:0;padding:0}
.mitglieder li{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.mitglieder li:last-child{border-bottom:0}
.mitglied-name{flex:1;min-width:0}
.mitglied-name b{overflow-wrap:anywhere}
.mitglied-aktion{display:flex;align-items:center;gap:4px;flex:none}
.mitglied-aktion select{width:auto;min-width:130px}
.notiz-fuss{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:10px}
.notiz-fuss .field{margin:0;flex:1 1 200px}
details.gefahr{border-color:#f0c4c4}
details.gefahr>summary.card-head h2{color:var(--red)}
:root[data-theme=dark] details.gefahr{border-color:#6b3232}
/* Auf Detailseiten ist das Seitenmenü eine schmale Leiste mit Zeichen – die Tabellen brauchen die Breite. */
@media (min-width:1101px){
  .sub-shell.ist-detail{grid-template-columns:56px minmax(0,1fr)}
  .ist-detail .sub-nav{padding:6px;align-items:center}
  .ist-detail .sub-nav-g{display:none}
  .ist-detail .sub-nav-i{justify-content:center;padding:9px;width:42px}
  .ist-detail .sub-nav-i span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ist-detail .sub-nav-i .nav-count{position:absolute;top:1px;inset-inline-end:-2px;font-size:.72rem;padding:0 4px;min-width:16px}
  .ist-detail .sub-nav-i.active::before{inset-inline-start:-6px}
}
@media (max-width:700px){
  /* Dreizehn Bereiche in sechs Zeilen sind 318 Pixel. Kleben duerfen sie damit nicht: Nach dem
     Scrollen blieben von 660 Pixeln Fensterhoehe noch 229 fuer die Liste. Oben stehen sie
     weiterhin – man scrollt an ihnen vorbei, statt sie mitzuschleppen. */
  .sub-nav-viel{position:static}
  .profil-aktionen{margin-inline-start:0;width:100%}
  .profil-fakten{gap:10px 20px}
  /* 0,72 rem sind auf dem Telefon 10,44 Pixel – unter den zwoelf, ab denen Schrift ueberhaupt
     noch zumutbar ist. 0,88 rem ergeben 12,76; Grossbuchstaben und Fettung tragen die
     Unterscheidung zum Wert weiterhin. */
  .profil-fakten dt{font-size:.88rem;letter-spacing:.04em}
  /* Der Knopf „Mitglied entfernen" war 33 Pixel breit. Eng gefasst, damit nicht jeder
     Zeichenknopf in jeder Tabelle mitwaechst – dort ist der Platz knapp. */
  .mitglied-aktion .btn-icon{min-width:44px}
  .mitglieder li{flex-wrap:wrap}
}
/* Reiter im Dunkelmodus: Die allgemeine Linkregel färbte sie hellblau wie Fließtext-Links. */
:root[data-theme=dark] .tab{color:var(--muted)}
:root[data-theme=dark] .tab:hover,:root[data-theme=dark] .tab.active{color:var(--text)}
.mitglied-name .sub{display:block;font-size:.8rem;color:var(--muted)}
@media (max-width:700px){
  .profil-haupt{gap:12px}
  .profil-bild{width:44px;height:44px;border-radius:var(--radius);font-size:1.15rem}
  .profil-titel{flex:1 1 0}
  .profil-titel h2{font-size:1.15rem}
}
/* Frühere Fassungen eines korrigierten Belegs und der Hinweis im Editor */
.fassungen{list-style:none;margin:0;padding:0}
.fassungen li{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line)}
.fassungen li:last-child{border-bottom:0}
.fassungen .sub{display:block;font-size:.8rem;color:var(--muted)}
.korrektur-hinweis{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.korrektur-hinweis>div{flex:1 1 280px}
.korrektur-hinweis form{margin-inline-start:auto}

/* ---------- App (iOS/Android) ----------
   Die App zeigt die Seiten randlos (viewport-fit=cover, nur mit Klasse is-app). Auf dem Telefon halten
   Kopf- und Tab-Leiste schon Abstand zu Statusleiste und Home-Indikator. Auf dem iPad, auf den
   Anmeldeseiten und auf der Website fehlte er: Dort läge die oberste Zeile unter der Uhrzeit. */
@media (min-width:701px){
  .is-app .topbar{padding-top:env(safe-area-inset-top);min-height:calc(var(--topbar-h) + env(safe-area-inset-top))}
  .is-app .sidebar{padding-top:env(safe-area-inset-top)}
}
.is-app .site-header{padding-top:env(safe-area-inset-top)}
.is-app .site-footer{padding-bottom:env(safe-area-inset-bottom)}
.is-app .bare-stage{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
/* Während die App eine Datei holt, zeigt der Link, dass etwas passiert. */
.is-app a[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ---------- Telefon: die Feinabstimmung, die hinter dem Design-4-Satz stehen muss ----------
   Der Abschnitt „Design 4" weiter oben setzt Kennzahlen, Kartenkoepfe und Seitentitel ohne
   Breitenabfrage neu. Eine Medienabfrage wiegt aber nicht schwerer als eine Regel ohne, und sie
   steht spaeter in der Datei – die Telefonwerte an ihrem urspruenglichen Platz blieben deshalb
   wirkungslos. Gemessen: Kennzahl 23,9 statt 17,7 Pixel, Kachelrand 20 statt 14 Pixel. Hier,
   hinter allem anderen, greifen sie. */
@media (max-width:700px){
  .kpi{padding:16px}
  .kpi .value{font-size:1.3rem}
  .kpi .label{font-size:.8rem}
  .kpi .label>.ico,.kpi .label>span>.ico{width:24px;height:24px;padding:4px}
  .page-head .topbar-title h1{font-size:1.4rem}

  /* Die Kartenkopfzeile darf umbrechen. Titel, Hinweis und Suchfeld nebeneinander brauchten auf der
     Zahlungsseite 507 Pixel – die ganze Seite liess sich dadurch seitlich schieben. */
  .card-head{flex-wrap:wrap;row-gap:8px}
  .card-head .gsearch-page{flex:1 1 100%;max-width:none;min-width:0;order:3}

  /* Tippflaechen. Ein Daumen trifft 44 Pixel, keine 13. */
  .table .btn-sm{min-width:44px}
  .pos-table .c-tools .btn{min-width:44px;min-height:44px}
  /* Elf Filter ergeben umgebrochen drei Zeilen – vor der Liste liegt dann ein halber Bildschirm.
     Eine schiebbare Zeile mit Verlauf am Rand zeigt dasselbe auf 44 Pixeln. */
  .pills{gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .pills::-webkit-scrollbar{display:none}
  .pill{padding:12px;flex:none}
  .sub-nav{gap:8px}
  .sub-nav-i{min-height:44px;padding:10px 14px}
  .dd-menu .dd-item{min-height:44px}
  .dd-sub>summary{min-height:44px;display:flex;align-items:center}
  /* Das Auswahlkaestchen der Belegliste: die Spaltenregel weiter oben setzt es auf 16 Pixel zurueck. */
  .table td.c-sel input{width:22px;height:22px}
  .table td.c-sel{top:10px;inset-inline-end:10px}
  /* Das Erklaerzeichen bleibt 13 Pixel klein – seine Tippflaeche nicht. In der Reiterleiste enger
     gefasst, damit sie nicht in den Nachbarreiter reicht. */
  .hint{position:relative}
  .hint::after{content:"";position:absolute;inset:-16px}
  .tabs>.hint::after{inset:-8px 0}

  /* Beide Knoepfe der Einwilligung nebeneinander: gestapelt nahm das Banner 38 Prozent des
     Bildschirms ein, obwohl der Text derselbe bleibt. */
  .consent-btn,.consent-btn:hover{flex:1 1 130px}
  .consent-mehr>summary{min-height:44px;display:flex;align-items:center}
}
/* ---------- Datenschutz-Einstellungen (Banner und Formular in der Datenschutzerklärung) ----------
   Schwebt unten und sperrt die Seite nicht: Impressum und Datenschutzerklärung bleiben ohne Wahl lesbar.
   Beide Hauptknöpfe sehen gleich aus – die Ablehnung darf nicht schwächer wirken als die Zustimmung. */
.consent{position:fixed;z-index:90;inset-inline:16px;bottom:16px;display:flex;justify-content:center;pointer-events:none}
.consent-box{pointer-events:auto;width:min(560px,100%);max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;
  background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:20px}
.consent h2{display:flex;align-items:center;gap:8px;font-size:1.15rem;margin:0 0 8px;color:var(--text)}
.consent h2 .ico{color:var(--akzent)}
.consent p{margin:0 0 12px;font-size:.88rem;line-height:1.5;color:var(--muted)}
.consent-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.consent-btn,.consent-btn:hover{flex:1 1 180px;justify-content:center;min-height:44px;background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.consent-btn:hover{filter:brightness(1.15)}
:root[data-theme=dark] .consent-btn,:root[data-theme=dark] .consent-btn:hover{background:#8fc4ff;border-color:#8fc4ff;color:#0b2038}
.consent-mehr{margin:0 0 12px}
.consent-mehr>summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--text);padding:4px 0}
.consent-mehr[open]>summary{margin-bottom:4px}
.consent-zweck{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.consent-zweck input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--akzent)}
.consent-zweck label{display:grid;gap:4px;font-size:.88rem;cursor:pointer}
.consent-zweck label b span{margin-inline-start:8px;font-weight:500;font-size:.72rem;color:var(--akzent-600)}
.consent-zweck small{color:var(--muted);font-size:.8rem;line-height:1.45}
.consent-mehr .btn-sm{margin-top:4px}
.consent-seite{border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:12px 0 20px;background:var(--panel)}
.consent-stand{margin:0 0 8px}
.consent-tabelle td{vertical-align:top;font-size:.88rem}
.consent-tabelle code{white-space:nowrap;font-size:.8rem}
/* In der App über dem Home-Indikator, auf dem Telefon zusätzlich über der Tab-Leiste. */
.is-app .consent{bottom:calc(16px + env(safe-area-inset-bottom))}
@media (max-width:700px){
  .consent{inset-inline:10px;bottom:10px}
  .consent-box{padding:16px}
  .chrome-app .consent{bottom:calc(66px + env(safe-area-inset-bottom))}
  .consent-tabelle code{white-space:normal}
}
@media print{.consent{display:none}}

/* ---------- Kontaktanfragen: jede Anfrage eine Karte, zugeklappt eine Zeile ----------
   Vorher standen sie in einer Tabelle mit fuenf Spalten; die Nachricht – das Einzige, worum es
   geht – bekam die schmalste davon, und auf einen Bildschirm passten zwei Anfragen. */
.anfrage{border-bottom:1px solid var(--line)}
.anfrage:last-of-type{border-bottom:0}
.anfrage-kopf{display:grid;gap:3px;padding:12px 16px 12px 34px;cursor:pointer;list-style:none;position:relative}
.anfrage-kopf::-webkit-details-marker{display:none}
/* Das Dreieck zeigt, dass sich die Zeile oeffnen laesst – ohne es sieht sie aus wie Text. */
.anfrage-kopf::before{content:"";position:absolute;inset-inline-start:14px;top:17px;width:6px;height:6px;
  border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);transform:rotate(-45deg);transition:transform .15s}
.anfrage[open]>.anfrage-kopf::before{transform:rotate(45deg)}
.anfrage-kopf:hover{background:var(--gray-50)}
.anfrage-zeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.anfrage-betreff{font-size:.95rem;font-weight:600}
.anfrage-sub{color:var(--muted);font-size:.8rem}
.anfrage-von{font-weight:500}
.anfrage-vorschau{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anfrage[open] .anfrage-vorschau{display:none}
.anfrage-koerper{display:grid;gap:12px;padding:0 16px 16px 34px}
.anfrage-kontakt{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.88rem;align-items:center}
.anfrage-kontakt .ico{vertical-align:-2px}
/* Der Text des Kunden steht auf einer eigenen Flaeche: Was er geschrieben hat, ist nicht dasselbe
   wie das, was wir dazu anzeigen. */
.anfrage-text{white-space:pre-line;line-height:1.55;background:var(--gray-50);border-radius:var(--radius-sm);padding:12px 16px}
.anfrage-antwort{border-inline-start:3px solid var(--akzent-100);padding-inline-start:12px;display:grid;gap:4px}
.anfrage-antwort .anfrage-text{background:var(--akzent-50)}
:root[data-theme=dark] .anfrage-text{background:#141c2b}
:root[data-theme=dark] .anfrage-antwort .anfrage-text{background:rgba(42,116,230,.12)}

/* ---------- Fehlerprotokoll in der Verwaltung ---------- */
.log-liste{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.log-liste li{padding:8px 12px;background:var(--gray-50);border-radius:var(--radius-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.45;overflow-wrap:anywhere}
:root[data-theme=dark] .log-liste li{background:#141c2b}

/* ---------- Was anklickbar ist, muss man sehen ----------
   Gemessen auf der Belegliste: 59 von 92 Links trugen dieselbe Farbe und dieselbe Schrift wie der
   Text daneben. Am Rechner verraet sie das Ueberfahren, auf dem Telefon gibt es das nicht – dort
   war ein Link von einer Angabe nicht zu unterscheiden.

   Ein Link braucht aber nicht ueberall dieselbe Form. Im Fliesstext ist er ein farbiges,
   unterstrichenes Wort. In einer Listenzeile ist die ganze Zeile das Ziel; ein farbiges Wort je
   Spalte waere dort ein Flickenteppich. Deshalb drei Staerken: Fliesstext farbig und
   unterstrichen, die Ueberschrift einer Zeile dunkel mit Winkel am Ende, Nebenlinks in der Zeile
   mit feiner grauer Unterstreichung. */
:where(.explain,.banner,.hinweis,.notice,.faq-body,.dl dd,.consent,.flash,.empty,.empty-state,
       .anfrage-kontakt,.anfrage-koerper,.doc-hero .meta,.kpi .sub,.profil-fakten,.verlauf,.card-body>p,.card-body>ul,.card-body>ol,.subtitle,
       .checks li,.fassungen li,.log-liste li,.card-foot)
  a:not(.btn):not(.pill):not(.tab):not(.badge):not(.sub-nav-i){
  color:var(--akzent-600);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
}
:where(.explain,.banner,.hinweis,.notice,.faq-body,.dl dd,.consent,.flash,.empty,.empty-state,
       .anfrage-kontakt,.anfrage-koerper,.doc-hero .meta,.kpi .sub,.profil-fakten,.verlauf,.card-body>p,.card-body>ul,.card-body>ol,.subtitle,
       .checks li,.fassungen li,.log-liste li,.card-foot)
  a:not(.btn):not(.pill):not(.tab):not(.badge):not(.sub-nav-i):hover{
  text-decoration-thickness:2px;
}
:root[data-theme=dark] :where(.explain,.banner,.hinweis,.notice,.faq-body,.dl dd,.consent,.flash,
       .empty,.empty-state,.anfrage-kontakt,.anfrage-koerper,.doc-hero .meta,.kpi .sub,.profil-fakten,.verlauf,.card-body>p,.card-body>ul,
       .card-body>ol,.subtitle,.checks li,.fassungen li,.log-liste li,.card-foot)
  a:not(.btn):not(.pill):not(.tab):not(.badge):not(.sub-nav-i){
  color:#93c2ff;
}

/* Listenzeilen: Die Ueberschrift bleibt dunkel und schwer – sie ist die Zeile, nicht ein Wort
   darin. Nebenlinks (Kunde, Beleg, Unternehmen) tragen eine feine graue Linie: erkennbar als
   Link, ohne die Liste bunt zu machen. */
.table td a:not(.btn):not(.badge),.table th a:not(.btn):not(.badge){color:var(--text)}
.table td:not(.z-titel) a:not(.btn):not(.badge){
  text-decoration:underline;text-decoration-color:var(--line-strong);
  text-decoration-thickness:1px;text-underline-offset:.18em;
}
.table td a:not(.btn):not(.badge):hover{color:var(--akzent-600);text-decoration:underline;
  text-decoration-color:currentColor;text-decoration-thickness:2px;text-underline-offset:.18em}

/* Der Winkel am Ende der Zeilenueberschrift. Am Rechner erscheint er beim Ueberfahren – dort gibt
   es schon Zeiger und Hintergrund. Auf dem Telefon steht er immer, denn dort gibt es beides nicht. */
.table td.z-titel a:not(.btn)::after{
  content:"";display:inline-block;width:6px;height:6px;margin-inline-start:7px;vertical-align:2px;
  border-top:2px solid var(--line-strong);border-right:2px solid var(--line-strong);
  transform:rotate(45deg);transition:opacity .12s;
}
[dir=rtl] .table td.z-titel a:not(.btn)::after{transform:rotate(-135deg)}
@media (min-width:701px) and (hover:hover){
  .table td.z-titel a:not(.btn)::after{opacity:0}
  .table tbody tr:hover td.z-titel a:not(.btn)::after{opacity:1}
}

/* ---------- Breite Tabellen auf dem Telefon ----------
   Sechzehn der achtzehn Tabellen der Verwaltung bringen keine Zeilenrollen mit und bleiben
   deshalb Tabellen, die man seitlich schiebt. Dass sie das sind, war nicht zu sehen: Die Spalte
   rechts endete einfach am Rand. Jetzt liegt dort ein Schatten, solange noch etwas folgt – und die
   erste Spalte bleibt beim Schieben stehen, damit man weiss, in welcher Zeile man liest. */
.table-wrap{
  background:
    linear-gradient(90deg,var(--panel),rgba(0,0,0,0)) left center,
    linear-gradient(90deg,rgba(0,0,0,0),var(--panel)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(15,42,74,.16),rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(15,42,74,.16),rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:22px 100%,22px 100%,11px 100%,11px 100%;
  background-attachment:local,local,scroll,scroll;
}
:root[data-theme=dark] .table-wrap{
  background-image:
    linear-gradient(90deg,var(--panel),rgba(0,0,0,0)),
    linear-gradient(90deg,rgba(0,0,0,0),var(--panel)),
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.5),rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.5),rgba(0,0,0,0));
}
@media (max-width:700px){
  /* Nur fuer Tabellen, die Tabellen bleiben. Wo aus Zeilen Karten werden, gibt es kein Schieben. */
  .table:not(.table-karten):not(:has(td.z-titel)) thead th:first-child,
  .table:not(.table-karten):not(:has(td.z-titel)) tbody td:first-child{
    position:sticky;inset-inline-start:0;z-index:1;background:var(--panel);
  }
  .table:not(.table-karten):not(:has(td.z-titel)) thead th:first-child{background:#f8fafc}
  :root[data-theme=dark] .table:not(.table-karten):not(:has(td.z-titel)) thead th:first-child{background:#1b2537}
  .table:not(.table-karten):not(:has(td.z-titel)) tfoot td:first-child{position:sticky;inset-inline-start:0;z-index:1}
}

/* ---------- Akzentfarbe durchziehen ----------
   Reste aus dem fruehereren Tuerkis: Der Hinweis-Kennzeichner setzte tuerkise Schrift auf
   indigofarbenen Grund (1,9:1 – unlesbar), und die Akzent-Schaltflaeche wurde beim Ueberfahren
   tuerkis. Im Dunkelmodus waren die Akzentflaechen noch ganz tuerkis. */
.badge.b-teal{color:var(--akzent-600)}
.btn-accent,.btn-accent:hover{box-shadow:0 1px 2px rgba(10,88,202,.25)}
.btn-accent:hover{background:#0847a6}
:root[data-theme=dark] .notice-teal,:root[data-theme=dark] .banner-demo{color:#c6ddff}
:root[data-theme=dark] .badge.b-teal{color:#93c2ff}

/* ---------- Verwaltung auf dem Telefon: aus jeder Zeile ein Block ----------
   Die Belegliste und ihre Geschwister bringen Zeilenrollen mit (z-titel, z-betrag …) und werden
   auf dem Telefon zu Karten. Die Verwaltung hat achtzehn Tabellen, und sechzehn davon kannten
   diese Rollen nicht: Protokoll, Postausgang, Mandate, Besucher, Papierkorb blieben Tabellen mit
   sechs bis sieben Spalten auf 390 Pixeln – sichtbar waren die erste Spalte und ein Drittel der
   zweiten, der Rest lag rechts daneben.

   Ein Protokolleintrag hat aber keine „Überschrift, Kunde, Betrag"-Form wie ein Beleg. Deshalb
   hier die allgemeine Form: Die Tabelle trägt table-karten, eine Zelle je Zeile trägt z-kopf
   (die Zeile heißt so), und jede weitere Zelle nennt ihre Beschriftung in data-l. Aus der Zeile
   wird dann ein Block „Beschriftung … Wert" je Angabe – lesbar ohne Schieben, und am Rechner
   bleibt alles die Tabelle, die es war. */
@media (max-width:700px){
  .table-wrap:has(.table-karten){overflow-x:visible;background:none}
  .table.table-karten{display:block;width:100%;font-size:.95rem}
  .table.table-karten thead{display:none}
  .table.table-karten tbody,.table.table-karten tfoot{display:block}
  .table.table-karten tbody tr{display:block;position:relative;padding:12px 14px;border-bottom:1px solid var(--line)}
  .table.table-karten tbody tr:last-child{border-bottom:0}
  .table.table-karten tbody tr:hover{background:none}
  .table.table-karten td{
    display:flex;gap:10px 14px;justify-content:space-between;align-items:baseline;
    padding:2px 0;border:0;text-align:start;white-space:normal;overflow-wrap:anywhere;
  }
  .table.table-karten td[data-l]::before{
    content:attr(data-l);flex:none;color:var(--muted);font-size:.82rem;font-weight:500;
  }
  .table.table-karten td.num{font-variant-numeric:tabular-nums}
  /* Die Zeile heißt so: groß, dunkel, ohne Beschriftung – und ohne die Linie, die Nebenlinks
     tragen, denn hier ist der ganze Block das Ziel. */
  .table.table-karten td.z-kopf{display:block;font-size:1.04rem;font-weight:600;margin-bottom:4px}
  .table.table-karten td.z-kopf::before{display:none}
  .table.table-karten td.z-kopf a:not(.btn){text-decoration:none}
  /* Was auf dem Telefon nichts beiträgt, bleibt weg; leere Zellen ergeben keinen leeren Block. */
  .table.table-karten td.z-weg,.table.table-karten td:empty{display:none}
  .table.table-karten td.actions{justify-content:flex-end;margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
  .table.table-karten td.actions::before{display:none}
  .table.table-karten td.actions>*{margin:0}
  .table.table-karten td.actions .btn{min-height:44px}
  .table.table-karten .sub{display:block;font-size:.84rem;color:var(--muted)}
  /* Ohne diese Zeile faerbt die Zeile darueber die Warnung grau zurueck: gleiches Gewicht,
     spaeter in der Datei. Gemessen: 1422 px rot, 504 px grau – die Frist verschwand genau da,
     wo die Liste zu Bloecken wird. */
  .table.table-karten .sub.sub-warn{color:var(--red)}
  /* Die ablaufende Zeile als Flaeche, nicht als Streifenmuster: in der Kartenform traegt das
     tr die Polsterung, die Zellen sind Bloecke mit Zwischenraum. */
  .table.table-karten tbody tr.pk-bald{background:var(--amber-50)}
  .table.table-karten tfoot tr{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border:0}
  .table.table-karten tfoot td{padding:0}
  /* Eine leere Liste zeigt ihr Bild, keinen Block mit Beschriftungen. */
  .table.table-karten tbody tr:has(td[colspan]) {padding:0}
  .table.table-karten td[colspan]{display:block}
}

/* ---------- Tippflächen und Feldgrößen auf dem Telefon: nachgemessen ----------
   Gemessen auf zehn Seiten bei 390, 768 und 1024 Pixeln. Drei Befunde, die bleiben mussten:

   – Die Filter waren 43,86 Pixel hoch. Knapp daneben ist auch daneben: Die 44 Pixel sind kein
     runder Wunschwert, sondern die Fläche, die ein Daumen trifft.
   – Die Felder der Verwaltung trugen 13,3 bis 13,8 Pixel Schrift. Safari auf dem iPhone zoomt beim
     Antippen in jedes Feld unter 16 Pixeln hinein; danach steht die Seite schief und muss von Hand
     zurückgeschoben werden. Der Positionseditor hatte das schon, die übrigen Felder nicht.
   – „Jetzt eintragen" im Hinweisband war 84 × 19 Pixel. Ein Innenabstand über und unter dem Wort
     vergrößert die Fläche, ohne den Textfluss zu verändern. */
@media (max-width:700px){
  .pill{display:inline-flex;align-items:center;min-height:44px}
  .tab{display:inline-flex;align-items:center;min-height:44px}
  details.collapse>summary.card-head,details.card>summary.card-head{min-height:44px}
  .skip{padding:12px 14px}
  :where(.banner,.explain,.hinweis,.notice,.card-foot,.consent) a:not(.btn):not(.pill){padding-block:13px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,textarea{font-size:16px}
  /* Das Auswahlkästchen der Belegliste bleibt 22 Pixel groß – seine Tippfläche nicht. Die
     Beschriftung liegt unsichtbar darüber und misst 44 Pixel; der Mittelpunkt bleibt derselbe. */
  .table td.c-sel .sel-box{position:absolute;inset:50% auto auto 50%;width:44px;height:44px;
    transform:translate(-50%,-50%);cursor:pointer}
}
.table .c-sel{position:relative}
.sel-box{display:block}
/* Weiß auf #1a9a66 erreicht 3,58:1 und bleibt damit unter den 4,5, die kleine Schrift braucht. */
.btn-success,.btn-success:hover{background:#157f4e}
.btn-success:hover{background:#12603c}

/* ---------- Die letzten Tippflächen, nachgemessen bei 390 Pixeln ---------- */
@media (max-width:700px){
  /* Kästchen mit Erklärtext: Die Beschriftung war 35 Pixel hoch. Sie ist bei einem Kästchen das
     Ziel, auf das der Daumen zielt – nicht das Kästchen. */
  .field.check>label{min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  /* 13 Pixel Innenabstand ergaben 43 – einen zu wenig. */
  :where(.banner,.explain,.hinweis,.notice,.card-foot,.consent) a:not(.btn):not(.pill){padding-block:14px}
  /* Der Betreff im Postausgang klappt die ganze E-Mail auf und war 23 Pixel hoch. */
  .table.table-karten summary,.table.table-karten td.z-kopf>details>summary{min-height:44px;display:flex;align-items:center}
}

/* ---------- Tablet: 701 bis 900 Pixel ----------
   Bis 700 gilt die Telefonansicht, darueber stand die Seitenleiste mit 36 Pixel hohen Zeilen da –
   auf einem iPad im Hochformat (768) ist das eine Tippflaeche fuer die Maus, nicht fuer den Daumen.
   Gemessen: Menuezeile 221 x 36, Einwilligung „Einstellungen" 518 x 27. */
@media (max-width:900px){
  .nav-item{min-height:44px}
  .consent-mehr>summary{min-height:44px;display:flex;align-items:center}
  .skip{padding:12px 14px}
}

/* ---------- Tippflaechen auch auf dem Tablet und auf Beruehrungsgeraeten ----------
   Bis hier galten die 44 Pixel nur bis 700 Pixel Breite. Ein iPad im Hochformat ist 768 Pixel
   breit und wird mit dem Finger bedient: Gemessen standen dort die Reiter der Verwaltung mit
   33 Pixeln, „Einklappen" mit 35 und das Erklaerzeichen mit 13. Deshalb zweimal:

   – bis 900 Pixel, weil dort auch die Felder schon auf 16 Pixel umschalten;
   – und zusaetzlich fuer jedes Geraet mit groberem Zeiger, unabhaengig von der Breite. Ein
     Tablet im Querformat ist 1024 Pixel breit und hat trotzdem keine Maus. Diese Abfrage kann
     der Messlauf nicht pruefen – er kennt nur Breiten. */
@media (max-width:900px),(pointer:coarse){
  .sub-nav-i{min-height:44px;padding:10px 14px}
  .nav-item{min-height:44px}
  .consent-mehr>summary{min-height:44px;display:flex;align-items:center}
  .skip{padding:12px 14px}
  .nav-collapse{min-height:44px}
  .dd-menu .dd-item,.dd-sub>summary{min-height:44px}
  .pill{display:inline-flex;align-items:center;min-height:44px}
  .hint{position:relative}
  .hint::after{content:"";position:absolute;inset:-16px}
  .tabs>.hint::after{inset:-8px 0}
  :where(.banner,.explain,.hinweis,.notice,.card-foot,.consent,.brotkrumen) a:not(.btn):not(.pill){padding-block:14px}
}
/* Dieselben drei Flaechen, die auf dem Telefon schon 44 Pixel haben, auch auf dem Tablet:
   die Beschriftung eines Kaestchens (gemessen 261 x 35), ein aufklappbarer Kartenkopf (108 x 41)
   und der Unternehmensumschalter in der Kopfleiste (36 Pixel breit). */
@media (max-width:900px),(pointer:coarse){
  .field.check>label{min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  details.collapse>summary.card-head,details.card>summary.card-head{min-height:44px}
  .company-switch>summary{min-width:44px}
  .table.table-karten summary,.table.table-karten td.z-kopf>details>summary{min-height:44px;display:flex;align-items:center}
}
/* Die Zeichenknoepfe der Kopfleiste: 36 Pixel breit (der Benachrichtigungszaehler) und 6 Pixel
   Abstand – zwei Nachbarn, die der Daumen verwechselt. */
@media (max-width:900px),(pointer:coarse){
  .topbar details>summary.btn,.topbar>.btn{min-width:44px;justify-content:center}
  .topbar{gap:8px}
}
/* Links in einer Kennzahl-Kachel: Deckt ein .kpi-link die ganze Kachel ab, liegt er als
   positioniertes Element über allem, was danach kommt – das Fragezeichen war deshalb einmal gar
   nicht antippbar. Dasselbe gilt für „Protokoll ansehen" und „Einrichten" in der Unterzeile. */
.kpi .sub a,.kpi .value a{position:relative;z-index:1}

/* ---------- Touch: sofort reagieren, sichtbar quittieren (4.10.2026) ----------
   touch-action:manipulation nimmt dem Browser das Warten auf einen möglichen Doppeltipp-Zoom.
   Den grauen Standard-Blitz von Safari ersetzt eine eigene, ruhige Rückmeldung: Knöpfe geben
   kurz nach, Zeilen und Karten färben sich – so sieht man, dass der Tipp angekommen ist. */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label,select,[role=button],tr.row-link{touch-action:manipulation}
@media (hover:none){
  .btn{transition:transform .08s ease,background-color .12s ease,box-shadow .12s ease}
  .btn:active{transform:scale(.97)}
  .dd-item:active,.nav-item:active,.tabbar a:active,tr.row-link:active td,.table-karten tr:active{background:var(--akzent-50,#eef5ff)}
  a.card-link:active,.card-link:active{transform:scale(.99)}
}

/* ---------- Listen auf dem Telefon: jede Zeile eine eigene Karte (4.10.2026) ----------
   Vorher trennte nur eine feine Linie die Belege; Nummer, Kunde und Betrag des einen liefen in den
   nächsten über. Jetzt steht jeder Beleg auf eigenem Grund, mit Abstand, und ein Streifen am Rand
   sagt den Stand schon vor dem Lesen: rot überfällig, indigo offen, gelb teilbezahlt, grün bezahlt. */
@media (max-width:700px){
  .table:has(td.z-titel) tbody{display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--bg)}
  .table:has(td.z-titel) tbody tr,
  .table:has(td.z-titel) tbody tr:last-child{border:1px solid var(--line);border-radius:14px;background:var(--panel);
    box-shadow:none;border-inline-start:4px solid var(--zt,var(--line-strong));padding:12px 14px 12px 12px}
  .table:has(td.z-titel) tbody tr:has(.s-offen){--zt:var(--st-offen)}
  .table:has(td.z-titel) tbody tr:has(.s-teilbezahlt){--zt:var(--amber)}
  .table:has(td.z-titel) tbody tr:is(:has(.s-bezahlt),:has(.s-angenommen),:has(.s-erledigt)){--zt:var(--green)}
  .table:has(td.z-titel) tbody tr:has(.s-ueberfaellig){--zt:var(--red)}
  .table:has(td.z-titel) tbody tr:has(.s-entwurf){--zt:var(--line-strong)}
  .table:has(td.z-titel) tbody tr:is(:has(.s-storniert),:has(.s-abgelehnt)){--zt:var(--muted-2)}
  .table:has(td.z-titel) td.z-titel{font-size:1rem}
  .table:has(td.z-titel) td.z-betrag{font-size:1.2rem;letter-spacing:-.01em}
  .table:has(td.z-titel) td.z-kunde{color:var(--text);font-weight:500}
}
/* Lange Angaben (E-Mail-Adressen, Kundennamen) brechen in der Karte um, statt in die Nachbarspalte
   zu laufen – gemessen in der Kundenliste: Die Adresse lag über dem Umsatzbetrag. */
@media (max-width:700px){.table:has(td.z-titel) td{min-width:0;overflow-wrap:anywhere}}

/* Verwaltung und Einwilligungsbanner auf dem Telefon. Breit sind Knopf, Kurztext und Klappkopf unsichtbar. */
.sub-nav-auf,.consent-kurz,.tel-klapp>summary{display:none}
@media (max-width:700px){
  .consent-lang{display:none}
  .consent-kurz{display:inline}
  /* Zu: nur der Knopf mit dem aktuellen Bereich. Auf: alle Bereiche als Zeilen darunter. */
  .sub-nav-viel .sub-nav-auf{display:flex;align-items:center;gap:8px;flex:1 1 100%;min-height:44px;padding:8px 12px;border:0;border-radius:99px;background:var(--akzent-50);color:var(--navy);font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;text-align:start}
  .sub-nav-auf>span{flex:1}
  .sub-nav-auf .nav-count{margin-inline-start:0}
  .sub-nav-auf>.ico:last-child{transition:transform .15s}
  .sub-nav-viel.offen .sub-nav-auf>.ico:last-child{transform:rotate(180deg)}
  .sub-nav-viel:not(.offen)>.sub-nav-i,.sub-nav-viel:not(.offen)>.sub-nav-g{display:none}
  .sub-nav-viel.offen>.sub-nav-g{display:block;flex:1 0 100%;padding:6px 4px 0}
  :root[data-theme=dark] .sub-nav-auf{background:rgba(42,116,230,.14);color:var(--text)}
  .tel-klapp>summary{display:flex;align-items:center;gap:8px;min-height:44px;margin-bottom:8px;font-weight:600;cursor:pointer}
}

/* ---------- Handy-Durchsicht 14.10.2026 (docs/review-handy-2026-10-14.md) ----------
   Schrift: In der Anwendung war die Grundschrift auf dem Telefon 14,5 Pixel; Hinweise unter Feldern,
   Nebenangaben und Beschriftungen landeten bei 10 bis 12,8 Pixeln (gemessen 89 bis 148 Textstellen
   unter 13 Pixeln je Seite). Jetzt: 16 Pixel Grundschrift wie iOS und Android, Hinweise und
   Nebenangaben mindestens 14 Pixel, Großbuchstaben-Beschriftungen 13, Kennzeichen und Zähler 12.
   Die Website (chrome-site) hat ihr eigenes Stilblatt und bleibt, wie sie ist. */
@media (max-width:700px){
  html:has(> body:not(.chrome-site)){font-size:100%}
  body:not(.chrome-site) :is(small,.help,.sub,.desc,.legend,.steps,.range-sep,.tl-datum,.hinweis,.field label,
    .kpi .label,.kpi .sub,.table .sub,.dl .sub,.kalk-grid .lbl,.kalk-grid .sub,.checks li .sub,.preview-note,
    .preview-head .muted,.beleg-zusatz,.beleg-qr .muted,.drawer-timeline time,.wahl-marke,.mitglied-name .sub,
    .fassungen .sub,.einst-was,.einst-stand,.anfrage-sub,.anfrage-vorschau,.btn-sm,.quick .btn,.consent-zweck small,
    .layout-opt small,.timeline,.tl-text,.flash,.kalk-rabatt,.table.table-karten .sub){font-size:.875rem}
  /* Feste Angaben im HTML (style="font-size:.8…rem") – ohne Vorrang bleiben sie klein. */
  body:not(.chrome-site) :is([style*="font-size:.7"],[style*="font-size:.8"]){font-size:.875rem!important}
  /* Spaltenbeschriftungen in Großbuchstaben wirken größer, als sie sind: 13 Pixel. */
  body:not(.chrome-site) :is(.table th,.pos-table th,.doc-preview .pv-items th,.drawer-body h3,.drawer-zahlen .label,
    .sub-nav-g,.profil-fakten dt,.sp-text small){font-size:.8125rem}
  .pos-table td[data-l]::before,.pos-table .c-nr,.pos-table .c-nr::before{font-size:.8125rem}
  .table:has(td.z-titel) td[data-l]::before,.table.table-karten td[data-l]::before{font-size:.875rem}
  /* Kennzeichen und Zähler: 12 Pixel, sonst sprengen sie Kartenköpfe und Filterzeilen. */
  body:not(.chrome-site) :is(.badge,.pill-count,.tab-zahl,.nav-count,.notif-count,.zeichen,.plan-chip){font-size:.75rem}
  /* Tab-Leiste: 12 statt 10,4 Pixel; fünf Beschriftungen passen auch auf 360 Pixel. */
  .tabbar .tab-i{font-size:.75rem}
}

/* Belegvorschau auf dem Telefon als Liste statt Tabelle: Die Tabelle war 358 Pixel breit in
   293 Pixeln Platz, die Spalte „Gesamt“ lag rechts außerhalb, die Beschreibung brach auf
   100 Pixeln um. Jetzt: Nummer und Bezeichnung über die ganze Breite, darunter „Menge × Preis · USt.“
   und rechts die Summe. */
@media (max-width:700px){
  .doc-preview .pv-scroll{overflow-x:visible}
  .doc-preview .pv-items,.doc-preview .pv-items tbody{display:block;width:100%}
  .doc-preview .pv-items thead{display:none}
  .doc-preview .pv-items tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:10px 0;border-bottom:1px solid var(--line)}
  .doc-preview .pv-items td{display:block;padding:0;border:0}
  .doc-preview .pv-items .pv-pos{flex:0 0 1.5em;color:var(--muted)}
  .doc-preview .pv-items .pv-bez{flex:1 1 calc(100% - 1.5em - 6px);min-width:0;overflow-wrap:anywhere}
  .doc-preview .pv-items .pv-menge{margin-inline-start:calc(1.5em + 6px)}
  .doc-preview .pv-items :is(.pv-menge,.pv-preis,.pv-ust){color:var(--muted);font-size:.875rem}
  .doc-preview .pv-items .pv-preis::before{content:"× "}
  .doc-preview .pv-items .pv-ust::before{content:"· "}
  .doc-preview .pv-items .pv-summe{margin-inline-start:auto;font-weight:600}
}

/* Zeilentabellen (Anlage EÜR, Umsatzsteuer-Voranmeldung) auf dem Telefon: Zeile oder Kennzahl links,
   Bezeichnung in der Mitte (sie bricht um), Betrag rechts. Wo es zwei Beträge gibt, stehen sie mit
   Beschriftung (data-l) darunter. Vorher 364 und 537 Pixel breit in 326 Pixeln Platz. */
@media (max-width:700px){
  .table-wrap:has(.table-zeilen){overflow-x:visible;background:none}
  .table.table-zeilen{display:block;width:100%}
  .table.table-zeilen thead{display:none}
  .table.table-zeilen tbody,.table.table-zeilen tfoot{display:block}
  .table.table-zeilen tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:9px 14px;border-bottom:1px solid var(--line)}
  .table.table-zeilen td{display:block;padding:0;border:0;white-space:normal;overflow-wrap:break-word}
  /* Die Bezeichnung wird nie schmaler als ihr längstes Wort; passt der Betrag daneben nicht mehr, steht er darunter rechts. */
  .table.table-zeilen td:nth-child(2){flex:1 1 0}
  .table.table-zeilen td.num:last-child:not([data-l]){margin-inline-start:auto}
  .table.table-zeilen td.num{white-space:nowrap;overflow-wrap:normal}
  .table.table-zeilen tbody td:first-child,.table.table-zeilen tfoot td:first-child{flex:0 0 2.4em;position:static;background:none;text-align:start;color:var(--muted)}
  .table.table-zeilen td[data-l]{flex:1 1 100%;padding-inline-start:calc(2.4em + 10px);display:flex;justify-content:space-between;gap:10px}
  .table.table-zeilen td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:.875rem;white-space:normal}
  .table.table-zeilen td[data-l]:empty{display:none}
  .table.table-zeilen .sub{display:block}
  /* Summenzeile der Kartenform (Monatsübersicht): wie eine Karte, nicht als Zeile nebeneinander. */
  .table.table-karten tfoot tr:has(td.z-kopf){display:block;padding:12px 14px;border-top:1px solid var(--line-strong)}
}

/* Kundenlink: Auf dem Telefon steht der Link über die ganze Breite, Kopieren und Teilen darunter
   nebeneinander – drei Elemente in einer Zeile ließen vom Link 60 Pixel übrig. */
@media (max-width:700px){
  .range>#shareLink{flex:1 1 100%}
  .range>[data-copy],.range>[data-share]{flex:1 1 0;justify-content:center}
}
/* E-Mail-Adressen brechen in schmalen Spalten an beliebiger Stelle um, statt die Nachbarspalte zu überdecken. */
.mail-link{overflow-wrap:anywhere}

/* Dashboard „Fällige Rechnungen“ als Karte: links Nummer und Kunde, rechts Status, Frist und Betrag.
   Mit 16 Pixeln Grundschrift war die Dreispaltentabelle 374 Pixel breit in 326 Pixeln Platz. */
@media (max-width:700px){
  .table.table-faellig td.z-titel{grid-row:1/3}
  .table.table-faellig td.z-status .sub{display:block;margin-top:2px}
  .table.table-faellig td.z-betrag{grid-row:2}
  /* Knöpfe im Positionsmenü erben die Schrift (sonst 13,3 Pixel Browser-Vorgabe); Platzhalter-Chips 14 Pixel. */
  .pos-mehr .dd-item{font:inherit;font-size:1rem}
  body:not(.chrome-site) .kbd{font-size:.875rem}
}

/* ================= Grundstil der Anwendung (Runde 3, 21.10.2026) =================
   Ein Stil für alle Seiten hinter der Anmeldung (C12 in docs/review-bedienung-2026-10-20.md). Die Website bleibt, wie sie ist:
   site.css baut auf denselben Grundbausteinen auf (.btn, .card, Felder) – deshalb stehen die neuen Werte unter .chrome-app bzw.
   .chrome-bare und nicht an den Bausteinen selbst. Die Seitenabschnitte danach (Dienstplan, Kalender, Übersicht …) bauen darauf auf.
   – Abstände 8/16/24 (--s1 … --s3), Innenrand der Karten 20 px (Telefon 16).
   – Karten ohne Schatten, feine Linie; Schatten nur für Menüs, Blätter und Dialoge.
   – Kartenkopf ist Überschrift: kein Strich darunter, Titel links, rechts höchstens ein Knopf oder ein Zähler. Marken im Kopf
     werden zu ruhigem Text mit Farbpunkt – Flächenmarken bleiben dem Status in Listen.
   – Ein gefüllter Knopf je Seite (Navy); alle übrigen hell mit Rahmen oder als Text. „Erfolgreich“ (Grün) ist kein zweiter Hauptknopf.
   – Felder und Knöpfe 44 px, kleine Knöpfe 34 px (auf Touch 44), Fokusring sichtbar.
   – Tabellen: Zeilenlinien, Kopf ohne Fläche, Zeilen 44 px.
   – Seitentitel 1,75 rem (Telefon 1,4), Kartentitel 1,1 rem.
   – Statusfarben aus einem Satz Tokens (--st-…), hell und dunkel. */
.chrome-app .page-head{margin-bottom:var(--s3);gap:var(--s2)}
.chrome-app .page-head .topbar-title h1{line-height:1.2}
.chrome-app .subtitle{font-size:.95rem;margin-top:4px}
.titel-zeile{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.card-head>.titel-zeile{flex:1;min-width:0}
.card-head .titel-zeile h2{flex:none}
.chrome-app .grid{gap:var(--s2)}
.chrome-app .card{box-shadow:var(--shadow-sm);border:1px solid var(--line);margin-bottom:var(--s3)}
.chrome-app .card-head{border-bottom:0;padding:var(--pad) var(--pad) 0;gap:12px;flex-wrap:wrap;row-gap:var(--s1)}
.chrome-app .card-head h2{font-size:var(--fs-abschnitt);font-weight:600;letter-spacing:-.01em}
/* Zeichen nur in Navigation, Hauptknopf und Leerzuständen (C12 Nr. 12) – nicht vor jedem Kartentitel. */
.chrome-app .card-head h2>.ico{display:none}
.chrome-app .card-head small{color:var(--muted);font-size:.88rem}
.chrome-app .card-body:not(.tight){padding:var(--s2) var(--pad) var(--pad)}
.chrome-app .card>.card-body:first-child:not(.tight),.chrome-app .card>form>.card-body:first-child:not(.tight){padding-top:var(--pad)}
.chrome-app .card-head+.card-body.tight,.chrome-app .card-head+.table-wrap{margin-top:12px}
.chrome-app details>summary.card-head{padding-bottom:var(--s2)}
.chrome-app details[open]>summary.card-head{padding-bottom:0}
.chrome-app .card-foot{padding:var(--s2) var(--pad)}
/* Marken im Kartenkopf: Text mit Farbpunkt statt Fläche. */
.chrome-app .card-head .badge{background:none;padding:0;border-radius:0;font-weight:500;font-size:.85rem;color:var(--muted);gap:6px;text-decoration:none}
.chrome-app .card-head .badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none}
.chrome-app .card-head .badge:is(.b-green,.s-bezahlt,.s-angenommen,.s-erledigt)::before{background:var(--green)}
.chrome-app .card-head .badge:is(.b-red,.s-ueberfaellig,.s-abgelehnt)::before{background:var(--red)}
.chrome-app .card-head .badge:is(.b-amber,.s-teilbezahlt)::before{background:var(--amber)}
.chrome-app .card-head .badge:is(.b-blue,.b-teal,.s-offen)::before{background:var(--akzent)}
.chrome-app .card-head .badge .ico{display:none}
/* Statusmarken in Listen: ein Farbsatz für hell und dunkel. */
.chrome-app .badge.s-offen,.chrome-app .badge.b-blue{background:var(--st-offen-bg);color:var(--st-offen)}
.chrome-app .badge.s-teilbezahlt,.chrome-app .badge.b-amber{background:var(--st-warn-bg);color:var(--st-warn)}
.chrome-app .badge:is(.s-bezahlt,.s-angenommen,.s-erledigt,.b-green){background:var(--st-ok-bg);color:var(--st-ok)}
.chrome-app .badge:is(.s-ueberfaellig,.s-abgelehnt,.b-red){background:var(--st-err-bg);color:var(--st-err)}
.chrome-app .badge:is(.s-entwurf,.b-neutral){background:var(--st-neutral-bg);color:var(--st-neutral)}
.chrome-app .card-head .badge:is(.s-offen,.b-blue,.s-teilbezahlt,.b-amber,.s-bezahlt,.s-angenommen,.s-erledigt,.b-green,.s-ueberfaellig,.s-abgelehnt,.b-red,.s-entwurf,.b-neutral){background:none;color:var(--muted)}
/* Ein Zeichen statt einer Marke (z. B. „versendet“ in der Belegliste). */
.zeichen-mark{display:inline-flex;vertical-align:middle;margin-inline-start:6px;color:var(--muted-2)}
.text-ruhig{color:var(--muted)}
/* Kennzahlen: Kacheln ohne Schatten. */
.chrome-app .kpi,.chrome-app .kpi:hover{box-shadow:var(--shadow-sm)}
/* Knöpfe: 44 px hoch, flach. */
/* Runde 7: am Rechner 40 px (wie Linear, Stripe), auf Touch und bis 900 px weiter 44 px – siehe die Abfrage darunter. */
:is(.chrome-app,.chrome-bare) .btn{min-height:40px;box-shadow:none}
:is(.chrome-app,.chrome-bare) .btn-sm{min-height:32px}
.chrome-app .btn-icon{min-width:40px;justify-content:center}
.chrome-app .btn-success,.chrome-app .btn-success:hover{background:var(--panel);border-color:color-mix(in srgb,var(--green) 50%,var(--line-strong));color:var(--st-ok)}
.chrome-app .btn-success:hover{background:var(--st-ok-bg)}
:root[data-theme=dark] .chrome-app .btn-success{background:var(--panel);color:var(--st-ok);border-color:#2b5a40}
@media (max-width:900px),(pointer:coarse){:is(.chrome-app,.chrome-bare) .btn,:is(.chrome-app,.chrome-bare) .btn-sm{min-height:44px}.chrome-app .btn-icon{min-width:44px}}
/* Ein Hauptknopf je Seite (C12 Nr. 5). Gefüllt bleibt der Hauptknopf im Seitenkopf; steht dort keiner, der erste der Seite. Weitere
   – in späteren Karten, Listenzeilen, Kartenköpfen – erscheinen als normaler Knopf. „Neu“ in der Kopfleiste ist ein Weg, kein
   Hauptknopf der Seite. Menüs, Dialoge und die Speichern-Leiste des Editors stehen nicht in Karten und bleiben, wie sie sind. */
.chrome-app .topbar .btn-neu,
.chrome-app .content:has(.page-actions .btn-primary) .card .btn-primary,
.chrome-app .content .card:has(.btn-primary) ~ .card .btn-primary,
.chrome-app .content :is(.table,.tasks,.card-head,.checks) .btn-primary{background:var(--panel);border-color:var(--line-strong);color:var(--text);box-shadow:none}
.chrome-app .topbar .btn-neu:hover,
.chrome-app .content:has(.page-actions .btn-primary) .card .btn-primary:hover,
.chrome-app .content .card:has(.btn-primary) ~ .card .btn-primary:hover,
.chrome-app .content :is(.table,.tasks,.card-head,.checks) .btn-primary:hover{background:var(--gray-50)}
:root[data-theme=dark] .chrome-app .topbar .btn-neu,
:root[data-theme=dark] .chrome-app .content:has(.page-actions .btn-primary) .card .btn-primary,
:root[data-theme=dark] .chrome-app .content .card:has(.btn-primary) ~ .card .btn-primary,
:root[data-theme=dark] .chrome-app .content :is(.table,.tasks,.card-head,.checks) .btn-primary{background:var(--panel);color:var(--text);border-color:var(--line-strong)}
/* Felder: 44 px, sichtbarer Fokusring. */
:is(.chrome-app,.chrome-bare) :is(input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=search],input[type=tel],input[type=url],input[type=time],input:not([type]),select){min-height:var(--feld-h)}
.chrome-app .cmdk-head input[type=search]{min-height:0}
:is(.chrome-app,.chrome-bare) :is(input,select,textarea):focus{border-color:var(--akzent);box-shadow:var(--ring)}
:root[data-theme=dark] :focus-visible{outline-color:#8ec1ff}
/* Tabellen: Zeilenlinien, Kopf ohne Fläche. */
/* Runde 7: Spaltenköpfe in normaler Schreibweise, kleiner und gedämpft – Versalien wirkten laut. */
.chrome-app .table th,.chrome-app .pos-table th{background:none;color:var(--muted);font-size:var(--fs-klein);font-weight:500;text-transform:none;letter-spacing:0;border-bottom-color:var(--line)}
/* Zeilen 44 px – nur als Tabelle; auf dem Telefon werden viele Listen zu Karten mit eigenen Abständen. */
@media (min-width:701px){
  .chrome-app .table td{padding-top:11px;padding-bottom:11px}
  .chrome-app .table-sm td,.chrome-app .table-sm th{padding-top:8px;padding-bottom:8px}
}
.chrome-app .table tfoot td{background:none}
/* Erklärung in einem Satz und Leerzustand (leer_zustand()). */
.leer{padding:32px 20px}
.leer .illu{margin-bottom:4px}
.leer-satz{margin:8px auto 16px;max-width:60ch;font-size:1rem;color:var(--text)}
.leer-satz .i-tip-text{font-size:.88rem}
.hinweis-zeile{margin:0 0 var(--s2);font-size:.92rem;color:var(--muted)}
.hinweis-zeile .i-tip{margin-inline-end:4px}
.hinweis-zeile b{color:var(--text);font-weight:600}
.abschnitt-titel{font-size:1.1rem;font-weight:600;margin:var(--s1) 0 12px}

/* ---------- Formular-Muster: „Weitere Angaben (n)“ und (i)-Hinweis (aus Runde 1) ----------
   details.mehr hält alles, was nicht Pflicht ist; offen, wenn darin etwas steht oder die letzte Eingabe fehlschlug (details_mehr()).
   .i-tip zeigt Erklärtext erst auf Tippen – kein Schweben, auf dem Telefon als Blatt über der Tab-Leiste. */
details.mehr{margin:0 0 var(--s2)}
details.mehr>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--akzent-600);font-weight:500;font-size:.92rem}
details.mehr>summary::-webkit-details-marker{display:none}
details.mehr>summary .ico{transition:transform .15s}
details.mehr[open]>summary .ico{transform:rotate(90deg)}
details.mehr>.mehr-inhalt{padding-top:6px}
.form-grid>details.mehr,.form-grid>.mehr-voll{grid-column:1/-1}
:root[data-theme=dark] details.mehr>summary{color:#93c2ff}
.i-tip{display:inline-block;position:relative;vertical-align:middle;margin-inline-start:2px}
.i-tip>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;border-radius:50%;color:var(--muted-2)}
.i-tip>summary::-webkit-details-marker{display:none}
.i-tip[open]>summary,.i-tip>summary:hover{color:var(--akzent-600);background:var(--gray-50)}
.i-tip-text{position:absolute;z-index:25;top:calc(100% + 4px);inset-inline-start:0;width:max-content;min-width:240px;max-width:min(440px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:12px 14px;font-size:.86rem;font-weight:400;line-height:1.5;color:var(--text);text-align:start;white-space:normal;letter-spacing:0;text-transform:none}
h1 .i-tip,h2 .i-tip,.card-head .i-tip,.titel-zeile .i-tip{font-size:1rem}
@media (max-width:700px){.i-tip-text{position:fixed;inset-inline:12px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom));min-width:0;max-width:none;width:auto}}
/* Abschnitte eines langen Formulars (Einstellungen → Firma & Steuern): Überschrift zum Zuklappen. */
details.abschnitt{border-top:1px solid var(--line);padding:4px 0}
details.abschnitt:first-of-type{border-top:0}
details.abschnitt>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:48px;font-weight:600;font-size:1rem}
details.abschnitt>summary::-webkit-details-marker{display:none}
details.abschnitt>summary small{font-weight:400;color:var(--muted);font-size:.85rem}
details.abschnitt>summary::after{content:"";width:8px;height:8px;margin-inline-start:auto;border-inline-end:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);transform:rotate(45deg);transition:transform .15s}
details.abschnitt[open]>summary::after{transform:rotate(-135deg)}
details.abschnitt>.abschnitt-inhalt{padding:4px 0 12px}
.form-actions.klebt{position:sticky;bottom:0;z-index:5;background:var(--panel);margin:0 calc(-1 * var(--pad)) calc(-1 * var(--pad));padding:12px var(--pad);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}
@media (max-width:700px){.form-actions.klebt{bottom:calc(56px + env(safe-area-inset-bottom));margin:0 -16px -16px;padding:12px 16px}}

/* ---------- Seitenleiste in Gruppen (F1) ----------
   Eine Gruppe ist ein <details>: am Rechner auf- und zuklappbar (app.js merkt sich die Wahl), im Blatt auf dem Telefon und in der
   schmalen Leiste immer offen. Zugeklappt trägt der Kopf die Summe der Zähler. Der Punkt an „Einstellungen“ meldet Rechtstexte
   mit Platzhaltern (F10) – ohne Band über jeder Seite. */
.nav-sec{display:flex;flex-direction:column;gap:1px}
.nav-sec>summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:11px;min-height:36px;padding:7px 12px;margin-top:6px;border-radius:var(--radius-sm);color:rgba(226,234,244,.82);font-size:.88rem;font-weight:600}
.nav-sec>summary::-webkit-details-marker{display:none}
.nav-sec>summary>.ico:first-child{width:18px;height:18px;opacity:.72}
.nav-sec>summary>span:not(.nav-punkt){flex:1;min-width:0}
.nav-sec>summary:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-sec>summary:focus-visible{outline:2px solid #c6ddff;outline-offset:-2px}
.nav-sec-pfeil{opacity:.6;transition:transform .15s}
.nav-sec[open]>summary .nav-sec-pfeil{transform:rotate(180deg)}
.nav-sec[open]>summary .nav-sec-zahl,.nav-sec[open]>summary>.nav-punkt{display:none}
.nav-sec-inhalt{display:flex;flex-direction:column;gap:1px;margin-inline-start:20px;padding-inline-start:8px;border-inline-start:1px solid rgba(255,255,255,.1)}
.nav-sec-inhalt .nav-item.active::before{inset-inline-start:-9px}
.nav-punkt{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#f0b429;margin-inline-start:6px;box-shadow:0 0 0 2px #0c2239}
.nav-item .nav-punkt{margin-inline-start:auto}
.nav-item .nav-count+.nav-punkt{margin-inline-start:6px}
@media (min-width:901px){
  body.nav-mini .nav-sec>summary{display:none}
  body.nav-mini .nav-sec-inhalt{margin:0;padding:0;border:0}
  body.nav-mini .nav-item .nav-punkt{position:absolute;top:6px;right:8px;margin:0}
}
@media (max-width:900px) and (min-width:701px){.nav-sec>summary{min-height:44px}}
@media (max-width:700px){
  /* Im Blatt: Gruppenkopf als Zwischenüberschrift, Einträge als Kacheln in zwei Spalten. */
  .nav:has(.nav-sec)>.nav-item{grid-column:1/3}
  .nav-sec{grid-column:1/3;display:block}
  .nav-sec>summary{pointer-events:none;min-height:0;margin:0;padding:12px 4px 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.55)}
  .nav-sec>summary>.ico,.nav-sec>summary .nav-sec-zahl,.nav-sec>summary>.nav-punkt{display:none}
  .nav-sec-inhalt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0;padding:0;border:0}
}
:lang(ka) .nav-sec>summary{text-transform:none}

/* ---------- Tab-Leiste: „+“-Blatt und rote Zahl an „Übersicht“ ---------- */
.tab-plus>summary{list-style:none}
.tab-plus>summary::-webkit-details-marker{display:none}
.tab-zahl{position:absolute;top:5px;inset-inline-start:calc(50% + 4px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;line-height:18px;text-align:center}
:root[data-theme=dark] .tab-zahl{background:#c93c3c}
:root[data-theme=dark] .tabbar .tab-neu{background:#1d4c80}
@media (max-width:700px){
  .tabbar .tab-i{position:relative}
  .tabbar .tab-plus{display:flex;align-items:center;justify-content:center}
  .tabbar .tab-plus>.tab-neu{display:flex;align-items:center;justify-content:center}
  .tabbar .tab-plus[open]>.tab-neu .ico{transform:rotate(45deg)}
  .tabbar .tab-neu .ico{transition:transform .15s}
  .tab-plus-menu{position:fixed;left:10px;right:10px;top:auto;bottom:calc(72px + env(safe-area-inset-bottom));min-width:0;max-width:none;width:auto;padding:12px;border-radius:16px;max-height:min(70vh,520px);overflow:auto}
  .tab-plus-titel{display:block;margin:2px 4px 10px;font-size:.88rem;font-weight:600;color:var(--muted)}
  .tab-plus-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tab-plus-i{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:12px;background:var(--gray-50);color:var(--text);font-weight:500;line-height:1.25;text-decoration:none!important}
  .tab-plus-i .ico{flex:none;color:var(--navy-700)}
  :root[data-theme=dark] .tab-plus-i .ico{color:#9cc2ff}
}
@media (prefers-reduced-motion:reduce){.nav-sec-pfeil,.tabbar .tab-neu .ico,details.mehr>summary .ico,details.abschnitt>summary::after{transition:none}}

/* ---------- Telefon: Abstände 16 px ---------- */
@media (max-width:700px){
  .chrome-app .page-head{margin-bottom:var(--s2)}
  .chrome-app .card{margin-bottom:var(--s2)}
  .chrome-app .card-head{padding:var(--s2) var(--s2) 0}
  .chrome-app .card-body:not(.tight){padding:12px var(--s2) var(--s2)}
  .chrome-app .card>.card-body:first-child:not(.tight),.chrome-app .card>form>.card-body:first-child:not(.tight){padding-top:var(--s2)}
  .chrome-app .card-head+.card-body.tight,.chrome-app .card-head+.table-wrap{margin-top:8px}
  .chrome-app details>summary.card-head{padding-bottom:12px}
  .chrome-app .card-foot{padding:12px var(--s2)}
}

/* ---------- Marketing im Admin-Bereich (views/parts/admin_marketing.php) ---------- */
.mkt-kreise{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 14px}
.mkt-kreis{display:flex;align-items:center;gap:6px;font-size:.9rem;padding:4px 0;min-height:32px}
.mkt-ziel,.mkt-fassung{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 14px;min-width:0}
.mkt-zeile{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.mkt-zeile .field{margin:0;flex:1 1 200px;min-width:0}
.mkt-text{white-space:pre-wrap;font-size:.85rem;background:var(--gray-50);padding:10px;border-radius:8px;overflow-wrap:anywhere}
@media (max-width:700px){.mkt-kreise{grid-template-columns:1fr}.mkt-zeile>*{flex:1 1 100%}.mkt-zahlen{grid-template-columns:1fr 1fr}}

/* ---------- Dienstplan und Zeiterfassung (views/dienstplan.php, zeiten.php, abwesenheiten.php, mitarbeiter.php) ----------
   Am Rechner ein Raster Mitarbeiter × Tage, auf dem Telefon eine Tagesliste: Beide stehen im HTML, die Breite entscheidet
   über Klassen – nicht über das hidden-Attribut, das eine Klassenregel mit display überstimmen würde. Keine Hover-Einblendung:
   Warnungen stehen als Zeichen an der Schicht, in der Liste darunter und auf dem Telefon als Text. */
.dp-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:16px}
.dp-leiste .tabs{margin-bottom:0}
.dp-blaettern{display:flex;align-items:center;gap:6px}
.dp-jahr{font-weight:600;min-width:3.5em;text-align:center}
.dp-wahl select{width:auto;max-width:100%}
.dp-raster th,.dp-raster td{vertical-align:top}
.dp-raster thead th{text-align:center;white-space:nowrap}
.dp-raster thead th .sub,.dp-raster .dp-name .sub{display:block;font-weight:400;color:var(--muted);font-size:.75rem}
.dp-raster .dp-name{min-width:150px;text-align:start;white-space:nowrap;font-weight:600}
.dp-woche .dp-zelle{min-width:116px;padding:3px 2px}
.dp-monat .dp-zelle{min-width:44px;padding:4px 3px}
.dp-raster .dp-frei{background:var(--gray-50)}
.dp-raster thead .dp-heute{box-shadow:inset 0 -3px 0 var(--akzent-600);color:var(--text)}
/* Die Namensspalte ist Zeilenkopf (th), soll aber wie eine Zelle aussehen – nicht wie die Spaltenköpfe in Versalien. */
.table.dp-raster tbody th{text-transform:none;letter-spacing:normal;font-size:.9rem;color:var(--text);background:var(--panel);border-bottom:1px solid var(--line)}
:root[data-theme=dark] .table.dp-raster tbody th{background:var(--panel);color:var(--text)}
/* Chips ohne Ring (C12 Nr. 11): farbige Kante, heller Grund in der Farbe der Vorlage, Warnung als roter Rand und Punkt. */
.dp-chip{position:relative;display:block;margin:0 0 4px;padding:4px 7px;border-radius:7px;border:1px solid var(--line);border-inline-start:4px solid var(--f,#0a58ca);background:color-mix(in srgb,var(--f,#0a58ca) 8%,var(--panel));font-size:.8rem;font-weight:600;color:var(--text);text-decoration:none;line-height:1.3;white-space:nowrap}
.dp-chip small{display:block;font-weight:400;color:var(--muted);font-size:.72rem;white-space:normal}
.dp-chip.dp-offen{background:var(--amber-50);border-color:#e8c77a;border-inline-start-color:var(--f,#0a58ca)}
.dp-chip.dp-warn{border-color:var(--red)}
.dp-chip.dp-vorschlag{border-style:dashed;background:var(--akzent-50);color:var(--akzent-600)}
.dp-chip .ico{color:var(--red);margin-inline-end:3px;vertical-align:-2px}
.dp-monat .dp-chip{padding:3px 4px;font-size:.72rem;border-inline-start-width:3px}
a.dp-chip:hover{text-decoration:none;background:color-mix(in srgb,var(--f,#0a58ca) 14%,var(--panel))}
.dp-plus{display:flex;align-items:center;justify-content:center;min-height:30px;border-radius:7px;color:var(--muted);border:1px dashed var(--line-strong)}
.dp-punkt{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:7px;flex:none}
.dp-abw{display:inline-block;padding:2px 7px;border-radius:6px;font-size:.74rem;font-weight:600;margin:0 0 4px;white-space:nowrap}
.dp-abw-urlaub{background:#fef3c7;color:#854d0e}
.dp-abw-krank{background:#fee2e2;color:#991b1b}
.dp-abw-sonstiges{background:var(--gray-50);color:var(--gray-600)}
:root[data-theme=dark] .dp-abw-urlaub{background:#3d300c;color:#fde68a}
:root[data-theme=dark] .dp-abw-krank{background:#421515;color:#fecaca}
.dp-tage{list-style:none;margin:0;padding:0}
.dp-tage-karte{display:none}
.dp-tag{border-bottom:1px solid var(--line);padding:10px 14px}
.dp-tag:last-child{border-bottom:0}
.dp-tag.dp-heute{box-shadow:inset 3px 0 0 var(--akzent-600)}
.dp-tag-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:.9rem;color:var(--gray-600);min-height:32px}
.dp-zeile{display:flex;align-items:center;gap:8px;padding:6px 0}
.dp-zeile-text{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;overflow-wrap:anywhere}
.dp-zeile .sub{display:block;width:100%;font-size:.82rem;color:var(--muted)}
.dp-zeile .sub-warn{color:var(--red)}
.dp-bearb,.dp-tag-neu{min-width:44px;min-height:44px;justify-content:center;flex:none}
.dp-hinweise{margin:6px 0 0;padding-inline-start:18px;font-size:.88rem}
.dp-hinweise li{margin-bottom:4px}
.dp-leer{margin:0 0 12px;font-size:.88rem}
.dp-unter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.dp-kopieren{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 12px}
.dp-kopieren .field{min-width:150px}
.dp-uhr .card-body{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.dp-uhr-stand{display:flex;flex-direction:column;gap:6px}
.dp-uhr-stand .badge{font-size:.85rem;padding:5px 12px;align-self:flex-start}
.dp-uhr-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.dp-kommen{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.dp-kommen .field{margin-bottom:0;min-width:180px}
.dp-stempel{min-height:48px;min-width:132px;justify-content:center;font-size:1rem}
.dp-storniert td{color:var(--muted)}
.dp-storniert td b{text-decoration:line-through}
.dp-entscheiden{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.dp-entscheiden input{width:auto;min-width:150px;flex:1}
.dp-vorlagen{list-style:none;margin:0 0 16px;padding:0}
.dp-vorlagen li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.dp-minus{color:var(--red)}
.dp-kpis .kpi .value{font-size:1.4rem}
@media (max-width:700px){
  .dp-raster-karte{display:none}
  .dp-tage-karte{display:block}
  .dp-blaettern .btn,.dp-leiste .tab{min-height:44px;min-width:44px;justify-content:center}
  .dp-uhr-knoepfe,.dp-kommen,.dp-uhr-knoepfe>form{width:100%}
  .dp-stempel,.dp-kommen .field{width:100%}
  .dp-entscheiden{justify-content:stretch}
  .dp-entscheiden input{flex:1 1 100%}
  .dp-entscheiden .btn{flex:1 1 0;min-height:44px;justify-content:center}
  .dp-kopieren .field{flex:1 1 100%}
}

/* Raster als Editor (Runde 1): Tippziel je Zelle (44 px), Warnpunkt, Pinsel-Chips, Dialog, Tagesliste, einzeilige Kennzahlen. */
.dp-zf{margin:0}
.dp-tipp{-webkit-touch-callout:none;user-select:none;display:block;width:100%;min-height:44px;margin:0;padding:3px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;text-decoration:none}
.dp-tipp:focus-visible{outline:2px solid var(--akzent-600);outline-offset:1px}
.dp-pinsel-an .dp-tipp{cursor:copy}
.dp-tipp-still{cursor:default}
.dp-tipp.dp-wartet{opacity:.45;pointer-events:none}
.dp-dot{position:absolute;top:-5px;inset-inline-end:-5px;width:11px;height:11px;border-radius:50%;background:var(--red);border:2px solid var(--panel)}
.dp-frei-mark{display:flex;align-items:center;justify-content:center;min-height:36px;border-radius:7px;color:var(--muted-2);border:1px dashed var(--line-strong);font-weight:500}
.dp-raster .dp-frei .dp-frei-mark{border-color:transparent}
.dp-tipp:hover .dp-frei-mark{border-color:var(--line-strong);color:var(--text)}
.dp-fuss{text-align:start}
.dp-fuss .btn{min-height:36px}
.dp-werkzeuge{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dp-werkzeuge form{display:inline}
.dp-werkzeuge .btn{min-height:36px}
.dp-vorlagen-leiste{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.dp-vchip{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:4px 12px;border-radius:99px;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);font:inherit;font-size:.85rem;cursor:pointer}
.dp-vchip b{font-weight:600}
.dp-vchip-frei{color:var(--muted);border-style:dashed}
.dp-vchip-aktiv{outline:2px solid var(--akzent-600);outline-offset:1px;background:var(--akzent-50)}
.dp-vneu summary{min-height:36px}
.dp-vmenu{min-width:320px;max-width:calc(100vw - 24px);padding:12px 14px}
.dp-vmenu .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.dp-vmenu .field{margin-bottom:10px}
.dp-vmenu .dp-vorlagen{margin-bottom:10px}
.dp-vmenu .dp-vorlagen li{font-size:.85rem}
.dp-vmenu .dp-vorlagen form{margin-inline-start:auto}
.dp-ki-menu{min-width:320px;max-width:calc(100vw - 24px);padding:12px 14px;font-size:.88rem}
.dp-ki-menu p{margin:0 0 10px;color:var(--gray-600)}
.dp-ki-menu .field{margin-bottom:12px}
.dp-vorschlag-karte{border:1px dashed var(--akzent-600)}
.dp-vorschlag-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.dp-vorschlag-leiste .sub{display:block;font-size:.85rem;color:var(--muted)}
.dp-vorschlag-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.dp-vorschlag-knoepfe form{display:inline}
.dp-hinweis-klapp{margin-top:16px}
.dp-hinweis-klapp summary{cursor:pointer;color:var(--red);font-weight:600;min-height:44px;display:flex;align-items:center;gap:6px}
.dp-hinweis-klapp .dp-leer{margin:4px 0 6px}
.dp-dialog{max-width:560px;width:calc(100% - 24px);padding:20px}
.dp-dialog-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dp-dialog-kopf h2{font-size:1.05rem;margin:0}
.dp-dialog-warn{margin-bottom:12px}
.dp-dialog .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.dp-dialog-knoepfe{justify-content:flex-start;flex-wrap:wrap}
.dp-dialog-platz{flex:1}
.dp-zeile-name{flex:0 0 7.5em;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-zeile .dp-zf{flex:1;min-width:0}
.dp-tipp-zeile{flex:1;min-width:0}
.dp-tipp-zeile .dp-chip{display:inline-block;margin:0 4px 0 0}
.dp-tipp-zeile .dp-frei-mark{min-height:38px;width:48px}
.dp-tage .dp-tag.dp-frei .dp-tag-kopf{color:var(--muted)}
.dp-kpi-zeile{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:baseline;font-size:.92rem;color:var(--muted)}
.dp-kpi-zeile b{font-size:1.2rem;color:var(--text);font-variant-numeric:tabular-nums;margin-inline-start:4px}
.dp-kpi-zeile .dp-minus b{color:var(--red)}
.dp-stempel-gross{min-height:64px;width:100%;justify-content:center;font-size:1.15rem}
.dp-stempel-reihe{display:flex;gap:10px;flex-wrap:wrap}
.dp-stempel-reihe form{flex:1 1 160px;display:flex}
.dp-stempel-reihe .btn{flex:1}
.dp-name-paar{display:flex;gap:8px}
.dp-name-paar input{min-width:0;flex:1}
.dp-liste-kompakt .btn-sm{min-height:36px}
@media (max-width:700px){
  .dp-werkzeuge{width:100%}
  .dp-werkzeuge .btn,.dp-werkzeuge summary{min-height:44px}
  .dp-vchip{min-height:44px}
  .dp-vmenu,.dp-ki-menu{position:fixed;left:12px;right:12px;top:auto;min-width:0;max-width:none;width:auto}
  .dp-vmenu .form-grid,.dp-dialog .form-grid{grid-template-columns:1fr}
  .dp-vorschlag-knoepfe{width:100%}
  .dp-vorschlag-knoepfe form{flex:1}
  .dp-vorschlag-knoepfe .btn{width:100%;justify-content:center;min-height:44px}
}
:root[data-theme=dark] .dp-chip{background:color-mix(in srgb,var(--f,#0a58ca) 18%,var(--panel))}
:root[data-theme=dark] .dp-chip.dp-offen{background:#3a2c12;border-color:#5a4520}
:root[data-theme=dark] .dp-chip.dp-vorschlag{background:var(--akzent-50);color:#c6ddff}

/* ---------- Dokumente (app/dokumente.php) ---------- */
.dok-warnung{display:flex;gap:10px;align-items:flex-start;background:var(--red-50);color:#9b2626;border:1px solid #f5c6c6;border-radius:10px;padding:12px 16px;font-size:.9rem}
.dok-warnung .ico{flex:none;margin-top:2px}
.dok-warnung ul{margin:6px 0 0}
:root[data-theme=dark] .dok-warnung{background:#3a1c1c;color:#f3b4b4;border-color:#5a2a2a}
.dok-hinweis{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;font-size:.9rem}
.dok-hinweis .ico{flex:none;margin-top:2px}
.dok-ok{color:#15803d;display:flex;gap:6px;align-items:center;margin:0}
.dok-pruefliste{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.dok-pruefliste li{display:flex;gap:8px;align-items:flex-start;font-size:.88rem}
.dok-pruefliste li .ico{flex:none;margin-top:2px}
.dok-pruefliste li.ok .ico{color:#15803d}
.dok-pruefliste li.fehlt{color:#b42318}
.dok-pruefliste li.frei{color:var(--muted)}
:root[data-theme=dark] .dok-pruefliste li.fehlt{color:#f3b4b4}
.dok-hinweise{margin:0;padding-inline-start:18px}
.dok-hinweise li{margin:2px 0}
.dok-unter{font-size:.95rem;margin:14px 0 8px}
.dok-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);margin:0 0 14px}
.dok-zurueck{margin:0 0 12px}
.dok-zurueck a{display:inline-flex;gap:6px;align-items:center}
.dok-suche{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.dok-suche input[type=search]{flex:1 1 220px;width:auto;min-width:0}
.dok-suche select{width:auto;max-width:100%}
.dok-suche .field{margin:0}
.dok-kontaktwahl{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:14px}
.dok-kontaktwahl .field{flex:1 1 260px;margin:0;min-width:0}
.dok-vorschau{background:#fff;color:#1b2230;border:1px solid var(--line);border-radius:8px;padding:20px 22px;font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
.dok-vorschau h2.dok-titel{font-size:1.15rem;margin:0 0 12px;color:#0f2f5f}
.dok-vorschau h3{font-size:1rem;margin:16px 0 6px;color:#0f2f5f}
.dok-vorschau p{margin:0 0 8px}
.dok-vorschau ul{margin:0 0 8px;padding-inline-start:20px}
.dok-feld{display:flex;flex-wrap:wrap;gap:4px 12px;border-bottom:1px solid #e3e7ee;padding:4px 0}
.dok-feld-l{color:#5f6876;flex:0 0 200px;max-width:100%}
.dok-feld-w{flex:1 1 160px;min-width:0}
.dok-anschrift{margin-bottom:12px}
.dok-ortdatum{text-align:end;color:#5f6876}
.dok-unterschriften{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px}
.dok-unterschriften>div{flex:1 1 180px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dok-linie{display:block;border-bottom:1px solid #1b2230;height:36px}
.dok-daten{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 12px;font-size:.9rem}
.dok-daten dt{color:var(--muted)}
.dok-daten dd{margin:0;overflow-wrap:anywhere;min-width:0}
.dok-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.dok-aktuell td{font-weight:600}
.dok-editor{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.45}
.dok-ph-liste{display:flex;flex-wrap:wrap;gap:6px}
.dok-ph-liste .dok-unter{flex:1 1 100%;margin:10px 0 2px}
.dok-ph{white-space:normal;text-align:start;max-width:100%}
.dok-ph code{font-size:.75rem;opacity:.75;overflow-wrap:anywhere}
.dok-hilfe{margin:0;padding-inline-start:18px;font-size:.88rem}
.dok-hilfe li{margin:4px 0}
.dok-hilfe code{overflow-wrap:anywhere}
.dp-zusatz{margin:4px 0 14px}
.dp-zusatz summary{cursor:pointer;color:var(--akzent-600);margin-bottom:10px}
@media (max-width:700px){
  .dok-feld-l{flex-basis:100%}
  .dok-vorschau{padding:14px}
  .dok-suche .btn,.dok-kontaktwahl .btn{min-height:44px}
  .dok-unterschriften>div{flex-basis:100%}
}

/* ---------- Tourenplanung (app/touren.php, assets/touren.js) ----------
   Karte und Liste nebeneinander ab 1000 px, darunter untereinander. Tippziele mindestens 44 px. */
.tr-kopfzeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tr-gps{font-size:.84rem;display:flex;gap:6px;align-items:flex-start;margin:0 0 14px}
.tr-gps .ico{flex:0 0 auto;width:16px;height:16px;margin-top:2px}
.tr-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1000px){.tr-raster{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}.tr-karte-spalte{position:sticky;top:calc(var(--topbar-h, 60px) + 12px)}}
.tr-karte{height:440px;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;background:#e5e9ef;z-index:0}
.tr-karte-klein{height:300px;border-radius:0;border:0}
.tr-karte-leer{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:24px;color:var(--muted);background:var(--panel)}
.tr-karte-leer .ico{width:40px;height:40px}
.tr-hinweis{font-size:.8rem;margin:6px 0 0}
.tr-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tr-knoepfe .btn,.tr-stopp-aktionen .btn,.tr-gross{min-height:44px}
.tr-marker{background:none;border:0}
.tr-marker span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#0a58ca;color:#fff;font:600 13px/1 system-ui,sans-serif;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.tr-m-angekommen span{background:#0891b2}.tr-m-erledigt span{background:#059669}.tr-m-problem span{background:#dc2626}
.tr-m-spaet span{box-shadow:0 0 0 3px #dc2626}
.tr-m-start span,.tr-m-ziel span{background:#172033;border-radius:8px}
/* Nachstellen 21.10.2026: unsicherer Ort (Befund der Adresssuche) und Details zur Berechnung */
.tr-m-unsicher span{box-shadow:0 0 0 3px #f59e0b}
.tr-vorschlag-karte{font-size:.84rem;margin:10px 0 0}
.tr-berechnung-tabelle .sub{display:block;color:var(--muted);font-size:.82rem}
.tr-berechnung-tabelle td{vertical-align:top;overflow-wrap:anywhere}
.tr-berechnung-zahlen{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:14px 0 0;font-size:.9rem}
.tr-berechnung-zahlen dt{font-weight:600}.tr-berechnung-zahlen dd{margin:0}
@media (max-width:600px){.tr-berechnung-zahlen{grid-template-columns:1fr}.tr-berechnung-zahlen dd{margin-bottom:6px}}
.tr-stopps{list-style:none;margin:0;padding:0}
.tr-stopp{padding:12px 16px;border-bottom:1px solid var(--line)}
.tr-stopp:last-child{border-bottom:0}
.tr-stopp.tr-erledigt{background:color-mix(in srgb, #059669 6%, transparent)}
.tr-stopp.tr-problem{background:color-mix(in srgb, #dc2626 7%, transparent)}
.tr-zieht{opacity:.7;outline:2px dashed var(--line-strong)}
.tr-stopp-kopf{display:flex;align-items:flex-start;gap:10px}
.tr-stopp-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.tr-stopp-text .sub{display:block;color:var(--muted);font-size:.84rem}
.tr-nr{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#0a58ca;color:#fff;font-weight:600;font-size:.82rem}
.tr-erledigt .tr-nr{background:#059669}.tr-problem .tr-nr{background:#dc2626}.tr-angekommen .tr-nr{background:#0891b2}
.tr-griff{flex:0 0 auto;width:44px;height:44px;margin:-8px 0 -8px -10px;border:0;background:none;color:var(--muted-2);cursor:grab;touch-action:none;display:inline-flex;align-items:center;justify-content:center}
.tr-stopp-info{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0 38px;font-size:.82rem;color:var(--muted)}
.tr-stopp-info .ico{width:14px;height:14px;vertical-align:-2px}
.tr-stopp-zeiten{margin:4px 0 0 38px;font-size:.82rem}
.tr-stopp-zeiten:empty{display:none}
.tr-stopp-aktionen{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0 38px}
.tr-bearbeiten,.tr-treffer{margin:10px 0 0 38px}
.tr-bearbeiten summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.tr-umsetzen{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%}
.tr-umsetzen select{max-width:100%}
.tr-vergleich th[scope=row]{font-weight:500;text-align:start}
.tr-vorschlag-liste{margin:12px 0;padding-inline-start:22px;font-size:.88rem}
.tr-vorschlag-liste li{display:flex;flex-wrap:wrap;gap:4px 10px;padding:3px 0}
.tr-details>summary{cursor:pointer;list-style:none}
.tr-details>summary::-webkit-details-marker{display:none}
.tr-wahl{display:flex;flex-wrap:wrap;gap:4px 18px}
.tr-datum,.tr-vorlage{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.tr-fahrten{list-style:none;margin:0;padding:0}
.tr-fahrten a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;min-height:44px}
.tr-fahrten li:last-child a{border-bottom:0}
.tr-fahrten .tr-heute a{border-inline-start:4px solid #0a58ca}
.tr-fahrt-stopps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tr-fahrt-stopp .tr-stopp-info,.tr-fahrt-stopp .tr-stopp-zeiten{margin-inline-start:38px}
.tr-fahrt-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tr-fahrt-knoepfe>*{flex:1 1 140px}
.tr-fahrt-knoepfe form.inline{display:flex}
.tr-fahrt-knoepfe .btn{width:100%;justify-content:center}
.tr-aufklapp{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.tr-aufklapp summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-weight:500}
.tr-unterschrift{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tr-unterschrift canvas{width:100%;max-width:600px;height:auto;aspect-ratio:600/220;background:#fff;border:1px dashed var(--line-strong);border-radius:8px;touch-action:none}
.tr-nachweis-bilder{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.tr-nachweis-bilder img{max-width:min(100%,260px);height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
@media (max-width:700px){
  .tr-karte{height:300px}
  .tr-stopp{padding:12px}
  .tr-stopp-info,.tr-stopp-zeiten,.tr-stopp-aktionen,.tr-bearbeiten,.tr-treffer{margin-inline-start:0}
  .tr-stopp-aktionen .btn{flex:1 1 auto;justify-content:center}
  .tr-fahrt-stopp .tr-stopp-info,.tr-fahrt-stopp .tr-stopp-zeiten{margin-inline-start:0}
}
/* Uhrzeitfelder (Tourenplanung, Dienstplan) wie die übrigen Eingabefelder – bisher fehlten sie in den Listen oben. */
input[type=time]{width:100%;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font:inherit;font-size:.95rem;color:var(--text);background:#fff;transition:border-color .12s,box-shadow .12s}
:root[data-theme=dark] input[type=time]{background:#101827;color:var(--text);border-color:var(--line-strong)}
@media (max-width:900px){input[type=time]{font-size:16px;min-height:44px}}

/* KI-Belegerkennung (views/ausgabe.php): unsichere Felder gelb, mittlere blass; Vorschau des Belegfotos neben dem Formular. */
.ki-niedrig{outline:2px solid #e0a800;outline-offset:1px;background:#fffbe6}
.ki-mittel{outline:2px solid #e6d28a;outline-offset:1px}
:root[data-theme=dark] .ki-niedrig{background:#3a3310;outline-color:#d9a400}
.ki-beleg{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.ki-beleg img{max-width:100%;max-height:260px;border:1px solid var(--line);border-radius:8px}

/* ---------- App (Capacitor): Sperrbild der App-Sperre und Kamera-Knopf (public/assets/app-bruecke.js) ---------- */
/* Das Sperrbild hängt direkt am <html>, vor dem <body>, damit es vor dem ersten Inhalt da ist; der Inhalt bleibt unsichtbar. */
html.app-gesperrt body{visibility:hidden}
.app-sperre{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#0f2a4a;color:#fff;padding:calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px);text-align:center;visibility:visible}
.app-sperre-box{max-width:320px}
.app-sperre-box svg{width:56px;height:56px;color:#2fd4c0}
.app-sperre-box b{display:block;font-size:1.3rem;margin:14px 0 4px}
.app-sperre-box p{margin:0 0 22px;color:#c9d8ea}
.app-sperre-box .btn{min-height:48px;padding:0 26px;background:#2fd4c0;color:#0f2a4a;border:0}
.app-kamera{margin-top:8px}
/* Ladebalken beim Seitenwechsel und Hinweis der Zurück-Taste (app-bruecke.js); liegen am <html>, also auch vor dem <body> sichtbar. */
.app-ladebalken{position:fixed;left:-30%;top:env(safe-area-inset-top, 0px);width:30%;height:3px;border-radius:0 2px 2px 0;background:#2fd4c0;z-index:10001;animation:app-laden 1.1s ease-in-out infinite}
@keyframes app-laden{0%{left:-30%}100%{left:100%}}
.app-hinweis{position:fixed;left:50%;bottom:calc(36px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);max-width:calc(100vw - 32px);padding:10px 18px;border-radius:999px;background:#0f2a4a;color:#fff;font-size:.9rem;line-height:1.3;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.3);z-index:10001}
@media (prefers-reduced-motion:reduce){.app-ladebalken{animation:none;left:0;width:100%;opacity:.7}}

/* ---------- Kalender (app/views/kalender.php) ---------- */
.kal-ebenen .dd-menu{right:auto;left:0}
.kal-ebenen-menu{padding:10px 12px;gap:2px}
.kal-ebenen-menu .btn{margin-top:8px;align-self:flex-start}
.kal-ebene{min-height:32px}
.kal-farbe{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--f,#64748b);margin-inline-end:7px;vertical-align:-1px}
.kal-monat th,.kal-monat td,.kal-woche th,.kal-woche td{vertical-align:top}
.kal-monat thead th,.kal-woche thead th{text-align:center;white-space:nowrap}
.kal-woche thead th a{color:inherit;text-decoration:none}
.kal-woche thead th .sub,.kal-monat .kal-kw{font-weight:400;color:var(--muted);font-size:.78rem}
.kal-monat .kal-kw{width:34px;text-align:center;padding:6px 2px}
.kal-monat .kal-kw a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;border-radius:6px}
.kal-monat .kal-kw a:hover{background:var(--gray-50);color:var(--text)}
.kal-tag{width:13.5%;min-width:108px;height:96px;padding:4px 4px 6px}
.kal-woche .kal-tag{min-height:220px;height:auto;min-width:120px}
.kal-frei{background:var(--gray-50)}
.kal-aussen .kal-nr,.kal-aussen .kal-e{opacity:.55}
.kal-tag-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.kal-nr{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;border-radius:50%;font-weight:600;font-size:.86rem;color:var(--text);text-decoration:none}
.kal-nr:hover{background:var(--gray-50)}
.kal-heute .kal-nr{background:var(--akzent-600);color:#fff}
.kal-plus{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:600;border:1px dashed transparent}
.kal-plus:hover{border-color:var(--line-strong);color:var(--text)}
.kal-plus-woche{width:100%;margin-bottom:4px;border-color:var(--line)}
/* Chips ohne Ring: nur farbige Kante und heller Grund (C12 Nr. 11) */
.kal-e{display:block;margin:0 0 3px;padding:2px 6px;border-radius:6px;border-inline-start:3px solid var(--f,#64748b);background:color-mix(in srgb,var(--f,#64748b) 9%,var(--panel));font-size:.76rem;line-height:1.3;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-e b{font-weight:600;color:inherit}
.kal-e.kal-rot{--f:var(--red);color:var(--red)}
.kal-e.kal-g-feiertag{background:none;color:var(--muted)}
a.kal-e:hover{background:var(--gray-50)}
.kal-mehr{display:block;font-size:.74rem;color:var(--muted);text-decoration:none;padding:2px 6px}
.kal-mehr:hover{color:var(--text)}
.kal-agenda{display:none}
.kal-agenda-immer{display:block}
.kal-zeile .kal-e{white-space:normal;font-size:.9rem;flex:1;min-width:0;padding:6px 10px}
.kal-zeile{flex-wrap:wrap}
.kal-zeile .sub{padding-inline-start:14px}
.kal-karte-knoepfe{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kal-karte p{margin:0 0 8px}
.kal-karte .kal-notiz{white-space:pre-wrap;color:var(--gray-600);font-size:.92rem}
.kal-label{display:block;font-weight:600;font-size:.875rem;margin-bottom:6px}
.kal-teilnehmer{display:flex;flex-wrap:wrap;gap:4px 18px}
.kal-teilnehmer .field.check{min-height:36px}
.kal-ganztag{align-self:end;min-height:44px}
@media (max-width:700px){
  .kal-raster-karte{display:none}
  .kal-agenda{display:block}
  .kal-ebenen .dd-menu{position:fixed;left:12px;right:12px;top:auto;max-width:none;width:auto}
  .kal-ebenen-menu .btn{min-height:44px}
}

/* ---------- Kalender und Übersicht: vier Gruppenfarben (Runde 2) ----------
   Geld Navy, Team Grün, Termine Akzent, Unterwegs Amber; Rot nur für Überfälliges. Gelten für Kalender, Übersicht und Liste. */
.kal-g-geld{--f:var(--navy-700)}
.kal-g-team{--f:var(--green)}
.kal-g-termine{--f:var(--akzent-600)}
.kal-g-unterwegs{--f:var(--amber)}
.kal-g-feiertag{--f:var(--gray-600)}
:root[data-theme=dark] .kal-g-geld{--f:#9cc2ff}
:root[data-theme=dark] .kal-g-termine{--f:#8ec1ff}
:root[data-theme=dark] .kal-g-feiertag{--f:#9aa4b2}

/* Kalender: Leiste mit Ansicht und Blättern, darunter vier Schalter */
.kal-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 16px}
.kal-ansichten{display:inline-flex;padding:3px;border-radius:12px;background:var(--gray-50);border:1px solid var(--line)}
.kal-seg{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:9px;color:var(--muted);font-weight:500;text-decoration:none!important}
.kal-seg.aktiv{background:var(--panel);color:var(--text);font-weight:600;box-shadow:var(--shadow-xs)}
.kal-blaettern{display:flex;gap:8px}
.kal-blaettern .btn{min-height:40px;min-width:44px;justify-content:center}
.kal-schalter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px}
.kal-schalter form{display:inline-flex}
.kal-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);font:inherit;font-size:.9rem;font-weight:500;cursor:pointer}
.kal-chip i{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--f);flex:none}
.kal-chip.an{color:var(--text);border-color:color-mix(in srgb,var(--f) 55%,var(--line));background:color-mix(in srgb,var(--f) 8%,var(--panel))}
.kal-chip.an i{background:var(--f)}
.kal-chip:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.kal-heute{box-shadow:inset 0 3px 0 var(--akzent-600)}
/* Liste „Nächste 14 Tage“: Tage als Abschnitte, heute hervorgehoben, jede Zeile tippbar */
.kal-liste{list-style:none;margin:0;padding:0}
.kal-ltag{padding:16px 20px;border-bottom:1px solid var(--line)}
.kal-ltag:last-child{border-bottom:0}
.kal-ltag-kopf{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font-size:1rem;font-weight:600}
.kal-ltag-kopf small{font-weight:400;font-size:.88rem;color:var(--muted)}
.kal-lheute{background:color-mix(in srgb,var(--akzent) 5%,var(--panel));box-shadow:inset 3px 0 0 var(--akzent-600)}
.kal-lheute .kal-ltag-kopf>span{color:var(--akzent-600)}
.kal-liste-karte .kal-ltag:first-child{border-radius:var(--radius) var(--radius) 0 0}
.kal-lzeilen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.kal-lz{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 12px;border-radius:10px;border-inline-start:3px solid var(--f);background:color-mix(in srgb,var(--f) 6%,var(--panel));color:var(--text);text-decoration:none!important}
.kal-lz-zeit{flex:0 0 64px;display:flex;flex-direction:column;font-size:.88rem;line-height:1.35;font-variant-numeric:tabular-nums}
.kal-lz-zeit b{font-weight:600}
.kal-lz-zeit span{color:var(--muted);font-size:.82rem}
.kal-lz-titel{flex:1;min-width:0;line-height:1.35;overflow-wrap:anywhere}
.kal-lz-titel small{display:block;margin-top:2px;color:var(--muted);font-size:.82rem}
.kal-lz.kal-rot{--f:var(--red)}
.kal-lz.kal-rot .kal-lz-titel{color:var(--red)}
.kal-lz.kal-g-feiertag{min-height:32px;padding-block:4px;background:none;border-inline-start-color:transparent;color:var(--muted)}
.kal-lleer{padding:4px 0;color:var(--muted);font-size:.9rem}
@media (hover:hover){a.kal-lz:hover{background:color-mix(in srgb,var(--f) 12%,var(--panel))}}
/* Termin: vier Felder, alles Weitere eingeklappt */
.kal-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.kal-von-bis{display:flex;align-items:center;gap:8px}
.kal-von-bis input{flex:1;min-width:0}
.kal-von-bis[hidden]{display:none}
.kal-zeit .kal-ganztag{align-self:flex-start;margin:4px 0 0;min-height:44px}
.kal-form-karte details.mehr{margin:4px 0 16px}
@media (max-width:700px){
  .kal-leiste{gap:8px}
  .kal-ansichten{flex:1 1 auto}
  .kal-seg{flex:1;justify-content:center;min-height:44px;padding:0 12px}
  .kal-blaettern .btn,.kal-chip{min-height:44px}
  .kal-schalter{gap:8px}
  .kal-ltag{padding:16px}
  .kal-lz-zeit{flex-basis:52px}
  .kal-form{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Übersicht (Runde 2) ----------
   Heute · Braucht dich (links) – Schnell · Zahlen (rechts); auf dem Telefon Heute, Braucht dich, Zahlen, Schnell. Karten, Köpfe
   und Abstände kommen aus dem Grundstil. */
.ue-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:24px;align-items:start}
.ue-haupt,.ue-seite{display:flex;flex-direction:column;gap:24px;min-width:0}
.ue .card{margin-bottom:0}
.ue-karte>.card-head{align-items:baseline}
.ue-kopf-link{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0 -12px auto;font-size:.9rem;font-weight:500}
.ue-willkommen{margin-bottom:24px}
.ue-willkommen h2{font-size:1.25rem;margin-bottom:8px}
.ue-schritte{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ue-schritte li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid var(--line);border-radius:12px}
.ue-schritte span{color:var(--muted);font-size:.9rem}
.ue-schritte .btn{min-height:40px}
.ue-fuss{margin:16px 0 0}
.ue-leer{margin:0;color:var(--muted)}
/* Heute */
.ue-tag+.ue-tag{margin-top:16px}
.ue-tag h3{margin:0 0 8px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ue-tag h3 small{text-transform:none;letter-spacing:0;font-weight:400;font-size:.82rem}
.ue-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ue-z{--f:var(--line-strong);display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 12px;border-radius:10px;border-inline-start:3px solid var(--f);background:color-mix(in srgb,var(--f) 6%,var(--panel));color:var(--text);text-decoration:none!important}
.ue-z.kal-g-geld{--f:var(--navy-700)}.ue-z.kal-g-team{--f:var(--green)}.ue-z.kal-g-termine{--f:var(--akzent-600)}.ue-z.kal-g-unterwegs{--f:var(--amber)}.ue-z.kal-g-feiertag{--f:var(--gray-600)}
.ue-z-zeit{flex:0 0 44px;font-weight:600;font-size:.9rem;line-height:1.4;font-variant-numeric:tabular-nums}
.ue-z-ico{margin-top:2px;color:var(--f)}
.ue-z-titel{flex:1;min-width:0;line-height:1.4;overflow-wrap:anywhere}
.ue-z-titel small{display:block;color:var(--muted);font-size:.82rem}
.ue-z.kal-rot{--f:var(--red)}
.ue-z.kal-rot .ue-z-titel{color:var(--red)}
.ue-z-mehr{background:none;border-inline-start-color:transparent;color:var(--akzent-600);font-weight:500;align-items:center}
@media (hover:hover){a.ue-z:hover{background:color-mix(in srgb,var(--f) 12%,var(--panel))}}
/* Braucht dich: eine Liste, die ganze Zeile führt zur Erledigung */
.ue-aufgaben-liste{list-style:none;margin:0 -8px;padding:0}
.ue-a{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;border-bottom:1px solid var(--line)}
.ue-a:last-child{border-bottom:0}
.ue-a-link{flex:1 1 240px;display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 8px;border-radius:10px;color:var(--text);text-decoration:none!important}
.ue-a-link>.ico{color:var(--muted-2)}
.ue-a-text{flex:1;min-width:0;line-height:1.4;overflow-wrap:anywhere}
.ue-a-knopf{flex:none;color:var(--akzent-600);font-size:.88rem;font-weight:600;white-space:nowrap}
.ue-p3 .ue-a-link>.ico{color:var(--red)}
.ue-p3 .ue-a-text{font-weight:500}
.ue-p2 .ue-a-link>.ico{color:var(--amber)}
.ue-a>form{margin:0 8px 10px auto}
.ue-a-aktion{min-height:40px}
@media (hover:hover){.ue-a-link:hover{background:var(--gray-50)}}
.ue-erledigt{display:flex;align-items:center;gap:12px;padding:4px 0}
.ue-erledigt .ico{width:28px;height:28px;color:var(--green)}
.ue-erledigt>div{display:flex;flex-direction:column}
.ue-erledigt span{color:var(--muted);font-size:.9rem}
/* Schnell: höchstens sechs Ziele, zwei Spalten */
.ue-schnell-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ue-s{min-height:56px;justify-content:flex-start;gap:10px;padding:8px 14px;white-space:normal;text-align:start;line-height:1.25}
.ue-s:not(.btn-primary) .ico{color:var(--akzent-600)}
/* Zahlen: vier Zeilen statt vier Kacheln, Verlauf aufklappbar */
.ue-zahlen{display:flex;flex-direction:column}
.ue-zahl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;min-height:44px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none!important}
.ue-zahl:first-child{padding-top:4px}
.ue-zahl-l{font-size:.9rem;color:var(--muted)}
.ue-zahl-w{grid-column:2;grid-row:1/span 2;align-self:center;text-align:end;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ue-zahl-u{grid-column:1;font-size:.82rem;color:var(--muted-2)}
.ue-zahl-u.rot,.ue-zahl-w.rot,.ue-jahr .rot{color:var(--red)}
.ue-jahr .gut{color:var(--green)}
.ue-verlauf{margin:8px 0 0}
.ue-verlauf .chart-wrap{margin-top:4px}
.ue-leg-aus{background:#2a74e6}
.ue-jahr{display:grid;gap:8px;margin-top:16px;font-size:.9rem}
.ue-jahr>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.ue-jahr small{flex-basis:100%;color:var(--muted)}
/* Erste Schritte: eingeklappt, solange die Einrichtung offen ist */
.ue-start>summary{list-style:none;cursor:pointer;min-height:44px;padding-bottom:16px}
.ue-start>summary::-webkit-details-marker{display:none}
.ue-start>summary small{margin-inline-start:auto}
.ue-start[open]>summary{padding-bottom:8px}
.ue-start .tasks li{padding:10px 20px}
.ue-start .ue-fuss{margin:0;padding:8px 20px 16px}
/* Rolle „personal“: eine Spalte */
.ue-personal{display:flex;flex-direction:column;gap:24px;max-width:760px}
.ue-uhr .dp-stempel-reihe{margin:0}
@media (max-width:1100px){
  .ue-raster{grid-template-columns:minmax(0,1fr)}
  .ue-seite .ue-schnell{order:2}
}
@media (max-width:900px){.ue-schritte{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .ue-raster,.ue-haupt,.ue-seite,.ue-personal{gap:16px}
  .ue-start .tasks li{padding:10px 16px}
  /* Schmal: der Knopftext rückt unter den Text, statt ihn auf drei Zeilen zu drücken */
  .ue-a-link{flex-wrap:wrap;gap:4px 12px}
  .ue-a-text{flex:1 1 calc(100% - 40px)}
  .ue-a-knopf{margin-inline-start:30px;font-size:.85rem}
}
:root[data-theme=dark] .ue-a-link:hover{background:rgba(255,255,255,.04)}

/* ---------- Runde 4: Dokumente und Touren ----------
   Auswahl „Dokument erstellen“ (Suche, Chips, eine Zeile je Vorlage), Prüfung als Checkliste, Platzhalter-Suche im Editor,
   Mehrfachauswahl der Stopps, Stopp-Dialog, Fahrer-Ansicht mit einem großen Knopf je Status. */
.dok-dialog{max-width:640px;width:calc(100% - 24px);padding:20px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto}
.dok-wahl-fuer{margin-bottom:12px}
.dok-wahl-fuer .field{margin:0}
.dok-wahl-suche{width:100%;margin-bottom:10px}
.dok-wahl-chips{margin-bottom:8px}
.dok-wahl-chips .pill.aktiv{background:var(--akzent-600);border-color:var(--akzent-600);color:#fff}
.dok-wahl-gruppe h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:16px 0 4px}
.dok-wahl-zeile{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.dok-wahl-zeile:last-child{border-bottom:0}
.dok-wahl-link{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;padding:10px 4px;min-height:44px;color:inherit;text-decoration:none!important;overflow-wrap:anywhere}
a.dok-wahl-link:hover b{color:var(--akzent-600)}
.dok-wahl-link .sub{color:var(--muted);font-size:.86rem}
.dok-wahl-beleg{flex-wrap:wrap}
.dok-wahl-belege{display:flex;flex-wrap:wrap;gap:4px 14px;padding:0 4px 10px;font-size:.9rem}
.dok-wahl-leer{margin:12px 0 0}
.dok-suche details.mehr{flex:1 1 100%;margin:0}
.dok-suche-mehr{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.dok-suche-mehr .field{margin:0}
.dok-fehlt>label,.dok-fehlt>.lbl-text{color:var(--amber)}
.dok-fehlt input,.dok-fehlt select,.dok-fehlt textarea{border-color:var(--amber)}
.dok-fehlt-zahl{color:var(--amber);font-weight:600}
.dok-check-kopf{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.92rem}
.dok-check-kopf.ok .ico{color:var(--green)}
.dok-check-kopf.warn .ico{color:var(--amber)}
.dok-check{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;font-size:.86rem}
.dok-check li{display:flex;gap:8px;align-items:flex-start}
.dok-check li .ico{flex:none;width:14px;height:14px;margin-top:2px;color:var(--green)}
.dok-check li.frei{color:var(--muted)}
.dok-punkt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber);margin:6px 3px 0}
.dok-check li.frei .dok-punkt{background:var(--line-strong)}
@media (min-width:900px){.dok-check-2{grid-template-columns:1fr 1fr;column-gap:20px}}
.dok-check-alle{margin:0 0 12px;font-size:.86rem}
.dok-check-alle>summary{cursor:pointer;color:var(--akzent-600);min-height:32px;display:inline-flex;align-items:center}
.dok-check-alle .dok-check{margin-top:6px}
.dok-editor{max-height:60vh;resize:vertical}
.dok-ph-suche{width:100%;margin-bottom:8px}
.dok-ph-gruppe{border-top:1px solid var(--line)}
.dok-ph-gruppe>summary{cursor:pointer;min-height:40px;display:flex;align-items:center;gap:6px;font-weight:500;font-size:.9rem}
.dok-ph-gruppe>summary small{color:var(--muted);font-weight:400}
.dok-ph-gruppe .dok-ph-liste{padding:4px 0 10px}

.tr-wahl-box{margin:0 0 var(--s2)}
.tr-wahl-kopf{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tr-wahl-kopf .lbl-text{font-weight:500;font-size:.9rem}
.tr-wahl-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--akzent-600);color:#fff;font-size:.78rem}
.tr-wahl-box input[type=search]{width:100%;margin-bottom:6px}
.tr-wahl-liste{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel)}
.tr-wahl-zeile{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;min-height:44px;margin:0}
.tr-wahl-zeile:last-of-type{border-bottom:0}
.tr-wahl-zeile input{flex:none;width:20px;height:20px;margin-top:1px}
.tr-wahl-zeile>span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.tr-wahl-zeile .sub{color:var(--muted);font-size:.84rem}
.tr-wahl-zeile:has(input:checked){background:var(--akzent-50)}
.tr-wahl-aus{cursor:default;opacity:.6}
.tr-wahl-leer{padding:10px 12px;margin:0}
.tr-wahl-adressen{margin-top:6px}
.tr-dialog{max-width:560px;width:calc(100% - 24px);padding:20px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto}
.tr-dialog .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.tr-dialog .tr-umsetzen{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.tr-kopfzeile .tr-gps{margin:0}
.tr-knoepfe .i-tip{align-self:center}
.tr-naechster .card-body{display:flex;flex-direction:column;gap:10px}
.tr-naechster .tr-gross{justify-content:center;font-size:1.05rem;min-height:52px}
.tr-alt-navi{font-size:.88rem;align-self:center}
.tr-fahrt-navi{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0 38px}
.tr-fahrt-navi .btn{min-height:44px}
.tr-status-knopf{margin-top:12px}
.tr-status-knopf form{display:block}
.tr-status-knopf .btn{width:100%;justify-content:center;min-height:52px;font-size:1.05rem}
@media (max-width:700px){

  .tr-fahrt-navi{margin-inline-start:0}
  .tr-fahrt-navi .btn{flex:1 1 auto;justify-content:center}
}
/* Vorher/Nachher-Vergleich der Reihenfolge: auf dem Telefon drei schmale Spalten statt Seitwärts-Scrollen (Runde 4). */
.tr-vergleich{width:100%;table-layout:fixed}
@media (max-width:700px){.tr-vergleich th,.tr-vergleich td{padding:6px 4px;font-size:.84rem;overflow-wrap:anywhere}.tr-vergleich th[scope=row]{width:40%}}
.tr-gps{align-items:center;flex-wrap:nowrap}
.tr-gps .i-tip{flex:none}
.field.dok-fehlt>label{color:var(--amber)}
/* KI-Stellen (Runde 5, app/ki_stellen.php): Eingabe „aus einem Satz“, Vorschlag der KI, „Text vorschlagen“, Antworten, Vorschau der Stopps.
   .ki-text startet mit hidden (ohne Skript unsichtbar) – die Regel unten hält das, auch wenn eine Klasse display setzt. */
.ki-satz{display:grid;gap:8px;margin:0}
.ki-satz-titel{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem;margin:0}
.ki-satz-zeile{display:flex;gap:8px;align-items:flex-start}
.ki-satz-zeile input,.ki-satz-zeile textarea{flex:1;min-width:0}
.ki-satz-zeile .btn{flex:none}
.ki-satz-fuss{margin:0;font-size:.82rem;color:var(--muted)}
.ki-satz-hinweis{font-size:.88rem;margin:0 0 8px}
.ki-einw{margin:0}
.ki-einw label{font-size:.85rem}
.kal-form-karte .ki-satz,.kal-form-karte .ki-vorschlag,form.ki-satz+form{margin-bottom:14px}
.ki-hinweise{margin:6px 0 0;padding-inline-start:18px;font-size:.9rem}
.ki-text{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-4px 0 10px}
.ki-text[hidden]{display:none}
.ki-text-meldung{font-size:.85rem;color:var(--muted)}
.ki-antwort{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--gray-50)}
.ki-antwort p{margin:0 0 6px}
.ki-antwort-frage{font-weight:600}
.ki-links{display:flex;gap:6px;flex-wrap:wrap}
.ki-stopps{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:6px}
.ki-stopps li{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.ki-stopps label{display:flex;flex-wrap:wrap;gap:2px 8px}
.ki-stopps small{flex-basis:100%;color:var(--muted)}
.ki-plus{padding:0 4px 12px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.ki-plus input{width:100%}
.ki-plus-knoepfe{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:600px){.ki-satz-zeile{flex-direction:column;align-items:stretch}}
.dd-menu .ki-plus-knoepfe .btn{flex:1;width:auto;justify-content:center;border:1px solid var(--line);background:var(--gray-50)}
.dd-menu .ki-text .btn{width:auto;border:1px solid var(--line)}

/* KI-Belegerkennung: Fortschritt beim Auslesen (Nachstellen 21.10.2026) */
.ki-fortschritt{display:flex;gap:10px;align-items:flex-start}.ki-fortschritt>div{flex:1 1 auto;min-width:0}
.ki-fortschritt .ki-sekunden{font-variant-numeric:tabular-nums;color:var(--muted)}
.ki-balken{height:6px;border-radius:3px;background:color-mix(in srgb, currentColor 15%, transparent);overflow:hidden;margin:8px 0}
.ki-balken span{display:block;height:100%;width:35%;border-radius:3px;background:currentColor;opacity:.55;animation:ki-balken 1.6s ease-in-out infinite}
@keyframes ki-balken{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){.ki-balken span{animation:none;width:100%;opacity:.3}}
.ki-lange{display:block;margin-top:6px}
.ki-diagnose-stufe-ok{color:var(--green,#059669)}.ki-diagnose-stufe-warn{color:#b45309}.ki-diagnose-stufe-fehler{color:#dc2626}
.ki-diagnose td{vertical-align:top;overflow-wrap:anywhere}

/* ================= Runde 6: sichtbar und deutlich (21.10.2026) =================
   Rückmeldung von Sergi: „vieles ist leicht zu übersehen, nicht alle Funktionen sind deutlich sichtbar“. Gemessen per Kontrastprüfung
   (headless Chrome, alle Textknoten gegen ihren tatsächlichen Hintergrund): wenige Texte unter 4,5:1 – blass wirkte vor allem, was
   keine Schrift ist. Rahmen von Feldern, Knöpfen und Filtern lagen bei 1,45:1 (WCAG 1.4.11 verlangt 3:1), Reiter waren grauer Text mit
   dünnem Strich, und am Telefon standen Hinweise, Marken und Zeitangaben bei 11–13 px. Deshalb hier:
   – Farbwerte nur für die Anwendung (body.chrome-app) – die Website (site.css) bleibt unberührt: Rahmen 3:1, Nebentext dunkler,
     Akzent als Schrift im Dunkelmodus hell (#0a58ca stand dort bei 2,68:1).
   – Reiter als Reiter: Grundlinie, kräftige Unterkante und Fläche am aktiven, dunkle Schrift an den übrigen.
   – Seitenleiste: Gruppen ab Werk offen (app.js), Überschriften hell und fett, aktive Seite mit Fläche und Balken, Zähler größer.
   – Telefon: Nebentext mindestens 14 px; Zähler, Marken und die Beschriftung der Tab-Leiste 13 px (dort zählt jede Breite).
   – Übersicht (Schnell-Kacheln, „Das kann workes noch“), Leerzustand, „Alle Funktionen“ und das KI-Kästchen in der Ecke. */
/* Grundwerte der Anwendung (Rahmen 3:1, Nebentext): im Gestaltungssystem am Dateianfang (Runde 7 D). */
/* Grün als Schrift: #1a9a66 kam auf Weiß auf 3,58:1. */
.chrome-app .ue-jahr .gut{color:var(--gut-text)}
/* Akzent als Schrift im Dunkelmodus */
:root[data-theme=dark] .chrome-app :is(.ue-a-knopf,.ue-z-mehr,.kal-lheute .kal-ltag-kopf>span,.dp-zusatz summary,.dok-check-alle>summary,.wahl-marke,.consent-zweck label b span,.dp-chip.dp-vorschlag,.badge.b-teal,.leer-mehr,.ki-chip .ico){color:var(--akzent-text)}
/* Suchfeld: Fläche #f1f4f8 mit Rand #e6eaf0 auf Weiß (1,1:1) – jetzt mit sichtbarem Rand. */
.chrome-app .gsearch input{border-color:var(--line-strong)}
/* Paket-Seite: Marke „Ihr Paket“ (Navy auf Indigo 3,2:1, 11 px) und „Einführungspreis“ im Dunkelmodus (2,3:1). */
.chrome-app .plan-tag,:root[data-theme=dark] .chrome-app .plan-tag{background:#0a58ca;color:#fff;font-size:.8rem}
:root[data-theme=dark] .chrome-app .plan-chip-aktion{color:#c6ddff}
/* Touren: erledigte Stopps – Weiß auf #059669 kam auf 3,8:1. Leaflet-Hinweis behält im Dunkelmodus seine dunkle Schrift (heller Kasten). */
.chrome-app .tr-erledigt .tr-nr,.chrome-app .tr-m-erledigt span{background:#047857}
:root[data-theme=dark] .chrome-app .leaflet-control-attribution a{color:#0b5cad}
/* Nicht wählbare Stopps blieben bei 2,6:1 – jetzt lesbar, aber erkennbar ruhiger. */
.chrome-app .tr-wahl-aus{opacity:.88}
/* Dunkelmodus: Ganze Zeilen und Kacheln, die Verweise sind, standen in Verweis-Blau (:root[data-theme=dark] a) – Text bleibt Text. */
:root[data-theme=dark] .chrome-app :is(.tab-plus-i,.kal-lz,.ue-z:not(.ue-z-mehr),.ue-a-link,.ue-zahl,.ue-s,.ue-tipp-link,.fk-kachel,.tab-plus-ki,.einst-kachel,.dok-wahl-link){color:var(--text)}

/* ---------- Knöpfe, Felder, Filter: sichtbarer Rand ---------- */
.chrome-app .btn{font-size:.92rem}
.chrome-app .btn:not(:is(.btn-primary,.btn-accent,.btn-success,.btn-danger,.btn-ghost)){color:var(--text)}
.chrome-app .content :is(.table,.tasks,.card-head,.checks) .btn-primary,
.chrome-app .content .card:has(.btn-primary) ~ .card .btn-primary,
.chrome-app .content:has(.page-actions .btn-primary) .card .btn-primary{border-color:var(--line-strong)}
.chrome-app .dd-menu :is(.btn,.dd-item){border-color:transparent}
.chrome-app .pill{border-color:var(--line-strong);color:var(--text)}
/* Runde 7: Der gewählte Filter hell hinterlegt mit Akzentrand statt gefüllt – deutlich, aber kein zweiter Hauptknopf. */
.chrome-app .pill.active,.chrome-app .dok-wahl-chips .pill.aktiv{background:var(--akzent-50);border-color:var(--akzent-600);color:var(--akzent-700);font-weight:600}
.chrome-app .pill.active .pill-count{background:var(--panel);color:var(--akzent-700)}
/* Aktiver Filter im Dunkelmodus: #0a58ca kam auf dem dunklen Grund auf 2,7:1 – hellere Fläche, dunkle Schrift. */
:root[data-theme=dark] .chrome-app .pill.active,:root[data-theme=dark] .chrome-app .dok-wahl-chips .pill.aktiv{background:rgba(94,158,247,.16);border-color:#5b95f5;color:#dbe9ff}
:root[data-theme=dark] .chrome-app .pill.active .pill-count{background:rgba(0,0,0,.28);color:#dbe9ff}
.chrome-app .pill-count{font-size:12.5px;color:var(--text)}
.chrome-app .badge{font-size:.8rem}

/* ---------- Reiter deutlich als Reiter ---------- */
/* Runde 7: Reiter mit feiner Grundlinie und 2 px Akzentkante am aktiven – ohne Fläche, die wie ein Knopf wirkte. */
.chrome-app .tabs{border-bottom:1px solid var(--line);gap:2px}
.chrome-app .tab{color:var(--text);font-weight:500;min-height:40px;display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 14px;border-radius:6px 6px 0 0}
@media (max-width:900px),(pointer:coarse){.chrome-app .tab{min-height:44px}}
.chrome-app .tab:hover{background:var(--gray-50);border-bottom-color:var(--line-strong)}
.chrome-app .tab.active{color:var(--akzent-text);font-weight:600;border-bottom-color:var(--akzent-600);background:none}
:root[data-theme=dark] .chrome-app .tab.active{color:var(--akzent-text);background:none;border-bottom-color:#8ec1ff}
.chrome-app .sub-nav-i.active{font-weight:700}

/* ---------- Seitenleiste ---------- */
@media (min-width:701px){
  .chrome-app .nav-item{color:rgba(236,241,248,.92);font-size:.92rem}
  .chrome-app .nav-item .ico{opacity:.88}
  .chrome-app .nav-item.active{background:rgba(94,158,247,.26);color:#fff;font-weight:700}
  .chrome-app .nav-item.active .ico{color:#dbe9ff}
  .chrome-app .nav-item.active::before{width:4px;top:6px;bottom:6px;background:#8ec1ff}
  .chrome-app .nav-sec>summary{color:#f1f5fb;font-weight:700;font-size:.92rem}
  .chrome-app .nav-sec>summary>.ico:first-child{opacity:.92}
  .chrome-app .nav-sec-pfeil{opacity:.85}
  .chrome-app .nav-sec-inhalt{border-inline-start-color:rgba(255,255,255,.18)}
}
.chrome-app .nav-count{font-size:12.5px;min-width:22px;padding:1px 7px;line-height:1.45;box-shadow:0 0 0 2px var(--sb-bg)}
.chrome-app .sub-nav .nav-count,.chrome-app .content .nav-count{box-shadow:none}
@media (max-width:700px){
  .chrome-app .nav-sec>summary{font-size:14px;color:rgba(255,255,255,.86);letter-spacing:.05em}
}

/* ---------- Telefon: Schrift ab 14 px, Zähler und Marken 13 px ---------- */
@media (max-width:700px){
  .chrome-app .btn{font-size:14px}
  .chrome-app .content :is(small,.help,.sub,.muted,.subtitle,.hinweis-zeile,.ki-satz-fuss,.ue-zahl-l,.ue-zahl-u,.ue-a-knopf,.kal-lz-zeit,.kal-lz-zeit>span,.dp-vorlagen li,.dp-vchip,.dp-vchip b,.leer-satz .i-tip-text,.anfrage-sub,label,.field label,.ue-z-titel small),
  .chrome-app .i-tip-text,.chrome-app .sheet-konto-i,.chrome-app .ki-panel :is(small,.ki-panel-fuss,.ki-panel-bsp){font-size:14px}
  .chrome-app :is(.tr-stopp-info,.dok-wahl-gruppe h3,.price-hint,.dd-menu .dd-item,.dd-menu .btn,.table th){font-size:14px}
  .chrome-app .ue-tag h3{font-size:14px;letter-spacing:.03em}
  .chrome-app .ue-tag h3 small{font-size:14px}
  body.chrome-app .content .badge,body.chrome-app .content .z-status .badge,body.chrome-app .plan-chip,.chrome-app .dp-chip,.chrome-app .dp-abw{font-size:13px}
  .chrome-app .tabbar .tab-i{font-size:13px}
  body.chrome-app :is(.nav-count,.notif-count,.tab-zahl,.pill-count),body.chrome-app .btn .notif-count,body.chrome-app .tab-i .tab-zahl,body.chrome-app .pill .pill-count{font-size:12.5px}
}

/* ---------- Übersicht: Schnell als Kacheln ganz oben ---------- */
.ue-schnell{margin:0 0 var(--s3)}
.ue-schnell .ue-leer{margin:0 0 var(--s2)}
.ue-schnell-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px}
.ue-s{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:100px;padding:14px 8px;border:1px solid var(--line-strong);border-radius:14px;background:var(--panel);color:var(--text);font-weight:600;font-size:.95rem;line-height:1.25;text-align:center;text-decoration:none!important;transition:border-color .12s,background .12s,transform .06s}
.ue-s-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--akzent-50);color:var(--akzent-600)}
.ue-s-ico .ico{width:24px;height:24px}
.ue-s-text{overflow-wrap:anywhere}
.ue-s-haupt{background:var(--navy);border-color:var(--navy);color:#fff}
.ue-s-haupt .ue-s-ico,.ue-s.ue-s-haupt .ue-s-ico .ico{background:rgba(255,255,255,.16);color:#fff}
.ue-s.ue-s-haupt .ue-s-ico .ico{background:none}
.ue-s-alle{border-style:dashed;background:transparent}
.ue-s-alle .ue-s-ico{background:var(--gray-50);color:var(--text)}
@media (hover:hover){.ue-s:hover{border-color:var(--akzent);background:color-mix(in srgb,var(--akzent) 6%,var(--panel))}.ue-s-haupt:hover{background:var(--navy-700);border-color:var(--navy-700)}}
.ue-s:active{transform:scale(.98)}
.ue-s:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
:root[data-theme=dark] .ue-s-haupt{background:#2c64a8;border-color:#2c64a8}
:root[data-theme=dark] .ue-s-ico,:root[data-theme=dark] .ue-s:not(.ue-s-haupt) .ue-s-ico .ico{color:#c6ddff}
@media (max-width:700px){
  .ue-schnell{margin-bottom:var(--s2)}
  .ue-schnell-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ue-s{min-height:92px;padding:12px 4px;font-size:14px}
  .ue-s-alle{grid-column:1/-1;flex-direction:row;min-height:52px;gap:10px}
  .ue-s-alle .ue-s-ico{width:34px;height:34px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){.ue-s{transition:none}.ue-s:active{transform:none}}

/* ---------- Übersicht: „Das kann workes noch“ ---------- */
.ue-tipps-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ue-tipp{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--akzent) 5%,var(--panel))}
.ue-tipp-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px;color:var(--text);text-decoration:none!important;border-radius:12px}
.ue-tipp-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--akzent-50);color:var(--akzent-600)}
.ue-tipp-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ue-tipp-text b{font-weight:600}
.ue-tipp-text small{color:var(--muted);font-size:.88rem;line-height:1.35}
.ue-tipp>form{margin:0 4px 0 0}
.ue-tipp-x{color:var(--muted)}
@media (hover:hover){.ue-tipp-link:hover b{color:var(--akzent-text)}}
:root[data-theme=dark] .ue-tipp-ico{color:#c6ddff}

/* ---------- Leerzustand: großes Bild, großer Knopf, „So funktioniert’s“ ---------- */
.chrome-app .leer{padding:40px 20px 36px}
.chrome-app .leer .illu{width:168px;height:134px}
.leer-zeichen{display:grid;place-items:center;width:88px;height:88px;margin:0 auto 8px;border-radius:24px;background:var(--akzent-50);color:var(--akzent-600)}
.leer-zeichen .ico{width:44px;height:44px}
.chrome-app .leer-satz{font-size:1.2rem;font-weight:600;color:var(--text);margin:12px auto 18px}
.leer-wege{display:flex;flex-direction:column;align-items:center;gap:10px}
.chrome-app .leer-knopf{min-height:52px;padding:12px 26px;font-size:1rem;font-weight:600}
.leer-mehr{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;font-weight:600;color:var(--akzent-text)}
:root[data-theme=dark] .leer-zeichen{color:#c6ddff}

/* ---------- Alle Funktionen ---------- */
.fk-sprung{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s3)}
.fk-sprung .pill{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.fk-bereich{scroll-margin-top:calc(var(--topbar-h) + 12px)}
.fk-bereich .card-head h2{display:flex;align-items:center;font-size:1.25rem}
.fk-bereich-ico{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--akzent-50);color:var(--akzent-600);margin-inline-end:12px}
.fk-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.fk-raster>li{display:flex}
.fk-kachel{flex:1;display:flex;align-items:flex-start;gap:14px;min-height:92px;padding:16px;border:1px solid var(--line-strong);border-radius:14px;background:var(--panel);color:var(--text);text-decoration:none!important;transition:border-color .12s,background .12s}
.fk-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--akzent-50);color:var(--akzent-600)}
.fk-ico .ico{width:23px;height:23px}
.fk-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.fk-text b{font-size:1.02rem;font-weight:650}
.fk-satz{color:var(--muted);font-size:.92rem;line-height:1.4}
.fk-text .badge{margin-top:4px}
.fk-pfeil{flex:none;margin-top:13px;color:var(--muted-2)}
.fk-gesperrt{background:var(--gray-50);border-style:dashed}
.fk-gesperrt .fk-ico{background:var(--panel);color:var(--muted)}
@media (hover:hover){.fk-kachel:hover{border-color:var(--akzent);background:color-mix(in srgb,var(--akzent) 5%,var(--panel))}.fk-gesperrt:hover{background:var(--gray-50)}}
.fk-kachel:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
:root[data-theme=dark] .chrome-app :is(.fk-ico,.fk-bereich-ico){color:#c6ddff}
@media (max-width:700px){.fk-raster{grid-template-columns:minmax(0,1fr);gap:8px}.fk-kachel{min-height:0;padding:14px}.fk-satz{font-size:14px}}
@media (prefers-reduced-motion:reduce){.fk-kachel{transition:none}}

/* ---------- „+“-Blatt und „Neu“: Weg ins KI-Kästchen ---------- */
.tab-plus-ki{display:flex;align-items:center;gap:12px;min-height:56px;margin:0 0 10px;padding:10px 14px;border-radius:12px;border:1px solid var(--akzent-100);background:var(--akzent-50);color:var(--text);text-decoration:none!important}
.tab-plus-ki>.ico{flex:none;width:22px;height:22px;color:var(--akzent-600)}
.tab-plus-ki span{display:flex;flex-direction:column}
.tab-plus-ki small{color:var(--muted);font-size:14px}
:root[data-theme=dark] .tab-plus-ki{background:rgba(42,116,230,.16);border-color:rgba(165,180,252,.3)}
:root[data-theme=dark] .tab-plus-ki>.ico{color:#c6ddff}
.dd-menu .dd-ki .ico{color:var(--akzent-600)}

/* ---------- KI-Kästchen: Knopf unten rechts ----------
   Rechner: 56 px, 24 px vom Rand; über einer festen Speichern-Leiste höher. Telefon: über der Tab-Leiste; im Belegeditor (Tab-Leiste
   aus, Leiste mit zwei Knopfzeilen) und über „Speichern“ der Einstellungen entsprechend höher – der Knopf verdeckt keinen Hauptknopf. */
.ki-fab{position:fixed;z-index:45;inset-inline-end:24px;bottom:24px;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;box-shadow:0 8px 24px rgba(15,42,74,.32),0 0 0 3px rgba(255,255,255,.9);text-decoration:none!important;transition:transform .12s,background .12s}
.ki-fab .ki-fab-ico{width:26px;height:26px}
.ki-fab:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.ki-fab-punkt{position:absolute;top:6px;inset-inline-end:6px;width:12px;height:12px;border-radius:50%;background:#f0b429;box-shadow:0 0 0 2px var(--navy)}
@media (hover:hover){.ki-fab:hover{background:var(--navy-700);transform:translateY(-1px)}}
:root[data-theme=dark] .ki-fab{background:#2b4f8a;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 2px rgba(165,180,252,.35)}
body.chrome-app .content:not(:has(.sticky-bar)){padding-bottom:96px}
body:has(.sticky-bar) .ki-fab,body:has(.form-actions.klebt) .ki-fab{bottom:96px}
.app.nav-open~.ki-fab,body.ki-offen .ki-fab{display:none}
@media (max-width:700px){
  .ki-fab{width:52px;height:52px;inset-inline-end:14px;bottom:calc(56px + 14px + env(safe-area-inset-bottom));box-shadow:0 6px 18px rgba(15,42,74,.34),0 0 0 3px var(--panel)}
  body:has(main .pos-table) .ki-fab{bottom:calc(132px + env(safe-area-inset-bottom))}
  body:has(.form-actions.klebt) .ki-fab{bottom:calc(56px + 82px + env(safe-area-inset-bottom))}
  body:has(.tab-plus[open]) .ki-fab{display:none}
  body.chrome-app .content:not(:has(.sticky-bar)){padding-bottom:152px}
}
@media print{.ki-fab,.ki-panel,.ki-hg{display:none!important}}
@media (prefers-reduced-motion:reduce){.ki-fab{transition:none}.ki-fab:hover{transform:none}}

/* ---------- KI-Kästchen: Fenster (Rechner ca. 380 × 520) und Blatt von unten (Telefon) ---------- */
.ki-hg:not([hidden]){position:fixed;inset:0;z-index:69;background:transparent}
.ki-panel:not([hidden]),:root:not(.ki-js) .ki-panel:target{position:fixed;z-index:70;inset-inline-end:24px;bottom:96px;width:min(380px,calc(100vw - 48px));height:min(520px,calc(100vh - 128px));display:flex;flex-direction:column;background:var(--panel);color:var(--text);border:1px solid var(--line-strong);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.ki-panel [hidden]{display:none!important}
.ki-panel-kopf{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 18px;border-bottom:1px solid var(--line)}
.ki-panel-kopf h2{flex:1;display:flex;align-items:center;gap:8px;margin:0;font-size:1.05rem}
.ki-panel-kopf h2 .ico{color:var(--akzent-600)}
.ki-panel-griff{display:none}
.ki-panel .ki-x{min-width:44px;min-height:44px}
.ki-panel-rumpf{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;padding:14px 16px 6px}
.ki-panel-lead{margin:0 0 10px;color:var(--text);font-weight:500;line-height:1.45}
.ki-panel-text{margin:0 0 12px;color:var(--muted);font-size:.9rem;line-height:1.5}
.ki-panel-einw .field.check{margin:0 0 12px}
.ki-panel-meldung{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:var(--st-err-bg);color:var(--st-err);font-size:.9rem}
.ki-verlauf{display:flex;flex-direction:column;gap:8px;flex:1 0 auto}
.ki-b{max-width:92%;padding:10px 12px;border-radius:14px;line-height:1.45;font-size:.95rem;overflow-wrap:anywhere}
.ki-b-du{align-self:flex-end;background:var(--akzent-50);color:var(--text);border-end-end-radius:4px}
.ki-b-ki{align-self:flex-start;background:var(--gray-50);color:var(--text);border-end-start-radius:4px}
.ki-b-fehler{background:var(--st-err-bg);color:var(--st-err)}
.ki-b-hinweis{background:var(--st-warn-bg);color:var(--st-warn)}
.ki-b-weiter{background:var(--st-ok-bg);color:var(--st-ok)}
.ki-b-links{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.ki-b-links .btn{min-height:36px;background:var(--panel)}
.ki-b-fuss{display:block;margin-top:6px;color:var(--muted);font-size:.82rem}
.ki-b-laden{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;color:var(--muted)}
.ki-b-laden .ki-b-fuss{flex-basis:100%}
.ki-punkte{display:inline-block;width:18px;height:6px;margin-inline-end:6px;background:radial-gradient(circle,currentColor 2px,transparent 2.5px) 0 0/6px 6px repeat-x;animation:ki-punkte 1s steps(4) infinite;clip-path:inset(0 100% 0 0)}
@keyframes ki-punkte{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.ki-punkte{animation:none;clip-path:none}}
.ki-chips:not([hidden]){display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 6px}
.ki-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:99px;background:var(--panel);color:var(--text);font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;text-align:start;line-height:1.25}
.ki-chip .ico{color:var(--akzent-600)}
@media (hover:hover){.ki-chip:hover{border-color:var(--akzent);background:var(--akzent-50)}}
.ki-chip:focus-visible{outline:3px solid var(--akzent);outline-offset:1px}
@media (max-width:900px),(pointer:coarse){.ki-chip,.ki-b-links .btn{min-height:44px}}
.ki-panel-form{margin:0;padding:8px 12px 10px;border-top:1px solid var(--line);background:var(--panel)}
.ki-panel-zeile{display:flex;align-items:flex-end;gap:8px}
.ki-panel-zeile textarea{flex:1;min-height:44px;max-height:168px;resize:none;padding:10px 12px;border-radius:12px;line-height:1.4;font-size:1rem}
.ki-panel .ki-senden{flex:none;width:44px;height:44px;min-width:44px;padding:0;justify-content:center;border-radius:12px}
.ki-panel-bsp{margin:6px 2px 0;color:var(--muted);font-size:.85rem}
.ki-panel-fuss{margin:6px 2px 0;color:var(--muted);font-size:.8rem;line-height:1.35}
:root[data-theme=dark] .ki-panel-kopf h2 .ico,:root[data-theme=dark] .ki-chip .ico{color:#c6ddff}
:root[data-theme=dark] .ki-b-du{background:rgba(42,116,230,.22)}
@media (max-width:700px){
  .ki-hg:not([hidden]){background:rgba(8,15,28,.45);z-index:79}
  .ki-panel:not([hidden]),:root:not(.ki-js) .ki-panel:target{z-index:80;inset-inline:0;bottom:0;width:auto;height:min(86vh,680px);height:min(86dvh,680px);border-radius:20px 20px 0 0;border-inline:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .ki-panel-kopf{position:relative;padding-top:16px}
  .ki-panel-griff{display:block;position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line-strong)}
  .ki-panel-zeile textarea{font-size:16px}
  .ki-b{font-size:15px}
  .ki-chip{font-size:14px}
}

/* ================= Runde 7 D: Ruhe und Qualität im Gesamtbild (21.10.2026) =================
   Auftrag von Sergi: „allgemein pass design nochmal ordentlich an“ – Maßstab moderne Geschäftssoftware, kein Formularsammler.
   Grundwerte: Gestaltungssystem am Dateianfang. Hier die Bausteine, die alle Seiten nutzen; die Seitenblöcke dahinter (Kalender,
   Schichtplanung) bauen darauf auf. Grundbausteine mit niedriger Gewichtung (:where), damit Seitenregeln weiter vorgehen.
   – Seitenleiste hell und kompakt: Gruppen als ruhige Etiketten, Einträge normal gewichtet, aktiver Eintrag als Fläche.
   – Kopfleiste: Firmenwahl als klares Feld, Suche daneben, Neu · Glocke · Konto rechts; Zähler ab 100 „99+“ (layout.php).
   – Seitenkopf: Titel 24 px, Hauptaktion rechts; am Telefon beschriftet, Nebenwege im Menü „Mehr“ (app.js).
   – Listen: Filter, Suche und Auswahl in einer Zeile, Suche ohne eigenen Knopf; ruhige Tabellenköpfe; Statusmarken mit Bedeutung.
   – Knöpfe und Felder am Rechner 40 px (Touch und Telefon weiter 44 px), Karten 12 px Radius mit einem Hauch Schatten. */

/* ---------- Grundlagen ---------- */
.chrome-app h1,.chrome-app h2,.chrome-app h3{letter-spacing:-.012em}
::selection{background:color-mix(in srgb,var(--akzent) 24%,transparent)}
.chrome-app .content{max-width:1360px}

/* ---------- Seitenleiste ---------- */
.chrome-app .sidebar{background:var(--sb-bg);color:var(--sb-text);border-inline-end:1px solid var(--sb-line);scrollbar-color:color-mix(in srgb,var(--sb-icon) 40%,transparent) transparent}
.chrome-app .sidebar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--sb-icon) 40%,transparent)}
.chrome-app .sidebar :focus-visible{outline:2px solid var(--sb-fokus);outline-offset:-2px}
.chrome-app .brand-side{color:var(--sb-strong);border-bottom:1px solid var(--sb-line)}
.chrome-app .brand-side .brand-name{color:var(--sb-strong)}
.chrome-app .brand-side .brand-name b{color:var(--sb-brand-akzent)}
/* Die Bildmarke trägt ihre Farben als Attribute – Stilregeln gehen vor, so passt dieselbe Marke auf helle und dunkle Leiste. */
/* Runde 12 W: Das neue Zeichen trägt seine Farben selbst (Kachel + Striche) – die alten Umfärbungen für den Beleg greifen nicht mehr. */
.chrome-app .brand-side .brand-mark svg>path:nth-of-type(1){fill:none}
.chrome-app .brand-side .brand-mark svg>path:nth-of-type(2){stroke:#7cf0d9;opacity:1}
/* Zähler in der Leiste: rot getönt statt rot gefüllt – sichtbar, aber nicht sieben rote Punkte untereinander. */
.chrome-app .sidebar .nav-count{box-shadow:none;background:var(--st-err-bg);color:var(--st-err)}
.chrome-app .sidebar .nav-punkt{box-shadow:0 0 0 2px var(--sb-bg)}
.chrome-app .sidebar-foot{border-top:1px solid var(--sb-line)}
.chrome-app .sidebar .plan-chip{background:var(--panel);border:1px solid var(--sb-line);color:var(--sb-text);font-weight:500}
.chrome-app .sidebar .plan-chip .ico{color:var(--sb-active-icon)}
.chrome-app .nav-collapse{color:var(--sb-muted)}
.chrome-app .nav-collapse:hover{background:var(--sb-hover);color:var(--sb-strong)}
@media (min-width:701px){
  .chrome-app .brand-side{min-height:var(--topbar-h);padding:0 18px}
  .chrome-app .nav{padding:10px 10px 12px;gap:1px}
  .chrome-app .sidebar .nav-item{gap:10px;min-height:32px;padding:5px 10px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;color:var(--sb-text);background:none;box-shadow:none}
  .chrome-app .sidebar .nav-item .ico{width:17px;height:17px;opacity:1;color:var(--sb-icon)}
  .chrome-app .sidebar .nav-item:hover{background:var(--sb-hover);color:var(--sb-strong)}
  .chrome-app .sidebar .nav-item:hover .ico{color:var(--sb-strong)}
  .chrome-app .sidebar .nav-item.active{background:var(--sb-active-bg);color:var(--sb-active-text);font-weight:600;box-shadow:none}
  .chrome-app .sidebar .nav-item.active .ico{color:var(--sb-active-icon)}
  .chrome-app .sidebar .nav-item.active::before{display:none}
  .chrome-app .sidebar .nav-count{font-size:11.5px;min-width:20px;padding:0 6px;line-height:18px;font-weight:700}
  /* Gruppe: ein ruhiges Etikett über ihren Einträgen statt einer zweiten, fetten Menüzeile mit eingerückten Kindern. */
  .chrome-app .nav-sec{margin-top:14px;gap:1px}
  .chrome-app .nav-sec>summary{min-height:26px;margin:0 0 2px;padding:3px 10px;gap:6px;border-radius:6px;font-size:.76rem;font-weight:600;letter-spacing:.01em;color:var(--sb-muted);text-transform:none}
  .chrome-app .nav-sec>summary>.ico:first-child{display:none}
  .chrome-app .nav-sec>summary:hover{background:none;color:var(--sb-strong)}
  .chrome-app .nav-sec>summary .nav-sec-pfeil{width:12px;height:12px;opacity:.8;transform:rotate(-90deg)}
  .chrome-app .nav-sec[open]>summary .nav-sec-pfeil{transform:none}
  .chrome-app .nav-sec-inhalt{margin:0;padding:0;border:0;gap:1px}
  /* Ein Eintrag ohne Gruppe nach einer Gruppe (Kunden, Kalender) bekommt denselben Abstand – sonst sähe er aus wie ihr letzter Eintrag. */
  .chrome-app .nav>.nav-sec+.nav-item{margin-top:14px}
  .chrome-app .sidebar-foot{padding:10px 14px 14px}
  .chrome-app .nav-collapse{margin:2px 10px 6px;padding:6px 10px;font-size:.85rem}
}
@media (min-width:901px){
  body.chrome-app.nav-mini .sidebar .nav-item{justify-content:center;padding:8px}
  body.chrome-app.nav-mini .sidebar .nav-count{background:#c93c3c;color:#fff;box-shadow:0 0 0 2px var(--sb-bg)}
  body.chrome-app.nav-mini .nav>.nav-sec+.nav-item,body.chrome-app.nav-mini .nav-sec{margin-top:0}
  /* Eingeklappt bleibt die Bildmarke oben stehen – vorher war die Ecke leer. */
  body.chrome-app.nav-mini .sidebar .brand .brand-mark{display:inline-grid}
}
@media (max-width:900px),(pointer:coarse){.chrome-app .sidebar .nav-item{min-height:44px}}
/* Telefon: das Blatt von unten – derselbe helle Grund, Kacheln mit feinem Rand. */
@media (max-width:700px){
  .chrome-app .sidebar{background:var(--sb-bg);border-inline-end:0;border-top:1px solid var(--sb-line)}
  .chrome-app .sheet-kopf b{color:var(--sb-strong)}
  .chrome-app .sheet-griff{background:var(--line-strong)}
  .chrome-app .sheet-zu{background:var(--sb-hover);color:var(--sb-strong)}
  .chrome-app .sidebar .nav-item{min-height:46px;background:var(--sb-kachel);color:var(--sb-text);border:1px solid var(--sb-line);box-shadow:none;font-weight:500}
  .chrome-app .sidebar .nav-item .ico{color:var(--sb-icon);opacity:1}
  .chrome-app .sidebar .nav-item.active{background:var(--sb-active-bg);color:var(--sb-active-text);border-color:color-mix(in srgb,var(--akzent) 45%,transparent);box-shadow:none;font-weight:600}
  .chrome-app .sidebar .nav-item.active .ico{color:var(--sb-active-icon)}
  .chrome-app .nav-sec>summary{color:var(--sb-muted);text-transform:none;letter-spacing:.01em;font-weight:600}
  .chrome-app .sheet-konto-i{background:var(--sb-kachel);border:1px solid var(--sb-line);color:var(--sb-strong)}
  /* Glocke: die Zahl rechts oben am Zeichen, nicht darüber */
  .chrome-app .topbar .notif-count{top:5px;right:auto;left:auto;inset-inline-start:24px}
}

/* ---------- Kopfleiste ---------- */
@media (min-width:701px){
  .chrome-app .topbar{gap:8px;padding:0 20px 0 16px;background:color-mix(in srgb,var(--panel) 90%,transparent);border-bottom:1px solid var(--line)}
  .chrome-app .topbar .company-switch>summary{gap:8px;min-height:40px;padding:5px 10px 5px 6px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--text);font-weight:600}
  .chrome-app .topbar .company-switch>summary:hover,.chrome-app .topbar .company-switch[open]>summary{border-color:var(--line-strong);background:var(--panel)}
  .chrome-app .topbar .company-switch>summary>.ico:first-child{box-sizing:content-box;width:16px;height:16px;padding:6px;border-radius:6px;background:var(--navy-50);color:var(--navy-700)}
  .chrome-app .topbar .company-switch>summary>.ico-xs{color:var(--muted-2)}
  .chrome-app .topbar .gsearch{flex:1 1 320px;max-width:440px;margin-inline-start:4px}
  .chrome-app .topbar>.neu-dd{margin-inline-start:auto}
  .chrome-app .topbar>.notif{margin-inline-start:auto}
  .chrome-app .topbar>.neu-dd~.notif{margin-inline-start:0}
  .chrome-app .topbar>.notif>summary,.chrome-app .topbar>.usermenu>summary{color:var(--text)}
  .chrome-app .topbar .notif-count{top:2px;right:auto;left:auto;inset-inline-start:21px;min-width:18px;height:18px;padding:0 5px;font-size:11px;line-height:18px;box-shadow:0 0 0 2px var(--panel)}
  .chrome-app .topbar .usermenu>summary{padding-inline:4px 8px}
}
@media (min-width:701px) and (max-width:1180px){.chrome-app .topbar .usermenu .lbl{display:none}}
:root[data-theme=dark] .chrome-app .topbar .company-switch>summary>.ico:first-child{color:#9cc2ff}

/* ---------- Seitenkopf ---------- */
.chrome-app .page-head{align-items:flex-start;gap:12px 16px}
.chrome-app .page-head .topbar-title{flex:1 1 260px;min-width:0}
.chrome-app .page-head .topbar-title h1{font-size:var(--fs-titel);font-weight:700;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.chrome-app .subtitle{color:var(--muted)}
.chrome-app .page-actions{gap:8px}
.chrome-app .page-mehr .dd-menu{min-width:240px}
@media (max-width:700px){.chrome-app .page-head .topbar-title h1{font-size:1.4rem}}
/* Am Telefon: Titel über die ganze Breite, darunter die Aktionen – beschriftet. Die Hauptaktion nimmt den übrigen Platz;
   was nicht in die Zeile passt, legt app.js ins Menü „Mehr“ (mit Text). Ohne Skript stehen alle beschriftet nebeneinander. */
@media (max-width:600px){
  .chrome-app .page-head .topbar-title{flex:1 1 100%}
  .chrome-app .page-actions{flex:1 1 100%;justify-content:flex-start}
  .chrome-app .page-actions .btn span.lbl{display:inline}
  .chrome-app .page-actions>:is(.btn-primary,form:has(.btn-primary),details:has(>summary.btn-primary)){flex:1 1 auto}
  .chrome-app .page-actions>.btn-primary{justify-content:center}
  .chrome-app .page-actions>form:has(.btn-primary) .btn-primary,.chrome-app .page-actions>details>summary.btn-primary{justify-content:center;width:100%}
}

/* ---------- Knöpfe ---------- */
.chrome-app .btn .ico{width:16px;height:16px}
.chrome-app .btn-primary{font-weight:600}
/* Akzent als zweiter Weg neben dem Hauptknopf: hell hinterlegt statt ein zweiter gefüllter Knopf (z. B. „In Rechnung umwandeln“). */
.chrome-app .btn-accent,.chrome-app .btn-accent:hover{background:var(--akzent-50);border-color:var(--akzent-100);color:var(--akzent-700);box-shadow:none;font-weight:600}
.chrome-app .btn-accent:hover{background:var(--akzent-100)}
:root[data-theme=dark] .chrome-app .btn-accent,:root[data-theme=dark] .chrome-app .btn-accent:hover{background:rgba(42,116,230,.18);border-color:rgba(165,180,252,.32);color:#c6ddff}
.chrome-app .btn-ghost:hover{background:var(--gray-50);color:var(--text)}
:root[data-theme=dark] .chrome-app .btn-danger{color:var(--red);border-color:#6b3232}
:root[data-theme=dark] .chrome-app .btn-danger:hover{background:var(--red-50)}

/* ---------- Felder ---------- */
:where(.chrome-app,.chrome-bare) .field>label{font-size:.85rem;font-weight:500;color:var(--text)}
/* Pflichtfelder: ein rotes Sternchen an der Beschriftung (das Feld selbst trägt required). */
.chrome-app .field:not(.check):has(:is(input,select,textarea)[required])>label::after{content:" *";color:var(--red);font-weight:600}

/* ---------- Karten ---------- */
/* Ein Satz direkt in einer engen Karte (z. B. „Noch keine Dokumente“) klebte ohne Rand an der Kante. */
:where(.chrome-app) .card-body.tight>p{margin:0;padding:12px var(--pad) var(--pad)}
@media (max-width:700px){:where(.chrome-app) .card-body.tight>p{padding:8px var(--sp-4) var(--sp-4)}}

/* ---------- Tabellen ---------- */
.chrome-app .table tbody tr:hover,.chrome-app .table tr.row-link:hover td,.chrome-app .table tr.row-link:focus-within td{background:color-mix(in srgb,var(--akzent) 3.5%,var(--panel))}
:root[data-theme=dark] .chrome-app .table tbody tr:hover,:root[data-theme=dark] .chrome-app .table tr.row-link:hover td{background:#1a2437}
/* E-Mail-Adressen am Rechner nicht mitten im Wort trennen („anna@cafe-|sonnenschein“); auf dem Telefon bleibt der Umbruch. */
@media (min-width:701px){.chrome-app .table .mail-link{overflow-wrap:normal}}
@media (max-width:700px){body.chrome-app .content .table th{font-size:14px}.chrome-app .zugang-fakten span{font-size:14px}}

/* ---------- Statusmarken: überall dieselbe Bedeutung ---------- */
:where(.chrome-app) .badge{gap:4px;padding:2px 8px;border-radius:6px;line-height:1.45;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 14%,transparent)}
:where(.chrome-app) .badge .ico-xs{width:12px;height:12px;opacity:1}
.chrome-app .badge:is(.s-offen,.b-blue){background:var(--st-offen-bg);color:var(--st-offen)}
.chrome-app .badge:is(.s-teilbezahlt,.b-amber){background:var(--st-warn-bg);color:var(--st-warn)}
.chrome-app .badge:is(.s-bezahlt,.s-angenommen,.s-erledigt,.b-green){background:var(--st-ok-bg);color:var(--st-ok)}
.chrome-app .badge:is(.s-ueberfaellig,.s-abgelehnt,.b-red){background:var(--st-err-bg);color:var(--st-err)}
.chrome-app .badge:is(.s-entwurf,.b-neutral){background:var(--st-neutral-bg);color:var(--st-neutral)}
.chrome-app .badge.b-teal,:root[data-theme=dark] .chrome-app .badge.b-teal{background:var(--st-akzent-bg);color:var(--st-akzent)}
.chrome-app .badge.s-storniert{background:var(--st-neutral-bg);color:var(--muted);text-decoration:line-through;box-shadow:inset 0 0 0 1px var(--line)}
/* Im Kartenkopf bleibt die Marke ruhiger Text mit Farbpunkt (Runde 3). */
.chrome-app .card-head .badge,.chrome-app .card-head .badge.b-teal,:root[data-theme=dark] .chrome-app .card-head .badge.b-teal{box-shadow:none;background:none}

/* ---------- Werkzeugleiste über Listen: Filter, Suche, Auswahl in einer Zeile ---------- */
.chrome-app .toolbar{gap:8px 12px}
.chrome-app .toolbar .pills{gap:6px}
.chrome-app .toolbar .search{flex:1 1 240px;max-width:360px;min-width:200px}
.chrome-app .toolbar select{flex:0 0 auto;width:auto;min-width:130px}
/* Mit Skript sucht das Feld selbst (kurze Pause nach dem Tippen, Enter, Kreuz) – der Knopf „Suchen“ wird überflüssig.
   Ohne Skript bleibt er stehen, und Enter schickt die Suche ab. */
.toolbar-auto>button[type=submit]{display:none}
.chrome-app .pill{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 12px;border-radius:var(--radius-pill);font-size:.875rem;font-weight:500;background:var(--panel);white-space:nowrap}
.chrome-app .pill:hover{background:var(--gray-50);text-decoration:none}
.chrome-app .pill-count{margin-inline-start:0;padding:0 6px;min-width:18px;border-radius:99px;background:var(--gray-50);font-weight:600;line-height:1.55}
@media (max-width:900px),(pointer:coarse){.chrome-app .pill{min-height:44px}}
@media (max-width:700px){
  .chrome-app .toolbar .pills{flex:1 1 100%;min-width:0}
  .chrome-app .toolbar .search{flex:1 1 0;min-width:0;max-width:none}
  .chrome-app .toolbar select{max-width:45%;min-width:0}
  /* Mehrere Auswahlfelder (Ausgaben): Suche über die ganze Breite, die Auswahl paarweise darunter. */
  .chrome-app .toolbar:has(select~select) .search{flex:1 1 100%}
  .chrome-app .toolbar:has(select~select) select{flex:1 1 40%;max-width:none}
}

/* ---------- Meldungen, Bänder, Dialoge ---------- */
.px-dialog{border-radius:var(--radius-lg)}
.px-dialog::backdrop{background:rgba(15,23,42,.42)}
.chrome-app .flash,.chrome-app .banner,.chrome-app .notice,.chrome-app .explain{border-radius:var(--radius)}
.chrome-app .dd-menu :is(.btn,.dd-item){border-radius:6px;font-size:.9rem}

/* ---------- Leiste unten (Telefon) ---------- */
@media (max-width:700px){
  .chrome-app .tabbar{box-shadow:0 -1px 0 var(--line),0 -6px 16px -10px rgba(16,24,40,.18);border-top:0}
  .chrome-app .tabbar .tab-i{gap:4px;padding:7px 4px 8px}
  .chrome-app .tabbar .tab-i>.ico{box-sizing:content-box;padding:3px 14px;border-radius:99px;transition:background var(--t-fast) var(--ease)}
  .chrome-app .tabbar .tab-i.active>.ico{background:var(--akzent-50);color:var(--akzent-600)}
  :root[data-theme=dark] .chrome-app .tabbar .tab-i.active>.ico{background:rgba(94,158,247,.18);color:#c6ddff}
  .chrome-app .tabbar .tab-zahl{top:2px;inset-inline-start:calc(50% + 6px);box-shadow:0 0 0 2px var(--panel)}
  .chrome-app .tabbar .tab-neu>.ico{padding:0;background:none}
}

/* ---------- Übersicht ---------- */
/* Schnellwege: ruhige Zeilen-Kacheln (Zeichen links, Text rechts) statt hoher Würfel; der erste bleibt der Hauptweg. */
.chrome-app .ue-schnell-raster{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:8px}
/* Am Rechner nach Inhalt: jede Kachel so breit wie ihr Text (kein „fotografiere-n“), die Zeile füllt sich, bei Platzmangel umbrechen. */
@media (min-width:701px){.chrome-app .ue-schnell-raster{display:flex;flex-wrap:wrap}.chrome-app .ue-schnell-raster>.ue-s{flex:1 1 auto}.chrome-app .ue-s-text{white-space:nowrap;overflow-wrap:normal}}
.chrome-app .ue-s{flex-direction:row;justify-content:flex-start;gap:10px;min-height:52px;padding:8px 12px;border-radius:var(--radius);font-size:.92rem;font-weight:600;text-align:start}
.chrome-app .ue-s-ico{width:32px;height:32px;border-radius:8px;flex:none}
.chrome-app .ue-s-ico .ico{width:18px;height:18px}
@media (max-width:700px){
  .chrome-app .ue-schnell-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chrome-app .ue-s{min-height:52px;padding:8px 10px;font-size:14px}
  .chrome-app .ue-s-alle{grid-column:1/-1;min-height:48px}
  .chrome-app .ue-s-alle .ue-s-ico{width:32px;height:32px;border-radius:8px}
}
/* „Braucht dich“: Dringendes zuerst und mit Farbe – rot (überfällig, heute fällig), gelb (heute erledigen), sonst ruhig. */
.chrome-app .ue-a-link{gap:12px;min-height:52px;padding:8px}
.chrome-app .ue-a-link>.ico{flex:none;box-sizing:content-box;width:16px;height:16px;padding:8px;border-radius:8px;background:var(--gray-50);color:var(--muted-2)}
.chrome-app .ue-p3 .ue-a-link>.ico{background:var(--st-err-bg);color:var(--st-err)}
.chrome-app .ue-p2 .ue-a-link>.ico{background:var(--st-warn-bg);color:var(--st-warn)}
.chrome-app .ue-p3 .ue-a-text{font-weight:600}
.chrome-app .ue-a-knopf{font-size:.875rem}
.ue-a-mehr{border-top:1px solid var(--line);margin:0 -8px}
.ue-a-mehr>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px;color:var(--akzent-text);font-weight:600;font-size:.92rem;border-radius:8px}
.ue-a-mehr>summary::-webkit-details-marker{display:none}
.ue-a-mehr[open]>summary{display:none}
.ue-a-mehr .ue-aufgaben-liste{margin:0}
@media (hover:hover){.ue-a-mehr>summary:hover{background:var(--gray-50)}}
/* Zahlen: kleiner Verlauf der Einnahmen unter dem Umsatz. */
.ue-zahl-spark{grid-column:1/-1;display:block;margin-top:6px;height:30px}
.ue-zahl-spark .spark{position:static;height:30px;width:100%}
.chrome-app .ue-zahl-w{font-weight:650}
@media (max-width:700px){.chrome-app .ue-a-text{flex:1 1 calc(100% - 56px)}.chrome-app .ue-a-knopf{margin-inline-start:44px}}

/* ---------- Alle Funktionen ---------- */
.chrome-app .fk-kachel{border-radius:var(--radius)}
.chrome-app .fk-ico{width:40px;height:40px;border-radius:10px}
.chrome-app .fk-ico .ico{width:20px;height:20px}
.chrome-app .fk-text b{font-weight:600}

/* ---------- Anmelden und Registrieren ---------- */
/* Die Bühne über die ganze Breite: .bare trägt noch place-items:center aus der ersten Fassung, und neuere Browser richten damit
   auch Blockkinder aus – die Markenfläche stand 50 px vom linken Rand entfernt. */
.bare-stage{width:100%}
.chrome-bare .bare-box{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border-color:var(--line)}
.chrome-bare .bare-box h2{font-size:1.35rem;font-weight:700;letter-spacing:-.015em}

@media (prefers-reduced-motion:reduce){.chrome-app .tabbar .tab-i>.ico{transition:none}}
/* ---------- Nachtrag nach der zweiten Fotorunde ---------- */
/* Nicht wählbar („Aktuelles Paket“, „Zu viele Benutzer“): gestrichelt und gedämpft statt halb durchsichtig – lesbar (4,5:1). */
.chrome-app .btn[aria-disabled=true]{opacity:1;color:var(--muted);background:var(--gray-50);border-style:dashed;box-shadow:none}
/* Schnellerfassung der offenen Posten: das Datum blieb auf 80 px gestaucht („21.10“), der Haken rutschte in eine zweite Zeile. */
.chrome-app .zahl-schnell input[type=date]{flex:0 0 132px}
@media (min-width:901px){.chrome-app .zahl-schnell{flex-wrap:nowrap}.chrome-app .zahl-schnell .input-group{flex:0 1 112px;min-width:88px}.chrome-app .zahl-schnell select{flex:1 1 100px;min-width:96px}}
/* Touren: Datum und „Anzeigen“ in einer Zeile */
.chrome-app .tr-datum input[type=date]{width:auto}
/* Alle Funktionen: Titel als Text, Akzent erst beim Zeigen – dreißig blaue Überschriften wirkten wie eine Linkliste. */
.chrome-app .fk-kachel .fk-text b{color:var(--text)}
@media (hover:hover){.chrome-app .fk-kachel:hover .fk-text b{color:var(--akzent-text)}}
/* Benachrichtigungen: ungelesen mit getöntem Zeichen und fetter Zeile, gelesen ruhig */
.notif-liste li{gap:12px;padding:12px 20px}
.notif-liste li>.ico{box-sizing:content-box;width:16px;height:16px;padding:8px;border-radius:8px;background:var(--gray-50);color:var(--muted-2);flex:none}
.notif-liste li.ungelesen{background:color-mix(in srgb,var(--akzent) 5%,var(--panel))}
.notif-liste li.ungelesen>.ico{background:var(--akzent-50);color:var(--akzent-600)}
.notif-liste li.ungelesen>span{font-weight:600}
.notif-liste li.ungelesen>span small{font-weight:400}
.notif-liste li.gelesen>span{color:var(--muted)}
:root[data-theme=dark] .notif-liste li.ungelesen>.ico{color:#c6ddff}
@media (max-width:700px){.notif-liste li{padding:12px 16px;flex-wrap:wrap}}
/* Erklärkästen: getönte Fläche mit feinem Rand statt gestrichelter Linie – wirkte wie ein Platzhalter. */
.chrome-app .explain{background:color-mix(in srgb,var(--akzent) 4%,var(--panel));border:1px solid var(--akzent-100);border-radius:var(--radius)}
:root[data-theme=dark] .chrome-app .explain{background:color-mix(in srgb,var(--akzent) 7%,var(--panel));border-color:var(--akzent-100)}
/* Etiketten über Gruppen in normaler Schreibweise wie in der Seitenleiste: Verwaltung, Einstellungen, „Heute“ auf der Übersicht. */
.chrome-app .sub-nav-g{text-transform:none;letter-spacing:.01em;font-size:.76rem}
.chrome-app .ue-tag h3{text-transform:none;letter-spacing:0;font-size:.85rem}
@media (max-width:700px){.chrome-app .ue-tag h3,.chrome-app .sub-nav-g{font-size:14px;letter-spacing:0}}
/* === Ende Runde 7 D === */

/* === Runde 7 S: Schichtplanung === */
/* Dienstplan (app/views/dienstplan.php und parts/dp_*.php): Stand, Pinsel, Raster mit fester erster Spalte, Summen gegen Soll, Besetzung
   gegen Bedarf, offene Schichten, Verfügbarkeiten, Ziehen, Tagesansicht am Telefon, Mein Plan, Vorlagen & Bedarf, Stundenkonto. */
.dp-knopf-text{margin-inline-start:6px}
.page-actions .dp-mehr .dd-menu{min-width:250px}
.dp-mehr summary{list-style:none}
.dp-mehr summary::-webkit-details-marker{display:none}
.dp-mehr .dd-menu form{display:block;margin:0}
.dp-mehr .dd-item{min-height:40px}
.dp-veroeff .dp-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;margin-inline-start:8px;border-radius:99px;background:var(--red);color:#fff;font-size:.78rem;font-weight:700;line-height:1}
.dp-veroeff:not(.btn-primary) .dp-zahl{background:var(--gray-600)}
.dp-ki-dd summary{list-style:none;cursor:pointer}
.dp-ki-dd summary::-webkit-details-marker{display:none}
.dp-ki-menu{padding:10px 12px;font-size:.88rem;max-width:340px}
.dp-ki-menu p{margin:0 0 10px;color:var(--muted)}
/* Stand der Woche */
.dp-stand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius,12px);background:var(--panel)}
.dp-stand-punkt{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none}
.dp-stand-entwurf{border-color:color-mix(in srgb,var(--amber) 45%,var(--line));background:color-mix(in srgb,var(--amber-50) 70%,var(--panel))}
.dp-stand-entwurf .dp-stand-punkt{background:var(--amber)}
.dp-stand-text{font-weight:600;color:var(--text)}
.dp-stand-chips,.dp-mein-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.dp-stand-chip{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:3px 10px;border-radius:99px;font-size:.84rem;font-weight:600;text-decoration:none!important;border:1px solid var(--line-strong);background:var(--panel);color:var(--text)}
.dp-stand-warn{color:var(--st-err,#9b2626);border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.dp-stand-fehlt{color:var(--st-warn,#92400e);border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}
.dp-stand-anfrage{color:var(--akzent-text,var(--akzent-600));border-color:color-mix(in srgb,var(--akzent-600) 40%,var(--line))}
.dp-stand-chip[hidden]{display:none!important}
/* Ansicht wählen */
.dp-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--gray-50);border:1px solid var(--line);gap:2px}
.dp-seg-i{display:inline-flex;align-items:center;min-height:34px;padding:4px 14px;border-radius:8px;color:var(--muted);font-weight:600;font-size:.9rem;text-decoration:none!important}
.dp-seg-i.aktiv{background:var(--panel);color:var(--text);box-shadow:var(--shadow-xs,0 1px 2px rgba(16,24,40,.08))}
/* Pinsel-Leiste */
.dp-pinsel{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius,12px);background:var(--panel)}
.dp-pinsel-titel{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:.86rem;color:var(--muted);margin-inline-end:4px}
.dp-pinsel-hinweis{flex:1 1 220px;font-size:.84rem;min-width:0}
.dp-pinsel form.inline{display:inline}
.dp-vchip{position:relative}
.dp-vchip-farbe{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--f,#0a58ca);flex:none;vertical-align:-1px;margin-inline-end:6px}
.dp-vchip[style]{border-inline-start:4px solid var(--f,#0a58ca)}
.dp-vchip-aktiv{background:color-mix(in srgb,var(--f,var(--akzent-600)) 14%,var(--panel));outline:2px solid var(--f,var(--akzent-600));outline-offset:1px}
.dp-vchip-frei.dp-vchip-aktiv{outline-color:var(--red);background:var(--red-50);color:var(--st-err,#9b2626)}
body.dp-pinsel-an .dp-raster .dp-tipp{touch-action:none;cursor:crosshair}
body.dp-pinsel-an .dp-tage-karte .dp-tipp{touch-action:pan-y;cursor:crosshair}
body.dp-zieht,body.dp-zieht *{cursor:grabbing!important;user-select:none}
/* Raster: feste erste Spalte, nur die Karte scrollt seitwärts */
.dp-raster-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dp-raster{border-collapse:separate;border-spacing:0}
.dp-raster th.dp-name{position:sticky;left:0;z-index:2;background:var(--panel);box-shadow:inset -1px 0 0 var(--line)}
.dp-raster thead th.dp-name{z-index:3}
.dp-raster .dp-name{min-width:170px;max-width:220px}
.dp-raster tbody th.dp-name{display:table-cell}
.dp-name-text{display:inline-block;vertical-align:middle;white-space:normal;line-height:1.25}
.dp-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--f,#0a58ca);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.02em;margin-inline-end:8px;vertical-align:middle;flex:none}
.dp-avatar-offen{background:transparent;color:var(--muted);border:1.5px dashed var(--line-strong)}
.dp-zeile-offen th,.dp-zeile-offen td{background:color-mix(in srgb,var(--gray-50) 60%,var(--panel))}
.dp-raster .dp-zeile-offen th.dp-name{background:color-mix(in srgb,var(--gray-50) 60%,var(--panel))}
.dp-kopf-bedarf{display:block;min-height:18px;margin-top:2px}
.dp-bedarf{display:inline-block;padding:1px 7px;border-radius:99px;font-size:.72rem;font-weight:700;line-height:1.45}
.dp-bedarf-fehlt{background:var(--st-err-bg,#fdeaea);color:var(--st-err,#9b2626)}
.dp-bedarf-offen{background:var(--st-warn-bg,#fef3c7);color:var(--st-warn,#92400e)}
.dp-bedarf-ok{background:var(--st-ok-bg,#e3f5ec);color:var(--st-ok,#047857)}
.dp-summe-zelle{min-width:96px}
.dp-summe{display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.2}
.dp-summe b{font-variant-numeric:tabular-nums}
.dp-summe small{font-size:.75rem;color:var(--muted)}
.dp-soll-text{font-size:.72rem;font-weight:600;padding:0 6px;border-radius:99px}
.dp-soll-unter .dp-soll-text{background:var(--st-warn-bg,#fef3c7);color:var(--st-warn,#92400e)}
.dp-soll-passt .dp-soll-text{background:var(--st-ok-bg,#e3f5ec);color:var(--st-ok,#047857)}
.dp-soll-ueber .dp-soll-text{background:var(--st-err-bg,#fdeaea);color:var(--st-err,#9b2626)}
.dp-zeile-name .dp-summe{flex-direction:row;align-items:baseline;gap:6px;flex-wrap:wrap}
/* Zellen: Verfügbarkeit, offene Schichten, Lücken, Warnzeichen, Tausch */
.dp-tipp.dp-z-nein{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--red) 9%,transparent) 0 6px,transparent 6px 12px)}
.dp-tipp.dp-z-lieber_nicht{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--amber) 9%,transparent) 0 6px,transparent 6px 12px)}
.dp-tipp.dp-z-gern{background:color-mix(in srgb,var(--green) 7%,transparent)}
.dp-verf{display:flex;align-items:center;gap:3px;margin:0 0 3px;font-size:.72rem;font-weight:600;line-height:1.2}
.dp-verf .ico{flex:none}
.dp-verf-nein{color:var(--st-err,#9b2626)}
.dp-verf-lieber_nicht{color:var(--st-warn,#92400e)}
.dp-verf-gern{color:var(--st-ok,#047857)}
.dp-monat .dp-verf{margin:0}
.dp-chip-offen{border-style:dashed;border-inline-start-style:solid;background:color-mix(in srgb,var(--f,#64748b) 6%,var(--panel))}
.dp-luecke{display:block;margin:0 0 4px;padding:3px 7px;border-radius:7px;border:1px dashed color-mix(in srgb,var(--red) 55%,var(--line));color:var(--st-err,#9b2626);font-size:.76rem;font-weight:600;white-space:nowrap}
.dp-chip .dp-dot{display:inline-flex;align-items:center;justify-content:center;top:-7px;inset-inline-end:-6px;width:16px;height:16px;font-style:normal;font-size:.68rem;font-weight:800;color:#fff;line-height:1}
.dp-tausch-marke{display:inline-flex;margin-inline-start:4px;color:var(--akzent-text,var(--akzent-600));font-style:normal;vertical-align:-2px}
.dp-chip.dp-tauscht{box-shadow:0 0 0 2px color-mix(in srgb,var(--akzent-600) 35%,transparent)}
.dp-tipp.dp-ziel{outline:2px dashed var(--akzent-600);outline-offset:-2px;background:var(--akzent-50)}
.dp-chip.dp-gezogen{opacity:.45}
.dp-geist{position:fixed;z-index:120;pointer-events:none;padding:5px 9px;border-radius:8px;border:1px solid var(--line-strong);border-inline-start:4px solid var(--f,#0a58ca);background:var(--panel);color:var(--text);font-size:.8rem;font-weight:600;box-shadow:var(--shadow-lg,0 8px 24px rgba(16,24,40,.18));white-space:nowrap}
.dp-geist small{display:none}
.dp-geist-kopie::after{content:"+";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-inline-start:6px;border-radius:50%;background:var(--akzent-600);color:#fff;font-size:.8rem}
.dp-fuss{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.dp-fuss .dp-ma-neu{flex:1 1 100%}
.dp-ma-neu summary{list-style:none;display:inline-flex}
.dp-ma-neu summary::-webkit-details-marker{display:none}
.dp-ma-neu-form{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:var(--radius,12px);background:var(--panel)}
/* Anfragen (Tausch, Übernahme) */
.dp-anfrage-liste{list-style:none;margin:0;padding:0}
.dp-anfrage{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line)}
.dp-anfrage:last-child{border-bottom:0}
.dp-anfrage-text{flex:1 1 280px;min-width:0}
.dp-anfrage-text .sub{display:block;font-size:.84rem;color:var(--muted)}
.dp-anfrage-knoepfe{display:flex;gap:6px;flex-wrap:wrap}
.dp-anfrage-knoepfe form{display:inline}
.sub-warn{color:var(--st-err,#9b2626)!important}
/* Erster Mitarbeiter, Schnellformular */
.dp-erst-kopf{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.dp-erst-kopf>.ico{width:28px;height:28px;color:var(--akzent-600);flex:none;margin-top:2px}
.dp-erst-kopf h2{margin:0 0 4px;font-size:1.15rem}
.dp-erst-kopf p{margin:0}
.dp-schnell-felder{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto minmax(0,2fr);gap:0 12px;align-items:end}
.dp-schnell-felder input[type=color]{width:56px;min-height:40px;padding:2px}
.dp-schnell-einladen{margin:4px 0 12px}
.dp-schnell-mehr{display:inline-block;margin-inline-start:10px;font-size:.84rem}
/* Dialog */
.dp-dialog{max-width:660px}
.dp-dialog-knoepfe{gap:6px}
.dp-dialog-vorlagen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.dp-dialog-tipp{margin:10px 0 0;font-size:.82rem}
.dp-dialog [hidden]{display:none!important}
/* Tagesansicht (Telefon) */
.dp-tagwahl{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:10px 10px 6px;border-bottom:1px solid var(--line)}
.dp-tagwahl-i{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:52px;padding:5px 2px;border-radius:10px;color:var(--muted);text-decoration:none!important;font-size:.78rem;position:relative}
.dp-tagwahl-i b{font-size:1.05rem;color:var(--text)}
.dp-tagwahl-i.heute b{color:var(--akzent-text,var(--akzent-600))}
.dp-tagwahl-i.aktiv{background:var(--akzent-600);color:#fff}
.dp-tagwahl-i.aktiv b{color:#fff}
.dp-tagwahl-i i{width:6px;height:6px;border-radius:50%}
.dp-tagwahl-i i.dp-tw-fehlt{background:var(--red)}
.dp-tagwahl-i i.dp-tw-ok{background:var(--green)}
.dp-tage-karte.dp-js section.dp-tag{display:none}
.dp-tage-karte.dp-js section.dp-tag.aktiv{display:block}
.dp-tag-kopf .dp-tag-titel{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.dp-tag-kopf .dp-kopf-bedarf{display:inline-block;margin:0}
.dp-tage-karte:not(.dp-js) .dp-tag-zurueck,.dp-tage-karte:not(.dp-js) .dp-tag-weiter{display:none}
.dp-tag-zurueck,.dp-tag-weiter{min-width:44px;min-height:44px;justify-content:center}
.dp-zeile-name{display:flex;flex-direction:column;gap:1px;white-space:normal;line-height:1.25}
.dp-zeile-name .sub{font-weight:400}
.dp-tipp-zeile .dp-verf{display:inline-flex;margin:0 6px 0 0}
.dp-tipp-zeile .dp-luecke{display:inline-block;margin:0 4px 4px 0}
/* Mein Plan */
.dp-mein{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.dp-mein>.card{margin:0}
@media (min-width:1100px){.dp-mein{grid-template-columns:repeat(2,minmax(0,1fr))}.dp-mein>.dp-naechste,.dp-mein>.dp-meine-woche{grid-column:1 / -1}}
.dp-mini-titel{margin:0 0 8px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dp-naechste-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:10px 14px;border-radius:12px;border-inline-start:5px solid var(--f,#0a58ca);background:color-mix(in srgb,var(--f,#0a58ca) 8%,var(--panel))}
.dp-naechste-wann{font-size:1.15rem}
.dp-naechste-zeit{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}
.dp-naechste-zeile .sub{flex-basis:100%;font-size:.88rem;color:var(--muted)}
.dp-mein-chips{margin-top:10px}
.dp-meine-woche .card-head{flex-wrap:wrap;gap:8px}
.dp-tag-leer .dp-tag-kopf{color:var(--muted);font-weight:500;min-height:28px}
.dp-tag-leer{padding-top:6px;padding-bottom:6px}
.dp-meine-schicht{flex-wrap:wrap}
.dp-meine-schicht .dp-chip{margin:0;white-space:nowrap}
.dp-anbieten summary{list-style:none}
.dp-anbieten summary::-webkit-details-marker{display:none}
.dp-anbieten-menu{min-width:280px;max-width:calc(100vw - 24px);padding:12px 14px}
.dp-anbieten-menu p{margin:0 0 10px;font-size:.86rem}
.dp-boerse{list-style:none;margin:0;padding:0}
.dp-boerse-i{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.dp-boerse-i:last-child{border-bottom:0}
.dp-boerse-i .dp-chip{margin:0;white-space:nowrap}
.dp-boerse-i .dp-zeile-text{flex:1 1 200px}
.dp-boerse-i form{display:inline}
.dp-pad{padding:10px 16px}
.dp-klein{font-size:.86rem}
.dp-erledigt summary{cursor:pointer;color:var(--muted);font-weight:600}
/* Verfügbarkeit */
.dp-verf-raster{display:grid;gap:6px;margin:0 0 8px}
.dp-verf-zeile{display:grid;grid-template-columns:3em minmax(150px,1fr) auto;gap:8px;align-items:center;padding:4px 6px;border-radius:8px}
.dp-verf-zeile.dp-z-nein{background:color-mix(in srgb,var(--red) 7%,transparent)}
.dp-verf-zeile.dp-z-lieber_nicht{background:color-mix(in srgb,var(--amber) 8%,transparent)}
.dp-verf-zeile.dp-z-gern{background:color-mix(in srgb,var(--green) 8%,transparent)}
.dp-verf-tag{font-weight:700}
.dp-verf-zeile select{width:100%}
.dp-verf-fenster{display:inline-flex;align-items:center;gap:4px}
.dp-verf-fenster input{width:auto;min-width:96px}
.dp-verf-tage{list-style:none;margin:0 0 12px;padding:0}
.dp-verf-tage li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 8px;border-radius:8px;margin-bottom:4px}
.dp-verf-tage li.dp-z-nein{background:color-mix(in srgb,var(--red) 7%,transparent)}
.dp-verf-tage li.dp-z-lieber_nicht{background:color-mix(in srgb,var(--amber) 8%,transparent)}
.dp-verf-tage li.dp-z-gern{background:color-mix(in srgb,var(--green) 8%,transparent)}
.dp-verf-tage form{margin-inline-start:auto}
/* Vorlagen & Bedarf */
.dp-bedarf-tabelle th[scope=row]{white-space:nowrap}
.dp-bedarf-tabelle th[scope=row] .dp-vchip-farbe{margin-inline-end:8px}
.dp-bedarf-tabelle .sub{display:block;font-weight:400;color:var(--muted);font-size:.78rem}
.dp-bedarf-zahl{width:3.6em;min-width:0;text-align:center;padding-inline:4px}
.dp-bedarf-tabelle input[type=color],.dp-regeln-boerse input[type=color]{width:48px;min-height:36px;padding:2px}
.dp-bedarf-neu{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.dp-bedarf-neu label{display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:600;font-size:.84rem}
.dp-regeln-boerse{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 28px}
.dp-regeln-boerse fieldset{border:0;margin:0;padding:0}
.dp-regeln-boerse legend{font-weight:700;margin-bottom:6px}
/* Stundenkonto */
.dp-stunden td.num,.dp-stunden th.num{white-space:nowrap}
.dp-stunden .z-kopf .dp-avatar{width:26px;height:26px;font-size:.68rem}
/* Mitarbeiterliste */
.dp-ma-liste .z-kopf .dp-avatar{width:28px;height:28px}
.dp-ma-liste td form.inline{display:inline}
/* Breiten des Rasters: sieben Tage, Namen und Summe passen bei 1366 ohne Seitwärts-Scrollen */
.dp-woche .dp-zelle{min-width:96px;padding:3px 2px}
.dp-raster .dp-name{min-width:150px;max-width:190px}
.dp-summe-zelle{min-width:84px}
.dp-stand-text{flex:1 1 220px}
.dp-verf-wege{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.dp-verf-klapp{flex:0 0 auto}
.dp-verf-klapp[open]{flex:1 1 100%}
.dp-verf-klapp>summary{list-style:none}
.dp-verf-klapp>summary::-webkit-details-marker{display:none}
.dp-verf-klapp>form{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:var(--radius,12px)}
/* Zahl am Knopf und Warnzeichen: festes Dunkelrot – weiß darauf bleibt in beiden Themen lesbar (das helle Rot des dunklen Themas nicht) */
.dp-veroeff .dp-zahl,.dp-veroeff:not(.btn-primary) .dp-zahl{background:#b91c1c;color:#fff}
.dp-veroeff:not(.btn-primary) .dp-zahl{background:#475569}
.dp-chip .dp-dot{background:#b91c1c;color:#fff}
.dp-tagwahl-i.aktiv span,.dp-tagwahl-i.aktiv b{color:#fff}
/* Dunkel */
:root[data-theme=dark] .dp-stand-entwurf{background:color-mix(in srgb,var(--st-warn-bg,#3a2c12) 80%,var(--panel));border-color:#5a4520}
:root[data-theme=dark] .dp-seg{background:color-mix(in srgb,var(--panel) 70%,#000)}
:root[data-theme=dark] .dp-zeile-offen th,:root[data-theme=dark] .dp-zeile-offen td,:root[data-theme=dark] .dp-raster .dp-zeile-offen th.dp-name{background:color-mix(in srgb,var(--panel) 88%,#fff)}
:root[data-theme=dark] .dp-tipp.dp-ziel{background:color-mix(in srgb,var(--akzent-600) 22%,var(--panel))}
:root[data-theme=dark] .dp-naechste-zeile{background:color-mix(in srgb,var(--f,#0a58ca) 16%,var(--panel))}
:root[data-theme=dark] .dp-vchip-aktiv{background:color-mix(in srgb,var(--f,var(--akzent-600)) 26%,var(--panel))}
/* Breiten */
@media (max-width:900px){.dp-schnell-felder{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:700px){
  .dp-stand{padding:10px 12px}
  .dp-leiste{gap:8px}
  .dp-seg{width:100%}
  .dp-seg-i{flex:1;justify-content:center;min-height:40px}
  .dp-pinsel{padding:8px}
  .dp-pinsel-hinweis{flex-basis:100%}
  .dp-schnell-felder{grid-template-columns:minmax(0,1fr)}
  .dp-schnell-felder input[type=color]{width:100%}
  .dp-schnell-mehr{display:block;margin:8px 0 0}
  .dp-verf-zeile{grid-template-columns:2.6em minmax(0,1fr)}
  .dp-verf-fenster{grid-column:2}
  .dp-verf-fenster input{min-width:0;flex:1}
  .dp-anfrage-knoepfe,.dp-anfrage-knoepfe form,.dp-anfrage-knoepfe .btn{flex:1}
  .dp-anfrage-knoepfe .btn{justify-content:center;min-height:44px}
  .dp-boerse-i .btn{min-height:44px}
  .dp-zeile .dp-zeile-name{flex:0 0 8.2em}
  .page-actions .dp-knopf-text{display:inline}
  /* Am Telefon nichts unter 14 px */
  .chrome-app .dp-chip,.chrome-app .dp-chip b,.chrome-app .dp-soll-text,.chrome-app .dp-bedarf,.chrome-app .dp-verf,.chrome-app .dp-stand-chip,.chrome-app .dp-pinsel-titel,.chrome-app .dp-tagwahl-i,.chrome-app .dp-veroeff .dp-zahl,.chrome-app .dp-mini-titel,.chrome-app .dp-klein,.chrome-app .dp-luecke,.chrome-app .dp-summe small,.chrome-app .dp-zeile-name .sub,.chrome-app .dp-tag-kopf,.chrome-app .dp-vchip,.chrome-app .dp-pinsel-hinweis,.chrome-app .dp-chip small{font-size:14px}
  body.chrome-app .dp-ma-liste .badge,body.chrome-app .dp-mein .badge,body.chrome-app .dp-anfragen .badge{font-size:14px}
  .dp-chip .dp-dot{width:18px;height:18px;font-size:14px;top:-8px}
  .dp-tagwahl-i b{font-size:17px}
  .dp-verf-zeile{grid-template-columns:2.6em minmax(0,1fr)}
}
/* === Ende Runde 7 S === */

/* === Runde 7 K: Kalender === */
/* Kalender (app/views/kalender.php) und Online-Terminbuchung (app/views/site/termin_buchen.php, Einstellungen in parts/kalender_buchung.php).
   Eintragsfarbe immer als --f (Gruppe .kal-g-*, eigene Farbe .kal-c-*); die Schrift bleibt die Textfarbe der Seite, die Farbe trägt nur
   der Streifen und ein Hauch Fläche – so bleibt der Kontrast in hell und dunkel unabhängig von der gewählten Farbe. */
.kal{--kal-h:48px}
.kal .kal-rot{--f:var(--red)}
.kal-karte-card{--f:var(--akzent-600)}
/* ---------- Leiste: ‹ Heute ›, Zeitraum, Ansichten ---------- */
.kal .kal-leiste{justify-content:flex-start;margin:0 0 12px}
.kal-zeitraum{flex:1 1 auto;min-width:0;margin:0;font-size:1.05rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal .kal-ansichten{margin-inline-start:auto}
.kal .kal-seg{min-height:40px;padding:0 14px}
.kal-pfeil .ico{width:18px;height:18px}
/* ---------- Schnelleingabe als Satz ---------- */
.kal-satz-form{margin:0 0 12px}
.kal-satz{display:flex;align-items:center;gap:8px;margin:0;position:relative}
.kal-satz input[type=text]{flex:1;min-width:0;padding:10px 12px 10px 38px;font-size:1rem;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);box-shadow:var(--shadow-xs)}
.kal-satz input[type=text]:focus{border-color:var(--akzent);box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 22%,transparent)}
.kal-satz-ico{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);display:inline-flex;color:var(--akzent-text,var(--akzent-600));pointer-events:none}
.kal-satz .btn{min-height:44px}
.kal-satz-ki{margin:6px 4px 0;font-size:.875rem}
p.kal-satz-ki{margin-bottom:0}
/* ---------- Schalter und „Kalender von“ in einer Zeile ---------- */
.kal-filter{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.kal-filter-reihe{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.kal-filter-reihe form.inline{display:inline-flex}
.kal-wer{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto}
.kal-wer label{display:inline-flex;align-items:center;gap:4px;margin:0;font-size:.88rem;font-weight:500;color:var(--muted);white-space:nowrap}
.kal-wer select{width:auto;max-width:220px;min-height:40px;padding:6px 30px 6px 10px}
/* ---------- Offene Online-Anfragen ---------- */
.kal-anfragen{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.kal-anfragen .card-head h2{display:flex;align-items:center;gap:8px;font-size:1rem}
.kal-anfr-liste{list-style:none;margin:0;padding:0 var(--pad) 8px}
.kal-anfr{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 0;border-top:1px solid var(--line)}
.kal-anfr:first-child{border-top:0}
.kal-anfr-text{flex:1 1 260px;min-width:0;color:var(--text);text-decoration:none!important}
.kal-anfr-text span{display:block;color:var(--muted);font-size:.9rem}
.kal-anfr-knoepfe{display:flex;gap:6px;flex-wrap:wrap}
/* ---------- Zeitraster (Woche, Tag) ---------- */
.kal-zr-karte{padding:0}
.kal-zr{--h:var(--kal-h);--zs:58px;position:relative}
.kal-zr-kopf,.kal-zr-ganz,.kal-zr-raster{display:grid;grid-template-columns:var(--zs) repeat(var(--tage),minmax(0,1fr))}
.kal-zr-kopf{position:sticky;top:var(--topbar-h);z-index:6;background:var(--panel);border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.kal-zr-tk{display:flex;justify-content:center;padding:6px 2px;min-width:0}
.kal-zr-tk a{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:44px;min-height:44px;padding:2px 6px;border-radius:12px;color:var(--muted);text-decoration:none!important;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.kal-zr-tk a b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--text);font-size:1.2rem;font-weight:600;letter-spacing:0}
.kal-zr-tk.is-heute a{color:var(--akzent-text,var(--akzent-600))}
.kal-zr-tk.is-heute a b{background:var(--akzent-600);color:#fff}
@media (hover:hover){.kal-zr-tk a:hover b{background:var(--gray-50)}.kal-zr-tk.is-heute a:hover b{background:var(--akzent-600)}}
.kal-zr-ganz{border-bottom:1px solid var(--line-strong);min-height:32px}
.kal-zr-ecke{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;color:var(--muted);font-size:.78rem;text-align:end;line-height:1.1}
.kal-zr-gz{display:flex;flex-direction:column;gap:2px;min-width:0;padding:3px 2px;border-inline-start:1px solid var(--line)}
.kal-zr-raster{position:relative}
.kal-zr-zeiten{position:relative;height:calc(var(--stunden) * var(--h))}
.kal-zr-zeiten span{position:absolute;top:calc(var(--i) * var(--h) + 2px);inset-inline-end:8px;color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums;line-height:1}
.kal-zr-spalte{position:relative;height:calc(var(--stunden) * var(--h));min-width:0;border-inline-start:1px solid var(--line);
  background-image:linear-gradient(to bottom,var(--line) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--line) 50%,transparent) 1px,transparent 1px);
  background-size:100% var(--h),100% var(--h);background-position:0 0,0 calc(var(--h) / 2)}
.kal-zr-spalte.is-frei{background-color:color-mix(in srgb,var(--gray-50) 55%,var(--panel))}
.kal-zr-spalte.is-heute{background-color:color-mix(in srgb,var(--akzent) 4%,var(--panel))}
.kal-zr-slot{position:absolute;z-index:0;inset-inline:0;top:calc(var(--i) * var(--h));height:var(--h)}
@media (hover:hover){.kal-zr-slot:hover{background:color-mix(in srgb,var(--akzent) 7%,transparent)}}
.kal-zr-jetzt{position:absolute;z-index:4;inset-inline:0;top:calc(var(--t) * var(--h));height:0;border-top:2px solid var(--red);pointer-events:none}
.kal-zr-jetzt::before{content:"";position:absolute;inset-inline-start:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--red)}
/* Blöcke: Höhe und Lage aus --t (Anfang in Stunden ab Rasterbeginn), --d (Dauer), --c/--k (Spalte von Spalten bei Überschneidung). */
.kal-blk{position:absolute;z-index:1;top:calc(var(--t) * var(--h) + 1px);height:calc(var(--d) * var(--h) - 2px);min-height:18px;
  inset-inline-start:calc(100% * var(--c) / var(--k) + 2px);width:calc(100% / var(--k) - 4px);overflow:hidden;padding:3px 6px;
  border-radius:7px;border-inline-start:3px solid var(--f);background:color-mix(in srgb,var(--f) 14%,var(--panel));box-shadow:0 0 0 1px var(--panel);
  color:var(--text);text-decoration:none!important;font-size:.8rem;line-height:1.25;cursor:pointer}
.kal-blk-zeit{font-weight:600;font-variant-numeric:tabular-nums}
/* Schmale Blöcke (Überschneidungen) zeigen nur den Titel – gemessen am Block selbst. */
.kal-blk{container-type:inline-size}
@container (max-width:74px){.kal-blk-zeit,.kal-blk-ort,.kal-blk-marke{display:none}.kal-blk-titel{overflow-wrap:normal;word-break:normal;hyphens:auto}}
.kal-blk-titel{font-weight:500;overflow-wrap:anywhere}
.kal-blk-ort{display:block;margin-top:1px;color:var(--muted);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-blk-kurz{display:flex;align-items:center;gap:4px;white-space:nowrap;padding-block:1px}
.kal-blk-kurz .kal-blk-titel{overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){a.kal-blk:hover{background:color-mix(in srgb,var(--f) 22%,var(--panel));z-index:2}}
.kal-blk:focus-visible{outline:3px solid var(--akzent);outline-offset:1px;z-index:3}
.kal-blk.kal-g-feiertag{background:none;box-shadow:none}
.kal-angefragt.kal-blk,.kal-angefragt.kal-mo-e,.kal-angefragt.kal-zr-ge{border-inline-start-style:dashed;border-inline-start-color:var(--amber);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--amber) 15%,var(--panel)) 0 8px,var(--panel) 8px 14px)}
.kal-blk-marke{display:inline-block;margin-inline-start:4px;padding:0 6px;border-radius:99px;background:var(--st-warn-bg);color:var(--st-warn);font-size:.72rem;font-weight:600;vertical-align:1px}
.kal-blk-griff{position:absolute;inset-inline:0;bottom:0;height:9px;cursor:ns-resize;touch-action:none}
.kal-blk-griff::after{content:"";position:absolute;left:50%;bottom:2px;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:color-mix(in srgb,var(--f) 70%,transparent);opacity:0;transition:opacity .12s}
.kal-blk:hover .kal-blk-griff::after,.kal-blk:focus-visible .kal-blk-griff::after,.kal-zieht .kal-blk-griff::after{opacity:1}
@media (hover:none){.kal-blk-griff{height:14px}.kal-blk-griff::after{opacity:1}}
[data-ziehbar]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kal-zieht{z-index:7!important;box-shadow:var(--shadow-lg)!important;opacity:.92;cursor:grabbing!important;transition:none!important}
body.kal-ziehen,body.kal-ziehen *{cursor:grabbing!important}
body.kal-ziehen-hoehe,body.kal-ziehen-hoehe *{cursor:ns-resize!important}
/* Streifen der Zeile „ganztägig“ und des Monats */
.kal-zr-ge,.kal-mo-e{display:block;min-width:0;padding:2px 6px;border-radius:6px;border-inline-start:3px solid var(--f);background:color-mix(in srgb,var(--f) 12%,var(--panel));
  color:var(--text);text-decoration:none!important;font-size:.8rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-zr-ge b,.kal-mo-e b{font-weight:600;font-variant-numeric:tabular-nums}
.kal-zr-ge.kal-g-feiertag,.kal-mo-e.kal-g-feiertag{background:none;border-inline-start-color:transparent;color:var(--muted);padding-inline-start:4px}
@media (hover:hover){a.kal-zr-ge:hover,a.kal-mo-e:hover{background:color-mix(in srgb,var(--f) 20%,var(--panel))}}
/* ---------- Monat ---------- */
.kal-mo{padding:0}
.kal-mo-kopf,.kal-mo-woche{display:grid;grid-template-columns:38px repeat(7,minmax(0,1fr))}
.kal-mo-kopf{border-bottom:1px solid var(--line)}
.kal-mo-kopf span{padding:10px 2px;text-align:center;color:var(--muted);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.kal-mo-woche+.kal-mo-woche{border-top:1px solid var(--line)}
.kal-mo-kw{display:flex;justify-content:center;padding-top:9px;color:var(--muted);font-size:.78rem;text-decoration:none!important}
@media (hover:hover){.kal-mo-kw:hover{color:var(--text)}}
.kal-mo-tag{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;min-height:122px;padding:4px 4px 6px;border-inline-start:1px solid var(--line)}
.kal-mo-tag.is-frei{background:color-mix(in srgb,var(--gray-50) 55%,var(--panel))}
.kal-mo-tag.is-aussen{background:color-mix(in srgb,var(--gray-50) 80%,var(--panel))}
.kal-mo-tag.is-aussen .kal-mo-nr{color:var(--muted);font-weight:500}
.kal-mo-tag.is-heute{background:color-mix(in srgb,var(--akzent) 7%,var(--panel))}
.kal-mo-tk{display:flex;align-items:center;justify-content:space-between;min-height:32px}
.kal-mo-nr{display:grid;place-items:center;min-width:32px;height:32px;padding:0 4px;border-radius:99px;color:var(--text);font-size:.95rem;font-weight:600;text-decoration:none!important;font-variant-numeric:tabular-nums}
@media (hover:hover){.kal-mo-nr:hover{background:var(--gray-50);box-shadow:inset 0 0 0 1px var(--line-strong)}}
.kal-mo-tag.is-heute .kal-mo-nr{background:var(--akzent-600);color:#fff}
.kal-mo-plus{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--muted);text-decoration:none!important;opacity:0;transition:opacity .12s}
.kal-mo-tag:hover .kal-mo-plus,.kal-mo-plus:focus-visible{opacity:1}
@media (hover:hover){.kal-mo-plus:hover{background:var(--gray-50);color:var(--text)}}
@media (hover:none){.kal-mo-plus{opacity:1}}
.kal-mo-mehr{display:block;padding:2px 6px;color:var(--muted);font-size:.78rem;font-weight:600;text-decoration:none!important;white-space:nowrap}
.kal-mo-mehr-k{display:none}
.kal-mo-tag.kal-ziel{outline:2px dashed var(--akzent);outline-offset:-3px;background:color-mix(in srgb,var(--akzent) 9%,var(--panel))}
/* ---------- Liste ---------- */
.kal-li-wrap{padding:4px 0 8px}
.kal-li-ab{padding:6px var(--pad) 2px}
.kal-li-ab+.kal-li-ab{border-top:1px solid var(--line)}
.kal-li-abkopf{margin:10px 0 2px;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.kal-li-tage{list-style:none;margin:0;padding:0}
.kal-li-tag{padding:4px 0 10px}
.kal-li-tk{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px;font-size:1rem}
.kal-li-tk>a:first-child{display:inline-flex;align-items:baseline;gap:8px;min-height:40px;align-items:center;color:var(--text);text-decoration:none!important}
.kal-li-tk small{color:var(--muted);font-size:.88rem;font-weight:400}
.kal-li-heute .kal-li-tk>a:first-child span{color:var(--akzent-text,var(--akzent-600))}
.kal-li-plus{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--muted);text-decoration:none!important}
@media (hover:hover){.kal-li-plus:hover{background:var(--gray-50);color:var(--text)}}
.kal-li-zeilen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.kal-li{display:flex;align-items:center;gap:4px;border-radius:12px;border-inline-start:4px solid var(--f);background:color-mix(in srgb,var(--f) 7%,var(--panel))}
.kal-li-haupt{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0;min-height:48px;padding:10px 12px;color:var(--text);text-decoration:none!important;border-radius:0 12px 12px 0}
@media (hover:hover){a.kal-li-haupt:hover{background:color-mix(in srgb,var(--f) 8%,transparent)}}
.kal-li-zeit{display:flex;flex-direction:column;flex:0 0 58px;font-size:.92rem;line-height:1.3;font-variant-numeric:tabular-nums}
.kal-li-zeit b{font-weight:600}
.kal-li-zeit span{color:var(--muted);font-size:.85rem}
.kal-li-text{flex:1;min-width:0;line-height:1.35;overflow-wrap:anywhere}
.kal-li-titel{font-weight:500}
.kal-li-text small{display:block;margin-top:2px;color:var(--muted);font-size:.85rem}
.kal-li-akt{display:flex;align-items:center;gap:4px;padding-inline-end:6px}
.kal-akt{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none!important}
@media (hover:hover){.kal-akt:hover{border-color:var(--line-strong);background:var(--gray-50)}}
.kal-li.kal-g-feiertag{background:none;border-inline-start-color:transparent}
.kal-li.kal-g-feiertag .kal-li-haupt{min-height:32px;padding-block:4px;color:var(--muted)}
.kal-li.kal-rot .kal-li-titel{color:var(--red)}
.kal-li.kal-angefragt{border-inline-start-style:dashed;border-inline-start-color:var(--amber)}
.kal-li-leer{padding:2px 2px 4px;color:var(--muted);font-size:.9rem}
.kal-li-frei{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:8px 2px;border-top:1px dashed var(--line);color:var(--muted);font-size:.9rem}
.kal-li-frei+.kal-li-tag{padding-top:8px}
.kal-woche-liste{display:none}
.kal-tag-liste .kal-li-ab{padding-top:0}
/* ---------- Terminkarte ---------- */
.kal-karte-card .card-head h2{display:flex;align-items:center;gap:10px;min-width:0}
.kal-karte-punkt{flex:none;width:12px;height:12px;border-radius:50%;background:var(--f)}
.kal-karte-card.kal-angefragt{border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}
.kal-karte-card.kal-angefragt .kal-karte-punkt{background:var(--amber)}
.kal-karte-zeit{font-size:1.05rem}
.kal-karte-buchung a{overflow-wrap:anywhere}
.kal-karte-handeln{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 2px}
.kal-karte-handeln form.inline{display:inline-flex}
.kal-anfrage-hinweis{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px}
.kal-anfrage-knoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.kal-ablehnen>summary{list-style:none}
.kal-ablehnen>summary::-webkit-details-marker{display:none}
.kal-ablehnen[open]{flex:1 1 100%}
.kal-ablehnen-form{max-width:520px;margin-top:10px}
.kal-karte-weg{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
/* ---------- Formular ---------- */
.kal-farbwahl{margin:0;padding:0;border:0;min-width:0}
.kal-farbwahl legend{margin:0 0 6px;padding:0;font-size:.875rem;font-weight:600}
.kal-fw-reihe{display:flex;flex-wrap:wrap;gap:4px 16px}
.kal-fw{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;font-size:.92rem}
.kal-fw input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.kal-fw-punkt{flex:none;width:22px;height:22px;border-radius:50%;background:var(--f);box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--line-strong)}
.kal-fw input:checked+.kal-fw-punkt{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--f)}
.kal-fw input:checked~span:last-child{font-weight:600}
.kal-fw input:focus-visible+.kal-fw-punkt{outline:3px solid var(--akzent);outline-offset:3px}
.kal-einladen small{color:var(--muted);font-weight:400}
.kal-einladen[hidden]{display:none!important}
/* ---------- Schnellfenster, Rückfrage, Meldung ---------- */
.kal-dialog{max-width:440px;width:calc(100% - 24px);padding:20px}
.kal-dialog h2{margin:0 0 12px;font-size:1.1rem}
.kal-dialog::backdrop{background:rgba(8,15,28,.45)}
.kal-dialog .field{margin-bottom:12px}
.kal-schnell-zeit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:0 12px}
.kal-schnell-vorschau{margin:0 0 12px;padding:8px 12px;border-radius:10px;background:var(--navy-50);color:var(--st-offen);font-size:.92rem}
.kal-schnell-vorschau ul{margin:4px 0 0;padding-inline-start:18px}
.kal-dialog-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.kal-toast{position:fixed;z-index:90;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px);padding:8px 8px 8px 16px;border-radius:12px;background:#172033;color:#fff;box-shadow:var(--shadow-lg);font-size:.94rem}
.kal-toast[hidden]{display:none!important}
.kal-toast-knoepfe{display:flex;gap:6px}
.kal-toast .btn{min-height:40px;border-color:rgba(255,255,255,.3);background:transparent;color:#dbe9ff}
:root[data-theme=dark] .kal-toast{background:#e6ebf3;color:#0d1422}
:root[data-theme=dark] .kal-toast .btn{border-color:rgba(13,20,34,.3);background:transparent;color:#0847a6}
/* ---------- Einstellungen der Online-Buchung ---------- */
.kal-zurueck-link{margin:0 0 12px}
.kal-bu-adresse{display:flex;flex-wrap:wrap;gap:6px}
.kal-bu-adresse input[type=text]{flex:1 1 280px;min-width:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.86rem}
.kal-bu-lkopf,.kal-bu-l{display:grid;grid-template-columns:minmax(0,2fr) 104px 116px minmax(0,2fr);gap:8px;align-items:center}
.kal-bu-lkopf{margin-bottom:6px;color:var(--muted);font-size:.82rem;font-weight:600}
.kal-bu-l{margin-bottom:8px}
.kal-bu-tag{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.kal-bu-tag:first-child{border-top:0}
.kal-bu-wt{font-weight:600}
.kal-bu-fenster{display:flex;flex-wrap:wrap;gap:8px 18px}
.kal-bu-f{display:inline-flex;align-items:center;gap:4px}
.kal-bu-f input[type=time]{width:auto;min-width:0;padding-inline:8px}
.kal-bu-bestaetigung{margin:16px 0 0;padding:0;border:0}
.kal-bu-bestaetigung legend{margin:0 0 6px;padding:0;font-weight:600}
/* ---------- Telefon ---------- */
@media (max-width:700px){
  .kal .kal-leiste{flex-wrap:nowrap;gap:8px}
  .kal .kal-leiste{flex-wrap:wrap}
  .kal-zeitraum{order:-1;flex:1 1 100%;font-size:1rem}
  .kal .kal-ansichten{flex:1 1 0;margin-inline-start:0;min-width:0}
  .kal .kal-seg{flex:1 1 0;justify-content:center;min-height:44px;padding:0 6px;min-width:0;font-size:14px}
  .kal .kal-blaettern{flex:none;gap:6px}
  .kal .kal-blaettern .btn{min-height:44px;min-width:40px;padding-inline:8px}
  .kal-satz input[type=text]{padding-inline-start:36px}
  .kal-satz input[type=text]{font-size:16px}
  .kal-filter{gap:6px}
  .kal-filter-reihe{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 2px 4px}
  .kal-filter-reihe::-webkit-scrollbar{display:none}
  .kal-filter-reihe .kal-chip{flex:none;white-space:nowrap;min-height:44px;padding:0 14px}
  .kal-wer{flex:none;margin-inline-start:0}
  .kal-wer label span{display:none}
  .kal-wer select{min-height:44px;max-width:170px;font-size:16px}
  .kal-zr-woche{display:none}
  .kal-woche-liste{display:block}
  .kal-zr{--zs:50px;--kal-h:56px}
  .kal-zr-zeiten span,.kal-zr-ecke{font-size:14px}
  .kal-blk{font-size:14px;padding:4px 8px}
  .kal-blk-ort,.kal-blk-marke{font-size:14px}
  .kal-zr-ge{font-size:14px}
  .kal-mo-kopf,.kal-mo-woche{grid-template-columns:repeat(7,minmax(0,1fr))}
  .kal-mo-kw,.kal-mo-kw-k,.kal-mo-plus{display:none}
  .kal-mo-kopf span{font-size:14px;letter-spacing:0;padding:8px 0}
  .kal-mo-tag{min-height:66px;align-items:center;padding:3px 2px 5px;gap:3px}
  .kal-mo-tk{justify-content:center;min-height:36px}
  .kal-mo-nr{min-width:36px;height:36px;font-size:15px}
  .kal-mo-e{width:calc(100% - 4px);height:5px;padding:0;border:0;border-radius:3px;background:var(--f)}
  .kal-mo-e .kal-st-text{display:none}
  .kal-mo-e.kal-g-feiertag{background:var(--line-strong)}
  .kal-mo-mehr{padding:0;font-size:14px;line-height:1}
  .kal-mo-mehr .kal-mo-mehr-l{display:none}
  .kal-mo-mehr-k{display:inline}
  .kal-li-ab{padding-inline:16px}
  .kal-li-abkopf,.kal-li-zeit span,.kal-li-text small,.kal-li-tk small,.kal-li-leer,.kal-li-frei,.kal-anfr-text span,.kal-fw,.kal-einladen small,.kal-schnell-vorschau,.kal-blk-zeit{font-size:14px}
  .kal-li-zeit{flex-basis:50px;font-size:14px}
  .kal-li-haupt{gap:10px;padding:10px}
  .kal-dialog{margin:auto 0 0;width:100%;max-width:none;border-radius:20px 20px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .kal-schnell-zeit{grid-template-columns:minmax(0,1fr)}
  .kal-toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .kal-bu-lkopf{display:none}
  .kal-bu-l{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:10px;border:1px solid var(--line);border-radius:10px}
  .kal-bu-l input[name="l_name[]"],.kal-bu-l input[name="l_hinweis[]"]{grid-column:1 / -1}
  .kal-bu-tag{grid-template-columns:minmax(0,1fr)}
  .kal-karte-handeln .btn,.kal-karte-weg .btn{min-height:44px}
}
@media (max-width:420px){.kal .kal-seg-tag{display:none}}
/* ---------- Eigene Farben je Termin (kal_farben()), hell und dunkel ---------- */
.kal-c-indigo{--f:#0a58ca}.kal-c-blau{--f:#0369a1}.kal-c-gruen{--f:#15803d}.kal-c-orange{--f:#c2410c}.kal-c-rot{--f:#be123c}.kal-c-grau{--f:#475569}
:root[data-theme=dark] .kal-c-indigo{--f:#8ec1ff}:root[data-theme=dark] .kal-c-blau{--f:#7dd3fc}:root[data-theme=dark] .kal-c-gruen{--f:#86efac}
:root[data-theme=dark] .kal-c-orange{--f:#fdba74}:root[data-theme=dark] .kal-c-rot{--f:#fda4af}:root[data-theme=dark] .kal-c-grau{--f:#cbd5e1}

/* ---------- Öffentliche Buchungsseite (body.chrome-buchung) ---------- */
body.chrome-buchung{--akzent-text:#0847a6;min-height:100vh;background:var(--bg);font-variant-numeric:tabular-nums}
:root[data-theme=dark] body.chrome-buchung{--akzent-text:#8ec1ff;background:var(--bg)}
.bu{max-width:720px;margin:0 auto;padding:28px 16px 48px}
.bu-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}
.bu-firma{display:flex;align-items:center;gap:14px;min-width:0}
.bu-logo{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#0a58ca,#163a66);color:#fff;font-size:1.4rem;font-weight:700}
.bu-firmenname{margin:0;color:var(--muted);font-size:.95rem;font-weight:600}
.bu h1{margin:2px 0 0;font-size:1.55rem;line-height:1.2}
.bu-sprache{flex:none}
.bu-sprache .dd-menu{right:0;left:auto}
.bu-intro{margin:0 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.bu-schritte{display:flex;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.bu-schritte li{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);font-size:.94rem;font-weight:500}
.bu-schritte li>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bu-schritte li.aktiv{border-color:var(--akzent);color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 18%,transparent)}
.bu-schritte li.fertig{color:var(--text)}
.bu-nr{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--gray-50);color:var(--text);font-size:.88rem;font-weight:700}
.bu-schritte li.aktiv .bu-nr{background:var(--akzent-600);color:#fff}
.bu-schritte li.fertig .bu-nr{background:var(--st-ok-bg);color:var(--st-ok)}
.bu-karte{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}
.bu-karte h2{margin:0 0 14px;font-size:1.2rem}
.bu-leistungen{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.bu-leistung{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;min-height:58px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:14px;color:var(--text);text-decoration:none!important}
.bu-l-name{font-size:1.05rem;font-weight:600}
.bu-l-info,.bu-leistung small{grid-column:1;color:var(--muted);font-size:.94rem}
.bu-pfeil{grid-column:2;grid-row:1 / span 3;display:inline-flex;color:var(--akzent-text)}
@media (hover:hover){.bu-leistung:hover{border-color:var(--akzent);background:var(--akzent-50)}}
.bu-gewaehlt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:.95rem}
.bu-gewaehlt a{color:var(--akzent-text);font-weight:600;white-space:nowrap}
.bu-tage-kopf{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.bu-tage-kopf .btn{min-width:44px;min-height:44px;justify-content:center}
.bu-monat{font-weight:600}
.bu-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.bu-tag{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:66px;padding:6px 2px;border:1px solid var(--line-strong);border-radius:12px;color:var(--text);text-decoration:none!important;line-height:1.2}
.bu-tag span{color:var(--muted);font-size:.8rem;font-weight:600;text-transform:uppercase}
.bu-tag b{font-size:1.2rem}
.bu-tag small{color:var(--muted);font-size:.8rem}
.bu-tag.zu{border-style:dashed;background:transparent;color:var(--muted)}
.bu-tag.aktiv{border-color:var(--akzent-600);background:var(--akzent-600);color:#fff}
.bu-tag.aktiv span,.bu-tag.aktiv small{color:#dbe9ff}
/* Dunkel: die Verweisfarbe (a) hat mehr Gewicht als .bu-tag – Tageszahl und Zelle bleiben in Textfarbe, der gewählte Tag weiß. */
a.bu-tag{color:var(--text)}
a.bu-tag.aktiv,a.bu-tag.aktiv b{color:#fff}
@media (hover:hover){a.bu-tag:not(.aktiv):hover{border-color:var(--akzent);background:var(--akzent-50)}}
.bu-zeiten-t{margin:20px 0 10px;font-size:1rem}
.bu-zeiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.bu-zeit{display:grid;place-items:center;min-height:48px;border:1px solid var(--akzent);border-radius:12px;color:var(--akzent-text);font-size:1.05rem;font-weight:600;text-decoration:none!important}
@media (hover:hover){.bu-zeit:hover{background:var(--akzent-600);color:#fff}}
.bu-form .field{margin-bottom:14px}
.bu-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bu-senden{width:100%;justify-content:center;margin-top:4px}
.bu-klein{margin:12px 0 0;color:var(--muted);font-size:.94rem}
.bu-klein a,.bu-fuss a,.bu-form .check a{color:var(--akzent-text)}
.bu-hinweis{color:var(--muted)}
.bu-fertig,.bu-leer{text-align:center}
.bu-haken{display:inline-grid;place-items:center;width:64px;height:64px;margin-bottom:8px;border-radius:50%;background:var(--st-ok-bg);color:var(--st-ok)}
.bu-haken .ico{width:32px;height:32px}
.bu-zusammen{display:flex;flex-direction:column;gap:2px;max-width:420px;margin:8px auto 16px;padding:12px 16px;border-radius:12px;background:var(--gray-50)}
.bu-karte:not(.bu-fertig) .bu-zusammen{margin-inline:0}
.bu-fuss{margin-top:28px;color:var(--muted);font-size:.94rem;text-align:center}
.bu-fuss p{margin:4px 0}
.chrome-buchung .flash{margin:0 0 12px}
@media (max-width:560px){
  .bu{padding:18px 16px 40px}
  .bu h1{font-size:1.3rem}
  .bu-logo{width:44px;height:44px;border-radius:14px;font-size:1.2rem}
  .bu-schritte li{padding:8px 10px}
  .bu-schritte li:not(.aktiv)>span:last-child{display:none}
  .bu-schritte li:not(.aktiv){flex:0 0 auto}
  .bu-tage{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bu-tag span,.bu-tag small,.bu-nr{font-size:14px}
  .chrome-buchung .btn{font-size:14px}
  .bu-karte{padding:16px;border-radius:16px}
}

/* === Runde 8 F: Fundament === */
/* Komfort-Bausteine (app/komfort.php, docs/komfort-bausteine.md): Sammel-Leiste, Rückgängig-Toast, Fortschritt, Inline-Zellen,
   Datum-Schnellwahl, Betragsrechner, Vervollständigen, haftende Leiste, Tastatur-Cursor, Skelett, kleiner Leerzustand. */
/* Sammelaktionen: ohne Skript eine Leiste über der Liste; mit Skript (.js) nur sichtbar, wenn etwas gewählt ist – haftend unten. */
.sammel-leiste{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line-strong);box-shadow:var(--shadow-sm)}
.sammel-leiste .sammel-zahl{font-weight:600;white-space:nowrap}
.sammel-leiste .sammel-zahl b{font-size:1.1rem;color:var(--akzent-text,var(--akzent))}
.sammel-leiste .sammel-knoepfe{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sammel-leiste.js:not(.is-aktiv){display:none}
.sammel-leiste.js.is-aktiv{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;margin:0;max-width:calc(100vw - 24px);box-shadow:var(--shadow-lg);animation:sammel-auf var(--t-normal) var(--ease)}
@keyframes sammel-auf{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:700px){.sammel-leiste.js.is-aktiv{bottom:calc(60px + env(safe-area-inset-bottom));left:8px;right:8px;transform:none;max-width:none;animation:none;padding:8px 10px}
  .sammel-leiste.js.is-aktiv .btn{padding:6px 8px;font-size:.78rem}}
body.sammel-aktiv .ki-fab{bottom:88px}
/* Runde 8 Schluss: Zusatzfelder einer Sammelaktion (sammel_felder_html) – ohne Skript mit Beschriftung, in der haftenden Leiste kompakt. */
.sammel-felder{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sammel-feld{display:flex;gap:6px;align-items:center;font-size:.88rem}
.sammel-feld input,.sammel-feld select{width:auto;max-width:220px;min-width:120px;height:32px;min-height:32px;padding:2px 8px}
.sammel-leiste.js .sammel-feld label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sammel-feld .is-fehlt{border-color:var(--red);box-shadow:0 0 0 3px var(--red-50)}
@media (max-width:700px){.sammel-leiste.js .sammel-feld input,.sammel-leiste.js .sammel-feld select{min-width:0;max-width:150px}}
.table tr.is-gewaehlt td{background:var(--akzent-50)}
.table tr.is-gewaehlt.row-link:hover td{background:var(--akzent-100)}
/* Tastatur-Cursor (j/k): ein Balken am Zeilenanfang, auch wenn die Zeile den Fokusring gerade nicht zeigt. */
.table tr.is-cursor td{box-shadow:inset 3px 0 0 var(--akzent)}
/* Rückgängig und Fortschritt im Toast */
.toast .toast-undo,.toast .toast-undo-knopf,.toast .toast-aktion{flex:none;margin-inline-start:4px}
.toast .toast-undo button,.toast .toast-undo-knopf{white-space:nowrap}
.komfort-fortschritt{flex-wrap:wrap}
.komfort-fortschritt span{flex:1 0 100%}
.komfort-fortschritt progress{width:100%;height:6px;margin-top:6px;accent-color:var(--akzent);border:0;border-radius:3px;background:var(--line)}
/* Inline-Zellen: ein stiller Rahmen beim Überfahren, ein Feld beim Klick, grün nach dem Speichern. */
.inline-zelle{cursor:text;position:relative;border-radius:6px}
.inline-zelle:hover,.inline-zelle:focus-visible{box-shadow:inset 0 0 0 1px var(--line-strong);outline:none}
.inline-zelle:focus-visible{box-shadow:inset 0 0 0 2px var(--akzent)}
td.inline-zelle.is-edit{cursor:default;padding-top:4px;padding-bottom:4px}
.inline-feld input,.inline-feld select{height:34px;min-height:34px;padding:4px 8px;font-size:.92rem;width:100%;min-width:90px;max-width:220px}
.inline-feld input[type=date]{max-width:160px}
.inline-fehler{color:var(--red);font-size:var(--fs-klein);margin-top:4px;max-width:260px;white-space:normal}
.inline-zelle.is-busy{opacity:.6}
.inline-zelle.is-gespeichert{animation:inline-ok 1.4s var(--ease)}
@keyframes inline-ok{0%{background:var(--green-50)}100%{background:transparent}}
/* Datum-Schnellwahl (data-datum-schnell) */
.datum-schnell{margin-top:6px}
/* Betragsrechner: Knopf in der Eingabegruppe, Blatt fest positioniert (nicht vom Tabellen-Scroll abgeschnitten). */
.betrag-rechner{min-height:0;padding:0 10px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;border:1px solid var(--line-strong);border-inline-start:0;font-weight:700}
.input-group .betrag-rechner{display:flex;align-items:center}
.input-group .addon:has(+ .betrag-rechner){border-radius:0}
.betrag-rechner-blatt{position:fixed;z-index:95;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;width:270px;max-width:calc(100vw - 16px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.betrag-rechner-blatt[hidden]{display:none!important}
.betrag-rechner-zeile{grid-column:1/3;display:flex;gap:6px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px;margin-top:2px;font-size:.9rem}
.betrag-rechner-zeile input{width:64px;min-height:32px;height:32px;padding:2px 6px;margin:0 4px}
/* Vervollständigen (data-vervollstaendigen): Liste unter dem Feld, Tastatur mit Pfeilen. */
.vv-wrap{position:relative}
.vv-liste{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);max-height:260px;overflow:auto}
.vv-liste[hidden]{display:none!important}
.vv-item{padding:8px 12px;cursor:pointer;display:flex;flex-direction:column;gap:1px;font-size:.9rem}
.vv-item b{font-weight:600}.vv-item small{color:var(--muted)}
.vv-item:hover,.vv-item.hl{background:var(--akzent-50)}
.vv-leer{padding:8px 12px;color:var(--muted);font-size:.88rem}
/* Haftende Leiste (data-haft-leiste): klebt unten, bekommt einen Schatten, solange sie schwebt. */
.haft-leiste{position:sticky;bottom:0;z-index:5;background:var(--panel);margin:0 calc(-1 * var(--pad)) calc(-1 * var(--pad));padding:12px var(--pad);border-top:1px solid transparent;border-radius:0 0 var(--radius) var(--radius)}
.haft-leiste.is-schwebend{border-top-color:var(--line);box-shadow:0 -8px 20px -12px rgba(16,24,40,.25)}
.haft-sentinel{height:1px}
@media (max-width:700px){.haft-leiste{bottom:calc(56px + env(safe-area-inset-bottom));margin:0 -16px -16px;padding:12px 16px}}
body:has(.haft-leiste) .ki-fab{bottom:96px}
/* Skelett (skelett()): graue Balken mit Schimmer, bis der Inhalt da ist. */
.skelett{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.skelett-zeile{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--gray-50) 25%,var(--line) 50%,var(--gray-50) 75%);background-size:200% 100%;animation:skelett 1.4s linear infinite}
.skelett-zeile:nth-child(2n){width:72%}.skelett-zeile:nth-child(3n){width:88%}
.skelett-karten .skelett-zeile{height:64px;border-radius:var(--radius-sm)}
@keyframes skelett{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skelett-zeile,.inline-zelle.is-gespeichert,.sammel-leiste.js.is-aktiv{animation:none}}
/* Kleiner Leerzustand (leer_zustand_klein()): eine Zeile mit Zeichen, Satz und Weg. */
.leer-klein{display:flex;align-items:center;gap:10px;padding:14px 16px;color:var(--muted);border:1px dashed var(--line-strong);border-radius:var(--radius-sm);font-size:.92rem}
.leer-klein .ico{color:var(--muted-2)}
.leer-klein-weg{margin-inline-start:auto}
.vorbelegung-knopf{white-space:nowrap}
/* Dunkel */
:root[data-theme=dark] .haft-leiste.is-schwebend{box-shadow:0 -8px 20px -12px rgba(0,0,0,.6)}
/* === Ende Runde 8 F === */

/* === Runde 8 C: Geld === */
/* Bankabgleich als Posteingang, Regeln als Sätze, Verlauf, Schnellerfassung, wiederkehrende Ausgaben, Fragen-Karten der Auswertung,
   Steuerberater-Paket. Nur eigene Klassen (geld-*), die Farben aus den Tokens – hell und dunkel ohne eigene Werte. */
.text-gut{color:var(--gut-text,var(--green))}.text-rot{color:var(--red)}
.geld-leise{font-size:var(--fs-klein,.85rem);margin:6px 0 0}
.geld-pad{padding:0 14px 12px}
.geld-flex{flex:1}
.geld-summary{cursor:pointer}
/* Kopf des Posteingangs */
.geld-kopf .card-body{display:flex;flex-direction:column;gap:12px}
.geld-kopf-zeile{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.geld-kopf-text{flex:1 1 320px;min-width:0}
.geld-titel{margin:0 0 4px;font-size:1.15rem}
.geld-status{margin:0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.geld-zaehler{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 0;font-size:.92rem;color:var(--muted)}
.geld-zaehler b{color:var(--text,inherit);font-size:1.05rem}
.geld-konto{min-width:200px;padding:14px 16px}
.geld-alle{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* Raster: Posteingang links, offene Rechnungen und Verlauf rechts */
.geld-bank-raster{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.geld-bank-seite{position:sticky;top:12px;display:flex;flex-direction:column;gap:16px}
.geld-bank-seite .card,.geld-bank-haupt .card{margin-bottom:0}
.geld-bank-haupt{display:flex;flex-direction:column;gap:16px}
@media (max-width:1100px){.geld-bank-raster{grid-template-columns:1fr}.geld-bank-seite{position:static}}
/* Ein Umsatz */
.geld-liste{list-style:none;margin:0;padding:0}
.geld-tx{border-bottom:1px solid var(--line);padding:12px 16px;border-inline-start:3px solid transparent}
.geld-tx:last-child{border-bottom:0}
.geld-tx.stufe-sicher{border-inline-start-color:var(--green)}
.geld-tx.stufe-wahrscheinlich{border-inline-start-color:var(--akzent)}
.geld-tx.stufe-unsicher{border-inline-start-color:var(--amber)}
.geld-tx-kopf{display:flex;gap:10px;align-items:flex-start}
.geld-tx-wer{flex:1;min-width:0}
.geld-tx-wer b{display:block;overflow-wrap:anywhere}
.geld-tx-wer .sub,.geld-tx-betrag .sub{display:block}
.geld-tx-betrag{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.geld-griff{cursor:grab;touch-action:none;color:var(--muted);padding:4px;margin:-2px 0 0 -6px;border-radius:6px;display:inline-flex;user-select:none}
.geld-griff:hover{background:var(--akzent-50);color:var(--akzent-text,var(--akzent))}
.geld-tx-vorschlag{margin-top:8px}
.geld-satz{margin:0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.geld-beleg,.geld-gruende{margin:4px 0 0}
.geld-aufteilung{list-style:none;margin:6px 0 0;padding:0;font-size:.9rem}
.geld-aufteilung li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px dashed var(--line)}
.geld-aktionen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.geld-aktionen form.inline{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.geld-kat{height:32px;min-height:32px;padding:2px 8px;max-width:220px}
.geld-regel-haken{display:inline-flex;gap:4px;align-items:center;font-size:.88rem;white-space:nowrap}
.geld-andere{display:inline-block}
.geld-andere>summary{list-style:none}.geld-andere>summary::-webkit-details-marker{display:none}
.geld-andere[open]{display:block;width:100%}
.geld-andere-form{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.geld-andere-form input{max-width:220px;height:32px;min-height:32px}
/* Ziehen: Geist, Ziele */
.geld-geist{position:fixed;z-index:120;pointer-events:none;padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--akzent);box-shadow:var(--shadow-lg);font-size:.9rem;max-width:260px}
body.geld-zieht{cursor:grabbing;user-select:none}
.geld-ziel-liste{list-style:none;margin:0;padding:0;max-height:520px;overflow:auto}
.geld-ziel{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:.9rem;border-radius:0}
.geld-ziel .sub{display:block}
.geld-ziel>b.num,.geld-wk-liste b.num,.geld-schuldner b.num,.geld-karte-liste b.num{white-space:nowrap}
body.geld-zieht .geld-ziel{outline:1px dashed var(--line-strong);outline-offset:-3px}
.geld-ziel.is-drueber{background:var(--akzent-50);outline:2px solid var(--akzent)!important}
.geld-zieh-hilfe{padding:8px 14px 0;margin:0}
@media (hover:none){.geld-zieh-hilfe{display:none}}
/* Regeln als Sätze */
.geld-regeln{list-style:none;margin:0 0 12px;padding:0}
.geld-regeln li{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.geld-regeln li.is-aus .geld-regel-satz{opacity:.65}
.geld-regel-satz .sub{display:block}
.geld-regel-knoepfe{display:flex;gap:4px;flex:none}
.geld-satz-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.geld-satz-form select,.geld-satz-form input{width:auto;max-width:240px}
/* Balken (Verlauf) */
.geld-balken{display:flex;gap:6px;align-items:flex-end;height:120px;padding-top:6px}
.geld-balken-monat{flex:1;display:flex;gap:2px;align-items:flex-end;height:100%;position:relative;padding-bottom:18px;justify-content:center}
.geld-balken-monat small{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.72rem;color:var(--muted)}
.geld-b{display:block;width:40%;max-width:14px;min-height:2px;border-radius:3px 3px 0 0}
.geld-b.ein,.geld-punkt.ein{background:var(--green)}
.geld-b.aus,.geld-punkt.aus{background:var(--akzent)}
.geld-legende{font-size:.82rem;margin:6px 0 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.geld-punkt{display:inline-block;width:10px;height:10px;border-radius:3px}
.geld-balken-12 .geld-balken-monat small{font-size:.66rem}
/* Wer schuldet mir was */
.geld-schuldner{list-style:none;margin:0;padding:0}
.geld-schuldner li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) auto;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.geld-schuldner li:last-child{border-bottom:0}
.geld-schuldner-name{color:inherit;text-decoration:none;min-width:0}
.geld-schuldner-name .sub{display:block}
.geld-schuldner-balken{height:8px;background:var(--gray-50);border-radius:99px;overflow:hidden}
.geld-schuldner-balken i{display:block;height:100%;background:var(--akzent);border-radius:99px}
.geld-schuldner-balken i.rot{background:var(--red)}
@media (max-width:600px){.geld-schuldner li{grid-template-columns:minmax(0,1fr) auto}.geld-schuldner-balken{grid-column:1/3;grid-row:2}}
/* Schnellerfassung und wiederkehrende Ausgaben */
.geld-schnell-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.geld-schnell-titel{display:inline-flex;gap:6px;align-items:center;margin-inline-end:4px}
.geld-schnell-betrag{max-width:150px}
.geld-schnell-form>input[name=lieferant]{flex:1 1 200px;width:auto;min-width:160px}
.geld-schnell-form>select{width:auto;max-width:230px}
.geld-lern-tipp{display:block;font-size:var(--fs-klein,.85rem);color:var(--muted);margin-top:4px}
.geld-wk-liste{list-style:none;margin:0;padding:0}
.geld-wk-liste li{display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.geld-wk-liste li>span{flex:1;min-width:0}.geld-wk-liste .sub{display:block}
.geld-wk-liste li:last-child{border-bottom:0}
.geld-hinweise{margin:6px 0 0}
/* Fragen-Karten der Auswertung */
.geld-fragen{margin-bottom:20px}
.geld-fragen-kopf{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.geld-fragen-kopf h2{margin:0;font-size:1.15rem;display:flex;gap:8px;align-items:center}
.geld-monat select{width:auto}
.geld-ki{background:var(--akzent-50);border:1px solid var(--akzent-100);border-radius:var(--radius);padding:12px 16px;margin-bottom:14px}
.geld-ki-text{margin:0;font-size:1rem;line-height:1.5}
.geld-ki form.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.geld-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.geld-karte{margin:0}
.geld-karte .card-body{display:flex;flex-direction:column;gap:10px;height:100%}
.geld-karte-verlauf{grid-column:1/-1}
.geld-frage{margin:0;font-size:1.02rem}
.geld-antwort{margin:0;line-height:1.5}
.geld-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.geld-zahl{background:var(--gray-50);border-radius:var(--radius-sm);padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.geld-zahl b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.geld-zahl-label{font-size:.875rem;color:var(--muted)}
.geld-zahl.good b{color:var(--gut-text,var(--green))}.geld-zahl.warn b{color:var(--red)}
.geld-karte-liste{list-style:none;margin:0;padding:0;font-size:.92rem}
.geld-karte-liste li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.geld-karte-liste li:last-child{border-bottom:0}
.geld-karte-liste .sub{display:block}
.geld-karte-fuss{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.geld-tabellen-titel{font-size:1.05rem;margin:8px 0 12px;color:var(--muted)}
@media (max-width:600px){.geld-karten{grid-template-columns:1fr}.geld-zahlen{grid-template-columns:1fr 1fr}}
/* Steuerberater-Paket */
.geld-paket-inhalt{margin-top:0;color:var(--muted)}
.geld-paket-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.geld-paket-knopf .btn{width:100%;justify-content:flex-start;gap:10px;min-height:58px;text-align:start}
.geld-paket-knopf .btn span{display:flex;flex-direction:column;line-height:1.25}
.geld-paket-knopf .btn small{font-weight:400;font-size:.875rem;color:inherit;opacity:1}
@media (max-width:700px){.geld-paket-wahl{grid-template-columns:1fr}}
/* Gehalt: Ablauf in drei Schritten */
.geld-schritte{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:0;counter-reset:none}
.geld-schritte li>a,.geld-schritte li>span{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:var(--radius-pill,99px);border:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:.9rem}
.geld-schritte b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gray-50);color:var(--text,inherit);font-size:.875rem}
.geld-schritte li.ist-jetzt>a,.geld-schritte li.ist-jetzt>span{border-color:var(--akzent);color:var(--akzent-text,var(--akzent));font-weight:600}
.geld-schritte li.ist-jetzt b{background:var(--akzent-50);color:var(--akzent-text,var(--akzent));box-shadow:inset 0 0 0 1px var(--akzent)}
/* Am Handy: Abzeichen in den eigenen Blöcken nicht unter 14 px (Lesbarkeit; die Messung zählt Schrift unter 14 px). */
@media (max-width:700px){body.chrome-app .content :is(.geld-satz,.geld-status,.geld-paket) .badge{font-size:.875rem}}
.geld-schritte li.ist-fertig b{background:var(--green-50);color:var(--gut-text,var(--green))}
/* Druck einer Karte: nur die Fragen */
@media print{.geld-karte-fuss,.geld-ki form,.geld-monat{display:none}}
/* === Ende Runde 8 C === */

/* === Runde 8 A: Belegfluss === */
/* Editor: Fehler am Feld, Einstieg, Konditionen, Textbausteine, Summe live in der Leiste */
.feld-fehler{display:flex;align-items:flex-start;gap:6px;margin-top:6px;color:var(--red);font-size:.9rem;font-weight:600}
.feld-fehler .ico{flex:none;margin-top:2px}
[aria-invalid="true"]{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-50)}
.feld-fehler-kopf b{color:inherit}
.feld-fehler-kopf a{margin-inline-start:6px;font-weight:600}
.einstieg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--muted);font-size:.9rem}
.einstieg>.ico{color:var(--akzent-600)}
.konditionen>summary small{color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kond-kunde{display:flex;align-items:center;gap:6px;margin:0 0 10px}
.tb-dd>summary{list-style:none}
.tb-dd>summary::-webkit-details-marker{display:none}
.tb-leiste{display:flex;justify-content:flex-end;margin-bottom:4px}
.card-head .tb-dd{margin-inline-start:auto}
.tb-menu{width:min(420px,92vw);padding:8px;gap:4px}
.tb-liste{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto}
.tb-zeile{display:flex;align-items:stretch;gap:2px}
.tb-zeile .tb-item{flex:1;min-width:0}
.tb-item span{display:flex;flex-direction:column;min-width:0;text-align:start}
.tb-item small{color:var(--muted);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-weg{flex:none;align-self:center}
.tb-leer{margin:4px 6px 8px;font-size:.9rem}
.tb-merken{display:flex;flex-wrap:wrap;gap:6px;padding:8px 4px 2px;border-top:1px solid var(--line)}
.tb-merken input{flex:1 1 180px;min-width:0}
.tb-merken textarea{flex:1 1 100%}
.beleg-live{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:.9rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.beleg-live b{color:var(--text)}
.beleg-live .bl-skonto{color:var(--akzent-600)}
.beleg-live .bl-check{padding:1px 8px;border-radius:99px;background:var(--green-50);color:#0f6b46}
.beleg-live .bl-check.is-offen{background:var(--amber-50);color:#7a5200}
.beleg-live.is-fehler{color:var(--red);font-weight:600}
:root[data-theme=dark] .beleg-live .bl-skonto{color:#7fe0d0}
:root[data-theme=dark] .beleg-live .bl-check{color:#8fe0b5}
:root[data-theme=dark] .beleg-live .bl-check.is-offen{color:#ffd88a}
/* Ziehen auch mit dem Finger: Der Griff gehört nie dem Bildlauf (sonst bleibt die Zeile hängen). */
.pos-griff{touch-action:none}

/* Belegseite: Umwandeln-Dialog, Zahlung in einer Zeile, nächster Schritt im Verlauf */
.umwandeln-menu{width:min(460px,94vw);max-height:min(76vh,640px);overflow-y:auto;padding:14px}
.umwandeln-form fieldset{border:0;margin:0 0 12px;padding:0}
.umwandeln-form legend{font-weight:650;margin-bottom:6px;padding:0}
.um-ziele{display:flex;flex-direction:column;gap:6px}
.um-ziel{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.um-ziel:has(input:checked){border-color:var(--akzent);background:var(--akzent-50)}
.um-ziel span{display:flex;flex-direction:column;gap:2px}
.um-ziel small{color:var(--muted);font-size:.88rem}
.um-ziel.is-gesperrt{opacity:.7;cursor:not-allowed}
.um-ziel input{margin-top:3px}
.umwandeln-form .check{display:flex;gap:8px;align-items:center;margin:4px 0}
.um-liste{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.um-liste li{display:flex;align-items:center;justify-content:space-between;gap:8px}
.um-liste li .check{flex:1;min-width:0}
.um-liste li .check span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-menge{display:inline-flex;align-items:center;gap:4px;flex:none}
.um-menge input{width:88px;text-align:end}
.um-menge small{color:var(--muted);font-size:.86rem}
.um-hinweis{margin:8px 0 0}
.umwandeln-form [hidden]{display:none!important}
/* Im Klappmenü sind Knöpfe sonst flache Menüzeilen (.dd-menu .btn) – Hauptknopf und Schnellwahl bleiben hier echte Knöpfe. */
.umwandeln-menu .btn-primary{background:var(--navy);border:1px solid var(--navy);color:#fff;justify-content:center;font-weight:600;margin-top:4px}
.umwandeln-menu .btn-primary:hover{background:var(--navy-700)}
.umwandeln-menu .quick .btn{width:auto;display:inline-flex;border:1px solid var(--line-strong);padding:4px 10px}
.zahl-zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.zahl-zeile .zz-betrag{flex:1 1 120px;min-width:0}
.zahl-zeile .zz-datum{flex:1 1 120px;min-width:0}
.zahl-zeile .btn{flex:1 1 100%;justify-content:center}
.zz-skonto{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0}
.zz-mehr{margin:6px 0 0}
.tl-naechst .tl-datum{font-weight:600;color:var(--akzent-600)}
:root[data-theme=dark] .tl-naechst .tl-datum{color:#7fe0d0}
.tl-naechst .tl-text .btn{margin-top:-2px}

/* Belegliste: Filter als Chips, Ansichten, nächster Schritt, Zeilenvorschau */
.filter-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 12px}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;border:1px solid var(--akzent);background:var(--akzent-50);color:var(--text);font-size:.9rem;text-decoration:none!important}
.fchip:hover{border-color:var(--red)}
.fchip-alle{border-color:var(--line);background:var(--panel);color:var(--muted)}
.chip-ansicht>a{padding-inline-end:11px!important}
.c-schritt{white-space:nowrap}
.c-schritt form{display:inline}
.zeilen-vorschau{position:absolute;z-index:70;width:min(320px,90vw);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:10px 12px;font-size:.9rem;pointer-events:none;display:flex;flex-direction:column;gap:3px}
.zeilen-vorschau[hidden]{display:none}
.zeilen-vorschau .zv-sub{color:var(--muted)}
.zeilen-vorschau .is-rot{color:var(--red);font-weight:600}
.zeilen-vorschau .zv-schritt{margin-top:4px;color:var(--akzent-600);font-weight:600}
:root[data-theme=dark] .zeilen-vorschau .zv-schritt{color:#7fe0d0}

/* Mahnlauf */
.mahnlauf-tabelle .c-sel{width:40px}
.mahnlauf-tabelle label.strong{font-weight:600;cursor:pointer}
.ml-text{margin-top:6px}
.ml-text>summary{cursor:pointer;color:var(--akzent-600);font-size:.9rem;font-weight:500}
:root[data-theme=dark] .ml-text>summary{color:#93c2ff}
.ml-text-pdf{margin:8px 0;padding:8px 10px;border-inline-start:3px solid var(--line-strong);background:var(--gray-50);border-radius:6px;font-size:.9rem;white-space:normal}
.ml-text-pdf p{margin:4px 0 0}
.ml-text-mail{display:block;margin:6px 0 4px;font-size:.9rem;color:var(--muted)}
.ml-text textarea{width:100%;min-width:240px}
.ml-ohne{display:inline-flex;align-items:center;gap:4px;color:#7a5200;font-weight:600}
:root[data-theme=dark] .ml-ohne{color:#ffd88a}
.mahnlauf-fuss{flex-wrap:wrap}
.mahnlauf-hinweis{flex:1 1 260px;font-size:.88rem}
.einv-speichern .form-actions{margin-top:10px}

/* Telefon: neue Texte nie unter 14 px (Messwerte der Runde dürfen nicht schlechter werden), Zahlungszeile untereinander */
@media (max-width:600px){
  .z-schritt .btn,.c-schritt .btn,.fchip,.chip-ansicht a,.tl-naechst .btn,.beleg-live,.einstieg,.einstieg .btn,.tb-dd .btn,.zz-skonto,.zz-skonto .btn,
  .mahnlauf .sub,.mahnlauf .badge,.ml-text>summary,.ml-text-mail,.ml-text-pdf,.mahnlauf-hinweis,.um-ziel small,.um-menge small,.tb-item small,.konditionen>summary small,.feld-fehler{font-size:max(.875rem,14px)}
  /* Wie Runde 7 S (dp-ma-liste): Marken im Mahnlauf am Telefon mit 14 px – die allgemeine Regel setzt 13 px. */
  body.chrome-app .content .mahnlauf .badge,body.chrome-app .content .mahnlauf .z-status .badge{font-size:14px}
  .beleg-live{order:9;flex-basis:100%}
}
/* === Ende Runde 8 A === */

/* === Runde 8 B: Kunden & Stammdaten === */
/* Schnellanlage in der Kundenliste: drei Felder und ein Knopf in einer Zeile, darunter Text einfügen und Duplikat-Hinweis. */
details.kd-schnell>summary,details.kd-stamm>summary{cursor:pointer;list-style:none}
details.kd-schnell>summary::-webkit-details-marker,details.kd-stamm>summary::-webkit-details-marker{display:none}
details.kd-schnell>summary h2::after,details.kd-stamm>summary h2::after{content:"";display:inline-block;width:7px;height:7px;margin-inline-start:10px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px);transition:transform var(--t-normal,.2s)}
details[open].kd-schnell>summary h2::after,details[open].kd-stamm>summary h2::after{transform:rotate(-135deg) translateY(-1px)}
details.kd-schnell:not([open])>summary,details.kd-stamm:not([open])>summary{border-bottom:0}
@media (max-width:700px){details.kd-schnell>summary,details.kd-stamm>summary{flex-wrap:wrap;gap:2px 8px}details.kd-schnell>summary small,details.kd-stamm>summary small{flex-basis:100%}}
.kd-schnell-zeile{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;align-items:end}
.kd-schnell-zeile .field{margin:0}
.kd-schnell-knopf{display:flex;align-items:flex-end}
@media (max-width:860px){.kd-schnell-zeile{grid-template-columns:minmax(0,1fr)}.kd-schnell-knopf .btn{width:100%;justify-content:center}}
.kd-text{margin-top:12px}
.kd-text>summary{cursor:pointer;color:var(--akzent-text,var(--akzent));font-weight:500;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.kd-text[open]>summary{margin-bottom:8px}
.kd-erkannt{font-size:.88rem;margin-inline-start:8px}
.kd-duplikat{margin-top:10px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--amber-50);border:1px solid var(--amber-100,var(--line));color:var(--text);font-size:.9rem}
.kd-duplikat[hidden]{display:none!important}
.kd-duplikat ul{margin:4px 0 0;padding-inline-start:18px}
.kd-duplikat li{margin:2px 0}
.form-grid .kd-duplikat.full{grid-column:1/-1;margin-top:0}
/* Filter und Tags über der Liste */
.kd-filter{display:flex;flex-direction:column;gap:8px;margin:-4px 0 14px}
.kd-filter .pills{gap:6px}
.kd-seit{display:flex;gap:6px;align-items:center}
.kd-seit select{max-width:180px}
.pill.pill-tag small{color:var(--muted);font-weight:400}
.pill.active small{color:inherit;opacity:.8}
.kd-tag{display:inline-block;padding:1px 8px;margin:1px 2px 1px 0;border-radius:99px;background:var(--akzent-50);color:var(--akzent-text,var(--akzent-600));font-size:.875rem;font-weight:500;white-space:nowrap;text-decoration:none}
a.kd-tag:hover{background:var(--akzent-100)}
td.kd-tagzelle{max-width:200px}
td.kd-tel{white-space:nowrap}
.kd-export{margin:10px 2px 0;font-size:.88rem}
/* Wert-Feld der Sammelaktionen: ohne Skript über der Liste, mit Skript in der Leiste */
/* Akte: Kopfzahlen, Zeitleiste, Konditionen, Notizen */
.kd-kopf .kpi{padding:16px}
.kd-kopf .kpi .value{font-size:1.35rem}
.kd-kopf .kpi .label,.kd-kopf .kpi .sub{font-size:.875rem}
@media (max-width:900px){.kd-kopf .kd-tags-kpi{grid-column:1/-1}}
.kd-tags-wert{display:flex;flex-wrap:wrap;gap:2px;min-height:26px;align-items:center}
.kd-tags-form{display:flex;gap:6px;margin-top:4px}
.kd-tags-form input{flex:1;min-width:0;min-height:32px;height:32px;font-size:.88rem}
.kd-zeit{list-style:none;margin:0;padding:4px 0}
.kd-zeit li[hidden]{display:none}
.kd-zeit-monat{padding:12px 20px 4px;font-size:.875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.kd-zeit-eintrag{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 20px;border-top:1px solid var(--line)}
.kd-zeit-monat+.kd-zeit-eintrag{border-top:0}
.kd-zeit-ico{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--gray-50);color:var(--gray-600)}
.kd-zeit-ico .ico{width:16px;height:16px}
.kd-art-beleg{background:var(--navy-50);color:var(--navy)}
.kd-art-zahlung{background:var(--green-50);color:#0f6b46}
.kd-art-termin,.kd-art-tour{background:var(--akzent-50);color:var(--akzent-600)}
.kd-art-wiedervorlage{background:var(--amber-50);color:#9a6400}
.kd-zeit-text{min-width:0}
.kd-zeit-text .strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kd-zeit-text .sub{display:block;font-size:.875rem;color:var(--muted)}
.kd-zeit-text a.strong{text-decoration:none;color:var(--text)}
.kd-zeit-text a.strong:hover{text-decoration:underline;color:var(--akzent-text,var(--akzent))}
.kd-zeit-rechts{display:flex;gap:8px;align-items:center;justify-content:flex-end;white-space:nowrap}
.kd-zeit-rechts b.neg{color:var(--muted)}
.kd-zeit-rechts .badge,body.chrome-app .content .kd-zeit-rechts .badge,body.chrome-app .content .kd-akte .z-status .badge{font-size:14px}
.kd-zeit-filter{margin-inline-start:auto}
.kd-zeit-filter[hidden]{display:none!important}
.kd-zeit-filter .pill{padding:5px 10px;font-size:.875rem;cursor:pointer;font-family:inherit}
@media (max-width:700px){.kd-zeit-eintrag{padding:9px 16px;grid-template-columns:28px minmax(0,1fr)}.kd-zeit-rechts{grid-column:2;justify-content:flex-start}.kd-zeit-ico{width:28px;height:28px}
  .kd-zeit-filter{margin-inline-start:0;width:100%;overflow-x:auto;flex-wrap:nowrap}}
#zeitleiste .card-head{flex-wrap:wrap}
.kd-summe td{border-top:2px solid var(--line-strong)}
.kd-adresse{line-height:1.5;margin-bottom:8px}
.kd-wege{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.kd-wege li{display:flex;gap:8px;align-items:center;min-width:0;overflow-wrap:anywhere}
.kd-kond th{font-weight:500;color:var(--muted);text-align:start;width:45%;font-size:.9rem;text-transform:none;letter-spacing:0}
.kd-kond td{text-align:end}
.kd-notiz-form{margin-bottom:10px}
.kd-notizen{list-style:none;margin:0;padding:0}
.kd-notizen li{padding:8px 0;border-top:1px solid var(--line);font-size:.92rem;overflow-wrap:anywhere}
.kd-notizen li:first-child{border-top:0}
.kd-notizen .sub{display:block;font-size:.875rem;color:var(--muted)}
.kd-tipps ul{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
/* Duplikate, Import */
.kd-gruppe td input[type=radio],.kd-gruppe td input[type=checkbox]{width:18px;height:18px}
.kd-zuordnung .field{margin-bottom:10px}
/* Serien: Satz und nächste Termine */
.serie-satz{font-weight:500}
.serie-termine{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.serie-termine span{padding:1px 8px;border-radius:99px;background:var(--gray-50);font-size:.875rem;color:var(--gray-600);white-space:nowrap}
.serie-monat li{display:flex;gap:10px;align-items:center}
.vt-status-knoepfe{display:flex;gap:6px;flex-wrap:wrap}
/* Regeln als Sätze, Vorlagen */
.regel-satz{font-size:.92rem;line-height:1.45}
.regel-vorlagen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.regel-vorlagen li{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.regel-vorlagen li span{font-size:.9rem}
.log-faelle{margin:4px 0 0;padding:0;list-style:none;font-size:.875rem;color:var(--muted)}
/* Produkte: häufig verwendet, Kategorie */
.art-haeufig{display:flex;gap:8px;flex-wrap:wrap}
.art-haeufig a{display:flex;flex-direction:column;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--text);min-width:140px}
.art-haeufig a:hover{border-color:var(--akzent);background:var(--akzent-50)}
.art-haeufig small{color:var(--muted)}
/* Dunkel */
:root[data-theme=dark] .kd-duplikat{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)}
:root[data-theme=dark] .kd-art-zahlung{color:#6ee7b7}
:root[data-theme=dark] .kd-art-wiedervorlage{color:#fcd34d}
:root[data-theme=dark] .kd-tag{color:var(--akzent-text,#5eead4)}
/* === Ende Runde 8 B === */
/* === Runde 8 D: Team-Alltag & Dokumente === */
/* Zeiten: Reiter, Monatsblatt mit Saldo je Tag, Korrektur in der Zeile, „Gehen fehlt“, Nachtrag in einer Zeile. */
.tr8-reiter{margin-bottom:14px}
.tr8-blatt tr.tr8-gehen-fehlt td{background:var(--red-50,#fef2f2)}
.tr8-blatt tr.tr8-zeit-fehlt td{background:var(--amber-50)}
.tr8-blatt tr.is-edit td{background:var(--akzent-50)}
.tr8-blatt tr.is-gespeichert td{animation:inline-ok 1.4s var(--ease)}
.tr8-blatt td input[type=time],.tr8-blatt td input[type=number]{height:34px;min-height:34px;padding:2px 6px;width:100%;min-width:84px;max-width:120px}
.tr8-blatt td.actions .sub{display:block;margin-top:4px;white-space:normal;max-width:240px}
.tr8-korrektur-zeile td{background:var(--akzent-50);padding-top:6px;padding-bottom:10px}
.tr8-korrektur{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tr8-korrektur input{flex:1 1 260px;min-height:36px}
.card-head .tr8-freigabe{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-inline-start:auto}
.tr8-zeile{display:grid;grid-template-columns:minmax(130px,1.1fr) minmax(96px,.8fr) minmax(96px,.8fr) minmax(80px,.6fr) minmax(180px,2fr) auto;gap:10px;align-items:end}
.tr8-zeile .field{margin:0}
.tr8-zeile-knopf .btn{white-space:nowrap}
@media (max-width:860px){.tr8-zeile{grid-template-columns:1fr 1fr}.tr8-zeile .field:nth-child(5),.tr8-zeile-knopf{grid-column:1/-1}.tr8-zeile-knopf .btn{width:100%;justify-content:center}}
.tr8-fehlt{display:flex;gap:10px;align-items:flex-start}
.tr8-abrechnen tr.tr8-vorwahl td{background:var(--akzent-50)}
.tr8-klein{font-size:.82rem}
.tr8-umbruch{overflow-wrap:anywhere}
/* Abwesenheiten: Anträge mit Wischen, Kalender zum Antippen, Jahresstreifen. */
.tr8-antrag{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel);touch-action:pan-y;transition:transform .18s var(--ease),opacity .3s var(--ease)}
.tr8-antrag:last-child{border-bottom:0}
.tr8-antrag-text{flex:1 1 320px;min-width:0}
.tr8-antrag-text .sub{display:block;margin-top:2px}
.tr8-antrag.wischt-ja{background:var(--green-50)}
.tr8-antrag.wischt-nein{background:var(--red-50,#fef2f2)}
.tr8-antrag.is-busy{opacity:.6}
.tr8-antrag.is-weg{opacity:0;transform:translateX(40px)}
.tr8-antrag.is-weg.is-nein{transform:translateX(-40px)}
.tr8-rest-erklaert{margin:0;padding:0 var(--pad) 4px;color:var(--muted);font-size:.9rem}
.tr8-rest-erklaert b{color:var(--text)}
.tr8-kal-hinweis{margin:0 0 8px;font-size:.9rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.tr8-kal-legende{display:inline-flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:.875rem;color:var(--muted)}
.tr8-kal-legende i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:4px;vertical-align:-1px}
.lg-feiertag{background:var(--red,#dc2626);width:6px!important;height:6px!important;border-radius:50%!important}
.lg-kollegen{background:var(--muted-2,#94a3b8);width:6px!important;height:6px!important;border-radius:50%!important}
.lg-eigen,.lg-urlaub{background:#f59e0b}
.lg-krank{background:#ef4444}
.lg-sonstiges{background:#64748b}
.lg-beantragt{background:repeating-linear-gradient(135deg,#f59e0b 0 3px,transparent 3px 6px);border:1px solid #f59e0b}
.tr8-kal{display:flex;gap:14px;align-items:flex-start}
.tr8-kal-monat{flex:1 1 0;min-width:0}
.tr8-kal-titel{font-weight:600;margin-bottom:6px;text-align:center}
.tr8-kal-raster{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.tr8-kal-wt{font-size:.75rem;color:var(--muted);text-align:center;padding:2px 0}
.tr8-kal-tag{position:relative;min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:.9rem;cursor:pointer;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tr8-kal-tag:hover{border-color:var(--akzent)}
.tr8-kal-tag:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
.tr8-kal-tag.is-frei{background:var(--gray-50)}
.tr8-kal-tag.is-heute{box-shadow:inset 0 0 0 2px var(--akzent)}
.tr8-kal-tag.is-vergangen .tr8-kal-nr{text-decoration:none}
.tr8-kal-tag.is-eigen.is-urlaub{background:#fef3c7;color:#854d0e}
.tr8-kal-tag.is-eigen.is-krank{background:#fee2e2;color:#991b1b}
.tr8-kal-tag.is-eigen.is-beantragt{background:repeating-linear-gradient(135deg,#fef3c7 0 4px,var(--panel) 4px 8px)}
.tr8-kal-tag.is-wahl{background:var(--akzent-100);color:var(--text);border-color:var(--akzent)}
.tr8-kal-tag.is-start,.tr8-kal-tag.is-ende{background:var(--akzent-600,#0a58ca);color:#fff;border-color:var(--akzent-600,#0a58ca)}
.tr8-kal-ft{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--red,#dc2626)}
.tr8-kal-kol{display:flex;gap:2px;margin-top:1px}
.tr8-kal-kol i{width:6px;height:6px;border-radius:50%;background:var(--f,var(--muted-2,#94a3b8))}
.tr8-kal-leer{min-height:40px}
.tr8-kal-nav{align-self:center;flex:none}
.tr8-kal-auswahl{min-height:1.4em;margin:8px 0;font-weight:600}
.tr8-antrag-form.tr8-js .tr8-von-bis{opacity:.85}
@media (max-width:700px){.tr8-kal{flex-wrap:wrap}.tr8-kal-monat{flex:1 1 100%}.tr8-kal-monat+.tr8-kal-monat{display:none}.tr8-kal-nav{order:-1}.tr8-kal-tag{min-height:44px}}
.tr8-streifen-wrap{overflow-x:auto;padding:8px 0}
.tr8-streifen{display:grid;grid-template-columns:170px 1fr 56px;gap:8px;align-items:center;padding:4px 16px;min-width:640px}
.tr8-streifen-kopf{font-size:.75rem;color:var(--muted)}
.tr8-st-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem}
.tr8-st-monate{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}
.tr8-streifen-kopf .tr8-st-monate span{text-align:center}
.tr8-st-monat{position:relative;height:18px;border-radius:3px;background:var(--gray-50);overflow:hidden}
.tr8-st-ft{position:absolute;top:0;bottom:0;width:2px;background:var(--red,#dc2626);opacity:.45}
.tr8-st-abw{position:absolute;top:2px;bottom:2px;min-width:3px;border-radius:2px;background:#f59e0b}
.tr8-st-abw.st-krank{background:#ef4444}
.tr8-st-abw.st-sonstiges{background:#64748b}
.tr8-st-abw.st-beantragt{background:repeating-linear-gradient(135deg,#f59e0b 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px #f59e0b}
.tr8-st-rest{text-align:right;font-variant-numeric:tabular-nums}
.tr8-ft-liste{list-style:none;margin:0;padding:0;columns:2 260px;font-size:.9rem}
.tr8-ft-liste li{padding:3px 0;break-inside:avoid}
.tr8-ft-liste span{display:inline-block;min-width:118px;color:var(--muted)}
.tr8-datei-form{display:inline-flex}
.tr8-datei-knopf{position:relative;overflow:hidden}
.tr8-datei-knopf input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
/* Mitarbeiter: Start-Checkliste, schnelle Dokumente; Liste mit Inline-Spalten ohne Umbruch in Name und Telefon. */
@media (min-width:701px){.dp-ma-liste td.z-kopf,.dp-ma-liste td[data-inline=telefon]{white-space:nowrap}.dp-ma-liste td[data-inline=email]{max-width:200px}}
.tr8-onb{list-style:none;margin:0;padding:0}
.tr8-onb li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.tr8-onb li:last-child{border-bottom:0}
.tr8-onb li>.ico{color:var(--green)}
.tr8-onb-text{flex:1 1 260px;min-width:0}
.tr8-onb-text .sub{display:block}
.tr8-onb li.ok .tr8-onb-text b{color:var(--muted);font-weight:500}
.tr8-dok-schnell{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
/* Dokumente: drei Schritte, Fehlendes zuerst, Vorbefülltes kurz, KI-Absatz, Serie, Empfang. */
.tr8-schritte{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 14px;padding:0;font-size:.92rem;color:var(--muted)}
.tr8-schritte li{display:flex;align-items:center;gap:6px}
.tr8-schritte li b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);font-size:.875rem}
.tr8-schritte li.ok{color:var(--green)}
.tr8-schritte li.aktiv{color:var(--text);font-weight:600}
.tr8-schritte li.aktiv b{background:var(--akzent-600,#0a58ca);border-color:var(--akzent-600,#0a58ca);color:#fff}
.tr8-fehlt-karte{border-color:var(--amber,#d97706)}
.tr8-fehlt-karte .dok-fehlt>label{color:var(--text)}
.tr8-rest-erklaert .i-tip{display:inline-block;vertical-align:middle}
.tr8-kurz{display:grid;grid-template-columns:minmax(140px,max-content) 1fr;gap:4px 16px;margin:0;font-size:.9rem}
.tr8-kurz dt{color:var(--muted)}
.tr8-kurz dd{margin:0;overflow-wrap:anywhere}
@media (max-width:600px){.tr8-kurz{grid-template-columns:1fr}.tr8-kurz dd{margin-bottom:6px}}
.tr8-ki-absatz{display:block;margin-top:4px}
.tr8-ki-box{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tr8-ki-box input{flex:1 1 220px;min-height:36px}
.tr8-ma-wahl{display:flex;flex-wrap:wrap;gap:8px}
.tr8-ma-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:999px;cursor:pointer;min-height:40px}
.tr8-ma-chip:has(input:checked){background:var(--akzent-50);border-color:var(--akzent)}
.tr8-alle-wahl{display:inline-flex;gap:6px;align-items:center;margin-inline-start:auto;font-size:.9rem}
.tr8-empfang{margin:10px 0 6px}
.tr8-vorschau-fehler{color:var(--red);margin-bottom:10px}
/* Dunkel */
:root[data-theme=dark] .tr8-kal-tag.is-eigen.is-urlaub{background:#4a3a12;color:#fde68a}
:root[data-theme=dark] .tr8-kal-tag.is-eigen.is-krank{background:#4c1d1d;color:#fecaca}
:root[data-theme=dark] .tr8-kal-tag.is-eigen.is-beantragt{background:repeating-linear-gradient(135deg,#4a3a12 0 4px,var(--panel) 4px 8px)}
:root[data-theme=dark] .tr8-blatt tr.tr8-gehen-fehlt td,:root[data-theme=dark] .tr8-antrag.wischt-nein{background:rgba(220,38,38,.14)}
:root[data-theme=dark] .tr8-blatt tr.tr8-zeit-fehlt td{background:rgba(217,119,6,.12)}
@media (prefers-reduced-motion:reduce){.tr8-antrag{transition:none}.tr8-blatt tr.is-gespeichert td{animation:none}}
/* === Ende Runde 8 D === */

/* === Runde 8 G: Verwaltung & Hilfe === */
/* Hilfe-Knopf oben, Hilfe-Panel, Einführungstour, Systemprüfung als Ampel, Dienste, Kundensuche, Kampagnen-Schritte, Was ist neu, Suchen. */
.hilfe-knopf{position:relative}
/* Telefon: die Kopfleiste ordnet per order (Menü 1, Firma 2, Suche 3, Glocke 4, Konto 5) – das „?“ steht zwischen Suche und Glocke. */
@media (max-width:700px){.topbar .hilfe-knopf{order:3}}
.hilfe-knopf .notif-count{position:absolute;top:2px;inset-inline-end:2px}
.hilfe-panel:not([hidden]){position:fixed;z-index:75;top:calc(var(--topbar-h) + 8px);inset-inline-end:16px;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - var(--topbar-h) - 24px);display:flex;flex-direction:column;background:var(--panel);color:var(--text);border:1px solid var(--line-strong);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.hilfe-panel-kopf{display:flex;align-items:flex-start;gap:8px;padding:12px 10px 10px 18px;border-bottom:1px solid var(--line)}
.hilfe-panel-kopf h2{flex:1;margin:0;font-size:1.02rem;display:flex;flex-direction:column;gap:2px}
.hilfe-panel-kopf h2 small{font-size:.85rem;font-weight:500;color:var(--muted)}
.hilfe-panel-kopf .btn-icon{font-size:1.3rem;line-height:1}
.hilfe-panel-rumpf{padding:12px 18px;overflow:auto;flex:1}
.hilfe-panel-rumpf h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:10px 0 6px}
.hilfe-frage{border-bottom:1px solid var(--line);padding:8px 0}
.hilfe-frage summary{cursor:pointer;font-weight:600;font-size:.95rem}
.hilfe-frage p{margin:6px 0 0;font-size:.92rem;line-height:1.5;color:var(--text)}
.hilfe-neu{background:var(--akzent-50);border:1px solid var(--akzent-100);border-radius:10px;padding:8px 12px;margin-bottom:6px}
.hilfe-neu h3{margin-top:2px}
.hilfe-neu ul{list-style:none;margin:0;padding:0}
.hilfe-neu li{display:flex;flex-direction:column;gap:2px;padding:4px 0;font-size:.92rem}
.hilfe-neu li span{color:var(--muted)}
.hilfe-panel-fuss{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-top:1px solid var(--line)}
@media (max-width:700px){.hilfe-panel:not([hidden]){inset-inline:8px;width:auto;top:auto;bottom:calc(64px + env(safe-area-inset-bottom));max-height:75vh}}
/* Einführungstour: eine Sprechblase am Element, auf dem Telefon unten fest. */
.hilfe-tour{position:fixed;z-index:76;max-width:340px;background:var(--panel);color:var(--text);border:1px solid var(--akzent);border-radius:12px;box-shadow:var(--shadow-lg);padding:12px 14px;font-size:.92rem}
.hilfe-tour p{margin:0 0 8px;line-height:1.45}
.hilfe-tour-fuss{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hilfe-tour-fuss small{flex:1;color:var(--muted);font-size:.85rem}
.hilfe-tour.unten-fest{left:8px;right:8px;bottom:calc(64px + env(safe-area-inset-bottom));max-width:none}
.hilfe-tour-ziel{outline:3px solid var(--akzent);outline-offset:3px;border-radius:6px}
/* Heute wichtig */
.tasks.heute-wichtig li.dringend{background:var(--red-50,#fdecec)}
.tasks.heute-wichtig li.dringend .ico{color:var(--red)}
:root[data-theme=dark] .tasks.heute-wichtig li.dringend{background:rgba(220,38,38,.14)}
/* Systemprüfung und Prüflisten (auch Kampagne Schritt 3) */
.pruef-liste{list-style:none;margin:0;padding:0}
.pruef{display:flex;gap:12px;align-items:flex-start;padding:10px 16px;border-bottom:1px solid var(--line)}
.pruef:last-child{border-bottom:0}
.pruef .badge{flex:none;min-width:96px;justify-content:center}
.pruef-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pruef-text small{color:var(--muted);overflow-wrap:anywhere}
.pruef-beheben{display:block;font-size:.88rem;color:var(--text);margin-top:2px}
.pruef-fehler{background:rgba(220,38,38,.05)}
.mkt-pruef .pruef{padding:8px 0}
.pruef-kurz{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.pruef-bericht{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem}
/* Dienste */
.dienst-liste{list-style:none;margin:0;padding:0}
.dienst{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line)}
.dienst:last-child{border-bottom:0}
.dienst-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--akzent-50);color:var(--akzent-600)}
.dienst-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.dienst-text small{color:var(--muted);overflow-wrap:anywhere}
.dienst-aktion{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dienst-fehler{margin:4px 0 0;padding-inline-start:16px;font-size:.85rem;color:var(--red)}
@media (max-width:700px){.dienst{flex-wrap:wrap}.dienst-aktion{width:100%;justify-content:flex-start}}
/* Kundensuche */
.kunden-such{display:flex;gap:8px}
.kunden-such input{flex:1;min-width:0}
/* Kampagne in drei Schritten */
.mkt-schritte{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mkt-schritte a{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:inherit;text-decoration:none;height:100%}
.mkt-schritte a small{display:block;color:var(--muted);font-size:.84rem}
.mkt-schritt-nr{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--gray-50);border:1px solid var(--line-strong);font-weight:700}
.mkt-schritte li.aktiv a{border-color:var(--akzent)}
.mkt-schritte li.aktiv .mkt-schritt-nr{background:var(--akzent-600);border-color:var(--akzent-600);color:#fff}
.mkt-schritte li.fertig .mkt-schritt-nr{background:var(--green);border-color:var(--green);color:#fff}
.mkt-schritt-t{margin:18px 0 8px;font-size:1rem}
@media (max-width:700px){.mkt-schritte{grid-template-columns:1fr}}
/* Was ist neu */
.neu-liste{list-style:none;margin:0;padding:0}
.neu-eintrag{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.neu-eintrag:last-child{border-bottom:0}
.neu-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--akzent-50);color:var(--akzent-600)}
.neu-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.neu-text span{font-size:.93rem}
@media (max-width:700px){.neu-eintrag{flex-wrap:wrap}.neu-eintrag .btn{margin-inline-start:46px}}
/* Suchen: Alle Funktionen, Ratgeber */
.fk-suche{max-width:none;margin-bottom:8px}
.fk-zahl{margin:0 0 10px;font-size:.9rem}
.fk-offen{margin-inline-start:2px}
.ratgeber-suche{margin-bottom:18px}
.ratgeber-leer{margin:0 0 18px}
:root[data-theme=dark] .dienst-ico,:root[data-theme=dark] .neu-ico{background:var(--akzent-100)}
@media (prefers-reduced-motion:reduce){.hilfe-tour,.hilfe-panel{transition:none;animation:none}}
@media print{.hilfe-panel,.hilfe-tour,.hilfe-knopf{display:none!important}}
/* Telefon: keine Schrift unter 14 px in den Listen von G (Kennzeichen, Unterzeilen, Zähler). */
@media (max-width:700px){body.chrome-app .content .pruef .badge,body.chrome-app .content .pruef-text small,body.chrome-app .content .pruef-beheben,body.chrome-app .content .pruef-bericht,body.chrome-app .content .dienst .badge,body.chrome-app .content .dienst-text small,body.chrome-app .content .dienst-fehler,body.chrome-app .content .neu-text small,body.chrome-app .content .neu-tag .badge,body.chrome-app .content .neu-seite .pill .pill-count,body.chrome-app .content .mkt-schritte small,body.chrome-app .content .mkt-pruef .badge,body.chrome-app .content #aufgaben .badge,body.chrome-app .content .tasks.heute-wichtig li,body.chrome-app .content .fk-sprung .pill .pill-count,body.chrome-app .content .fk-offen,body.chrome-app .content .fk-zahl,body.chrome-app .content .fk-text .badge,body.chrome-app .content .pruef-kurz .badge,body.chrome-app .content #pruefung .card-head .badge,body.chrome-app .content #dienste-ampel .card-head .badge,body.chrome-app .content #dienste-ampel ~ .card .badge,body.chrome-app .content #marketing .pills .pill .pill-count,body.chrome-app .hilfe-panel small,body.chrome-app .hilfe-tour-fuss small{font-size:14px}}
/* === Ende Runde 8 G === */

/* === Runde 8 E: Unterwegs & Einrichtung === */
/* Touren: Tagesübersicht, Quellen, Fahrer */
.tr-tag-zahlen{display:flex;flex-wrap:wrap;gap:8px}
.tr-tag-zahlen>span{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 14px;font-size:.9rem;color:var(--muted)}
.tr-tag-zahlen b{color:var(--text);font-size:1rem}
.tr-tag-zahlen .tr-tag-problem{border-color:var(--st-err);color:var(--st-err)}
.tr-tag-zahlen .tr-tag-problem b{color:var(--st-err)}
.tr-zuweisen select{max-width:240px;min-height:36px}
.tr-quellen-gruppe{border:0;margin:0 0 14px;padding:0}
.tr-quellen-gruppe legend{font-weight:600;padding:0 0 6px;display:flex;align-items:center;gap:6px}
.tr-quellen-gruppe .tr-wahl-zeile{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:6px}
.tr-quellen-optionen{display:flex;flex-wrap:wrap;gap:4px 22px;margin:4px 0 12px}
.tr-vorlagen-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.tr-fahrer-liste{list-style:none;margin:0;padding:0}
.tr-fahrer-liste li{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:.9rem}
.tr-fahrer-liste li:last-child{border-bottom:0}
.tr-fahrer-liste li span{color:var(--muted)}
.tr-fahrer-liste .tr-fahrer-frei span{color:var(--gut-text,var(--green))}
.tr-fahrer-liste .tr-fahrer-abwesend span{color:var(--st-err)}
.tr-zuweisung{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.tr-zuweisen-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tr-zuweisen-form label{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.tr-zuweisen-form select{min-width:220px;max-width:100%}
.tr-zuweisen-form .field.check{margin:0}
.tr-nachweis-mini{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0 38px;font-size:.875rem;color:var(--gut-text,var(--green))}
.tr-nachweis-mini img{height:48px;width:auto;max-width:96px;border-radius:6px;border:1px solid var(--line);background:#fff;object-fit:cover}
.tr-nachweis-mini .tr-unterschrift-mini{object-fit:contain}
.tr-hinweis-text{padding:10px 16px 0;margin:0;font-size:.875rem}
/* Fahrer: „Jetzt“ – ein Stopp groß */
.tr-fortschritt{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}
.tr-fortschritt .progress{margin:0}
.tr-jetzt{border:2px solid var(--akzent-600);box-shadow:var(--shadow-md)}
.tr-jetzt .card-body{display:flex;flex-direction:column;gap:12px}
.tr-jetzt-label{font-size:.875rem;font-weight:600;color:var(--akzent-text,var(--akzent-600));text-transform:none}
.tr-jetzt-titel{display:flex;flex-direction:column;gap:4px}
.tr-jetzt-titel b{font-size:1.45rem;line-height:1.25;overflow-wrap:anywhere}
.tr-jetzt-titel span{font-size:1.05rem;color:var(--text);overflow-wrap:anywhere}
.tr-jetzt-info{margin:0!important}
.tr-jetzt-notiz{background:var(--st-warn-bg);color:var(--st-warn);border-radius:var(--radius-sm);padding:4px 8px}
.tr-jetzt-wege{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tr-jetzt-wege .btn{flex:1 1 150px;justify-content:center}
.tr-jetzt-schritt{display:flex;flex-direction:column;gap:10px}
.tr-jetzt-schritt form{margin:0}
.tr-voll{width:100%;justify-content:center;min-height:56px!important;font-size:1.15rem}
.tr-danach{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.95rem}
.tr-jetzt-fertig{border-color:var(--green)}
.tr-jetzt-fertig .card-body{align-items:flex-start}
.tr-problem-gruende{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tr-problem-gruende .btn{min-height:44px}
.tr-alle-stopps .tr-fahrt-stopps{padding:0}
.tr-alle-stopps .tr-fahrt-stopp{border-bottom:1px solid var(--line)}
/* Einstellungen: Suche, Wofür, Treffer, Vorschau, Beispiel */
.einst-suche{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.einst-suche .ico{color:var(--muted);flex:none}
.einst-suche input[type=search]{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);min-height:40px;padding:0 12px}
/* Angekommen: dunkleres Türkis, damit die weiße Nummer 4,5:1 erreicht (vorher #0891b2 = 3,7:1); Nummer mindestens 14 px. */
.tr-angekommen .tr-nr,.tr-m-angekommen span{background:#0e7490}
.tr-nr{font-size:.9rem}
.einst-treffer-liste{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin:0 0 16px;overflow:hidden}
.einst-treffer-liste>p{margin:0;padding:12px 16px}
.einst-treffer-zeile{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 16px;border-bottom:1px solid var(--line);color:var(--text)}
.einst-treffer-zeile:last-child{border-bottom:0}
.einst-treffer-zeile:hover,.einst-treffer-zeile:focus{background:var(--akzent-50)}
.einst-treffer-zeile small{color:var(--muted);font-size:.875rem;text-align:end}
.einst-treffer-zeile span{grid-column:1/-1;color:var(--muted);font-size:.875rem}
.einst-wofuer{display:block;flex-basis:100%;color:var(--muted);font-size:.875rem;font-weight:400;margin:2px 0 4px;line-height:1.4}
.content-narrow .field.check:has(.einst-wofuer){flex-wrap:wrap}
.content-narrow .field.check>.einst-wofuer{padding-inline-start:28px}
.einst-treffer{outline:2px solid var(--akzent);outline-offset:4px;border-radius:var(--radius-sm);background:var(--akzent-50)}
.einst-treffer-blink{animation:einstBlink 1.6s var(--ease) 1}
@keyframes einstBlink{0%{background:var(--akzent-100)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.einst-treffer-blink{animation:none}}
.einst-erklaerung{margin:0 0 12px}
.einst-satz{margin:0 0 10px;font-size:.9rem}
.einst-beispiel{display:flex;gap:8px;align-items:flex-start;background:var(--st-akzent-bg);color:var(--st-akzent);border-radius:var(--radius-sm);padding:10px 12px;font-size:.9rem;margin:6px 0 12px}
.einst-beispiel .ico{flex:none;margin-top:3px}
.einst-vorschau{--vorschau-farbe:#0f2f5f;margin:16px 0 0;max-width:420px;background:#fff;color:#1b2230;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:16px;box-shadow:var(--shadow-sm);font-family:system-ui,sans-serif}
.einst-vorschau.schrift-serif{font-family:Georgia,"Times New Roman",serif}
.einst-vorschau .ev-kopf{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--vorschau-farbe);padding-bottom:10px}
.einst-vorschau.logo-rechts .ev-kopf{flex-direction:row-reverse;text-align:end}
.einst-vorschau .ev-logo{display:grid;place-items:center;width:64px;height:40px;border:1px dashed #9aa4b2;border-radius:4px;font-size:.875rem;color:#4b5563;flex:none}
.einst-vorschau .ev-logo img{max-width:100%;max-height:100%}
.einst-vorschau.gr-klein .ev-logo{width:44px;height:28px}
.einst-vorschau.gr-gross .ev-logo{width:96px;height:56px}
.einst-vorschau .ev-firma{display:flex;flex-direction:column;min-width:0}
.einst-vorschau .ev-firma small{color:#4b5563;font-size:.875rem}
.einst-vorschau .ev-titel{color:var(--vorschau-farbe);font-weight:700;margin:12px 0 8px}
.einst-vorschau .ev-zeile{height:8px;background:#e5e7eb;border-radius:4px;margin:6px 0}
.einst-vorschau .ev-zeile.kurz{width:60%}
.einst-vorschau .ev-summe{text-align:end;margin-top:10px;font-size:.9rem;border-top:1px solid #e5e7eb;padding-top:6px}
.einst-zuletzt .tasks li{flex-wrap:wrap}
.einst-zuletzt .tasks li small{display:block}
/* Betriebsart */
.ba-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0 0 12px}
.ba-karte{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px;border:2px solid var(--line);border-radius:var(--radius);cursor:pointer;background:var(--panel)}
.ba-karte input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ba-karte:has(input:checked){border-color:var(--akzent);background:var(--akzent-50)}
.ba-karte:has(input:focus-visible){box-shadow:var(--ring)}
.ba-karte small{color:var(--muted);font-size:.875rem;line-height:1.4}
.ba-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--akzent-50);color:var(--akzent-600)}
/* Benachrichtigungen */
.benach-filter{display:flex;gap:6px}
.benach-matrix th[scope=row]{font-weight:400;text-align:start}
.benach-matrix th[scope=row] .sub{display:block;color:var(--muted);font-size:.875rem}
.benach-matrix .mitte{text-align:center;width:90px}
.benach-matrix input[type=checkbox]{width:22px;height:22px}
.benach-hinweis{padding:10px 16px;margin:0;font-size:.875rem}
.benach-sammel{border:0;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.benach-sammel legend{font-weight:600;margin-bottom:6px;padding:0}
.benach-wahl{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer}
.benach-wahl:has(input:checked){border-color:var(--akzent);background:var(--akzent-50)}
.benach-wahl span{display:flex;flex-direction:column}
.benach-wahl small{color:var(--muted);font-size:.875rem}
.notif-liste .notif-gruppe{background:var(--gray-50);color:var(--muted);font-size:.875rem;font-weight:600;padding:6px 16px}
/* Konto: Support-Kontext, Sicherheit, Unternehmen, Paket */
.support-kontext .sub{display:block;color:var(--muted);font-size:.875rem;font-weight:400;overflow-wrap:anywhere}
.sicher-ueberblick{margin-bottom:var(--sp-4)}
.un-suche{max-width:240px;min-height:36px}
.tarif-nutzen-liste{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.tarif-nutzen-liste li{display:flex;gap:10px;align-items:flex-start}
.tarif-nutzen-liste .ico{color:var(--akzent-600);flex:none;margin-top:2px}
.tarif-dazu{border-top:1px solid var(--line);padding-top:12px}
@media (max-width:640px){
  .tr-zuweisen select,.tr-zuweisen-form select{max-width:100%;min-width:0;width:100%}
  .tr-zuweisen-form{width:100%}
  .tr-jetzt-titel b{font-size:1.3rem}
  .benach-matrix .mitte{width:auto;text-align:start}
  .un-suche{max-width:100%}
  .einst-treffer-zeile{grid-template-columns:1fr}
  .einst-treffer-zeile small{text-align:start}
  /* Matrix als Karten: Art oben, darunter die Kästchen mit Beschriftung – sonst liegen E-Mail und Push rechts außerhalb. */
  .benach-matrix thead{display:none}
  .benach-matrix tr{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .benach-matrix th[scope=row]{flex-basis:100%;padding:0;border:0;white-space:normal}
  .benach-matrix td,.benach-matrix .mitte{display:flex;align-items:center;gap:8px;padding:0;border:0;width:auto}
  .benach-matrix td::before{content:attr(data-l);color:var(--muted);font-size:.875rem}
}
/* === Ende Runde 8 E === */

/* === Runde 9: Server-Gegenstücke (Aufgaben, Dateien, Unterschrift, Korrektur-Anträge, Krankmeldung, Visitenkarte) === */
.r9-klein{font-size:.875rem;margin:6px 0 0}
.r9-schnell{margin-bottom:var(--gap,16px)}
.r9-satz-zeile{display:flex;gap:8px;align-items:center}
.r9-satz-zeile>.ico{color:var(--muted);flex:0 0 auto}
.r9-satz-zeile input{flex:1 1 auto;min-width:0;font-size:1rem;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);color:var(--text)}
.r9-filter{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0 0 12px}
.r9-filter .pills{flex-wrap:wrap}
.r9-filter .r9-suche{margin:0;margin-inline-start:auto;min-width:220px;flex:0 1 320px}
.r9-aufgaben td.r9-haken,.r9-aufgaben th.r9-haken-k{width:48px}
.r9-haken-knopf{border-radius:50%;width:34px;height:34px;padding:0;justify-content:center;color:var(--muted)}
.r9-haken-knopf:hover,.r9-haken-knopf:focus-visible{color:var(--green,#137a50);border-color:var(--green,#137a50)}
.r9-erledigt .r9-titel{text-decoration:line-through;color:var(--muted);font-weight:500}
.r9-ueberfaellig .r9-titel{color:var(--text)}
.r9-dateiliste,.r9-unterschriften{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.r9-dateiliste li,.r9-unterschriften li{display:flex;gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.r9-vorschau{flex:0 0 64px;width:64px;height:64px;border-radius:6px;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}
.r9-vorschau img{width:64px;height:64px;object-fit:cover;display:block}
.r9-pdf .ico{width:28px;height:28px;color:var(--muted)}
.r9-datei-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere}
.r9-unterschriften img{width:150px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;flex:0 0 auto}
.r9-unterschriften li>span{display:flex;flex-direction:column;min-width:0}
.r9-hoch{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.r9-hoch .drop{flex:1 1 240px;min-width:0}
.r9-unterschreiben>summary,.r9-antrag>summary{cursor:pointer;font-weight:600;display:inline-flex;gap:6px;align-items:center;padding:6px 0}
.r9-unterschrift-form .tr-unterschrift canvas{max-width:100%;height:auto;background:#fff;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);touch-action:none}
.r9-entscheiden{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.r9-entscheiden input[type=text]{min-width:140px;flex:1 1 140px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);color:var(--text);font:inherit;font-size:.875rem}
.r9-visitenkarte{display:flex;flex-direction:column;gap:6px;margin:8px 0}
@media (max-width:640px){
  .r9-filter .r9-suche{margin-inline-start:0;flex:1 1 100%;min-width:0}
  .r9-satz-zeile .lbl{display:none}
  .r9-entscheiden{justify-content:flex-start}
  .r9-unterschriften li{flex-wrap:wrap}
}
/* === Ende Runde 9 === */

/* === Runde 9 Ü: Übersicht als Betriebszentrale === */
/* Kopf: Lage-Satz, Chips, Aktionen rechts */
.ue9 .ue-lage{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"satz akt" "chips akt";gap:10px 16px;align-items:start;margin:0 0 var(--s3)}
.ue-lage-satz{grid-area:satz;margin:0;font-size:1.08rem;line-height:1.45;font-weight:500;color:var(--text);max-width:72ch}
.ue-chips{grid-area:chips;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ue-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--panel);color:var(--text);font-size:.9rem;text-decoration:none!important;white-space:nowrap}
.ue-chip b{font-weight:700;font-variant-numeric:tabular-nums}
.ue-chip .ico{width:16px;height:16px}
.ue-chip-b{color:var(--muted);font-variant-numeric:tabular-nums}
.ue-chip-rot{border-color:color-mix(in srgb,var(--st-err) 40%,transparent);background:var(--st-err-bg);color:var(--st-err)}
.ue-chip-rot .ue-chip-b{color:var(--st-err)}
.ue-chip-gelb{border-color:color-mix(in srgb,var(--st-warn) 40%,transparent);background:var(--st-warn-bg);color:var(--st-warn)}
.ue-chip-gelb .ue-chip-b{color:var(--st-warn)}
.ue-chip-gut{border-color:color-mix(in srgb,var(--st-ok) 40%,transparent);background:var(--st-ok-bg);color:var(--st-ok)}
@media (hover:hover){a.ue-chip:hover{border-color:currentColor;filter:saturate(1.15)}}
a.ue-chip:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.ue-lage-akt{grid-area:akt;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:8px}
.ue-lage-akt>form{margin:0}
.ue-ki-knopf .ico,.ue-anpassen-knopf .ico{width:16px;height:16px}
.ue-ki-knopf,.ue-anpassen-knopf{display:inline-flex;align-items:center;gap:6px;min-height:36px}
/* Anpassen */
.ue-anpassen{position:relative}
.ue-anpassen>summary{list-style:none;cursor:pointer}
.ue-anpassen>summary::-webkit-details-marker{display:none}
.ue-anpassen[open]>summary{background:var(--akzent-50);border-color:var(--akzent);color:var(--akzent-text)}
.ue-anpassen-panel{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:30;width:min(380px,calc(100vw - 32px));padding:16px;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--shadow-lg)}
.ue-anp-satz{margin:0 0 12px;font-size:.88rem;color:var(--muted);line-height:1.4}
.ue-anp-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ue-anp{display:flex;align-items:center;gap:4px;min-height:44px;padding:2px 4px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel)}
.ue-anp-griff{display:none;place-items:center;width:32px;height:40px;color:var(--muted-2);cursor:grab;touch-action:none;flex:none}
.ue9-js .ue-anp-griff{display:grid}
.ue-anp.ist-ziehen{box-shadow:var(--shadow-md);border-color:var(--akzent);opacity:.95;position:relative;z-index:2}
.ue-anp-an{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;font-size:.95rem}
.ue-anp-an input{width:20px;height:20px;flex:none;accent-color:var(--akzent)}
.ue-anp-an input:not(:checked)+span{color:var(--muted);text-decoration:line-through}
.ue-anp-pfeil{min-width:40px;min-height:40px}
.ue-anp-pfeil[disabled]{opacity:.35}
.ue-anp-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ue-anp-fuss small{color:var(--muted);margin-inline-start:auto}
.ue9-js [data-ue-anp-speichern]{display:none}
/* Raster: eine Haupt- und eine Nebenspalte; am Telefon eine Spalte in der Reihenfolge des Kontos */
.ue9 .ue-raster-eins{grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px){
  .ue9 .ue-raster{display:flex;flex-direction:column;align-items:stretch}
  .ue9 .ue-haupt,.ue9 .ue-seite{display:contents}
}
/* Karten, die sich einklappen (Tipps, Erste Schritte) */
.ue-klapp>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}
.ue-klapp>summary::-webkit-details-marker{display:none}
.ue-klapp>summary small{margin-inline-start:auto;color:var(--muted)}
.ue-klapp-pfeil{color:var(--muted-2);transition:transform var(--t-fast,.15s)}
.ue-klapp[open] .ue-klapp-pfeil{transform:rotate(180deg)}
.ue-klapp:not([open])>summary{padding-bottom:16px}
.ue9 .ue-tipps:not([open]){background:transparent;box-shadow:none;border-style:dashed}
/* Braucht dich: Betrag, Abhaken */
.ue-a-betrag{display:inline-block;margin-inline-start:8px;padding:0 8px;border-radius:var(--radius-pill);background:var(--gray-50);color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.ue-a-form .btn .ico{width:14px;height:14px;margin-inline-end:4px}
.ue-a.ist-weg{opacity:0;transform:translateX(12px);transition:opacity .25s,transform .25s}
.card-head small .rot,.ue-fort .rot{color:var(--red)}
.ue-erledigt .btn{margin-inline-start:auto}
/* Heute als Zeitleiste */
.ue-zl{list-style:none;margin:0;padding:0;position:relative}
.ue-zl::before{content:"";position:absolute;inset-block:8px;inset-inline-start:61px;width:2px;background:var(--line)}
.ue-zl-z{--f:var(--line-strong);position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:4px 28px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.ue-zl-z:last-child{border-bottom:0}
.ue-zl-z::before{content:"";position:absolute;inset-inline-start:55px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--panel);border:2px solid var(--f)}
.ue-zl-z.kal-g-geld{--f:var(--navy-700)}.ue-zl-z.kal-g-team{--f:var(--green)}.ue-zl-z.kal-g-termine{--f:var(--akzent-600)}.ue-zl-z.kal-g-unterwegs{--f:var(--amber)}.ue-zl-z.kal-g-feiertag{--f:var(--gray-600)}.ue-zl-z.kal-rot{--f:var(--red)}
.ue-zl-zeit{font-weight:650;font-size:.95rem;line-height:1.35;font-variant-numeric:tabular-nums;text-align:end;color:var(--text)}
.ue-zl-zeit small{display:block;font-weight:400;font-size:.82rem;color:var(--muted)}
.ue-zl-ico{width:18px;height:18px;color:var(--f);margin-top:2px}
.ue-zl-k{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.4}
.ue9 .ue-zl-titel{font-weight:550;color:var(--text);text-decoration:none!important;overflow-wrap:anywhere}
.ue9 a.ue-zl-titel:hover{text-decoration:underline!important}
.ue-zl-z.kal-rot .ue-zl-titel{color:var(--red)}
.ue-zl-text{color:var(--muted);font-size:.86rem;overflow-wrap:anywhere}
.ue-zl-akt{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.ue-zl-btn{display:inline-flex;align-items:center;gap:6px}
.ue-zl-btn .ico{width:15px;height:15px}
.ue-zl-z.ist-vorbei .ue-zl-zeit,.ue-zl-z.ist-vorbei .ue-zl-titel{color:var(--muted)}
.ue-zl-z.ist-vorbei::before{background:var(--f)}
.ue-zl-jetzt{position:relative;display:flex;align-items:center;gap:8px;margin:2px 0;padding-inline-start:52px;color:var(--red);font-size:.8rem;font-weight:700;letter-spacing:.02em}
.ue-zl-jetzt::after{content:"";flex:1;height:2px;background:var(--red);border-radius:2px}
.ue-zl-jetzt span{background:var(--panel);padding:0 6px;border-radius:var(--radius-pill);border:1px solid color-mix(in srgb,var(--red) 50%,transparent)}
.ue-zl-mehr{margin:8px 0 0;font-size:.9rem}
.ue-fort{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:.84rem;color:var(--muted)}
.ue-fort-bar{flex:0 1 140px;height:8px;border-radius:4px;background:var(--gray-50);border:1px solid var(--line);overflow:hidden}
.ue-fort-bar i{display:block;height:100%;background:var(--amber);border-radius:4px}
.ue-morgen{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
.ue-morgen>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--text)}
.ue-morgen>summary::-webkit-details-marker{display:none}
.ue-morgen>summary small{margin-inline-start:auto;font-weight:400;color:var(--muted)}
.ue-morgen>summary .ico{transition:transform var(--t-fast,.15s);color:var(--muted-2)}
.ue-morgen[open]>summary .ico{transform:rotate(90deg)}
/* Geld auf einen Blick */
.ue-g-umsatz{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ue-g-l{font-size:.9rem;color:var(--muted);text-decoration:none}
a.ue-g-l:hover{text-decoration:underline;color:var(--text)}
.ue-g-w{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--text)}
.ue-g-w2{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.ue-g-w2.rot{color:var(--red)}
.ue-g-vgl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.86rem;color:var(--muted)}
.ue-g-vgl .gut{color:var(--gut-text,var(--green))}
.ue-g-vgl .rot{color:var(--red)}
.ue-ziel{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.ue-ziel-bar{display:block;height:10px;border-radius:5px;background:var(--gray-50);border:1px solid var(--line);overflow:hidden}
.ue-ziel-bar i{display:block;height:100%;background:var(--akzent);border-radius:5px}
.ue-ziel small{font-size:.85rem;color:var(--muted)}
.ue-ziel-form{margin-top:6px;font-size:.9rem}
.ue-ziel-form>summary{cursor:pointer;color:var(--akzent-text);font-weight:500;min-height:32px;display:inline-flex;align-items:center}
.ue-ziel-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.ue-ziel-zeile label{flex-basis:100%;font-size:.86rem;color:var(--muted)}
.ue-ziel-zeile input{flex:1 1 140px;min-width:0}
.ue-g-block{padding:14px 0;border-bottom:1px solid var(--line)}
.ue-g-block:last-child{border-bottom:0;padding-bottom:0}
.ue-g-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.ue-g-u{margin:6px 0 0;font-size:.86rem;color:var(--muted)}
.ue-alter{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;background:var(--gray-50)}
.ue-alter i{display:block;min-width:4px}
.ue-alt-0{background:var(--green)}.ue-alt-1{background:var(--amber)}.ue-alt-2{background:#ea580c}.ue-alt-3{background:var(--red)}
.ue-alter-leg{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:.84rem}
.ue-alter-leg li{display:flex;align-items:center;gap:6px;min-width:0}
.ue-alter-leg li span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ue-alter-leg li b{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ue-alter-leg i{width:10px;height:10px;border-radius:3px;flex:none}
.ue-liq{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;gap:6px 10px;align-items:center;font-size:.86rem}
.ue-liq>span:first-child,.ue-liq>span:nth-child(4){color:var(--muted)}
.ue-liq b{font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
.ue-liq-bar{display:block;height:8px;border-radius:4px;background:var(--gray-50);overflow:hidden}
.ue-liq-bar i{display:block;height:100%;border-radius:4px}
.ue-liq-ein{background:var(--green)}.ue-liq-aus{background:var(--red)}
.ue-verlauf-svg{display:block;width:100%;max-width:440px;height:auto;margin-top:4px}
.ue-v-ein{fill:var(--navy-700);background:var(--navy-700)}
.ue-v-ein.ist-jetzt{fill:var(--akzent-600)}
.ue-v-aus{fill:#8ec1ff;background:#8ec1ff}
.ue-v-achse{stroke:var(--line-strong);stroke-width:1}
.ue-v-t{fill:var(--muted);font-size:10px;font-family:var(--font)}
.ue-v-leg{display:flex;gap:12px;font-size:.8rem;color:var(--muted)}
.ue-v-leg span{display:inline-flex;align-items:center;gap:5px}
.ue-v-leg i{display:inline-block;width:10px;height:10px;border-radius:3px}
.ue-jahr-mehr{margin-top:8px}
.ue-jahr-mehr>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--akzent-text);font-weight:500;font-size:.9rem}
.ue-jahr-mehr>summary::-webkit-details-marker{display:none}
.ue-jahr-mehr[open]>summary .ico{transform:rotate(90deg)}
.ue-jahr-mehr .ue-jahr{margin-top:6px}
:root[data-theme=dark] .ue-v-ein{fill:#7ea6e0;background:#7ea6e0}
:root[data-theme=dark] .ue-v-ein.ist-jetzt{fill:#8ec1ff}
:root[data-theme=dark] .ue-v-aus{fill:#2a74e6;background:#2a74e6}
:root[data-theme=dark] .ue-alt-2{background:#fb923c}
:root[data-theme=dark] .ue-a-betrag{background:rgba(255,255,255,.06)}
:root[data-theme=dark] .ue-zl-jetzt,:root[data-theme=dark] .ue-g-w2.rot,:root[data-theme=dark] .card-head small .rot{color:#f87171}
:root[data-theme=dark] .ue-zl-jetzt::after{background:#f87171}
/* Schmal */
@media (max-width:700px){
  .ue9 .ue-lage{grid-template-columns:minmax(0,1fr);grid-template-areas:"satz" "chips" "akt"}
  .ue-lage-satz{font-size:1rem}
  .ue-lage-akt{justify-content:flex-start}
  .ue-anpassen{position:static}
  .ue-anpassen-panel{inset-inline:16px;width:auto;top:auto;margin-top:8px;position:absolute}
  .ue-chip{min-height:40px;font-size:14px}
  .ue-zl::before{inset-inline-start:51px}
  .ue-zl-z{grid-template-columns:40px minmax(0,1fr);gap:4px 26px}
  .ue-zl-z::before{inset-inline-start:45px}
  .ue-zl-akt{grid-column:2;justify-content:flex-start}
  .ue-zl-jetzt{padding-inline-start:40px;font-size:14px}
  .ue-zl-zeit{font-size:14px}
  .ue-zl-text,.ue-fort,.ue-g-vgl,.ue-alter-leg,.ue-liq,.ue-g-u,.ue-v-leg,.ue-ziel small,.ue-anp-satz{font-size:14px}
  .ue-g-w{font-size:1.6rem}
  .ue-alter-leg{grid-template-columns:minmax(0,1fr)}
  .ue-a-betrag{font-size:14px}
}
/* Diese Woche */
.ue-w-liste{list-style:none;margin:0;padding:0}
.ue-w-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(64px,auto);gap:4px 12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.ue-w-liste li:last-child{border-bottom:0}
.ue-w-l{color:var(--muted)}
.ue-w-liste b{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:end}
.ue-w-p{font-size:.84rem;text-align:end;white-space:nowrap;color:var(--muted)}
.ue-w-p.gut{color:var(--gut-text,var(--green))}.ue-w-p.rot{color:var(--red)}
/* Meine Aufgaben */
.ue-auf-satz{display:flex;gap:8px;margin:0 0 10px}
.ue-auf-satz input{flex:1;min-width:0}
.ue-auf-satz .btn{display:inline-flex;align-items:center;gap:4px}
.ue-auf-satz .btn .ico{width:15px;height:15px}
.ue-auf-liste .ue-a{flex-wrap:nowrap}
.ue-auf-haken{margin:0}
.ue-haken{width:40px;height:40px;border:2px solid var(--line-strong);border-radius:50%;color:transparent;display:grid;place-items:center;padding:0}
.ue-haken .ico{width:18px;height:18px}
@media (hover:hover){.ue-haken:hover{border-color:var(--green);color:var(--green)}}
.ue-haken:focus-visible{color:var(--green);outline:3px solid var(--akzent);outline-offset:2px}
.ue-auf-meta{display:block;font-size:.84rem;color:var(--muted)}
.ue-auf-meta.rot{color:var(--red)}
.ue9 .ue-auf-liste .ue-a-link{min-height:48px;color:var(--text)}
:root[data-theme=dark] .ue-auf-meta.rot,:root[data-theme=dark] .ue-w-p.rot{color:#f87171}
@media (max-width:700px){.ue-w-liste li,.ue-auf-meta,.ue-w-p{font-size:14px}}
@media (prefers-reduced-motion:reduce){.ue-a.ist-weg,.ue-klapp-pfeil,.ue-morgen>summary .ico{transition:none}}
/* === Ende Runde 9 Ü === */

/* === Runde 9 R: Plan automatisch erstellen (Rotation, Wünsche, Fairness) === */
.dp-auto summary{list-style:none}
.dp-auto summary::-webkit-details-marker{display:none}
.dp-plan-menu{width:380px;max-width:calc(100vw - 24px);padding:12px 14px 6px;font-size:.92rem}
.dp-plan-menu .field{margin-bottom:12px}
.dp-plan-menu .field>small{display:block;margin-top:4px}
.dp-plan-feld{border:0;margin:0 0 12px;padding:0;min-width:0}
.dp-plan-feld legend{font-weight:600;font-size:.88rem;margin-bottom:6px;padding:0}
.dp-plan-wahl{display:flex;flex-wrap:wrap;gap:6px}
.dp-plan-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer}
.dp-plan-chip span{display:flex;flex-direction:column;line-height:1.2}
.dp-plan-chip small{color:var(--muted);font-size:.8rem}
.dp-plan-chip:has(input:checked){border-color:var(--akzent-600);background:var(--akzent-50)}
.dp-plan-ki{margin:0 0 12px}
.dp-plan-ki summary{cursor:pointer;font-weight:600;min-height:32px}
.dp-plan-los{width:100%;justify-content:center;min-height:44px}
.dd-menu.dp-plan-menu .btn.btn-primary{justify-content:center;background:var(--navy);color:#fff;font-weight:600;box-shadow:var(--shadow-xs)}
.dd-menu.dp-plan-menu .btn.btn-primary:hover{background:var(--navy-700,var(--navy))}
.dp-uebernehmen .field.check{width:auto}
.dp-chip.dp-vorschlag .dp-grund{display:block;font-weight:400;font-size:.8rem;white-space:normal;color:var(--muted)}
.dp-raster .dp-chip.dp-vorschlag .dp-grund{display:none}
.dp-grund-tipp{font-size:.85rem}
.dp-uebernehmen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
.dp-uebernehmen .field{margin:0}
.dp-pv-wochen{display:flex;flex-wrap:wrap;gap:4px;margin:12px 0 0}
.dp-pv-wochen .dp-seg-i{border:1px solid var(--line);border-radius:8px;min-height:36px;display:inline-flex;align-items:center;padding:0 10px}
.dp-pv-klapp{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.dp-pv-klapp>summary{cursor:pointer;font-weight:600;min-height:32px}
.dp-fair-tabelle{font-size:.88rem}
.dp-fair-tabelle th[scope=row]{font-weight:600;white-space:nowrap}
.dp-fair-tabelle td small{color:var(--muted)}
.dp-fair-tabelle .dp-vchip-farbe{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--f);margin-inline-end:5px;vertical-align:middle}
.dp-fair-tabelle .dp-fair-hoch b{color:var(--red)}
.dp-fair-wunsch{display:block;font-weight:400;white-space:normal;max-width:260px}
.dp-pv-luecken{list-style:none;margin:6px 0 10px;padding:0}
.dp-pv-luecken li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 0;border-bottom:1px solid var(--line)}
.dp-pv-luecken .dp-chip{margin:0}
.dp-pv-luecken .dp-zeile-text{flex:1 1 260px;display:flex;flex-direction:column;min-width:0}
.dp-wunsch{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.dp-wunsch-liste li.dp-w-nur,.dp-wunsch-liste li.dp-w-gern{background:color-mix(in srgb,var(--green) 8%,transparent)}
.dp-wunsch-liste li.dp-w-nicht,.dp-wunsch-liste li.dp-w-nein{background:color-mix(in srgb,var(--red) 7%,transparent)}
.dp-wunsch-liste li.dp-w-lieber_frei{background:color-mix(in srgb,var(--amber) 8%,transparent)}
.dp-wunsch-wann{border:0;margin:0 0 8px;padding:0;min-width:0}
.dp-wunsch-wann legend{font-weight:600;font-size:.88rem;margin-bottom:4px;padding:0}
.dp-wunsch-mit{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.dp-wunsch-mit select,.dp-wunsch-mit input[type=date]{width:auto;min-height:40px}
.dp-regeln-rotation .field.check label .sub{display:block;font-weight:400;color:var(--muted);font-size:.86rem}
@media (max-width:700px){
  .dp-plan-menu{position:fixed;left:12px;right:12px;top:auto;width:auto;max-height:calc(100vh - 120px);overflow:auto}
  .dp-plan-chip{flex:1 1 calc(50% - 6px)}
  .dp-uebernehmen{width:100%}
  .dp-uebernehmen .btn{width:100%;justify-content:center;min-height:44px}
  .dp-fair-tabelle,.dp-grund-tipp,.dp-chip.dp-vorschlag .dp-grund,.dp-plan-chip small{font-size:14px}
}
/* === Ende Runde 9 R === */

/* === Runde 9 V: Web-Durchsicht === */
/* Aufgaben-Karte an Kunde und Beleg: der Text über die ganze Breite, darunter Datum und Knopf (vorher drei Felder in einer zu schmalen Zeile –
   „03.11.“ und „Woran so…“ abgeschnitten). */
.v9-wv-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.v9-wv-form > input[name=titel]{grid-column:1/-1}
.v9-wv-form > input[type=date]{min-width:0}
/* Einstellungen › Überblick im Dunkelmodus: neutrale Stände („Zwei-Faktor aus“, „noch kein Logo“) standen grün wie erledigte da. */
:root[data-theme=dark] .einst-stand.neutral{color:var(--muted)}
@media (max-width:700px){
  /* Belegliste am Telefon: der Knopf des nächsten Schritts spricht für sich – ohne die Beschriftung „Nächster Schritt:“ davor und ohne
     eigene Zeile, wenn es keinen gibt (vorher „Nächster Schritt: –“ in jeder stornierten oder bezahlten Karte). */
  .table:has(td.z-titel) td.z-schritt{grid-column:1/-1;grid-row:5;margin-top:4px}
  .table:has(td.z-titel) td.z-schritt[data-l]::before{content:none}
  .table:has(td.z-titel) td.z-schritt:has(> .muted:only-child){display:none}
  /* Monatsblatt am Telefon: ein Tag ohne Zeit ist eine kompakte Karte – Tag und Hinweis oben, Saldo und „Nachtragen“ darunter (vorher fünf
     Zeilen mit „Netto –“ und „Soll 8:00“ je Tag; 18 fehlende Tage ergaben über drei Bildschirmlängen). */
  .table.table-karten.tr8-blatt tbody tr.dp-ohne{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px}
  .tr8-blatt tr.dp-ohne.tr8-zeit-fehlt{background:var(--amber-50)}
  .tr8-blatt tr.dp-ohne > td:nth-child(5),.tr8-blatt tr.dp-ohne > td:nth-child(6),.tr8-blatt tr.dp-ohne > td.z-weg{display:none}
  .tr8-blatt tr.dp-ohne > td.z-kopf{grid-column:1;grid-row:1}
  .tr8-blatt tr.dp-ohne > td:nth-child(8){grid-column:2;grid-row:1;justify-content:flex-end}
  .tr8-blatt tr.dp-ohne > td:nth-child(8)::before{content:none}
  .tr8-blatt tr.dp-ohne > td:nth-child(7){grid-column:1;grid-row:2;justify-content:flex-start}
  .tr8-blatt tr.dp-ohne > td.actions{grid-column:2;grid-row:2;justify-content:flex-end}
  .tr8-blatt tr.dp-ohne > td:empty{display:none}
  .tr8-blatt tr.dp-ohne > td,:root[data-theme=dark] .tr8-blatt tr.dp-ohne.tr8-zeit-fehlt > td{background:none}
  :root[data-theme=dark] .tr8-blatt tr.dp-ohne.tr8-zeit-fehlt{background:rgba(217,119,6,.12)}
}
/* Was ist neu am Telefon: der Text nimmt die ganze Breite, „Ansehen“ steht darunter (vorher fünf Wörter je Zeile zwischen Zeichen und Knopf). */
@media (max-width:700px){.neu-eintrag .neu-text{flex:1 1 calc(100% - 46px)}}
/* Kundenakte: Knöpfe unten in der Karte, die Zahl steht im Kopf rechts (Dokumente, Verträge – wie Ansprechpartner und Dateien). */
.card-body.tight .v9-karte-fuss{margin:4px 0 0;padding:0 20px 16px}
.v9-karte-fuss{margin:10px 0 0}
/* Belegliste: Entwürfe tragen am Rechner „Entwurf“, am Telefon Kunde oder Datum als Titel (die Statusmarke sagt schon „Entwurf“). */
.v9-nr-schmal{display:none}
@media (max-width:700px){
  .table:has(td.z-titel) .v9-nr-breit{display:none}
  .table:has(td.z-titel) .v9-nr-schmal{display:inline}
  .table:has(td.z-titel) tbody tr:has(.v9-nr-schmal) td.z-kunde{display:none}
}
/* === Ende Runde 9 V === */

/* === Runde 9 P: Aktionscodes und Freunde einladen === */
.promo-liste{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.promo-liste li{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.promo-liste li > span:last-child{flex:1 1 220px;min-width:0}
.promo-satz{font-size:.9rem;margin:6px 0 0}
.promo-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.promo-form input{flex:1 1 200px;min-width:0;max-width:320px;text-transform:uppercase;font-family:var(--mono,ui-monospace,monospace);letter-spacing:.04em}
.promo-vorschau{border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px 14px;background:var(--bg)}
.promo-vorschau-kopf{margin:0 0 4px}
.promo-vorschau-text{margin:0;font-size:1rem;line-height:1.5}
.promo-weg{color:var(--red)}
.promo-reg{margin:4px 0 12px}
.promo-reg summary{cursor:pointer;color:var(--muted);font-size:.9rem;padding:6px 0;min-height:32px}
.promo-reg input{text-transform:uppercase}
.promo-akte{border-top:1px solid var(--line);padding:10px 0}
.promo-akte:first-of-type{border-top:0}
.promo-akte p{margin:0}
.promo-beenden{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.promo-beenden input{flex:1 1 200px;min-width:0}
.promo-pakete{border:0;padding:0;margin:4px 0 10px;display:flex;flex-wrap:wrap;gap:6px 16px}
.promo-pakete legend{font-weight:600;font-size:.88rem;margin-bottom:6px;width:100%}
.promo-pakete .check-inline{display:inline-flex;gap:6px;align-items:center;min-height:32px}
.promo-serie{margin:10px 0}
.promo-serie summary{cursor:pointer;font-weight:600;min-height:32px}
.promo-web{padding-top:28px;padding-bottom:0}
.promo-web .notice{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:1rem}
.promo-web .notice .btn{font-size:1rem}
.promo-form input::placeholder,.promo-reg input::placeholder{text-transform:none}
.freunde-kopf h2{display:flex;gap:8px;align-items:center;margin-top:0}
.freunde-l{display:block;font-weight:600;font-size:.88rem;margin:12px 0 6px}
.freunde-link{display:flex;gap:8px;flex-wrap:wrap}
.freunde-link input{flex:1 1 260px;min-width:0;font-family:var(--mono,ui-monospace,monospace);font-size:.88rem}
.freunde-stand{margin:12px 0 0}
.freunde-text summary{cursor:pointer;color:var(--muted);min-height:32px}
.freunde-text p{white-space:pre-wrap;background:var(--bg);border-radius:var(--radius-sm);padding:10px 12px;font-size:.9rem}
.ue-freunde-titel{margin:0 0 4px}
/* === Ende Runde 9 P === */

/* === Runde 10: Preise und Bestandsschutz === */
.reg-pakete{display:grid;gap:8px}
.reg-paket{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;border:1px solid var(--line);border-radius:var(--radius-sm,8px);padding:10px 12px;background:var(--panel)}
.reg-paket.empfohlen{border-color:var(--akzent)}
.reg-empf{display:inline-block;background:#0a58ca;color:#fff;font-size:.875rem;font-weight:700;padding:2px 8px;border-radius:99px;margin-left:4px}
:root[data-theme=dark] .reg-empf{background:#0a58ca;color:#fff}
.reg-paket .reg-preis{grid-column:2;grid-row:1;font-weight:700;white-space:nowrap}
.reg-paket .muted{grid-column:1/-1;font-size:.88rem}
.reg-pakete-satz{margin:0;font-size:.88rem}
.pb-sammel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.pb-sammel input[type=date],.pb-akte input[type=date]{min-height:36px}
.pb-akte{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pb-menue{padding:12px;min-width:280px}
.pb-zahlen{margin:6px 0 10px}
.pb-hinweis{display:flex;gap:6px;align-items:baseline}
/* === Ende Runde 10 === */

/* === Runde 10 DATEV: Export-Karte, Prüfung, Einstellungen (app/views/parts/datev_*.php) === */
.datev-wahl fieldset{border:0;margin:0 0 10px;padding:0;min-width:0}
.datev-wahl legend{font-weight:600;font-size:.875rem;color:var(--muted);margin-bottom:6px;padding:0}
.datev-zeitraum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.datev-wahl-k{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer;background:var(--panel);min-height:52px}
.datev-wahl-k.an,.datev-wahl-k:has(input:checked){border-color:var(--akzent);background:var(--akzent-50)}
.datev-wahl-k span{display:flex;flex-direction:column;line-height:1.25}
.datev-wahl-k small{color:var(--muted);font-size:.875rem}
.datev-frei{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:10px}
.datev-inhalt{display:flex;flex-wrap:wrap;gap:4px 18px}
.datev-inhalt .field{margin:0}
.datev-vorschau{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.datev-vorschau h3,.datev-verlauf-titel{font-size:1rem;margin:0 0 10px}
.datev-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.datev-zahlen>div{background:var(--gray-50);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.datev-zahlen b{font-size:1.15rem;overflow-wrap:anywhere}
.datev-zahlen span{color:var(--muted);font-size:.875rem}
.datev-ok,.datev-abw{font-weight:600;font-size:.875rem;white-space:nowrap}
.datev-ok{color:var(--st-ok)}
.datev-abw{color:var(--st-warn)}
.datev-stand{font-size:.875rem;font-weight:600;color:var(--st-ok)}
.datev-stand.offen{color:var(--st-warn)}
.datev-hinweise{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.datev-hinweise li{border-radius:var(--radius-sm);padding:8px 12px;font-size:.9rem;border:1px solid var(--line);background:var(--st-neutral-bg);color:var(--text)}
.datev-hinweise li.dv-fehler{background:var(--st-err-bg);border-color:var(--st-err);color:var(--text)}
.datev-hinweise li.dv-warnung{background:var(--st-warn-bg);border-color:var(--st-warn);color:var(--text)}
.datev-hinweise li .ico{vertical-align:-2px}
.datev-export{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0}
.datev-verlauf-titel{margin-top:6px}
.datev-einst .card{margin-bottom:16px}
.datev-einst .field.check{flex-wrap:wrap}
.datev-einst .field.check label{flex:1 1 0;min-width:0}
.datev-einst .field.check .help{flex-basis:100%;margin:2px 0 6px 28px}
@media (max-width:760px){
  .datev-zeitraum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .datev-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .datev-frei{grid-template-columns:repeat(2,minmax(0,1fr))}
  .datev-export .btn{width:100%;justify-content:center}
}
/* === Ende Runde 10 DATEV === */
/* === Runde 10 S: Sichtbarkeit nach Paket === */
.sicht-nicht{max-width:560px;margin:24px auto;text-align:center}
.sicht-nicht .card-body{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 24px}
.sicht-nicht h2{margin:0;font-size:1.25rem}
.sicht-nicht p{margin:0}
.sicht-nicht-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--akzent-50);color:var(--akzent-text)}
.sicht-nicht-ico .ico{width:24px;height:24px}
.sicht-nicht-weg{margin-top:8px!important}
.ue-verlauf.ue-jahr-mehr>summary{display:flex}
.ue-verlauf.ue-jahr-mehr .ue-v-leg{display:flex;gap:12px;margin-top:6px}
.ue-schritte li.done{background:var(--green-50);border-color:transparent}
.ue-schritte li.done b{color:var(--gut-text)}
.paket-wahl{border:0;margin:4px 0 14px;padding:0;display:grid;gap:8px}
.paket-wahl legend{font-weight:600;margin-bottom:6px;padding:0}
.paket-wahl-i{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer}
.paket-wahl-i:has(input:checked){border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)}
.paket-wahl-i input{margin-top:3px}
.paket-wahl-i span{display:flex;flex-direction:column;gap:2px}
.paket-wahl-i small{color:var(--muted);font-size:.875rem}
.paket-wahl-satz{margin:2px 0 0;font-size:.875rem}
/* === Ende Runde 10 S === */
/* === Runde 10 A: Verwaltung – Kennzahlen, Arbeitsliste, Akte (app/views/parts/admin_heute_r10.php, admin_company.php) === */
.r10a-kz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (min-width:1700px){.r10a-kz{grid-template-columns:repeat(6,minmax(0,1fr))}}
.r10a-kz-k{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 14px 34px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--text);text-decoration:none;overflow:hidden;box-shadow:var(--shadow-xs);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.r10a-kz-k:hover,.r10a-kz-k:focus-visible{border-color:var(--akzent);box-shadow:var(--shadow-sm)}
.r10a-kz-l{font-size:var(--fs-klein);color:var(--muted);display:flex;align-items:center;gap:4px}
.r10a-kz-w{font-size:1.45rem;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.r10a-kz-s{font-size:var(--fs-klein);color:var(--muted);line-height:1.3}
.r10a-kz-k.warn .r10a-kz-w{color:var(--st-warn)}
.r10a-kz-k .r10a-spark{height:26px}
.r10a-liste{list-style:none;margin:0;padding:0}
.r10a-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;border-top:1px solid var(--line)}
.r10a-zeile:first-child{border-top:0}
.r10a-zeile.dringend{box-shadow:inset 3px 0 0 var(--red)}
.r10a-zeile.info .r10a-ico{color:var(--muted)}
.r10a-ico{flex:0 0 auto;color:var(--akzent-text);display:inline-flex}
.r10a-zeile.dringend .r10a-ico{color:var(--red)}
.r10a-text{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px}
.r10a-text b{font-weight:600;overflow-wrap:anywhere}
.r10a-text small{color:var(--muted);font-size:var(--fs-klein);overflow-wrap:anywhere}
.r10a-aktion{flex:0 1 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;margin-left:auto}
.r10a-aktion form.inline{display:inline-flex}
.r10a-zeile:has(.r10a-auf[open]) .r10a-aktion{flex-basis:100%;justify-content:flex-start}
.r10a-auf>summary{list-style:none;cursor:pointer}
.r10a-auf>summary::-webkit-details-marker{display:none}
.r10a-auf[open]{flex-basis:100%;order:-1}
.r10a-panel{margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.r10a-panel .anfrage-text{margin-bottom:10px}
.r10a-vorschau{margin:10px 0;padding:10px 12px;border-left:3px solid var(--akzent);background:var(--panel);border-radius:var(--radius-sm)}
.r10a-vorschau p{margin:6px 0 4px;font-size:var(--fs-klein)}
.r10a-mail{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font);font-size:.88rem;line-height:1.45;margin:0 0 6px;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);max-height:220px;overflow:auto}
.r10a-akte-aktionen{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin:0 0 14px}
.r10a-akte-aktionen form.inline{display:inline-flex}
.r10a-akte-aktionen .r10a-auf[open]{order:99}
.r10a-gefahr{color:var(--red)}
.r10a-gefahr:hover{border-color:var(--red)}
@media (max-width:640px){
  .r10a-kz{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .r10a-kz-k{padding:8px 8px 26px}
  .r10a-kz-s{display:none}
  .r10a-kz-l{font-size:14px;line-height:1.25;align-items:flex-start}
  .r10a-kz-l .ico{display:none}
  .r10a-kz-w{font-size:1.15rem}
  .r10a-kz-k .r10a-spark{height:20px}
  .r10a-text small,.r10a-vorschau p,.r10a-panel .help,.r10a-akte-aktionen small,.r10a-akte-aktionen .help{font-size:14px}
  .r10a-zeile{padding:10px 12px}
  .r10a-aktion{flex-basis:100%;justify-content:flex-start;margin-left:0}
  .r10a-akte-aktionen>.btn,.r10a-akte-aktionen>form.inline,.r10a-akte-aktionen>details{flex:1 1 calc(50% - 8px)}
  .r10a-akte-aktionen>form.inline .btn,.r10a-akte-aktionen>details>summary{width:100%;justify-content:center}
  .r10a-akte-aktionen>.btn{justify-content:center}
}
/* === Ende Runde 10 A === */
/* === Runde 11 I: Datenübernahme und Komplettexport === */
.du-schritte{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 12px;padding:0;font-size:.9rem;color:var(--muted)}
.du-schritte li b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);margin-right:4px;font-size:.875rem}
.du-schritte li.now{color:var(--text);font-weight:600}
.du-schritte li.now b{background:var(--akzent-600);border-color:var(--akzent-600);color:#fff}
.du-schritte li.done b{background:var(--gray-50);color:var(--text)}
.du-wahl{border:0;margin:0 0 12px;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.du-wahl legend{font-weight:600;margin-bottom:6px;padding:0}
.du-option{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;min-height:44px}
.du-option input{margin-top:3px}
.du-option span{display:flex;flex-direction:column;gap:2px}
.du-option small{color:var(--muted);font-size:.875rem;line-height:1.35}
.du-option:has(input:checked){border-color:var(--akzent-600);box-shadow:0 0 0 1px var(--akzent-600) inset}
.du-zahlen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.du-tabelle td .sub{display:block;color:var(--muted);font-size:.875rem;margin-top:2px}
.du-tabelle tr.du-z-fehler td:first-child{box-shadow:3px 0 0 var(--red) inset}
.du-liste{margin:6px 0 0;padding-left:18px;font-size:.9rem;line-height:1.5}
.du-h{font-size:1rem;margin:18px 0 8px}
.du-fz ul{margin:4px 0 0;padding-left:18px;font-size:.875rem}
.du-knoepfe{margin-bottom:6px}
.du-tabelle td.num,.du-offen td.num,.du-tabelle th.num{white-space:nowrap}
.du-fortschritt .progress{margin:4px 0 6px}
.du-kuendigung-export{margin:0 0 12px;font-size:.92rem}
@media (max-width:640px){.du-wahl{grid-template-columns:1fr}.du-tabelle th:nth-child(5),.du-tabelle td:nth-child(5),.du-tabelle th:nth-child(7),.du-tabelle td:nth-child(7){display:none}}
/* === Ende Runde 11 I === */
/* === Runde 11 O: Auftrag === */
.au-liste .z-titel .sub{display:block;font-size:.875rem;color:var(--muted)}
.au-liste tr.au-ueberfaellig .z-titel .strong{color:var(--red)}
.au-mehr{padding:10px 20px;margin:0}
.au-hinweis{display:flex;gap:8px;align-items:center}
.au-kennzahlen .kpi .value{font-size:1.4rem}
.au-spalten{align-items:start}
.au-angaben{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:0 0 12px}
.au-angaben dt{color:var(--muted);font-size:.875rem}
.au-angaben dd{margin:0;min-width:0;overflow-wrap:anywhere}
.au-text{white-space:normal}
.au-bearbeiten>summary,.au-neu>summary{list-style:none;display:inline-flex;cursor:pointer}
.au-bearbeiten>summary::-webkit-details-marker,.au-neu>summary::-webkit-details-marker{display:none}
.au-bearbeiten[open]>summary,.au-neu[open]>summary{margin-bottom:12px}
.au-liste-klein{list-style:none;margin:0 0 12px;padding:0}
.au-liste-klein li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.au-liste-klein li:first-child{border-top:0}
.au-liste-klein li>.ico{width:18px;height:18px;color:var(--muted)}
.au-liste-klein li>span{min-width:0}
.au-liste-klein .sub{display:block;font-size:.875rem;color:var(--muted)}
.au-liste-klein li.au-erledigt>span{text-decoration:line-through;color:var(--muted)}
.au-inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.au-inline-form input[type=text]{flex:1 1 200px;min-width:0}
.au-inline-form select{flex:1 1 220px;min-width:0;max-width:100%}
.au-inline-form label{font-size:.875rem;color:var(--muted)}
.au-teil{border:0;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 16px}
.au-teil legend{font-size:.875rem;color:var(--muted);margin-bottom:4px}
.au-zeitleiste{margin:0}
.au-leer{padding:16px 20px;margin:0}
.au-dateien{list-style:none;margin:0;padding:0}
.au-dateien li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:10px 20px;border-top:1px solid var(--line)}
.au-dateien li:first-child{border-top:0}
.au-dateien img{width:96px;height:72px;object-fit:cover;border-radius:var(--radius-sm);display:block;background:var(--gray-50)}
.au-dateien .sub{display:block;font-size:.875rem;color:var(--muted)}
.au-dateien .strong{overflow-wrap:anywhere}
.au-datei-ico{width:96px;height:72px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--gray-50);color:var(--muted)}
.au-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:900px){.au-spalten{grid-template-columns:1fr}.au-kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.au-kennzahlen{gap:10px}.au-kennzahlen .kpi{padding:14px}.au-kennzahlen .kpi .value{font-size:1.2rem}.au-angaben{grid-template-columns:1fr;gap:2px}.au-angaben dd{margin-bottom:8px}.au-dateien li{grid-template-columns:72px minmax(0,1fr);padding:10px 16px}.au-dateien img,.au-datei-ico{width:72px;height:54px}}
/* === Ende Runde 11 O === */

/* === Runde 12 W: workes – helles Design (Marke, Anmeldeseiten) === */
/* Claim „Work Easy“ unter bzw. neben der Wortmarke – klein, gesperrt, in allen Sprachen gleich. */
.marke-claim{display:block;font-family:var(--font);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.bare-aside-brand>span{display:flex;flex-direction:column;line-height:1.1}
.bare-aside-brand .marke-claim{color:rgba(255,255,255,.82);font-size:.78rem;margin-top:6px}
.bare-aside-brand b{color:#9fcbff}
/* Anmelden, Registrieren & Co.: Hauptknopf in Klarblau wie in der Anwendung (vorher Navy). */
body.chrome-bare .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
body.chrome-bare .btn-primary:hover{background:var(--primary-700);border-color:var(--primary-700);filter:none}
/* Wortmarke: „work“ kräftig, „es“ in Klarblau (auf dunklem Grund heller). */
.brand-name{font-weight:800}
.brand-name b{font-weight:700}
:root[data-theme=dark] .brand-name b{color:#8ec1ff}
/* Claim „Work Easy“ unter der Wortmarke im Kopf der Website, im Seitenmenü und auf den Anmeldeseiten (Wunsch Sergi 02.11.2026):
   klein, gesperrt, gedämpft – wie im Logo. Gedämpftes Grau hält AA (5:1 und mehr) auf Weiß, auf der Seitenleiste und im Dunkelmodus. */
.brand-text{display:inline-flex;flex-direction:column;line-height:1.05;min-width:0}
.brand-claim{font-family:var(--font);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px;white-space:nowrap}
.chrome-app .brand-side .brand-claim{color:var(--sb-muted);font-size:.62rem;letter-spacing:.14em}
/* === Ende Runde 12 W === */

/* === Runde 12 W2: Verwaltung → App (views/parts/admin_app.php) === */
.app-dl-werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px;margin:0 0 14px}
.app-dl-werte dt{font-size:.85rem;color:var(--muted)}
.app-dl-werte dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.app-dl-sha{overflow-wrap:anywhere;word-break:break-all}
.app-dl-links{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.app-dl-regel{margin:12px 0 0}
.app-dl-sub{display:block;font-weight:400}
.app-dl-aktionen{white-space:nowrap}
.app-dl-akt{display:inline-flex;gap:6px;align-items:center}
.app-dl-klein{width:6.5em}
tr.app-dl-aktiv td{background:var(--green-50)}
/* === Ende Runde 12 W2 === */

/* === Runde 13 P: Preise und Bezahlwege === */
/* Kundenseite „Jetzt bezahlen“: Bankverbindung einmal oben, je offener Rechnung eine Zeile mit Online-Zahlarten als Knöpfe und GiroCode. */
.zb-karte .card-head small{color:var(--muted)}
.zb-bankzeile{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;padding:8px 12px;border:1px dashed var(--line-strong);border-radius:var(--radius);margin-bottom:8px}
.zb-bankzeile .zb-kopie{padding:2px 6px;min-height:0;vertical-align:middle}
.zb-zeile{display:flex;gap:12px 18px;align-items:center;justify-content:space-between;padding:10px 0}
.zb-zeile + .zb-zeile{border-top:1px solid var(--line)}
.zb-re{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.zb-betrag{font-weight:700;font-size:1.05rem;margin:0 6px}
.zb-zweck{font-size:.9rem}
.zb-online-liste{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.zb-online-liste form.inline{margin:0}
.zb-online{gap:6px}
.zb-qr{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.875rem;max-width:120px;text-align:center}
.zb-qr svg{display:block;width:96px;height:96px;background:#fff;padding:4px;border-radius:var(--radius-sm)}
.zb-klein{font-size:.875rem}
.zb-fuss{margin:8px 0 0}
@media (max-width:620px){.zb-zeile{flex-direction:column;align-items:stretch}.zb-qr{align-self:center;max-width:none}}
/* Verwaltung → Abrechnung → Bezahlwege: Anbieter und Modus als Chips, Schlüssel je Modus nebeneinander, nur der gewählte Anbieter sichtbar. */
.bw-satz{font-size:.88rem;margin:4px 0 8px}
.bw-status,.bw-kunde{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 10px}
.bw-zeile{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin:6px 0}
.bw-wahl{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bw-wahl legend{float:left;font-weight:600;margin-right:6px;padding:0}
.bw-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--panel);cursor:pointer;font-size:.92rem}
.bw-chip small{color:var(--muted);font-size:.875rem}
.bw-chip:has(input:checked){border-color:var(--primary);background:var(--primary-50)}
.bw-fest{cursor:default;border-style:dashed}
.bw-arten{margin:10px 0 2px}
.bw-anb{display:none;margin:8px 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius)}
#bezahlung:has(#bw_anb_mollie:checked) .bw-anb-mollie,#bezahlung:has(#bw_anb_stripe:checked) .bw-anb-stripe,#bezahlung:has(#bw_anb_paypal:checked) .bw-anb-paypal{display:block}
.bw-faecher{display:grid;grid-template-columns:minmax(150px,auto) 1fr 1fr;gap:6px 10px;align-items:center}
.bw-faecher input{min-width:0;width:100%}
.bw-f-label{font-size:.9rem}
.bw-webhook input{flex:1 1 320px;min-width:0}
.bw-aktionen{position:sticky;bottom:0;background:var(--panel);padding:10px 0;z-index:2;align-items:center}
@media (max-width:620px){.bw-faecher{grid-template-columns:1fr 1fr}.bw-faecher > span:first-child{display:none}.bw-f-label{grid-column:1 / -1;margin-top:4px}}
/* === Ende Runde 13 P === */
/* === Runde 13 E: Registrierung & Anmeldelink === */
.reg-satz{margin:0 0 14px}
.mensch-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mensch-wartet{opacity:.75;cursor:progress}
.reg-schritte{list-style:none;display:flex;gap:6px;flex-wrap:wrap;padding:0;margin:14px 0 8px;font-size:.875rem;color:var(--muted)}
.reg-schritte li{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--panel)}
.reg-schritte li span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--text);font-weight:700;font-size:.875rem}
.reg-schritte li.aktiv{border-color:var(--primary);color:var(--text)}
.reg-schritte li.aktiv span{background:var(--primary);color:#fff}
.reg-schritte li.erledigt span{background:#15803d;color:#fff}
.reg-klein{font-size:.875rem;margin:6px 0 0}
.reg-tipp{margin:10px 0 0}
.reg-knoepfe{margin-top:14px;flex-wrap:wrap}
.reg-unten{margin-top:14px}
.reg-opt{font-weight:400}
.reg-app{margin:-6px 0 10px;font-size:.9rem}
.reg-raster{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.reg-raster .field{margin-bottom:12px}
.reg-paketwahl{border:0;padding:0;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.reg-paketwahl legend{font-size:.9rem;font-weight:600;margin-bottom:6px;padding:0}
.chip-wahl{display:inline-flex;align-items:center;cursor:pointer}
.chip-wahl input{position:absolute;opacity:0;width:1px;height:1px}
.chip-wahl span{display:inline-block;padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-size:.9rem;background:var(--panel);color:var(--text)}
.chip-wahl input:checked + span{border-color:var(--primary);background:var(--primary-50);color:var(--primary-800);font-weight:600}
.chip-wahl input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
.reg-zeile{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
.reg-zeile .field{margin-bottom:12px}
.reg-hinweis{margin:0 0 10px;font-size:.875rem}
.reg-optionen{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:center;margin-bottom:8px}
.reg-optionen .reg-paketwahl{margin:0}
.reg-optionen .promo-reg{margin:0}
.reg-paketwahl legend{float:left;margin:0 8px 0 0;line-height:34px}
.login-wege{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.login-wege .btn{justify-content:center;padding:11px 10px}
.login-wege-satz{font-size:.875rem;margin:8px 0 0}
[data-theme="dark"] .chip-wahl input:checked + span{background:rgba(96,165,250,.16);color:#dbeafe;border-color:#60a5fa}
@media (max-width:620px){.reg-raster,.reg-zeile{grid-template-columns:1fr}.login-wege{grid-template-columns:1fr}}
/* === Ende Runde 13 E === */

/* === Runde 13 S: Schnellrechnung (views/schnellrechnung.php), Zahlungsziel „Keine Angabe“ – vereinfacht in Runde 14 V === */
.sr .chip{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:3px 11px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--panel);color:var(--text);font-size:14px;cursor:pointer;text-decoration:none;line-height:1.2;font-family:inherit}
.sr .chip small{color:var(--muted);font-size:14px}
.sr .chip:hover{border-color:var(--primary)}
.sr .chip.is-on,.sr label.chip:has(input:checked){background:var(--primary-50);border-color:var(--primary);color:var(--primary-700);font-weight:600}
.sr label.chip input{position:absolute;opacity:0;width:1px;height:1px}
.sr label.chip:has(input:focus-visible),.sr .chip:focus-visible{box-shadow:var(--ring);outline:none}
.sr label.chip:has(input:disabled){opacity:.55;cursor:not-allowed}
/* Kopf neben dem Titel: Umschalter Rechnung/Angebot und „⋯“ */
.sr-typ{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:2px;background:var(--panel)}
.sr-typ-k{padding:4px 14px;border-radius:var(--radius-pill);font-size:14px;color:var(--text);text-decoration:none;font-weight:500}
.sr-typ-k:hover{text-decoration:none;background:var(--gray-50)}
.sr-typ-k.is-on{background:var(--primary-50);color:var(--primary-700);font-weight:600}
.sr-wege .dd-menu{min-width:240px}
.sr-wege summary .ico{width:20px;height:20px}
.sr-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start}
.sr-grid>.card{margin:0}
.sr-rechts{position:sticky;top:calc(var(--topbar-h) + 8px)}
.sr .card-body{padding:12px 14px}
.sr .field{margin:0}
.sr .field label,.sr legend{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:3px;display:block}
.sr .ac{position:relative}
.sr-feld-ico{position:absolute;inset-inline-start:11px;top:12px;color:var(--muted);pointer-events:none;z-index:1}
/* Kunde: ein Feld; Anschrift/E-Mail nur bei Neuanlage oder wenn sie fehlen */
.sr-kunde-zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sr-kunde-feld{flex:0 1 360px;min-width:220px}
.sr-kunde-feld input{width:100%;padding-inline-start:34px}
.sr-kunde-info{font-size:14px;display:inline-flex;align-items:center;gap:2px;min-width:0}
.sr-kunde-info [data-sr-info]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
.sr-kunde-extra{display:flex;gap:10px;margin-top:6px}
.sr-kunde-extra>div{flex:1;min-width:0}.sr-kunde-extra>div[hidden]{display:none}
.sr-kunde-extra:not(:has(>div:not([hidden]))){display:none}
.sr-kunde-extra textarea{width:100%;min-height:40px;height:40px;resize:vertical}
.sr-kunde-extra input{width:100%}
/* Satz-Zeile mit Funken-Symbol */
.sr-satz{position:relative;display:flex;gap:6px;align-items:center;margin-top:10px}
.sr-satz input{flex:1;min-width:0;padding-inline-start:34px;background:var(--primary-50);border-color:var(--line-strong)}
.sr-satz input:focus{background:var(--panel);border-color:var(--primary)}
.sr-satz input.is-laedt{background-image:linear-gradient(90deg,transparent,var(--primary-50),transparent);background-size:200% 100%;animation:sr-laedt 1s linear infinite}
@keyframes sr-laedt{to{background-position:-200% 0}}
.sr .is-unsicher{background:#fff7d6!important;border-color:#b58900!important}.sr .is-unsicher::placeholder{color:#6b5400}
.sr-katalog{position:relative}
.sr-katalog-menu{left:0;right:auto;width:min(360px,86vw);max-height:340px;gap:6px}
.sr-katalog-liste{overflow:auto;max-height:220px;display:flex;flex-direction:column}
.sr-katalog-liste label{display:flex;gap:8px;align-items:center;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:14px}
.sr-katalog-liste label:hover{background:var(--gray-50)}
.sr-katalog-liste small{margin-inline-start:auto;color:var(--muted)}
.sr-quellen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
/* Positionstabelle wie im vollen Editor; Steuer, Rabatt und Beschreibung nur mit „Steuer und Rabatt je Position“ */
.sr-tabelle{margin-top:10px}
.sr-pos-table{width:100%;border-collapse:collapse;font-size:14px}
.sr-pos-table th{font-size:14px;font-weight:600;color:var(--muted);text-align:start;padding:4px 4px;border-bottom:1px solid var(--line)}
.sr-pos-table th.num{text-align:end}
.sr-pos-table td{padding:4px 3px;vertical-align:top;border-bottom:1px solid var(--line)}
.sr-pos-table input,.sr-pos-table select{width:100%;min-height:34px;height:34px;padding:4px 7px;font-size:14px}
.sr-pos-table .sr-beschr{margin-top:3px;height:30px;min-height:30px;font-size:14px;color:var(--muted)}
.sr2 .sr-d{display:none}
.sr2:has(#sr_details:checked) .sr-d{display:revert}
.sr2:has(#sr_details:checked) input.sr-d{display:block}
.sr-pos.is-neu td{background:var(--primary-50);transition:background 1.5s}
.sr-c-bez{min-width:180px}.sr-c-bez .ac{display:flex;gap:2px;align-items:center}.sr-c-bez .ac input{flex:1;min-width:0}
.sr-c-menge{width:64px}.sr-c-einheit{width:90px}.sr-c-preis{width:96px}.sr-c-ust{width:70px}.sr-c-rabatt{width:58px}
.sr-c-menge input,.sr-c-preis input,.sr-c-rabatt input{text-align:end}
.sr-c-summe{width:92px;text-align:end;font-variant-numeric:tabular-nums;padding-top:12px!important;white-space:nowrap}
.sr-c-weg{width:36px}
.sr-np{font-weight:400;text-transform:none}
.sr-ue-box{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px;font-size:14px}
.sr-ue-box input{width:auto!important;min-width:140px}
/* Rechts: Datum, Zahlungsziel, „Mehr Optionen“, Gesamt */
.sr-rechts .field input[type=date]{width:100%}
.sr-chips{border:0;padding:0;margin:8px 0 6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0}
.sr-chips legend{width:100%;padding:0;margin-bottom:3px}
.sr-chips .help{width:100%;font-size:14px;margin:0}
.sr-rechts .chip{padding-inline:10px}
.sr-mehr{border-top:1px solid var(--line);margin-top:6px}
.sr-mehr>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:8px 0;font-size:14px;font-weight:600;color:var(--muted)}
.sr-mehr>summary::-webkit-details-marker{display:none}
.sr-mehr>summary::after{content:"";margin-inline-start:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.sr-mehr[open]>summary::after{transform:rotate(-135deg)}
.sr-mehr>summary:focus-visible{box-shadow:var(--ring);outline:none;border-radius:6px}
.sr-mehr-inhalt{display:flex;flex-direction:column;gap:4px;padding-bottom:6px}
.sr-reihe{display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,max-content);gap:10px;align-items:end}
.sr-reihe>.sr-chips{margin:0}
.sr-leistung{font-size:14px;flex-wrap:wrap;margin:0}
.sr-leistung input[type=date]{width:auto;min-height:32px;height:32px;padding:3px 6px;margin-inline-start:auto;font-size:14px}
.sr-leistung input[type=date]:disabled{color:var(--muted);background:transparent;border-style:dashed}
.sr-details-schalter{font-size:14px}
.sr-skonto-frei{display:inline-flex;gap:4px;align-items:center;font-size:14px;color:var(--muted)}
.sr-skonto-frei input{width:52px;min-height:32px;height:32px;padding:3px 6px;text-align:end}
.sr-skonto.is-aus .chip,.sr-skonto.is-aus .sr-skonto-frei{opacity:.5;pointer-events:none}
.sr-summe{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-variant-numeric:tabular-nums}
.sr-summe .sr-gesamt{display:flex;justify-content:space-between;align-items:baseline;font-size:1.35rem;font-weight:700;color:var(--text)}
.sr-summe .sr-gesamt>span{font-size:1rem;font-weight:600}
.sr-summe-klein{display:flex;justify-content:flex-end;gap:12px;font-size:14px}
.sr-fehlt{display:flex;gap:10px;margin-bottom:12px}
.sr-fehlt ul{margin:0;padding-inline-start:18px}
.sr-frage{font-size:14px;margin-top:3px}
.sr .is-gefragt{border-color:var(--red)!important;box-shadow:0 0 0 2px var(--red-50)}
.sr-leiste .sr-los{font-size:1rem;padding-inline:18px}
.sr-leiste-summe{font-weight:700;font-variant-numeric:tabular-nums;display:none}
.sr-abbrechen{color:var(--muted);font-size:14px;padding:8px 6px}
.check-inline{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:14px;font-weight:400}
.sr-zur-schnell{margin:8px 0}
:root[data-theme=dark] .sticky-bar.sr-leiste{background:rgba(21,29,46,.94)}
:root[data-theme=dark] .sr .chip.is-on,:root[data-theme=dark] .sr label.chip:has(input:checked),:root[data-theme=dark] .sr-typ-k.is-on{color:#cfe2ff;border-color:#8ec1ff}
:root[data-theme=dark] .sr .chip small{color:var(--muted)}
:root[data-theme=dark] .sr .is-unsicher{background:#3d3410!important;border-color:#c9a227!important;color:var(--text)}:root[data-theme=dark] .sr .is-unsicher::placeholder{color:#e8d48a}
:root[data-theme=dark] .sr-satz input{background:rgba(142,193,255,.08)}
@media (max-width:1000px){.sr-grid{grid-template-columns:1fr}.sr-rechts{position:static}.sr-leiste-summe{display:inline}}
@media (max-width:700px){
  .sr-kunde-feld{flex:1 1 100%}
  .sr-kunde-extra{flex-direction:column}
  /* Positionen als Karten wie im vollen Editor am Handy */
  .sr-pos-table thead{display:none}
  .sr-pos-table,.sr-pos-table tbody,.sr-pos-table tr{display:block}
  .sr-pos-table tr.sr-pos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 6px;padding:8px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--radius-sm)}
  .sr-pos-table td{border:0;padding:0;width:auto}
  .sr-pos-table td.sr-c-bez{grid-column:1/3}
  .sr-pos-table td[data-l]::before{content:attr(data-l);display:block;font-size:14px;color:var(--muted)}
  .sr-c-summe{padding-top:0!important;text-align:start;font-weight:600}
  .sr-c-weg{grid-column:3;grid-row:1;justify-self:end}
  .sr-pos-table input,.sr-pos-table select{height:40px;min-height:40px;font-size:1rem}
  .sr2:has(#sr_details:checked) td.sr-d{display:block}
  .sr-reihe{grid-template-columns:1fr}
  .sr-pos.is-neu td{background:transparent}.sr-pos-table tr.sr-pos.is-neu{background:var(--primary-50)}
  .page-actions .sr-typ-k{padding:4px 10px}
  /* wie im vollen Editor: unten nur die eigene Leiste, ohne Reiterleiste darunter */
  main:has(.sr2) + .tabbar{display:none}
  main.content:has(.sr2){padding-bottom:20px}
  main:has(.sr2) .sticky-bar{bottom:0}
}
/* === Ende Runde 13 S === */

/* === Runde 13 M: Marke (Verwaltung → Plattform → Marke, eigenes Zeichen/Logo) === */
.brand-mark img.marke-zeichen{display:block;width:26px;height:26px;border-radius:7px;object-fit:contain}
.brand-big .brand-mark img.marke-zeichen{width:40px;height:40px}
.brand-side .brand-mark img.marke-zeichen{width:30px;height:30px}
.brand-fuss .brand-mark img.marke-zeichen{width:30px;height:30px}
.bare-aside-brand img.marke-zeichen{width:46px;height:46px;border-radius:11px}
.brand-mit-logo{display:inline-flex;align-items:center}
.brand-mit-logo .marke-logo{display:block;height:30px;width:auto;max-width:220px;object-fit:contain}
.brand-big.brand-mit-logo .marke-logo{height:40px}
.marke-logo-dunkel{display:none!important}
:root[data-theme=dark] .marke-logo-hell:not(.marke-logo-einzig){display:none!important}
:root[data-theme=dark] .marke-logo-dunkel{display:block!important}
.mk-karte .card-head{flex-wrap:wrap;gap:8px}
.mk-kopf-hinweis{font-size:.875rem;flex:1 1 260px}
.mk-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.mk-felder{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 16px}
.mk-felder .field{margin-bottom:8px}
.mk-farbe-zeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mk-farbe-zeile input[type=color]{width:44px;height:38px;padding:2px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);cursor:pointer}
.mk-farbe-zeile .mk-farbe-text{width:110px;font-family:ui-monospace,Consolas,monospace}
.mk-bild-zeile{display:flex;align-items:center;gap:10px;min-height:34px;margin-bottom:4px}
.mk-bild-jetzt{max-height:34px;max-width:160px;width:auto;border:1px solid var(--line);border-radius:6px;padding:2px;background:#fff}
.mk-bild-jetzt.mk-auf-dunkel{background:#151d2e}
.mk-weg{font-weight:400;font-size:.875rem;display:inline-flex;gap:4px;align-items:center}
.mk-bildfeld input[type=file]{max-width:100%}
.mk-leiste{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;background:var(--panel);border-top:1px solid var(--line)}
.mk-leiste .muted{font-size:.875rem}
.mk-vorschau{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg);display:flex;flex-direction:column;gap:10px;align-self:start}
.mk-vorschau h3{margin:0;font-size:.95rem}
.mk-v-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.mk-v-zeichen{display:inline-grid;place-items:center}
.mk-v-zeichen img,.mk-v-zeichen svg{width:28px;height:28px;display:block;border-radius:7px}
.mk-v-wort{font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--text)}
.mk-v-wort b,.mk-v-mail-kopf b{color:var(--mk)}
:root[data-theme=dark] .mk-v-wort b{color:color-mix(in srgb,var(--mk) 60%,#fff)}
.mk-v-kopf small,.mk-v-mail-kopf small{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mk-v-knopf{margin-inline-start:auto;background:var(--mk);color:#fff;border-radius:8px;padding:6px 12px;font-weight:600;font-size:.875rem}
.mk-v-logo{padding:10px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.mk-v-logo img{display:block;height:32px;width:auto;max-width:100%}
.mk-v-mail{background:#fff;border:1px solid #e4e9f0;border-radius:10px;overflow:hidden;color:#14213d}
.mk-v-mail-kopf{padding:8px 12px;border-bottom:3px solid var(--mk);font-weight:800}
.mk-v-mail-kopf small{color:#5b6779}
.mk-v-mail-zeile{padding:6px 12px;font-size:.875rem}
.mk-v-tab{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px 8px 0 0;background:var(--panel);border:1px solid var(--line);border-bottom:0;font-size:.875rem;max-width:280px}
.mk-v-tab img{width:16px;height:16px;flex:none;border-radius:3px}
.mk-v-tab>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-v-pdf{font-size:.875rem;color:var(--muted)}
.mk-unten{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;border-top:1px solid var(--line)}
.mk-block h3{margin:0 0 6px;font-size:.95rem}
.mk-verlauf{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.mk-verlauf li{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.mk-verlauf li>span{display:flex;flex-direction:column}
.mk-verlauf .muted{font-size:.875rem}
.mk-domain-form{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.mk-domain-form input{flex:1;min-width:0}
.mk-pruefung{list-style:none;margin:0 0 8px;padding:0;font-size:.875rem}
.mk-pruefung li{padding:3px 0 3px 10px;border-inline-start:3px solid var(--line-strong)}
.mk-pruefung .mk-p-ok{border-color:var(--green)}
.mk-pruefung .mk-p-warn{border-color:var(--amber,#b7791f)}
.mk-hand{margin:0 0 8px;padding-inline-start:18px;font-size:.9rem}
.mk-hand li{margin-bottom:4px}
.mk-klein{font-size:.875rem;color:var(--muted);margin:0}
@media (min-width:900px){
  .mk-raster{grid-template-columns:minmax(0,1fr) 300px}
  .mk-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-vorschau{position:sticky;top:70px}
  .mk-unten{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* === Ende Runde 13 M === */
/* === Runde 13 N: Menü (Neu + Funktionssuche + sechs Hauptpunkte), Übersicht ohne Scrollen, Verwaltung als Cockpit === */
/* Fester Block oben in der Seitenleiste (app/menue_r13.php) */
.nav-start{display:flex;flex-direction:column;gap:6px;padding:10px 10px 6px;border-bottom:1px solid var(--sb-line)}
.nav-neu-haupt{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;font-weight:600}
.nav-neu-schnell{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.nav-neu-i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;padding:5px 2px;border:1px solid var(--sb-line);border-radius:var(--radius-sm);background:var(--sb-kachel);color:var(--sb-text);font-size:.76rem;font-weight:500;line-height:1.1;text-decoration:none!important;text-align:center;min-width:0}
.nav-neu-i span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-neu-i .ico{width:17px;height:17px;color:var(--sb-active-icon)}
.nav-neu-i:hover{background:var(--sb-hover);color:var(--sb-strong);border-color:var(--line-strong)}
.nav-neu-mehr>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:28px;padding:3px 10px;border-radius:var(--radius-sm);font-size:.84rem;font-weight:500;color:var(--sb-muted)}
.nav-neu-mehr>summary::-webkit-details-marker{display:none}
.nav-neu-mehr>summary span{flex:1}
.nav-neu-mehr>summary:hover{background:var(--sb-hover);color:var(--sb-strong)}
.nav-neu-mehr[open]>summary .nav-sec-pfeil{transform:rotate(180deg)}
.nav-neu-liste{display:flex;flex-direction:column;gap:1px;padding:2px 0 4px}
.nav-neu-l{display:flex;align-items:center;gap:10px;min-height:32px;padding:5px 10px;border-radius:var(--radius-sm);color:var(--sb-text);font-size:.88rem;text-decoration:none!important}
.nav-neu-l .ico{width:16px;height:16px;color:var(--sb-icon)}
.nav-neu-l:hover{background:var(--sb-hover);color:var(--sb-strong)}
.nav-suche{display:flex;align-items:center;gap:8px;min-height:34px;padding:5px 8px 5px 10px;border:1px solid var(--sb-line);border-radius:var(--radius-sm);background:var(--sb-kachel);color:var(--sb-muted);font-size:.86rem;text-decoration:none!important}
.nav-suche span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-suche .ico{width:16px;height:16px}
.nav-suche .kbd{font-size:.72rem;white-space:nowrap}
.nav-suche:hover{border-color:var(--line-strong);color:var(--sb-strong)}
/* Hauptpunkte: zugeklappt eine vollwertige Menüzeile mit Zeichen (vorher ein kleines Etikett über immer offenen Einträgen) */
@media (min-width:701px){
  .chrome-app .nav-sec{margin-top:0}
  .chrome-app .nav>.nav-sec+.nav-item{margin-top:0}
  .chrome-app .nav>.nav-item+.nav-sec{margin-top:6px}
  .chrome-app .nav-sec>summary{min-height:34px;margin:0;padding:5px 10px;gap:10px;font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--sb-text);border-radius:var(--radius-sm)}
  .chrome-app .nav-sec>summary>.ico:first-child{display:inline-block;width:17px;height:17px;opacity:1;color:var(--sb-icon)}
  .chrome-app .nav-sec>summary:hover{background:var(--sb-hover);color:var(--sb-strong)}
  .chrome-app .nav-sec[open]>summary{color:var(--sb-strong)}
  .chrome-app .nav-sec[data-aktiv]>summary>.ico:first-child{color:var(--sb-active-icon)}
  .chrome-app .nav-sec-inhalt{margin:0 0 4px 18px;padding-inline-start:8px;border-inline-start:1px solid var(--sb-line)}
  [dir="rtl"] .chrome-app .nav-sec-inhalt{margin:0 18px 4px 0}
}
@media (min-width:901px){
  /* „Neu“ steht jetzt fest in der Leiste – oben rechts nicht noch einmal (in der schmalen Leiste und am Tablet bleibt er). */
  body.chrome-app:not(.nav-mini) .topbar>.neu-dd{display:none}
  body.nav-mini .nav-start{padding:8px 6px;align-items:center}
  body.nav-mini .nav-neu-schnell,body.nav-mini .nav-neu-mehr,body.nav-mini .nav-neu-haupt span,body.nav-mini .nav-suche span,body.nav-mini .nav-suche .kbd{display:none}
  body.nav-mini .nav-neu-haupt{width:44px;padding:8px}
  body.nav-mini .nav-suche{justify-content:center;width:44px;padding:8px}
}
/* Telefon: dasselbe Prinzip im Blatt – Hauptpunkte als Zeilen zum Aufklappen, Einträge darunter als Kacheln */
@media (max-width:700px){
  .nav-start{padding:4px 12px 8px;gap:6px}
  .nav-neu-haupt{min-height:44px}
  .nav-neu-i{min-height:52px;font-size:.875rem}
  .nav-neu-mehr>summary,.nav-suche{min-height:44px;font-size:.92rem}
  .nav-neu-l{min-height:44px;font-size:.92rem}
  .nav-suche .kbd{display:none}
  .chrome-app .sidebar .nav-sec>summary{pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:46px;margin:0;padding:8px 12px;font-size:.95rem;letter-spacing:0;color:var(--sb-strong);border:1px solid var(--sb-line);border-radius:var(--radius-sm);background:var(--sb-kachel)}
  .chrome-app .sidebar .nav-sec>summary>.ico:first-child,.chrome-app .sidebar .nav-sec>summary .nav-sec-pfeil{display:inline-block;width:18px;height:18px;color:var(--sb-icon)}
  .chrome-app .sidebar .nav-sec:not([open])>summary .nav-sec-zahl,.chrome-app .sidebar .nav-sec:not([open])>summary>.nav-punkt{display:inline-block}
  .chrome-app .sidebar .nav-sec[open]>summary{border-color:color-mix(in srgb,var(--akzent) 35%,transparent)}
  .chrome-app .sidebar .nav-sec-inhalt{padding:5px 0 6px}
}
@media (max-width:700px){.chrome-app .sidebar .nav-count{font-size:.875rem;line-height:20px;min-width:22px}}
/* Verwaltung: Bereichsleiste als Akkordeon (views/admin.php) */
.r13-adm-g>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:30px;padding:5px 10px;margin-top:2px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;color:var(--muted)}
.r13-adm-g>summary::-webkit-details-marker{display:none}
.r13-adm-g>summary>span{flex:1}
.r13-adm-g>summary:hover{background:var(--bg);color:var(--text)}
.r13-adm-g>summary .nav-sec-pfeil{transform:rotate(-90deg);transition:transform .15s}
.r13-adm-g[open]>summary .nav-sec-pfeil{transform:none}
.r13-adm-g[open]>summary .nav-sec-zahl{display:none}
.r13-adm-g[open]>summary{color:var(--text)}
.r13-adm-g{display:flex;flex-direction:column;gap:2px}
.r13-adm-nav{max-height:calc(100vh - var(--topbar-h) - 32px);overflow:auto}
@media (max-width:700px){
  .r13-adm-nav:not(.offen)>.r13-adm-g{display:none}
  .r13-adm-nav.offen>.r13-adm-g{flex:1 0 100%}
  .r13-adm-g>summary{min-height:44px;font-size:.92rem}
  .r13-adm-nav{max-height:none;overflow:visible}
}
/* Cockpit (views/parts/admin_uebersicht.php + admin_cockpit_r13.php) */
.r13-cockpit{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);grid-template-areas:"kz kz" "auf neben";gap:12px;align-items:start;margin-bottom:12px}
.r13-cock-haupt{display:contents}
.r13-cockpit .r10a-kz{grid-area:kz;margin:0!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.r13-cockpit #aufgaben{grid-area:auf;margin:0!important}
.r13-cock-neben{grid-area:neben;display:flex;flex-direction:column;gap:12px;min-width:0}
.r13-cock-neben .card{margin:0}
.r13-cockpit .r10a-kz-k{padding:8px 10px 22px}
.r13-cockpit .r10a-kz-w{font-size:1.2rem}
.r13-cockpit .r10a-kz-s{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.r13-cockpit .r10a-kz-k .r10a-spark{height:18px}
.r13-cockpit .r10a-zeile{padding:7px 14px;gap:6px 10px}
.r13-cockpit .r10a-text{flex-basis:200px}
.r13-cock-neben .card-head{padding:10px 14px}
.r13-cock-neben .card-body{padding:10px 14px}
.r13-cock-neben .card-body.tight{padding:0}
.r13-probleme,.r13-ruhig{list-style:none;margin:0;padding:0}
.r13-problem{display:flex;align-items:center;gap:8px;padding:7px 14px;border-top:1px solid var(--line)}
.r13-problem:first-child{border-top:0}
.r13-problem.r13-fehler{box-shadow:inset 3px 0 0 var(--red)}
.r13-problem.r13-warn{box-shadow:inset 3px 0 0 var(--st-warn,#b7791f)}
.r13-problem-text{flex:1;min-width:0;display:flex;flex-direction:column}
.r13-problem-text b{font-weight:600;font-size:.88rem}
.r13-problem-text small{color:var(--muted);font-size:var(--fs-klein);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r13-problem .btn{flex:none}
.r13-alles-ok{margin:0;padding:10px 14px;color:var(--st-ok,var(--green));display:flex;align-items:center;gap:6px}
.r13-ok>summary,.r13-einr-ok>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem;font-weight:500}
.r13-ok>summary::-webkit-details-marker,.r13-einr-ok>summary::-webkit-details-marker{display:none}
.r13-ok>summary .ico,.r13-einr-ok>summary .ico{color:var(--st-ok,var(--green))}
.r13-ok>summary:hover,.r13-einr-ok>summary:hover{color:var(--text)}
.r13-ruhig li{display:flex;align-items:baseline;gap:6px;padding:4px 14px;font-size:.84rem}
.r13-ruhig li small{margin-inline-start:auto;color:var(--muted);text-align:end}
.r13-ruhig .r13-ok .ico{color:var(--st-ok,var(--green))}
.r13-ok-gross>summary{border:1px solid var(--line);border-radius:var(--radius-sm);margin:10px 14px}
.r13-einr-ok>summary{border-top:0;padding-inline:0}
.r13-einr-ok .einst-kacheln{margin-top:8px}
.r13-schnell-knoepfe{display:flex;flex-wrap:wrap;gap:6px}
.r13-cock-neben .einst-kacheln{grid-template-columns:1fr}
.r13-statistik>summary{list-style:none;cursor:pointer}
.r13-statistik>summary::-webkit-details-marker{display:none}
.r13-statistik>summary .nav-sec-pfeil{margin-inline-start:auto;transform:rotate(-90deg)}
.r13-statistik[open]>summary .nav-sec-pfeil{transform:none}
.pruef .pruef-knopf{margin-inline-start:auto;flex:none;align-self:center}
@media (max-width:1100px){
  .r13-cockpit{grid-template-columns:1fr;grid-template-areas:"kz" "auf" "neben"}
  .r13-cockpit .r10a-kz{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Lange Verwaltungsseiten: haftende Sprungleiste, zweispaltig, eingerichtete Abschnitte zugeklappt (app.js) */
.r13-sprung{position:sticky;top:var(--topbar-h);z-index:12;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:8px 0;background:var(--bg)}
.r13-sprung a{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:4px 11px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--text);font-size:.85rem;font-weight:500;text-decoration:none!important;white-space:nowrap}
.r13-sprung a:hover{border-color:var(--akzent);color:var(--akzent-text)}
.r13-sprung-ok{color:var(--st-ok,var(--green));font-weight:700}
.r13-sprung-warn{color:var(--st-warn,#b7791f);font-weight:700}
.sub-main .card[id]{scroll-margin-top:calc(var(--topbar-h) + 64px)}
@media (min-width:1700px){
  .r13-karten{columns:2 520px;column-gap:14px}
  .r13-karten>*{break-inside:avoid}
  .r13-karten>.card,.r13-karten>.explain,.r13-karten>form{display:inline-block;width:100%;vertical-align:top}
}
.card.r13-zu>.card-body,.card.r13-zu>.card-foot{display:none}
.r13-bearbeiten{margin-inline-start:auto}
[data-r13-zuklappen] .card .form-actions{position:sticky;bottom:0;z-index:4;background:var(--panel);padding-block:10px;margin-bottom:-6px;border-top:1px solid var(--line)}
@media (max-width:700px){
  .r13-sprung{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-2px}
  .r13-sprung a{min-height:40px;font-size:.88rem}
  [data-r13-zuklappen] .card .form-actions{bottom:calc(56px + env(safe-area-inset-bottom))}
}
/* Cockpit dichter: Einrichtung als Zeilen, Schnellzugriff zweispaltig, Hinweis zur Zwei-Faktor-Pflicht (nur Entwicklung) einzeilig */
.r13-cock-neben .einst-kachel{padding:8px 10px;gap:10px}
.r13-cock-neben .einst-was{display:none}
.r13-cock-neben .einst-kachel b{font-size:.88rem}
.r13-cock-neben .einst-stand{font-size:var(--fs-klein)}
.r13-cock-neben .card-head small{display:none}
.r13-cock-neben .card-body{padding:8px 12px}
.r13-schnell-knoepfe{display:flex;flex-wrap:wrap;gap:6px}
.r13-schnell-knoepfe .btn{justify-content:flex-start;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#admin-2fa-hinweis{padding:6px 12px;font-size:.85rem;margin-bottom:10px}
.r13-cockpit .r10a-text b{font-size:.92rem;line-height:1.3}
/* Übersicht ohne Scrollen am Laptop (views/dashboard.php): Lage-Satz und Kennzahlen in einer Zeile, Schnellwege als flache Leiste,
   Karten in drei Spalten (Braucht dich/Heute · Geld · Woche/Tipps/Erste Schritte) – nichts entfernt, nur dichter angeordnet. */
@media (min-width:1100px){
  .content:has(.ue9) .page-head{margin-bottom:8px}
  .content:has(.ue9) .page-head h1{font-size:1.35rem}
  .ue9 .ue-lage{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"satz chips akt";align-items:center;gap:8px 14px;margin-bottom:10px}
  .ue9 .ue-lage-satz{font-size:1rem;white-space:nowrap}
  .ue9 .ue-chips{gap:6px}
  .ue9 .ue-schnell{margin-bottom:12px}
  .ue9 .ue-schnell-raster{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
  .ue9 .ue-s{flex-direction:row;min-height:44px;padding:6px 10px;gap:8px;font-size:.9rem;border-radius:10px}
  .ue9 .ue-s .ue-s-ico{width:28px;height:28px}
  .ue9 .ue-raster.ue-raster-drei{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.85fr);gap:14px}
  .ue9 .ue-raster:not(.ue-raster-eins){gap:14px}
  .ue9 .ue-haupt,.ue9 .ue-seite{gap:14px}
  .ue9 .ue-karte .card-head{padding:12px 16px}
  .ue9 .ue-karte .card-body{padding:10px 16px}
  .ue9 .ue-g-w{font-size:1.5rem}
  .ue9 .ue-g-block{padding-top:10px;margin-top:10px}
  .ue9 .ue-aufgaben-liste .ue-a-link{min-height:42px}
}
@media (max-width:1099px) and (min-width:701px){.ue9 .ue-raster-drei .ue-haupt{grid-row:1/span 2}.ue9 .ue-raster-drei .ue-seite{grid-column:2}}
@media (min-width:1100px){
  body.chrome-app .content:has(.ue9){padding-top:16px;padding-bottom:20px}
  .ue9 .ue-g-umsatz .ue-g-vgl{margin:2px 0 0}
  .ue9 .ue-ziel-form>summary{margin-top:4px}
}
@media (max-width:700px){
  .r13-cockpit .r10a-kz-s{display:none}
  .r13-cockpit .r10a-kz-l{font-size:14px}
  .r13-cockpit .r10a-kz-w{font-size:1.15rem}
  .r13-problem-text b,.r13-problem-text small,.r13-ruhig li,.r13-ok>summary,.r13-einr-ok>summary,.r13-cock-neben .einst-stand,.r13-cock-neben .einst-kachel b,.r13-adm-g>summary{font-size:.875rem}
  .r13-problem-text small{white-space:normal}
  .r13-schnell-knoepfe{grid-template-columns:1fr}
  #admin-2fa-hinweis,#admin-2fa-hinweis span,#admin-2fa-hinweis a{font-size:.875rem}
  .r13-pruefung .card-head .badge{font-size:.875rem}
}
/* Suche und „Weitere anlegen“ in einer Zeile; die Liste liegt als Feld darunter (innerhalb der Leiste, oben – nichts wird abgeschnitten). */
.nav-zeile{position:relative;display:flex;gap:6px;align-items:stretch}
.nav-zeile>.nav-suche{flex:1;min-width:0}
.nav-zeile>.nav-neu-mehr>summary{width:38px;min-height:34px;height:100%;justify-content:center;gap:0;padding:0;border:1px solid var(--sb-line);background:var(--sb-kachel)}
.nav-zeile>.nav-neu-mehr>summary>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-zeile>.nav-neu-mehr>summary .nav-sec-pfeil{display:none}
.nav-zeile>.nav-neu-mehr[open]>summary{border-color:var(--akzent);color:var(--sb-active-text)}
.nav-zeile .nav-neu-liste{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:30;padding:6px;border:1px solid var(--sb-line);border-radius:var(--radius-sm);background:var(--panel);box-shadow:var(--shadow-lg,0 10px 30px rgba(0,0,0,.15))}
@media (min-width:701px){
  .chrome-app .nav-sec>summary{min-height:30px;padding-block:3px}
  .chrome-app .sidebar .nav-item{min-height:29px;padding-block:3px}
  .nav-neu-haupt{min-height:36px}
  .nav-neu-i{min-height:42px;padding-block:3px}
  .chrome-app .nav{padding-block:6px 8px}
  .nav-start{gap:5px;padding:8px 10px 6px}
  .chrome-app .sidebar-foot{padding:6px 12px 10px}
  .chrome-app .nav-collapse{margin:0 10px 2px;padding:4px 10px}
}
@media (min-width:901px){body.nav-mini .nav-zeile{flex-direction:column;align-items:center}}
@media (max-width:700px){.nav-zeile>.nav-neu-mehr>summary{width:48px;min-height:44px}.nav-zeile .nav-neu-liste{position:static;margin-top:4px}.nav-zeile{flex-wrap:wrap}.nav-zeile>.nav-neu-mehr[open]{flex:1 0 100%;order:2}}
/* Nachbesserung N: Cockpit auf einen Bildschirm (1366×768). Schnellzugriff als eine Leiste unter den Kennzahlen, Statistik links unter
   „Heute wichtig“ (geöffnet über die ganze Breite), Zeilen einzeilig mit vollem Text im Tooltip – nichts entfernt, nur dichter. */
.r13-cockpit>.r13-schnell{grid-area:sch;margin:0}
.r13-schnell .r13-schnell-knoepfe{align-items:center;padding:6px 10px}
.r13-schnell-titel{font-weight:600;font-size:.88rem;color:var(--muted);margin-inline-end:4px}
.r13-cockpit>.r13-statistik{grid-area:stat;margin:0}
.r13-cockpit>.r13-statistik[open]{grid-area:auto;grid-row:5;grid-column:1/-1}
.r13-cockpit{grid-template-areas:"kz kz" "sch sch" "auf neben" "stat neben";grid-template-rows:auto auto auto 1fr}
.r13-cock-neben{grid-row:3/span 2}
@media (min-width:1101px){
  .content:has(.r13-cockpit){padding-top:14px}
  .content:has(.r13-cockpit) .page-head{margin-bottom:8px}
  .content:has(.r13-cockpit) .page-head h1{font-size:1.35rem}
  .r13-cockpit{gap:10px}
  .r13-cockpit .r10a-kz-k{padding:6px 10px 18px;gap:0}
  .r13-cockpit .r10a-kz-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .r13-cockpit .r10a-kz-l .ico{vertical-align:-2px}
  .r13-cockpit .r10a-kz-w{font-size:1.1rem}
  .r13-cockpit .r10a-kz-k .r10a-spark{height:14px}
  .r13-cockpit #aufgaben .card-head{padding:8px 14px}
  .r13-cockpit .r10a-zeile{padding:5px 14px;flex-wrap:nowrap}
  .r13-cockpit .r10a-zeile:has(.r10a-auf[open]){flex-wrap:wrap}
  .r13-cockpit .r10a-text{flex:1 1 0;gap:0}
  .r13-cockpit .r10a-text b,.r13-cockpit .r10a-text small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
  .r13-cockpit .r10a-text b{font-size:.9rem}
  .r13-cockpit .r10a-aktion{flex-wrap:nowrap}
  .r13-cock-neben{gap:10px}
  .r13-pruefung .card-head{padding:8px 12px;flex-wrap:nowrap;gap:6px}
  .r13-pruefung .card-head h2{font-size:1rem;white-space:nowrap}
  .r13-pruefung .card-head .badge{white-space:nowrap}
  .r13-problem{padding:5px 12px}
  .r13-problem-text b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .r13-ok>summary{min-height:30px;padding:4px 12px}
  .r13-cock-neben .card-head{padding:8px 12px}
  .r13-cock-neben .einst-kacheln{gap:4px;grid-template-columns:minmax(0,1fr)}
  .r13-cock-neben .einst-kachel{padding:5px 8px;align-items:center;min-width:0}
  .r13-cock-neben .einst-ico{width:26px;height:26px;flex:none}
  .r13-cock-neben .einst-text{flex:1;min-width:0;flex-direction:row;align-items:baseline;gap:8px}
  .r13-schnell .btn-sm{padding-inline:9px;font-size:.84rem;gap:5px}
  .r13-schnell .r13-schnell-knoepfe{gap:5px;flex-wrap:wrap}
  .r13-cockpit>.r13-statistik>summary{flex-wrap:nowrap;gap:10px}
  .r13-cockpit>.r13-statistik>summary h2{white-space:nowrap;font-size:1rem}
  .r13-cock-neben .einst-text b{flex:none}
  .r13-cock-neben .einst-stand{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .r13-einr-ok>summary{min-height:28px;padding-block:2px}
  .r13-cockpit>.r13-statistik>summary{padding:8px 14px}
  .r13-cockpit>.r13-statistik>summary small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #admin-2fa-hinweis{max-width:none;padding:4px 12px;margin-bottom:8px}
  #admin-2fa-hinweis>span{max-width:none}
  body.chrome-app .content:has(.r13-cockpit){padding-bottom:16px}
  /* Text und Untertext in einer Zeile: der Titel hat Vorrang, der Untertext kürzt sich (voller Text im Tooltip). */
  .r13-cockpit .r10a-text{flex-direction:row;align-items:baseline;gap:8px}
  .r13-cockpit .r10a-text b{flex:0 1 auto;min-width:0}
  .r13-cockpit .r10a-text small{flex:1 1 0;min-width:40px}
  .r13-cockpit .r10a-zeile{min-height:38px}
  .r13-cockpit .r10a-kz-k{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:6px;align-items:baseline;padding-bottom:16px}
  .r13-cockpit .r10a-kz-l{grid-column:1/-1}
  .r13-cockpit .r10a-kz-s{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;display:block}
  .r13-cockpit,.r13-cock-neben{gap:8px}
  .r13-cock-neben .card-head{padding:6px 12px;min-height:0}
  .r13-cock-neben .card-head h2{font-size:1rem}
  .r13-cock-neben .card-body{padding:4px 10px 6px}
  .r13-problem{padding-block:4px}
  .r13-problem-text b{font-size:.86rem;line-height:1.25}
  .r13-problem-text small{line-height:1.25}
  .r13-cock-neben .einst-kacheln+*,.r13-cock-neben .card-body>.einst-kacheln{margin:0}
}
@media (max-width:1100px){
  .r13-cockpit{grid-template-areas:"kz" "sch" "auf" "neben" "stat";grid-template-rows:none}
  .r13-cock-neben{grid-row:auto}
  .r13-cockpit>.r13-statistik[open]{grid-row:auto;grid-column:auto}
}
@media (max-width:700px){.r13-schnell .r13-schnell-knoepfe{display:grid;grid-template-columns:1fr 1fr}.r13-schnell-titel{grid-column:1/-1}}
/* Nachbesserung N: Formulare zweispaltig am Laptop – in langen Verwaltungsseiten stehen einfache Felder einer Karte nebeneinander; Textfelder,
   Erklärungen, Raster und die Speichern-Leiste bleiben über die ganze Breite. Ab 1700 px stehen stattdessen die Karten zweispaltig (r13-karten). */
@media (min-width:1101px) and (max-width:1699px){
  [data-r13-zuklappen] .card-body>form:has(>.field~.field){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:start}
  [data-r13-zuklappen] .card-body>form:has(>.field~.field)>:not(.field),
  [data-r13-zuklappen] .card-body>form:has(>.field~.field)>.field:has(textarea,table,.form-grid){grid-column:1/-1}
}
/* Seitenblatt der Unternehmen-Liste (parts/admin_company_blatt.php) */
.r13-firmenblatt{width:min(440px,100vw)}
.r13-firmenblatt .drawer-head h2 small{font-weight:500;font-size:.85rem}
.r13-firmenblatt .drawer-head .sub{display:flex;flex-wrap:wrap;gap:4px}
.r13-firmenblatt .drawer-items li>a{overflow-wrap:anywhere;text-align:end}
.r13-firmenblatt .drawer-actions form.inline{display:inline-flex}/* === Ende Runde 13 N === */

/* === Runde 14 A: Feinschliff Server === */
/* Heute wichtig: Punkte über HEUTE_SICHTBAR unter „Alle anzeigen“ (views/parts/admin_heute_r10.php) */
.r14-heute-mehr{border-top:1px solid var(--line)}
.r14-heute-mehr>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;font-weight:600;font-size:.875rem;color:var(--navy-700)}
.r14-heute-mehr>summary::-webkit-details-marker{display:none}
.r14-heute-mehr>summary:hover{background:var(--bg)}
.r14-heute-mehr>summary:focus-visible{outline:2px solid var(--navy-700);outline-offset:-2px}
.r14-heute-mehr .r14-heute-pfeil{transform:rotate(-90deg);transition:transform .15s}
.r14-heute-mehr[open] .r14-heute-pfeil{transform:none}
.r14-heute-mehr>.r10a-liste{border-top:1px solid var(--line)}
@media (max-width:700px){.r14-heute-mehr>summary{min-height:44px;padding:8px 12px}}
:root[data-theme=dark] .r14-heute-mehr>summary{color:#8fc4ff}
:root[data-theme=dark] .r14-heute-mehr>summary:focus-visible{outline-color:#8fc4ff}
/* Cockpit-Nebenspalte: mehr als vier Probleme → Zahl mit Sprung in die Systemprüfung (views/parts/admin_cockpit_r13.php) */
.r14-weitere{padding:6px 14px;border-top:1px solid var(--line);font-size:.875rem}
.r14-weitere a{font-weight:600}
/* Verwaltung: Gruppe mit nur einem Eintrag als direkter Link (views/admin.php) – Abstand wie die Gruppenköpfe */
.r13-adm-nav>.r14-adm-einzeln{margin-top:2px}
/* Marke: Absenderadresse als Anzeige mit Weg zu Dienste → E-Mail-Versand (views/parts/admin_marke.php) */
.mk-absender-adresse>.label{display:block;font-size:.85rem;font-weight:500;color:var(--text);margin-bottom:4px}
.mk-absender-adresse b{overflow-wrap:anywhere}
@media (max-width:700px){.mk-absender-adresse>.label,.r14-weitere{font-size:14px}}
/* === Ende Runde 14 A === */

/* === Runde 14 V: voller Editor ruhiger (views/beleg_edit.php) – Positionskopf mit „⋯“, „+ Beschreibung“, Rabatt/USt. nur bei Abweichung, kurze Beschriftungen, Leiste === */
.pos-table th{font-size:14px;text-transform:none;letter-spacing:0;font-weight:600}
.pos-table .pos-mehr{display:inline-block}
.pos-table .pos-mehr .dd-menu{min-width:220px;white-space:normal}
.pos-table .c-tools{width:84px}
.pos-table .pos-mehr .dd-item:disabled{opacity:.45;cursor:default}
/* Beschreibung: zugeklappt als Link, offen wenn gefüllt; ohne Skript bleibt das Feld sichtbar (kein data-beschr-auf-Klick möglich) */
.pos-beschr-link{display:none;background:none;border:0;padding:4px 2px;margin-top:4px;color:var(--primary-700);font-size:14px;cursor:pointer;align-items:center;gap:4px;font-family:inherit}
.pos-beschr-link:hover{text-decoration:underline}
.pos-beschr-link:focus-visible{box-shadow:var(--ring);outline:none;border-radius:6px}
#belegEditor.js-beschr .pos-row:not(.beschr-offen) .pos-beschr-link{display:inline-flex}
#belegEditor.js-beschr .pos-row:not(.beschr-offen) textarea[data-f="beschreibung"]{display:none}
/* Rabatt und USt. je Position: nur mit dem Schalter (gesetzt, sobald eine Position abweicht) */
.pos-details-schalter{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);margin-inline-start:12px;cursor:pointer}
.pos-karte:not(:has(#posDetails:checked)) .pos-table .c-rabatt,.pos-karte:not(:has(#posDetails:checked)) .pos-table .c-ust{display:none}
/* Leiste: „Gesamt“ als eine Zeile, Aufschlüsselung daneben (Desktop) bzw. beim Antippen (Handy) */
.beleg-live .bl-gesamt{background:none;border:0;padding:0;font:inherit;color:var(--text);cursor:pointer;display:inline-flex;gap:6px;align-items:baseline}
.beleg-live .bl-gesamt b{font-size:1.05rem}
.beleg-live a.bl-check{text-decoration:none}
.beleg-live a.bl-check:hover{text-decoration:underline}
@media (max-width:760px){
  .pos-table td[data-l]::before{text-transform:none;letter-spacing:0;font-size:14px;font-weight:500}
  .pos-table .c-nr{text-transform:none;letter-spacing:0}
  .pos-table .c-nr::before{font-size:14px;letter-spacing:0}
  /* ohne Rabatt/USt. steht die Summe in der Zeile von Menge, Einheit, Preis darunter rechts */
  .pos-karte:not(:has(#posDetails:checked)) .pos-table .c-summe{grid-column:1/-1;grid-row:4}
  .pos-details-schalter{margin:8px 0 0;flex-basis:100%}
  /* Summenblock in der Karte entfällt am Handy – die Leiste zeigt „Gesamt“ und klappt Netto/USt. auf */
  .pos-karte #totals{display:none}
  .steps{display:none}
}
@media (max-width:700px){
  #belegEditor~.sticky-bar,.sticky-bar:has(#belegLive){row-gap:6px}
  .sticky-bar:has(#belegLive) .beleg-live{order:-2;flex:1 0 100%;justify-content:space-between;font-size:14px}
  .sticky-bar:has(#belegLive) .beleg-live .bl-teil{display:none}
  .sticky-bar:has(#belegLive) .beleg-live.is-auf .bl-teil{display:inline}
  .sticky-bar:has(#belegLive) .beleg-live .bl-gesamt::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-135deg) translate(-2px,-2px);margin-inline-start:4px}
  .sticky-bar:has(#belegLive) .beleg-live.is-auf .bl-gesamt::after{transform:rotate(45deg)}
  .sticky-bar:has(#belegLive) #autosaveInfo{display:none}
}
/* Nachbesserung: Kopf mit einem „⋯“, Anschrift erst bei Bedarf, Anschreiben zugeklappt, Leiste in zwei Zeilen */
.editor-wege .dd-menu{min-width:250px}
.editor-wege summary .ico{width:20px;height:20px}
#belegEditor.js-anschrift .anschrift-feld:not(.is-offen){display:none}
.anschrift-kurz{display:flex;align-items:center;gap:2px;font-size:14px;margin-top:4px}
.anschrift-kurz[hidden],.anschrift-neu[hidden]{display:none}
.anschrift-neu .pos-beschr-link{display:inline-flex;margin:0;padding:2px 0}
#belegEditor:not(.js-anschrift) .anschrift-neu{display:none}
.bar-mehr{display:none}
.bar-mehr .dd-menu{top:auto;bottom:calc(100% + 6px);right:0}
.bar-mehr .dd-menu form{display:block}
@media (max-width:760px){
  main:has(#belegEditor) .page-head .subtitle{display:none}
  /* „⋯“ in der Titelzeile statt in einer eigenen Zeile darunter */
  .chrome-app main:has(#belegEditor) .page-head{flex-wrap:nowrap;align-items:center;margin-bottom:10px}
  .chrome-app main:has(#belegEditor) .page-head .topbar-title{flex:1 1 auto;min-width:0}
  .chrome-app main:has(#belegEditor) .page-head .page-actions{flex:0 0 auto;width:auto;margin:0}
  /* Kopfkarte dichter: Kunde und erste Position ohne Scrollen */
  #belegEditor .editor-head{gap:10px}
  #belegEditor .editor-head .field{margin-bottom:8px}
  #belegEditor .editor-head .datum-schnell{margin-top:4px}
  #belegEditor .editor-head .datum-schnell .btn{min-height:34px;padding:4px 10px}
  #belegEditor .card-body:has(>.editor-head){padding-bottom:6px}
  #belegEditor .anschreiben>.card-head{padding-block:10px}
}
@media (max-width:700px){
  .sticky-bar:has(#belegLive){flex-wrap:wrap}
  .sticky-bar:has(#belegLive) .btn-primary{flex:1 1 0;order:-1;min-width:0}
  .sticky-bar:has(#belegLive) button[name=stay]{flex:0 0 auto}
  .sticky-bar:has(#belegLive) #previewToggle,.sticky-bar:has(#belegLive)>a.btn-ghost,.sticky-bar:has(#belegLive)>form,.sticky-bar:has(#belegLive)>.bar-luecke{display:none}
  .sticky-bar:has(#belegLive) .bar-mehr{display:inline-block}
}
/* === Ende Runde 14 V === */

/* === Runde 14 T: Aufräumen nach der Anmeldung (views/dashboard.php u. a.) === */
/* Schnellwege, die die Seitenleiste am Laptop schon zeigt („Neue Rechnung“, Angebot, Kontakt), nur ohne Seitenleiste (≤ 900 px). */
@media (min-width:901px){.ue-s[data-ue-dopp]{display:none}}
/* Startkarte am ersten Tag: kompakt, Schritte mit Knopf unten bündig. */
.ue-willkommen h2{margin-bottom:4px}
.ue-willkommen .ue-schritte{margin-top:12px;gap:12px}
.ue-willkommen .ue-schritte li{padding:14px 16px;gap:6px}
.ue-willkommen .ue-schritte .btn{margin-top:auto}
/* Leerzustand in einer Zeile mit Knopf (Karten auf Detailseiten). */
.t14-leer{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;color:var(--muted);margin:0}
/* Knopf mit „?“ daneben (Versanddialog). */
.t14-knopf-tip{display:flex;align-items:center;gap:6px}
.t14-knopf-tip>.btn{flex:1 1 auto}
.t14-absatz{margin:0 0 8px}
.mahnlauf-hinweis{display:inline-flex}
/* === Ende Runde 14 T === */
/* === Runde 14 T2: Aufräumen restliche Fachseiten === */
/* Zwischenüberschrift mit (?) daneben: Abstand der Zeile statt der Überschrift. */
.t2-zeile{margin-bottom:8px}
.t2-zeile>h3{margin:0}
.t2-zeile.mt{margin-top:16px}
/* (?) in Legenden und Kästchen-Beschriftungen auf Zeilenhöhe. */
legend .i-tip,.field.check label .i-tip{vertical-align:middle}
/* „Wofür?“ in den Einstellungen: das (?) neben der Beschriftung, keine zweite Zeile. */
.einst-wofuer.t2-wofuer,.content-narrow .field.check>label>.einst-wofuer.t2-wofuer{display:inline;flex-basis:auto;margin:0;padding:0}
/* === Ende Runde 14 T2 === */
/* === Runde 14 N2: Nacharbeit Server (Kopf, Seitenleiste, (?) an der Beschriftung) === */
/* Hilfe-Knopf: Neuerungen als ruhiger Punkt statt roter Zahl – die Zahl steht im Hilfe-Panel und in der Beschriftung (Screenreader). */
.hilfe-knopf{position:relative}
.hilfe-neu-punkt{position:absolute;top:7px;inset-inline-end:7px;width:9px;height:9px;border-radius:50%;background:var(--akzent-600);box-shadow:0 0 0 2px var(--panel);pointer-events:none}
/* Seitenleiste: „Neue Rechnung“ groß, daran ein Pfeil mit allen anderen Neu-Zielen; die Funktionssuche darunter über die volle Breite. */
.nav-neu-zeile{position:relative;display:flex;align-items:stretch;gap:0}
.nav-neu-zeile>.nav-neu-haupt{flex:1 1 auto;min-width:0;width:auto}
.nav-neu-split>.nav-neu-pfeil{display:flex;align-items:center;justify-content:center;gap:0;width:40px;height:100%;min-height:36px;padding:0;border-start-start-radius:0;border-end-start-radius:0;border-inline-start:1px solid rgba(255,255,255,.35);color:#fff}
.nav-neu-zeile>.nav-neu-haupt:has(+.nav-neu-split){border-start-end-radius:0;border-end-end-radius:0}
.nav-neu-split{flex:0 0 auto;display:flex}
.nav-neu-split>.nav-neu-pfeil:hover{background:var(--akzent-700);color:#fff}
.nav-neu-split>.nav-neu-pfeil>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-neu-split>.nav-neu-pfeil .nav-sec-pfeil{width:16px;height:16px;color:#fff}
.nav-neu-mehr[open]>.nav-neu-pfeil .nav-sec-pfeil{transform:rotate(180deg)}
.nav-neu-zeile>.nav-neu-mehr:not(.nav-neu-split){flex:1 1 auto}
.nav-neu-allein{border:1px solid var(--sb-line);background:var(--sb-kachel)}
.nav-neu-zeile .nav-neu-liste{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:30;max-height:min(70vh,560px);overflow:auto;padding:6px;border:1px solid var(--sb-line);border-radius:var(--radius-sm);background:var(--panel);box-shadow:var(--shadow-lg,0 10px 30px rgba(0,0,0,.15))}
.nav-start>.nav-suche{width:100%}
@media (min-width:901px){body.nav-mini .nav-neu-zeile{justify-content:center}body.nav-mini .nav-neu-zeile>.nav-neu-haupt{flex:0 0 auto;border-radius:var(--radius-sm)}}
@media (max-width:700px){.nav-neu-split>.nav-neu-pfeil{width:52px;min-height:44px}.nav-neu-zeile .nav-neu-liste{max-height:none}}
/* Feld mit (?) an der Beschriftung (field() mit info_tipp(), „Wofür?“ in den Einstellungen): wie am Seitentitel, eine Zeile. */
.field-kopf{display:flex;align-items:center;gap:2px;min-width:0}
.field-kopf>label{min-width:0}
:where(.chrome-app,.chrome-bare) .field-kopf>label{font-size:.85rem;font-weight:500;color:var(--text)}
.field-kopf .i-tip{font-size:1rem;margin-block:-8px}
.field.check>label+.i-tip{flex:none;margin-block:-6px}
/* Dunkel: Eingabefelder ohne type-Attribut (Schnellrechnung: Kunde, Bezeichnung, Preis) bekamen Chromes graues Systemfeld (#3b3b3b) statt der dunklen Fläche. */
:root[data-theme=dark] input:not([type]){background:#101827;color:var(--text);border-color:var(--line-strong)}
/* Platzhalter mit AA-Kontrast (Chrome-Vorgabe #757575: 3,9:1 auf dunkler Fläche, 4,2:1 auf hellblau); markierte Felder (.is-unsicher) behalten ihre eigene Farbe. */
:where(.chrome-app,.chrome-bare) :is(input,textarea)::placeholder{color:#636d7c;opacity:1}
:root[data-theme=dark] :where(.chrome-app,.chrome-bare) :is(input,textarea)::placeholder{color:#8b97a8}
/* Dunkel: „+ Beschreibung“ und „Neuen Kunden anlegen“ im Beleg-Editor waren dunkelblau auf dunkel (1,97:1) – Linkfarbe wie sonst im Dunkeln. */
:root[data-theme=dark] .pos-beschr-link{color:#8fc4ff}
/* Dunkel: die Pfeil-Liste der Seitenleiste in Menüfarbe (die allgemeine Linkfarbe im Dunkeln machte sie hellblau). */
:root[data-theme=dark] .nav-neu-l{color:var(--sb-text)}
:root[data-theme=dark] .nav-neu-l:hover{color:var(--sb-strong)}
/* === Ende Runde 14 N2 === */

/* === Runde 15 D: weiches Design (Karten, Felder, Pillen-Knöpfe), wärmeres Menü, Handy wie eine App ===
   Sergi 03.11.: „design etwas zu eckig und altmodisch“, „menü … kalt gestellt und zu klein gequetscht“, „handy bereich verbesser“.
   Alles läuft über die Größen am Anfang der Datei (Gestaltungssystem): --radius-feld/-karte/-knopf, --shadow-karte, --karte-rand,
   --feld-bg, --knopf2-*, --luft. Dieser Block setzt sie an den Grundbausteinen ein (Karte, Kennzahl, Feld, Knopf, Menü, Leiste);
   Fachseiten erben das, ohne dass dort etwas geändert wird. Kontrast: Feld- und Knopfränder behalten 3:1 (WCAG 1.4.11). */

/* ---------- Karten: rund, weicher Schatten, kaum Rand ---------- */
body.chrome-app .card,body.chrome-app .kpi{border-color:var(--karte-rand);border-radius:var(--radius-karte);box-shadow:var(--shadow-karte)}
body.chrome-app .card>.table-wrap:last-child,body.chrome-app .card>.card-foot:last-child{border-end-start-radius:var(--radius-karte);border-end-end-radius:var(--radius-karte)}
body.chrome-app .card>.table-wrap:first-child{border-start-start-radius:var(--radius-karte);border-start-end-radius:var(--radius-karte)}
body.chrome-app .card-foot{border-top-color:var(--karte-linie)}
/* Mehr Luft auf breiten Bildschirmen; bei 1366 x 768 bleiben Übersicht, Schnellrechnung und Verwaltung ohne Scrollen (gemessen). */
@media (min-width:1440px){body.chrome-app .content{padding:var(--luft) calc(var(--luft) + 6px) 56px}}

/* ---------- Eingabefelder: ruhige graue Fläche, runder, beim Fokus weiß mit blauem Ring ---------- */
body.chrome-app :is(input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=search],input[type=tel],input[type=url],input[type=time],input[type=datetime-local],input[type=month],input:not([type]),select,textarea),
body.chrome-bare :is(input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=search],input[type=tel],input[type=url],input:not([type]),select,textarea){
  border:1px solid var(--feld-rand);border-radius:var(--radius-feld);background-color:var(--feld-bg)}
body.chrome-app :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):hover{border-color:var(--feld-rand-hover)}
body.chrome-app :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,
body.chrome-bare :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus{background-color:var(--panel);border-color:var(--primary);box-shadow:var(--ring);outline:none}
body.chrome-app input[readonly]:not([type=checkbox]):not([type=radio]){background-color:var(--feld-bg-ruhig)}
:root[data-theme=dark] body.chrome-app :is(input:not([type]),input[type=text],input[type=number],input[type=email],input[type=search],input[type=tel],input[type=date],select,textarea):not(:focus){background-color:var(--feld-bg)}

/* ---------- Knöpfe: Pillen. Primär Klarblau, sekundär hellblaue Fläche mit blauem Rand (3:1) ---------- */
body.chrome-app .btn,body.chrome-bare .btn{border-radius:var(--radius-knopf)}
body.chrome-app .btn:not(:is(.btn-primary,.btn-accent,.btn-success,.btn-danger,.btn-ghost,.is-current)):not(.dd-menu .btn):not([aria-disabled=true]):not(:disabled){background:var(--knopf2-bg);border-color:var(--knopf2-rand);color:var(--knopf2-text)}
body.chrome-app .btn:not(:is(.btn-primary,.btn-accent,.btn-success,.btn-danger,.btn-ghost,.is-current)):not(.dd-menu .btn):not([aria-disabled=true]):not(:disabled):hover{background:var(--knopf2-bg-hover)}
body.chrome-app .btn-primary:not(.dd-menu .btn){box-shadow:0 1px 2px rgba(10,88,202,.18),0 4px 12px -4px rgba(10,88,202,.35)}
body.chrome-app .btn-ghost{border-radius:var(--radius-knopf)}
/* Gruppen aus Knöpfen (Segment, Teilen-Knopf): innen gerade Kanten, außen rund */
body.chrome-app :is(.btn-group,.seg,.segment)>.btn:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}
body.chrome-app :is(.btn-group,.seg,.segment)>.btn:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}
body.chrome-app .pill{border-radius:var(--radius-knopf)}
/* Klappmenüs: rund und weich */
body.chrome-app .dd-menu{border-radius:var(--radius-karte);border-color:var(--karte-rand);box-shadow:var(--shadow-lg)}
body.chrome-app .dd-menu :is(.btn,.dd-item){border-radius:var(--radius-feld)}

/* ---------- Kopfleiste: hell, Suchfeld als Pille, Avatar in Markenfarbe ---------- */
@media (min-width:701px){
  body.chrome-app .topbar{background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom-color:transparent;box-shadow:0 1px 0 var(--karte-linie)}
  body.chrome-app .topbar .company-switch>summary{border-radius:var(--radius-knopf);border-color:var(--karte-rand);box-shadow:var(--shadow-xs);padding-inline:6px 12px}
  body.chrome-app .topbar .company-switch>summary>.ico:first-child{border-radius:50%}
  body.chrome-app .topbar .gsearch input[type=search]{border-radius:var(--radius-knopf)}
}
body.chrome-app .topbar .avatar{background:var(--grad-brand);color:#fff;font-weight:700;box-shadow:0 0 0 2px var(--panel),0 2px 6px rgba(10,88,202,.3)}

/* ---------- Seitenleiste (1b): größere Einträge, farbige weiche Symbole, aktive Fläche rund in Markenfarbe ---------- */
body.chrome-app .sidebar{background:var(--sb-bg);border-inline-end-color:var(--sb-line)}
/* Farbe je Hauptpunkt (Zeichen aus icon(): <use href="#i-…">) – Fläche dahinter nur 14 % davon */
body.chrome-app .sidebar{--sb-f:var(--sb-icon)}
body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary):has(>svg use[href="#i-dashboard"]){--sb-f:var(--f-blau)}
body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary):has(>svg use[href="#i-invoice"]){--sb-f:var(--f-indigo)}
body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary):has(>svg use[href="#i-offer"]){--sb-f:var(--f-violett)}
body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary):has(>svg use[href="#i-users"]){--sb-f:var(--f-tuerkis)}
body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary):has(>svg use[href="#i-wallet"]){--sb-f:var(--f-gruen)}
body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary):has(>svg use[href="#i-user-cog"]){--sb-f:var(--f-orange)}
body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary):has(>svg use[href="#i-calendar"]){--sb-f:var(--f-rosa)}
body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary):has(>svg use[href="#i-settings"]){--sb-f:var(--f-schiefer)}
body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary):has(>svg use[href="#i-shield"]){--sb-f:var(--f-schiefer)}
/* Einträge in einer Gruppe tragen die Farbe ihrer Gruppe am Zeichen */
body.chrome-app .sidebar .nav-sec:has(>summary>svg use[href="#i-offer"]){--sb-f:var(--f-violett)}
body.chrome-app .sidebar .nav-sec:has(>summary>svg use[href="#i-users"]){--sb-f:var(--f-tuerkis)}
body.chrome-app .sidebar .nav-sec:has(>summary>svg use[href="#i-wallet"]){--sb-f:var(--f-gruen)}
body.chrome-app .sidebar .nav-sec:has(>summary>svg use[href="#i-user-cog"]){--sb-f:var(--f-orange)}
body.chrome-app .sidebar .nav-sec:has(>summary>svg use[href="#i-calendar"]){--sb-f:var(--f-rosa)}
body.chrome-app .sidebar .nav-sec:has(>summary>svg use[href="#i-settings"]){--sb-f:var(--f-schiefer)}
@media (min-width:701px){
  body.chrome-app .nav{padding:12px 12px 14px;gap:3px}
  body.chrome-app .sidebar .nav-item{min-height:42px;padding:6px 12px 6px 8px;gap:12px;border-radius:var(--radius-feld);font-size:1rem;font-weight:500;color:var(--sb-text)}
  body.chrome-app .sidebar .nav-sec>summary{min-height:44px;padding:6px 12px 6px 8px;gap:12px;border-radius:var(--radius-feld);font-size:1rem;font-weight:600;color:var(--sb-strong)}
  /* Zeichen der Hauptpunkte auf weicher Farbfläche */
  body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary)>.ico:first-child{box-sizing:content-box;width:18px;height:18px;padding:6px;border-radius:10px;color:var(--sb-f);background:color-mix(in srgb,var(--sb-f) var(--sb-f-anteil),transparent);opacity:1}
  body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary):hover>.ico:first-child{color:var(--sb-f)}
  /* Einträge in der Gruppe: eingerückt unter dem Zeichen, Zeichen in Gruppenfarbe ohne Fläche */
  body.chrome-app .sidebar .nav-sec-inhalt{margin:2px 0 6px 21px;padding-inline-start:10px;border-inline-start:2px solid color-mix(in srgb,var(--sb-f) 22%,transparent);gap:2px}
  [dir=rtl] body.chrome-app .sidebar .nav-sec-inhalt{margin:2px 21px 6px 0}
  body.chrome-app .sidebar .nav-sec-inhalt .nav-item{min-height:38px;padding:6px 10px;font-size:.96rem}
  body.chrome-app .sidebar .nav-sec-inhalt .nav-item>.ico{width:17px;height:17px;color:var(--sb-f);opacity:.9}
  body.chrome-app .nav>.nav-item+.nav-sec{margin-top:8px}
  body.chrome-app .nav>.nav-sec+.nav-sec{margin-top:2px}
  body.chrome-app .nav>.nav-sec+.nav-item{margin-top:8px}
  body.chrome-app .sidebar .nav-item:hover,body.chrome-app .sidebar .nav-sec>summary:hover{background:var(--sb-hover)}
  /* Aktiv: runde helle Fläche in Markenfarbe, Zeichen gefüllt */
  body.chrome-app .sidebar .nav-item.active{background:var(--sb-active-bg);color:var(--sb-active-text);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 14%,transparent)}
  body.chrome-app .sidebar .nav>.nav-item.active>.ico:first-child{background:var(--primary);color:#fff}
  body.chrome-app .sidebar .nav-sec-inhalt .nav-item.active>.ico{color:var(--sb-active-icon)}
  body.chrome-app .sidebar .nav-sec[data-aktiv]>summary{color:var(--sb-strong)}
  /* Zähler als weiche Pillen */
  body.chrome-app .sidebar .nav-count{border-radius:var(--radius-knopf);min-width:24px;padding:1px 8px;line-height:20px;font-size:12.5px;font-weight:700;text-align:center}
  /* „+ Neue Rechnung“ und Funktionssuche bleiben beim Scrollen der Leiste oben stehen */
  body.chrome-app:not(.nav-mini) .sidebar .brand-side{position:sticky;top:0;z-index:6;background:var(--sb-bg)}
  body.chrome-app:not(.nav-mini) .sidebar .nav-start{position:sticky;top:var(--topbar-h);z-index:5;background:var(--sb-bg);padding:12px 12px 10px;gap:8px;border-bottom-color:transparent;box-shadow:0 1px 0 var(--sb-line)}
  body.chrome-app .sidebar .nav-neu-haupt{min-height:44px;border-radius:var(--radius-knopf);font-size:1rem}
  body.chrome-app .sidebar .nav-neu-zeile>.nav-neu-haupt:has(+.nav-neu-split){border-start-end-radius:0;border-end-end-radius:0}
  body.chrome-app .sidebar .nav-neu-split>.nav-neu-pfeil{width:46px;border-radius:0 var(--radius-knopf) var(--radius-knopf) 0}
  [dir=rtl] body.chrome-app .sidebar .nav-neu-split>.nav-neu-pfeil{border-radius:var(--radius-knopf) 0 0 var(--radius-knopf)}
  body.chrome-app .sidebar .nav-suche{min-height:40px;border-radius:var(--radius-knopf);background:var(--feld-bg);border-color:var(--sb-line);padding-inline:14px 8px;font-size:.95rem}
  body.chrome-app .sidebar .nav-neu-zeile .nav-neu-liste{border-radius:var(--radius-karte)}
  body.chrome-app .sidebar .nav-neu-l{border-radius:var(--radius-feld);min-height:38px}
  body.chrome-app .sidebar .plan-chip{border-radius:var(--radius-knopf)}
  body.chrome-app .nav-collapse{border-radius:var(--radius-feld)}
}
@media (min-width:901px){
  body.chrome-app.nav-mini .sidebar .nav-item,body.chrome-app.nav-mini .sidebar .nav-sec>summary{justify-content:center;padding:6px}
  body.chrome-app.nav-mini .sidebar .nav-sec-inhalt{margin:0;padding:0;border:0}
  body.chrome-app.nav-mini .sidebar .nav-neu-haupt{border-radius:var(--radius-knopf)}
}

/* ---------- Handy-Blatt (Menü über „Mehr“): dieselben Farbzeichen, weiche Kacheln ---------- */
@media (max-width:700px){
  body.chrome-app .sidebar{border-start-start-radius:24px;border-start-end-radius:24px}
  body.chrome-app .sidebar :is(.nav>.nav-item,.nav-sec>summary)>.ico:first-child{box-sizing:content-box;width:18px;height:18px;padding:6px;border-radius:10px;color:var(--sb-f);background:color-mix(in srgb,var(--sb-f) var(--sb-f-anteil),transparent);opacity:1}
  body.chrome-app .sidebar .nav-item,body.chrome-app .sidebar .nav-sec>summary{border-radius:var(--radius-karte);border-color:var(--karte-rand);box-shadow:var(--shadow-xs);min-height:52px;font-size:1rem}
  body.chrome-app .sidebar .nav-sec-inhalt .nav-item>.ico{color:var(--sb-f)}
  body.chrome-app .sidebar .nav>.nav-item.active>.ico:first-child{background:var(--primary);color:#fff}
  body.chrome-app .sidebar .nav-count{border-radius:var(--radius-knopf)}
  body.chrome-app .sidebar .nav-neu-haupt,body.chrome-app .sidebar .nav-suche{border-radius:var(--radius-knopf)}
  body.chrome-app .sidebar .nav-neu-split>.nav-neu-pfeil{border-radius:0 var(--radius-knopf) var(--radius-knopf) 0}
  body.chrome-app .sheet-konto-i{border-radius:var(--radius-knopf)}
  /* Griff zum Wegwischen (app.js Runde 15 D): Ziehen gehört dem Blatt, nicht dem Seiten-Scrollen */
  body.chrome-app .sheet-kopf{touch-action:none;cursor:grab}
}

/* ---------- Handy (1c): untere Leiste bis 767 px, schrumpfender Kopf, Tippflächen ---------- */
/* Die Leiste gab es bis 700 px; jetzt im ganzen Handy-Bereich (< 768 px). Zwischen 701 und 767 px dieselben Regeln. */
@media (min-width:701px) and (max-width:767px){
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--panel);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar .tab-i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 4px 8px;min-height:56px;border:0;background:none;cursor:pointer;color:var(--muted);font:inherit;font-size:13px;text-decoration:none;line-height:1.1;position:relative}
  .tabbar .tab-i .ico{width:21px;height:21px}
  .tabbar .tab-i.active{color:var(--text);font-weight:600}
  .tabbar .tab-plus{display:flex;align-items:center;justify-content:center}
  .tabbar .tab-neu{align-self:center;width:52px;height:52px;min-height:0;border-radius:50%;background:var(--navy);color:#fff;margin-top:-14px;padding:0;display:flex;align-items:center;justify-content:center}
  .tabbar .tab-neu .ico{width:24px;height:24px}
  .tabbar .tab-plus[open]>.tab-neu .ico{transform:rotate(45deg)}
  body.chrome-app .content{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .sticky-bar{bottom:calc(56px + env(safe-area-inset-bottom))}
  main:has(.pos-table) + .tabbar,main:has(.sr2) + .tabbar{display:none}
  main.content:has(.pos-table),main.content:has(.sr2){padding-bottom:20px}
  main:has(.pos-table) .sticky-bar{bottom:0}
  .tabbar .tab-plus-menu{position:fixed;inset-inline:8px;bottom:calc(72px + env(safe-area-inset-bottom));top:auto}
}
@media (max-width:767px){
  body.chrome-app .tabbar{background:color-mix(in srgb,var(--panel) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:0;border-start-start-radius:20px;border-start-end-radius:20px;box-shadow:0 -1px 0 var(--karte-linie),0 -8px 24px -12px rgba(20,45,90,.25)}
  /* Nicht gewählte Ziele grau wie die Beschriftung – die allgemeine Linkfarbe im Dunkeln machte sie hellblau (sahen gewählt aus) */
  body.chrome-app .tabbar a.tab-i:not(.active){color:var(--muted)}
  body.chrome-app .tabbar .tab-i>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.chrome-app .tabbar .tab-neu{box-shadow:0 6px 16px -4px rgba(10,88,202,.55),0 0 0 4px var(--panel)}
  body.chrome-app .tabbar .tab-plus-menu{border-radius:var(--radius-karte)}
  /* Kopf schrumpft beim Scrollen: Die Leiste klebt 8 px über dem Rand – dadurch wird sie beim Scrollen
     flacher, ohne dass sich die Höhe im Seitenfluss ändert (kein Springen des Inhalts). Schatten kommt per Skript (body.kopf-klein). */
  body.chrome-app .topbar{top:-8px;padding-top:14px;padding-bottom:6px;min-height:64px;transition:box-shadow var(--t-normal) var(--ease),background var(--t-normal) var(--ease)}
  body.chrome-app.kopf-klein .topbar{box-shadow:0 1px 0 var(--karte-linie),0 6px 18px -10px rgba(20,45,90,.28);background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  body.chrome-app .topbar>:is(.btn,details>summary.btn){min-height:44px;min-width:44px}
  body.chrome-app .topbar .company-switch>summary{border-radius:var(--radius-knopf)}
  /* Ruhiges Scrollen: kein Gummiband-Durchreichen an Klappmenüs, kein Nachzucken durch Fokus-Sprung */
  body.chrome-app{overscroll-behavior-y:none}
  body.chrome-app :is(.dd-menu,.nav-neu-liste,.tab-plus-menu){overscroll-behavior:contain}
  /* Tippflächen ≥ 44 px für Reiter, Filter-Pillen, Zeilen-Knöpfe */
  body.chrome-app :is(.tab,.pill,.chip,.seg>*,.btn-sm,.card-head a.btn,.page-actions .btn){min-height:44px}
  body.chrome-app .pill{display:inline-flex;align-items:center}
  body.chrome-app .content :is(.btn,.btn-sm){min-height:44px}
  body.chrome-app .content details>summary{min-height:44px}
  body.chrome-app :is(.ue-chip,.chip>a,.sr-typ-k,.sr-abbrechen,.ue-g-l){min-height:44px;display:inline-flex;align-items:center}
  /* Kleine (?)-Zeichen: unsichtbar vergrößerte Trefferfläche (44 px), ohne dass sich die Zeile verschiebt */
  body.chrome-app .hint{position:relative}
  body.chrome-app .hint::before{content:"";position:absolute;inset:-15px}
  body.chrome-app .content{padding-inline:16px}
  /* Listen-Karten (Belege, Kontakte, Zahlungen, Ausgaben, Produkte): jede Zeile eine eigene runde Karte */
  body.chrome-app .table:has(td.z-titel) tbody tr{border-radius:var(--radius-karte)}
}
@media (max-width:700px){
  body.chrome-app .card:has(>.table-wrap .table td.z-titel),body.chrome-app .card:has(>.table td.z-titel){overflow:visible;background:none;border-color:transparent;box-shadow:none}
  /* Die Zeilen sind schon Karten – ein zweiter Rahmen darum wäre doppelt */
}
/* Wer Bewegung reduziert, bekommt keine Übergänge am Kopf */
@media (prefers-reduced-motion:reduce){body.chrome-app .topbar{transition:none}}

/* ---------- Anmeldeseiten (bare): Karte rund ---------- */
body.chrome-bare .bare-box{border-radius:var(--radius-lg)}
/* === Ende Runde 15 D === */

/* === Runde 15 R: Schnell | Ausführlich, Eingabeart, Leistungszeitraum (views/schnellrechnung.php, views/beleg_edit.php, Einstellungen → Belege) === */
.ansicht-wahl .sr-typ-k{display:inline-flex;align-items:center;gap:6px;min-height:32px}
.ansicht-wahl button.sr-typ-k{border:0;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--text);cursor:pointer}
.ansicht-wahl button.sr-typ-k:hover{background:var(--gray-50)}
.ansicht-wahl button.sr-typ-k:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.ansicht-wahl .sr-typ-k .ico{width:15px;height:15px}
.page-actions .ansicht-wahl{order:-1}
.sr-eingabe-wahl{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.sr-eingabe-wahl .dd-kopf{font-size:14px;color:var(--muted);padding:2px 10px 4px}
.sr-eingabe-wahl .dd-item[aria-pressed=false] .ico{visibility:hidden}
.sr-eingabe-wahl .dd-item[aria-pressed=true]{font-weight:600;color:var(--primary-700)}
.sr-tabelle.sr-noch-leer .sr-pos-table{display:none}
.sr-leistung2{margin-top:10px}
.sr-leistung2-zeile{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.sr-leistung2-zeile input[type=date]{width:auto;flex:1 1 140px;min-width:0}
.sr-leistung2-zeile .range-sep{color:var(--muted);font-size:14px}
.sr-zeitraum-auf{display:inline-flex;white-space:nowrap;flex:0 0 auto;margin:0}
.belege-einst .einst-wahl{display:flex;flex-wrap:wrap;gap:8px}
.belege-einst fieldset{border:0;padding:0;margin:0 0 16px}
.belege-einst legend{font-weight:600;margin-bottom:6px}
:root[data-theme=dark] .sr-eingabe-wahl .dd-item[aria-pressed=true]{color:#cfe2ff}
/* Rechnungs- und Leistungsdatum deutlich nebeneinander (Schnellrechnung rechts, voller Editor vorne), am Handy untereinander */
.sr-daten{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0 10px;align-items:start}
.sr-daten>.field{margin-top:0}
.sr-daten .sr-leistung2{margin-top:0}
.sr-daten .sr-leistung2-zeile input[type=date]{flex:1 1 120px}
.sr-daten .sr-leistung2[data-zeitraum="1"]{grid-column:1/-1}
.leistung-feld .range{flex-wrap:wrap;align-items:center}
.leistung-feld .range input[type=date]{min-width:0}
.leistung-feld .quick{margin-top:6px}
@media (max-width:600px){
  .page-actions .ansicht-wahl{flex:1 1 100%;justify-content:stretch}
  .page-actions .ansicht-wahl .sr-typ-k{flex:1;justify-content:center;min-height:40px}
}
/* === Ende Runde 15 R === */

/* === Runde 15 G: letzte Befunde vor dem Paket (Web) – Mahnungen-Karte, Tour, Admin-E-Mails, Hinweise über der Leiste, Tippflächen, Schnellrechnung === */
/* N1: Mahnungen-Zeile – Text darf umbrechen, Knöpfe bleiben in der Karte, Beträge brechen nicht */
#mahnungen .timeline li.r15g-mahn{flex-wrap:wrap;align-items:flex-start;row-gap:4px}
.r15g-mahn-text{flex:1 1 150px;min-width:0;overflow-wrap:anywhere}
.r15g-mahn-text .sub{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.r15g-mahn-akt{display:inline-flex;align-items:center;gap:2px;margin-inline-start:auto;flex:0 0 auto}
.r15g-mahn-akt form.inline{display:inline-flex}
/* N1: Die klebende Leiste reicht mit negativem Rand bis an den Seitenrand. Bei 901–1100 px ist der Innenabstand 20 statt 24 px –
   die Leiste stand 4 px über (Editor-Entwurf bei 1024: scrollWidth 1028). Ab 1440 px ist er größer; dort gleich weit ziehen. */
@media (min-width:901px) and (max-width:1100px){.sticky-bar{margin-inline:-20px;padding-inline-start:20px;padding-inline-end:20px}}
@media (min-width:1440px){body.chrome-app .sticky-bar{margin-inline:calc(-1 * (var(--luft) + 6px));padding-inline-start:calc(var(--luft) + 6px);padding-inline-end:calc(var(--luft) + 6px)}}
/* N3: Einführung – × oben rechts (44er Trefferfläche, optisch klein), Text läuft nicht unter das ×; ohne freie Stelle kleinere Karte am Rand */
.hilfe-tour>p{padding-inline-end:30px}
.hilfe-tour .hilfe-tour-zu{position:absolute;top:2px;inset-inline-end:2px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;border-radius:10px}
.hilfe-tour .hilfe-tour-zu:hover,.hilfe-tour .hilfe-tour-zu:focus-visible{color:var(--text);background:var(--hover,rgba(0,0,0,.05))}
@media (min-width:768px){
  .hilfe-tour.auf-seite{position:absolute;z-index:19;max-width:none}
  .hilfe-tour.im-fluss{position:relative;z-index:auto;max-width:none;margin:0 0 14px;box-shadow:none;scroll-margin-top:calc(var(--topbar-h, 64px) + 12px)}
}
/* N4: E-Mail in engen Spalten – Umbruch nur am @, zu lange Teile enden mit … (title zeigt die ganze Adresse) */
.r15g-mail{display:inline;max-width:100%;overflow-wrap:normal;word-break:normal}
.r15g-mail>span{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* N8: Tippflächen am Touch-Gerät – das (?) neben Feldbeschriftungen bleibt optisch 13 px, sein Kasten ist 44 × 44 (Innenabstand,
   durch negativen Rand ausgeglichen: Zeile und Nachbarn verschieben sich nicht); „Hinweis anzeigen“ (ⓘ) 44 statt 32 px breit */
@media (max-width:900px),(pointer:coarse){
  a.hint{padding:15.5px;margin:-15.5px;box-sizing:content-box}
  .tabs>a.hint{padding:15.5px 4px;margin-block:-15.5px;margin-inline:-8px 0}
  .i-tip>summary{min-width:44px;min-height:44px;margin-inline:-6px}
}
/* N9: Schnellrechnung, rechte Spalte (320 px) – Feld und Chips einer Reihe brechen um, statt das Feld auf „Deuts“ zu quetschen;
   zu hoch fürs Fenster (Mehr Optionen offen) → sie haftet nicht mehr, sondern scrollt mit (Skript setzt r15g-lang) */
.sr-reihe{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px}
.sr-reihe>.field{flex:1 1 130px;min-width:0;margin:0}
.sr-reihe>.sr-chips{flex:0 1 auto;min-width:0}
.sr-rechts.r15g-lang{position:static}
/* N11: Einstellungen → Belege – „Positionen eingeben“: zwei beschriftete Zeilen (Unternehmen / eigene Wahl), Hinweis bei Abweichung */
.r15g-eingabe .r15g-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 10px}
.r15g-eingabe .r15g-zeile-l{flex:0 0 190px;font-weight:600;font-size:.92rem;margin:0}
.r15g-eingabe .r15g-zeile select{flex:0 1 300px;min-width:0;width:auto}
.r15g-eingabe .r15g-weicht{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 10px;font-size:.9rem}
@media (max-width:700px){.r15g-eingabe .r15g-zeile-l{flex-basis:100%}.r15g-eingabe .r15g-zeile select{flex:1 1 100%}}
td.z-kunde a .r15g-mail>span{text-decoration:underline;text-underline-offset:2px}
/* === Ende Runde 15 G === */

/* === Runde 16 geld: Befunde Geld – DATEV-Einstellungen nur lesen (Buchhaltung), Mahnkasten nach der letzten Stufe === */
.r16g-nurlesen{border:0;padding:0;margin:0;min-width:0}
.r16g-nurlesen[disabled] input,.r16g-nurlesen[disabled] select{opacity:1;cursor:default}
.r16g-nurlesen-hinweis{margin:0 0 12px;font-size:.9rem}
/* === Ende Runde 16 geld === */
/* === Runde 16 team: Hinweise nach Arbeitszeitgesetz an erfassten Zeiten, Überschneidungen (views/zeiten.php, app/team_r16.php) === */
.r16-arbzg-liste{display:block;flex-basis:100%;width:100%}
.r16-arbzg-liste:empty{display:none}
.tr8-blatt td[data-tr8-feld=hinweis]{flex-wrap:wrap}
.r16-arbzg{display:block;margin-top:3px;font-size:.875rem;line-height:1.35;color:var(--muted);max-width:42ch}
.r16-arbzg.is-ernst{color:#7a5200;padding-left:8px;border-left:3px solid var(--amber)}
.r16-arbzg.r16-doppelt{color:#9b2626;border-left-color:var(--red)}
.badge.r16-arbzg,.badge.r16-doppelt{display:inline-block;margin-top:0;max-width:none;padding-left:8px;border-left:0}
.r16-arbzg-summe{display:flex;gap:10px;align-items:flex-start}
.tr-nachweis-name{margin:6px 0 10px;font-weight:600}
:root[data-theme=dark] .r16-arbzg.is-ernst{color:#f3d9a4}
:root[data-theme=dark] .r16-arbzg.r16-doppelt{color:#f5b4b4}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .r16-arbzg.is-ernst{color:#f3d9a4}:root:not([data-theme=light]) .r16-arbzg.r16-doppelt{color:#f5b4b4}}
@media (max-width:700px){.r16-arbzg{max-width:none}}
/* === Ende Runde 16 team === */
/* === Runde 16 seo: Verwaltung → SEO (views/parts/admin_seo.php) – Ampel, Anleitung, Seiten und Texte mit Vorschau, Weiterleitungen === */
.seo-kopie{display:flex;gap:8px;align-items:center}
.seo-kopie input{flex:1;min-width:0}
.seo-anleitung{display:grid;gap:18px;margin-top:8px}
.seo-anleitung h3{font-size:.98rem;margin:0 0 6px}
.seo-anleitung ol{margin:0;padding-left:18px;font-size:.9rem;line-height:1.6}
@media (min-width:900px){.seo-anleitung{grid-template-columns:1fr 1fr}}
.seo-sprachen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.seo-sprachen a{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid var(--line);border-radius:99px;text-decoration:none;font-size:.85rem;font-weight:600}
.seo-sprachen .fm-chip.active{background:var(--akzent-text,#0a58ca);color:#fff;border-color:transparent}
.seo-gruppe{font-size:.95rem;margin:18px 0 8px}
.seo-zeile{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel)}
.seo-zeile>summary{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;list-style:none}
.seo-zeile>summary::-webkit-details-marker{display:none}
.seo-z-name{display:flex;flex-direction:column;min-width:0}
.seo-z-name .mono{font-size:.8rem;word-break:break-all}
.seo-z-werte{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.seo-z-werte .zeichen{margin-inline-start:0}
.seo-noindex>summary .seo-z-name b{color:var(--muted)}
.seo-z-inhalt{padding:4px 14px 14px;border-top:1px solid var(--line)}
.seo-z-hinweise{margin:10px 0}
.seo-z-inhalt .serp{margin:10px 0 12px;max-width:640px}
.seo-wl-neu{display:grid;gap:10px;padding:12px 14px;align-items:end}
@media (min-width:720px){.seo-wl-neu{grid-template-columns:1fr 1fr auto}}
.seo-wl-neu .field{margin:0}
.seo-bild{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.seo-bild form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seo-bild input[type=file]{max-width:100%}
/* === Ende Runde 16 seo === */
/* === Runde 16 X: Abschluss – DATEV-Einstellungen sichtbar nur lesbar, Freischalten mit Paketwahl, Urlaub über dem Rest === */
.r16g-nurlesen[disabled] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:var(--feld-bg-ruhig);border-style:dashed;cursor:not-allowed;box-shadow:none}
.r16g-nurlesen[disabled] ::placeholder{color:transparent}
.r16g-nurlesen[disabled] .field.check,.r16g-nurlesen[disabled] .field.check label{cursor:not-allowed}
.r16x-frei{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.r16x-frei .r16x-frei-plan{width:auto;min-height:32px;padding:4px 28px 4px 8px;font-size:.88rem}
.r16x-urlaub-ueber{margin:8px 0 0;display:flex;gap:6px;align-items:flex-start}
/* Meldung mit Knopf (flash_aktion): Text über die ganze Breite, der Knopf darunter rechts – vorher drückte ein langer Text den Knopf in eine schmale Spalte und wurde nach 200 px abgeschnitten */
.toasts .toast:has(.toast-aktion){flex-wrap:wrap;max-height:480px}
.toasts .toast:has(.toast-aktion)>span{flex:1 1 calc(100% - 44px);min-width:0;order:1}
.toasts .toast:has(.toast-aktion)>.flash-x{order:2}
.toasts .toast:has(.toast-aktion)>.toast-aktion{order:3;margin-inline-start:auto}
/* SEO-Seitenliste: Pixel-Befunde sind jetzt gelb (auch nur die Marke fällt weg) – Gelb in AA-Kontrast auf Weiß */
.seo-z-hinweise .hinweis.warn{color:#8a5a00}
:root[data-theme=dark] .seo-z-hinweise .hinweis.warn{color:var(--amber)}
/* Schlussrechnung aus E-Rechnung: Wahl „offener Rest / Gesamtbetrag“ wie ein Feld beschriftet, ohne Browser-Rahmen (Formular und Importseite) */
.einv-wahl{border:0;margin:0 0 6px;padding:0;min-width:0}
.einv-wahl>legend{padding:0;margin-bottom:6px;font-size:.85rem;font-weight:500;color:var(--text)}
/* === Ende Runde 16 X === */
/* === Runde 17 B: Belegseite kompakt (views/beleg.php) – Bereiche zuklappbar mit Stand im Kopf, Handy: wichtige Bereiche oben, ⋯-Menü mit Versenden/Bearbeiten/Umwandeln, Umwandeln kurz === */
.r17b-seite details.card>summary.card-head{gap:10px}
.r17b-seite details.card>summary.card-head h2{flex:0 1 auto;min-width:0;margin-inline-end:auto}
.r17b-seite details.card>summary.card-head::after{margin-inline-start:4px;flex:none}
.r17b-seite .r17b-kurz{color:var(--muted);font-size:.86rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.r17b-seite .r17b-kurz.neg{color:var(--red)}
.r17b-seite details.card:not([open])>summary.card-head{border-bottom-color:transparent}
.r17b-pdf{display:flex;justify-content:flex-end;margin:0 0 10px}
.r17b-tipp-zeile{float:right;margin:6px 0 0 8px}
[dir="rtl"] .r17b-tipp-zeile{float:left;margin:6px 8px 0 0}
/* Umwandeln: Ziel als Wahl nebeneinander, darunter genau eine Zeile Erklärung (die des gewählten Ziels) */
/* Zwei Spalten nur, wo jede Kachel mindestens 200 px hat (Laptop-Menü 432 px innen); im ⋯-Menü am Handy eine Spalte. Lange Wörter brechen um, der Punkt bleibt rund. */
.umwandeln-form .um-ziele{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:6px}
.umwandeln-form .um-ziel{padding:7px 10px;align-items:center;gap:8px;min-height:44px;min-width:0}
.umwandeln-form .um-ziel input{margin-top:0;flex:none}
.umwandeln-form .um-ziel>span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.umwandeln-form .um-ziel.is-gesperrt{grid-column:1/-1;align-items:flex-start}
.umwandeln-form .r17b-um-erkl{display:none;margin:-4px 0 12px}
.umwandeln-form:has(input[name=ziel][value=rechnung]:checked) .r17b-um-erkl[data-ziel=rechnung],
.umwandeln-form:has(input[name=ziel][value=auftragsbestaetigung]:checked) .r17b-um-erkl[data-ziel=auftragsbestaetigung],
.umwandeln-form:has(input[name=ziel][value=lieferschein]:checked) .r17b-um-erkl[data-ziel=lieferschein],
.umwandeln-form:has(input[name=ziel][value=abschlag]:checked) .r17b-um-erkl[data-ziel=abschlag],
.umwandeln-form:has(input[name=ziel][value=schluss]:checked) .r17b-um-erkl[data-ziel=schluss]{display:block}
/* ⋯-Menü: am Telefon stecken die Klappmenüs des Kopfs als Unterpunkte darin (app.js Runde 17 B) */
.r17b-mehr .r17b-sub>summary{list-style:none;cursor:pointer}
.r17b-mehr .r17b-sub>summary::-webkit-details-marker{display:none}
.r17b-mehr .r17b-sub>summary .lbl{display:inline!important}
.r17b-mehr .r17b-sub>summary::after{content:"";width:7px;height:7px;border-inline-end:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);transform:rotate(45deg);margin-inline-start:auto;transition:transform .15s}
.r17b-mehr .r17b-sub[open]>summary::after{transform:rotate(-135deg)}
.r17b-mehr .r17b-sub[open]>summary{background:var(--gray-50)}
.r17b-mehr .r17b-sub>.dd-menu .btn-primary{background:var(--navy);border:1px solid var(--navy);color:#fff;justify-content:center;font-weight:600}
.r17b-mehr .r17b-sub>.dd-menu .btn-primary:hover{background:var(--navy-700)}
.r17b-mehr .r17b-sub>.dd-menu .btn-primary .ico{color:currentColor}
.r17b-mehr .r17b-sub>.dd-menu{position:static;width:auto!important;min-width:0;max-width:none;max-height:none;margin:4px 0 8px;box-shadow:none;border:1px solid var(--line);animation:none;overflow:visible}
/* Dunkel: der Absendeknopf in Umwandeln und den Unterpunkten bleibt gefüllt (sonst nahm ihn :root[data-theme=dark] .dd-menu .btn-primary zurück) */
:root[data-theme=dark] .umwandeln-menu .btn-primary,:root[data-theme=dark] .r17b-mehr .r17b-sub>.dd-menu .btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
@media (prefers-reduced-motion:reduce){.r17b-mehr .r17b-sub>summary::after{transition:none}}
@media (max-width:767px){
  .r17b-seite{display:flex;flex-direction:column;gap:0}
  .r17b-seite>div{display:contents}
  .r17b-seite .r17b-kopf{order:-2}
  .r17b-seite .r17b-wichtig{order:-1}
  .r17b-seite .card{margin-bottom:12px}
  .r17b-seite details.card>summary.card-head{min-height:52px}
}
@media (max-width:600px){
  .page-actions .r17b-mehr>.dd-menu{width:min(380px,calc(100vw - 16px));max-width:calc(100vw - 16px)}
}
/* === Ende Runde 17 B === */
/* === Runde 17 L: Ladezeit – Seiteninhalt sofort sichtbar (LCP), die kleine Bewegung bleibt === */
/* .content blendete 0,22 s lang aus Deckkraft 0 ein. Der Browser zählt den größten Inhalt erst, wenn er sichtbar ist: gemessen
   230 ms später auf jeder Seite der Anwendung, auch aus dem Zwischenspeicher. Jetzt nur noch das Hereinrutschen um 4 px. */
@keyframes pxy-in-l17{from{transform:translateY(4px)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){.content{animation-name:pxy-in-l17}}
/* Suche in Listen: app.js blendet „Suchen“ per toolbar-auto aus (Absenden beim Tippen). Bis das Skript lief, stand der Knopf da und
   die Werkzeugzeile brach um – die Liste sprang danach 185 px nach oben (Belegliste am Rechner, CLS 0,075). Dieselbe Bedingung wie in
   app.js (GET-Formular mit Suchfeld, höchstens ein Absendeknopf), aber schon ab dem ersten Bild. Ohne :has() bleibt es wie bisher. */
html.pxy-js :is(form.toolbar,form.dok-suche):not([method=post i]):has(input[type=search]):not(:has(>button[type=submit]~button[type=submit]))>button[type=submit]{display:none}
/* Sammelleiste: Mit Skript erscheint sie erst, wenn Zeilen gewählt sind (.js.is-aktiv, unten schwebend). Bis app.js lief, stand sie
   als Block über der Liste und verschwand dann – die Liste sprang um ihre Höhe (137 px). Ohne Skript bleibt sie sichtbar wie bisher. */
html.pxy-js .sammel-leiste:not(.is-aktiv){display:none}
/* === Ende Runde 17 L === */
/* === Runde 17 DP: Dienstplan – Verteilung wählen (gemischt / wochenweise / fest), Gesamtstunden mit Abweichung vom Soll === */
.dp17-modi{display:grid;gap:8px}
.dp17-modus{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer}
.dp17-modus input{margin-top:3px;flex:none}
.dp17-modus span{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.dp17-modus small{color:var(--muted);font-size:.875rem}
.dp17-modus:has(input:checked){border-color:var(--akzent-600);background:var(--akzent-50)}
.dp17-ki-titel{margin:4px 0 4px;font-size:.875rem}
.dp17-diff{display:block;font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dp17-diff-minus{color:var(--st-warn,#92400e)}
.dp17-diff-plus{color:var(--red)}
.dp17-unter{display:block;font-size:.875rem;color:var(--muted);font-weight:400}
.dp-raster tr.dp17-gesamt th,.dp-raster tr.dp17-gesamt td,.dp-fair-tabelle tr.dp17-gesamt th,.dp-fair-tabelle tr.dp17-gesamt td{border-top:2px solid var(--line);font-weight:700}
.dp17-gesamt-zeile{display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px 4px;border-top:2px solid var(--line);margin-top:8px;font-weight:700}
.dp17-gesamt-zeile .dp-summe{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 6px;align-items:baseline;text-align:right}
.dp17-gesamt-zeile>span:last-child{flex:none;max-width:55%;text-align:right}
@media (max-width:767px){ .dp17-gesamt-zeile{display:flex} }
/* === Ende Runde 17 DP === */
/* === Runde 17 S: Befunde Sergi-Durchgang Runde 17 – Storno-Ablauf, Belegeditor ohne Sprung, Kalkulation-Kopf, Schnellrechnung am Handy, Woche-Karte === */
/* Belegseite: Ein stornierter Beleg endet mit „Storniert“ (views/beleg.php) – Endpunkt, nicht nächster Schritt */
.step.r17s-storno{color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
/* Belegeditor: Was app.js nach dem Laden ein- oder ausblendet, steht mit pxy-js schon im ersten Bild so da (vorher sprang die Positionskarte
   am Laptop um 121 px nach oben, CLS 0,03–0,04): Zeitraum zu, Anschrift zu, „Neuen Kunden anlegen“/Kurzzeile, Datum-Schnellwahl als Platzhalter. */
html.pxy-js #leistungFeld[data-zeitraum="0"] .zr-teil{display:none}
html:not(.pxy-js) #leistungZeitraum,html:not(.pxy-js) .r17s-vorab,html:not(.pxy-js) .r17s-vorab-kurz{display:none}
html.pxy-js #belegEditor:not(.js-anschrift) .anschrift-feld:not(.is-offen){display:none}
html.pxy-js #belegEditor:not(.js-anschrift) .anschrift-neu.r17s-vorab-neu{display:block}
.r17s-vorab{pointer-events:none}
/* Belegseite: Kalkulation (intern) – Pfeil rechts in der Kopfzeile wie bei den anderen Karten, der Satz darunter über die volle Breite */
.r17b-seite details#kalkulation>summary.card-head{flex-wrap:wrap;row-gap:4px}
.r17b-seite details#kalkulation>summary.card-head>h2{order:0}
.r17b-seite details#kalkulation>summary.card-head::after{order:1}
.r17b-seite details#kalkulation>summary.card-head>small{order:2;flex:1 0 100%;max-width:none;white-space:normal}
/* Schnellrechnung am Handy: Bezeichnung über die ganze Zeile, der ×-Knopf liegt rechts darin (vorher zwei Drittel, daneben 80 px leer) */
@media (max-width:700px){
  .sr-pos-table td.sr-c-bez{grid-column:1/-1;grid-row:1;padding-inline-end:46px}
  .sr-pos-table td.sr-c-weg{grid-column:3;grid-row:1;justify-self:end;align-self:start}
}
/* Übersicht „Diese Woche“: in der schmalen Spalte Wert neben der Beschriftung, Vorwoche darunter; Kopf ohne Umbruch im Titel */
.ue-woche>.card-head{flex-wrap:wrap;row-gap:2px}
.ue-woche>.card-head h2{white-space:nowrap}
.ue-woche>.card-body{container-type:inline-size}
@container (max-width:340px){
  .ue-w-liste li{grid-template-columns:minmax(0,1fr) auto;row-gap:0}
  .ue-w-liste .ue-w-p{grid-column:1/-1;text-align:start}
}
/* === Ende Runde 17 S === */
/* === Runde 18 E01: Touren über Mitternacht, Pause als Stopp, Route in Abschnitten, km-Stand, Kartendienste im Admin (views/tour.php, views/fahrt.php, views/parts/admin_karten.php) === */
.r18-kopf-knoepfe{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tr-stopp.r18-pause{background:var(--bg);border-style:dashed}
.r18-pause .tr-stopp-kopf{align-items:center}
.r18-pause-nr{display:inline-flex;align-items:center;justify-content:center}
.r18-pause-knoepfe{display:inline-flex;gap:2px;margin-left:auto}
.r18-pause-knoepfe form{margin:0}
.r18-pausen{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:14px}
.r18-navi .card-body{display:flex;flex-direction:column;gap:8px}
.r18-abschnitte{display:flex;flex-wrap:wrap;gap:6px}
.r18-km .card-body{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;gap:8px 12px;align-items:end}
.r18-km-feld{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.r18-km-feld input{width:100%;min-height:44px;font-size:16px}
.r18-km-titel{font-weight:600;display:inline-flex;gap:6px;align-items:center;min-height:44px}
.r18-km .card-body>.muted{grid-column:1/-1}
.r18-ruest{display:flex;gap:8px}
.r18-ruest input{width:6em}
.r18-google{margin:12px 0}
.r18-google>summary{cursor:pointer;font-weight:600;padding:6px 0}
.r18-kontingent .r18-zahl{width:7em;text-align:right}
@media (max-width:700px){
  .r18-km .card-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .r18-km-titel,.r18-km .btn{grid-column:1/-1}
}
/* === Ende Runde 18 E01 === */
/* === Runde 18 E02: Gewinnkopf an Tour und Tagesliste, Ampel, Kosten-Reiter (views/tour.php, views/touren.php, views/parts/touren_kosten.php) === */
.r18-punkt{display:inline-block;width:.8em;height:.8em;border-radius:50%;vertical-align:-.05em;background:var(--muted);flex:none}
.r18-punkt-gruen{background:var(--st-ok)}
.r18-punkt-gelb{background:var(--st-warn)}
.r18-punkt-rot{background:var(--st-err)}
.r18-punkt-grau{background:transparent;box-shadow:inset 0 0 0 2px var(--muted)}
.r18-gk-zeile{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:0 0 12px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:var(--radius-sm)}
.r18-gk-zeile.r18-ampel-gruen{border-left-color:var(--st-ok)}
.r18-gk-zeile.r18-ampel-gelb{border-left-color:var(--st-warn)}
.r18-gk-zeile.r18-ampel-rot{border-left-color:var(--st-err)}
.r18-gk-zahl{display:inline-flex;flex-direction:column;min-width:0}
.r18-gk-zahl small{font-size:.8rem;color:var(--muted);line-height:1.2}
.r18-gk-zahl b{font-size:1.05rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.r18-gk-gewinn b{font-size:1.2rem}
.r18-ampel-rot .r18-gk-gewinn b{color:var(--st-err)}
.r18-gk .card-body,.r18-gk{padding:12px 14px}
.r18-gk-hinweise{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.92rem}
.r18-gk-hinweise li{display:inline-flex;gap:6px;align-items:center;color:var(--muted)}
.r18-gk-hinweise li.r18-rot{color:var(--st-err);font-weight:600}
.r18-gk-preise{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 6px;font-size:.92rem;color:var(--muted)}
.r18-gk-preise b{color:var(--text);font-variant-numeric:tabular-nums}
.r18-gk-mehr{margin:0 0 8px}
.r18-gk-tabelle{margin:4px 0}
.r18-gk-tabelle th{font-weight:500;white-space:nowrap}
.r18-gk-tabelle tr.summe th,.r18-gk-tabelle tr.summe td{font-weight:700}
.r18-gk-fuss{font-size:.88rem;margin:4px 0 0}
.r18-gk-form{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:4px 0 0}
.r18-gk-feld{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:var(--muted);min-width:0}
.r18-gk-feld select,.r18-gk-feld input{min-height:44px}
.r18-gk-wert input{width:7.5em;text-align:right}
.r18-tag-geld>span{display:inline-flex;gap:6px;align-items:center}
.r18-gewinn-zelle{white-space:nowrap;font-variant-numeric:tabular-nums}
.r18-einheit{display:flex;gap:6px;align-items:center}
.r18-einheit input{min-width:0;flex:1 1 auto}
.r18-einheit>span{color:var(--muted)}
.r18-einheit select{flex:0 1 auto;width:auto}
.r18-klein{font-size:.88rem;margin:6px 0}
.r18-werte{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}
.r18-werte dt{color:var(--muted)}
.r18-werte dd{margin:0;font-variant-numeric:tabular-nums}
.r18-h3{font-size:1rem;margin:0 0 10px}
.r18-fz-form,.r18-fa-form{border-top:1px solid var(--line)}
@media (max-width:700px){
  .r18-gk-zeile{position:sticky;top:var(--topbar-h);z-index:11;gap:4px 14px;padding:8px 12px;box-shadow:var(--shadow-sm)}
  .r18-gk-zahl b{font-size:1rem}
  .r18-gk-gewinn b{font-size:1.1rem}
  .r18-gk-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  .r18-gk-wert input{width:100%}
  .r18-gk-form .r18-gk-feld:nth-of-type(3),.r18-gk-form .btn{grid-column:1/-1}
  .r18-gk-form .btn{width:100%;justify-content:center}
}
@media (max-width:440px){.r18-gk-zeile .r18-gk-marge{display:none}}
/* === Ende Runde 18 E02 === */
/* === Runde 18 RECHNER: Tourenrechner (views/parts/tourenrechner*.php, views/site/kurier_rechner.php) – Modus-Schalter, kompaktes Raster, Ergebnis mit Ampel === */
.trr-raster{display:grid;gap:16px;align-items:start}
@media (min-width:1100px){.trr-raster.trr-mit-ergebnis{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.trr-form .card-body,.trr-erg .card-body{padding:14px 16px}
.trr-modus{display:grid;grid-template-columns:1fr 1fr;margin:0 0 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden}
.trr-modus-wahl{position:relative;margin:0;cursor:pointer}
.trr-modus-wahl input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.trr-modus-wahl span{display:flex;gap:6px;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;font-weight:600;color:var(--text);background:var(--panel);text-align:center}
.trr-modus-wahl+.trr-modus-wahl span{border-left:1px solid var(--line-strong)}
.trr-modus-wahl input:checked+span{background:var(--navy);color:#fff}
.trr-modus-wahl input:focus-visible+span{outline:2px solid var(--navy);outline-offset:-4px;box-shadow:inset 0 0 0 4px #fff}
.trr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px 12px}
.trr-grid .field{margin:0;min-width:0}
.trr-grid .trr-breit{grid-column:1/-1}
.trr-grid textarea{width:100%}
.trr-form:has(#trr_m_preis:checked) .trr-nur-fest{display:none}
.trr-nur-fest input{font-weight:700}
.trr-mehr{margin:12px 0 0}
.trr-mehr>.trr-grid{margin-top:10px}
.trr-check label{display:flex;gap:8px;align-items:center;min-height:44px;margin-top:18px}
.trr-fehler{color:var(--st-err)}
.trr-hat-fehler input{border-color:var(--st-err)}
.trr-los{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.trr-erg{border-left:4px solid var(--muted)}
.trr-erg.r18-ampel-gruen{border-left-color:var(--st-ok)}
.trr-erg.r18-ampel-gelb{border-left-color:var(--st-warn)}
.trr-erg.r18-ampel-rot{border-left-color:var(--st-err)}
.trr-kopf,.trr-zeile{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:flex-end}
.trr-kopf{margin:0 0 10px}
.trr-zeile{padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 10px}
.trr-zahl{display:flex;flex-direction:column;min-width:0}
.trr-zahl small{font-size:.8rem;color:var(--muted);line-height:1.2}
.trr-zahl b{font-size:1.05rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.trr-zahl.trr-gross b{font-size:1.6rem;line-height:1.2}
.trr-urteil{display:flex;gap:8px;align-items:center;font-size:1.15rem;width:100%}
.trr-urteil .r18-punkt{width:1em;height:1em}
.r18-ampel-rot .trr-urteil b,.r18-ampel-rot .trr-gross b{color:var(--st-err)}
.trr-preise{margin:0 0 8px}
.trr-preise th[scope=row]{font-weight:500}
.trr-uebernehmen{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:12px 0 0}
.trr-uebernehmen .r18-gk-feld select{min-height:44px}
.trr-adr,.trr-hinweis-marke{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.92rem;color:var(--muted)}
.trr-adr{margin:0 0 10px}
.trr-hinweis-marke{margin:12px 0 0}
.trr-rot{color:var(--st-err)}
@media (max-width:700px){
  .trr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .trr-uebernehmen{display:grid;grid-template-columns:minmax(0,1fr)}
  .trr-uebernehmen .btn{width:100%;justify-content:center}
  .trr-zahl.trr-gross b{font-size:1.35rem}
  .trr-los .btn-primary{flex:1 1 auto;justify-content:center}
}
/* === Ende Runde 18 RECHNER === */
/* === Runde 18 E03: Planbrett Tag – Zeitleiste je Fahrer, Offen/Nicht eingeplant, rechte Leiste bzw. Blatt von unten, Dialog „+ Tour“ (views/parts/planbrett*.php, assets/planbrett.js) === */
.pb{position:relative}
.pb-meldung{margin:0 0 10px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--primary-50);border:1px solid var(--line);font-size:.92rem}
.pb-zahlen{flex-wrap:wrap}
.pb-zahlen>span,.pb-zahlen>a{font-size:14px}
.pb-zahlen>a{text-decoration:none;color:inherit}
.pb-konf-link{cursor:pointer}
.pb-haupt{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.pb-mit-leiste .pb-haupt{grid-template-columns:minmax(0,1fr) 360px}
.pb-brett{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.pb-zeile{display:grid;grid-template-columns:170px minmax(0,1fr);border-bottom:1px solid var(--line)}
.pb-zeile:last-child{border-bottom:0}
.pb-label{padding:6px 10px;font-size:14px;line-height:1.3;min-width:0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.pb-label b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-std{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-sub{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-warn{color:var(--st-err);font-weight:600}
.pb-skala-zeile .pb-label{border-right:1px solid var(--line)}
.pb-skala{position:relative;height:26px}
.pb-skala span{position:absolute;top:4px;font-size:14px;color:var(--muted);padding-left:3px;border-left:1px solid var(--line-strong);line-height:1.2}
.pb-spur{position:relative;min-height:calc(var(--lanes,1) * 44px + 8px);background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px calc(100% / 24));touch-action:pan-y}
.pb-abwesend .pb-spur,.pb-nein{background-image:repeating-linear-gradient(45deg,var(--line-strong) 0 2px,transparent 2px 8px)}
.pb-nein{position:absolute;top:0;bottom:0}
.pb-schicht{position:absolute;top:0;bottom:0;background:var(--gray-50);border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong)}
.pb-ruhe{position:absolute;top:4px;height:36px;display:flex;align-items:center;padding:0 4px;font-size:14px;color:var(--st-err);white-space:nowrap;overflow:hidden;background:repeating-linear-gradient(45deg,var(--red-50) 0 4px,transparent 4px 8px);border:1px dashed var(--st-err);border-radius:6px}
.pb-block{position:absolute;top:calc(4px + var(--lane,0) * 44px);height:40px;box-sizing:border-box;min-width:6px;padding:2px 6px;display:flex;flex-direction:column;justify-content:center;gap:0;overflow:hidden;
  background:var(--primary-50);border:1px solid var(--line-strong);border-left:4px solid var(--muted);border-radius:6px;color:var(--text);text-decoration:none;font-size:14px;line-height:1.2;cursor:pointer;z-index:1}
.pb-block:hover,.pb-block:focus-visible{box-shadow:0 0 0 2px var(--primary);z-index:3}
.pb-block[data-zieh]{cursor:grab;touch-action:none}
.pb-b-name,.pb-b-info{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-b-name{font-weight:600}
.pb-b-info{color:var(--muted);font-variant-numeric:tabular-nums}
.pb-ampel-gruen{border-left-color:var(--st-ok)}
.pb-ampel-gelb{border-left-color:var(--st-warn)}
.pb-ampel-rot{border-left-color:var(--st-err)}
.pb-konflikt{border-color:var(--st-err);border-width:2px;border-left-width:4px}
.pb-geschaetzt{border-style:dashed;border-left-style:solid}
.pb-status-fertig{opacity:.7}
.pb-gesperrt{cursor:default}
.pb-aktiv{box-shadow:0 0 0 2px var(--primary);z-index:4}
.pb-fort{position:absolute;left:0;bottom:0;height:3px;background:var(--st-ok)}
.pb-griff-ende{position:absolute;right:0;top:0;bottom:0;width:10px;cursor:ew-resize}
.pb-zieht{opacity:.9;z-index:6;box-shadow:var(--shadow-lg);cursor:grabbing;overflow:visible}
.pb-zieht::after{content:attr(data-zeit);position:absolute;top:-2px;right:4px;font-size:14px;font-weight:700;color:var(--primary)}
.pb-ziel{background-color:var(--primary-50)}
.pb-offen .pb-label b{color:var(--st-warn)}
.pb-chips{display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px;min-height:44px;align-items:center}
.pb-chip{display:inline-flex;flex-direction:column;gap:0;padding:4px 10px;border:1px dashed var(--line-strong);border-radius:6px;font-size:14px;color:var(--text);text-decoration:none;line-height:1.25}
.pb-chip span{color:var(--muted)}
.pb-chip-rot{border-color:var(--st-err)}
.pb-liste,.pb-warntext,.pb-fuss{display:none}
.pb-leiste{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;position:sticky;top:calc(var(--topbar-h) + 8px);max-height:calc(100vh - var(--topbar-h) - 16px);overflow:auto;font-size:.92rem}
.pb-leiste .r18-gk-zeile{position:static;margin:8px 0;box-shadow:none}
.pb-l-kopf{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.pb-l-kopf .strong{font-size:1.05rem}
.pb-l-sub{display:block;color:var(--muted);font-variant-numeric:tabular-nums}
.pb-l-dauer{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pb-l-titel{font-size:.95rem;margin:12px 0 4px}
.pb-l-liste{list-style:none;margin:0;padding:0}
.pb-l-liste li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;padding:6px 0;border-top:1px solid var(--line)}
.pb-l-knoepfe{display:flex;flex-wrap:wrap;gap:6px}
.pb-l-liste small{color:var(--muted);font-size:14px}
.pb-f-nein{opacity:.65}
.pb-f-warn small:first-of-type{color:var(--st-err)}
.pb-l-schritte{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0}
.pb-l-schritte .btn{min-width:64px;min-height:44px;justify-content:center;font-variant-numeric:tabular-nums}
.pb-l-schritte span{font-weight:700;font-variant-numeric:tabular-nums}
.pb-l-wahl{margin:6px 0 0}
.pb-l-wahl select{width:100%}
.pb-l-aktionen{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.pb-dialog{max-width:760px;max-height:calc(100vh - 32px);overflow:auto}
.pb-reiter{overflow-x:auto;margin:6px 0 0}
.pb-reiter button.tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;font:inherit;cursor:pointer;box-shadow:none}
.pb-reiter button.tab.active{border-bottom-color:currentColor}
.pb-teil{margin:12px 0 0}
.pb-js .pb-teil:not(.aktiv){display:none}
@media (max-width:1100px){.pb-mit-leiste .pb-haupt{grid-template-columns:minmax(0,1fr) 320px}.pb-zeile{grid-template-columns:130px minmax(0,1fr)}}
@media (max-width:767px){
  .pb{padding-bottom:72px}
  .pb-mit-leiste .pb-haupt,.pb-haupt{display:block}
  .pb-brett{background:transparent;border:0;overflow:visible}
  .pb-zeile.pb-skala-zeile{display:none}
  .pb-zeile{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;margin:0 0 10px}
  .pb-zeile:last-child{border-bottom:1px solid var(--line)}
  .pb-label{border:0;padding:0 0 6px;flex-direction:row;flex-wrap:wrap;gap:2px 10px;align-items:baseline;font-size:.95rem}
  .pb-spur{min-height:16px;height:16px;border-radius:4px;background-color:var(--gray-50);background-image:repeating-linear-gradient(to right,var(--line-strong) 0 1px,transparent 1px calc(100% / 8))}
  .pb-block{top:2px;height:12px;padding:0;border-width:0;border-left-width:0;border-radius:3px;background:var(--primary);min-width:4px}
  .pb-block>*{display:none}
  .pb-block.pb-ampel-rot,.pb-block.pb-konflikt{background:var(--st-err)}
  .pb-block.pb-ampel-gelb{background:var(--st-warn)}
  .pb-block.pb-ampel-gruen{background:var(--st-ok)}
  .pb-zieht{height:14px;outline:2px solid var(--primary)}
  .pb-ruhe{top:2px;height:12px;padding:0}
  .pb-ruhe span{display:none}
  .pb-liste{display:block;list-style:none;margin:6px 0 0;padding:0}
  .pb-liste a{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center;min-height:44px;padding:6px 0;border-top:1px solid var(--line);color:var(--text);text-decoration:none;font-size:.95rem}
  .pb-liste a span{color:var(--muted);font-variant-numeric:tabular-nums}
  .pb-liste a .r18-gewinn-zelle{margin-left:auto;color:var(--text)}
  .pb-l-konflikt b{color:var(--st-err)}
  .pb-warntext{display:block;margin:6px 0 0;color:var(--st-err);font-weight:600;font-size:.92rem}
  .pb-chips{padding:0;flex-direction:column;align-items:stretch}
  .pb-leiste{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;max-height:78vh;border-radius:16px 16px 0 0;border-bottom:0;box-shadow:var(--shadow-lg);padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  .pb-mit-leiste .pb-fuss{display:none}
  .pb-fuss{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);box-shadow:var(--shadow-lg);font-size:.95rem}
  .pb-plus{min-width:48px;min-height:48px;border-radius:50%;justify-content:center}
  .pb-dialog{width:calc(100% - 16px);padding:16px}
}
/* === Ende Runde 18 E03 === */
/* === Runde 18 E04: Arbeitsblöcke und Konflikte (Stufen rot/gelb/§ 9), Veröffentlichen mit „Trotzdem“ + Grund, Reiter Woche und Monat (views/parts/planbrett*.php, views/parts/touren_woche.php, views/parts/touren_monat.php) === */
.pb-gelb{color:var(--st-warn);font-weight:600}
.pb-info{color:var(--muted)}
.pb-hinweis{border-color:var(--st-warn);border-width:2px;border-left-width:4px}
.pb-pub{display:flex;justify-content:flex-end;margin:0 0 8px;position:relative}
.pb-pub .btn,.pb-pub .btn b{font-size:14px}
.pb-pub-trotzdem>summary{list-style:none;cursor:pointer}
.pb-pub-trotzdem>summary::-webkit-details-marker{display:none}
.pb-pub-trotzdem[open]>summary{box-shadow:0 0 0 2px var(--st-err)}
.pb-pub-box{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(360px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.pb-pub-box p{margin:0}
.pb-pub-box ul{margin:0;padding-left:18px}
.pb-pub-box input[type=text]{width:100%}
.tw-titel{margin-left:6px;font-variant-numeric:tabular-nums;align-self:center}
.tw-zahlen{flex-wrap:wrap}
.tw-zahlen>span,.tw-zahlen>a{font-size:14px}
.tw-zahlen>a{text-decoration:none}
.tw-woche{table-layout:fixed;min-width:860px}
.table.tw-woche th,.table.tw-monat thead th{font-size:14px;text-transform:none;letter-spacing:0}
.table.tw-woche tbody th{background:transparent;color:var(--text);padding:8px 12px}
.tw-woche small{font-size:inherit}
.tw-woche th:first-child{width:150px}
.tw-woche th.num,.tw-woche td.num{width:62px}
.tw-woche thead th a{color:inherit;text-decoration:none;white-space:nowrap}
.tw-woche thead th a span{color:var(--muted);font-weight:400}
.tw-heute,.tw-heute a{color:var(--primary)}
.tw-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.tw-zelle{padding:4px 6px}
.tw-zelle a{text-decoration:none!important;display:flex;flex-direction:column;gap:3px;min-height:40px;justify-content:center;color:var(--text);border-radius:6px;padding:2px 4px}
.tw-zelle a:hover,.tw-zelle a:focus-visible{background:var(--primary-50)}
.tw-mini{position:relative;display:block;height:8px;border-radius:3px;background:var(--gray-50)}
.tw-mini i{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--primary)}
.tw-mini i.tw-b-schicht{background:var(--line-strong);top:2px;bottom:2px}
.tw-mini i.pb-ampel-rot{background:var(--st-err)}
.tw-mini i.pb-ampel-gelb{background:var(--st-warn)}
.tw-mini i.pb-ampel-gruen{background:var(--st-ok)}
.tw-h{font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}
.tw-rot a{box-shadow:inset 0 0 0 2px var(--st-err);background:var(--red-50)}
.tw-gelb a{box-shadow:inset 0 0 0 1px var(--st-warn);background:var(--amber-50)}
.tw-abw .tw-mini{background-image:repeating-linear-gradient(45deg,var(--line-strong) 0 2px,transparent 2px 6px)}
.tw-abw .tw-h{color:var(--muted)}
.tw-delta{font-variant-numeric:tabular-nums}
.tw-minus{color:var(--st-err);font-weight:600}
.tw-plus{color:var(--st-warn);font-weight:600}
.tw-woche tfoot th,.tw-woche tfoot td{font-size:14px;font-variant-numeric:tabular-nums;color:var(--muted)}
.tw-woche tfoot th{text-align:left;font-weight:600}
.tw-geld{white-space:nowrap;color:var(--text)}
.tw-handy{display:none}
.tw-karte{margin-bottom:12px}
.tw-schwach li a{color:var(--text);text-decoration:none;font-weight:600}
.tw-schwach li{padding:8px 12px}
@media (max-width:767px){
  .tw-karte .tw-woche{display:none}
  .tw-karte:has(.tw-woche){display:none}
  .tw-handy{display:block;list-style:none;margin:0;padding:0}
  .tw-handy>li{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;margin:0 0 10px}
  .tw-h-kopf{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
  .tw-h-kopf span{font-variant-numeric:tabular-nums}
  .tw-h-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:8px 0 0}
  .tw-h-tage a{display:flex;flex-direction:column;align-items:center;min-height:44px;justify-content:center;border:1px solid var(--line);border-radius:6px;color:var(--text);text-decoration:none;font-size:14px;font-variant-numeric:tabular-nums}
  .tw-h-tage a span{color:var(--muted)}
  .tw-h-tage a.tw-rot{border-color:var(--st-err);border-width:2px;background:var(--red-50)}
  .tw-h-tage a.tw-gelb{border-color:var(--st-warn);background:var(--amber-50)}
  .tw-h-tage a.tw-heute span{color:var(--primary);font-weight:700}
  .tw-h-warn{display:block}
  .tw-h-summe{font-variant-numeric:tabular-nums}
  .pb-pub{justify-content:stretch}
  .pb-pub>.btn,.pb-pub-trotzdem,.pb-pub-trotzdem>summary{width:100%;justify-content:center}
  .pb-pub-box{left:0;right:0;width:auto}
}
/* === Ende Runde 18 E04 === */
/* === Runde 18 Durchgang: Befunde Sergi-Durchgang Tourenplanung – km/Ende im Gewinnkopf, „was fehlt“ statt Gewinn, Gewinn im Block sichtbar, Fahrer im Kosten-Reiter anlegen, Rechner „unvollständig“ (views/parts/planbrett*.php, views/tour.php, views/parts/touren_kosten.php, views/parts/tourenrechner.php) === */
.pb-b-info{display:flex;gap:4px;align-items:baseline}
.pb-b-zeit{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-b-info .r18-gewinn-zelle{flex:none;white-space:nowrap}
.r18-fehlt{color:var(--st-warn);text-decoration:underline dotted;text-underline-offset:3px;font-weight:600}
.r18-gk-km input{width:6.5em;text-align:right}
.r18-gk-ende input{width:7.5em}
.r18-gk-leer input{border-color:var(--st-warn);box-shadow:0 0 0 1px var(--st-warn)}
.pb-l-plan{margin:6px 0 10px}
.r18-ohne-karte{min-height:0;height:auto;padding:14px;flex-direction:row;gap:6px}
.r18-ohne-karte .ico{width:22px;height:22px}
.r18-ohne-karte p{margin:0}
.r18-fahrer-neu{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;padding:12px 16px;border-bottom:1px solid var(--line)}
.r18-fahrer-neu .field{margin:0;flex:1 1 8rem;min-width:0}
.r18-fahrer-neu .field:first-of-type{flex:2 1 13rem}
.r18-fahrer-neu .btn{min-height:44px}
.trr-offen{display:block}
.trr-tun{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:1.05rem;font-weight:600}
.trr-tun li{display:flex;gap:6px;align-items:center}
@media (max-width:767px){
  .r18-fahrer-neu .field,.r18-fahrer-neu .field:first-of-type{flex:1 1 100%}
  .r18-fahrer-neu .btn{width:100%;justify-content:center}
  .r18-gk-km input,.r18-gk-ende input{width:100%}
}
/* === Ende Runde 18 Durchgang === */
/* === Runde 18 V9: Touren erst nach „Veröffentlichen“ – Entwurf auf dem Planbrett deutlich, Zähler „Veröffentlichen (n)“ (views/parts/planbrett.php) === */
.pb-entwurf{background:repeating-linear-gradient(135deg,var(--panel) 0 6px,var(--gray-50) 6px 12px);border-style:dashed;border-left-style:dashed}
.pb-entwurf-marke{display:inline-block;padding:0 5px;margin-right:2px;border:1px dashed var(--line-strong);border-radius:4px;font-size:14px;font-weight:700;line-height:1.3;color:var(--text);background:var(--panel);vertical-align:baseline}
.pb-geaendert-marke{font-weight:700;color:var(--text)}
.pb-l-entwurf{border-left:3px dashed var(--line-strong)}
.pb-pub-n b{font-variant-numeric:tabular-nums}
/* === Ende Runde 18 V9 === */
/* === Runde 15 F: Befunde Runde 15 (Server/Web) – Schnellrechnung, voller Editor, Belegseite, Übersicht, Verwaltung === */
/* Befund 3: 701–767 px – die Absende-Leiste der Schnellrechnung liegt unten (die Reiterleiste ist dort ausgeblendet), wie im Editor */
@media (min-width:701px) and (max-width:767px){
  main:has(.sr2) .sticky-bar,main:has(#belegEditor) .sticky-bar{bottom:0}
  main:has(.sr2) .toasts,main:has(#belegEditor) .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* Befund 7: Handy – Titel in einer Zeile, Umschalter darunter in voller Breite, „⋯“ daneben (Editor und Schnellrechnung) */
@media (max-width:600px){
  .chrome-app main:has(#belegEditor) .page-head,.chrome-app main:has(.sr2) .page-head{flex-wrap:wrap;align-items:center;row-gap:8px}
  .chrome-app main:has(#belegEditor) .page-head .topbar-title,.chrome-app main:has(.sr2) .page-head .topbar-title{flex:1 1 100%;min-width:0}
  .chrome-app main:has(#belegEditor) .page-head h1,.chrome-app main:has(.sr2) .page-head h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal;hyphens:none}
  .chrome-app main:has(#belegEditor) .page-head .page-actions,.chrome-app main:has(.sr2) .page-head .page-actions{flex:1 1 100%;width:100%;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .chrome-app main:has(#belegEditor) .page-actions .ansicht-wahl{flex:1 1 0;min-width:0}
  .chrome-app main:has(.sr2) .page-actions .ansicht-wahl{flex:1 1 100%}
  .chrome-app main:has(.sr2) .page-actions .sr-typ:not(.ansicht-wahl){flex:1 1 0;min-width:0;display:flex}
  .chrome-app main:has(.sr2) .page-actions .sr-typ:not(.ansicht-wahl) .sr-typ-k{flex:1;justify-content:center}
}
/* S3: Fortschritt – erledigt gefüllt mit Haken, nächster Schritt als Umriss, offen grau */
.step .ico{width:13px;height:13px}
.step.now{background:transparent;color:var(--primary-700,#0a58ca);box-shadow:inset 0 0 0 1.5px var(--primary);font-weight:600}
:root[data-theme=dark] .step.now{background:transparent;color:#cfe2ff;box-shadow:inset 0 0 0 1.5px #8ec1ff}
/* S5: Fachbegriff nur im (?) */
.checks .r15f-fach{display:inline-flex;vertical-align:middle;color:var(--muted);cursor:help}
.checks .r15f-fach .ico{width:14px;height:14px}
/* S10: Zeitraum-Felder im vollen Editor breit genug („01.10.2026“ ganz lesbar); offener Zeitraum über die ganze Zeile */
.leistung-feld .range input[type=date],#belegEditor input[type=date]{min-width:10.5rem}
.leistung-feld .range input[type=date]{flex:1 1 10.5rem}
#belegEditor .form-grid>.leistung-feld[data-zeitraum="1"]{grid-column:1/-1}
/* S11: neuer Kunde aus der Schnellrechnung */
.r15f-kunde-neu{display:flex;align-items:center;gap:6px;margin-top:4px}
/* Befund 6: „E-Mail prüfen“ mit dem Ausweg daneben */
.sr-mail-pruefen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.sr-mail-pruefen[hidden]{display:none}
.sr-mail-pruefen .btn{margin:0}
/* S2: lokale Sicherung der Schnellrechnung */
.sr-sicherung{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.sr-sicherung>span{flex:1 1 220px}
/* S12: Hauptknopf mit Empfänger, „Nur abschließen“ sichtbar daneben */
.sr-leiste .sr-los span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(52vw,340px)}
.sr-leiste .sr-nur-abschliessen[hidden]{display:none}
/* Nebenbefund (Handy): Die Kundenzeile „Frau Anna Berger, Marktplatz 3 …“ war 420 px breit fest – die Seite wurde seitwärts scrollbar
   (514 statt 393 px) und „Ändern“ lag außerhalb des Bildschirms. Jetzt bricht sie in der Breite der Karte um. */
.sr-kunde-info{max-width:100%}
.sr-kunde-info [data-sr-info]{min-width:0;max-width:min(420px,100%)}
@media (max-width:700px){
  .sr-kunde-info{flex:1 1 100%;align-items:flex-start}
  .sr-kunde-info [data-sr-info]{flex:1 1 auto;max-width:none;white-space:normal;overflow-wrap:anywhere}
}
/* S13: Handy – Absende-Leiste mit 16 px Rand und Platz für Kerbe/Gestenleiste (vorher padding 10px 0) */
@media (max-width:700px){
  body.chrome-app .sticky-bar{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .sr-leiste .sr-los span{max-width:none}
}
/* S14: Tippflächen ≥ 44 px am Handy und bei Fingerbedienung */
@media (max-width:767px),(pointer:coarse){
  body.chrome-app .sr-zeitraum-auf,body.chrome-app .anschrift-neu .pos-beschr-link,body.chrome-app .pos-beschr-link{min-height:44px;display:inline-flex;align-items:center}
  body.chrome-app #sr_ziel label.chip,body.chrome-app .sr-chips label.chip,body.chrome-app .sr-chips .chip{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center}
  body.chrome-app .quick .btn,body.chrome-app .datum-schnell .btn,body.chrome-app [data-datum-schnell]~.quick .btn{min-height:44px;min-width:44px;padding:6px 12px;font-size:14px}
  body.chrome-app #belegEditor .editor-head .datum-schnell .btn{min-height:44px}
  body.chrome-app .field.check{min-height:44px;align-items:center}
  body.chrome-app .field.check input[type=checkbox],body.chrome-app .pos-details-schalter input[type=checkbox]{width:22px;height:22px}
  body.chrome-app .pos-details-schalter{min-height:44px;display:inline-flex;align-items:center;gap:8px}
  body.chrome-app .beleg-live .bl-check{min-height:44px;display:inline-flex;align-items:center;padding-inline:8px}
  body.chrome-app .page-actions .ansicht-wahl .sr-typ-k,body.chrome-app .page-actions .sr-typ .sr-typ-k{min-height:44px}
  body.chrome-app td.c-sel input[type=checkbox],body.chrome-app th.c-sel input[type=checkbox]{width:24px;height:24px}
}
/* Auswahlkästchen der Listen-Karten: dieselbe Stelle oben rechts, aber eine Trefferfläche von 44 × 44 (ein Tipp daneben trifft das Kästchen,
   app.js Runde 15 F reicht ihn weiter – nicht die ganze Zeile) */
@media (max-width:700px){
  body.chrome-app .table td.c-sel{top:2px;inset-inline-end:2px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1}
}
/* S15: Verwaltung bei 1366 – umbrechen statt abschneiden (Kennzahlen, Heute wichtig, Systemprüfung, Einrichtung), Tabelle Unternehmen ohne Seitwärts-Abschneiden */
@media (max-width:1699px){
  .r13-cockpit .r10a-kz{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.r13-cockpit .r10a-kz-l,.r13-cockpit .r10a-kz-s,.r10a-kz-l,.r10a-kz-s{white-space:normal;overflow:visible;text-overflow:clip}
.r13-cockpit .r10a-kz-s{display:block;-webkit-line-clamp:unset}
.r10a-text,.r10a-text b,.r10a-text small,.r10a-text span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.r13-problem-text small,.r13-problem-text b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.r13-cock-neben .einst-kachel,.r13-cock-neben .einst-kachel *{white-space:normal;overflow-wrap:anywhere;min-width:0}
.r13-cock-neben .einst-kachel{overflow:visible;flex-wrap:wrap}
/* Das Cockpit (Runde 13 N) kürzte ab 1101 px alles auf eine Zeile – jetzt umbrechen (die Seite wird dadurch etwas länger) */
@media (min-width:1101px){
  .r13-cockpit .r10a-kz-l{white-space:normal;overflow:visible;text-overflow:clip}
  .r13-cockpit .r10a-kz-s{-webkit-line-clamp:unset;white-space:normal;overflow:visible;text-overflow:clip;display:block}
  .r13-cockpit .r10a-zeile{flex-wrap:wrap}
  .r13-cockpit .r10a-text{flex:1 1 240px;min-width:200px;flex-direction:column;align-items:flex-start;gap:0}
  .r13-cockpit .r10a-text b,.r13-cockpit .r10a-text small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;flex:none;min-width:0}
  .r13-cockpit .r10a-aktion{flex-wrap:wrap;margin-inline-start:auto}
  .r13-problem-text b{white-space:normal;overflow:visible;text-overflow:clip}
  .r13-cock-neben .einst-text{flex-wrap:wrap}
  .r13-cock-neben .einst-stand{white-space:normal;overflow:visible;text-overflow:clip}
  .r13-cockpit>.r13-statistik>summary small{white-space:normal;overflow:visible}
}
/* Verwaltung → Unternehmen: entbehrliche Spalten weichen (Kopfzellen jetzt z-weg), Texte und Knöpfe brechen um statt rechts abzuschneiden */
@media screen and (min-width:701px) and (max-width:1500px){
  .table:has(thead th.z-weg) .z-weg{display:none}
  .table.table-aktionen:has(thead th.z-weg) td:not(.nowrap){white-space:normal;overflow-wrap:anywhere}
  .table.table-aktionen:has(thead th.z-weg) td.actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
  .table.table-aktionen:has(thead th.z-weg) td.actions .btn{margin:0}
}
/* S18: Hinweise am Rechner unten rechts (oben verdeckten sie Umschalter und „⋯“), über der Leiste; „Entwurf löschen“ sauber in der Leiste */
@media (min-width:721px){
  .toasts{top:auto;bottom:24px}
  body:has(.sticky-bar) .toasts{bottom:96px}
}
.sticky-bar>form{display:inline-flex;margin:0;align-items:center}
.sticky-bar>form .btn{margin:0}
@media (min-width:701px){
  /* „Entwurf löschen“ rutschte bei 1366 in eine zweite Zeile unter die Leiste – am Rechner jetzt im „⋯“ der Leiste (wie am Handy) */
  .sticky-bar:has(#belegLive)>form{display:none}
  .sticky-bar:has(#belegLive):has(.bar-mehr form) .bar-mehr{display:inline-block}
  .sticky-bar .bar-mehr .dd-menu>button[data-klick],.sticky-bar .bar-mehr .dd-menu>a.dd-item{display:none}
}
/* S7: Einführung am Handy oben unter dem Kopf – nie über der unteren Leiste, „+ Neu“ oder Blättern */
@media (max-width:767px){
  .hilfe-tour.unten-fest{top:calc(72px + env(safe-area-inset-top));bottom:auto}
}
/* === Ende Runde 15 F === */