/* ============================================================================
   HS Dienstleistungen — Innendienst
   Gestaltungsgrundlage. Reihenfolge: Marke, Rahmen, Navigation, Bausteine.

   Thema „Steuerzentrale“ (abgenommen von Schero am 12.10.2026, Punkt 575):
   tiefes Navy, helle Schrift, großzügige Abstände, EIN Leitakzent (Cyan)
   für das, was man anfassen soll, und für „läuft gerade“. Es gibt nur
   dieses eine Thema; alle Ansichten lesen ihre Farben aus diesen Variablen.
   Farbe bedeutet weiter immer etwas — rot ist Geld, das fehlt, grün ist
   erledigt, gelb wartet auf jemanden.

   Zu jeder Bedeutung gibt es drei Stärken:
     --x          die Schriftfarbe, hell auf Navy (≥ 4,5:1 auf jeder Fläche)
     --x-bg       die durchscheinende Fläche für Marken und Chips
     --x-weich    die ganz leise Tönung für eine Karte, die nur färbt
   Eine Fläche in der vollen Farbe (Hauptknopf, „blockiert“, Zähler) trägt
   dunkle Schrift: --auf-farbe. Weiße Schrift auf einer hellen Farbe gibt es
   nicht mehr.

   Gemessen (probe_bedienung.py): Text ≥ 4,5:1, Bedienelemente und Fokus
   ≥ 3:1, in allen Ansichten am Handy (390) und iPad (820/1180).
   ========================================================================== */

:root{
  color-scheme:dark;

  /* Grund und Flächen, von hinten nach vorn */
  --grund:#0A1520;
  --flaeche:#0F1E2D;
  --flaeche-2:#142739;
  --linie:rgba(148,178,207,.16);
  --linie-satt:rgba(148,178,207,.28);
  /* Rand von Bedienelementen und Feldern: 4,9:1 auf Grund, 4,4:1 auf Fläche 2 */
  --kante:#6F8AA6;
  --kante-leise:#57718C;

  /* Schrift. --grau-hell ist KEINE Schriftfarbe (Platzhalter-Zeichen,
     Trenner); kleiner leiser Text nimmt --grau (≥ 5,5:1). */
  --tinte:#EEF3F8;
  --tinte-2:#B3C2D1;
  --grau:#8FA6BD;
  --grau-hell:#6F8AA6;

  /* Der eine Leitakzent: Cyan. Als Fläche mit dunkler Schrift (≥ 9:1). */
  --marke:#4FD1FF;
  --marke-tief:#7FDDFF;
  --marke-hell:rgba(79,209,255,.12);
  --marke-weich:rgba(79,209,255,.06);
  --akzent-hof:rgba(79,209,255,.28);
  --auf-farbe:#04111B;

  /* Seitenleiste, Kopf am Handy und gewählte Flächen („an“): ein Navy, das
     über dem Grund liegt. Eine gewählte Fläche trägt dazu den Leitakzent als
     Rand (07-zentrale.css). */
  --nacht:#1D3550;
  --nacht-2:#25415F;
  --nacht-3:#2E4C6C;
  --nacht-schrift:#C4D2DF;

  /* Bedeutungen — Schrift / Marke / Linie / leise Tönung */
  --gruen:#6EE7A8;  --gruen-bg:rgba(110,231,168,.13);  --gruen-linie:rgba(110,231,168,.42);  --gruen-weich:rgba(110,231,168,.06);
  --amber:#F2CB74;  --amber-bg:rgba(242,203,116,.13);  --amber-linie:rgba(242,203,116,.42);  --amber-weich:rgba(242,203,116,.06);
  --rot:#FF9AA5;    --rot-bg:rgba(255,122,138,.14);    --rot-linie:rgba(255,122,138,.46);    --rot-weich:rgba(255,122,138,.07);
  --lila:#C9B8FF;   --lila-bg:rgba(201,184,255,.13);   --lila-linie:rgba(201,184,255,.42);   --lila-weich:rgba(201,184,255,.06);
  --tuerkis:#7BE3D2; --tuerkis-bg:rgba(123,227,210,.13); --tuerkis-linie:rgba(123,227,210,.42); --tuerkis-weich:rgba(123,227,210,.06);

  /* Karton. Der einzige warme Ton im Haus, und nur für die Ablage. */
  --karton:#2A2419;     --karton-band:#3A3122; --karton-kante:#6B5A3C;
  --karton-tief:#E5CD9F;

  /* Raster */
  --seite-breit:248px;
  --seite-schmal:68px;
  --leiste:64px;          /* Handy-Leiste unten */
  --kopf-hoch:60px;
  --radius-klein:10px;
  --radius:14px;
  --radius-gross:18px;

  /* Abstandsskala. Neue Regeln nehmen diese Stufen. */
  --l1:4px; --l2:8px; --l3:12px; --l4:16px; --l5:22px; --l6:30px;

  /* Schatten: auf Navy trägt der Rand, der Schatten nur die Höhe. */
  --schatten:0 1px 2px rgba(0,0,0,.28);
  --schatten-hoch:0 10px 28px -10px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
  --schatten-dialog:0 24px 64px rgba(0,0,0,.62);

  /* Namen der Vorschau (07-zentrale.css, js-04h) */
  --zt-grund:var(--grund);
  --zt-grund-2:#0D1A27;
  --zt-flaeche:var(--flaeche);
  --zt-flaeche-2:var(--flaeche-2);
  --zt-linie:var(--linie);
  --zt-linie-satt:var(--linie-satt);
  --zt-kante-leise:var(--kante-leise);
  --zt-kante:var(--kante);
  --zt-text:var(--tinte);
  --zt-text-2:var(--tinte-2);
  --zt-text-3:var(--grau);
  --zt-akzent:var(--marke);
  --zt-akzent-hell:#8BE2FF;
  --zt-akzent-schrift:var(--auf-farbe);
  --zt-akzent-hof:var(--akzent-hof);
  --zt-geld:#7FE0B0;
  --zt-frist:#FFB09A;
  --zt-block:#F2CB74;
  --zt-gut:var(--gruen);
  --zt-extern:var(--lila);

  /* Frühere Namen. Im JavaScript stehen sie noch als Farbwerte in erzeugtem
     HTML (etwa in der Kalenderlegende). Eine unbekannte CSS-Variable fällt
     still aus — der Punkt wird dann unsichtbar statt falsch. */
  --blau:var(--marke);
  --blau-dunkel:var(--marke-tief);
  --hg:var(--grund);
  --schatten-karte:var(--schatten);
}


*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--grund);
  color:var(--tinte);
  line-height:1.45;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
/* Zahlen sollen untereinander stehen — in Listen mit Betraegen ist das
   der Unterschied zwischen lesbar und Zahlenbrei. */
.zahl,.betrag,td.num,.kpi-wert,.um-gross,.um-k-wert{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- Rahmen */
.rahmen{display:flex;min-height:100vh;min-height:100dvh}

/* ------------------------------------------------------- Seitenleiste */
aside.seite{
  flex:0 0 var(--seite-breit);width:var(--seite-breit);
  background:var(--nacht);color:var(--nacht-schrift);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
}
/* Der aeussere Container scrollt nicht mehr — gescrollt wird in .seite-nav. */

.firma{display:flex;align-items:center;gap:11px;padding:15px 18px 13px;
  border-bottom:1px solid rgba(255,255,255,.09);flex:0 0 auto}
.firma-zeichen{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:6px}
.firma-zeichen img{width:100%;height:auto;display:block}
.firma-wort{min-width:0}
.firma-wort b{display:block;font-size:15px;font-weight:700;color:#fff;letter-spacing:-.005em;line-height:1.2}
.firma-wort span{display:block;font-size:11.5px;color:#B9C8D5;font-weight:500;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Eigener Scrollbereich. Der Fuss klebt mit position:sticky am unteren Rand
   und liegt damit UEBER der Liste — reicht der Platz nicht, verschwindet der
   letzte Navigationspunkt lautlos darunter und ist nicht mehr anklickbar.
   Gemessen am 08.09.2026: "Personal" lag bei y=858, darueber die Fusszeile.
   Enger setzen hilft nur bis zum naechsten Modul; ein eigener Scrollbereich
   haelt dauerhaft. min-height:0 ist noetig, sonst wachsen Flex-Kinder ueber
   ihren Container hinaus, statt zu scrollen. */
.seite-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 10px 10px;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent}
.seite-nav::-webkit-scrollbar{width:8px}
.seite-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
.seite-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34)}
.seite-nav::-webkit-scrollbar-track{background:transparent}
.nav-gruppe{margin-bottom:4px}
/* Eng gesetzt: mit achtzehn Ansichten endete "E-Mail" auf einem 900er
   Bildschirm 27 px unter der Kante — ausgerechnet die Ansicht, die den ganzen
   Tag gebraucht wird, war nur nach einem Scrollen in der Leiste zu sehen. */
/* #8CA6BE, nicht #6E8AA5: mit dem waermeren Navy vom 15.09.2026 kam der
   alte Ton auf 4,08:1 und fiel damit unter AA. Jetzt 5,81:1. */
.nav-gruppe-titel{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#B7C8D6;padding:9px 10px 3px}
.nav-punkt{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;
  color:var(--nacht-schrift);font:inherit;font-size:13.5px;font-weight:600;
  padding:0 10px;height:32px;border-radius:9px;cursor:pointer;text-align:left;position:relative}
.nav-punkt svg{width:18px;height:18px;flex:0 0 auto;opacity:.85}
.nav-punkt span.txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-punkt:hover{background:var(--nacht-2);color:#fff}
.nav-punkt.an{background:var(--marke);color:var(--auf-farbe);font-weight:700}
.nav-punkt.an svg{opacity:1}
.nav-punkt .zahl-marke{flex:0 0 auto;min-width:21px;height:19px;padding:0 6px;border-radius:999px;
  background:var(--nacht-3);color:#DCE7F1;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.nav-punkt.an .zahl-marke{background:rgba(255,255,255,.24);color:#fff}
.nav-punkt .zahl-marke.warn{background:var(--rot);color:var(--auf-farbe)}

/* Der Fuss sitzt fest am unteren Rand der Leiste — nicht mehr per sticky,
   sondern als letztes Flex-Kind eines Containers, der selbst nicht scrollt.
   Vorher lag er per position:sticky UEBER der Navigation und verdeckte deren
   letzten Punkt: am 08.09.2026 war "Personal" bei y=858 nicht anklickbar,
   darueber lag die Fusszeile. Jetzt scrollt die Liste unter dem Fuss hindurch,
   und das Podest bleibt trotzdem den ganzen Tag im Blick. */
.seite-fuss{flex:0 0 auto;padding:11px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.09);font-size:12px;color:#BBC7D3;
  z-index:2;background:var(--nacht)}
.seite-fuss:empty{display:none}
.seite-fuss b{display:block;color:#C3D3E2;font-size:12.5px;font-weight:700}

/* ------------------------------------------------------- Hauptbereich */
.haupt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}

.kopf{position:sticky;top:0;z-index:20;background:rgba(15,30,45,0.92);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linie);
  padding:0 26px;min-height:var(--kopf-hoch);
  display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
/* Titel und Erklaersatz teilen sich die Zeile mit Suche und Knoepfen — der
   Satz gibt nach (Ellipse), nie die Zeile (Umbruch = 80-px-Kopf, und der
   klebende Tabellenkopf rutschte darunter). */
.kopf h1{font-size:19px;font-weight:750;letter-spacing:-.015em;margin:0;flex:0 0 auto;max-width:40%;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kopf .kopf-sub{font-size:12.5px;color:var(--grau);font-weight:500;margin-left:-9px;align-self:center;
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto}
.kopf-rechts .suche{flex:0 1 260px;min-width:150px}
input::placeholder{text-overflow:ellipsis}

.zurueck{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie);
  background:#0F1E2D;color:var(--tinte-2);border-radius:9px;padding:7px 12px 7px 9px;
  font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;flex:0 0 auto}
.zurueck svg{width:15px;height:15px}
.zurueck:hover{background:var(--flaeche-2);border-color:var(--linie-satt)}

.inhalt{flex:1 1 auto;padding:22px 26px 60px;max-width:1360px;width:100%}

/* Suche im Kopf — hell, nicht mehr im blauen Balken */
.suche{position:relative;flex:1 1 260px;max-width:400px;min-width:180px}
.suche input{width:100%;border:1px solid var(--linie);border-radius:9px;
  padding:8px 12px 8px 34px;font-size:14px;font-family:inherit;
  background:var(--flaeche-2);color:var(--tinte)}
.suche input:focus{outline:0;border-color:var(--marke);background:#0F1E2D;
  box-shadow:0 0 0 3px rgba(123,193,244,0.13)}
.suche input::placeholder{color:var(--grau-hell)}
.suche svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--grau-hell);pointer-events:none}

/* Filterreihe — jetzt hell statt auf blauem Grund */
.filter{display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  padding:0 0 2px;margin:0 0 16px}
.filter button{flex:0 0 auto;border:1px solid var(--linie);border-radius:999px;
  padding:6px 13px;font-size:13px;font-weight:650;
  background:#0F1E2D;color:var(--tinte-2);cursor:pointer;font-family:inherit}
.filter button:hover{border-color:var(--linie-satt);background:var(--flaeche-2)}
.filter button.an{background:var(--marke-tief);color:var(--auf-farbe);border-color:var(--marke-tief)}
.filter button b{font-weight:800;opacity:.75;margin-left:2px}
.filter button.an b{opacity:.9}

/* ------------------------------------------------------- Handy-Leiste */
nav.handy{display:none}
.handy-kopf{display:none}

/* Spaltenbreite fuer Ansichten aus Fliesstext (siehe LESEBREIT im Skript). */
.inhalt.schmal{max-width:940px}
/* ============================================================== Bausteine */

/* --- Abschnitt: gliedert die Seite, ersetzt das blosse Aneinanderreihen --- */
.abschnitt{margin:0 0 var(--l6)}
.abschnitt-kopf{display:flex;align-items:baseline;gap:var(--l2);margin:0 2px var(--l3)}
.abschnitt-kopf h2{font-size:15px;font-weight:750;letter-spacing:-.01em;margin:0;color:var(--tinte)}
.abschnitt-kopf .anzahl{font-size:13px;color:var(--grau);font-weight:600}
.abschnitt-kopf .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Erklaerzeile — sagt in einem Satz, was der Nutzer hier sieht. */
.notiz{font-size:13px;color:var(--grau);line-height:1.55;margin:0 2px 14px;max-width:76ch}

/* --- Karte ---
   Eine Karte ist ein Gegenstand, der auf der Flaeche liegt. Bis zum
   15.09.2026 war sie vor allem eine Umrandung: derselbe Weisston wie der
   Grund, ein Haarstrich drumherum. Auf einer Seite mit zwanzig davon
   verschwamm alles zu einem Raster. Jetzt traegt sie ein wenig Hoehe — der
   Rand darf dafuer leiser werden. */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross);
  margin-bottom:var(--l4);overflow:hidden;box-shadow:var(--schatten)}
.karte.klick{cursor:pointer;transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease}
.karte.klick:hover{border-color:var(--linie-satt);box-shadow:var(--schatten-hoch);transform:translateY(-1px)}
.karte.klick:active{transform:translateY(0);box-shadow:var(--schatten)}
.kopfzeile,.kopf-karte{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:15px 17px 10px}
.kopfzeile .nr{font-size:12px;color:var(--grau);font-weight:700;letter-spacing:.02em}
.kopfzeile .kunde{font-size:16px;font-weight:700;margin-top:2px;letter-spacing:-.01em}
.kopfzeile .betrag{font-size:17px;font-weight:800;color:var(--tinte);white-space:nowrap}

/* --- Tabelle: die Arbeitsform am Schreibtisch --- */
/* Kein overflow:hidden auf der Huelle! Es macht sie zum Scroll-Kontext, und
   der stehenbleibende Tabellenkopf klebt dann an IHR statt am Fenster — er
   rutscht um die Kopfhoehe nach unten und verdeckt die erste Zeile.
   Die Rundung uebernehmen deshalb die Eckzellen selbst. */
.tab-huelle{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius-gross);box-shadow:var(--schatten)}
table.liste thead th:first-child{border-top-left-radius:var(--radius-gross)}
table.liste thead th:last-child{border-top-right-radius:var(--radius-gross)}
.tab-fuss{border-radius:0 0 var(--radius-gross) var(--radius-gross)}
table.liste{width:100%;border-collapse:collapse;font-size:14px}
table.liste thead th{position:sticky;top:var(--kopf-hoch);z-index:5;
  background:var(--flaeche-2);border-bottom:1px solid var(--linie);
  padding:9px 14px;text-align:left;font-size:11.5px;font-weight:750;
  letter-spacing:.05em;text-transform:uppercase;color:var(--grau);white-space:nowrap}
table.liste thead th.num{text-align:right}
table.liste tbody td{padding:11px 14px;border-bottom:1px solid var(--linie);vertical-align:middle}
table.liste tbody tr:last-child td{border-bottom:0}
table.liste tbody tr{cursor:pointer;transition:background .1s}
table.liste tbody tr:hover{background:var(--marke-hell)}
table.liste tbody tr.gewaehlt{background:var(--marke-hell);box-shadow:inset 3px 0 0 var(--marke)}
table.liste td.num{text-align:right;white-space:nowrap;font-weight:650}
table.liste td.nr{color:var(--grau);font-weight:650;font-size:13px;white-space:nowrap}
table.liste td.wer{font-weight:650;color:var(--tinte);
  max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.liste td.leise{color:var(--grau);font-size:13px}
table.liste td.tat{text-align:right;white-space:nowrap;width:1%}
table.liste td.marken{white-space:nowrap;width:1%}
/* Ueberfaellige Zeile: nur der Betrag wird rot. Die ganze Zeile einzufaerben
   macht eine Liste unlesbar, in der zwei Drittel ueberfaellig sind.
   Die Klasse heisst bewusst nicht "warn" — so heisst der gelbe Hinweiskasten,
   und eine Zeile mit dessen Innenabstaenden sprengt die Tabelle. */
table.liste tr.faellig td.num{color:var(--rot)}
/* Dezentes Merkzeichen statt eines ausgeschriebenen Chips: bei den
   Altsystem-Rechnungen hat fast jede Zeile einen Hinweis, ausgeschrieben
   wird daraus Rauschen. */
.merk{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;background:var(--amber-bg);
  border:1px solid var(--amber-linie);color:var(--amber);
  font-size:12px;font-weight:800;cursor:help;vertical-align:-4px;margin-left:2px}
.tab-fuss{padding:10px 15px;background:var(--flaeche-2);border-top:1px solid var(--linie);
  font-size:12.5px;color:var(--grau);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tab-fuss b{color:var(--tinte);font-weight:700}

/* Alter einer Forderung — Farbe traegt die Bedeutung, nicht nur die Zahl */
.alter{display:inline-block;font-size:12.5px;font-weight:700;white-space:nowrap}
.alter-frisch{color:var(--grau)}
.alter-mittel{color:var(--amber)}
.alter-alt{color:var(--rot)}

/* --- Marken (Status) --- */
.marke-chip,.marke{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:7px;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.m-offen{background:var(--flaeche-2);color:var(--grau);border-color:var(--linie)}
.m-aendern{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-linie)}
.m-frei{background:var(--gruen-bg);color:var(--gruen);border-color:var(--gruen-linie)}
.m-test{background:rgba(128,165,239,0.144);color:#ABBEED;border-color:rgba(138,170,229,0.4)}
.m-versendet{background:var(--gruen);color:var(--auf-farbe);border-color:var(--gruen)}
.m-storniert{background:#22384F;color:#E4B4BD;border-color:rgba(148,178,207,.22);text-decoration:line-through}
.m-altsystem{background:var(--lila-bg);color:var(--lila);border-color:var(--lila-linie)}
.m-ueberfaellig{background:var(--rot-bg);color:var(--rot);border-color:var(--rot-linie)}
/* Warnungen des einheitlichen Status (Punkt 522): Blockiert steht hart auf
   Rot, Geldrisiko weiß mit rotem Rand — beide über 4,5:1. */
.m-blockiert{background:var(--rot);color:var(--auf-farbe);border-color:var(--rot)}
.m-geldrisiko{background:#0F1E2D;color:var(--rot);border-color:var(--rot)}
.marke.z-bezahlt{background:var(--gruen-bg);color:var(--gruen);border-color:var(--gruen-linie);margin-left:5px}
.marke.z-offen{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-linie);margin-left:5px}
.marke.z-ueberfaellig{background:var(--rot-bg);color:var(--rot);border-color:var(--rot-linie);margin-left:5px}

/* Mahnstufen: von der Erinnerung (amber) bis zur letzten Mahnung (kräftig rot) */
.m-stufe1{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-linie)}
.m-stufe2{background:var(--rot-bg);color:var(--rot);border-color:var(--rot-linie)}
.m-stufe3{background:var(--rot);color:var(--auf-farbe);border-color:var(--rot)}

/* --- Knoepfe --- */
.aktionen{display:flex;gap:8px;padding:0 17px 16px;flex-wrap:wrap}
.btn{border:1px solid transparent;border-radius:9px;padding:9px 15px;font-size:13.5px;
  font-weight:650;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;line-height:1.3;transition:filter .12s,box-shadow .12s,background .12s}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn:hover{filter:brightness(1.06)}
.btn:active{filter:brightness(.94)}
/* Gesperrt: graue Flaeche, graue Schrift — nicht die farbige Flaeche mit
   halber Deckkraft (weiss auf hellgruen war 1,0:1). */
.btn[disabled],.btn.aus{background:var(--flaeche-2) !important;color:var(--grau) !important;
  border-color:var(--linie) !important;opacity:1;cursor:default;filter:none}
.b-haupt,.b-senden{background:var(--marke-tief);color:var(--auf-farbe);border-color:var(--marke-tief)}
.b-test{background:var(--marke);color:var(--auf-farbe);border-color:var(--marke)}
.b-frei{background:var(--gruen);color:var(--auf-farbe);border-color:var(--gruen)}
.b-aendern{background:#0F1E2D;color:var(--amber);border-color:var(--amber-linie)}
.b-aendern:hover{background:var(--amber-bg)}
.b-zurueck,.b-still{background:#0F1E2D;color:var(--tinte-2);border-color:var(--linie)}
.b-zurueck:hover,.b-still:hover{background:var(--flaeche-2);border-color:var(--linie-satt);filter:none}
.b-storno{background:#0F1E2D;color:var(--rot);border-color:var(--rot-linie)}
.b-storno:hover{background:var(--rot-bg);filter:none}
.btn.klein{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn.breit{flex:1 1 auto;min-width:130px}

/* Verweis-Chips: machen sichtbar, woran ein Eintrag haengt */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;font-weight:650;padding:4px 10px;border-radius:999px;
  background:var(--marke-hell);color:var(--marke-tief);text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:inherit;display:inline-flex;
  align-items:center;gap:5px;line-height:1.5}
.chip:hover{background:rgba(141,187,226,0.184);border-color:rgba(141,188,226,0.4)}
.chip svg{width:13px;height:13px;flex:0 0 auto}
.chip.wort{background:var(--flaeche-2);color:var(--grau);font-weight:600;cursor:default}
.chip.wort:hover{background:var(--flaeche-2);border-color:transparent}

/* --- Hinweise --- */
.warn{margin:0 17px 12px;padding:9px 12px;background:var(--amber-bg);color:var(--amber);
  border:1px solid var(--amber-linie);border-radius:9px;font-size:12.5px;font-weight:600;line-height:1.5}
.hinweis{font-size:12.5px;color:var(--grau);padding:0 17px 14px;margin-top:-4px;line-height:1.5}
.pos{padding:0 17px 12px;font-size:13.5px;color:var(--grau);line-height:1.55}
.pdf{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  margin:0 17px 12px;border:1px solid var(--linie);border-radius:9px;
  color:var(--marke-tief);font-weight:650;font-size:13.5px;padding:9px 14px;
  text-decoration:none;background:#0F1E2D}
.pdf:hover{background:var(--marke-hell);border-color:rgba(141,188,226,0.4)}
.pdf svg{width:15px;height:15px}

/* --- Leerer Zustand: sagt, was passieren wird, nicht nur dass nichts da ist.
   Wo eine Liste leer ist, weil jemand sie leergearbeitet hat, ist das ein
   Ergebnis und kein Mangel — dafuer gibt es .leer.geschafft. --- */
.leer{text-align:center;color:var(--grau);padding:var(--l6) var(--l5);font-size:14px;line-height:1.6}
.leer b{display:block;color:var(--tinte);font-size:15px;font-weight:700;margin-bottom:5px}
.leer.geschafft{background:var(--gruen-weich);border:1px solid var(--gruen-linie);
  border-radius:var(--radius-gross);padding:var(--l6) var(--l5)}
.leer.geschafft b{color:var(--gruen);font-size:17px}
.leer-zeichen{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  margin:0 auto var(--l3);border-radius:50%;background:var(--gruen-bg);color:var(--gruen)}
.leer-zeichen svg{width:24px;height:24px}

/* --- Formularfelder --- */
.feld{width:100%;border:1px solid var(--linie);border-radius:9px;padding:9px 11px;font-size:14.5px;
  font-family:inherit;background:#0F1E2D;color:var(--tinte)}
.feld:focus{outline:0;border-color:var(--marke);box-shadow:0 0 0 3px rgba(123,193,244,0.13)}
textarea{width:100%;border:1px solid var(--linie);border-radius:9px;padding:10px 11px;font-size:14.5px;
  font-family:inherit;resize:vertical;min-height:70px;background:#0F1E2D;color:var(--tinte);line-height:1.55}
textarea:focus{outline:0;border-color:var(--marke);box-shadow:0 0 0 3px rgba(123,193,244,0.13)}

/* Zeile mit einer selten gebrauchten Handlung — steht ueber dem Inhalt,
   ohne ihn zu ueberstrahlen. Seit 12.09. nur noch in Dialogen; ueber Listen
   steht die .leiste. */
.tat-zeile{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}

/* ============================================================ Leiste
   EINE Zeile ueber dem Inhalt: links Filter und Umschalter, rechts der eine
   haeufige Knopf und das „…"-Menue. Sie ersetzt die gestapelten Knopfzeilen
   (Export, Anlegen, Stammdaten, Kontoauszug …), die vorher 2–4 Zeilen hoch
   ueber jeder Liste standen. */
.leiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.leiste-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.leiste-r{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.leiste .filter{margin:0;padding:0}
.leiste .kal-kopf{margin:0}

/* --- Umschalter (Segment): Liste | Monat, Einheiten | Kraefte ... --- */
.segment{display:inline-flex;background:var(--flaeche-2);border:1px solid var(--linie);
  border-radius:10px;padding:3px;gap:2px;flex:0 0 auto}
.segment button{border:0;background:none;color:var(--tinte-2);font:inherit;font-size:13px;
  font-weight:650;padding:5px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.segment button:hover{color:var(--tinte)}
.segment button.an{background:#0F1E2D;color:var(--tinte);box-shadow:var(--schatten)}
.segment button b{font-size:11px;font-weight:800;padding:0 6px;border-radius:999px;
  background:var(--rot);color:var(--auf-farbe);line-height:1.5}
.segment button.an b{background:var(--rot)}

/* --- Menue („…") auf <details> --- */
details.menue{position:relative;display:inline-block;flex:0 0 auto}
details.menue>summary{list-style:none;cursor:pointer;user-select:none}
details.menue>summary::-webkit-details-marker{display:none}
details.menue>summary.btn{padding:8px 11px}
details.menue>summary.btn svg{width:16px;height:16px}
details.menue>summary.rund{width:36px;height:36px;padding:0;border-radius:50%}
details.menue[open]>summary.btn{background:var(--flaeche-2);border-color:var(--linie-satt)}
.menue-liste{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:220px;max-width:320px;
  background:#0F1E2D;border:1px solid var(--linie);border-radius:12px;box-shadow:var(--schatten-dialog);
  padding:6px;display:flex;flex-direction:column;gap:1px}
details.menue.rechts .menue-liste{left:auto;right:0}
details.menue.oben .menue-liste{top:auto;bottom:calc(100% + 6px)}
.menue-liste hr{border:0;border-top:1px solid var(--linie);margin:5px 4px}
.menue-titel{font-size:12.5px;color:var(--grau);padding:7px 10px 6px;line-height:1.5;font-weight:600}
.menue-e{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;
  color:var(--tinte);font:inherit;font-size:13.5px;font-weight:600;text-align:left;
  padding:8px 10px;border-radius:8px;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.menue-e span{flex:1 1 auto;min-width:0}
.menue-e svg{width:15px;height:15px;flex:0 0 auto;color:var(--grau)}
.menue-e small{margin-left:auto;font-size:11.5px;color:var(--grau-hell);font-weight:600}
.menue-e:hover{background:var(--marke-hell);color:var(--marke-tief)}
.menue-e:hover svg{color:var(--marke-tief)}
.menue-e.rot{color:var(--rot)}
.menue-e.rot:hover{background:var(--rot-bg)}
.menue-e[disabled]{color:var(--grau);cursor:default}
.menue-e[disabled] svg{color:var(--grau-hell)}

/* Knoepfe im Kopf: Auge, Ausgeben, Ich — alle gleich gross und rund */
.kopf-knopf{width:36px;height:36px;padding:0;border:1px solid var(--linie);border-radius:50%;
  background:#0F1E2D;color:var(--tinte-2);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;font:inherit;font-size:13px;font-weight:800;flex:0 0 auto}
.kopf-knopf svg{width:17px;height:17px}
.kopf-knopf:hover{border-color:var(--linie-satt);background:var(--flaeche-2)}
.kopf-knopf.auge.an{color:var(--marke-tief);border-color:var(--marke);background:var(--marke-hell)}
.kopf-knopf.ich{background:var(--nacht);color:#fff;border-color:var(--nacht)}
.kopf-knopf.ich:hover{background:var(--nacht-2)}
details.menue[open]>summary.kopf-knopf{border-color:var(--marke);color:var(--marke-tief)}
details.menue[open]>summary.kopf-knopf.ich{color:#fff}
.nur-handy-inline{display:none}

/* Hauptknopf + Menue nebeneinander in einer Zeile (Detail, Karte, Leiste) */
.knopfreihe{display:flex;gap:8px;align-items:center;flex-wrap:wrap}


/* Lange Dialoge (Versand mit Wortlaut): der Fuss mit Abbrechen/Senden bleibt
   sichtbar, der Inhalt scrollt darueber. */
dialog.mailblatt .dlg-btn{position:sticky;bottom:0;background:#0F1E2D;padding:12px 0 0;margin-top:12px;
  border-top:1px solid var(--linie);flex-wrap:wrap}
.dlg-btn{flex-wrap:wrap}

/* Feldbeschriftungen in Dialogen — Platzhalter verschwinden beim Tippen. */
.dlg-marke{display:block;font-size:11.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  color:var(--grau);margin:10px 0 4px}
.dlg-in>.dlg-marke:first-of-type,.dlg-in p+.dlg-marke{margin-top:2px}
.dlg-fest{font-size:14px;font-weight:650;color:var(--tinte);padding:8px 11px;background:var(--flaeche-2);
  border:1px solid var(--linie);border-radius:9px}
.dlg-nebenzeile{display:flex;justify-content:flex-end;margin-top:10px}

/* Lange Adressen und Links in Dialogen brechen um, statt den Rand zu sprengen */
.dlg-in{overflow-wrap:anywhere}

/* Stapel statt Alarm: die Belegzuordnung ist Arbeit fuer eine ruhige
   Stunde, kein Tagesalarm. */
.zahl-marke.stapel{background:var(--flaeche-2);color:var(--grau);border:1px solid var(--linie);font-weight:600}
/* Zugänge (Punkt 483) */
.zg-dienst{padding:14px 16px;margin:10px 0}
.zg-dienst .hinweis,.zg-dienst .warn{margin:6px 0 4px}
.zg-dienst .mk{display:block;margin:8px 0 4px}
.zg-dienst .feld{display:block;width:100%;margin:0}
.zg-dienst .dlg-btn{margin-top:10px}
/* Einheitlicher Stand und alte Marke als eine Gruppe (Punkt 522). */
.ek-marken{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center}
/* ==========================================================================
   Ausgabe von Listen — das Fenster hinter dem Knopf „Ausgeben"

   Farben ausschliesslich aus den Hausvariablen. Fuer Text steht --grau
   (#5A6B7A, rund 5,5:1 auf Weiss) und nie --grau-hell — das reicht mit
   gut 3:1 nicht fuer Fliesstext.
   ========================================================================== */

.ex-fenster .dlg-in { max-width: 560px; }

.ex-teil { margin: 0 0 16px; }
.ex-teil:last-child { margin-bottom: 4px; }

.ex-marke {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grau);
  letter-spacing: .01em;
  margin: 0 0 6px;
}

/* Die vier Formate als gleichwertige Flaechen. Kein Ausklappfeld: welche
   Formate es gibt, soll man sehen, ohne zu suchen. */
.ex-formate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}
.ex-f {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 11px;
  border: 1px solid var(--linie-satt);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--tinte);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ex-f:hover { border-color: var(--marke); }
.ex-f b { font-size: 14px; font-weight: 650; }
.ex-f span { font-size: 11.5px; color: var(--grau); line-height: 1.3; }
.ex-f.an {
  border-color: var(--marke);
  background: var(--marke-hell);
  box-shadow: inset 0 0 0 1px var(--marke);
}
.ex-f.an span { color: var(--marke-tief); }

.ex-paar { display: flex; align-items: center; gap: 8px; }
.ex-paar .feld { flex: 1; }
.ex-bis { color: var(--grau); font-size: 13px; flex: 0 0 auto; }

.ex-teil select.feld { margin-bottom: 8px; }
.ex-teil select.feld:last-child { margin-bottom: 0; }

.ex-hin {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--grau);
}

/* Die Spaltenwahl steht zugeklappt — sie wird selten gebraucht, soll aber
   nicht versteckt sein. */
.ex-spalten > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--marke-tief);
  padding: 8px 0;
  list-style: none;
}
.ex-spalten > summary::-webkit-details-marker { display: none; }
.ex-spalten > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 7px;
  color: var(--grau);
  transition: transform .12s;
}
.ex-spalten[open] > summary::before { transform: rotate(90deg); }
.ex-spalten > summary:hover { color: var(--marke); }

.ex-spaltenliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 2px 12px;
  max-height: 34vh;
  overflow: auto;
  padding: 2px 1px 2px 0;
}
.ex-sp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  font-size: 13.5px;
  color: var(--tinte);
  cursor: pointer;
}
.ex-sp input { flex: 0 0 auto; }
.ex-sp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 620px) {
  .ex-formate { grid-template-columns: repeat(2, 1fr); }
  .ex-spaltenliste { grid-template-columns: 1fr; max-height: 30vh; }
  .ex-paar { flex-wrap: wrap; }
  .ex-paar .feld { flex: 1 1 100%; }
  .ex-bis { display: none; }
}
/* ============================================================================
   Kunden — Kartei und Akte.

   Zwei Gestaltungsentscheidungen, die nicht Geschmack sind:

   1. „Vermutet" wird nicht ausgegraut. Der naheliegende Weg wäre gewesen,
      unsichere Ereignisse blass zu setzen — auf #F4F7FA reißt blasser Text
      den Kontrast unter 3:1, und dann ist die Zeile nicht mehr vorsichtig,
      sondern unlesbar. Stattdessen: normale Schriftfarbe, ein bernsteinfarbener
      Balken links und der Grund darunter. Wer die Zeile liest, sieht die
      Einschränkung; wer sie nicht liest, verliert nichts.

   2. Rot bleibt für Geld reserviert, das fehlt. Überfällige Forderungen und
      sonst nichts. Eine Oberfläche, in der auch „Feld leer" rot ist, hat nach
      einer Woche kein Rot mehr.

   Seit dem 12.09.2026 gilt hier das Muster aller Ansichten: EINE Leiste über
   dem Inhalt, Kacheln als Filter, Seltenes im „…"-Menü. Die Regeln für
   .leiste, .filter, .segment, .menue kommen aus 01/02 — hier steht nur, was
   die Kundenansicht darüber hinaus braucht.
   ========================================================================== */

/* .leise ist im Grundstil nicht als eigene Klasse definiert (nur als td.leise)
   — sie fiel hier still auf Schwarz zurück. Deshalb im eigenen Rahmen. */
.kd .leise{ font-size:12.5px; color:var(--grau); line-height:1.5; }
.kd .leise b{ color:var(--tinte); }

/* ---------------------------------------------------------- Leiste */
.kd-filter{ flex:1 1 auto; min-width:0; }
.kd-sel{
  width:auto; padding:6px 30px 6px 12px; font-size:13px; font-weight:650;
  color:var(--tinte-2); border-radius:999px; border:1px solid var(--linie);
  background:#0F1E2D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/13px;
  -webkit-appearance:none; appearance:none; cursor:pointer; flex:0 0 auto; max-width:230px;
}
.kd-sel.an{ background-color:var(--nacht); color:#fff; border-color:var(--marke); }
/* Die Optionen erben sonst Weiß auf Weiß, wo der Browser die Liste selbst zeichnet. */
.kd-sel option{ color:var(--tinte); background:#0F1E2D; }
.kd-sel:focus{ outline:0; border-color:var(--marke); box-shadow:0 0 0 3px rgba(123,193,244,0.13); }
.kd-sort-handy{ display:none; }
.kd-leiste-huelle .leiste-r .btn{ flex:0 0 auto; min-width:0; }

/* ---------------------------------------------------------- Zahlenleiste */
.kd-zahlen{ display:grid; gap:10px; margin-bottom:10px; }
.kd-drei{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.kd-vier{ grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:14px; }
.kd-zahl{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); padding:12px 14px; text-align:left;
  font:inherit; color:inherit; display:block; width:100%; min-width:0;
}
button.kd-zahl{ cursor:pointer; transition:border-color .12s, box-shadow .12s; }
button.kd-zahl:hover{ border-color:var(--linie-satt); box-shadow:var(--schatten-hoch); }
.kd-zahl.an{ border-color:var(--marke); box-shadow:0 0 0 1px var(--marke), var(--schatten); }
.kd-zahl-wert{ display:block; font-size:21px; font-weight:650; color:var(--tinte); line-height:1.2;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kd-zahl-text{ display:block; font-size:12px; color:var(--grau); margin-top:3px; }
.kd-zahl.kd-achtung{ border-color:var(--amber-linie); background:var(--amber-bg); }
.kd-zahl.kd-achtung .kd-zahl-wert{ color:var(--amber); }
.kd-zahl.kd-rot{ border-color:var(--rot-linie); background:var(--rot-bg); }
.kd-zahl.kd-rot .kd-zahl-wert{ color:var(--rot); }

/* Graue Zeile unter den Kacheln: was keine Kachel mehr ist. */
.kd-nebenzahlen{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 2px 14px; font-size:12.5px; color:var(--grau); }
.kd-neben{ background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:var(--grau); }
button.kd-neben{ cursor:pointer; }
button.kd-neben:hover, .kd-neben.an{ color:var(--tinte); }
.kd-neben b{ color:var(--tinte); font-weight:700; font-variant-numeric:tabular-nums; }
.kd-neben.an b{ text-decoration:underline; text-underline-offset:3px; }

/* ---------------------------------------------------------- Datenpflege-Hinweise
   Eine Zeile, aufklappbar. Bernstein, weil es Pflege ist und kein Geld. */
.kd-hinweise{
  background:var(--amber-bg); border:1px solid var(--amber-linie); border-radius:var(--radius);
  margin-bottom:14px; overflow:hidden;
}
.kd-hinweise-kopf{
  display:flex; align-items:center; gap:9px; width:100%; border:0; background:none;
  padding:10px 14px; font:inherit; font-size:13px; color:var(--amber); cursor:pointer; text-align:left;
}
.kd-hinweise-kopf svg{ width:16px; height:16px; flex:0 0 auto; }
.kd-hinweise-kopf b{ flex:1 1 auto; font-weight:700; }
.kd-hinweise-kopf span{ text-decoration:underline; text-underline-offset:2px; font-weight:650; }
.kd-hinweise-kopf:hover{ background:rgba(0,0,0,.03); }
.kd-hinweis-block{ padding:10px 14px 12px; border-top:1px solid var(--amber-linie); background:var(--flaeche); }
.kd-hinweis-block h4{ margin:0 0 4px; font-size:13px; color:var(--tinte); }
.kd-hinweis-block .kd-punkt{ font-size:12.5px; }

/* ---------------------------------------------------------- Kartei-Tafel */
.kd-tafel-karte{ overflow:visible; }
.kd-tafel{ width:100%; border-collapse:collapse; font-size:13px; }
.kd-tafel th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--grau); font-weight:600; padding:9px 10px;
  border-bottom:1px solid var(--linie-satt); background:var(--flaeche-2); white-space:nowrap;
}
.kd-tafel-karte .kd-tafel th:first-child{ border-top-left-radius:var(--radius-gross); }
.kd-tafel-karte .kd-tafel th:last-child{ border-top-right-radius:var(--radius-gross); }
.kd-tafel td{ padding:8px 10px; border-bottom:1px solid var(--linie); vertical-align:middle; }
.kd-tafel tbody tr:last-child td{ border-bottom:0; }
.kd-kartei .kd-tafel tbody tr{ cursor:pointer; }
.kd-kartei .kd-tafel tbody tr:hover{ background:var(--marke-hell); }
.kd-tafel td.kd-rechts, .kd-tafel th.kd-rechts{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kd-tafel td.kd-mitte, .kd-tafel th.kd-mitte{ text-align:center; white-space:nowrap; }
.kd-tafel th.kd-rechts .kd-sortkopf{ justify-content:flex-end; }
.kd-name div:first-child{ font-weight:600; color:var(--tinte); }
.kd-nr{ font-size:11px; color:var(--grau); }
.kd-marken-zelle{ white-space:nowrap; }
.kd-marken-zelle .marke, .kd-marken-zelle .chip{ margin-right:4px; }
.kd-marken-zelle .marke:last-child, .kd-marken-zelle .chip:last-child{ margin-right:0; }
.kd-leer{ text-align:center; color:var(--grau); padding:22px 8px; }
.kd-rot-text{ color:var(--rot); font-weight:600; }

/* Sortierbarer Spaltenkopf: sieht aus wie der Kopf, ist aber ein Knopf. */
.kd-sortkopf{
  background:none; border:0; padding:0; font:inherit; font-size:inherit; font-weight:inherit;
  text-transform:inherit; letter-spacing:inherit; color:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:3px;
}
.kd-sortkopf:hover, .kd-sortkopf.an{ color:var(--tinte); }
.kd-pfeil{ display:inline-flex; width:12px; height:12px; }
.kd-pfeil svg{ width:12px; height:12px; }
.kd-pfeil.ab{ transform:rotate(180deg); }

/* ---------------------------------------------------------- Marken */
.kd-art-gewerbe{ background:var(--gruen-bg); color:var(--gruen); border:1px solid var(--gruen-linie); }
.kd-art-kommune{ background:var(--lila-bg); color:var(--lila); border:1px solid var(--lila-linie); }
.kd-art-privat{ background:var(--tuerkis-bg); color:var(--tuerkis); border:1px solid var(--tuerkis-linie); }
.kd-art-leer{ background:var(--flaeche-2); color:var(--grau); border:1px solid var(--linie-satt); }
.kd-stand-aktiv{ background:var(--gruen-bg); color:var(--gruen); border:1px solid var(--gruen-linie); }
.kd-stand-ruhend{ background:var(--flaeche-2); color:var(--tinte-2); border:1px solid var(--linie-satt); }
.kd-stand-schlafend{ background:var(--flaeche-2); color:var(--grau); border:1px solid var(--linie-satt); }
.kd-stand-gesperrt{ background:var(--rot-bg); color:var(--rot); border:1px solid var(--rot-linie); }
.kd-vermutet-marke{ background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-linie); }
.kd-luecke-chip{ background:var(--amber-bg); color:var(--amber); border-color:var(--amber-linie); }
.kd-bindung{ background:var(--gruen-bg); color:var(--gruen); border-color:var(--gruen-linie); cursor:default; }
.kd-bindung:hover{ background:var(--gruen-bg); border-color:var(--gruen-linie); }

/* ---------------------------------------------------------- Aktenkopf */
.kd-kopf{ padding:14px 17px 13px; }
.kd-kopf-zeile{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 14px; }
.kd-kopf-text{ flex:1 1 260px; min-width:0; }
.kd-titel{ margin:0; font-size:20px; line-height:1.25; color:var(--tinte); word-break:break-word; }
.kd-unter{ font-size:12.5px; color:var(--grau); margin-top:3px; }
.kd-art-offen-text{ color:var(--amber); font-weight:650; }
.kd-marken{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; flex:0 1 auto; padding-top:3px; }
.kd-zurueck{ flex:0 0 auto; }
.kd-notiz-knopf{ flex:0 0 auto; }

/* Fehlt: … — eine Zeile im Kopf, bernstein. */
.kd-fehlt{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px; margin-top:11px;
  padding:7px 11px; border-radius:9px; font-size:12.5px;
  background:var(--amber-bg); border:1px solid var(--amber-linie); color:var(--amber);
}
.kd-fehlt svg{ width:15px; height:15px; flex:0 0 auto; }
.kd-fehlt b{ font-weight:700; }
.kd-fehlt > span{ flex:1 1 auto; min-width:0; color:var(--tinte-2); font-weight:600; }
.kd-fehlt-wort{ color:var(--amber); font-weight:700; cursor:help; }
.kd-fehlt .kd-punkt{ font-size:12.5px; }
.kd-info{ width:24px; height:24px; flex:0 0 auto; vertical-align:middle; }
.kd-info svg{ width:13px; height:13px; }
h3 .kd-info, h4 .kd-info{ margin-left:4px; }
details.menue > summary.kd-info{ padding:0; }

/* Sprungmarken: der Anker liegt sonst hinter dem klebenden Kopf. */
.kd-akte .karte[id]{ scroll-margin-top:calc(var(--kopf-hoch) + 12px); }

/* ---------------------------------------------------------- Reiter der Akte
   Vier Reiter im Segment der Leiste; alle vier Inhalte sind gebaut, nur
   einer sichtbar. Die Zahl am Reiter ist grau — der rote Punkt des Segments
   (02-bausteine) ist für Warnungen, „111 Ereignisse" ist keine. */
.kd-reiter-n{
  font-size:11px; font-weight:700; color:var(--grau); line-height:1.5;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:999px; padding:0 6px;
  font-variant-numeric:tabular-nums;
}
.segment button.an .kd-reiter-n{ color:var(--tinte-2); background:var(--flaeche-2); border-color:var(--linie-satt); }
.kd-reiter-inhalt{ display:none; scroll-margin-top:calc(var(--kopf-hoch) + 12px); }
.kd-reiter-inhalt.an{ display:block; }

/* „alle N zeigen" unter einer gekürzten Tabelle. */
.kd-mehr{ padding:9px 17px 12px; border-top:1px solid var(--linie); }
.kd-mehr .kd-punkt{ font-size:12.5px; }
.kd-verlauf + .kd-mehr, .kd-leib + .kd-mehr{ border-top:1px solid var(--linie); }

/* Zettel „Anruf · Name — im Verlauf festhalten?" unter dem Kopf. Marke, nicht
   Bernstein: es fehlt nichts, es ist eine Frage. */
.kd-zettel{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px;
  margin-bottom:12px; padding:9px 14px; border-radius:var(--radius); font-size:13px; color:var(--tinte);
  background:var(--marke-hell); border:1px solid var(--marke);
}
.kd-zettel > span{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
.kd-zettel svg{ width:16px; height:16px; flex:0 0 auto; color:var(--marke-tief); }
.kd-zettel b{ color:var(--marke-tief); }
.kd-zettel-tat{ display:flex; gap:6px; flex:0 0 auto; }
.kd-zettel .btn.klein{ flex:0 0 auto; min-width:0; }

/* Orte: eine Liste, die Art als Marke davor; vermutete Zuordnung mit Balken. */
.kd-ort-art{ margin-right:7px; vertical-align:1px; }
.kd-ort.kd-ort-vermutet{ border-left:3px solid var(--amber); padding-left:10px; margin-left:-13px; }
.kd-ort .kd-zeile-tat{ gap:10px; }
.kd-ort .chips{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.kd-ev-tat{ margin-left:auto; }
.kd-ev-tat details.menue > summary{ padding:2px 6px; min-height:0; }

/* ---------------------------------------------------------- Blöcke
   .karte hat selbst kein Padding — das liefern .kopfzeile und hier .kd-leib. */
.kd-leib{ padding:0 17px 15px; }
.kd-leib.leise{ padding-bottom:15px; }
.kd .kopfzeile h3{ margin:0; font-size:15px; font-weight:750; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kd .kopfzeile .chip.wort{ font-size:11.5px; padding:2px 8px; }
.kd .kopfzeile .btn.klein{ flex:0 0 auto; min-width:0; }
.kd .kopfzeile > .kd-punkt{ flex:0 0 auto; align-self:center; }
.kd-abschnitt{ margin-top:14px; padding-top:12px; border-top:1px solid var(--linie); }
.kd-abschnitt h4{ margin:0 0 6px; font-size:13px; color:var(--tinte); display:flex; align-items:center; }
.kd-gitter{
  display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.kd-feld{
  background:var(--flaeche-2); border:1px solid var(--linie);
  border-radius:10px; padding:8px 10px;
}
.kd-feld span{ display:block; font-size:11px; color:var(--grau); }
.kd-feld b{ display:block; color:var(--tinte); word-break:break-word; }
.kd-feld b .leise{ font-weight:600; }
.kd-art-zeile{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:13px; color:var(--tinte); }
.kd-art-zeile > span:first-child{ font-weight:650; }
.kd-art-knoepfe{ margin-top:8px; }
.kd-herkunft{ margin-top:10px; }
.kd-zeile{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--linie);
}
.kd-zeile:last-child{ border-bottom:none; }
.kd-zeile > div:first-child{ min-width:0; flex:1 1 auto; }
.kd-zeile-tat{ display:flex; gap:6px; align-items:center; flex:0 0 auto; }
.kd-zeile-tat .btn.klein{ padding:5px 8px; min-width:0; flex:0 0 auto; }
.kd-zeile .btn.klein{ flex:0 0 auto; min-width:0; }

/* Ein Textknopf. Sieht aus wie ein Verweis, ist aber einer, den man drückt. */
.kd-punkt{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--marke); font:inherit; font-size:12px; font-weight:600; text-decoration:underline;
  text-underline-offset:2px;
}
.kd-punkt:hover{ color:var(--marke-tief); }

/* ---------------------------------------------------------- Altsystem */
.kd-reg-liste{ margin-top:8px; }
.kd-reg-name{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--linie); font-size:13px;
}
.kd-reg-name:last-child{ border-bottom:none; }
.kd-reg-name > span:first-child{ flex:1 1 200px; color:var(--tinte); }
.kd-reg-name .btn.klein{ flex:0 0 auto; min-width:0; }
.kd-passt{ background:var(--gruen-bg); border-radius:8px; padding:6px 8px; }

/* Warnkasten ohne die Lesebreite und Einrückung, die .warn in Karten hat. */
.kd-befund{ margin:0 0 12px; width:100%; max-width:none; box-sizing:border-box; padding:10px 14px; }
.kd-form .kd-befund{ margin-bottom:10px; }

/* ---------------------------------------------------------- Verlauf */
.kd-verlauf-kopf{ align-items:center; }
.kd-verlauf-filter{ margin:0; padding:0; flex:0 1 auto; justify-content:flex-end; }
.kd-verlauf{ display:flex; flex-direction:column; }
.kd-ev{
  display:flex; gap:12px; padding:9px 0 9px 10px;
  border-bottom:1px solid var(--linie); border-left:3px solid transparent;
}
.kd-ev:last-child{ border-bottom:none; }
/* Nur der Balken, keine Fläche. Bei einem Kunden mit 44 Altsystem-Rechnungen
   wäre sonst die ganze Zeitleiste bernsteinfarben — und eine Farbe, die alles
   einfärbt, sagt nichts mehr. */
.kd-ev.kd-vermutet{ border-left-color:var(--amber); }
.kd-ev-zeit{
  flex:0 0 84px; font-size:12px; color:var(--grau); padding-top:1px;
  font-variant-numeric:tabular-nums;
}
.kd-ev-leib{ flex:1 1 auto; min-width:0; }
.kd-ev-kopf{ display:flex; flex-wrap:wrap; gap:7px; align-items:baseline; }
.kd-ev-kopf b{ color:var(--tinte); font-weight:600; }
.kd-ev-art{
  font-size:10px; text-transform:uppercase; letter-spacing:.04em; font-weight:700;
  padding:2px 6px; border-radius:6px; white-space:nowrap;
}
.kd-g-geld{ background:var(--marke-hell); color:var(--marke-tief); }
.kd-g-post{ background:var(--tuerkis-bg); color:var(--tuerkis); }
.kd-g-arbeit{ background:var(--gruen-bg); color:var(--gruen); }
.kd-g-ablage{ background:var(--lila-bg); color:var(--lila); }
.kd-ev-geld{ font-weight:650; color:var(--tinte); font-variant-numeric:tabular-nums; }
.kd-ev-text{ font-size:12px; color:var(--tinte-2); margin-top:2px; word-break:break-word; }
.kd-ev-grund{ font-size:11px; color:var(--grau); margin-top:3px; font-style:italic; }

/* ---------------------------------------------------------- Formulare */
.kd-form{ border:1px solid var(--marke); box-shadow:0 0 0 3px rgba(123,193,244,0.1); }
.kd-form .kd-leib{ padding-top:20px; }
.kd-form h4{ margin:0 0 10px; font-size:14px; color:var(--tinte); }
.kd-form-gitter{ display:grid; gap:0 12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.kd-form-reihe{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:flex-end; margin-top:8px; }
.kd-form-reihe .kd-eingabe{ flex:0 1 220px; margin-bottom:8px; }
.kd-form-hinweis{ flex:1 1 240px; padding-bottom:10px; }
.kd-form-knoepfe{ margin-top:6px; }
.kd-form-knoepfe .btn{ flex:0 0 auto; min-width:0; }
.kd-eingabe{ display:block; margin-bottom:8px; }
.kd-eingabe span{ display:block; font-size:11px; color:var(--grau); margin-bottom:3px; }
.kd-eingabe input, .kd-eingabe select{
  width:100%; padding:8px 10px; font:inherit; color:var(--tinte);
  background:var(--flaeche); border:1px solid var(--linie-satt); border-radius:9px;
}
.kd-eingabe input:focus, .kd-eingabe select:focus, .kd-textfeld:focus{
  outline:2px solid var(--marke); outline-offset:1px;
}
.kd-textfeld{
  width:100%; padding:8px 10px; font:inherit; color:var(--tinte);
  background:var(--flaeche); border:1px solid var(--linie-satt);
  border-radius:9px; resize:vertical; min-height:70px;
}
.kd-dialog .kd-eingabe{ margin-bottom:10px; }
.kd-notiz-dialog .dlg-in{ max-width:560px; }
.kd-notiz-dialog .kd-notiz-arten{ margin:0 0 10px; padding:0; }
.kd-notiz-dialog .kd-textfeld{ margin-bottom:10px; }
.kd-notiz-dialog .kd-form-gitter{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* ---------------------------------------------------------- Drucken */
@media print{
  .kd-leiste-huelle, .kd-form, .kd-zeile-tat, .kd .kopfzeile .btn, .kd .kopfzeile .kd-punkt,
  .kd-verlauf-filter, .kd-art-knoepfe, .kd-punkt, .kd-info, .kd-zettel, .kd-mehr, .kd-ev-tat{ display:none !important; }
  /* Gedruckt wird die ganze Akte, nicht der offene Reiter. */
  .kd-reiter-inhalt{ display:block !important; }
}

/* ---------------------------------------------------------- Handy
   Die Kartei ist am Schreibtisch eine Tabelle. Am Handy wird jede Zeile ein
   Block — sieben Spalten auf 390 Punkten wären sieben unleserliche Spalten.
   Die Leiste bleibt EINE Zeile: Pills und Selects schieben sich seitlich,
   rechts stehen die Knöpfe ohne Wort.

   Die Selektoren tragen hier den Rahmen (.kd, .kd-leiste-huelle) mit: die
   Handy-Regeln aus 04-geraete.css (.btn{flex:1 1 auto;min-width:118px})
   kommen NACH dieser Datei und gewännen sonst bei gleicher Spezifität — der
   Zurück-Knopf war so 118 px breit und schob die Sprungmarken weg. */
@media (max-width:900px){
  /* Fester Auslauf statt 92 %: bei einer langen Pillenreihe lag der Prozentwert
     mitten im letzten Wort, und das stiess an den +-Knopf (Befund 17.09.2026).
     Dazu 14 px Luft hinter der letzten Pille. */
  .kd-leiste-huelle .leiste-l{ flex:1 1 0; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    padding-bottom:2px; }
  /* Hier scrollt die ganze .leiste-l, nicht die .filter darin — der Streifen
     muss deshalb an ihr haengen (siehe 04-geraete.css). */
  .kd-leiste-huelle .leiste-l::after { content:"";position:sticky;right:0;z-index:1;
    flex:0 0 46px;margin-left:-46px;align-self:stretch;pointer-events:none;
    background:linear-gradient(to right,rgba(10,21,32,0),var(--grund)); }
  .kd-leiste-huelle .leiste-l::-webkit-scrollbar{ display:none; }
  .kd-leiste-huelle .leiste-l .filter{ flex:0 0 auto; overflow:visible; mask-image:none; -webkit-mask-image:none; margin:0; padding:0; }
  .kd-leiste-huelle .leiste-r{ flex:0 0 auto; gap:6px; }
  .kd-leiste-huelle .leiste-r .btn, .kd-leiste-huelle .leiste-l .btn{ flex:0 0 auto; min-width:0; }
  .kd-leiste-huelle .kd-sel{ flex:0 0 auto; padding:7px 28px 7px 11px; font-size:12.5px; max-width:none; }
  .kd-leiste-huelle .kd-sort-handy{ display:inline-block; }
  .kd-leiste-huelle .kd-neu span, .kd-leiste-huelle .kd-notiz-knopf span,
  .kd-leiste-huelle .kd-kontakt-knopf span, .kd-leiste-huelle .kd-zurueck span{ display:none; }
  .kd-leiste-huelle .kd-neu, .kd-leiste-huelle .kd-notiz-knopf,
  .kd-leiste-huelle details.menue > summary.kd-kontakt-knopf{ width:40px; height:40px; padding:0; border-radius:50%; }
  .kd-leiste-huelle .kd-neu svg, .kd-leiste-huelle .kd-notiz-knopf svg,
  .kd-leiste-huelle .kd-kontakt-knopf svg{ width:18px; height:18px; }
  .kd-leiste-huelle .kd-zurueck{ width:36px; height:36px; padding:0; border-radius:50%; margin-right:2px; }
  .kd-leiste-huelle .kd-reiter{ flex:0 0 auto; }

  /* Eine Zeile mit drei Zahlen: ein Streifen, drei Felder, tippbar. */
  .kd-kartei .kd-drei{ display:flex; gap:0; margin-bottom:8px; background:var(--flaeche);
    border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; }
  .kd-kartei .kd-drei .kd-zahl{ flex:1 1 0; min-width:0; border:0; border-radius:0; padding:9px 6px; text-align:center;
    border-left:1px solid var(--linie); background:var(--flaeche); box-shadow:none; }
  .kd-kartei .kd-drei .kd-zahl:first-child{ border-left:0; }
  .kd-kartei .kd-drei .kd-zahl.kd-achtung{ background:var(--amber-bg); }
  .kd-kartei .kd-drei .kd-zahl.kd-rot{ background:var(--rot-bg); }
  .kd-kartei .kd-drei .kd-zahl.an{ box-shadow:inset 0 -3px 0 var(--marke); }
  .kd-kartei .kd-drei .kd-zahl-wert{ display:inline; font-size:15px; }
  .kd-kartei .kd-drei .kd-zahl-text{ display:inline; font-size:11.5px; margin:0 0 0 4px; }
  .kd-kartei .kd-nebenzahlen{ gap:3px 12px; margin:0 2px 10px; font-size:12px; }
  .kd-kartei .kd-nebenzahlen .kd-neben{ font-size:12px; }
  .kd-neben-hinweis{ color:var(--amber); align-items:center; gap:4px; }
  .kd-neben-hinweis b{ color:var(--amber); }
  .kd-neben-hinweis svg{ width:14px; height:14px; }
  /* Zu: die Zeile steht schon in den Nebenzahlen. Auf: die Blöcke zeigen. */
  .kd-kartei .kd-hinweise:not(.auf){ display:none; }
  .kd-kartei .kd-hinweise{ margin-bottom:10px; }
  .kd-kartei .kd-hinweise-kopf{ padding:9px 12px; }

  .kd-akte .kd-vier{ grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
  .kd-akte .kd-vier .kd-zahl{ padding:8px 11px; border-radius:10px; }
  .kd-akte .kd-vier .kd-zahl-wert{ font-size:17px; }
  .kd-akte .kd-vier .kd-zahl-text{ font-size:11px; margin-top:1px; }

  .kd-kartei .kd-tafel thead{ display:none; }
  .kd-kartei .kd-tafel-karte .tab-fuss{ border-radius:0 0 var(--radius) var(--radius); }
  .kd-kartei .kd-tafel, .kd-kartei .kd-tafel tbody, .kd-kartei .kd-tafel tr, .kd-kartei .kd-tafel td{ display:block; width:auto; }
  .kd-kartei .kd-tafel tr{ padding:10px 14px; border-bottom:1px solid var(--linie); }
  .kd-kartei .kd-tafel tbody tr:last-child{ border-bottom:0; }
  .kd-kartei .kd-tafel td{ border:none; padding:1px 0; }
  .kd-kartei .kd-tafel td.kd-name div:first-child{ font-size:14.5px; }
  .kd-kartei .kd-tafel td.kd-rechts, .kd-kartei .kd-tafel td.kd-mitte{ display:inline-block; text-align:left; margin-right:12px; font-size:12.5px; color:var(--tinte-2); }
  .kd-kartei .kd-tafel td[data-l]::before{ content:attr(data-l) ": "; color:var(--grau); }
  .kd-kartei .kd-tafel td.kd-marken-zelle{ white-space:normal; padding-top:4px; margin-right:0; }
  .kd-kartei .kd-tafel td:empty{ display:none; }

  /* Tabellen in der Akte (Rechnungen, Angebote, Altsystem): schieben statt stauchen. */
  .kd-akte .karte{ overflow-x:auto; }
  .kd-akte .kd-tafel{ min-width:520px; }
  .kd-akte .karte[id]{ scroll-margin-top:calc(var(--kopf-hoch) + 62px); }

  .kd-akte .kd-kopf{ padding:12px 15px 12px; }
  .kd-akte .kd-titel{ font-size:18px; }
  .kd-akte .kd-fehlt{ margin-top:9px; }
  .kd .kd-leib{ padding:0 15px 13px; }
  .kd .kopfzeile .btn.klein{ flex:0 0 auto; min-width:0; padding:6px 11px; }
  .kd .kd-zeile-tat .btn.klein{ padding:5px 8px; }
  .kd .kd-reg-name .btn.klein, .kd .kd-zeile .btn.klein{ flex:0 0 auto; min-width:0; }
  .kd .kd-form-knoepfe .btn{ flex:1 1 auto; }
  .kd .kd-art-knoepfe .btn{ flex:0 0 auto; min-width:0; }
  .kd-akte .kd-ev{ flex-direction:column; gap:3px; }
  .kd-akte .kd-reiter-inhalt{ scroll-margin-top:calc(var(--kopf-hoch) + 62px); }
  /* Die vier Reiter passen neben Zurück, Notiz, Kontakt und „…" nicht in eine
     Zeile — am Handy stehen sie als eigene Zeile darunter, vier gleich breite
     Felder, ohne Zahl. display:contents löst .leiste-l auf, damit das Segment
     in der Leiste umbrechen kann. */
  .kd-akte-leiste .leiste{ flex-wrap:wrap; row-gap:8px; }
  .kd-akte-leiste .leiste-l{ display:contents; }
  .kd-akte-leiste .kd-reiter{ order:5; flex:1 1 100%; display:flex; }
  .kd-akte-leiste .kd-reiter button{ flex:1 1 0; min-width:0; justify-content:center; padding:7px 4px; }
  .kd-akte-leiste .kd-reiter-n{ display:none; }
  .kd-notiz-dialog .kd-notiz-arten{ flex-wrap:wrap; overflow:visible; mask-image:none; -webkit-mask-image:none; }
  .kd-zettel{ padding:8px 12px; }
  .kd-zettel .btn.klein{ flex:0 0 auto; min-width:0; padding:6px 11px; }
  .kd-ort .kd-zeile-tat{ flex-direction:column; align-items:flex-end; gap:4px; }
  .kd-notiz-dialog .kd-notiz-arten button{ min-height:36px; }
  .kd-akte .kd-ev-zeit{ flex:0 0 auto; }
  .kd-akte .kd-verlauf-kopf{ flex-direction:column; align-items:stretch; gap:8px; }
  .kd-akte .kd-verlauf-filter{ justify-content:flex-start; margin:0; padding:0; mask-image:none; -webkit-mask-image:none; }
}
/* ============================================================ Startseite */
/* Die Zahl, die zaehlt, steht oben und ohne Konkurrenz. */
.um-kopfzahl{background:linear-gradient(135deg,#14324E 0%,#10273D 55%,#0D2033 100%);border:1px solid var(--linie-satt);
  color:var(--tinte);border-radius:var(--radius-gross);padding:24px 26px 22px;margin-bottom:14px;
  box-shadow:0 8px 24px -10px rgba(0,0,0,0.7);position:relative;overflow:hidden}
.um-kopfzahl::after{content:"";position:absolute;right:-60px;top:-70px;width:260px;height:260px;
  border-radius:50%;background:rgba(255,255,255,.05)}
.um-label{font-size:11.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:#A9C8E0}
.um-gross{font-size:40px;font-weight:800;letter-spacing:-.025em;margin-top:4px;line-height:1.05}
.um-unter{margin-top:8px;font-size:13.5px;color:#CBDDEC}
.um-auf{font-weight:800;color:#A5E9BF}
.um-ab{font-weight:800;color:#FFB4BE}

.um-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.um-karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--schatten)}
/* Als Knopf gebaut: der Browser gibt einem <button> sonst zentrierten Text,
   eigene Schrift und einen grauen Grund mit. */
.um-klick{display:block;width:100%;text-align:left;font:inherit;color:inherit;
  cursor:pointer;transition:border-color .14s,box-shadow .14s}
.um-klick:hover{border-color:var(--linie-satt);box-shadow:var(--schatten-hoch)}
.um-klick:active{transform:translateY(1px)}
.um-karte.warn{border-color:var(--rot-linie);background:linear-gradient(180deg,#142739,#0F1E2D)}
.um-k-label{font-size:12px;font-weight:650;color:var(--grau)}
.um-k-wert{font-size:25px;font-weight:800;color:var(--tinte);margin-top:3px;letter-spacing:-.02em;line-height:1.15}
.um-rot{color:var(--rot)}
.um-k-sub{font-size:12px;color:var(--grau);margin-top:3px;line-height:1.45}

.um-block{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross);
  padding:18px 20px 16px;margin-bottom:18px;box-shadow:var(--schatten)}

/* ============================================================ Mahnwesen */
.mahn-zeile{font-size:13.5px;color:var(--tinte-2);line-height:1.7}
.um-titel{font-size:14.5px;font-weight:750;color:var(--tinte);margin-bottom:14px;letter-spacing:-.01em}
.um-diagramm{display:flex;align-items:flex-end;gap:7px;height:170px}
.um-balken{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.um-saeule{background:linear-gradient(180deg,#3D94D4,var(--marke));border-radius:5px 5px 2px 2px;
  min-height:3px;transition:height .35s ease;position:relative}
.um-saeule:hover{filter:brightness(1.1)}
.um-saeule-jetzt{background:linear-gradient(180deg,#1A6EA8,var(--marke-tief))}
.um-bl{font-size:10.5px;color:var(--grau);text-align:center;margin-top:7px;white-space:nowrap;
  overflow:hidden;text-overflow:clip;font-weight:600}
.um-kunde{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--linie)}
.um-kunde:last-of-type{border-bottom:0}
.um-kname{flex:1 1 auto;min-width:0;font-size:14px;color:var(--tinte);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.um-kbar{flex:0 0 110px;height:8px;background:var(--grund);border-radius:999px;overflow:hidden}
.um-kbar div{height:100%;background:linear-gradient(90deg,var(--marke),#4FA0DA);border-radius:999px}
.um-kwert{flex:0 0 100px;text-align:right;font-size:14px;font-weight:750;color:var(--tinte)}
.um-kwert span{display:block;font-size:11.5px;font-weight:600;color:var(--grau)}

/* KPI-Kacheln (Betriebszahlen) */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:11px;margin-bottom:22px}

.dash-abschnitt{font-size:13px;color:var(--grau);font-weight:750;margin:24px 2px 10px;
  letter-spacing:.02em;text-transform:uppercase;font-size:11.5px}
.dash-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;
  background:#0F1E2D;border:1px solid var(--linie);border-radius:var(--radius);margin-bottom:7px;
  cursor:pointer;transition:border-color .14s}
.dash-zeile:hover{border-color:var(--linie-satt);background:var(--flaeche-2)}
.dash-zeile .dz-l{min-width:0}
.dash-zeile .dz-titel{font-size:14px;font-weight:650}
.dash-zeile .dz-info{font-size:12.5px;color:var(--grau);margin-top:2px}
.dash-zeile .dz-datum{font-size:12.5px;font-weight:750;color:var(--marke-tief);white-space:nowrap;flex:0 0 auto}
.dash-zeile.dz-ueberfaellig{border-left:3px solid var(--rot)}
.dash-zeile.dz-ueberfaellig .dz-datum{color:var(--rot)}
/* Das Zeichen links sagt die Art der Zeile, bevor man den Text liest:
   Umschlag = Post, Uhr = Termin, Warndreieck = brennt. */
.dash-zeile .dz-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  background:var(--marke-hell);color:var(--marke-tief);
  display:flex;align-items:center;justify-content:center}
.dash-zeile .dz-ic svg{width:16px;height:16px}
.dash-zeile.dz-ueberfaellig .dz-ic{background:var(--rot-bg);color:var(--rot)}
.dash-zeile .dz-l{flex:1 1 auto}
/* Eine Zeile ohne Ziel darf sich nicht anfuehlen, als koennte man sie
   antippen — sonst tippt jemand dreimal und haelt die Seite fuer kaputt. */
.dash-zeile.dz-still{cursor:default}
.dash-zeile.dz-still:hover{border-color:var(--linie);background:#0F1E2D}

/* ========================================================== Posteingang */
.ei-notiz{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:13px 16px;margin-bottom:16px;font-size:13.5px;line-height:1.6;color:var(--tinte-2);max-width:80ch}
/* Etwas dunkler als das uebliche WhatsApp-Gruen: bei #128C4B kommt weisse
   Schrift nur auf 4.3:1 und verfehlt die Schwelle 4.5. */
.a-wa{background:#0E7A44}
.ei-rolle{flex:0 0 auto;background:var(--flaeche-2);color:var(--grau);border:1px solid var(--linie);
  font-size:11.5px;font-weight:650;padding:3px 10px;border-radius:999px}
.ei-rolle-spam{background:var(--rot-bg);color:var(--rot);border-color:var(--rot-linie)}
.ei-mehr{margin-top:6px;border:0;background:none;color:var(--marke);font:inherit;font-size:13px;
  font-weight:650;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.ei-voll{margin-top:9px;white-space:pre-wrap;font-size:13.5px;line-height:1.6;color:var(--tinte-2);
  padding:12px 13px;background:var(--flaeche-2);border:1px solid var(--linie);
  border-radius:10px;max-height:340px;overflow:auto}
.ei-medien{margin-top:9px;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--grau)}
.ei-medien svg{width:15px;height:15px}
.ei-marke{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grau);margin-bottom:4px}
.ei-marke-blau{color:var(--marke-tief)}
.ei-marke-lila{color:var(--lila)}
.ei-marke-gruen{color:var(--gruen)}
.ei-deutung{margin-top:14px;padding:13px 15px;background:var(--flaeche-2);
  border:1px solid var(--linie);border-radius:11px}
/* Handfeste Angaben aus der Nachricht: Frist und Betrag, jeweils nur wenn
   sie wirklich dringestanden haben. */
.ei-fakten{margin-top:11px;display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--linie);padding-top:10px}
.ei-fakt{display:flex;gap:10px;font-size:13.5px;line-height:1.5;align-items:baseline}
.ei-fakt-k{min-width:104px;flex:0 0 auto;color:var(--grau);font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.ei-fakt-w{color:var(--tinte);font-weight:650}
.ei-fakt-eilig{color:var(--rot);font-weight:700}
.ei-wartet-knopf{margin-top:10px}
.ei-verweise{margin-top:14px}
.ei-verweise .chips{margin-top:5px}
.ei-ausfuellen{margin-top:13px;padding:12px 14px;background:var(--gruen-bg);
  border:1px solid var(--gruen-linie);border-radius:11px}
.ei-felder{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.ei-feld{font-size:13px;color:var(--tinte);display:flex;gap:10px}
.ei-feld span{min-width:104px;color:var(--grau);font-weight:650;flex:0 0 auto}
.ei-grund{font-size:13.5px;line-height:1.55;color:var(--tinte-2)}
.ei-entwurf{width:100%;margin-top:11px;padding:11px 12px;border:1px solid var(--linie);
  border-radius:10px;font-family:inherit;font-size:14px;line-height:1.6;
  color:var(--tinte);background:#0F1E2D;resize:vertical}
.ei-entwurf:focus{outline:0;border-color:var(--marke);box-shadow:0 0 0 3px rgba(123,193,244,0.13)}
.ei-fuss{margin-top:8px;font-size:12px;color:var(--grau);line-height:1.5}
.ei-ruhig{margin-top:13px;font-size:13.5px;color:var(--grau)}
.ei-katwahl{display:flex;flex-wrap:wrap;gap:6px}
.ei-katknopf{border:1px solid var(--amber-linie);background:#0F1E2D;color:var(--amber);font:inherit;
  font-size:12.5px;font-weight:650;padding:6px 12px;border-radius:999px;cursor:pointer}
.ei-katknopf:hover{background:rgba(255,207,112,0.129)}
.ei-vorschlag-an{background:var(--amber);color:var(--auf-farbe);border-color:var(--amber)}
.ei .aktionen{padding:14px 17px 16px}

/* ======================================================== Kennzeichnung */
.karte.rand-auftrag{border-left:3px solid var(--lila)}
.karte.rand-frage{border-left:3px solid var(--tuerkis)}
.ruecktipp{margin:0 16px 12px;padding:10px 12px;background:var(--tuerkis-bg);color:var(--tuerkis);
  border:1px solid var(--tuerkis-linie);border-radius:9px;font-size:12.5px;font-weight:600;
  display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.ruecktipp svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}

/* =========================================================== Objekte */
.reklamation{margin:0;padding:12px 16px 6px;border-bottom:1px solid var(--linie)}
.reklamation.rekl-hoch{background:var(--rot-bg)}
.reklamation.rekl-mittel{background:var(--amber-bg)}
.reklamation.rekl-niedrig{background:var(--flaeche-2)}
.rekl-kopf{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:750}
.rekl-kopf svg{width:14px;height:14px;flex:0 0 auto}
.rekl-hoch .rekl-kopf{color:var(--rot)}
.rekl-mittel .rekl-kopf{color:var(--amber)}
.rekl-niedrig .rekl-kopf{color:var(--grau)}
.rekl-seit{font-weight:600;color:var(--grau);margin-left:auto}
.rekl-text{font-size:13px;color:var(--tinte);margin-top:5px;padding-left:21px;line-height:1.5}
.turnus-zeile{padding:12px 0;border-top:1px solid var(--linie)}
.turnus-zeile:first-child{border-top:0}
.turnus-intervall{font-size:12px;color:var(--grau);margin-left:8px}
.turnus-eingabe{display:flex;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.turnus-eingabe input{flex:2 1 160px}
.turnus-eingabe select{flex:1 1 120px}
.tz-check{flex:1 1 100%;min-height:60px;resize:vertical;font-family:inherit;font-size:13px}

/* Uebertragene Checkliste (Turnus-Abgleich, Punkt 112): rote Kante wie bei einer
   ueberfaelligen Rechnungszeile, nicht der gelbe Hinweiskasten .warn. */
.turnus-zeile.faellig{border-left:3px solid var(--rot);padding-left:11px;margin-left:-14px}
.turnus-kopf{min-width:0}
.checkliste{margin-top:8px;border:1px solid var(--linie);border-radius:8px;padding:8px 10px;background:var(--flaeche)}
.ck-fort{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;color:var(--grau);margin-bottom:5px}
.ck-zeile{display:flex;gap:8px;align-items:flex-start;padding:4px 0;font-size:13px;line-height:1.4;color:var(--tinte);cursor:pointer}
.ck-zeile input{margin-top:2px;flex:0 0 auto}
.ck-zeile.ck-ab span{text-decoration:line-through;color:var(--grau)}

/* ========================================================= Kennzahlen-Reihe */
.zuebersicht{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.zk{flex:1 1 160px;min-width:150px;border:1px solid var(--linie);border-radius:var(--radius);
  padding:12px 15px;background:#0F1E2D;color:var(--tinte);cursor:pointer;text-align:left;
  font-family:inherit;box-shadow:var(--schatten);transition:border-color .14s,box-shadow .14s}
.zk:hover{border-color:var(--linie-satt);box-shadow:var(--schatten-hoch)}
.zk .zk-l{display:block;font-size:11px;font-weight:750;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grau)}
.zk .zk-n{display:block;font-size:22px;font-weight:800;margin-top:3px;
  letter-spacing:-.02em;color:var(--tinte)}
.zk .zk-s{display:block;font-size:12px;margin-top:1px;color:var(--grau);font-weight:600}
.zk.an{border-color:var(--marke);box-shadow:0 0 0 1px var(--marke),var(--schatten)}
.zk.an .zk-l{color:var(--nacht-schrift)}
.zk-ueberfaellig .zk-n{color:var(--rot)}

/* =========================================================== Vorgaenge */
.vg-kopf{padding:15px 17px 9px}
.vg-titel{font-size:16px;font-weight:700;line-height:1.32;letter-spacing:-.01em}
.vg-meta{font-size:12.5px;color:var(--grau);margin-top:5px;display:flex;flex-wrap:wrap;gap:4px 12px}
.streifen{display:flex;gap:8px;overflow-x:auto;padding:2px 17px 14px;scrollbar-width:thin}
.streifen img{width:84px;height:84px;object-fit:cover;border-radius:10px;flex:0 0 auto;
  border:1px solid var(--linie);background:var(--grund);cursor:pointer}
.streifen img:hover{border-color:var(--marke)}
.streifen .mehr{width:84px;height:84px;border-radius:10px;flex:0 0 auto;background:var(--flaeche-2);
  color:var(--grau);font-size:13px;font-weight:700;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--linie)}
.karte .chips{padding:0 17px 15px}

/* ============================================================== Posten */
.posten{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden;box-shadow:var(--schatten)}
.p-zeile{display:flex;gap:13px;padding:13px 15px}
.p-bild{width:70px;height:70px;flex:0 0 auto;border-radius:10px;object-fit:cover;
  background:var(--grund);border:1px solid var(--linie);cursor:pointer}
.p-sym{width:70px;height:70px;flex:0 0 auto;border-radius:10px;background:var(--flaeche-2);
  display:flex;align-items:center;justify-content:center;color:var(--grau);border:1px solid var(--linie)}
.p-sym svg{width:24px;height:24px}
.p-text{min-width:0;flex:1}
.p-titel{font-size:14.5px;font-weight:700;line-height:1.35}
.p-besch{font-size:13px;color:var(--grau);margin-top:3px;line-height:1.5}
.p-fuss{font-size:11.5px;color:var(--grau);margin-top:7px;display:flex;flex-wrap:wrap;gap:4px 10px}
.p-zitat{margin:0 15px 13px;padding:10px 12px;background:var(--flaeche-2);border-radius:9px;
  font-size:13px;color:var(--tinte);border-left:3px solid var(--marke);line-height:1.55}

/* ------------------------------------------------------- Zuordnungs-Chip */
.zu-chip{display:inline-flex;align-items:center;gap:5px;margin-top:8px;max-width:100%;
  padding:3px 9px;border-radius:999px;border:1px solid var(--linie);background:var(--flaeche-2);
  font-size:11.5px;font-weight:600;color:var(--grau);cursor:pointer;line-height:1.3}
.zu-chip svg{width:13px;height:13px;flex:0 0 auto}
.zu-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zu-chip:hover{border-color:var(--marke);color:var(--tinte)}
.zu-chip.vorschlag{border-color:var(--amber-linie);background:var(--amber-bg);color:var(--amber)}
.zu-chip.fest{border-color:var(--gruen-linie);color:var(--gruen)}
.pruef-cb{width:18px;height:18px;flex:0 0 auto;margin-top:4px;accent-color:var(--marke)}
.zu-liste{max-height:44vh;overflow:auto;margin-top:8px;border:1px solid var(--linie);border-radius:var(--radius)}
.zu-treffer{display:block;width:100%;text-align:left;padding:9px 11px;border:0;
  border-bottom:1px solid var(--linie);background:none;cursor:pointer;font-size:13px;color:var(--tinte)}
.zu-treffer:last-child{border-bottom:0}
.zu-treffer:hover{background:var(--flaeche-2)}
.zu-art{display:inline-block;min-width:54px;font-size:11px;font-weight:600;color:var(--grau)}

/* ============================================================= Galerie */
.gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:11px}
.gitter figure{margin:0;position:relative}
.gitter img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:11px;display:block;
  border:1px solid var(--linie);background:var(--flaeche);cursor:pointer;transition:border-color .14s}
.gitter img:hover{border-color:var(--marke)}
.gitter figcaption{font-size:11.5px;color:var(--grau);margin-top:5px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* =============================================================== Lupe */
.lupe{position:fixed;inset:0;z-index:70;background:rgba(8,16,25,.95);display:none;flex-direction:column}
.lupe.an{display:flex}
.lupe .bild{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;min-height:0}
.lupe img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lupe .info{color:#fff;padding:15px 20px calc(19px + env(safe-area-inset-bottom));
  font-size:13.5px;background:rgba(0,0,0,.4);line-height:1.55}
.lupe .info b{display:block;font-size:15px;margin-bottom:4px}
.lupe .zu{position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;
  background:rgba(255,255,255,.16);border:0;color:#fff;width:40px;height:40px;
  border-radius:50%;font-size:23px;cursor:pointer;line-height:1}
.lupe .zu:hover,.lupe .pfeil:hover{background:rgba(255,255,255,.28)}
.lupe .pfeil{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);
  border:0;color:#fff;width:44px;height:44px;border-radius:50%;font-size:23px;cursor:pointer;line-height:1}
.lupe .li{left:14px} .lupe .re{right:14px}

/* ============================================================= Fragen */
.frage-kopf{padding:15px 17px 7px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.frage-nr{font-size:12px;font-weight:700;color:var(--grau)}
.frage-thema{font-size:15.5px;font-weight:700;margin-top:2px;letter-spacing:-.01em}
.frage-text{padding:0 17px 11px;font-size:14px;line-height:1.6}
.frage-warum{padding:0 17px 13px;font-size:12.5px;color:var(--grau);font-style:italic;line-height:1.55}
.eilt{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-linie);
  font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}

/* ============================================================ Dialoge */
dialog{border:0;border-radius:var(--radius-gross);padding:0;width:min(92vw,460px);
  box-shadow:var(--schatten-dialog);color:var(--tinte)}
dialog.mailblatt{width:min(94vw,600px);max-height:88vh;overflow:auto}
dialog::backdrop{background:rgba(11,31,51,.5);backdrop-filter:blur(2px)}
.dlg-in{padding:20px 22px 22px}
.dlg-in h3{margin:0 0 5px;font-size:17px;font-weight:750;letter-spacing:-.01em}
.dlg-in p{margin:0 0 14px;font-size:13.5px;color:var(--grau);line-height:1.55}
.dlg-btn{display:flex;gap:8px;margin-top:14px}
.dlg-btn .btn{flex:1 1 auto}
.mail{border:1px solid var(--linie);border-radius:11px;overflow:hidden;background:#0F1E2D}
.mz{display:flex;gap:12px;padding:9px 13px;border-bottom:1px solid var(--linie);font-size:13px}
.mk{color:var(--grau);font-weight:700;flex:0 0 62px}
.mw{min-width:0;word-break:break-word}
.mw.stark{font-weight:700;color:var(--marke-tief)}
.mkoerper{padding:14px 13px;font-size:13.5px;white-space:pre-wrap;line-height:1.6;
  border-bottom:1px solid var(--linie);background:var(--flaeche-2)}
.manhang{padding:10px 13px;font-size:12.5px;color:var(--grau);display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;background:#0F1E2D}
.manhang svg{width:15px;height:15px;flex:0 0 auto}
.manhang a{margin-left:auto;color:var(--marke-tief);font-weight:700;text-decoration:none}
/* „Freigeben & ausführen" (Punkt 571): Frage am Entwurf, was der Tipp erledigt, Ergebnis je Schritt */
.fa-frage{border:1px solid var(--amber-linie);background:var(--amber-bg);border-radius:11px;padding:11px 13px;margin-bottom:12px}
.fa-frage-text{display:flex;gap:8px;align-items:flex-start;font-size:14px;font-weight:700;color:var(--tinte);line-height:1.45}
.fa-frage-text svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px}
.fa-wahl{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.fa-hinweis{margin-top:8px;font-size:12.5px;color:var(--grau)}
.fa-kopf{margin:12px 0 6px;font-size:13px;font-weight:700;color:var(--tinte);line-height:1.5}
.fa-schritte{border:1px solid var(--linie);border-radius:11px;overflow:hidden;background:#0F1E2D}
.fa-schritt{display:grid;grid-template-columns:20px 1fr auto;gap:2px 9px;align-items:center;padding:8px 12px;
  border-bottom:1px solid var(--linie);font-size:13px}
.fa-schritt:last-child{border-bottom:0}
.fa-zeichen svg{width:16px;height:16px;display:block}
.fa-stand{font-weight:700;font-size:12px;color:var(--grau)}
.fa-erledigt .fa-zeichen,.fa-erledigt .fa-stand{color:var(--gruen)}
.fa-fehlgeschlagen{background:var(--rot-weich)}
.fa-fehlgeschlagen .fa-zeichen,.fa-fehlgeschlagen .fa-stand{color:var(--rot)}
.fa-grund{grid-column:2/4;font-size:12px;color:var(--grau);line-height:1.45}
.zusatz-anhang .hinweis{margin:0 0 8px;font-size:12.5px;color:var(--grau);line-height:1.5}
.zusatz-zeile{display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:13px;
  border:1px solid var(--linie);border-radius:9px;background:var(--flaeche-2);margin-bottom:6px}
.zusatz-zeile svg{width:15px;height:15px;flex:0 0 auto}
.zusatz-zeile button{margin-left:auto}

/* ============================================================== Toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:var(--nacht);color:#fff;padding:12px 20px;border-radius:10px;font-size:13.5px;
  font-weight:600;z-index:80;opacity:0;transition:opacity .2s;pointer-events:none;
  max-width:90vw;text-align:center;box-shadow:var(--schatten-dialog)}
.toast.an{opacity:1}

/* =============================================================== Gate */
.gate-huelle{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(150deg,var(--nacht) 0%,#123A5C 100%)}
.gate{max-width:390px;width:100%;padding:32px 30px 30px;background:#0F1E2D;
  border-radius:18px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,0.7)}
.gate .gate-logo{height:44px;width:auto;display:block;margin:0 auto 18px}
.gate h1{color:var(--tinte);font-size:20px;margin:0 0 6px;font-weight:750;letter-spacing:-.015em}
.gate p{color:var(--grau);font-size:13.5px;margin:0 0 20px;line-height:1.55}
.gate input{width:100%;text-align:center;font-size:21px;letter-spacing:5px;padding:13px;
  border:1px solid var(--linie);border-radius:10px;text-transform:uppercase;font-weight:700;
  font-family:inherit;color:var(--tinte);background:var(--flaeche-2)}
.gate input:focus{outline:0;border-color:var(--marke);background:#0F1E2D;
  box-shadow:0 0 0 3px rgba(123,193,244,0.15)}
.gate button{width:100%;margin-top:13px;background:var(--marke-tief);color:var(--auf-farbe);border:0;
  border-radius:10px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.gate button:hover{filter:brightness(1.08)}

/* ============================================================ Kalender */
.kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:0 2px 14px}
.kal-kopf .monat{font-size:16px;font-weight:750;flex:1;text-align:center;letter-spacing:-.01em}
.kal-nav{border:1px solid var(--linie);background:#0F1E2D;color:var(--tinte-2);width:34px;height:34px;
  flex:0 0 auto;border-radius:9px;font-size:17px;font-weight:750;cursor:pointer;line-height:1}
.kal-nav:hover{background:var(--flaeche-2);border-color:var(--linie-satt)}
.kal-heute{border:1px solid var(--linie);background:#0F1E2D;color:var(--tinte-2);border-radius:9px;
  padding:7px 13px;font-size:12.5px;font-weight:650;cursor:pointer;flex:0 0 auto;font-family:inherit}
.kal-heute:hover{background:var(--flaeche-2)}
.kal-legende{display:flex;flex-wrap:wrap;gap:9px 16px;margin:0 2px 13px;font-size:12px;color:var(--grau)}
.kal-legende span{display:inline-flex;align-items:center;gap:6px}
.kal-punkt{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block}
.kal-wochentage{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;
  font-size:11px;font-weight:750;color:var(--grau);text-align:center;text-transform:uppercase;
  letter-spacing:.04em}
.kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}
.kal-tag{background:#0F1E2D;border:1px solid var(--linie);border-radius:10px;min-height:76px;
  padding:6px 5px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .12s}
.kal-tag:hover{border-color:var(--linie-satt);background:var(--flaeche-2)}
.kal-tag.ausserhalb{opacity:.38}
.kal-tag.heute{border-color:var(--marke);box-shadow:0 0 0 1px var(--marke) inset}
.kal-tagnr{font-size:12px;font-weight:700}
.kal-chips{display:flex;flex-wrap:wrap;gap:3px}
.kal-chip{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.kal-mehr{font-size:9.5px;color:var(--grau);font-weight:700}
.kal-woche .kal-tag{min-height:150px}
.kal-labelchip{font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;color:#fff;
  line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ------------------------------------------- Aufgeklappte Tabellenzeile */
/* Der Detailbereich sitzt in einer eigenen Zelle ueber die volle Breite.
   Er darf nicht wie eine Zeile aussehen, sonst weiss niemand, wo er anfaengt. */
td.detailzelle{padding:0 !important;background:var(--flaeche-2);
  box-shadow:inset 0 1px 0 var(--linie),inset 0 -1px 0 var(--linie)}
.detail-in{padding:16px 18px 8px;max-width:900px}
.detail-in .pos{padding:0 0 12px}
.detail-in .betraege{display:flex;gap:18px;flex-wrap:wrap;padding:0 0 12px;font-size:13px;color:var(--grau)}
.detail-in .betraege b{color:var(--tinte);font-weight:750;margin-left:4px}
.zk .zk-netto{font-weight:500}
.detail-in .warn{margin:0 0 12px}
.detail-in .hinweis{padding:0 0 12px;margin-top:0}
.detail-in .pdf{margin:0 0 12px}
.detail-in .aktionen{padding:0 0 12px}
@media (max-width:900px){
  td.detailzelle{display:block}
  .detail-in{padding:13px 0 4px}
  .detail-in .btn{width:100%}
}

/* Absenderadresse unter dem Namen — leise, aber lesbar */
.ei-adresse{color:var(--grau);font-weight:500;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:270px}
/* Name zu einer WhatsApp-Kennung hinterlegen */
.ei-namensfeld{margin-top:11px;padding-top:11px;border-top:1px solid var(--amber-linie)}
.ei-namensfeld label{display:block;font-size:12.5px;color:var(--amber);font-weight:600;margin-bottom:7px}
.ei-namenszeile{display:flex;gap:7px;align-items:stretch}
.ei-namenszeile .feld{flex:1 1 auto;min-width:0;font-size:14px;padding:8px 11px}
.ei-namenszeile .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:900px){
  .ei-namenszeile{flex-direction:column}
  .ei-namenszeile .btn{width:100%}
  .ei-adresse{max-width:190px}
}

.frage-antwort{padding:0 17px 4px}
.frage-antwort .aktionen{padding:11px 0 14px}

/* ------------------------------------------------------ Lesbare Zeilen */
/* Nicht in Pixeln begrenzen, sondern in Zeichen: ch rechnet die Schriftgroesse
   mit ein und bleibt richtig, wenn jemand die Schrift groesser stellt.
   Ueber etwa 90 Zeichen findet das Auge beim Zeilenwechsel den Anfang nicht
   mehr zuverlaessig — auf einem 1440er-Bildschirm waren es hier bis zu 176. */
.frage-text,.frage-warum,.ei-text,.ei-voll,
.ei-grund,.p-besch,.p-zitat,.um-notiz,.um-quelle,.pos,.hinweis,.warn,
.vg-titel,.rekl-text,.ei-betreff,.notiz-kasten,.ei-notiz{max-width:66ch}
/* In der aufgeklappten Tabellenzeile steht der Text schon in einem
   begrenzten Block — dort nicht doppelt einschraenken. */
.detail-in .pos,.detail-in .hinweis,.detail-in .warn{max-width:none}

/* ===================================================== Beträge verdecken */
/* Der Schalter im Kopf. Im Ruhezustand durchgestrichenes Auge und das Wort
   "verdeckt" — es soll auf einen Blick klar sein, dass die Punkte an der
   Stelle des Betrages Absicht sind und nicht ein Fehler. */
.auge-alt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linie);
  background:#0F1E2D;color:var(--grau);border-radius:9px;padding:7px 11px;
  font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;flex:0 0 auto;
  transition:border-color .14s,color .14s,background .14s}
.auge svg{width:16px;height:16px}
.auge:hover{border-color:var(--linie-satt);background:var(--flaeche-2)}
.auge.an{color:var(--marke-tief);border-color:var(--marke);background:var(--marke-hell)}

/* ===================================================================
   Einsatzsteuerung — Wochentafeln, Stammdatenlisten, Stundenbalken.

   Die beiden Tafeln (Einsatzplan, Dienstplan) sind bewusst Tabellen und
   keine Kartenliste: eine Woche mal fuenfzehn Kraefte ist ein Raster,
   und ein Raster liest man als Raster. Am Handy rollt es seitlich, statt
   sich in Karten aufzuloesen — wer im Bus den Dienstplan prueft, will
   dieselbe Anordnung sehen wie am Schreibtisch.
   =================================================================== */

.eins-leiste{flex-wrap:nowrap}

.eins-tafel-huelle{padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.eins-tafel{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.eins-tafel th,.eins-tafel td{padding:7px 8px;border-bottom:1px solid var(--linie);text-align:center;vertical-align:middle}
.eins-tafel thead th{position:sticky;top:0;z-index:2;background:var(--flaeche-2);
  color:var(--tinte-2);font-weight:600;border-bottom:1px solid var(--linie-satt)}
.eins-tafel th.eins-heute,.eins-tafel td.eins-heute{background:var(--marke-hell)}
.eins-wt{display:block;font-weight:700;color:var(--tinte)}
.eins-dat{display:block;font-size:11px;color:var(--grau);font-variant-numeric:tabular-nums}

/* Die Namensspalte bleibt beim seitlichen Rollen stehen — ohne sie weiss
   nach zwei Spalten niemand mehr, wessen Zeile er liest. */
/* Die Klasse allein reicht nicht: ".eins-tafel td" ist spezifischer und
   zentriert sonst weiter. Deshalb hier mit demselben Gewicht. */
.eins-tafel .eins-namensp{position:sticky;left:0;z-index:1;background:var(--flaeche);
  text-align:left;width:200px;min-width:150px;max-width:220px}
/* Die sieben Tagesspalten teilen sich den Rest gleichmaessig — sonst zieht die
   breiteste Zelle die ganze Woche schief. */
.eins-tafel{table-layout:fixed}
.eins-tafel th:not(.eins-namensp),.eins-tafel td:not(.eins-namensp){width:calc((100% - 200px) / 7)}
.eins-tafel thead .eins-namensp{z-index:3;background:var(--flaeche-2)}
.eins-kuerzel{display:block;font-weight:600;color:var(--tinte)}
.eins-klar{display:block;font-size:11px;color:var(--grau);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Gedaempft heisst kursiv, nicht blass: --grau-hell misst auf Weiss 3.05:1
   und faellt damit unter WCAG AA. --grau liegt bei 5.2:1. */
.eins-klar.eins-leise{color:var(--grau);font-style:italic}

.eins-gruppe td{background:var(--flaeche-2);text-align:left;font-weight:600;
  color:var(--tinte-2);font-size:12px;letter-spacing:.02em;
  position:sticky;left:0;padding:6px 10px}
.eins-summe td{background:var(--flaeche-2);font-weight:600;color:var(--tinte-2);
  font-variant-numeric:tabular-nums;border-top:1px solid var(--linie-satt)}
.eins-summe td:first-child{text-align:left;position:sticky;left:0;background:var(--flaeche-2)}
.eins-kraft-zahl{display:block;font-size:10px;font-weight:400;color:var(--grau)}
/* Muss td-Gewicht haben: .eins-summe td setzt Farbe und Flaeche und ist
   spezifischer als eine Klasse allein. Derselbe Grund wie bei .eins-namensp. */
.eins-tafel td.eins-knapp,.eins-summe td.eins-knapp{
  color:var(--rot);background:var(--rot-bg);font-weight:700}

.eins-zelle{cursor:pointer;line-height:1.5}
.eins-zelle:hover{background:var(--marke-hell)}
.eins-leerzelle{min-height:34px}
.eins-leerzelle:hover::after{content:"+";color:var(--grau-hell);font-weight:600}
.eins-bw{display:block;font-size:10px;color:var(--amber);font-weight:600;margin-top:2px}
.eins-hak{display:inline-block;width:13px;height:13px;color:var(--gruen);margin-left:3px;vertical-align:-2px}
.eins-hak svg{width:100%;height:100%}

/* --- Tagesliste unter der Tafel --- */
.eins-tag{padding:0 15px 12px}
.eins-tag-zeile{display:flex;align-items:center;gap:9px;padding:8px 0;
  border-bottom:1px solid var(--linie);font-size:13px;flex-wrap:wrap}
.eins-tag-zeile:last-child{border-bottom:0}
.eins-fertig{opacity:.55}
.eins-fertig .eins-wo strong{text-decoration:line-through}
.eins-frist{flex:0 0 46px;font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--rot);font-size:12px}
.eins-wo{flex:1 1 160px;min-width:0;color:var(--tinte)}
.eins-wo .eins-klar{display:inline;margin-left:6px}
.eins-hinweis{font-size:11px;color:var(--grau);flex:0 1 auto}
.eins-hak-knopf{flex:0 0 auto;width:26px;height:26px;padding:4px;border-radius:7px;
  border:1px solid var(--linie-satt);background:var(--flaeche);color:var(--grau-hell);cursor:pointer}
.eins-hak-knopf svg{width:100%;height:100%;display:block}
.eins-hak-knopf:hover{border-color:var(--gruen);color:var(--gruen)}
.eins-hak-knopf.eins-an{background:var(--gruen-bg);border-color:var(--gruen-linie);color:var(--gruen)}

/* --- Stammdaten --- */
.eins-stamm{padding:4px 15px 12px;font-size:13px}
.eins-stamm-kopf,.eins-stamm-zeile{display:grid;gap:10px;align-items:center;
  grid-template-columns:1fr 2fr 1.4fr 62px 62px 92px 82px 44px;padding:7px 0;
  border-bottom:1px solid var(--linie)}
.eins-stamm-kopf{font-size:11px;color:var(--grau);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--linie-satt)}
.eins-stamm-zeile:last-child{border-bottom:0}
.eins-stamm .eins-re{text-align:right;font-variant-numeric:tabular-nums}
.eins-still{opacity:.5}
.eins-fehlt{color:var(--amber);font-weight:600;font-size:11px}
.eins-mini{padding:5px 8px;min-width:0;flex:0 0 auto}
.eins-mini svg{width:14px;height:14px;display:block}
.eins-klickbar{cursor:pointer}
.eins-klickbar:hover{background:var(--flaeche-2)}

/* Der Dienstplan und die Stundenuebersicht haben andere Spaltenzahlen als die
   Einheitenliste. Ein eigenes Raster je Liste ist ehrlicher als eines, das
   ueberall halb passt. */
.eins-dienstplan .eins-stamm-kopf,.eins-dienstplan .eins-stamm-zeile{
  grid-template-columns:2fr 1.4fr 80px 90px 90px 44px}

/* --- Dienstplan-Zellen --- */
.eins-abfahrt td{padding:4px}
.eins-abfahrt .eins-namensp{font-size:11px;color:var(--grau);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}
.eins-zeitfeld{width:100%;max-width:62px;padding:5px 4px;text-align:center;
  border:1px solid var(--linie-satt);border-radius:7px;background:var(--flaeche);
  color:var(--tinte);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}
.eins-zeitfeld:focus{outline:2px solid var(--marke);outline-offset:-1px}
.eins-dienst{padding:4px}
.eins-kz{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;font-weight:700;font-size:13px;
  border:1px solid transparent}
.eins-kz.k-leer{border:1px dashed var(--grau-hell);color:transparent;
  background:var(--flaeche-2)}
.eins-dienst:hover .eins-kz.k-leer{border-color:var(--marke);border-style:solid}
.eins-kz.k-1{background:var(--gruen-bg);border-color:var(--gruen-linie);color:var(--gruen)}
.eins-kz.k-f{background:var(--flaeche-2);border-color:var(--linie-satt);color:var(--grau)}
.eins-kz.k-k{background:var(--rot-bg);border-color:var(--rot-linie);color:var(--rot)}
.eins-kz.k-U{background:var(--lila-bg);border-color:var(--lila-linie);color:var(--lila)}
.eins-kz.k-uU{background:var(--amber-bg);border-color:var(--amber-linie);color:var(--amber)}
.eins-legende{font-size:12px;color:var(--grau);margin:10px 2px 0;line-height:1.6}
.eins-kztext{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:10.5px;line-height:1.25;color:var(--tinte-2);margin:3px auto 0;max-width:118px;text-align:center}
.eins-dienst:hover .eins-kztext{-webkit-line-clamp:unset}
.eins-team{padding:0 15px 10px}
.eins-team-kopf{display:flex;align-items:center;gap:10px;padding:10px 0 4px;border-top:1px solid var(--linie)}
.eins-team-kopf .btn{margin-left:auto}
.eins-team .eins-tag{padding:0}
.eins-meld-zusatz{padding-top:0}

/* --- Stunden --- */
.eins-meld{display:flex;gap:8px;padding:0 15px 10px;flex-wrap:wrap}
.eins-meld .feld{flex:1 1 180px;margin:0}
.eins-meld select.feld{flex:0 1 190px}
.eins-meld .btn{flex:0 0 auto}
.eins-vorschau{padding:0 15px 14px;min-height:8px;font-size:13px}
.eins-balken-huelle{display:block;height:8px;border-radius:4px;background:var(--linie);
  overflow:hidden;min-width:80px}
.eins-balken{display:block;height:100%;width:0;background:var(--marke);
  border-radius:4px;transition:width .3s}
.eins-balken.eins-eng{background:var(--amber)}
.eins-balken.eins-voll{background:var(--rot)}
.eins-monat{margin:12px 15px 4px;padding:12px 0 0;border-top:1px solid var(--linie-satt)}
.eins-monat .eins-tag{padding:0}

/* --- Abrechnung --- */
.eins-wahl{flex-wrap:wrap;gap:8px}
.eins-wahl .feld{flex:1 1 180px;margin:0;max-width:280px}
.eins-rechnung{min-width:720px}
.eins-rechnung td,.eins-rechnung th{text-align:left}
.eins-rechnung .eins-re{text-align:right;font-variant-numeric:tabular-nums}
.eins-rechnung tfoot td{background:var(--flaeche-2);border-top:2px solid var(--linie-satt)}

.eins-dlg-reihe{display:flex;gap:8px;margin-top:8px}
.eins-dlg-reihe .feld{flex:1 1 0;min-width:0;margin:0}
.eins-fussnote{font-size:12px;color:var(--grau);line-height:1.55;margin:10px 0 0}

@media (max-width:760px){
  .eins-stamm-kopf{display:none}
  .eins-stamm-zeile{grid-template-columns:1fr 1fr;gap:4px 10px;padding:10px 0}
  .eins-dienstplan .eins-stamm-zeile{grid-template-columns:1fr 1fr}
  .eins-stamm .eins-re{text-align:left}
  .eins-namensp{min-width:120px;max-width:140px}
  .eins-meld select.feld,.eins-meld .feld{flex:1 1 100%}
  .eins-wahl .feld{max-width:none}
}

/* Die Bedarfszeile steht im Dienstplan als erste Zeile unter dem Kopf — bei
   sechzehn Kraeften waere sie am Fuss aus dem Bild gescrollt, und sie ist der
   Grund, warum jemand den Dienstplan ueberhaupt aufschlaegt. */
.eins-bedarf td{border-top:0;border-bottom:1px solid var(--linie-satt)}
.eins-tafel .eins-bedarf .eins-namensp{background:var(--flaeche-2);
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--grau)}

/* ============================================================================
   Team — Podest und Tabelle

   Zwei Orte, zwei Aufgaben. In der dunklen Seitenleiste steht das Podest den
   ganzen Tag im Blick und muss auf 248 px lesbar bleiben; auf der weissen
   Arbeitsflaeche darf die Tabelle ausholen.

   Die Personenfarben (#E8A33D, #4DA3B8, #7FB069) sind fuer das dunkle Navy
   gewaehlt und kommen dort auf 5,8:1 bis 7,7:1. Auf Weiss reicht Bernstein nur
   fuer 2,1:1 — deshalb tragen sie auf heller Flaeche ausschliesslich Balken,
   Punkte und Plaketten, nie Schrift. Auf der Plakette steht die Schrift in
   Nacht, das ergibt umgekehrt wieder 7,7:1.
   ========================================================================== */

/* --------------------------------------------------- Podest, Seitenleiste */
/* Podest in der Seitenleiste: eine Zeile je Woche, nicht ein Block. */
.podest{display:block;width:100%;border:0;background:none;text-align:left;cursor:pointer;
  font:inherit;padding:0;color:#C3D3E2}
.pod-reihe{display:flex;gap:4px 9px;flex-wrap:wrap;align-items:center}
.pod-p{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:650;color:#B8C8D6;white-space:nowrap}
.pod-p i{display:inline-block;width:7px;height:7px;border-radius:50%}
.pod-p b{color:#fff;font-weight:800}
.pod-p.meins{color:#fff}
.pod-satz{display:block;font-size:11.5px;color:#B9C8D5;margin-top:5px;line-height:1.4}
.podest:hover .pod-p{color:#fff}

/* -------------------------------------------------------- Podest, Handy */
.hk-team{display:flex;align-items:center;gap:7px;flex:0 0 auto;border:0;
  background:rgba(255,255,255,.10);border-radius:999px;padding:4px 9px 4px 4px;
  font:inherit;color:#fff;cursor:pointer}
.hk-platz{width:19px;height:19px;border-radius:999px;color:var(--auf-farbe);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hk-name{font-size:12.5px;font-weight:650;color:#DCE7F1;max-width:80px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-team b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.hk-ab{display:flex;align-items:center;gap:1px;font-size:11.5px;font-weight:700;color:#B6C7D8}
.hk-ab svg{width:12px;height:12px}
.hk-ab.vorn{color:#B2DCC3}
.hk-ab.vorn svg{width:14px;height:14px}

/* --------------------------------------------------- Tabelle der Woche */
.tm-tafel{padding:4px 17px 6px}
.tm-zeile{display:flex;align-items:center;gap:13px;padding:11px 0;
  border-bottom:1px solid var(--linie)}
.tm-zeile:last-child{border-bottom:0}
.tm-zeile.meins{background:var(--marke-hell);margin:0 -17px;padding-left:17px;
  padding-right:17px;border-radius:9px;border-bottom-color:transparent}
.tm-platz{flex:0 0 auto;width:27px;height:27px;border-radius:999px;color:var(--auf-farbe);
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.tm-mitte{flex:1 1 auto;min-width:0}
.tm-kopf{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tm-kopf b{font-size:15px;font-weight:700;color:var(--tinte)}
.tm-feld{font-size:12px;color:var(--grau)}
.tm-schiene{height:6px;border-radius:3px;background:var(--linie);overflow:hidden;margin-top:7px}
.tm-schiene i{display:block;height:100%;border-radius:3px}
.tm-zahlen{flex:0 0 auto;text-align:right}
.tm-zahlen>b{display:block;font-size:20px;font-weight:800;color:var(--tinte);
  font-variant-numeric:tabular-nums;line-height:1.1}
.tm-delta{font-size:11.5px;color:var(--grau);white-space:nowrap}
.tm-delta.auf{color:var(--gruen);font-weight:700}
.tm-delta.ab{color:var(--rot);font-weight:700}

.serien{display:flex;flex-wrap:wrap;gap:8px;padding:2px 17px 16px}
.serie{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tinte-2);
  background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;padding:5px 11px}
.serie i{width:8px;height:8px;border-radius:999px;flex:0 0 auto}
.serie b{font-weight:800;color:var(--tinte)}

/* ------------------------------------------------------- Tag fuer Tag */
.tv-kopf,.tv-zeile{display:flex;align-items:center;gap:12px;padding:0 17px}
.tv-kopf{padding-bottom:6px}
.tv-zeile{padding-top:5px;padding-bottom:5px}
.tv-zeile:last-child{padding-bottom:16px}
.tv-name{flex:0 0 66px;font-size:12.5px;font-weight:650;color:var(--tinte-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-tage{flex:1 1 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.tv-kopf .tv-tag{font-size:11px;font-weight:700;color:var(--grau);text-align:center}
.tv-kopf .tv-tag.heute{color:var(--marke)}
/* Die Balken stehen auf einer festen Hoehe, sonst springt die Zeile, sobald
   an einem Tag noch nichts passiert ist. */
.tv-zeile .tv-tag{height:34px;background:var(--flaeche-2);border:1px solid var(--linie);
  border-radius:5px;display:flex;align-items:flex-end;overflow:hidden}
.tv-zeile .tv-tag.heute{border-color:var(--linie-satt)}
.tv-zeile .tv-tag i{display:block;width:100%;border-radius:0 0 4px 4px}

/* ------------------------------------------------- Woraus die Punkte kommen */
.fd-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px;
  padding:2px 17px 17px}
.fd-karte{border:1px solid var(--linie);border-radius:var(--radius);padding:13px 14px;
  background:var(--flaeche-2)}
.fd-karte>b{display:block;font-size:14px;font-weight:700;color:var(--tinte);margin-bottom:9px}
.fd-band{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--linie);
  margin-bottom:10px}
.fd-band i{display:block;height:100%}
.fd-liste{list-style:none;margin:0;padding:0}
.fd-liste li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  color:var(--tinte-2);padding:3px 0}
.fd-liste li b{font-weight:800;color:var(--tinte);font-variant-numeric:tabular-nums}
.fd-leer{font-size:12.5px;color:var(--grau);margin:0;padding:0 17px 17px}
.fd-karte .fd-leer{padding:0}

/* --------------------------------------------------------- Zuletzt passiert */
.lz-liste{list-style:none;margin:0;padding:0 17px 17px}
.lz-liste li{display:flex;align-items:center;gap:11px;padding:7px 0;
  border-bottom:1px solid var(--linie);font-size:13px}
.lz-liste li:last-child{border-bottom:0}
.lz-liste li.ohne{opacity:.55}
.lz-zeit{flex:0 0 84px;font-size:11.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.lz-wer{flex:0 0 88px;display:flex;align-items:center;gap:6px;font-weight:650;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lz-wer i{width:8px;height:8px;border-radius:999px;flex:0 0 auto}
.lz-was{flex:1 1 auto;min-width:0;color:var(--tinte-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lz-pkt{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--gruen);
  font-variant-numeric:tabular-nums}
.lz-liste li.ohne .lz-pkt{color:var(--grau);font-weight:600}

/* ------------------------------------------------------- Wie gezaehlt wird */
.pt-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px;
  padding:2px 17px 17px}
.pt-block{border:1px solid var(--linie);border-radius:var(--radius);padding:12px 14px}
.pt-block>b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.02em;
  color:var(--tinte);margin-bottom:7px}
.pt-block ul{list-style:none;margin:0;padding:0}
.pt-block li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  color:var(--tinte-2);padding:2.5px 0}
.pt-block li b{font-weight:800;color:var(--marke);font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------- Kleinkram */
.klein:not(.btn):not(summary):not(button){font-size:12px;color:var(--grau);font-weight:600;white-space:nowrap}
.hinweis-text{font-size:13px;line-height:1.6;color:var(--tinte-2);margin:0;padding:0 17px 14px}
.hinweis-text b{font-weight:700;color:var(--tinte)}
.knopf-still{margin:0 17px 17px;border:1px solid var(--linie-satt);background:var(--flaeche);
  color:var(--tinte-2);font:inherit;font-size:13.5px;font-weight:650;padding:9px 16px;
  border-radius:9px;cursor:pointer}
.knopf-still:hover{border-color:var(--rot-linie);color:var(--rot);background:var(--rot-bg)}

/* ================================================== E-Mail (Mailfenster)
   Der Posteingang war bis zum 08.09.2026 eine einzige Kartenliste, in der
   WhatsApp und E-Mail durcheinanderliefen. Jede Nachricht war eine hohe
   Karte mit Deutung, Einordnungsfrage, Verweisen und Entwurf untereinander —
   zwanzig Nachrichten waren zwanzig Bildschirmhoehen.

   Jetzt: Ordnerreihe, Liste, Lesebereich. Die beiden Spalten scrollen fuer
   sich, damit die Liste stehen bleibt, waehrend man eine lange Mail liest.
   Die Hoehe muss deshalb gesetzt sein — ein `height:100%` in einem Elter
   ohne feste Hoehe waere wirkungslos, und die Spalten wuerden wieder
   gemeinsam die Seite hinunterlaufen. */
.ml{display:flex;flex-direction:column;gap:12px;
  height:calc(100dvh - var(--kopf-hoch) - 84px);min-height:520px}

/* --- Ordnerreihe --- */
.ml-ordner{display:flex;gap:7px;flex-wrap:wrap;flex:0 0 auto}
.ml-ordner button{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  border:1px solid var(--linie);border-radius:999px;background:#0F1E2D;color:var(--tinte-2);
  font:inherit;font-size:13.5px;font-weight:650;padding:7px 14px;cursor:pointer}
.ml-ordner button svg{width:16px;height:16px;opacity:.75}
.ml-ordner button:hover{border-color:var(--linie-satt);background:var(--flaeche-2)}
.ml-ordner button.an{background:var(--nacht);color:#fff;border-color:var(--marke)}
.ml-ordner button.an svg{opacity:1}
.ml-zahl{min-width:20px;height:19px;padding:0 6px;border-radius:999px;
  background:var(--flaeche-2);color:var(--tinte-2);border:1px solid var(--linie);
  font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.ml-ordner button.an .ml-zahl{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
.ml-zahl-roh{background:var(--marke);color:var(--auf-farbe);border-color:var(--marke)}
.ml-ordner button.an .ml-zahl-roh{background:var(--tinte);color:var(--grund);border-color:var(--tinte)}

/* --- Zwei Spalten --- */
.ml-flaeche{flex:1 1 auto;min-height:0;display:flex;
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius-gross);overflow:hidden;box-shadow:var(--schatten)}
.ml-liste{flex:0 0 378px;min-width:0;overflow-y:auto;overscroll-behavior:contain;
  border-right:1px solid var(--linie);background:var(--flaeche)}
.ml-lese{flex:1 1 auto;min-width:0;overflow-y:auto;overscroll-behavior:contain;
  background:var(--flaeche-2)}
.ml-liste::-webkit-scrollbar,.ml-lese::-webkit-scrollbar{width:8px}
.ml-liste::-webkit-scrollbar-thumb,.ml-lese::-webkit-scrollbar-thumb{
  background:var(--linie-satt);border-radius:4px}
.ml-nichts{padding:38px 22px;text-align:center;color:var(--grau);
  font-size:13.5px;line-height:1.65}

/* --- Eine Zeile in der Liste --- */
.ml-zeile{display:flex;width:100%;text-align:left;gap:0;border:0;border-bottom:1px solid var(--linie);
  background:none;font:inherit;padding:0;cursor:pointer;position:relative}
.ml-zeile:hover{background:var(--flaeche-2)}
.ml-zeile.an{background:var(--marke-hell)}
.ml-strich{flex:0 0 3px;background:transparent}
.ml-zeile.ml-neu .ml-strich{background:var(--marke)}
.ml-zeile.an .ml-strich{background:var(--marke-tief)}
.ml-spalte{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding:12px 15px 12px 13px}
.ml-z1{display:flex;align-items:baseline;gap:10px}
.ml-von{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;font-weight:600;color:var(--tinte-2)}
.ml-zeit{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--grau);
  font-variant-numeric:tabular-nums}
.ml-betreff{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:var(--tinte)}
.ml-vorschau{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;color:var(--grau);line-height:1.5}
/* Ungelesen wird ueber Gewicht und Farbe gezeigt, nicht ueber einen Punkt
   allein — auf dem Bueroschirm bei Tageslicht ist Fettung das Einzige, was
   quer durch die Liste zuverlaessig auffaellt. */
.ml-zeile.ml-neu .ml-von{font-weight:800;color:var(--tinte)}
.ml-zeile.ml-neu .ml-betreff{font-weight:800;color:var(--tinte)}
.ml-marken{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.ml-marke{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;
  letter-spacing:.02em;padding:2px 7px;border-radius:999px;
  background:var(--flaeche-2);color:var(--grau);border:1px solid var(--linie);
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-marke svg{width:12px;height:12px}
.ml-marke-eilt{background:var(--rot-bg);color:var(--rot);border-color:var(--rot-linie)}
.ml-marke-entwurf{background:var(--marke-hell);color:var(--marke-tief);border-color:rgba(141,191,226,0.4)}
.ml-marke-klaeren{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-linie)}
.ml-marke-kunde{background:#0F1E2D;color:var(--marke-tief);border-color:rgba(141,191,226,0.4)}
.ml-marke-spam{background:var(--rot-bg);color:var(--rot);border-color:var(--rot-linie)}
.ml-marke-anhang{background:#0F1E2D;color:var(--grau)}

/* --- Lesebereich --- */
.ml-leer{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;padding:40px 34px;color:var(--grau);font-size:13.5px;line-height:1.65}
.ml-leer b{font-size:15px;color:var(--tinte-2);font-weight:700}
.ml-leer span{max-width:330px}
.ml-leer-zeichen{width:46px;height:46px;border-radius:14px;background:var(--marke-hell);
  color:var(--marke-tief);display:flex;align-items:center;justify-content:center;margin-bottom:3px}
.ml-leer-zeichen svg{width:23px;height:23px}

.ml-lese-kopf{position:sticky;top:0;z-index:2;background:var(--flaeche);
  border-bottom:1px solid var(--linie);padding:17px 22px 14px}
.ml-titel{margin:0;font-size:18px;font-weight:750;letter-spacing:-.012em;
  color:var(--tinte);line-height:1.32}
.ml-abs{display:flex;align-items:center;gap:10px;margin-top:11px}
.ml-abs-zeichen{flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  background:var(--marke-hell);color:var(--marke-tief);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.ml-abs-wer{min-width:0;flex:1 1 auto;display:flex;flex-direction:column}
.ml-abs-wer b{font-size:14px;font-weight:700;color:var(--tinte);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-abs-wer span{font-size:12.5px;color:var(--grau);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-abs-zeit{flex:0 0 auto;font-size:12.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.ml-eilt{margin-top:11px;display:flex;align-items:center;gap:7px;
  background:var(--rot-bg);color:var(--rot);border:1px solid var(--rot-linie);
  border-radius:9px;padding:7px 11px;font-size:13px;font-weight:700}
.ml-eilt svg{width:15px;height:15px;flex:0 0 auto}

.ml-koerper{padding:18px 22px 26px}
.ml-wortlaut{white-space:pre-wrap;font-size:14.5px;line-height:1.65;color:var(--tinte);
  word-break:break-word}
/* Die Einordnungsfrage: bei Mail steht der Name in der Adresse, sie ist hier
   eine Zeile wert und nicht der gelbe Kasten wie bei WhatsApp. */
.ml-klaeren{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:15px;
  padding:10px 13px;background:var(--amber-bg);border:1px solid var(--amber-linie);
  border-radius:var(--radius)}
.ml-klaeren-wort{font-size:12.5px;font-weight:650;color:var(--amber);line-height:1.5}
.ml-katwahl{display:flex;flex-wrap:wrap;gap:6px}
.ml-punktblock{margin-top:15px;padding:13px 15px;background:var(--lila-bg);
  border:1px solid var(--lila-linie);border-radius:var(--radius)}
.ml-punktblock .aktionen{padding:11px 0 0}
.ml-erledigt-wort{margin-top:15px;font-size:13.5px;color:var(--gruen);font-weight:700}

/* --- Entwurf --- */
.ml-entwurf{margin-top:18px;padding:15px 16px 6px;background:#0F1E2D;
  border:1px solid rgba(141,191,226,0.4);border-left:3px solid var(--marke);
  border-radius:var(--radius);box-shadow:var(--schatten)}
.ml-entwurf-kopf{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ml-entwurf-her{font-size:11.5px;color:var(--grau);font-weight:500}
.ml-an{margin-top:6px;font-size:12.5px;color:var(--grau);line-height:1.6;word-break:break-word}
.ml-an b{color:var(--tinte-2);font-weight:650}
.ml-entwurf .aktionen{padding:12px 0 12px}
.ml-gesendet{margin-top:18px;padding:14px 16px;background:var(--gruen-bg);
  border:1px solid var(--gruen-linie);border-radius:var(--radius)}
.ml-gesendet-text{margin-top:9px;white-space:pre-wrap;font-size:13.5px;line-height:1.6;
  color:var(--tinte);word-break:break-word}
.ml-fuss{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--linie)}
.ml-sprung{margin-top:11px;display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(141,191,226,0.4);background:var(--marke-hell);color:var(--marke-tief);
  border-radius:9px;padding:7px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ml-sprung svg{width:15px;height:15px}
.ml-sprung:hover{background:rgba(141,187,226,0.184);border-color:rgba(141,188,226,0.4)}
.ml-umschrift{margin-top:9px;display:flex;align-items:flex-start;gap:8px;
  background:var(--amber-bg);border:1px solid var(--amber-linie);border-radius:9px;
  padding:9px 12px;font-size:12.5px;line-height:1.55;color:var(--amber)}
.ml-umschrift svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
.ml-umschrift b{font-weight:800}
.ml-marke-umschrift{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-linie)}

/* --- Anhangfeld: Dateien hineinziehen oder auswaehlen (Mailfenster, Rechnungsdialog) --- */
.dropzone{border:1.5px dashed var(--linie-satt);border-radius:var(--radius);padding:10px 12px;margin:8px 0;
  background:var(--flaeche-2);transition:border-color .15s,background .15s}
.dropzone.an{border-color:var(--marke);background:var(--marke-hell)}
.dropzone-text{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--tinte-2);font-weight:600}
.dropzone-text svg{width:16px;height:16px}
.dropzone-wahl{color:var(--marke);text-decoration:underline;cursor:pointer;font-weight:700}
.dropzone-hinweis{color:var(--grau);font-weight:500;margin-left:auto}
.dropzone-liste{display:flex;flex-wrap:wrap;gap:6px}
.dropzone-liste:not(:empty){margin-top:8px}
.dropzone .zusatz-zeile{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;margin:0;
  background:#0F1E2D;border:1px solid var(--linie);border-radius:8px;padding:4px 6px 4px 8px}
.dropzone .zusatz-zeile button{margin-left:2px}

/* --- Kontoauszug-Abgleich in der Rechnungsansicht --- */
.bank-leiste .leise{font-size:12.5px;color:var(--grau);align-self:center}
.bank-karte{padding:14px 16px 6px;margin-bottom:14px}
.bank-drop{margin:0 0 12px}
.bank-stand{font-size:12.5px;color:var(--grau);margin:0 0 8px}
.bank-filter{margin:0 0 6px}
.bank-zeile{border-top:1px solid var(--linie);padding:10px 0 8px}
.bank-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bank-datum{font-variant-numeric:tabular-nums;color:var(--grau);font-size:12.5px;min-width:76px}
.bank-name{font-weight:700;flex:1 1 200px}
.bank-betrag{font-weight:800;font-variant-numeric:tabular-nums}
.bank-zweck{font-size:13px;color:var(--tinte-2);margin:4px 0 0 86px;word-break:break-word}
.bank-grund{font-size:12.5px;color:var(--grau);margin:4px 0 0 86px;line-height:1.5}
.bank-aktionen{padding:8px 0 0 86px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bank-aktionen .bank-wahl{flex:0 1 320px;margin:0;font-size:12.5px;padding:7px 9px}
@media (max-width:760px){.bank-zweck,.bank-grund,.bank-aktionen{margin-left:0;padding-left:0}}
.eins-sammel{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.eins-meld textarea.feld{resize:vertical;min-height:38px;line-height:1.4}

/* ------------------------------------------------------------------ Fragen (seit 14.09.2026)
   Die Frage der Auswertung steht gross, die Geschichte dahinter ist eingeklappt. */
.fr-frage{padding:4px 17px 8px;font-size:15.5px;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.fr-grund{padding:0 17px 10px;font-size:12.5px;color:var(--grau);line-height:1.55}
/* Monatsabrechnung je Kunde an der Punktkarte (559, 0.1) */
.fr-ma{margin:0 17px 10px;border:1px solid var(--linie);border-radius:8px;overflow:hidden}
.fr-ma-zeile{padding:8px 11px;border-top:1px solid var(--linie);font-size:12.5px;line-height:1.5}
.fr-ma-zeile:first-child{border-top:0}
.fr-ma-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fr-ma-name{font-weight:600;color:var(--tinte)}
.fr-ma .fr-ma-kopf .marke{margin-left:0}
.fr-ma-grund{color:var(--grau);margin:3px 0 6px}
.fr-ma-zeile .btn{margin-top:2px}
.fr-klaerung{margin:0 17px 10px;padding:8px 11px;border-radius:8px;background:var(--flaeche);font-size:12.5px;line-height:1.55;color:var(--tinte)}
.fr-klaerung svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.fr-knoepfe .fr-versand-liste{flex-basis:100%;margin:0}
.fr-versand-liste .fr-knoepfe{padding:8px 0 0}
.fr-versand{margin:0 17px 10px;padding:8px 11px;border-radius:8px;background:var(--amber-weich);border:1px solid var(--amber-linie);font-size:12.5px;line-height:1.55;color:var(--tinte)}
.fr-bezuege{display:flex;flex-wrap:wrap;gap:6px;padding:0 17px 10px}
.fr-bezug{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;
  border:1px solid var(--linie);background:var(--flaeche-2);color:var(--marke-tief);cursor:pointer;white-space:nowrap}
.fr-bezug:hover{border-color:var(--marke-tief)}
.fr-knoepfe{display:flex;flex-wrap:wrap;gap:8px;padding:2px 17px 8px}
.fr-mehr{margin:0 17px 12px;font-size:13px;color:var(--grau)}
.fr-mehr summary{cursor:pointer;font-weight:600;color:var(--grau);padding:4px 0;list-style:none}
.fr-mehr summary::before{content:"▸ ";font-size:11px}
.fr-mehr[open] summary::before{content:"▾ "}
.fr-mehr .fr-alt-frage{padding:6px 0;line-height:1.55;white-space:pre-wrap}
.fr-mehr .fr-alt-kopf{margin-top:8px}
.fr-mehr .frage-warum{padding:0 0 6px}
.fr-status{padding:0 17px 12px;font-size:13px;color:var(--grau);font-style:italic;line-height:1.55}
.fr-abschnitt{margin:22px 2px 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.fr-abschnitt:first-child{margin-top:4px}
/* Meine Liste (seit 24.09.2026): „Deine Punkte", „Frei zu greifen" — eine
   Stufe über den Abschnitten darin, deshalb Tinte statt Grau und ein Strich
   darüber. */
.fr-teil{display:flex;align-items:center;gap:8px;margin:28px 2px 2px;padding-top:14px;
  border-top:1px solid var(--linie);font-size:15px;font-weight:800;color:var(--tinte);letter-spacing:-.01em}
.fr-teil:first-child,.leiste+.fr-teil{margin-top:4px;padding-top:0;border-top:0}
.leiste+.fr-abschnitt{margin-top:4px}
.fr-teil+.fr-abschnitt{margin-top:10px}
.fr-zeile{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--linie);font-size:13.5px;background:var(--flaeche)}
.fr-zeile .frage-nr{flex:0 0 auto}
.frage-kopf .marke{margin-top:6px}
/* =========================================================== Personal ===
   Eigener Namensraum mit Präfix .pers-. Die generischen Marken .m-frei und
   .m-offen sind im Cockpit bereits mit anderer Bedeutung belegt — ein halb
   belegter Namensraum ist die Falle, in die man ein zweites Mal tritt.

   Farben kommen ausschließlich aus den Variablen in 01-grund.css. Rot heißt
   hier immer „das kostet Geld oder ist verboten", nie „unschön".

   Diese Datei liegt VOR 04-geraete.css. Wo eine Handy-Regel von dort
   überschrieben werden muss (table.liste), trägt der Wähler eine Stufe mehr
   Gewicht (table.liste.pers-kraefte …) — Reihenfolge allein reicht nicht.
   ====================================================================== */

.pers-reihe{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.pers-leise{ color:var(--grau); font-size:13px; }
p.pers-leise{ margin:0 0 10px; line-height:1.5; }

/* --- Karte --- */
.pers-karte{ padding:0; overflow:hidden; }
.pers-karte > .kopfzeile{ cursor:pointer; padding:14px 16px; margin:0; align-items:flex-start; }
.pers-karte > .kopfzeile:hover{ background:var(--flaeche-2); }
.pers-karte.pers-auf > .kopfzeile{ background:var(--flaeche-2); }
/* Textspalte nimmt den Rest, die Marke nur, was sie braucht. Vorher teilten
   sich beide die Breite und der Name brach am Handy nach drei Wörtern um. */
.pers-kopf-text{ flex:1 1 auto; min-width:0; }
.pers-kopf-zeile{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.pers-kopf-zeile h3{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; min-width:0; }
.pers-kopf-zeile > .marke{ flex:0 0 auto; margin-top:2px; }
.pers-unter{ font-size:13px; color:var(--grau); margin-top:2px; line-height:1.4; }
.pers-satz{ font-size:13.5px; margin-top:6px; line-height:1.4; }
.pers-satz-rot{ color:var(--rot); font-weight:600; }
.pers-satz-amber{ color:var(--amber); font-weight:600; }
.pers-satz-leise{ color:var(--grau); }

/* Fristzeile in der Akte. Rot ab 14 Tagen — und nur dann. */
.pers-frist{ font-size:13px; margin-top:6px; color:var(--tinte-2); line-height:1.4; }
.pers-frist b{ font-weight:700; }
.pers-frist.pers-frist-rot{ color:var(--rot); }
.pers-frist .pers-recht{ display:inline; margin-left:4px; }

.pers-block{ border-top:1px solid var(--linie); padding:14px 16px; }
.pers-block h4{ margin:0 0 10px; font-size:12.5px; text-transform:uppercase;
                letter-spacing:.05em; color:var(--grau); }
.pers-warn{ margin:0 16px 12px; }
.pers-warn ul{ margin:6px 0 0; padding-left:18px; font-weight:500; }
.pers-block .pers-warn{ margin:0 0 12px; }

/* --- Marken. Auf weißer Fläche gemessen: Grün 5,9:1, Rot 6,6:1,
   Bernstein 5,4:1 — alle über 4,5:1. --- */
.marke.pers-ja{ background:var(--gruen-bg); color:var(--gruen);
                border:1px solid var(--gruen-linie); }
.marke.pers-nein{ background:var(--rot-bg); color:var(--rot);
                  border:1px solid var(--rot-linie); }
.marke.pers-warte{ background:var(--amber-bg); color:var(--amber);
                   border:1px solid var(--amber-linie); }
.marke.pers-still{ background:var(--flaeche-2); color:var(--grau);
                   border:1px solid var(--linie); }
.pers-fehlt{ color:var(--amber); font-weight:600; font-size:12px; }

/* --- Felder --- */
.pers-gitter{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
              gap:12px; margin-bottom:4px; }
.pers-feld{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.pers-feld > span{ font-size:13px; font-weight:600; color:var(--tinte); }
.pers-feld input, .pers-feld select{
  min-height:40px; padding:8px 10px; font-size:15px; color:var(--tinte);
  background:#0F1E2D; border:1px solid var(--linie); border-radius:var(--radius);
  width:100%; min-width:0; font-family:inherit;
}
/* Das Datumsfeld auf iOS bringt eine eigene Breite mit und sprengt sonst
   den Kasten. */
.pers-feld input[type="date"]{ -webkit-appearance:none; appearance:none; min-width:0; }
.pers-feld em{ font-size:12px; color:var(--grau); font-style:normal; }

/* Der Link wird einmal gezeigt und nirgends gespeichert — er muss sich
   abschreiben und markieren lassen, deshalb Monospace und user-select. */
.pers-link{ margin-top:12px; padding:12px; border:1px solid var(--marke);
            border-radius:var(--radius); background:var(--flaeche-2); }
.pers-link-text{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                 font-size:13px; word-break:break-all; margin:6px 0;
                 user-select:all; color:var(--tinte); }

/* --- Einsatzdaten: eine Zeile mit Stift --- */
.pers-zeile{ display:flex; align-items:center; justify-content:space-between;
             gap:12px; flex-wrap:wrap; }
.pers-werte{ display:flex; flex-wrap:wrap; gap:6px 22px; font-size:14px;
             align-items:center; min-width:0; }
.pers-werte > span{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pers-werte em{ font-style:normal; font-size:11.5px; color:var(--grau);
                text-transform:uppercase; letter-spacing:.04em; font-weight:600; }

/* --- Unterlagen: eine Zeile je Punkt, Marke, ein Knopf --- */
.pers-punkt{ display:flex; align-items:center; gap:12px; padding:9px 0;
             border-bottom:1px solid var(--linie); }
.pers-punkt:last-child{ border-bottom:none; }
.pers-punkt-text{ flex:1 1 auto; min-width:0; font-size:14px; }
.pers-punkt > .marke{ flex:0 0 auto; }
.pers-punkt.pers-dringend{ border-left:3px solid var(--amber); padding-left:10px; }
.pers-punkt.pers-punkt-erledigt .pers-punkt-text{ color:var(--grau); }
.pers-recht{ font-size:12px; color:var(--grau); margin-top:2px; line-height:1.45; }
.pers-haken{ flex:none; min-height:36px; padding:0 12px; font-size:13px; font-weight:600;
             color:var(--gruen); background:var(--gruen-bg); font-family:inherit;
             border:1px solid var(--gruen-linie); border-radius:var(--radius);
             cursor:pointer; }
.pers-haken:hover{ background:var(--gruen); color:var(--auf-farbe); }
.pers-auf-zu{ display:block; margin-top:8px; border:0; background:none; font:inherit;
              font-size:13px; font-weight:600; color:var(--marke-tief); cursor:pointer;
              padding:6px 0; min-height:36px; }
.pers-auf-zu:hover{ text-decoration:underline; }

/* --- Kanzlei: Schrittfolge --- */
.pers-schritte{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap;
                gap:6px 0; counter-reset:schritt; }
.pers-schritte li{ display:flex; align-items:center; gap:7px; font-size:13px;
                   padding:5px 12px 5px 6px; border-radius:999px; counter-increment:schritt;
                   color:var(--grau); position:relative; margin-right:14px; }
.pers-schritte li::after{ content:""; position:absolute; right:-12px; top:50%; width:10px;
                          height:1px; background:var(--linie-satt); }
.pers-schritte li:last-child::after{ display:none; }
.pers-s-punkt{ width:22px; height:22px; border-radius:50%; display:inline-flex;
               align-items:center; justify-content:center; font-size:11.5px; font-weight:800;
               border:1px solid var(--linie-satt); background:#0F1E2D; color:var(--grau); flex:0 0 auto; }
.pers-s-punkt:empty::before{ content:counter(schritt); }
.pers-s-punkt svg{ width:13px; height:13px; }
.pers-s-wort{ display:flex; flex-direction:column; line-height:1.25; }
.pers-s-wort small{ font-size:11px; color:var(--grau); font-weight:500; }
.pers-s-fertig{ color:var(--gruen); }
.pers-s-fertig .pers-s-punkt{ background:var(--gruen); border-color:var(--gruen); color:var(--auf-farbe); }
.pers-s-naechst{ color:var(--tinte); font-weight:700; background:var(--marke-hell); }
.pers-s-naechst .pers-s-punkt{ background:var(--marke-tief); border-color:var(--marke-tief); color:var(--auf-farbe); }
.pers-vorschau{ margin-top:12px; padding:12px; background:var(--flaeche-2);
                border:1px solid var(--linie); border-radius:var(--radius); }
.pers-mailtext{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                font-size:13px; line-height:1.5; white-space:pre-wrap;
                margin:8px 0 0; color:var(--tinte); }

/* --- Austritt: Fristrechner und Sperrkatalog --- */
.pers-austritt{ background:var(--flaeche-2); }
.pers-fristrechner{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px; }
.pers-fristrechner .pers-feld{ flex:0 1 220px; }
.pers-fristrechner .btn{ min-height:40px; }
.pers-fristergebnis{ margin:0 0 14px; padding:10px 12px; font-size:13.5px; line-height:1.5;
                     background:var(--gruen-bg); color:var(--gruen); border:1px solid var(--gruen-linie);
                     border-radius:var(--radius); }
.pers-fristergebnis-amber{ background:var(--amber-bg); color:var(--amber); border-color:var(--amber-linie); }
.pers-weg{ margin:6px 0 0; padding-left:18px; color:var(--tinte-2); font-size:12.5px; }
.pers-gates{ display:flex; flex-direction:column; }
.pers-gate{ display:flex; align-items:flex-start; gap:12px; padding:8px 0;
            border-bottom:1px solid var(--linie); cursor:pointer; min-height:40px; font-size:14px; }
.pers-gate:last-child{ border-bottom:none; }
.pers-gate input[type="checkbox"]{ width:20px; height:20px; margin:1px 0 0; flex:0 0 auto;
                                   accent-color:var(--marke-tief); cursor:pointer; }
.pers-gate > span{ flex:1 1 auto; min-width:0; line-height:1.4; }
.pers-gate .pers-recht{ display:inline; margin-left:4px; }
.pers-sperren{ margin:0; padding-left:18px; font-size:14px; }

/* --- Sicht „Kräfte" --- */
table.liste.pers-kraefte tbody tr.pers-zeile-still td{ color:var(--grau); }
table.liste.pers-kraefte td.pers-tel{ color:var(--grau); font-size:13px; white-space:nowrap; }
table.liste.pers-kraefte td.marken{ text-align:right; }
table.liste.pers-kraefte td.marken .chip{ margin-left:6px; }

/* --- Handy --- */
@media (max-width:900px){
  /* Leiste am Handy: Umschalter und Hauptknopf auf einer Zeile, die
     Filterpillen als schiebbare zweite Zeile — statt drei Zeilen. */
  .pers-leiste .leiste{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 8px; }
  .pers-leiste .leiste-l{ display:contents; }
  .pers-leiste .segment{ grid-column:1; grid-row:1; justify-self:start; }
  .pers-leiste .leiste-r{ grid-column:2; grid-row:1; margin-left:0; }
  .pers-leiste .filter{ grid-column:1/-1; grid-row:2; }
  .pers-block{ padding:12px 14px; }
  .pers-karte > .kopfzeile{ padding:12px 14px; }
  .pers-gitter{ grid-template-columns:1fr; }
  /* Hauptknopf und „…" bleiben auf einer Zeile: Basis 0, damit ein langer
     Knopftext umbricht, statt das Menü in die nächste Zeile zu drücken. */
  .pers-reihe > .btn{ flex:1 1 0; min-width:0; white-space:normal; }
  .pers-reihe details.menue{ flex:0 0 auto; }
  .pers-reihe details.menue > summary.btn{ flex:0 0 auto; min-width:0; }
  /* Unterlagenzeile: Text volle Breite, darunter Marke und Knopf */
  .pers-punkt{ flex-wrap:wrap; gap:8px 10px; }
  .pers-punkt-text{ flex:1 1 100%; }
  .pers-punkt > .marke{ margin-right:auto; }
  .pers-haken{ min-height:40px; }
  .pers-werte{ gap:6px 16px; }
  .pers-zeile .btn{ flex:1 1 auto; }
  .pers-schritte{ flex-direction:column; gap:2px; }
  .pers-schritte li{ margin-right:0; }
  .pers-schritte li::after{ display:none; }
  .pers-fristrechner .pers-feld{ flex:1 1 100%; }
  .pers-fristrechner .btn{ flex:1 1 auto; }
  /* Kräfte als Zeilen: Name links, Soll rechts; Telefon und Lohn darunter;
     Marken in einer dritten Zeile. Die Regeln aus 04-geraete.css für
     table.liste würden beide Zahlen in dieselbe Zelle setzen. */
  table.liste.pers-kraefte tbody tr{ grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; }
  table.liste.pers-kraefte td.wer{ grid-column:1; grid-row:1; }
  table.liste.pers-kraefte td.pers-tel{ grid-column:1; grid-row:2; white-space:normal; }
  table.liste.pers-kraefte td.pers-soll{ grid-column:2; grid-row:1; font-size:14px; font-weight:700;
                                         align-self:start; text-align:right; }
  table.liste.pers-kraefte td.pers-lohn{ grid-column:2; grid-row:2; font-size:13px; font-weight:600;
                                         color:var(--grau); align-self:start; text-align:right; }
  table.liste.pers-kraefte td.marken{ grid-column:1/-1; grid-row:3; text-align:left; margin-top:8px; }
  table.liste.pers-kraefte td.marken .chip{ margin-left:0; min-height:32px; }
}

/* Gekündigte Mitarbeiter (Punkt 487): Zahlenzeile, Stunden je Monat, Papiere. */
.pers-gek-zahlen{ color:var(--grau); font-size:14px; margin:0 0 12px; }
table.liste.pers-monate{ width:100%; font-size:14px; }
table.liste.pers-monate td.num, table.liste.pers-monate th.num{ text-align:right; white-space:nowrap; }
.pers-papiere{ margin:0; padding-left:18px; font-size:14px; line-height:1.6; }
/* =========================================================== Vorfälle ===
   Eigener Namensraum .vf-. Liegt nach 03-personal.css, damit die Blöcke in
   der Personalakte sitzen, und vor 04-geraete.css.

   Die Ampel ist der einzige Ort im ganzen Cockpit, an dem vier Farben
   nebeneinander etwas bedeuten. Damit sie nicht als Dekoration gelesen wird,
   steht neben jeder Farbe immer ein Satz, der sie begründet — die Farbe
   allein ist ein Urteil, der Satz ist eine Grundlage.

   Kontraste auf weißer Fläche gemessen: Grün 5,9:1, Bernstein 5,4:1,
   Rot 6,6:1, Türkis 5,3:1 — alle über 4,5:1.
   ====================================================================== */

.vf-leise{ color:var(--grau); font-size:12.5px; }

/* --- Marke auf der Namenszeile --- */
.marke.vf-marke{ font-weight:600; }
.marke.vf-gruen{ background:var(--gruen-bg); color:var(--gruen);
                 border:1px solid var(--gruen-linie); }
.marke.vf-gelb{ background:var(--amber-bg); color:var(--amber);
                border:1px solid var(--amber-linie); }
.marke.vf-orange{ background:var(--amber-bg); color:var(--amber);
                  border:1px solid var(--amber-linie); font-weight:700; }
.marke.vf-rot{ background:var(--rot-bg); color:var(--rot);
               border:1px solid var(--rot-linie); font-weight:700; }
.marke.vf-still{ background:var(--flaeche-2); color:var(--grau);
                 border:1px solid var(--linie); }
.marke.vf-warte{ background:var(--amber-bg); color:var(--amber);
                 border:1px solid var(--amber-linie); }

/* Zwei Marken auf der Namenszeile brauchen einen Traeger: ohne ihn zerreisst
   justify-content:space-between die Kopfzeile in drei Spalten und der Name
   bricht am Handy nach zwei Woertern um. */
.pers-marken{ display:flex; gap:6px; flex:0 0 auto; margin-top:2px;
              flex-wrap:wrap; justify-content:flex-end; }

/* --- Kopf des Blocks --- */
.vf-block{ border-top:1px solid var(--linie); }
.vf-kopf{ display:flex; gap:10px; align-items:flex-start; }
.vf-punkt{ font-size:18px; line-height:1.2; flex:0 0 auto; }
.vf-kopf-text{ flex:1 1 auto; min-width:0; font-size:14px; }
.vf-gruende{ margin:6px 0 0; padding-left:18px; font-size:13px;
             color:var(--tinte); line-height:1.5; }
.vf-gruende li{ margin-bottom:3px; }

.vf-zahlen{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px;
            font-size:13px; color:var(--grau); }
.vf-zahlen b{ color:var(--tinte); font-weight:700; }
.vf-zahlen .vf-warte b{ color:var(--amber); }

.vf-wartet{ margin-top:10px; padding:8px 10px; font-size:13px;
            background:var(--amber-bg); border:1px solid var(--amber-linie);
            border-radius:var(--radius); color:var(--amber); }

/* Die Uhr. Sie ist das Einzige hier, das von selbst abläuft — deshalb
   bekommt sie die volle Warnfläche und nicht nur eine Zeile. */
.warn.vf-uhr{ margin:0 0 12px; }
.warn.vf-uhr div{ font-weight:500; margin-top:4px; line-height:1.45; }
.warn.vf-warn{ margin:10px 0; }
.warn.vf-warn div + div{ margin-top:6px; }

/* --- Zeitleiste --- */
.vf-liste{ margin-top:12px; border-top:1px solid var(--linie); }
.vf-zeile{ display:flex; gap:12px; padding:10px 0 10px 10px;
           border-bottom:1px solid var(--linie); border-left:3px solid transparent; }
.vf-zeile:last-child{ border-bottom:0; }
.vf-datum{ flex:0 0 78px; font-size:12.5px; color:var(--grau);
           font-variant-numeric:tabular-nums; padding-top:1px; }
.vf-text{ flex:1 1 auto; min-width:0; font-size:14px; line-height:1.45; }
.vf-titel{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.vf-roh{ color:var(--tinte-2); margin-top:3px; }
.vf-sollist{ display:flex; gap:16px; flex-wrap:wrap; margin-top:5px;
             font-size:13px; color:var(--tinte); }
.vf-sollist em{ font-style:normal; font-weight:700; color:var(--grau);
                margin-right:4px; text-transform:uppercase; font-size:11px;
                letter-spacing:.04em; }
.vf-betrag{ margin-top:4px; font-size:13px; font-weight:600; color:var(--tinte); }
.vf-knoepfe{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
             align-items:center; }
/* Der nächste Schritt steht über den Knöpfen und nicht darunter: Er ist die
   Ansage, die Knöpfe sind die Werkzeuge dafür. */
.vf-naechster{ display:flex; gap:6px; align-items:center; margin-top:6px;
               padding:6px 9px; font-size:13px; line-height:1.4;
               background:var(--marke-hell); border-radius:var(--radius);
               color:var(--marke-tief); }
.vf-naechster svg{ width:15px; height:15px; flex:0 0 auto; }

/* Der farbige Rand sagt den Pflichtenkreis. Er ersetzt keine Beschriftung —
   die Art steht daneben in Worten. */
.vf-zeile.vf-pos{ border-left-color:var(--gruen); }
.vf-zeile.vf-neu{ border-left-color:var(--linie-satt); }
.vf-zeile.vf-leist{ border-left-color:var(--marke); }
.vf-zeile.vf-verh{ border-left-color:var(--amber); }
.vf-zeile.vf-vert{ border-left-color:var(--rot); }
.vf-zeile.vf-sich{ border-left-color:var(--lila); }
.vf-zeile.vf-akte{ border-left-color:transparent; color:var(--grau); }
.vf-zeile.vf-akte .vf-text{ font-size:13px; color:var(--grau); }
/* Verblasst heißt verblasst, nicht weg: lesbar, aber sichtbar ohne Gewicht. */
.vf-zeile.vf-blass{ opacity:.55; }

/* Der Urlaubsrechner sitzt unter der Abschlussliste und soll sich davon
   absetzen — er rechnet, er hakt nicht ab. */
.pers-urlaub{ margin-top:14px; padding-top:12px; border-top:1px solid var(--linie); }

/* --- Arbeitsmittel --- */
.vf-mittel{ display:flex; gap:12px; align-items:flex-start;
            padding:9px 0; border-bottom:1px solid var(--linie); }
.vf-mittel:last-of-type{ border-bottom:0; }
.vf-mittel.vf-blass{ opacity:.55; }
.vf-mittel .vf-text{ flex:1 1 auto; }

/* --- Dialoge --- */
/* Die Breite steht am dialog, nicht an .dlg-in: 03-module.css setzt
   dialog{width:min(92vw,460px)}, und eine max-width im Inneren kann das nicht
   aufheben. Das Dossier stand deshalb in einer 460-Pixel-Spalte. */
dialog.vf-dlg{ width:min(94vw,620px); }
dialog.vf-dlg-breit{ width:min(95vw,880px); max-height:88vh; overflow:auto; }
.vf-dlg .dlg-in{ max-width:none; }
/* Das Dossier ist lang: der Dialog selbst scrollt (siehe oben), damit der
   Schließen-Knopf am Ende erreichbar bleibt. */
.vf-dlg-breit .dlg-in{ max-width:none; }
.vf-dlg-reihe{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
               gap:12px; margin:10px 0; }
.vf-haken{ display:flex; gap:8px; align-items:center; margin:12px 0 0;
           font-size:14px; }
/* .pers-feld traegt display:flex — das schlaegt die Browservorgabe fuer
   [hidden], und das Kenntnisdatum stand auch bei Arten ohne 626-Uhr da. */
.pers-feld[hidden], .vf-dlg-reihe > [hidden]{ display:none; }
.vf-haken input{ width:18px; height:18px; flex:0 0 auto; }

/* Der Hinweis zur gewählten Art. Er steht VOR dem Textfeld, nicht danach —
   wer erst nach dem Tippen erfährt, welchen Beleg er braucht, holt ihn nicht
   mehr. */
.vf-hinweis{ margin:10px 0; padding:10px 12px; font-size:13px; line-height:1.5;
             background:var(--flaeche-2); border:1px solid var(--linie);
             border-radius:var(--radius); color:var(--tinte-2); }
.vf-hinweis-rot{ background:var(--rot-bg); border-color:var(--rot-linie);
                 color:var(--rot); }
.vf-hinweis-amber{ background:var(--amber-bg); border-color:var(--amber-linie);
                   color:var(--amber); }
.vf-hinweis-amber div{ margin-top:4px; }

/* --- Dossier --- */
.vf-dos-kopf{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
              gap:10px; margin:12px 0; padding:12px; font-size:14px;
              background:var(--flaeche-2); border-radius:var(--radius); }
.vf-dos-kopf em{ display:block; font-style:normal; font-size:11.5px;
                 text-transform:uppercase; letter-spacing:.05em; color:var(--grau); }
.vf-dos-recht{ margin:12px 0; padding:12px; font-size:14px; line-height:1.5;
               background:var(--marke-hell); border:1px solid var(--linie);
               border-radius:var(--radius); }
.vf-dos-recht div{ margin-top:6px; font-weight:500; }
.vf-dos-block{ margin-top:16px; }
.vf-dos-block h4{ margin:0 0 8px; font-size:12.5px; text-transform:uppercase;
                  letter-spacing:.05em; color:var(--grau); }
.vf-dos-liste{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.55; }
.vf-dos-liste li{ margin-bottom:5px; }
.vf-dos-liste .vf-datum{ display:inline-block; flex:none; margin-right:6px; }
.vf-dos-form{ border-top:1px solid var(--linie); padding-top:12px; }

/* Die Auskunft wird abgeschrieben oder vorgelesen — Monospace, umbrechend,
   markierbar. */
.vf-auskunft{ margin:10px 0 0; padding:12px; max-height:52vh; overflow:auto;
              font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
              font-size:12.5px; line-height:1.55; white-space:pre-wrap;
              background:var(--flaeche-2); border:1px solid var(--linie);
              border-radius:var(--radius); user-select:text; }

table.liste.vf-tabelle{ width:100%; margin-top:10px; font-size:13px; }
table.liste.vf-tabelle td{ padding:5px 8px; border-bottom:1px solid var(--linie); }
.vf-re{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* --- Handy --- */
@media (max-width:640px){
  .vf-zeile{ flex-direction:column; gap:2px; padding-left:8px; }
  .vf-datum{ flex:none; }
  .vf-dos-kopf{ grid-template-columns:1fr; }
  table.liste.vf-tabelle td:nth-child(4){ display:none; }
}
/* ============================================================================
   Geraete. Der Schreibtisch ist die Vorgabe, das Handy bekommt eine eigene
   Fassung — keine gestauchte Schreibtisch-Ansicht. Zwei Stellen entscheiden:
   ab 1180 px wird die Seitenleiste schmal, ab 900 px wandert die Navigation
   nach unten und die Tabellen werden zu Zeilen.
   ========================================================================== */

.nur-handy{display:none}

/* ------------------------------------------- Mittlere Breite: schmale Leiste */
@media (max-width:1180px) and (min-width:901px){
  :root{--seite-breit:var(--seite-schmal)}
  aside.seite{align-items:center}
  .firma{padding:16px 0 14px;justify-content:center;width:100%}
  .firma-wort{display:none}
  .nav-gruppe-titel{display:none}
  .seite-nav{padding:10px 8px;width:100%}
  .nav-punkt{justify-content:center;padding:11px 0;gap:0}
  .nav-punkt span.txt{display:none}
  .nav-punkt svg{width:20px;height:20px}
  .nav-punkt .zahl-marke{position:absolute;top:3px;right:6px;min-width:17px;height:16px;
    padding:0 4px;font-size:10px}
  .nav-gruppe{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:6px;margin-bottom:6px}
  .nav-gruppe:last-child{border-bottom:0}
  .seite-fuss{display:none}
  .kopf,.inhalt{padding-left:20px;padding-right:20px}
}

/* ------------------------------------------------------------------ Handy */
@media (max-width:900px){
  .nur-handy{display:block}
  .nur-breit{display:none !important}

  body{padding-bottom:calc(var(--leiste) + env(safe-area-inset-bottom))}
  .rahmen{display:block;min-height:0}
  aside.seite{display:none}
  .haupt{display:block}

  html,body{overflow-x:hidden}
  /* Kopf: Marke links, Titel darunter — kein Platz fuer beides nebeneinander.
     Am Handy klebt nur die Unterleiste; der Kopf mit den runden Knoepfen
     scrollt mit, sonst liegen beide uebereinander und scheinen durch. */
  .kopf{padding:0 14px;min-height:54px;gap:10px;position:static;flex-wrap:wrap;
    background:var(--grund);backdrop-filter:none;-webkit-backdrop-filter:none}
  .kopf h1{font-size:17.5px}
  .kopf .kopf-sub{display:none}
  .inhalt{padding:16px 14px 30px}

  /* Zweite Reihe: die Unterpunkte des gewaehlten Bereichs */
  .handy-kopf{display:flex;align-items:center;gap:11px;
    padding:9px 14px;background:var(--nacht);color:#fff}
  .handy-kopf .firma-zeichen{width:30px;height:30px;border-radius:8px;padding:5px}
  .handy-kopf .hk-titel{font-size:15px;font-weight:700;flex:1 1 auto;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .handy-kopf .hk-wer{font-size:12px;color:#B9C8D5;font-weight:600;flex:0 0 auto}

  .unterleiste{display:flex;gap:6px;overflow-x:auto;padding:10px 14px 11px;
    background:#0F1E2D;border-bottom:1px solid var(--linie);
    position:sticky;top:0;z-index:19;scrollbar-width:none}
  .unterleiste::-webkit-scrollbar{display:none}
  .unterleiste button{flex:0 0 auto;border:1px solid var(--linie);background:#0F1E2D;
    color:var(--tinte-2);font:inherit;font-size:13px;font-weight:650;min-height:40px;
    padding:6px 12px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
  .unterleiste button.an{background:var(--nacht);color:#fff;border-color:var(--marke)}
  .unterleiste button .zahl-marke{min-width:19px;height:18px;padding:0 5px;border-radius:999px;
    background:var(--linie-satt);color:var(--tinte);font-size:10.5px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center}
  .unterleiste button .zahl-marke.warn{background:var(--rot);color:var(--auf-farbe)}
  .unterleiste button.an .zahl-marke{background:rgba(255,255,255,.26);color:#fff}

  /* Untere Leiste: nur noch vier Bereiche — ausgeschrieben, nichts schneidet ab */
  nav.handy{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;
    background:rgba(15,30,45,0.96);backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--linie);padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 16px rgba(0,0,0,0.175)}
  nav.handy button{flex:1 1 0;min-width:0;border:0;background:none;padding:9px 3px 8px;
    font-size:11.5px;font-weight:700;color:var(--grau);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    position:relative;font-family:inherit}
  nav.handy button svg{width:22px;height:22px;flex:0 0 auto}
  nav.handy button span.txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  nav.handy button.an{color:var(--marke)}
  nav.handy button.an::before{content:"";position:absolute;top:0;left:50%;
    transform:translateX(-50%);width:30px;height:3px;border-radius:0 0 4px 4px;background:var(--marke)}
  nav.handy .punkt{position:absolute;top:4px;left:50%;margin-left:8px;background:#2D4762;
    color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:1px 5px;
    line-height:1.45;box-shadow:0 0 0 2px var(--flaeche)}
  nav.handy .punkt.warn{background:var(--rot)}

  .toast{bottom:calc(var(--leiste) + 16px)}

  /* Tabellen werden zu Zeilen. Als Raster mit fester rechter Spalte fuer den
     Betrag — als Fliesstext gesetzt laeuft ein langer Betrag aus dem Bild. */
  .tab-huelle{border-radius:var(--radius)}
  table.liste thead{display:none}
  table.liste,table.liste tbody{display:block;width:100%}
  table.liste tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:1px 12px;padding:12px 14px;border-bottom:1px solid var(--linie);width:100%}
  table.liste tbody tr:last-child{border-bottom:0}
  table.liste tbody td{padding:0;border:0;display:block;min-width:0}
  table.liste td.nr{grid-column:1;grid-row:1;font-size:12px;color:var(--grau);font-weight:700}
  table.liste td.wer{grid-column:1;grid-row:2;font-size:15px;font-weight:700;
    max-width:none;white-space:normal}
  table.liste td.num{grid-column:2;grid-row:1/span 2;align-self:center;
    font-size:16px;font-weight:800;text-align:right;white-space:nowrap}
  /* width:1% stammt aus der Tabellenansicht und laesst die Zelle im Raster
     schrumpfen — die Marken brechen dann untereinander um. */
  table.liste td.marken{grid-column:1/-1;grid-row:3;margin-top:8px;width:auto;
    white-space:normal;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
  table.liste td.tat{grid-column:1/-1;margin-top:9px;text-align:left;width:auto}
  table.liste td.tat .btn{width:100%}
  table.liste td.detailzelle{grid-column:1/-1}
  .tab-fuss{padding:11px 14px;gap:4px 14px}

  /* Der Titel steht schon in der Unterleiste — zweimal ist Platzverschwendung
     auf einem Bildschirm, der ohnehin knapp ist. Die Knoepfe im Kopf (Suche,
     Auge, Ausgeben, Ich) bleiben als eine Zeile. */
  .unterleiste + .kopf{min-height:0;padding:0;border:0}
  .unterleiste + .kopf h1{display:none}
  /* Eigene Zeile unter den Reitern: width:100% macht margin-left:auto
     wirkungslos, darum hier ausdruecklich nach rechts ausrichten. Sonst
     kleben die runden Knoepfe am linken Rand und die Zeile sieht aus,
     als waere sie halb fertig. Ein Suchfeld waechst weiter in die
     Luecke, weil es flex:1 hat. */
  .unterleiste + .kopf .kopf-rechts{padding:10px 14px 0;width:100%;
    justify-content:flex-end}
  .kopf-rechts{gap:7px}
  .kopf-rechts .suche{flex:1 1 120px;min-width:0;max-width:none}
  .kopf-knopf{width:40px;height:40px}
  .nur-handy-inline{display:inline-flex}
  /* 14 statt 8: zwischen der schiebbaren Pillenreihe und den runden
     Knoepfen muss Luft stehen, sonst klebt ein angeschnittenes Wort
     am Knopf und die Zeile sieht kaputt aus. */
  .leiste{margin-bottom:12px;gap:16px}
  .leiste-l{gap:6px}
  .leiste-r{margin-left:auto}
  /* Tippziele: 40 px hoch — Chips, Segmente, Kalenderknoepfe */
  .filter button{min-height:40px;padding:8px 13px;font-size:13px}
  .segment button{min-height:34px;padding:7px 11px;font-size:13px}
  .kal-nav,.kal-heute{min-height:40px;min-width:40px}
  .btn.klein{min-height:36px}
  /* Menues sind am Handy ein Blatt von unten — ein Klappmenue an einem
     Knopf am Rand lief sonst links oder rechts aus dem Bild. */
  details.menue .menue-liste,details.menue.rechts .menue-liste,details.menue.oben .menue-liste{
    position:fixed;left:12px;right:12px;top:auto;bottom:calc(var(--leiste) + env(safe-area-inset-bottom) + 12px);
    max-width:none;min-width:0;max-height:70vh;overflow:auto;z-index:60;
    box-shadow:0 12px 40px rgba(0,0,0,0.7)}
  details.menue[open]::before{content:"";position:fixed;inset:0;background:rgba(11,31,51,.25);z-index:59}
  .menue-e{min-height:44px;font-size:14px}
  .dlg-btn .btn{flex:1 1 40%}

  /* Sieben Filter passen nicht in drei Zeilen — lieber eine, die man schiebt.
     Der Auslauf hat eine feste Breite: bei 93 % einer 500-px-Reihe liegt er
     35 px weit im Text und frisst ein halbes Wort. */
  .filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-left:-14px;margin-right:-14px;padding:0 14px 3px}
  .filter::-webkit-scrollbar{display:none}
  /* Der Auslauf sitzt am Knopfbereich, weil der nicht scrollt: ein Verlauf in
     der Seitenfarbe unmittelbar links vom ersten Knopf. Eine Maske auf der
     Reihe selbst wird mit dem Inhalt gezeichnet und liegt bei 930 px Reihe
     ausserhalb des Bildes — dreimal probiert, dreimal nichts zu sehen. */
  /* Der Auslauf der schiebbaren Pillenreihe: ein Streifen, der im Scroller
     klebt (position:sticky) und deshalb immer am sichtbaren Rand steht. Eine
     Maske wird mit dem INHALT gezeichnet — bei einer 930 px langen Reihe liegt
     sie ausserhalb des Bildes, gemessen am 17.09.2026. */
  .filter::after{content:"";position:sticky;right:0;z-index:1;
    flex:0 0 46px;margin-left:-46px;align-self:stretch;pointer-events:none;
    background:linear-gradient(to right,rgba(10,21,32,0),var(--grund))}
  .leiste-r{position:relative}
  .leiste-r::before{content:"";position:absolute;right:100%;top:-4px;bottom:-4px;
    width:30px;pointer-events:none;
    background:linear-gradient(to right,rgba(10,21,32,0),var(--grund))}
  /* In einer Leiste darf die Reihe nicht ueber den Rand bluten — dort stehen
     rechts die Knoepfe. Stattdessen 12 px Luft hinter der letzten Pille,
     damit sie sich ganz ins Bild schieben laesst. */
  .leiste .filter{margin:0;padding:0 12px 3px 0}

  /* Startseite */
  .um-kopfzahl{padding:19px 18px 17px;border-radius:var(--radius)}
  .um-gross{font-size:31px}
  .um-gitter{grid-template-columns:1fr 1fr;gap:9px}
  .um-karte{padding:12px 13px}
  .um-k-wert{font-size:21px}
  .um-k-label{font-size:11.5px}
  .um-block{padding:15px 16px 14px;border-radius:var(--radius)}
  .um-diagramm{height:128px;gap:4px}
  .um-bl{font-size:9px;margin-top:5px}
  .um-kbar{flex:0 0 62px}
  .um-kwert{flex:0 0 84px;font-size:13px}
  .um-kname{font-size:13px}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:9px}
  .kpi-karte{padding:12px 13px;gap:10px}
  .kpi-ic{width:32px;height:32px}
  .kpi-ic svg{width:17px;height:17px}
  .kpi-wert{font-size:20px}

  .zuebersicht{gap:8px}
  .zk{flex:1 1 calc(50% - 4px);min-width:0;padding:11px 13px}
  .zk .zk-n{font-size:19px}

  .karte{border-radius:var(--radius)}
  .kopfzeile,.kopf-karte{padding:14px 15px 9px}
  .aktionen{padding:0 15px 14px}
  .btn{flex:1 1 auto;min-width:118px;padding:11px 14px}
  .ei-kopf{padding:14px 15px 10px}
  .ei-koerper{padding:0 15px}
  .ei-frage{margin:13px 15px 0}
  .ei .aktionen{padding:13px 15px 15px}
  .ei-feld{flex-direction:column;gap:1px}
  .ei-feld span{min-width:0}

  .kal-tag{min-height:60px;border-radius:9px}
  .kal-woche .kal-tag{min-height:120px}
  .kal-grid,.kal-wochentage{gap:5px}
  .gitter{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .streifen img,.streifen .mehr{width:76px;height:76px}
  .suche{max-width:none;flex:1 1 100%;min-width:0}
  .filter{gap:6px}
  .filter button{padding:6px 12px;font-size:12.5px}
}

/* Sehr schmal: die vier Bereichsnamen duerfen nicht abschneiden */
@media (max-width:360px){
  nav.handy button{font-size:10.5px}
  .um-gitter,.kpi-grid{grid-template-columns:1fr}
}

/* -------------------------------------------------------------- Drucken */
@media print{
  aside.seite,nav.handy,.unterleiste,.handy-kopf,.kopf-rechts,.aktionen,.toast{display:none !important}
  body{background:#fff}
  .karte,.tab-huelle,.um-block{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .inhalt{padding:0;max-width:none}
}

/* ------------------------------------------------- Bedienung ohne Maus */
:focus-visible{outline:2px solid var(--marke);outline-offset:2px;border-radius:4px}
/* Weniger Bewegung gewünscht (prefers-reduced-motion): ohne eigene Wahl
   steht der Schalter dann auf „aus“ (effekte() in js-02b) und nichts bewegt
   sich. Wer auf diesem Gerät ausdrücklich „Effekte an“ wählt, bekommt sie —
   bis zum 12.10.2026 hat diese Regel jede Bewegung abgeschaltet, auch nach
   der eigenen Wahl, und am Handy lief deshalb kein Effekt. */
@media (prefers-reduced-motion:reduce){
  html:not([data-effekte="voll"]) *,html:not([data-effekte="voll"]) *::before,html:not([data-effekte="voll"]) *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ------------------------------------------- Team: mittlere Breite und Handy */
/* Auf der schmalen Leiste (69–1180 px) ist der Fuss ausgeblendet — dort waere
   fuer Namen kein Platz. Das Podest darf trotzdem nicht ganz verschwinden,
   sonst sieht genau der nichts, der am Schreibtisch mit zwei Fenstern
   arbeitet. Es bleibt der eigene Platz als Plakette am Team-Punkt. */
@media (max-width:1180px) and (min-width:901px){
  .podest{display:none}
}

@media (max-width:900px){
  .handy-kopf .hk-team{padding:3px 8px 3px 3px}
  .handy-kopf .hk-name{max-width:64px}
  /* Vier Spalten passen am Handy nicht in eine Zeile — der Text der Tat
     bekommt die naechste. */
  .lz-liste li{flex-wrap:wrap;row-gap:2px}
  .lz-was{flex:1 1 100%;order:4;padding-left:0;font-size:12.5px}
  .lz-zeit{flex:0 0 auto}
  .lz-wer{flex:1 1 auto}
  .tv-name{flex:0 0 54px;font-size:12px}
  .tv-tage{gap:4px}
  .tm-zeile{gap:10px}
  .tm-zahlen>b{font-size:18px}
  /* Das Arbeitsfeld ("Rechnungen, Objekte, Einsatz") sprengt am Handy die
     Zeile in drei Reihen. Wer wofuer zustaendig ist, wissen die drei ohnehin. */
  .tm-feld{display:none}
}

/* ------------------------------------------------------ Mailfenster am Handy
   Auf 390 px ist kein Platz fuer Liste und Lesebereich nebeneinander. Statt
   die Spalten zu stauchen, zeigt das Handy immer nur eine der beiden: die
   Liste, und nach einem Tipp die Nachricht mit einem Zurueck-Knopf. Beide
   scrollen dann mit der Seite — die eigenen Rollbalken der Spalten waeren auf
   dem Handy ein Rollbereich im Rollbereich und damit kaum zu treffen. */
@media (max-width:900px){
  .ml{height:auto;min-height:0;gap:10px}
  .ml-ordner{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:3px;margin:0 -14px;padding-left:14px;padding-right:14px}
  .ml-ordner::-webkit-scrollbar{display:none}
  .ml-ordner button{flex:0 0 auto}

  .ml-flaeche{display:block;border:0;border-radius:0;background:transparent;
    box-shadow:none;overflow:visible}
  /* overflow:hidden ist nur für die runden Ecken da, die Liste rollt hier
     nicht selbst. Das contain vom Schreibtisch muss deshalb weg: Chrome hält
     sonst jedes Wischen auf der Liste fest, auch ohne eigenen Rollweg, und
     das Postfach lässt sich nicht mehr bewegen (06.10.2026). */
  .ml-liste{display:block;flex:none;border-right:0;overflow:hidden;
    overscroll-behavior:auto;
    border:1px solid var(--linie);border-radius:var(--radius-gross)}
  .ml-liste .ml-zeile:last-child{border-bottom:0}
  .ml-lese{display:none}
  .ml-flaeche.ml-liest .ml-liste{display:none}
  .ml-flaeche.ml-liest .ml-lese{display:block;overflow:visible;background:var(--flaeche);
    border:1px solid var(--linie);border-radius:var(--radius-gross)}

  /* Der Kopf des Lesebereichs klebt am Schreibtisch an der Spalte. Am Handy
     scrollt die ganze Seite, und der Seitenkopf steht schon oben — zwei
     uebereinanderliegende klebende Leisten verdecken sonst die erste Zeile. */
  .ml-lese-kopf{position:static;padding:14px 15px 13px}
  .ml-lese-kopf .zurueck{display:inline-flex;margin-bottom:11px}
  .ml-titel{font-size:16.5px}
  .ml-koerper{padding:16px 15px 24px}
  .ml-leer{height:auto;min-height:280px}
  .ml-marke{max-width:150px}
}

/* Dreistellige Zahlen passen sonst nicht in den Punkt. Gekappt wird nicht
   mehr: „99+" liest sich wie eine Aufgabe, die niemand schafft. */
.handy .punkt.viele{font-size:9.5px;padding:0 4px;letter-spacing:-.02em}
/* Arbeiten und Planung (Punkt 575, Teil 3). Nur Anordnung, Farben und
   Formen aus den bestehenden Bausteinen. Am iPad und Schreibtisch stehen
   Arbeiten und Planung nebeneinander, am Handy schaltet der Umschalter. */
.ar-zahlen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.ar-zahl{min-height:44px}
.ar-zahl.an{background:var(--nacht);color:#fff;border-color:var(--marke)}
.ar-zahl.ar-warn b{color:var(--rot)}
.ar-zahl.an.ar-warn b{color:#fff}
.ar-umschalter{display:flex;gap:8px;margin:0 0 12px}
.ar-umschalter .btn{min-height:44px;flex:1}
.ar-umschalter .btn.an{background:var(--nacht);color:#fff;border-color:var(--marke)}
.ar-raster{display:grid;grid-template-columns:1fr;gap:16px}
.ar-zeige-arbeiten .ar-spalte:nth-child(2){display:none}
.ar-zeige-planung .ar-spalte:nth-child(1){display:none}
@media (min-width:760px){
  .ar-umschalter{display:none}
  .ar-raster{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .ar-zeige-arbeiten .ar-spalte:nth-child(2),.ar-zeige-planung .ar-spalte:nth-child(1){display:block}
}
.ar-spalte{min-width:0}
.ar-zeile{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-klein);margin:0 0 8px}
.ar-zeile.ar-ueberfaellig,.ar-zeile.ar-blockiert{border-left:4px solid var(--rot)}
.ar-zeile.ar-pruefen{border-left:4px solid var(--amber)}
.ar-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;width:100%;min-height:44px;padding:10px 12px;
  background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.ar-was{display:flex;flex-direction:column;gap:2px;grid-column:1/-1;min-width:0}
.ar-was b{overflow-wrap:anywhere}
.ar-wer,.ar-wann{font-size:14px}
.ar-kopf .marke{justify-self:start}
@media (min-width:1100px){
  .ar-kopf{grid-template-columns:minmax(0,2fr) minmax(0,1fr) 90px auto;align-items:center}
  .ar-was{grid-column:auto}
}
.ar-grund{padding:0 12px 8px;font-size:13.5px}
.ar-bearbeiten{border-top:1px solid var(--linie);padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.ar-block{display:flex;flex-direction:column;gap:6px}
.ar-mit{display:flex;flex-wrap:wrap;gap:4px 12px;max-height:180px;overflow:auto}
.ar-haken{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px}
.ar-knoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ar-knoepfe .btn,.ar-knoepfe input{min-height:44px}
.ar-notiz{min-height:44px}
.ar-fehler{color:var(--rot);font-size:13.5px}
.ar-fehler:empty{display:none}
.ar-tag{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:10px 12px;margin:0 0 8px}
.ar-tag-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px}
.ar-dienst{font-size:14px;margin:4px 0}
.ar-plan-arbeit{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;border-top:1px solid var(--linie);padding:6px 0 0;margin-top:6px;font-size:14px}
.ar-hinweis{margin-top:6px}
.ar-datum,.ar-uhr,.ar-notiz{font:inherit;padding:0 8px;border:1px solid var(--grau);border-radius:var(--radius-klein);background:var(--flaeche);color:var(--tinte)}
/* Aufträge. Eine Karte je Auftrag, der Balken ist die Hauptsache: er ist das
   Einzige auf der Seite, das sich bewegt, wenn jemand arbeitet. */
.au-raster{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))}
.au-karte{padding:14px 15px 13px;cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}
.au-karte:hover{border-color:var(--linie-satt);box-shadow:var(--schatten);transform:translateY(-1px)}
.au-kopf{display:flex;align-items:flex-start;gap:12px}
.au-titel{flex:1 1 auto;min-width:0}
.au-titel b{display:block;font-size:15px;font-weight:750;line-height:1.3}
.au-nr{display:block;font-size:11.5px;color:var(--grau);margin-top:2px;
  font-variant-numeric:tabular-nums}
.au-proz{flex:0 0 auto;font-size:19px;font-weight:800;line-height:1;color:var(--marke-tief);
  font-variant-numeric:tabular-nums}

/* Der Balken. Grau = keine Schritte hinterlegt, grün = durch, rot = die Frist
   ist vorbei und es fehlt noch etwas. */
.au-balken{display:block;height:8px;border-radius:999px;margin:11px 0 9px;
  background:var(--flaeche-2);border:1px solid var(--linie);overflow:hidden}
.au-balken i{display:block;height:100%;background:var(--marke);border-radius:999px;
  transition:width .3s ease}
.au-balken.au-b-voll i{background:var(--gruen)}
.au-balken.au-b-spaet i{background:var(--rot)}
.au-balken.au-b-leer{background:repeating-linear-gradient(135deg,
  var(--flaeche-2) 0 6px,var(--flaeche) 6px 12px)}

.au-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px}
.au-wo{flex:1 1 auto;min-width:0;color:var(--tinte-2);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-meta{margin-top:5px;color:var(--grau);font-size:12px}
.au-frist{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--grau);
  background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;padding:2px 9px}
.au-frist.au-spaet{color:var(--rot);background:var(--rot-bg);border-color:var(--rot-linie)}
.au-std{margin-left:auto;font-size:12px;color:var(--grau)}
.au-std-knapp{color:var(--amber);font-weight:700}
.au-std-leer{color:var(--grau)}

/* Der nächste Schritt mit seinem Knopf: der kürzeste Weg von der Hofeinfahrt
   zum bewegten Balken. */
.au-naechst{display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--linie)}
/* Einzeilig: umgebrochen stand da "ALS / NAECHSTES" und der Schritt daneben
   war auf die Haelfte zusammengedrueckt. */
.au-naechst-w{flex:0 0 auto;white-space:nowrap;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.au-naechst-t{flex:1 1 auto;min-width:0;font-size:13px;font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.au-fertig .au-proz{color:var(--gruen)}
.au-abgebrochen{opacity:.7}
.au-abgebrochen .au-titel b{text-decoration:line-through}

/* Kompakte Fassung für die Startseite und die Akten. */
.au-raster-start{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.au-klein{padding:12px 13px 11px}
.au-klein .au-titel b{font-size:14px}

/* Detail */
.au-detail-kopf{padding:16px 17px 15px}
.au-detail-zahlen{display:flex;flex-wrap:wrap;gap:10px 26px;margin:12px 0 4px}
.au-feld{display:flex;flex-direction:column;gap:2px}
.au-feld span{font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grau)}
.au-feld b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.au-quelle{margin-top:8px;font-size:11.5px}
.au-notiz{margin-top:10px;white-space:pre-wrap;font-size:13.5px;line-height:1.5;
  background:var(--flaeche-2);border:1px solid var(--linie);border-radius:8px;padding:9px 11px}

/* Schritte: Kästchen, Text, wer und wann. Das Streichen steht rechts und
   bleibt still, damit niemand versehentlich einen Schritt verliert. */
.au-schritte{display:flex;flex-direction:column;gap:2px;margin:4px 0 12px}
.au-schritt{display:flex;align-items:center;gap:10px;padding:9px 6px;
  border-bottom:1px solid var(--linie);cursor:pointer}
.au-schritt:last-child{border-bottom:0}
.au-schritt:hover{background:var(--flaeche-2)}
.au-schritt input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--gruen);cursor:pointer}
.au-s-text{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600}
.au-s-fertig .au-s-text{color:var(--grau);text-decoration:line-through;font-weight:500}
.au-s-wer{flex:0 0 auto;font-size:11.5px;color:var(--grau-hell);white-space:nowrap}
.au-s-weg{flex:0 0 auto;border:0;background:none;color:var(--grau-hell);font-size:18px;
  line-height:1;padding:0 4px;cursor:pointer;border-radius:6px}
.au-s-weg:hover{color:var(--rot);background:var(--rot-bg)}
.au-neu{display:flex;gap:8px;align-items:center}
.au-neu .feld{flex:1 1 auto;min-width:0}

/* Auftragszeile in der Kunden- und Objektakte. */
.au-minis{display:flex;flex-direction:column;gap:6px}
.au-mini{display:flex;align-items:center;gap:10px;padding:7px 2px;cursor:pointer;
  border-bottom:1px solid var(--linie)}
.au-mini:last-child{border-bottom:0}
.au-mini:hover{background:var(--flaeche-2)}
.au-mini-t{flex:1 1 40%;min-width:0;font-size:13.5px;font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-mini .au-balken{flex:1 1 30%;margin:0;max-width:150px}
.au-mini-p{flex:0 0 auto;font-size:12.5px;font-weight:750;color:var(--marke-tief);
  font-variant-numeric:tabular-nums;min-width:38px;text-align:right}

/* Das Formular: zwei Spalten am Schreibtisch, eine am Handy. */
.au-form{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:6px 0 4px}
.au-form .kd-eingabe-lang{grid-column:1 / -1}

@media (max-width:900px){
  .au-raster{grid-template-columns:1fr;gap:10px}
  .au-form{grid-template-columns:1fr}
  .au-naechst{flex-wrap:wrap}
  .au-naechst-t{flex:1 1 100%;order:2;white-space:normal}
  .au-naechst .btn{order:3;margin-left:auto}
  .au-std{margin-left:0;flex:1 1 100%}
  .au-mini{flex-wrap:wrap}
  .au-mini-t{flex:1 1 100%}
}
/* Geplanter Auftrag (Start nach heute, Punkt 521): Datum statt Prozent,
   kleiner und ruhig, weil nichts zu tun ist. */
.au-proz.au-geplant{font-size:13px;font-weight:700;color:var(--grau);white-space:nowrap}
/* ============================================================================
   Belege — Fassung 12.09.2026. Überschreibt Regeln aus 03-module.css für die
   Sichten „Nach Vorgang", „Alles" und „Ohne Zuordnung" sowie den Zuordnen-
   Dialog. Handy-Regeln stehen unten in derselben Datei.
   ========================================================================== */

/* --- Posten: Sinnbild und Titel öffnen das Dokument (kein „Öffnen"-Link mehr) */
a.p-sym{text-decoration:none;color:var(--marke-tief);background:var(--marke-hell);border-color:rgba(141,187,226,0.4);
  transition:border-color .14s,background .14s}
a.p-sym:hover{border-color:var(--marke);background:rgba(141,187,226,0.184)}
.p-titel a{color:inherit;text-decoration:none}
.p-titel a:hover{color:var(--marke-tief);text-decoration:underline;text-underline-offset:2px}

/* --- Karte in „Ohne Zuordnung" ist selbst klickbar (öffnet den Zuordnen-Dialog) */
.posten.klick{cursor:pointer;transition:border-color .14s,box-shadow .14s}
.posten.klick:hover{border-color:var(--linie-satt);box-shadow:var(--schatten-hoch)}
.posten.klick:active{box-shadow:var(--schatten)}

/* --- Ankreuzen: 22 px Kästchen in einem 40 px Ziel */
.pruef-wahl{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center;
  width:40px;min-height:40px;margin:-8px 0 -8px -8px;padding:12px 0 0;cursor:pointer}
.pruef-cb{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--marke);cursor:pointer}

/* --- Auswahlfeld „Kategorie" in der Leiste (statt zehn Pills) */
.pruef-wahl-feld{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  font-weight:650;color:var(--tinte-2);flex:0 1 auto;min-width:0}
.pruef-wahl-feld>span{white-space:nowrap}
select.pruef-sel{width:auto;max-width:min(340px,100%);padding:7px 34px 7px 11px;font-size:13.5px;
  font-weight:600;color:var(--tinte);line-height:1.3;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background:#0F1E2D url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center/15px 15px}

/* --- Klebende Aktionsleiste für die Mehrfachauswahl. Erscheint erst, wenn
   etwas angekreuzt ist, und bleibt beim Rollen am unteren Rand stehen. */
.pruef-aktion{position:sticky;bottom:12px;z-index:30;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;margin:14px 0 0;padding:10px 14px;background:#0F1E2D;border:1px solid var(--linie-satt);
  border-radius:var(--radius);box-shadow:var(--schatten-dialog)}
.pruef-aktion[hidden]{display:none}
.pruef-aktion .btn{flex:0 0 auto}
.pruef-anzahl{font-size:13.5px;font-weight:700;color:var(--tinte);flex:1 1 auto}

/* --- Zuordnen-Dialog: ein Verhalten (Sofortklick), Schalter für mehrere Kunden */
.zu-schalter{display:flex;align-items:center;gap:9px;margin:10px 2px 0;font-size:13px;
  font-weight:650;color:var(--tinte-2);cursor:pointer;min-height:24px}
.zu-schalter input{width:18px;height:18px;margin:0;accent-color:var(--marke);cursor:pointer}
.zu-treffer{display:flex;align-items:center;gap:8px;min-height:42px}
.zu-treffer.an{background:var(--marke-hell);color:var(--marke-tief);font-weight:700}
.zu-treffer.an:hover{background:rgba(141,187,226,0.184)}
.zu-kreuz{flex:0 0 auto;width:18px;height:18px;border-radius:5px;border:1px solid var(--linie-satt);
  background:#0F1E2D;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.zu-treffer.an .zu-kreuz{background:var(--marke-tief);border-color:var(--marke-tief)}
.zu-kreuz svg{width:12px;height:12px}
.zu-kundenleiste{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 12px;
  background:var(--flaeche-2);border:1px solid var(--linie);border-radius:var(--radius)}
.zu-kundenleiste .btn{flex:0 0 auto}

/* --- Handy */
@media (max-width:900px){
  .pruef-wahl-feld{flex:1 1 100%;gap:7px}
  .pruef-wahl-feld>span{font-size:12.5px}
  select.pruef-sel{flex:1 1 auto;max-width:none;min-width:0}
  .pruef-aktion{bottom:calc(var(--leiste) + env(safe-area-inset-bottom) + 8px);padding:10px 12px;gap:8px}
  .pruef-aktion .btn{flex:1 1 auto;min-width:0}
  .pruef-anzahl{flex:1 1 100%;text-align:center;font-size:13px}
  .zu-kundenleiste{flex-wrap:wrap}
  .zu-kundenleiste .pruef-anzahl{flex:1 1 100%;text-align:left}
  .zu-kundenleiste .btn{flex:1 1 auto}
  .gitter{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;min-width:0}
  .gitter figure{min-width:0}
  .streifen{margin:0;max-width:100%}
}
/* ============================================================================
   Einsatz — Fassung vom 12.09.2026 (Woche, Stunden, Stempeluhr, Abrechnung).
   Wird nach 04-geraete.css geladen und überschreibt, was in 03-module.css
   noch vom alten Aufbau steht. Handy-Regeln stehen unten mit drin.
   ========================================================================== */

/* --- Leiste: ‹ KW 37 · ab 07.09. › als Gruppe, rechts Hauptknopf + „…" --- */
.eins-wochen{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.eins-wnav{width:34px;height:34px;border:1px solid var(--linie);background:#0F1E2D;border-radius:9px;
  font-family:inherit;font-size:20px;line-height:1;color:var(--tinte-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0 0 2px}
.eins-wnav:hover{background:var(--flaeche-2);border-color:var(--linie-satt)}
.eins-wkw{height:34px;border:1px solid var(--linie);background:#0F1E2D;border-radius:9px;padding:0 12px;
  font:inherit;font-size:13px;font-weight:650;color:var(--tinte-2);cursor:pointer;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.eins-wkw.an{background:var(--nacht);color:#fff;border-color:var(--marke)}
.eins-wkw:not(.an):hover{background:var(--flaeche-2);border-color:var(--linie-satt)}
.eins-recht{display:inline-flex;align-items:center;gap:8px}

/* --- Wochentafel: Bedarf und Abfahrt im Kopf, Zellen ohne Textauswahl --- */
.eins-tafel thead .eins-bedarf td,.eins-tafel thead .eins-abfahrt td{background:var(--flaeche-2)}
.eins-tafel thead .eins-abfahrt td{border-bottom:1px solid var(--linie-satt)}
.eins-tafel thead .eins-abfahrt .eins-namensp{font-size:11px;color:var(--grau);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;background:var(--flaeche-2)}
.eins-zelle{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.eins-legende b{color:var(--tinte-2);font-weight:700}

/* --- Menü an der Zelle: neben dem Zeiger, am Handy als Blatt von unten --- */
.eins-popup-huelle{position:fixed;inset:0;z-index:60}
.eins-popup-deckel{position:absolute;inset:0;background:transparent}
.eins-popup{position:absolute;min-width:210px;max-width:320px;background:#0F1E2D;border:1px solid var(--linie);
  border-radius:12px;box-shadow:var(--schatten-dialog);padding:6px;display:flex;flex-direction:column;gap:1px}
.eins-popup-titel{font-size:12px;color:var(--grau);font-weight:700;padding:7px 10px 5px;
  border-bottom:1px solid var(--linie);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eins-popup hr{border:0;border-top:1px solid var(--linie);margin:5px 4px}
.eins-popup-e{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
  color:var(--tinte);font:inherit;font-size:13.5px;font-weight:600;text-align:left;
  padding:7px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;min-height:40px}
.eins-popup-e svg{width:15px;height:15px;flex:0 0 auto;color:var(--grau)}
.eins-popup-e .eins-kz{flex:0 0 auto;width:26px;height:26px;font-size:12px}
.eins-popup-e small{margin-left:auto;font-size:11.5px;color:var(--grau);font-weight:600;
  max-width:140px;overflow:hidden;text-overflow:ellipsis}
.eins-popup-e:hover{background:var(--marke-hell);color:var(--marke-tief)}
.eins-popup-e:hover svg{color:var(--marke-tief)}
.eins-popup-e.an{background:var(--flaeche-2)}
.eins-popup-hak{margin-left:auto;width:16px;height:16px;color:var(--gruen);display:inline-flex}
.eins-popup-hak svg{width:100%;height:100%;color:var(--gruen)}
.eins-popup-e.rot{color:var(--rot)}
.eins-popup-e.rot svg{color:var(--rot)}
.eins-popup-e.rot:hover{background:var(--rot-bg)}
.eins-popup-e[disabled]{opacity:.45;cursor:default}

/* --- Tag-Karte unter der Tafel --- */
.eins-tagkarte .kopfzeile{flex-wrap:wrap}
.eins-tagwahl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.eins-tagwahl .feld{width:auto;margin:0;padding:7px 10px;font-size:13px}
.eins-tagselect{min-width:130px}
.eins-teams{padding-bottom:2px}
.eins-sollist .kopfzeile{align-items:center}

/* --- Handy-Tagesansicht: Pillen Mo … So, darunter die Zeilen des Tages --- */
.eins-tagtafel{padding:10px 12px 4px}
.eins-tagpillen{display:flex;gap:5px;margin-bottom:10px;align-items:stretch}
.eins-tagnav{width:28px;height:auto;flex:0 0 auto;border-radius:10px;font-size:18px;color:var(--grau)}
.eins-tagpille{flex:1 1 0;min-width:0;border:1px solid var(--linie);background:#0F1E2D;border-radius:10px;
  padding:6px 0 5px;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:1px;min-height:48px;position:relative;color:var(--tinte-2)}
.eins-tagpille .eins-wt{font-size:12px;font-weight:700;color:inherit}
.eins-tagpille .eins-dat{font-size:11px;color:var(--grau)}
.eins-tagpille.an{background:var(--nacht);border-color:var(--marke);color:#fff}
.eins-tagpille.an .eins-dat{color:var(--nacht-schrift)}
.eins-tagpille.heute:not(.an){border-color:var(--marke);color:var(--marke-tief)}
.eins-tagpille b{position:absolute;top:-6px;right:-3px;min-width:17px;height:17px;border-radius:999px;
  background:var(--marke);color:var(--auf-farbe);font-size:10px;font-weight:800;display:inline-flex;align-items:center;
  justify-content:center;padding:0 4px;box-shadow:0 0 0 2px var(--flaeche)}
.eins-tagpille b.knapp{background:var(--rot)}
.eins-tagkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px 10px;
  border-bottom:1px solid var(--linie-satt);font-size:13px}
.eins-tagkopf-l{display:flex;flex-direction:column;gap:1px;min-width:0}
.eins-tagkopf-l span{font-size:12px;color:var(--grau)}
.eins-tagkopf-l span.eins-knapp-text{color:var(--rot);font-weight:700}
.eins-tagkopf-r{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--grau);
  text-transform:uppercase;letter-spacing:.04em;flex:0 0 auto}
.eins-tagkopf-r .eins-zeitfeld{width:66px;max-width:66px;min-height:36px;font-size:13px}
.eins-tliste{padding:0}
.eins-tgruppe{background:var(--flaeche-2);margin:0 -12px;padding:6px 12px;font-size:12px;font-weight:600;
  color:var(--tinte-2);letter-spacing:.02em;border-bottom:1px solid var(--linie)}
.eins-trow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--linie);min-height:56px}
.eins-trow:last-child{border-bottom:0}
.eins-tname{flex:1 1 auto;min-width:0}
.eins-tname .eins-klar{white-space:normal}
.eins-tzelle{flex:0 0 auto;min-width:108px;min-height:44px;border:1px solid var(--linie);border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 8px;
  background:var(--flaeche);cursor:pointer;line-height:1.4}
.eins-tzelle.eins-leerzelle::after{content:"+";color:var(--grau);font-weight:700;font-size:18px;line-height:1}
.eins-tzelle .eins-kz{width:34px;height:34px;font-size:15px}
.eins-tzelle .eins-kztext{max-width:150px;margin-top:2px}
.eins-tzelle .eins-bw{margin-top:0}
.eins-tzelle:active{background:var(--marke-hell)}

/* --- Stunden: Aufklapper, Buchen am Ende, Monatswahl im Kartenkopf --- */
.eins-auf{margin:0 15px 8px}
.eins-auf>summary{list-style:none;cursor:pointer;font-size:13px;font-weight:650;color:var(--marke-tief);
  display:inline-flex;align-items:center;gap:7px;padding:5px 0;min-height:34px}
.eins-auf>summary::-webkit-details-marker{display:none}
.eins-auf>summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin:0 3px 2px 2px}
.eins-auf[open]>summary::before{transform:rotate(45deg);margin-bottom:5px}
.eins-auf>summary{flex-wrap:wrap;gap:4px 7px}
.eins-auf-zusatz{font-style:italic;font-weight:600;font-size:12.5px;color:var(--grau);white-space:nowrap}
.eins-auf .eins-meld{padding:8px 0 4px}
.eins-meld-fuss{display:flex;justify-content:flex-end;padding:0 15px 14px}
.eins-vorschau:empty{display:none}
.eins-meld textarea.feld{flex:1 1 260px}

/* --- Stempeluhr: Statuszeile + eine Liste je Kraft --- */
.uhr-karte{padding-bottom:2px}
.uhr-stand{display:flex;align-items:center;gap:12px;padding:14px 17px 12px;border-bottom:1px solid var(--linie)}
.uhr-stand-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.uhr-stand-text strong{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--tinte)}
.uhr-stand-text span{font-size:13px;color:var(--grau);line-height:1.5}
.uhr-auff{color:var(--amber);font-weight:700}
.uhr-liste{padding:0 17px}
.uhr-zeile{display:grid;grid-template-columns:minmax(150px,1.1fr) auto minmax(0,2fr) auto;gap:6px 12px;
  align-items:center;padding:9px 0;border-bottom:1px solid var(--linie);font-size:13px}
.uhr-zeile:last-child{border-bottom:0}
.uhr-name{font-weight:650;color:var(--tinte);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uhr-still .uhr-name{color:var(--grau);font-weight:600}
.uhr-status{justify-self:start}
.uhr-detail{color:var(--grau);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uhr-marken{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.uhr-fuss{margin:10px 17px 0;padding:9px 12px;font-size:12.5px;line-height:1.55;color:var(--tinte-2);
  background:var(--flaeche-2);border:1px solid var(--linie);border-radius:9px}
.uhr-fuss code{font-size:12px;background:#0F1E2D;border:1px solid var(--linie);border-radius:5px;padding:1px 5px}
.uhr-legende{margin:10px 17px 14px}

/* --- Abrechnung: Wahl in der Leiste --- */
.eins-abkunde{width:auto;max-width:300px;margin:0;padding:7px 10px;font-size:13.5px}
.eins-abmonat{width:auto;margin:0;padding:7px 10px;font-size:13.5px}
.eins-rechnung th.ab-name{width:30%}
.eins-rechnung th:not(.ab-name){width:auto}
.eins-rechnung td.ab-name .eins-klar{max-width:none}

/* ======================================================= Mittlere Breite */
@media (max-width:1180px){
  .eins-rechnung td.ab-name .eins-klar{max-width:180px}
}

/* ================================================================ Handy */
@media (max-width:900px){
  .eins-recht .btn{flex:0 0 auto;min-width:0;padding:9px 12px}
  .leiste .eins-wochen{display:none}   /* die Pfeile stehen bei den Tagespillen */
  .eins-wkw{padding:0 10px}
  .eins-tagwahl{width:100%;justify-content:flex-start}
  .eins-tagwahl .feld{flex:1 1 auto}

  /* Zellenmenü als Blatt von unten, Ziele 46 px hoch */
  .eins-popup-deckel{background:rgba(11,31,51,.38)}
  .eins-popup{left:0 !important;right:0;top:auto !important;bottom:0;max-width:none;min-width:0;
    border-radius:16px 16px 0 0;padding:8px 10px calc(10px + env(safe-area-inset-bottom));
    max-height:80vh;overflow:auto}
  .eins-popup-titel{font-size:13px;padding:9px 10px 7px}
  .eins-popup-e{min-height:46px;font-size:15px;padding:8px 10px}
  .eins-popup-e .eins-kz{width:30px;height:30px;font-size:14px}

  /* Meldung: Wer, Text, Aufklapper, Vorschau, Buchen — Platzhalter passt */
  .eins-meld select.feld,.eins-meld .feld,.eins-meld textarea.feld{flex:1 1 100%}
  .eins-meld-fuss .btn{width:100%}
  .eins-auf>summary{min-height:40px}

  /* Soll/Ist: Monatswahl unter den Titel */
  .eins-sollist .kopfzeile{flex-wrap:wrap}
  .eins-sollist .kopfzeile .eins-wochen{flex:1 1 100%;justify-content:flex-start}

  /* Stempeluhr: Name und Status in einer Zeile, Rest darunter */
  .uhr-stand{flex-wrap:wrap}
  .uhr-stand .btn{flex:0 0 auto;min-width:0}
  .uhr-liste{padding:0 15px}
  .uhr-zeile{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:10px 0}
  .uhr-name{grid-column:1;grid-row:1;white-space:normal}
  .uhr-status{grid-column:2;grid-row:1;justify-self:end}
  .uhr-detail{grid-column:1/-1;grid-row:2;white-space:normal;font-size:12.5px}
  .uhr-marken{grid-column:1/-1;grid-row:3;justify-content:flex-start}
  .uhr-detail:empty,.uhr-marken:empty{display:none}
  .uhr-fuss,.uhr-legende{margin-left:15px;margin-right:15px}

  /* Abrechnung: Wahl in voller Breite, Tabelle als Karten je Einheit */
  .eins-abkunde{max-width:none;flex:1 1 46%;width:auto;min-width:0}
  .eins-abmonat{max-width:none;flex:1 1 42%;width:auto;min-width:0}
  .eins-rechnung{min-width:0}
  .eins-rechnung thead{display:none}
  .eins-rechnung,.eins-rechnung tbody,.eins-rechnung tfoot{display:block;width:100%}
  .eins-rechnung tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;
    padding:11px 14px;border-bottom:1px solid var(--linie);width:100%}
  .eins-rechnung tbody tr:last-child{border-bottom:1px solid var(--linie-satt)}
  .eins-rechnung tfoot tr:last-child{border-bottom:0}
  .eins-rechnung td{display:block;padding:0;border:0;width:auto !important;text-align:left;background:transparent}
  .eins-rechnung td.ab-neben{display:none}
  .eins-rechnung td.ab-name{grid-column:1;grid-row:1;font-size:14px}
  .eins-rechnung td.ab-name .eins-klar{max-width:none;white-space:normal;display:block}
  .eins-rechnung td.ab-termine{grid-column:1;grid-row:2;font-size:12.5px;color:var(--grau);font-weight:600;text-align:left}
  .eins-rechnung td.ab-termine:empty{display:none}
  .eins-rechnung td.ab-summe{grid-column:2;grid-row:1/span 2;align-self:center;font-size:15px;
    font-weight:800;text-align:right;white-space:nowrap}
  .eins-rechnung tfoot tr{background:var(--flaeche-2)}
  .eins-rechnung tfoot td,.eins-rechnung .eins-summe td{border:0}
  .eins-rechnung tfoot td.ab-name{font-weight:700;color:var(--tinte-2)}
}

/* Objekte der Stempeluhr: Aufklapper unter der Liste */
.uhr-objekte{margin:12px 0 0;font-size:13px;color:var(--tinte-2)}
.uhr-objekte>summary{cursor:pointer;font-weight:650;color:var(--tinte-2);padding:6px 0}
.uhr-objekte-liste{display:flex;flex-wrap:wrap;gap:6px 14px;padding:6px 0 4px}
.uhr-objekt{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tinte-2)}
.uhr-objekt b{color:var(--tinte)}
.uhr-objekt small{color:var(--grau)}

/* Leere Tageszellen sind sonst eine einzige weisse Flaeche — eine feine
   Spaltenlinie zeigt, wohin der Klick geht. */
.eins-tafel td:not(.eins-namensp),.eins-tafel th:not(.eins-namensp){border-left:1px solid var(--linie)}

/* Leere Dienstzelle: ein Plus sagt "hier eintragen", statt eines leeren Rahmens */
.eins-kz.k-leer{position:relative;color:transparent}
.eins-kz.k-leer::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--grau-hell);font-weight:700;font-size:15px}
.eins-dienst:hover .eins-kz.k-leer::after{color:var(--marke)}

/* Dienstplan-Vorlage der Reinigungskette (Punkt 468): nur ein Vorschlag,
   deshalb blass und gestrichelt, bis Haydar sie übernimmt. td-Gewicht nötig,
   sonst schlägt .eins-tafel td die Klasse (docs/einsatz.md). */
.eins-tafel td.eins-vorlage,.eins-tzelle.eins-vorlage{outline:1.5px dashed var(--linie-satt);outline-offset:-4px}
.eins-tafel td.eins-vorlage .eins-kz,.eins-tzelle.eins-vorlage .eins-kz,
.eins-tafel td.eins-vorlage .eins-kztext,.eins-tzelle.eins-vorlage .eins-kztext{opacity:.55}

/* Monatsblatt Stunden (Punkt 472): jeder Tag mit Stunden oder Kürzel. */
.std-tag .std-kz{width:auto;min-width:150px;padding:4px 8px;font-size:13px;height:auto}
.std-tag .std-plus{margin-left:auto;padding:4px 10px;font-size:12px;min-width:0;white-space:nowrap}
.eins-tag-zeile.std-leer{background:var(--rot-weich);box-shadow:inset 3px 0 0 var(--rot)}
.eins-tag-zeile.std-leer .std-kz{border-color:var(--rot-linie);color:var(--rot)}
.eins-tag-zeile.std-zukunft{opacity:.6}

/* Auswahl im Monatsblatt (07.10.2026): Haken je Zeile, Leiste mit Löschen,
   Nachtragen und Kürzel für alle gewählten Tage, Rückgängig, Papierkorb. */
.std-kopf-re{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.std-haken{width:18px;height:18px;flex:0 0 auto;margin:0;accent-color:var(--marke);cursor:pointer}
.eins-tag-zeile.std-gewaehlt{background:var(--marke-weich);box-shadow:inset 3px 0 0 var(--marke)}
/* Klebt unter dem Seitenkopf wie die Tabellenköpfe. Die Karte schneidet mit clip
   statt hidden, sonst wäre sie selbst der Rollbereich und nichts klebt. */
.karte.eins-sollist{overflow:clip}
.std-wahl-leiste{position:sticky;top:var(--kopf-hoch);z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 10px;padding:10px 12px;background:#0F1E2D;border:1px solid var(--linie-satt);
  border-radius:var(--radius);box-shadow:var(--schatten-karte)}
.std-wahl-zahl{font-weight:600;color:var(--tinte);margin-right:auto}
.std-wahl-nach{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.std-wahl-nach .feld{width:78px;padding:5px 8px;font-size:13px;height:auto}
.std-wahl-nach .std-kz{width:auto;min-width:130px}
.std-rueck{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 12px;font-size:14px;color:var(--tinte);
  border-radius:var(--radius);background:var(--amber-weich);border:1px solid var(--amber-linie)}
.std-papierkorb{margin:12px 0 4px;font-size:13px;color:var(--tinte-2)}
.std-papierkorb summary{cursor:pointer;padding:6px 0;font-weight:600}
.std-vorschlag{font-size:12px;color:var(--tinte-2);margin:6px 0 0}
@media (max-width:900px){
  .std-wahl-nach .feld{width:68px}
  .std-wahl-leiste{gap:6px;padding:8px}
  .std-wahl-leiste .btn{width:auto;flex:0 0 auto;min-height:0;padding:6px 10px}
  .std-wahl-zahl{flex:1 1 100%}
}

/* Kalender (Punkt 484, 07.10.2026): Monat, Jahr, Quellenleiste, Terminzeile.
   Kundenfarben: dunkle Töne mit weißer Schrift, alle über 4.5:1. */
.ek-f0{background:#1d3557;color:#fff}.ek-f1{background:#0f6e8c;color:#fff}.ek-f2{background:#6b3fa0;color:#fff}
.ek-f3{background:#8a5a00;color:#fff}.ek-f4{background:#2f6b2f;color:#fff}.ek-f5{background:#55606e;color:#fff}
.ek-quellen{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 12px}
.ek-quelle{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--linie);
  border-radius:999px;background:#0F1E2D;font-size:13px;color:var(--tinte-2)}
.ek-quelle b{color:var(--tinte)}
.ek-punkt{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ek-laedt{padding:24px;color:var(--tinte-2)}
.ek-monat{padding:14px}
.ek-summe{margin:0 0 10px;color:var(--tinte-2)}
.ek-summe b{color:var(--tinte)}
.ek-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ek-wt{text-align:center;font-size:12px;font-weight:600;color:var(--tinte-2);text-transform:uppercase;padding:4px 0}
.ek-tag{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:96px;padding:7px;text-align:left;
  background:#0F1E2D;border:1px solid var(--linie);border-radius:var(--radius-klein);cursor:pointer;font:inherit;color:var(--tinte)}
.ek-tag:hover{border-color:var(--linie-satt);box-shadow:var(--schatten-karte)}
.ek-tag.ek-leer{background:var(--flaeche)}
.ek-tag.ek-aussen{visibility:hidden}
.ek-tag.ek-heute{border:2px solid var(--marke)}
.ek-kopf{display:flex;justify-content:space-between;width:100%;font-size:14px}
.ek-zahl{font-weight:700}
.ek-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:600;
  padding:1px 6px;border-radius:4px}
.ek-tz{font-size:12px;font-weight:600;color:var(--marke-tief)}
.ek-fuss{font-size:12px;color:var(--tinte-2);margin-top:auto}
.ek-ok{color:var(--gruen)}
.ek-termine td{vertical-align:top}
.ek-termin{display:block;width:100%;margin:0 0 3px;padding:2px 5px;text-align:left;font:inherit;font-size:12px;line-height:1.3;
  color:var(--tinte);background:var(--marke-weich);border:0;border-radius:4px;cursor:pointer;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ek-jahr{padding:14px}
.ek-jgitter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ek-jmonat{min-width:0}
.ek-jtitel{display:flex;justify-content:space-between;width:100%;padding:0 0 6px;border:0;background:none;
  font:inherit;font-weight:700;color:var(--tinte);cursor:pointer}
.ek-jtitel span{color:var(--tinte-2);font-weight:600}
.ek-mraster{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ek-mwt{font-size:10px;text-align:center;color:var(--tinte-2)}
.ek-mini{position:relative;height:22px;font:inherit;font-size:10.5px;border:0;border-radius:3px;padding:0;cursor:pointer;
  color:var(--tinte);background:var(--flaeche)}
.ek-mini.ek-aussen{visibility:hidden}
.ek-mini.ek-s1{background:rgba(141,185,226,0.2)}.ek-mini.ek-s2{background:#8fb3d9}
.ek-mini.ek-s3{background:#1d3557;color:#fff}
.ek-mini.ek-heute{outline:2px solid var(--marke);outline-offset:-1px}
.ek-mini.ek-mit-termin::after{content:"";position:absolute;right:2px;top:2px;width:4px;height:4px;border-radius:50%;background:var(--rot)}
.ek-tagtermine{margin-bottom:12px}
@media (max-width:1180px){ .ek-jgitter{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  .ek-raster{gap:3px}
  .ek-tag{min-height:64px;padding:4px}
  .ek-chip{font-size:10px;padding:0 3px}
  .ek-fuss,.ek-tz{font-size:10.5px}
  .ek-jgitter{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ============================================================================
   Geld: Rechnungen, Angebote, Mahnlauf, Kontoauszug, Versand-Dialoge.
   Fassung vom 12.09.2026 — überschreibt die Regeln aus 03-module.css, wo
   nötig. Handy-Regeln stehen unten in derselben Datei.
   ========================================================================== */

/* --- Kacheln: Kennzahl und Zahlfilter in einem. Die gewählte Kachel steht
       auf Nacht wie eine gewählte Pill — es soll auf einen Blick klar sein,
       dass die Liste darunter gefiltert ist. --- */
.zuebersicht{display:flex;gap:10px;flex-wrap:nowrap;margin:0 0 14px}
.zk{flex:1 1 0;min-width:0;border:1px solid var(--linie);border-radius:var(--radius);
  padding:12px 15px;background:#0F1E2D;color:var(--tinte);cursor:pointer;text-align:left;
  font-family:inherit;box-shadow:var(--schatten);position:relative;
  transition:border-color .14s,box-shadow .14s,background .14s}
.zk:hover{border-color:var(--linie-satt);box-shadow:var(--schatten-hoch)}
.zk:active{transform:translateY(1px)}
.zk .zk-l{display:block;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.06em;color:var(--grau)}
.zk .zk-n{display:block;font-size:22px;font-weight:800;margin-top:3px;letter-spacing:-.02em;color:var(--tinte);line-height:1.15}
.zk .zk-s{display:block;font-size:12px;margin-top:1px;color:var(--grau);font-weight:600}
.zk .zk-netto{font-weight:500}
.zk-ueberfaellig .zk-n{color:var(--rot)}
.zk.an{background:var(--nacht);border-color:var(--marke);color:#fff;box-shadow:var(--schatten-hoch)}
.zk.an .zk-l{color:var(--nacht-schrift)}
.zk.an .zk-n{color:#fff}
.zk.an .zk-s{color:var(--nacht-schrift)}
.zk.an.zk-ueberfaellig .zk-n{color:#FFB4BE}
.zk.an::after{content:"";position:absolute;right:12px;top:12px;width:9px;height:9px;border-radius:50%;
  background:var(--marke);box-shadow:0 0 0 3px rgba(255,255,255,.18)}

/* --- Leiste rechts: der Kontoauszug-Knopf zeigt, ob der Bereich offen ist --- */
.geld-leiste{display:contents}
.bank-knopf.an{background:var(--marke-hell);border-color:var(--marke);color:var(--marke-tief)}
.bank-knopf svg{width:15px;height:15px}

/* --- Leerer Zustand mit Rückweg --- */
.leer-tat{margin-top:14px}

/* --- Tabelle: Marken --- */
table.liste td.marken .merk{margin-left:3px}
table.liste td.marken .marke{margin-right:5px}
table.liste td.marken .marke:last-child{margin-right:0}
table.liste td.marken .marke.z-bezahlt,table.liste td.marken .marke.z-offen,table.liste td.marken .marke.z-ueberfaellig{margin-left:0}

/* --- Aufgeklappte Zeile: Hauptknopf, PDF, „…" in EINER Reihe --- */
table.liste tbody tr.detail{cursor:default}
table.liste tbody tr.detail:hover{background:transparent}
.detail-in .aktionen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 12px}
.detail-in .aktionen .pdf{margin:0}
.detail-in .aktionen details.menue{margin-left:auto}
.detail-in .art-wahl{margin-top:8px;padding:0}
.detail-in .hinweis a{color:var(--marke-tief);font-weight:650}

/* --- Mahnlauf: eine Zeile über der Tabelle --- */
.mahnlauf{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:0 0 12px;
  padding:9px 14px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  font-size:12.5px;color:var(--grau);line-height:1.5;box-shadow:var(--schatten)}
.mahnlauf-t{display:inline-flex;align-items:center;gap:6px;font-weight:750;color:var(--tinte);font-size:13px}
.mahnlauf-t svg{width:15px;height:15px;color:var(--marke)}
.mahnlauf-z b{color:var(--tinte);font-weight:750}
.mahnlauf-stufen{display:inline-flex;gap:5px;flex-wrap:wrap}
.mahnlauf-schief{color:var(--rot)}
.mahnlauf-r{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.mahnlauf-warn{color:var(--rot);background:var(--rot-bg);border-color:var(--rot-linie)}
.mahnlauf-warn svg{width:16px;height:16px}

/* --- Mahnentwurf: Text der naechsten faelligen Stufe, in der Rechnungszeile --- */
.mahn-entwurf{margin-top:8px}
.mahn-entwurf summary{cursor:pointer;font-weight:650;color:var(--marke-tief)}
.mahn-entwurf pre{white-space:pre-wrap;font-family:inherit;margin:8px 0 0;padding:10px 12px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  font-size:12.5px;line-height:1.5;color:var(--tinte)}

/* --- Kontoauszug --- */
.bank-karte{padding:14px 16px 6px;margin-bottom:14px}
.bank-stand{font-size:12.5px;color:var(--grau);margin:0 0 8px;line-height:1.5}
.bank-filter{margin:0 0 6px}
.bank-aktionen{padding:8px 0 0 86px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bank-aktionen details.menue>summary.btn.klein{padding:6px 9px}

/* Zuordnen-Fenster: Liste der offenen Rechnungen mit Suche */
.bank-wahl-liste{margin-top:10px;max-height:52vh;overflow:auto;border:1px solid var(--linie);border-radius:11px;background:#0F1E2D}
.bank-wahl-z{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;width:100%;
  border:0;border-bottom:1px solid var(--linie);background:none;font:inherit;color:var(--tinte);
  padding:10px 12px;text-align:left;cursor:pointer;min-height:44px}
.bank-wahl-z:last-child{border-bottom:0}
.bank-wahl-z:hover{background:var(--marke-hell)}
.bank-wahl-z .bw-nr{color:var(--grau);font-weight:650;font-size:13px;font-variant-numeric:tabular-nums}
.bank-wahl-z .bw-wer{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bank-wahl-z .bw-num{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.bank-wahl-z .marke{margin:0}
.bank-wahl-liste .leer{padding:22px 14px}

/* --- Versand-Dialog: Kanalwahl oben, darunter der Teil zum Kanal --- */
dialog.versand{width:min(94vw,640px)}
.versand-wer{margin:0 0 12px}
.kanal{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:6px;margin:0 0 14px}
.kanal-k{border:1px solid var(--linie);border-radius:10px;background:#0F1E2D;padding:9px 34px 9px 11px;text-align:left;
  min-width:0;cursor:pointer;font:inherit;color:var(--tinte-2);display:flex;flex-direction:column;gap:1px;min-height:46px;
  font-size:13px;font-weight:650;position:relative;line-height:1.35}
.kanal-t{display:block}
.kanal-k svg{width:15px;height:15px;position:absolute;right:10px;top:10px;color:var(--grau-hell)}
.kanal-k small{font-size:11.5px;font-weight:500;color:var(--grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kanal-k:hover{border-color:var(--linie-satt);background:var(--flaeche-2)}
.kanal-k.an{border-color:var(--marke);background:var(--marke-hell);color:var(--marke-tief);box-shadow:0 0 0 1px var(--marke)}
.kanal-k.an svg{color:var(--marke)}
.kanal-k.an small{color:var(--tinte-2)}
.kanal-k[disabled]{background:var(--flaeche-2);border-style:dashed;color:var(--grau);cursor:not-allowed}
.kanal-k[disabled]:hover{border-color:var(--linie)}
.versand .versand-teil .hinweis{padding:0 0 12px;margin:0}
.versand .versand-teil .warn{margin:12px 0 0}
.versand .versand-teil .pdf{margin:0}
.versand .versand-teil .mail{margin-bottom:0}
.versand .versand-teil .mail + .hinweis{padding-top:12px}
.versand .versand-teil p{margin:0 0 10px}
.versand .versand-teil label.mk{display:block;flex:none;margin:0 0 6px}
.versand .versand-teil .feld{margin:0 0 10px}
.anhang-block{margin-top:12px}
.anhang-block .mk{display:block;flex:none;margin:0 0 6px}
.vorbereitet-zeile{display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:6px}
.vorbereitet-zeile input{flex:0 0 auto;width:18px;height:18px}
.vb-text{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.vb-text a{color:var(--marke-tief);font-weight:600}
.vb-text small{color:var(--grau);font-size:12px}
.vb-hinweis{color:var(--grau);font-size:12px;margin:2px 0 4px}

/* ============================================================== Handy */
@media (max-width:900px){
  /* Drei tippbare Zahlen in einer Zeile statt drei hoher Karten. Die Liste
     soll oberhalb von 35 % der Bildschirmhöhe anfangen. */
  .zuebersicht{gap:6px;margin:0 0 8px}
  .zk{padding:6px 8px 5px;border-radius:10px}
  .zk .zk-l{font-size:9.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .zk .zk-n{font-size:17px;margin-top:0;line-height:1.15}
  /* Netto UND Brutto bleiben auch hier stehen (Haydar, 11.09.) — klein, zwei Zeilen */
  .zk .zk-s{font-size:10px;line-height:1.3;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .zk.an::after{right:7px;top:7px;width:7px;height:7px}

  /* Pills und Kontoauszug-Knopf in EINER Zeile: die Pills schieben sich,
     statt dass der Knopf in eine zweite Zeile rutscht. */
  .geld-leiste .leiste{margin-bottom:8px;flex-wrap:nowrap;gap:6px}
  .geld-leiste .leiste-l{flex:1 1 0%;min-width:0}
  .geld-leiste .leiste-r{flex:0 0 auto}
  .bank-knopf{padding:7px 10px;font-size:12.5px;min-width:0;flex:0 0 auto}
  .leiste-r .btn{min-width:0;flex:0 0 auto;padding:7px 10px}
  .leiste-r details.menue>summary.btn{padding:7px 9px}

  table.liste td.marken .marke{margin-right:0}

  /* Hauptknopf und „…" in einer Reihe, das PDF darunter über die Breite */
  .detail-in .aktionen .btn{width:auto;flex:1 1 auto;min-width:0}
  .detail-in .aktionen .pdf{order:3;flex:1 1 100%}
  .detail-in .aktionen details.menue{margin-left:0;flex:0 0 auto}
  .detail-in .aktionen details.menue>summary.btn{width:46px;min-width:0;flex:0 0 auto;padding:11px 0}
  .detail-in .art-wahl .btn{width:auto}

  .mahnlauf{padding:9px 12px;gap:6px 10px;font-size:12px}
  .mahnlauf-stufen{display:none}   /* die Stufen stehen hinter dem i-Knopf */
  .mahnlauf-r{margin-left:0;width:100%}
  .mahnlauf-r .btn{flex:1 1 auto}

  .bank-karte{padding:12px 12px 6px}
  .bank-zweck,.bank-grund,.bank-aktionen{margin-left:0;padding-left:0}
  .bank-aktionen .btn{flex:1 1 auto;min-width:0}
  .bank-aktionen details.menue>summary.btn{width:44px;min-width:0;flex:0 0 auto}

  .kanal{grid-template-columns:1fr 1fr;gap:5px}
  .kanal-k{padding:8px 30px 8px 10px;min-height:44px;font-size:12.5px}
  .kanal-k small{font-size:11px}
  .bank-wahl-z{grid-template-columns:auto minmax(0,1fr) auto;padding:10px 10px}
  .bank-wahl-z .marke{display:none}
}

/* Fragen vor Freigabe (Punkt 444): Liste der Rechnungsprüfung im Rechnungsdetail */
.marke.m-fragen{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-linie);margin-left:5px}
/* Reinigungsrechnung ohne Reinigungsliste (Werkstatt-Auftrag 559, 0.3): gesperrt */
.marke.m-liste{background:var(--rot-bg);color:var(--rot);border-color:var(--rot-linie);margin-left:5px}
.fragen{margin:0 17px 12px;padding:10px 12px;border:1px solid var(--amber-linie);border-radius:10px;background:var(--amber-weich)}
.fragen-titel{font-weight:700;color:var(--tinte);margin-bottom:6px}
.fragen ol{margin:0;padding-left:20px}
.fragen .frage{margin:0 0 10px;color:var(--tinte)}
.frage-kopf{display:flex;gap:6px;margin-bottom:2px}
.frage-art{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--amber)}
.frage-art.leise{color:var(--grau)}
.frage-text{font-size:13px;line-height:1.45}
.frage-quelle{font-size:12px;color:var(--grau);margin-top:2px;word-break:break-word}
.frage-tun{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.frage-tun .feld{flex:1 1 220px;min-width:160px}
.fragen-geklaert{margin-top:6px;font-size:12.5px;color:var(--tinte-2)}
.fragen-geklaert summary{cursor:pointer;color:var(--grau)}
.fragen-geklaert ul{margin:6px 0 0;padding-left:18px}
.fragen-geklaert li{margin-bottom:6px}

/* Einheitlicher Stand mit bis zu drei Warnungen (Punkt 522): die Zelle darf
   umbrechen, sonst läuft die Tabelle am Schreibtisch seitlich hinaus. */
@media (min-width:761px){
  table.liste td.marken{white-space:normal;min-width:150px;max-width:270px}
  table.liste td.marken .marke{margin-bottom:3px}
}

/* Ausführung, Versand, Zahlung (Punkt 574/575) */
.rech-kette{line-height:1.7}
.rech-kette-l{margin:4px 0 0 18px;padding:0;font-size:13.5px}

/* Entwürfe ohne Nr. (Werkstatt-Auftrag 559, 3.4): Grund darf umbrechen */
table.liste.entwuerfe-ohne-nr td{vertical-align:top}
table.liste.entwuerfe-ohne-nr td:nth-child(3){max-width:440px;white-space:normal}
table.liste.entwuerfe-ohne-nr td.wer .leise{font-weight:400;color:var(--grau)}
/* Kartons: der Schrank in den Belegen, der Karton in den Akten und das
   Serviceprofil. Die Listen benutzen die Bausteine der Startseite
   (dash-abschnitt, dash-zeile) — hier steht nur, was dazukommt. */

/* ------------------------------------------------------------- Die Bilanz
   Die eine Zeile, die sagt: nichts liegt mehr herum. */
.karton-bilanz{padding:var(--l4) var(--l4) var(--l3)}
.kb-zahl{display:flex;align-items:baseline;gap:9px}
.kb-zahl b{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.kb-zahl span{font-size:13.5px;color:var(--grau)}
.kb-teile{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;
  font-size:12.5px;color:var(--grau)}
.kb-teile b{color:var(--tinte);font-weight:750;font-variant-numeric:tabular-nums}
.kb-teile .kb-warn b{color:var(--rot)}
.kb-klaeren{margin-top:10px;font-size:12.5px;color:var(--amber);font-weight:600}

/* ------------------------------------------------------ Zeile im Karton
   Datum, Titel, Herkunft. Drei Spalten, damit die Augen an einer Kante
   entlanglaufen können — in der Akte stehen bis zu vierzig davon. */
.kt-zeile{display:flex;align-items:baseline;gap:10px;padding:7px 2px;
  border-bottom:1px solid var(--linie);cursor:pointer}
.kt-zeile:last-child{border-bottom:0}
.kt-zeile:hover{background:var(--flaeche-2)}
.kt-datum{flex:0 0 auto;font-size:11.5px;color:var(--grau);
  font-variant-numeric:tabular-nums;min-width:74px}
.kt-titel{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kt-von,.kt-stufe{flex:0 0 auto;font-size:11.5px;color:var(--grau);
  max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --------------------------------------------------------- Serviceprofil
   Freitext, wie er eingegeben wurde: Zeilenumbrüche sind Absicht, wenn
   jemand eine Liste schreibt. */
.kd-service{white-space:pre-wrap;font-size:13.5px;line-height:1.5}
.kd-service-karte .obj-block-titel span{font-weight:750}
.kd-eingabe-lang textarea{width:100%;min-height:150px;resize:vertical;
  font:inherit;font-size:14px;line-height:1.5;padding:9px 11px;
  border:1px solid var(--linie);border-radius:10px;background:#0F1E2D;color:var(--tinte)}
.kd-eingabe-lang textarea:focus{outline:none;border-color:var(--marke)}

@media (max-width:900px){
  .kt-zeile{flex-wrap:wrap;gap:3px 9px}
  .kt-titel{flex:1 0 100%;order:1;white-space:normal}
  .kt-datum{order:2}
  .kt-von,.kt-stufe{order:3;max-width:70%}
}

/* ================================================================ Der Schrank
   Kartons sehen wie Kartons aus. Das ist kein Schmuck: der Schrank ist die
   einzige Ansicht, in der es um Ablage geht, und er soll auf den ersten Blick
   von jeder Liste im Haus zu unterscheiden sein. */
.karton-raster{display:grid;gap:12px;margin:0 0 4px;
  grid-template-columns:repeat(auto-fill,minmax(min(236px,100%),1fr))}
.karton{position:relative;display:flex;flex-direction:column;text-align:left;
  padding:0 0 12px;border:1px solid var(--karton-kante);border-radius:11px;
  background:var(--karton);color:var(--tinte);font:inherit;cursor:pointer;
  overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.175);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.karton:hover{transform:translateY(-2px);border-color:var(--karton-tief);
  box-shadow:0 8px 18px rgba(211,191,157,0.18)}
.karton:active{transform:translateY(0)}

/* Der Deckel: zwei Klappen mit einer Naht in der Mitte, darüber das Klebeband. */
.ka-deckel{position:relative;display:block;height:28px;background:var(--karton-band);
  border-bottom:1px solid var(--karton-kante)}
.ka-deckel::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--karton-kante)}
.ka-deckel i{position:absolute;left:50%;top:7px;width:70px;height:15px;margin-left:-35px;
  background:rgba(255,255,255,.62);border:1px solid rgba(226,194,141,0.4);
  border-radius:2px}

/* Das Etikett klebt halb über der Deckelkante. Die Farbe links sagt die Stufe. */
.ka-etikett{display:block;margin:-9px 13px 0;padding:9px 11px 10px;
  background:#0F1E2D;border:1px solid var(--linie);border-left:3px solid var(--marke);
  border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.25)}
.karton-objekt .ka-etikett{border-left-color:var(--tuerkis)}
.karton-einheit .ka-etikett{border-left-color:var(--lila)}
.karton-kategorie .ka-etikett{border-left-color:var(--grau)}
.karton-vorgang .ka-etikett{border-left-color:var(--amber)}
.ka-stufe{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grau)}
.ka-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:14px;font-weight:750;line-height:1.3;margin-top:3px}

/* Fuß: Stückzahl und wie voll der Karton neben dem größten steht. */
.ka-fuss{display:flex;align-items:center;gap:7px;padding:11px 15px 0}
.ka-zahl{font-size:20px;font-weight:800;line-height:1;color:var(--karton-tief);
  font-variant-numeric:tabular-nums}
.ka-wort{font-size:11.5px;color:var(--karton-tief);opacity:.85}
.ka-balken{flex:1 1 auto;height:5px;border-radius:999px;overflow:hidden;
  background:rgba(126,101,57,.16)}
.ka-balken i{display:block;height:100%;border-radius:999px;background:var(--karton-tief)}

/* Das Regal oben: dieselbe Kante wie die Kartons, damit die Bilanz dazugehört. */
.karton-regal{border-top:3px solid var(--karton-kante)}

@media (max-width:900px){
  .karton-raster{gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr))}
  .ka-deckel{height:24px}
  .ka-deckel i{width:56px;height:13px;margin-left:-28px;top:6px}
  .ka-etikett{margin:-8px 10px 0;padding:8px 9px 9px}
  .ka-name{font-size:13.5px}
  .ka-fuss{padding:9px 12px 0}
}
/* ==========================================================================
   Klären (Punkt 575). Die Leiste „Ich bin“ aus Phase 1 ist seit Phase 2 weg.
   Knöpfe mindestens 44 px hoch (Touch), sichtbarer Fokus, Zustände Laden und
   Gesperrt mit Grund; Texte in Grundfarben mit mindestens 4,5:1.
   ========================================================================== */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kl-lagezeile{font-size:14px;color:var(--tinte-2);margin:0 0 12px}
.kl-karte{background:var(--flaeche);border:1px solid var(--linie);border-left:5px solid var(--marke);
  border-radius:14px;padding:18px 18px 14px;box-shadow:0 1px 2px rgba(0,0,0,0.15);margin-bottom:12px}
.kl-karte.kl-pruef{border-left-color:var(--lila)}
.kl-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--grau)}
.kl-zaehler{margin-left:auto;font-weight:600;color:var(--tinte-2)}
.kl-thema{font-size:20px;line-height:1.3;margin:6px 0 10px;color:var(--tinte);font-weight:750;overflow-wrap:anywhere}
.kl-schritte{display:flex;flex-wrap:wrap;gap:4px;list-style:none;padding:0;margin:0 0 12px}
.kl-s{display:flex;align-items:center;gap:4px;font-size:12px;padding:4px 9px;border-radius:999px;
  background:var(--flaeche-2);color:var(--grau);border:1px solid var(--linie)}
.kl-s.fertig{background:var(--gruen-weich);color:var(--gruen);border-color:var(--gruen-linie)}
.kl-s.jetzt{background:var(--marke);color:var(--auf-farbe);border-color:var(--marke);font-weight:700}
.kl-s-zeichen svg{width:12px;height:12px}
.kl-lage{font-size:16px;line-height:1.5;color:var(--tinte);margin:0 0 10px}
.kl-empf{background:var(--marke-weich);border:1px solid var(--marke-hell);border-radius:10px;padding:10px 12px;
  font-size:15px;line-height:1.5;color:var(--tinte);margin-bottom:12px}
.kl-empf-wort{display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--marke-tief);margin-bottom:2px}
.kl-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.kl-btn{min-height:44px;font-size:15px;padding:10px 16px;display:inline-flex;align-items:center;gap:6px;
  max-width:100%;white-space:normal;text-align:left;line-height:1.3}
.kl-btn.laedt{position:relative;color:transparent !important}
.kl-btn.laedt::after{content:"Läuft …";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--tinte-2);font-size:14px}
.kl-feld textarea{width:100%;min-height:52px;font-size:15px;padding:10px;border:1px solid var(--linie-satt);
  border-radius:10px;font-family:inherit;box-sizing:border-box}
.kl-feld textarea:focus-visible{outline:3px solid var(--marke);outline-offset:1px}
.kl-fehler{color:var(--rot);font-size:14px;font-weight:600;min-height:0;margin:4px 0}
.kl-fehler:empty{display:none}
.kl-fertig{font-size:13.5px;color:var(--tinte-2);margin:8px 0;padding-top:8px;border-top:1px dashed var(--linie)}
.kl-mehr{margin-top:6px}
.kl-mehr summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:600;
  color:var(--marke-tief)}
.kl-frage{white-space:pre-wrap;font-size:14px;line-height:1.5;color:var(--tinte);max-height:320px;overflow:auto;
  background:var(--flaeche-2);border-radius:8px;padding:10px;margin:6px 0}
.kl-abschnitt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--grau);margin:10px 0 4px}
.kl-verlauf{list-style:none;padding:0;margin:0;font-size:13.5px}
.kl-verlauf li{display:flex;flex-wrap:wrap;gap:6px;padding:5px 0;border-bottom:1px solid var(--linie)}
.kl-v-zeit{color:var(--grau);font-variant-numeric:tabular-nums}
.kl-paar{list-style:none;padding:0;margin:0 0 10px;font-size:15px;line-height:1.5}
.kl-paar li{padding:6px 0;border-bottom:1px solid var(--linie)}
.kl-nav{display:flex;justify-content:space-between;gap:8px;margin:4px 0 24px}
.kl-ergebnis{background:var(--gruen-weich);border:1px solid var(--gruen-linie);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.kl-erg-kopf{font-weight:700;color:var(--gruen);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kl-erg-kopf svg{width:16px;height:16px}
.ak-zahl.ak-klaeren{border-color:var(--marke)}
.ak-zahl.ak-klaeren b{color:var(--marke-tief)}
@media (max-width:640px){
  .kl-karte{padding:14px 12px 10px;border-radius:12px}
  .kl-thema{font-size:18px}
  .kl-btn{flex:1 1 100%;justify-content:center;text-align:center}
}
.kl-raus{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
/* ============================================================================
   Objekte — Fassung 12.09.2026. Überschreibt Regeln aus 03-module.css für
   Leiste, Liste, Detail, Kalender und den Tagesdialog. Handy-Regeln stehen
   unten in derselben Datei.
   ========================================================================== */

/* --- Leiste: Umschalter und Kalenderkopf in EINER Zeile ---------------
   Die Selektoren tragen .leiste davor: 05-start.css (Bürokalender) setzt
   .leiste .kal-kopf und .leiste .kal-nav und lädt nach dieser Datei. */
.leiste .obj-kalnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.leiste .obj-kalnav .kal-kopf{margin:0;gap:6px;justify-content:flex-start;width:auto}
.leiste .obj-kalnav .kal-kopf .monat{flex:0 0 auto;min-width:150px;font-size:15px;padding:0 4px}
.leiste .obj-kalnav .kal-nav{width:32px;height:32px}
.leiste .obj-kalnav .kal-heute{padding:6px 11px;height:32px}

/* --- Gruppen: je Kundenkonto ein Block --------------------------------
   Die Ansicht ist seit 15.09.2026 nach Kunden geordnet, nicht nach Objekten:
   die Auftragsnummer traegt die Kundennummer (A-10131-02), und ein Kunde
   kann hundert Objekte haben. */
.obj-gruppen{display:flex;flex-direction:column;gap:24px}
.obj-gruppe{min-width:0}
/* In einer Gruppe steht der Kunde schon in der Überschrift — auf jeder Karte
   noch einmal derselbe Name wäre Rauschen. Im Detail bleibt die Zeile. */
.obj-gruppe[data-konto] .obj-karte .obj-kunde{display:none}
.obj-kontozeile{display:flex;gap:8px;align-items:center}
.obj-kontozeile .feld{flex:1 1 0;min-width:0}
.obj-kontozeile .btn{flex:0 0 auto}
.obj-gruppe-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 10px;
  padding:0 2px 8px;margin-bottom:12px;border-bottom:1px solid var(--linie)}
.obj-gruppe-nr{font-weight:800;font-size:12.5px;color:var(--tinte-2);background:var(--flaeche-2);
  border:1px solid var(--linie);border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}
.obj-gruppe-name{font-size:17px;font-weight:800;letter-spacing:-.01em}
.obj-gruppe-zahl{font-size:12.5px;color:var(--grau);font-weight:600}
.obj-gruppe-kopf .chip{margin-left:auto}
.obj-gruppe-hinweis{font-size:12.5px;color:var(--grau);line-height:1.5;margin:-4px 0 12px;max-width:70ch}

/* --- Liste: Karten im Raster, ganze Karte klickbar --------------------- */
.obj-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:12px;align-items:start}
.obj-karte{margin:0;display:flex;flex-direction:column;min-height:112px;overflow:visible}
/* overflow:hidden der Karte würde das aufgeklappte „…" abschneiden */
.obj-detail-kopf,.obj-block{overflow:visible}
.obj-karte .kopfzeile summary.btn,.obj-detail-kopf .kopfzeile summary.btn{flex:0 0 auto;min-width:0;width:36px;height:36px;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
.obj-karte .kopfzeile{padding:14px 15px 8px;align-items:flex-start}
.obj-kopf{min-width:0;flex:1 1 auto}
.obj-kopf .kunde{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obj-kunde{font-size:13px;color:var(--grau);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Anschrift und Maße stehen auch in der Kundengruppe, nur der Kundenname
   darüber ist dort doppelt. */
.obj-adresse{font-size:13px;color:var(--tinte-2);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.obj-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:0 15px 13px;margin-top:auto;font-size:12.5px}
.obj-kenn{color:var(--grau);font-weight:600}
/* Leistungen am Hotel (Haydar 08.10.2026): Abreise- und Bleiberreinigung
   mit Preis, darunter die Zimmer. */
.obj-leistungen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:0 15px 10px;font-size:12.5px}
.obj-leistung{padding:3px 9px;border-radius:999px;background:var(--flaeche-2);color:var(--tinte);font-weight:600}
.obj-leistung b{font-weight:800}
.obj-leistung-zeile{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--linie);font-size:14px}
.obj-block-titel+.obj-leistung-zeile{border-top:0}
.obj-leistung-wort{font-weight:700}
.obj-leistung-zeile b{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.obj-zimmer{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 4px;border-top:1px solid var(--linie)}
.obj-naechste{color:var(--tinte-2);font-weight:600}
.obj-fuss .marke{margin:0}

/* --- Fahrzeug ----------------------------------------------------------- */
.fz-stamm{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);margin-bottom:14px}
.fz-feld{background:var(--flaeche);padding:8px 11px;display:flex;flex-direction:column;gap:1px;min-width:0}
.fz-feld span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.fz-feld b{font-size:14px;overflow:hidden;text-overflow:ellipsis}
.fz-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.fz-liste{display:flex;flex-direction:column}
.fz-zeile{display:flex;flex-direction:column;gap:7px;padding:11px 0;border-bottom:1px solid var(--linie)}
.fz-zeile:last-child{border-bottom:none}
/* Überfälliges brennt: ein roter Balken links, damit es beim Durchscrollen
   auffällt und nicht in der Liste untergeht. */
.fz-zeile.brennt{border-left:3px solid var(--rot);padding-left:11px;
  background:linear-gradient(90deg,var(--rot-bg,transparent),transparent 60%)}
.fz-zeile-kopf{display:flex;flex-direction:column;gap:2px;min-width:0}
.fz-titel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px}
.fz-stand{font-size:13px;color:var(--tinte-2)}
.fz-notiz{font-size:12.5px;color:var(--grau)}
.fz-zeile-tat{display:flex;flex-wrap:wrap;gap:8px}
.fz-verlauf{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--grau)}
.fz-eintrag{display:flex;justify-content:space-between;gap:10px;background:var(--flaeche-2);
  border:1px solid var(--linie);border-radius:6px;padding:4px 9px}
.obj-block-titel b.fz-alarm{background:var(--rot);color:var(--auf-farbe);border-color:transparent}
.obj-block-titel b.fz-warn{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-linie)}

/* --- Schlüssel ---------------------------------------------------------- */
.schl-zeile{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--linie)}
.schl-zeile:last-of-type{border-bottom:none}
.schl-kopf{display:flex;flex-direction:column;gap:3px;min-width:0}
.schl-titel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px}
.schl-nr{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--tinte-2);
  background:var(--flaeche-2);border:1px solid var(--linie);border-radius:4px;padding:1px 6px}
.schl-anzahl{font-size:12.5px;color:var(--grau);font-weight:600}
.schl-info{font-size:12.5px;color:var(--grau)}
.schl-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.schl-verlauf{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.schl-eintrag{display:flex;gap:12px;align-items:center;background:var(--flaeche-2);
  border:1px solid var(--linie);border-radius:8px;padding:8px 10px}
.schl-sig{width:110px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--linie);
  border-radius:4px;flex:0 0 auto}
.schl-eintrag-text{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12.5px;color:var(--grau)}
.schl-eintrag-text b{font-size:13.5px;color:var(--tinte)}
/* Das Zeichenfeld: ohne touch-action verschiebt der Finger die Seite, statt
   zu schreiben. */
.sig-feld{border:1px solid var(--kante);border-radius:8px;background:var(--flaeche-2);overflow:hidden}
.sig-canvas{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair;background:#fff}
.sig-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 10px;border-top:1px solid var(--linie);background:var(--flaeche-2);
  font-size:12.5px;color:var(--grau)}
dialog.schl-dialog .dlg-in{max-width:640px}

/* --- Detail ------------------------------------------------------------- */
.obj-detail-kopf .kopfzeile{padding:16px 18px 8px}
.obj-detail-kopf .kopfzeile .kunde{font-size:19px;white-space:normal}
.obj-detail-kopf .obj-fuss{padding:0 18px 14px}
.obj-hinweis{margin:0 18px 16px;padding:10px 13px;background:var(--amber-bg);color:var(--amber);
  border:1px solid var(--amber-linie);border-radius:9px;font-size:12.5px;font-weight:600;line-height:1.5;
  white-space:pre-line;max-width:80ch}
.obj-block{padding:0 18px 6px}
.obj-block-titel{display:flex;align-items:center;gap:8px;padding:14px 0 6px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--grau)}
.obj-block-titel svg{width:14px;height:14px;flex:0 0 auto}
.obj-block-titel b{font-size:11px;font-weight:800;padding:0 7px;border-radius:999px;background:var(--flaeche-2);
  border:1px solid var(--linie);color:var(--tinte-2);line-height:1.6}
.obj-leer{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 0 12px;font-size:13.5px;color:var(--grau)}

/* Reklamation: Marke, Text, seit — und ein kleiner Erledigt-Knopf */
.rekl-zeile{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--linie);margin:0;background:none}
.obj-block-titel+.rekl-zeile{border-top:0}
.rekl-l{flex:1 1 auto;min-width:0}
.rekl-oben{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rekl-seit{font-size:12px;color:var(--grau);font-weight:600;margin:0}
.rekl-t{font-size:14px;color:var(--tinte);margin-top:6px;line-height:1.5;max-width:70ch;padding:0}
.rekl-tun{font-size:13px;color:var(--tinte-2);margin-top:3px;line-height:1.5;max-width:70ch}
.rekl-zeile .btn{flex:0 0 auto}

/* Turnus: Kopf links, Erledigt + „…" rechts */
.turnus-zeile{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-top:1px solid var(--linie)}
.obj-block-titel+.turnus-zeile{border-top:0}
.turnus-zeile.faellig{border-left:3px solid var(--rot);padding-left:12px;margin-left:-18px}
.turnus-kopf{flex:1 1 auto;min-width:0}
.turnus-titel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px}
.turnus-titel b{font-weight:700}
.turnus-intervall{font-size:12px;color:var(--grau);margin:0}
.turnus-info{font-size:12.5px;color:var(--grau);margin-top:4px;line-height:1.5}
.turnus-tat{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.checkliste{margin-top:10px;max-width:70ch}
.ck-zeile input{width:16px;height:16px;accent-color:var(--gruen)}

/* --- Kalender ----------------------------------------------------------- */
/* 1fr heisst minmax(auto,1fr): ein langer Objektname in der Wochenansicht
   zog seine Spalte breit und das Raster aus dem Bild. */
.obj-kal .kal-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.obj-kal .kal-tag{min-width:0}
.obj-kal .kal-labelchip{min-width:0;max-width:100%;font-weight:500}
.obj-kal .kal-labelchip b{font-weight:750}
.obj-kal .kal-chips.kal-spalte{flex-direction:column;align-items:stretch}
.obj-kal .kal-legende{margin:0 2px 10px;gap:6px 14px;font-size:12px}
.obj-kal .kal-legende span{white-space:nowrap}
.kal-tag.leer-tag{cursor:default}
.kal-tag.leer-tag:hover{border-color:var(--linie);background:#0F1E2D}
.kal-tag.leer-tag.heute:hover{border-color:var(--marke)}

/* --- Tagesdialog -------------------------------------------------------- */
dialog.obj-tagdialog{width:min(92vw,520px);max-height:88vh;overflow:auto}
.tag-liste{display:flex;flex-direction:column}
.tag-zeile{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--linie)}
.tag-zeile:first-child{border-top:0}
.tag-zeile.uebertrag{box-shadow:inset 3px 0 0 var(--rot);padding-left:11px}
.tag-l{flex:1 1 auto;min-width:0}
.tag-objekt{border:0;background:none;padding:0;font:inherit;font-size:14.5px;font-weight:700;color:var(--marke-tief);
  cursor:pointer;text-align:left;line-height:1.35;min-height:0}
.tag-objekt:hover{text-decoration:underline;text-underline-offset:2px}
.tag-info{font-size:12.5px;color:var(--grau);margin-top:2px}
.tag-marken{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tag-marken .marke{margin:0}
.marke.tag-kat{color:var(--auf-farbe);border-color:transparent}
.tag-zeile .btn{flex:0 0 auto}

/* --- Handy ---------------------------------------------------------------- */
@media (max-width:900px){
  /* Umschalter, ‹ Sep 2026 Heute › und „…" teilen sich eine Zeile:
     der Kalender fängt damit deutlich weiter oben an. */
  .leiste .obj-kalnav{gap:5px;flex-wrap:nowrap;flex:0 0 auto}
  .leiste .obj-kalnav .segment{padding:2px;gap:0;flex:0 0 auto}
  .leiste .obj-kalnav .segment button{padding:5px 6px;font-size:12px;border-radius:7px}
  .leiste .obj-kalnav .kal-kopf{gap:2px;flex:0 0 auto;width:auto}
  .leiste .obj-kalnav .kal-nav{width:28px;height:30px;font-size:15px;border-radius:7px}
  .leiste .obj-kalnav .kal-heute{padding:6px 6px;height:30px;font-size:11.5px;border-radius:7px}
  .leiste .obj-kalnav .kal-kopf .monat{min-width:0;font-size:13px;padding:0 1px;white-space:nowrap}
  .leiste:has(.obj-kalnav){margin:-5px 0 6px;gap:5px;flex-wrap:nowrap}
  .leiste:has(.obj-kalnav) .leiste-l{flex:0 0 auto;min-width:0}
  .leiste:has(.obj-kalnav) .leiste-r{flex:0 0 auto}
  .leiste:has(.obj-kalnav) .leiste-r summary.btn{flex:0 0 auto;min-width:0;width:32px;height:30px;padding:0;
    display:inline-flex;align-items:center;justify-content:center}

  .obj-kal .kal-legende{flex-wrap:wrap;gap:4px 12px;font-size:11.5px}
  .obj-kal .kal-wochentage{margin-bottom:3px;font-size:10.5px}
  .kal-tag{min-height:48px;padding:5px 4px;gap:3px}
  .kal-tagnr{font-size:11.5px}
  /* Woche als sieben Zeilen — sieben Spalten à 47 px zeigen keinen Namen */
  .obj-kal .kal-woche .kal-grid{grid-template-columns:1fr;gap:6px}
  .obj-kal .kal-woche .kal-tag{min-height:44px;flex-direction:row;align-items:flex-start;gap:8px;padding:8px 10px}
  .obj-kal .kal-woche .kal-tagnr{flex:0 0 44px;font-size:12.5px;padding-top:3px}
  .obj-kal .kal-woche .kal-chips.kal-spalte{flex:1 1 auto;min-width:0;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:4px}
  .obj-kal .kal-woche .kal-labelchip{font-size:11px;padding:4px 8px;max-width:100%}

  /* Liste: Umschalter und „Neues Objekt" in einer Zeile, Filter darunter */
  .leiste:has(.obj-listnav) .leiste-l{display:contents}
  .leiste:has(.obj-listnav) .obj-listnav{order:1;flex:0 0 auto}
  .leiste:has(.obj-listnav) .leiste-r{order:2;margin-left:auto}
  .leiste:has(.obj-listnav) .leiste-r .btn{min-width:0;flex:0 0 auto}
  .leiste:has(.obj-listnav) .filter{order:3;flex:1 1 100%}

  /* Liste: eine Spalte, Karten mit „…" */
  .obj-liste{grid-template-columns:1fr;gap:10px}
  .obj-gruppen{gap:18px}
  .obj-gruppe-kopf{gap:6px 8px;margin-bottom:10px}
  .obj-gruppe-name{font-size:16px}
  .obj-gruppe-kopf .chip{margin-left:0}
  .obj-karte{min-height:0}
  .obj-karte .kopfzeile{padding:13px 14px 6px}
  .obj-fuss{padding:0 14px 12px}
  .obj-kopf .kunde,.obj-kunde{white-space:normal}

  /* Detail: Knöpfe unter den Text, Ziele mindestens 40 px */
  .obj-detail-kopf .kopfzeile{padding:14px 15px 6px}
  .obj-detail-kopf .kopfzeile .kunde{font-size:17px}
  .obj-detail-kopf .obj-fuss{padding:0 15px 12px}
  .obj-hinweis{margin:0 15px 14px}
  .obj-block{padding:0 15px 4px}
  .turnus-zeile{flex-wrap:wrap;gap:10px}
  .turnus-zeile.faellig{margin-left:-15px}
  .turnus-kopf{flex:1 1 100%}
  .turnus-tat{flex:1 1 100%}
  .turnus-tat .btn{flex:1 1 auto;min-height:42px}
  .turnus-tat details.menue>summary.btn{flex:0 0 auto;min-width:0;min-height:42px}
  .ck-zeile{padding:8px 0;min-height:40px;align-items:center}
  .ck-zeile input{width:20px;height:20px;margin-top:0}
  .rekl-zeile{flex-wrap:wrap;gap:10px}
  .rekl-zeile .btn{flex:1 1 100%;min-height:42px}
  .obj-leer .btn{flex:1 1 100%;min-height:42px}

  /* Tagesdialog: Knopf unter den Termin */
  .tag-zeile{flex-wrap:wrap;gap:8px}
  .tag-l{flex:1 1 100%}
  .tag-zeile .btn{flex:1 1 100%;min-height:42px}
  .tag-objekt{min-height:24px}
}

/* 03-module.css kennt .klein auch als Textklasse (grau) und färbt damit die
   Schrift kleiner grüner Knöpfe grau — hier zurück auf Weiß. */
.btn.b-frei.klein{color:var(--auf-farbe)}
/* ============================================================================
   Post (E-Mail + WhatsApp) — Fassung vom 12.09.2026.
   Beide Reiter nutzen dasselbe Gerüst aus 03-module.css (.ml, .ml-liste,
   .ml-lese …). Hier steht nur, was der Umbau dazu braucht oder überschreibt:
   die Ordnerleiste ist jetzt die eine .leiste über dem Inhalt, die Fußleiste
   hat einen Hauptknopf und ein „…", die Blöcke im Lesebereich tragen ihr ✕
   an der Marke, und WhatsApp hat einen zweizeiligen Vorschau-Text.
   ========================================================================== */

/* --- Höhe: die Ordnerleiste steht jetzt außerhalb von .ml (in der .leiste):
   22 px Innenabstand oben + Leiste (≈36 px) + 16 px Abstand + 60 px unten.
   Stimmt die Summe nicht, bekommt die Seite einen Rollbalken und die Leiste
   rutscht beim ersten Klick unter den Kopf. --- */
.ml{height:calc(100dvh - var(--kopf-hoch) - 136px);min-height:480px}
/* WhatsApp steht in LESEBREIT (js-02) und bekäme 940 px — für Liste und
   Lesebereich nebeneinander zu wenig. Das Gerüst braucht die volle Breite. */
.inhalt.schmal:has(.ml){max-width:1360px}

/* Die rechte Seite der Leiste ist bei Post leer — als leeres Flex-Kind mit
   margin-left:auto bricht sie trotzdem in eine zweite Zeile und kostet den
   Zeilenabstand (8 px am Handy). */
.leiste:has(.ml-ordner) .leiste-r:empty{display:none}

/* --- Ordnerleiste als Pills in der Leiste ---
   03-module.css gibt .ml-ordner noch flex:0 0 auto (aus der Zeit, als sie in
   .ml stand) — in der Leiste muss sie schrumpfen dürfen, sonst läuft sie am
   Handy 130 px aus dem Bild. */
.ml-ordner{gap:6px;flex:1 1 auto;min-width:0;max-width:100%}
.ml-ordner button{display:inline-flex;align-items:center;gap:5px}
.ml-ordner button svg{width:14px;height:14px}
.ml-trenn{width:1px;height:20px;background:var(--linie-satt);margin:0 4px;flex:0 0 auto}
.ml-ordner .ml-chip{border-style:dashed;color:var(--marke-tief);background:#0F1E2D}
.ml-ordner .ml-chip.an{background:var(--marke-hell);border-style:solid;border-color:var(--marke);color:var(--marke-tief)}
.ml-ordner .ml-chip.an b{opacity:1}

/* --- Liste: WhatsApp hat keinen Betreff, dafür zwei Zeilen Vorschau --- */
.ml-vorschau-2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.45}

/* .klein ist in 03-module.css zugleich "kleiner grauer Text" — auf einem
   kleinen Knopf frisst das die Schriftfarbe (weiß auf Blau wurde grau). */
.ml .btn.b-haupt.klein,.ml .btn.b-senden.klein,.ml .btn.b-frei.klein{color:var(--auf-farbe)}
.ml .btn.b-still.klein,.ml .btn.b-zurueck.klein{color:var(--tinte-2)}

/* --- Lesekopf: WhatsApp-Avatar, Kategorie-Marke, Einordnung, Namensfeld --- */
.ml-abs-zeichen.a-wa{background:#0E7A44;color:#fff}
.ml-abs .ei-rolle{margin-left:2px}
.ml-klaeren{margin:12px 0 0;margin-bottom:0}
.ml-klaeren .btn.klein{padding:6px 12px}
.ml-katselect{width:auto;flex:1 1 170px;max-width:260px;min-width:150px;
  padding:6px 30px 6px 10px;font-size:13px;font-weight:600;background-color:#0F1E2D}
.ml-namenszeile{display:flex;gap:7px;align-items:stretch;margin-top:10px}
.ml-namenszeile .feld{flex:1 1 auto;min-width:0;font-size:13.5px;padding:7px 11px}
.ml-namenszeile .btn{flex:0 0 auto;white-space:nowrap}

/* --- Blöcke im Lesebereich: Marke links, ✕ rechts, unten EIN Knopf + „…" --- */
.ml-blockkopf{display:flex;align-items:center;gap:8px}
.ml-blockkopf .ei-marke{margin-bottom:0;flex:1 1 auto;min-width:0}
.ml-blockkopf+.ei-grund,.ml-blockkopf+.ei-felder{margin-top:6px}
.ml-blockfuss{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:11px}
.ml-x{flex:0 0 auto;width:26px;height:26px;padding:0;border:1px solid transparent;border-radius:7px;
  background:none;color:var(--grau);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ml-x svg{width:14px;height:14px}
.ml-x:hover{background:#0F1E2D;border-color:var(--linie-satt);color:var(--rot)}
.ml-heftblock{margin-top:15px;padding:13px 15px;background:var(--marke-hell);
  border:1px solid rgba(141,191,226,0.4);border-radius:var(--radius)}
.ei-deutung .ml-bezug{margin-top:10px}
.ei-fakten+.ml-bezug{margin-top:10px;padding-top:10px;border-top:1px solid var(--linie)}
.ei-medien{margin-top:12px}

/* --- Entwurf: Vorschlags-Marke mit ✕, Stand des Autosave, Fuß mit „…" --- */
.ml-entwurf{padding-bottom:12px}
.ml-entwurf-kopf{align-items:center}
.ml-entwurf-kopf .ei-marke{margin-bottom:0}
.ml-vorschlag-marke{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--marke-tief);background:var(--marke-hell);border:1px solid rgba(141,191,226,0.4);border-radius:999px;
  padding:2px 4px 2px 10px;max-width:100%;min-width:0}
.ml-vorschlag-marke svg{width:13px;height:13px;flex:0 0 auto}
.ml-vorschlag-marke .ml-x{width:22px;height:22px;border-radius:999px}
.ml-entwurf-grund{margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--tinte-2)}
.ml-entwurf-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px}
.ml-entwurf-stand{font-size:12px;color:var(--grau);font-weight:600;flex:1 1 auto;min-width:0}
.ml-entwurf-fuss details.menue{margin-left:auto}
.ml-entwurf .ei-fuss{margin-top:10px}

/* --- Fußleiste: Hauptknopf links, „…" daneben --- */
.ml-fuss{align-items:center}

/* ----------------------------------------------------------------- Handy */
@media (max-width:900px){
  /* Die Liste soll spätestens bei einem Viertel der Bildschirmhöhe beginnen:
     die Leiste rückt an den Kopf, die Pills werden kompakt. */
  .leiste:has(.ml-ordner){margin:-10px 0 5px}
  .leiste .ml-ordner{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px;
    margin:0 -14px;padding:0 14px;max-width:none;
    mask-image:linear-gradient(to right,#000 0,#000 93%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 93%,transparent 100%)}
  .ml-ordner::-webkit-scrollbar{display:none}
  .ml-ordner button{padding:0 11px;font-size:12.5px;flex:0 0 auto;height:36px}
  .ml-trenn{height:16px;margin:0 2px}
  /* Die feste Höhe von oben gilt nur am Schreibtisch — am Handy scrollt die Seite. */
  .ml{height:auto;min-height:0}
  .ml-liste .ml-zeile{min-height:44px}

  /* Lesekopf: Einordnung und Namensfeld untereinander */
  .ml-klaeren{gap:7px}
  .ml-katselect{flex:1 1 100%;max-width:none}
  .ml-klaeren .btn.klein{flex:0 0 auto;min-width:0}
  .ml-namenszeile{flex-direction:column}
  .ml-namenszeile .btn{width:100%}
  .ml-abs{flex-wrap:wrap}
  .ml-abs .ei-rolle{order:3}
  .ml-abs-zeit{order:4;flex:1 1 100%;padding-left:44px;margin-top:-2px}

  /* Knöpfe in den Blöcken bleiben handgroß, das „…" bleibt schmal */
  .ml-blockfuss .btn,.ml-entwurf-fuss .btn,.ml-fuss .btn{flex:1 1 auto;min-width:0}
  .ml-blockfuss details.menue summary,.ml-entwurf-fuss details.menue summary,
  .ml-fuss details.menue summary{flex:0 0 auto;min-width:44px;min-height:40px}
  .ml-blockfuss details.menue,.ml-entwurf-fuss details.menue,.ml-fuss details.menue{flex:0 0 auto}
  /* Das „…" steht am Handy rechts außen — die Liste klappt nach links auf */
  .ml-blockfuss details.menue .menue-liste,.ml-fuss details.menue .menue-liste{left:auto;right:0}
  .ml-entwurf-stand{flex:1 1 100%;order:5}
  .ml-x{width:32px;height:32px}
}
/* Reklamationen (Punkt 484, Stufe 2, 07.10.2026) */
.rk-hinweis{margin:0 0 12px;color:var(--tinte-2);font-size:14px}
.rk-karte{padding:14px 16px}
.rk-karte .kopfzeile{padding:0;align-items:flex-start}
.rk-text{margin:6px 0 0;white-space:pre-wrap;color:var(--tinte);font-size:14px;line-height:1.45}
.rk-vorschlag{margin:6px 0 0;font-size:13px;color:var(--marke-tief);font-weight:600}
.rk-fotos{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;align-items:center}
.rk-fotos img{width:88px;height:88px;object-fit:cover;border-radius:var(--radius-klein);border:1px solid var(--linie);background:var(--flaeche-2)}
.rk-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0}
.rk-erledigt{opacity:.75}
.rk-fertig{margin:10px 0}
.rk-fertig summary{cursor:pointer;font-weight:600;padding:6px 0;color:var(--tinte-2)}
.rk-dlg{max-width:620px}
.rk-feld{display:block;margin:10px 0 0;font-size:13px;font-weight:600;color:var(--tinte-2)}
.rk-feld .feld{margin-top:4px;width:100%}
.rk-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px;margin-top:6px;
  max-height:180px;overflow:auto;padding:6px 8px;border:1px solid var(--linie);border-radius:var(--radius-klein);font-weight:400;color:var(--tinte)}
.rk-wahl label{display:flex;gap:6px;align-items:center;font-size:13px}
.rk-auswertung{padding:14px 16px}
.rk-auswertung h3{margin:0 0 10px;font-size:16px}
.rk-auswertung td.re,.rk-auswertung th.re{text-align:right}
.rk-ampel{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;border:1px solid rgba(111,138,166,0.15)}
.rk-gruen{background:#2f7d3a}.rk-gelb{background:#e0a400}.rk-rot{background:#c62828}.rk-grau{background:#2D4762}
.rk-entwurf td{font-size:13px;color:var(--tinte-2);background:var(--amber-weich)}
.rk-abzug-wahl{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.rk-abzug-wahl .feld{width:auto;min-width:200px}
.rk-abzug{margin-top:8px}
.rk-abzug ul{margin:6px 0 0 18px;padding:0}
@media (max-width:900px){
  .rk-fotos img{width:72px;height:72px}
  .rk-wahl{grid-template-columns:1fr}
}
/* ============================================================================
   Modul START (12.09.2026): Start, Bürokalender, Zahlen, Team, Aufträge,
   Fragen. Wird nach 04-geraete.css geladen und überschreibt 03-module.css.

   15.09.2026 — operative Zentrale. Drei Regeln für diesen Block:

   1. Farbe ist Reihenfolge, nicht Lautstärke. Eine Zeile, die zuerst dran
      ist, trägt eine blasse Tönung und ein farbiges Zeichen — keinen
      Vollton-Balken. Zwölf überfällige Rechnungen ergaben damit früher eine
      rote Wand, und eine rote Wand meldet nichts mehr.
   2. Jede offene Sache hat einen Menschen. Der Namenszug läuft am rechten
      Rand jeder Zeile mit; oben steht, wie viel auf wen läuft.
   3. Der Blick geht von oben nach unten und wird dabei kleinteiliger:
      Tagesband (die Lage) → Wer macht was (die Leute) → Zu tun (die Sachen).
   ========================================================================== */

/* ------------------------------------------------------------ Aufklapper
   <details> mit gemerktem Zustand (klapp() in js-04e). Der Kopf ist am
   Handy mindestens 42 px hoch. */
details.aufklapp{border-top:1px solid var(--linie)}
details.aufklapp>summary{list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:9px;padding:12px 17px;min-height:42px;
  font-size:13.5px;font-weight:700;color:var(--tinte)}
details.aufklapp>summary::-webkit-details-marker{display:none}
details.aufklapp>summary::before{content:"";width:7px;height:7px;flex:0 0 auto;margin:0 3px 3px 1px;
  border-right:2px solid var(--grau);border-bottom:2px solid var(--grau);
  transform:rotate(-45deg);transition:transform .15s}
details.aufklapp[open]>summary::before{transform:rotate(45deg);margin-bottom:5px}
details.aufklapp>summary:hover{background:var(--flaeche-2)}
details.aufklapp>summary .zahl{font-size:11.5px;font-weight:800;color:var(--grau);
  background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;padding:1px 7px;margin-left:2px}
details.aufklapp>summary .wenn-auf{display:none}
details.aufklapp[open]>summary .wenn-zu{display:none}
details.aufklapp[open]>summary .wenn-auf{display:inline}
.aufklapp-in{padding-top:2px}

/* ============================================================ Tagesband
   Die erste Zeile des Tages. Große Zahl links: was offen ist. Rechts, was
   heute schon runter ist — beides echt gezählt, nichts hochgerechnet. Das
   Band darunter zeigt die ZUSAMMENSETZUNG des Stapels, keinen erfundenen
   Fortschritt: man sieht, dass der rote Teil klein ist, und das ist die
   ehrlichste Ermutigung, die eine Startseite geben kann. */
.tagesband{background:linear-gradient(180deg,var(--marke-weich),var(--flaeche) 70%);
  border:1px solid var(--linie);border-radius:var(--radius-gross);
  padding:var(--l4) var(--l5) var(--l4);margin:0 0 var(--l5);box-shadow:var(--schatten)}
.tb-tag{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grau);margin-bottom:var(--l2)}
.tb-zeile{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--l4);flex-wrap:wrap}
.tb-haupt{display:flex;align-items:baseline;gap:var(--l3);flex-wrap:wrap;min-width:0}
.tb-zahl{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--tinte);
  font-variant-numeric:tabular-nums}
.tb-null .tb-zahl{font-size:26px;color:var(--gruen);letter-spacing:-.02em}
.tb-unter{font-size:13.5px;color:var(--grau);line-height:1.45}
.tb-brennt{color:var(--rot);font-weight:750}
.tb-ruhig{color:var(--gruen);font-weight:750}
.wk-woche{color:var(--amber)}
/* Was heute schon erledigt ist. Steht bewusst rechts und kleiner: es soll
   den Blick nicht vom Stapel wegziehen, aber es soll da sein — der Tag ist
   nie bei null angefangen. */
.tb-neben{flex:0 0 auto;text-align:right;display:flex;align-items:baseline;gap:7px}
.tb-neben b{font-size:22px;font-weight:800;color:var(--gruen);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.tb-neben span{font-size:12.5px;color:var(--grau)}
/* gap:6px, nicht 3: bei zwei Segmenten sah das Band mit engem Abstand aus
   wie ein Fortschrittsbalken, der zu zwei Dritteln voll ist. Es ist aber
   kein Fortschritt, sondern eine Zusammensetzung — und das muss man sehen,
   sonst verspricht die Seite etwas, das sie nicht meint. */
/* Ein Band, das aufteilt — kein Balken, der sich fuellt. Die Segmente sind
   so hoch, dass ihre Beschriftung hineinpasst; damit ist die Lesart sofort
   eindeutig. Schmale Segmente schneiden ihren Text ab, der Tooltip hat ihn. */
.tb-band{display:flex;gap:6px;height:28px;margin-top:var(--l4)}
.tb-band i{display:flex;align-items:center;justify-content:center;border-radius:8px;
  min-width:12px;overflow:hidden;font-style:normal}
.tb-band i span{font-size:12px;font-weight:700;white-space:nowrap;padding:0 var(--l2);
  letter-spacing:.005em}
.tb-s-rot{background:var(--rot);opacity:.88;color:var(--auf-farbe)}
/* Etwas heller als der Marken-Amber: als Flaeche ueber die halbe Breite war
   der satte Ton das lauteste Stueck Farbe auf einer Seite, die ruhig sein
   soll. Die Schrift darauf bleibt bei ueber 7:1. */
.tb-s-amber{background:#E0B15C;color:#3D2D08}
.tb-s-ruhig{background:var(--linie-satt);color:var(--tinte-2)}
.tb-s-gruen{background:var(--gruen);opacity:.8;color:var(--auf-farbe)}
/* Die Legende traegt am Schreibtisch nichts mehr — die Woerter stehen im
   Band. Am Handy ist es umgekehrt (siehe unten). */
.tb-legende{display:none;flex-wrap:wrap;gap:var(--l2) var(--l4);margin-top:var(--l3);
  font-size:12.5px;color:var(--grau)}
.tb-lg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tb-lg i{width:8px;height:8px;border-radius:999px;flex:0 0 auto}

/* ====================================================== Wer macht was
   Die Zusammenführung von Start und Team. Hier steht nur, wer gerade woran
   sitzt; das Nachrechnen bleibt in der Team-Ansicht. Eine Karte ist ein
   Knopf: sie filtert die Liste darunter auf diese Person. */
.wk-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(185px,100%),1fr));
  gap:var(--l3);margin-bottom:var(--l5)}
.wk-karte{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross);
  padding:var(--l3) var(--l4) var(--l3);font:inherit;text-align:left;cursor:pointer;
  box-shadow:var(--schatten);transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease}
.wk-karte:hover{border-color:var(--linie-satt);box-shadow:var(--schatten-hoch);transform:translateY(-1px)}
.wk-karte:active{transform:translateY(0)}
.wk-karte.an{border-color:var(--marke);box-shadow:0 0 0 1px var(--marke) inset,var(--schatten-hoch);
  background:var(--marke-weich)}
.wk-kopf{display:flex;align-items:center;gap:7px;min-width:0;width:100%}
.wk-punkt{width:9px;height:9px;border-radius:999px;flex:0 0 auto}
.wk-punkt-frei{background:var(--linie-satt);box-shadow:0 0 0 2px var(--flaeche-2)}
.wk-name{font-size:13px;font-weight:700;color:var(--tinte-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-zahl{font-size:29px;font-weight:800;color:var(--tinte);line-height:1.1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin-top:3px}
.wk-unten{font-size:12.5px;line-height:1.4;font-weight:650}
.wk-brennt{color:var(--rot)}
.wk-ruhig{color:var(--grau)}
.wk-sauber{color:var(--gruen)}
/* --grau, nicht --grau-hell: letzteres ist eine Linien- und Platzhalterfarbe
   und kommt als Schrift auf Weiss nur auf 3,05:1. */
.wk-fuss{font-size:11.5px;color:var(--grau);margin-top:5px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Wer nichts mehr offen hat, kriegt das auch zu sehen. Ein leerer Tisch ist
   die einzige Zahl auf dieser Seite, die grün sein darf. */
.wk-karte.wk-fertig{background:var(--gruen-weich);border-color:var(--gruen-linie)}
.wk-karte.wk-fertig .wk-zahl{color:var(--gruen)}
.wk-karte.wk-frei{background:var(--flaeche-2);border-style:dashed}
.wk-karte.wk-frei .wk-zahl{color:var(--tinte-2)}
.wk-zurueck{margin-left:auto;flex:0 0 auto}

/* ================================================== Touren und Pakete
   Ein Paket ist eine Tour, kein Ordner. Deshalb sieht es aus wie etwas, das
   man anfasst und schliesst: Name, Fortschritt, Zustand — und darin erst die
   Einzelaufgaben.

   Die Gestaltung hat eine Aufgabe, die ueber Huebschsein hinausgeht: das
   Schliessen muss sich lohnen. Ein fertiges Paket verschwindet deshalb NICHT.
   Es wird gruen, wird kompakt und reiht sich unten ein. Der gruene Block
   waechst ueber den Tag, und das ist der einzige Fortschrittsbalken, der
   nicht gerechnet, sondern verdient ist. */

/* --- Der Stand ueber allen Paketen --- */
.pk-stand{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross);
  padding:var(--l3) var(--l4) var(--l4);margin-bottom:var(--l3);box-shadow:var(--schatten)}
.pk-stand-zeile{display:flex;align-items:baseline;gap:var(--l2);flex-wrap:wrap;margin-bottom:10px}
.pk-stand-gross{font-size:20px;font-weight:800;color:var(--tinte);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.pk-stand-wort{font-size:13.5px;color:var(--grau)}
.pk-stand-rechts{margin-left:auto;font-size:12.5px;color:var(--grau);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pk-stand-fuss{display:flex;gap:var(--l2) var(--l4);flex-wrap:wrap;margin-top:10px;font-size:12.5px}
.pk-lg{display:inline-flex;align-items:center;gap:6px;font-weight:650;white-space:nowrap}
.pk-lg::before{content:"";width:8px;height:8px;border-radius:999px;flex:0 0 auto}
.pk-lg-offen{color:var(--tinte-2)}      .pk-lg-offen::before{background:var(--linie-satt)}
.pk-lg-laeuft{color:var(--amber)}       .pk-lg-laeuft::before{background:#D9A23A}
.pk-lg-fertig{color:var(--gruen)}       .pk-lg-fertig::before{background:var(--gruen)}
/* Alles zu: die Karte feiert einmal kurz und leise. */
.pk-stand-voll{background:var(--gruen-weich);border-color:var(--gruen-linie)}
.pk-stand-voll .pk-stand-gross{color:var(--gruen)}
.pk-stand-voll .pk-schiene i{background:var(--gruen)}

/* --- Fortschrittsschiene. Der Uebergang ist Absicht: wer ein Paket
   schliesst und die Seite baut sich neu auf, sieht den Balken wandern. --- */
.pk-schiene{display:block;height:8px;border-radius:999px;background:var(--linie);overflow:hidden}
.pk-schiene i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--marke),#4FA0DA);transition:width .45s ease}
.pk-schiene-klein{height:6px;margin:10px 0 8px}

/* --- Das Raster der offenen Pakete --- */
/* align-items:start — ohne das zieht ein aufgeklapptes Paket die Karte
   daneben auf dieselbe Hoehe, und neben der offenen Liste steht ein leeres
   weisses Feld, das wie ein Fehler aussieht. */
.pk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));
  gap:var(--l3);margin-bottom:var(--l3);align-items:start}

/* --- Eine Paketkarte --- */
details.pk-karte{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius-gross);box-shadow:var(--schatten);overflow:hidden;min-width:0;
  transition:box-shadow .16s ease,border-color .16s ease}
details.pk-karte:hover{border-color:var(--linie-satt);box-shadow:var(--schatten-hoch)}
details.pk-karte>summary{list-style:none;cursor:pointer;user-select:none;
  padding:var(--l3) var(--l4) var(--l3)}
details.pk-karte>summary::-webkit-details-marker{display:none}
.pk-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--l3)}
.pk-titel{display:flex;align-items:center;gap:var(--l2);flex-wrap:wrap;min-width:0}
.pk-name{font-size:15.5px;font-weight:750;color:var(--tinte);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pk-zahl{flex:0 0 auto;font-size:19px;font-weight:800;color:var(--tinte);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.2}
.pk-zahl i{font-style:normal;font-size:13px;font-weight:700;color:var(--grau)}
.pk-fuss{display:flex;align-items:center;gap:var(--l3);flex-wrap:wrap;
  font-size:12.5px;color:var(--grau);line-height:1.4}
/* Der Haken vor dem Namen eines fertigen Pakets. Gruen allein ist ein
   Farbton, ein Haken ist eine Aussage — und auf dem Handy, wo die Marke
   ausgeblendet ist, das einzige Zeichen. */
.pk-haken{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:19px;height:19px;border-radius:999px;background:var(--gruen);color:var(--auf-farbe)}
.pk-haken svg{width:13px;height:13px;stroke-width:3}
/* Woraus ein zusammengefasstes Paket besteht („Grundstück, Garten"). */
.pk-woraus{font-size:11.5px;color:var(--grau);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pk-wer{display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex:0 0 auto;
  font-size:11.5px;font-weight:700;color:var(--tinte-2)}
.pk-wer i{width:7px;height:7px;border-radius:999px;flex:0 0 auto}

/* Zustandsmarke. Drei Woerter, die den ganzen Tag ueber gelten: offen,
   laeuft, fertig. Mehr Stufen haette niemand im Kopf. */
.pk-marke{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid transparent}
.pk-marke-offen{background:var(--flaeche-2);color:var(--grau);border-color:var(--linie)}
.pk-marke-laeuft{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-linie)}
.pk-marke-fertig{background:var(--gruen-bg);color:var(--gruen);border-color:var(--gruen-linie)}

/* Offen mit Ueberfaelligem: ein ruhiger Akzent am linken Rand. Kein Rot
   ueber die ganze Karte — die Einzelzeilen darin sagen es genau. */
details.pk-karte.pk-offen{border-left:3px solid var(--linie-satt)}
details.pk-karte.pk-laeuft{border-left:3px solid #E0B15C}

/* --- Fertige Pakete: der gruene Block, der ueber den Tag waechst --- */
.pk-fertig-reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:var(--l2);margin-bottom:var(--l3);align-items:start}
details.pk-karte.pk-fertig{background:var(--gruen-weich);border-color:var(--gruen-linie);
  border-left:3px solid var(--gruen)}
details.pk-karte.pk-fertig>summary{padding:10px var(--l3)}
details.pk-karte.pk-fertig .pk-name{font-size:13.5px;font-weight:700;color:var(--gruen)}
details.pk-karte.pk-fertig .pk-zahl{font-size:14px;color:var(--gruen)}
details.pk-karte.pk-fertig .pk-zahl i{color:var(--gruen-linie)}
/* Bei einem fertigen Paket ist die Schiene immer voll — sie zu zeigen waere
   nur eine gruene Linie ohne Aussage. Der Platz gehoert dem Haken. */
details.pk-karte.pk-fertig .pk-schiene-klein{display:none}
details.pk-karte.pk-fertig .pk-fuss{font-size:11.5px;margin-top:2px}
details.pk-karte.pk-fertig .pk-marke{display:none}
details.pk-karte.pk-fertig .pk-haken{width:17px;height:17px}
details.pk-karte.pk-fertig .pk-haken svg{width:11px;height:11px}

/* --- Die Einzelaufgaben, erst beim Aufklappen --- */
.pk-liste{border-top:1px solid var(--linie);padding:var(--l1) 0 var(--l2)}
details.pk-karte.pk-fertig .pk-liste{border-top-color:var(--gruen-linie)}
.pk-zeile{display:flex;align-items:center;gap:var(--l3);padding:9px var(--l4);cursor:pointer;
  border-bottom:1px solid var(--linie)}
.pk-zeile:last-child{border-bottom:0}
.pk-zeile:hover{background:var(--marke-weich)}
.pk-z-haken{flex:0 0 18px;width:18px;height:18px;display:flex;align-items:center;
  justify-content:center;color:var(--gruen)}
.pk-z-haken svg{width:15px;height:15px}
.pk-z-mitte{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.pk-z-mitte b{font-size:13.5px;font-weight:650;color:var(--tinte);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-z-mitte span{font-size:11.5px;color:var(--grau);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-zeile-ok .pk-z-mitte b{color:var(--grau);font-weight:600}
.pk-z-marke{flex:0 0 auto;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;
  white-space:nowrap;border:1px solid transparent}
.pk-z-ok{background:var(--gruen-bg);color:var(--gruen);border-color:var(--gruen-linie)}
.pk-z-spaet{background:var(--rot-bg);color:var(--rot);border-color:var(--rot-linie)}
.pk-z-faellig{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-linie)}
.pk-z-neu{background:var(--lila-bg);color:var(--lila);border-color:var(--lila-linie)}

/* Der Umschalter der Buendelung sitzt im Abschnittskopf. */
.pk-schalter{margin-left:auto;text-transform:none;letter-spacing:0}

/* ---------------------------------------------------------------- Start */
/* Zwei Karten nebeneinander, wenn die Breite es hergibt (ab etwa 900 px
   Inhaltsbreite); sonst eine Spalte. */
.dash-raus{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:var(--l2)}
.dash-raus>.dash-zeile{min-width:0}
.dash-abschnitt{margin:var(--l5) 2px var(--l3)}
.dash-abschnitt:first-child{margin-top:4px}
/* Abschnittskopf mit Anzahl links und einem Knopf oder Hinweis rechts. */
.dash-abschnitt-reihe{display:flex;align-items:center;gap:var(--l3);flex-wrap:wrap}
.dash-abschnitt-reihe>span:first-child{display:inline-flex;align-items:center;gap:7px}
.da-zahl{font-size:11px;font-weight:800;color:var(--grau);background:var(--flaeche);
  border:1px solid var(--linie);border-radius:999px;padding:1px 8px;letter-spacing:0;
  font-variant-numeric:tabular-nums}
/* var(--grau), nicht --grau-hell: der Hinweis ist Text, kein Strich. Mit
   --grau-hell sind es 2,84:1 — unter der Schwelle und in der Sichtpruefung
   ein Befund auf jeder Ansicht mit Abschnittskopf. */
.da-hinweis{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--grau);
  text-transform:none;letter-spacing:0}

.dash-zeile{padding:10px 13px;gap:11px;margin-bottom:0;min-height:50px;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.dash-zeile:hover{box-shadow:var(--schatten)}
.dash-passiert .dash-zeile{margin-bottom:6px}
.dash-zeile .dz-ic{width:28px;height:28px;border-radius:9px}
.dash-zeile .dz-ic svg{width:15px;height:15px}
.dash-zeile .dz-titel{font-size:13.5px;font-weight:650;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-zeile .dz-info{font-size:12px;margin-top:1px;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Rechte Spalte: Namenszug und Frist. Als eigener Block, damit beides
   untereinander passt, wenn die Zeile eng wird. */
.dash-zeile .dz-r{flex:0 0 auto;display:flex;align-items:center;gap:var(--l2)}
.dash-zeile .dz-datum{font-size:11.5px;font-weight:700;color:var(--grau);
  background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;
  padding:2px 9px;white-space:nowrap}
.dz-kurz{display:none}
/* Wer zuständig ist. Kürzel plus Farbpunkt — ausgeschriebene Namen in
   zwanzig Zeilen sind eine zweite Spalte, die den Titel wegdrückt. */
.dz-wer{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:11.5px;font-weight:750;color:var(--tinte-2);
  background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;padding:2px 9px 2px 7px}
.dz-wer i{width:7px;height:7px;border-radius:999px;flex:0 0 auto}
/* Am Schreibtisch der Name, am Handy das Kürzel. „Si" neben „S" ist kein
   Name — wer Simon und Schero auseinanderhalten will, braucht mehr als den
   Anfangsbuchstaben, und am Schreibtisch ist der Platz dafür da. */
.dz-wer-kurz{display:none}

/* Rang als Tönung, nicht als Balken — aber nur ganz oben.

   Erster Versuch am 15.09.2026 war, Rang 1 UND Rang 2/3 zu tönen. Auf der
   echten Lage waren das 18 von 28 Zeilen: aus der roten Wand wurde eine
   gelbe. Getönt wird deshalb nur noch, was zuerst dran ist — davon gibt es
   an einem normalen Tag zwei oder drei, und die sieht man dann auch. Alles
   Übrige steht auf Weiss und trägt seine Bedeutung im Zeichen links und im
   Fristchip rechts. Das reicht vollkommen: beide sind farbig, beide stehen
   an einer festen Stelle, und die Liste bleibt dabei eine Liste. */
.dash-zeile.dz-r1{background:var(--rot-weich);border-color:var(--rot-linie)}
.dash-zeile.dz-r1:hover{background:var(--rot-bg);border-color:var(--rot-linie)}
.dash-zeile.dz-r1 .dz-ic{background:var(--rot-bg);color:var(--rot)}
.dash-zeile.dz-r1 .dz-datum{color:var(--rot);background:var(--rot-bg);border-color:var(--rot-linie)}
.dash-zeile.dz-r2 .dz-ic{background:var(--amber-bg);color:var(--amber)}
.dash-zeile.dz-r2 .dz-datum{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-linie)}
.dash-zeile.dz-markiert{border-color:var(--marke);box-shadow:0 0 0 1px var(--marke) inset;background:var(--marke-hell)}
.dash-mehr{display:flex;justify-content:center;margin:var(--l3) 0 2px}

/* --------------------------------------------------------- Bürokalender */
.leiste .kal-kopf .monat{min-width:150px;font-size:14.5px}
.leiste .kal-nav,.leiste .kal-heute{height:32px}
.leiste .kal-nav{width:32px}
.kal-legende{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;gap:16px;margin-bottom:11px}
.kal-legende::-webkit-scrollbar{display:none}
.kal-legende>span{flex:0 0 auto}
.kal-tag.gewaehlt{border-color:var(--marke);background:var(--marke-hell);box-shadow:0 0 0 1px var(--marke) inset}

/* ---------------------------------------------------------------- Zahlen */
.karte.um-block{overflow:visible}
.um-titel-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.um-titel-zeile .um-titel{margin-bottom:0}
.kopf-knopf.um-info{width:30px;height:30px}
.kopf-knopf.um-info svg{width:15px;height:15px}
.um-titel-zeile .menue-liste{min-width:320px}
.um-gitter{margin-bottom:16px}

/* ------------------------------------------------------------------ Team */
/* Verweiszeile zurueck auf den Start. Steht ueber der ersten Karte, nicht
   darin — sie gehoert zur Seite, nicht zur Tabelle. */
.tm-verweis{display:flex;align-items:center;gap:var(--l3);flex-wrap:wrap;
  background:var(--marke-weich);border:1px solid var(--linie);border-radius:var(--radius);
  padding:10px var(--l4);margin:0 0 var(--l4);font-size:13px;color:var(--tinte-2);line-height:1.5}
.tm-verweis>span{flex:1 1 240px;min-width:0}
.tm-verweis .btn{flex:0 0 auto}
.tm-teil{border-top:1px solid var(--linie);margin-top:2px;padding-top:12px}
.tm-teil-titel{font-size:11.5px;font-weight:750;color:var(--grau);text-transform:uppercase;
  letter-spacing:.04em;padding:0 17px 8px}
.serien{padding-bottom:12px}
.fd-raster,.pt-raster{padding-top:4px}
.lz-liste{padding-top:0}

/* -------------------------------------------------------------- Aufträge */
/* Kopf: Nummer und Marke in einer Zeile, der Titel darunter über die volle
   Breite — neben der Marke wurde er am Handy zu einer schmalen Spalte. */
.au-kopf{padding:12px 17px 5px}
.au-nr{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.au-nr .nr{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--lila);min-width:0}
.au-nr .nr svg{width:13px;height:13px;flex:0 0 auto}
.au-nr .marke{flex:0 0 auto}
.au-kopf .kunde{font-size:15.5px;font-weight:700;margin-top:4px;letter-spacing:-.01em;line-height:1.3}
.au-was{padding:0 17px 4px;font-size:13.5px;color:var(--tinte-2);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-meta{padding:0 17px 11px;font-size:12px;color:var(--grau);line-height:1.45}
details.au-klapp>summary{padding:9px 17px;min-height:38px;font-size:13px;color:var(--tinte-2)}
details.au-klapp .aufklapp-in{padding-top:10px}
details.au-klapp .aufklapp-in .pos{color:var(--tinte);white-space:pre-line}
.au-karte .aktionen{padding-top:10px}
.au-karte .aktionen .btn{flex:0 0 auto}
.ruecktipp.au-rueck{align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ruecktipp.au-rueck>span{display:flex;gap:8px;align-items:flex-start;flex:1 1 240px}
.ruecktipp.au-rueck .btn{flex:0 0 auto}
/* .klein ist in 03-module.css zugleich „kleiner grauer Text" — auf dem
   blauen Knopf wurde die Schrift damit grau. */
.au-rueck .btn.b-haupt.klein{color:var(--auf-farbe)}
.dash-mehr .btn.b-still.klein{color:var(--tinte-2)}
/* Erledigte Aufträge: der Aufklapper steht als eigene Karte. */
details.au-erledigt{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross);
  box-shadow:var(--schatten);margin-bottom:14px}
details.au-erledigt>summary{padding:13px 17px}
details.au-erledigt .aufklapp-in{padding:10px 12px 0}
details.au-erledigt .aufklapp-in .karte{box-shadow:none}
.au-archiv-weiter{display:flex;justify-content:center;padding:6px 0 14px}

/* ---------------------------------------------------------------- Fragen */
.frage-kopf{padding:13px 17px 5px}
.frage-nr{display:flex;align-items:center;gap:6px}
.frage-nr svg{width:13px;height:13px;flex:0 0 auto;color:var(--tuerkis)}
.frage-thema{font-size:15px}
.frage-text{padding:0 17px 7px;font-size:13.5px;line-height:1.5}
.frage-warum{padding:0 17px 9px;font-size:12px;line-height:1.45}
.frage-antwort{padding:0 17px 2px}
.frage-antwort textarea{min-height:0;font-size:14px;padding:8px 10px;line-height:1.45}
.frage-antwort .aktionen{padding:8px 0 12px}
details.fr-alt-klapp{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross);
  box-shadow:var(--schatten);margin-bottom:14px}
details.fr-alt-klapp>summary{padding:13px 17px}
.fr-alt{padding:10px 17px 12px;border-top:1px solid var(--linie)}
.fr-alt-kopf{font-size:12px;font-weight:700;color:var(--grau)}
.fr-alt-frage{font-size:13px;color:var(--tinte-2);margin-top:3px;line-height:1.5;max-width:66ch}
.fr-alt-antwort{font-size:13.5px;color:var(--tinte);margin-top:6px;line-height:1.5;white-space:pre-line;
  padding:8px 11px;background:var(--tuerkis-bg);border-left:3px solid var(--tuerkis);border-radius:0 8px 8px 0;max-width:66ch}
.fr-alt-wer{font-size:11.5px;color:var(--grau);margin-top:5px}

/* ------------------------------------------------------------------ Handy */
@media (max-width:900px){
  .dash-raus{grid-template-columns:minmax(0,1fr)}
  /* Am Handy darf der Titel zwei Zeilen haben — abgeschnitten wäre sonst
     genau der Objektname weg, um den es geht. */
  .dash-zeile .dz-titel{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .dash-zeile{padding:9px 12px}
  /* Tagesband und Personenkarten am Handy: die Zahl bleibt groß, alles
     andere rückt zusammen. Zwei Karten nebeneinander passen auf 360 px —
     bei einer je Zeile scrollt man an drei Namen vorbei, bevor die erste
     Aufgabe im Bild ist. */
  .tagesband{padding:var(--l3) var(--l4);margin-bottom:var(--l4)}
  .tb-zahl{font-size:32px}
  .tb-zeile{align-items:flex-start;gap:var(--l2)}
  .tb-neben{text-align:left}
  /* Am Handy ist kein Segment breit genug fuer „18 diese Woche". Also
     wieder das duenne Band und die Woerter darunter. */
  .tb-band{height:9px;gap:5px}
  .tb-band i span{display:none}
  .tb-legende{display:flex;gap:var(--l1) var(--l3);font-size:11.5px}
  .wk-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--l2);margin-bottom:var(--l4)}
  /* Pakete am Handy: eine Spalte fuer die offenen, zwei fuer die fertigen —
     die sind nur noch Name und Haken und duerfen sich nebeneinander stapeln. */
  .pk-raster{grid-template-columns:minmax(0,1fr);gap:var(--l2)}
  .pk-fertig-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  details.pk-karte>summary{padding:var(--l3)}
  .pk-name{font-size:14.5px}
  .pk-zahl{font-size:17px}
  .pk-stand{padding:var(--l3)}
  .pk-stand-rechts{margin-left:0;flex-basis:100%}
  .pk-schalter{margin-left:0;flex-basis:100%;overflow-x:auto;scrollbar-width:none}
  .pk-schalter::-webkit-scrollbar{display:none}
  .pk-zeile{padding:9px var(--l3);gap:var(--l2)}
  details.pk-karte.pk-fertig .pk-fuss{display:none}
  .wk-karte{padding:10px 12px}
  .wk-zahl{font-size:25px}
  .wk-fuss{display:none}
  /* Der Namenszug bleibt, die Frist wird kurz — zusammen passen sie sonst
     nicht neben einen zweizeiligen Titel. */
  .dash-zeile .dz-r{flex-direction:column;align-items:flex-end;gap:4px}
  .dz-wer{padding:1px 7px 1px 6px;font-size:11px}
  .dz-wer-lang{display:none}
  .dz-wer-kurz{display:inline}
  .dz-lang{display:none}
  .dz-kurz{display:inline}
  .kal-legende .kal-lg-lang{display:none}
  .kal-legende{gap:12px;font-size:11.5px}
  .leiste .kal-kopf{width:100%}
  .leiste .kal-kopf .monat{min-width:0}
  .au-was{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .au-karte .aktionen>.btn{flex:1 1 0;min-width:0}
  .au-karte .aktionen details.menue>summary.btn{min-width:0;width:44px;padding:0;height:42px}
  .ruecktipp.au-rueck .btn{flex:1 1 100%;min-height:40px}
  details.aufklapp>summary{padding:12px 15px}
  .frage-antwort{padding:0 15px 2px}
}

/* Umsatzkarten: gleiche Oberkante, auch wenn ein Untertitel zwei Zeilen hat */
.um-gitter{align-items:stretch}
.um-karte,.um-klick{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
@media (max-width:900px){
  /* Zwoelf Beschriftungen auf 360 px: nur der Monatsbuchstabe, das Jahr steht
     am ersten und letzten Balken */
  .um-bl{font-size:9px;letter-spacing:-.02em;overflow:visible}
}

/* ---------------------------------------------------------- Die Jetzt-Zeile
   Ganz oben im Tagesband: der nächste Termin mit der Zeit, die noch bleibt.
   Sie ist das Einzige auf der Seite, das nicht warten kann, und sieht deshalb
   anders aus als alles andere. */
.tb-jetzt{display:flex;align-items:center;gap:9px;margin:2px 0 12px;padding:9px 12px;
  border-radius:10px;background:var(--marke-hell);border:1px solid var(--marke);
  cursor:pointer;color:var(--marke-tief)}
.tb-jetzt:hover{background:#0F1E2D}
.tb-jetzt svg{width:17px;height:17px;flex:0 0 auto}
.tb-jetzt b{font-size:14px;font-weight:800;flex:0 0 auto}
.tb-jetzt span{font-size:13px;color:var(--tinte-2);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-jetzt-nah{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)}

/* ------------------------------------------------- Die Punkte-Zeile
   Unten im Tagesband: die eine Zahl der offenen Punkte aus offen.py, Wort
   für Wort wie Telegram /offen (seit 24.09.2026). Ein Knopf wie die
   Jetzt-Zeile, aber ruhig — sie meldet einen Stand, keinen Alarm. */
.tb-offen{display:flex;align-items:center;gap:9px;width:100%;margin-top:var(--l4);padding:9px 12px;
  border-radius:10px;background:var(--flaeche);border:1px solid var(--linie-satt);
  font:inherit;text-align:left;cursor:pointer;color:var(--tinte)}
.tb-offen:hover{border-color:var(--marke);background:#0F1E2D}
.tb-offen svg{width:17px;height:17px;flex:0 0 auto;color:var(--marke)}
.tb-offen b{font-size:14px;font-weight:800;flex:0 0 auto}
.tb-offen span{font-size:13px;color:var(--tinte-2);line-height:1.4;min-width:0}
.tb-offen .tb-offen-teil{white-space:nowrap}
.tb-offen .tb-offen-geh{margin-left:auto;font-size:12px;font-weight:700;color:var(--marke-tief);
  white-space:nowrap;flex:0 0 auto}
@media (max-width:900px){
  .tb-offen{align-items:flex-start;margin-top:var(--l3)}
  .tb-offen .tb-offen-geh{display:none}
}

/* Der kleine Knopf in einer Postenzeile: abhaken, ohne die Ansicht zu wechseln. */
.dash-zeile .dz-tat{flex:0 0 auto;margin-left:2px}
@media (max-width:900px){
  .dash-zeile .dz-tat span{display:none}
  .dash-zeile .dz-tat{min-width:40px;padding:0 10px}
}

/* ---- Bürotag (Team, Punkt 401) ---- */
.bt-wahl{margin:0 0 12px}
.bt-tore{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 17px 15px}
.bt-tor{padding:6px 10px;border:1px solid var(--linie);border-radius:8px;color:var(--grau);font-size:13px;background:var(--flaeche)}
.bt-tor.an{color:var(--tinte);border-color:var(--linie-satt)}
.bt-tor.jetzt{background:var(--gruen-weich);border-color:var(--gruen-linie);color:var(--tinte)}
.bt-pfeil{width:14px;height:1px;background:var(--linie-satt);display:inline-block}
.bt-hinweis{margin:0 17px 15px;padding:8px 10px;border-left:3px solid var(--rot);background:var(--rot-weich);color:var(--tinte);font-size:13px}
.bt-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.bt-person.meins{border-color:var(--linie-satt)}
.bt-lage{font-size:12px;color:var(--rot);font-weight:600;text-align:right;margin-top:3px}
.bt-zahlen{padding:0 17px 6px;font-size:13px;color:var(--grau)}
.bt-lage.gut{color:var(--gruen)}
.bt-ueb{margin:8px 17px 12px;display:flex;flex-direction:column;gap:6px}
.bt-ueb p{margin:0;color:var(--tinte);font-size:14px;white-space:pre-wrap}
.bt-ueb.fehlt p{color:var(--grau)}
.bt-ueb textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--linie);border-radius:6px}
.bt-ueb .btn{align-self:flex-start}
.bt-liste{list-style:none;margin:0;padding:0}
.bt-liste li{padding:8px 17px;border-top:1px solid var(--linie);font-size:14px;color:var(--tinte)}
.bt-liste li em{display:block;font-style:normal;font-size:12px;color:var(--grau);margin-top:2px}
.bt-liste li.zu{opacity:.6}
.bt-liste li.s1{border-left:3px solid var(--linie-satt);padding-left:14px}
.bt-liste li.s2{border-left:3px solid var(--rot-linie);padding-left:14px}
.bt-liste li.s3{border-left:3px solid var(--rot);padding-left:14px;background:var(--rot-weich)}
.bt-vertag{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.bt-vertag input{font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--linie);border-radius:6px}
.bt-vertag input:first-child{flex:1;min-width:140px}

/* --- Kopfzeile (Punkt 522): „X Dinge brauchen dich" und „Y € potenzieller
       Geldeingang". Zwei Knöpfe, gleich breit; die Zahl trägt die Aussage,
       der Satz darunter steht in --grau (nie --grau-hell, 3,05:1). --- */
.ak-kopf{display:flex;gap:var(--l3);margin:0 0 var(--l4)}
.ak-zahl{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 16px;border:1px solid var(--linie);border-radius:var(--radius);background:#0F1E2D;
  color:var(--tinte);font-family:inherit;text-align:left;cursor:pointer;box-shadow:var(--schatten)}
.ak-zahl:hover{border-color:var(--linie-satt);box-shadow:var(--schatten-hoch)}
.ak-zahl b{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums;color:var(--tinte)}
.ak-zahl span{font-size:13px;color:var(--grau);line-height:1.4}
.ak-zahl.ak-an b{color:var(--rot)}
.ak-geld b{color:var(--gruen)}
@media (max-width:760px){
  .ak-kopf{flex-direction:column;gap:var(--l2)}
  .ak-zahl{padding:10px 14px}
  .ak-zahl b{font-size:26px}
}

/* --- Jetzt erledigen (Punkt 522): höchstens fünf Zeilen, nummeriert. Die
       Nummer ist die Reihenfolge, nicht die Farbe; rot ist nur, was fehlt. --- */
.ak-liste{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--l4)}
.ak-zeile{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;background:#0F1E2D;
  border:1px solid var(--linie);border-left:4px solid var(--marke);border-radius:var(--radius);
  box-shadow:var(--schatten);cursor:pointer}
.ak-zeile:hover{border-color:var(--linie-satt);border-left-color:var(--marke);box-shadow:var(--schatten-hoch)}
.ak-nr{flex:0 0 26px;height:26px;border-radius:50%;background:var(--nacht);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.ak-l{flex:1 1 auto;min-width:0}
.ak-titel{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:750;color:var(--tinte);
  line-height:1.35}
.ak-titel svg{width:16px;height:16px;flex:0 0 auto;color:var(--grau)}
.ak-titel span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-aktion{font-size:13.5px;color:var(--tinte-2);margin-top:2px;line-height:1.4}
.ak-aktion b{color:var(--tinte)}
.ak-fehlt{color:var(--rot)!important}
.ak-grund{font-size:12.5px;color:var(--grau);margin-top:2px}
.ak-r{flex:0 0 auto}
@media (max-width:760px){
  .ak-zeile{padding:9px 11px;gap:9px}
  .ak-titel span{white-space:normal}
}

/* --- Vorgangsprüfung (Punkt 522, Nr. 2): ohne nächste Aktion = rot,
       ohne Zuständigen/Frist = amber, eine Zeile. --- */
.ak-fehler{margin:0 0 var(--l2);border:1px solid var(--rot-linie);background:var(--rot-weich);
  border-left:4px solid var(--rot);border-radius:var(--radius);padding:8px 12px;color:var(--rot)}
.ak-fehler summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;color:var(--rot)}
.ak-fehler summary span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ak-fehler summary svg{width:16px;height:16px;flex:0 0 auto}
.ak-fehler summary b{font-weight:800}
.ak-pz{display:flex;gap:10px;align-items:baseline;padding:6px 2px;border-top:1px solid var(--rot-linie);
  cursor:pointer;font-size:13px;color:var(--tinte)}
.ak-pz:hover{background:#0F1E2D}
.ak-pz b{flex:0 0 auto;color:var(--rot);font-weight:750}
.ak-pz span{flex:1 1 auto;min-width:0}
.ak-pz i{flex:0 0 auto;font-style:normal;color:var(--grau);font-size:12.5px}
.ak-luecke{display:flex;align-items:center;gap:8px;margin:0 0 var(--l4);padding:7px 12px;
  border:1px solid var(--amber-linie,var(--linie));background:var(--amber-bg);border-radius:var(--radius);
  font-size:13px;color:var(--tinte-2)}
.ak-luecke svg{width:15px;height:15px;flex:0 0 auto;color:var(--amber)}
.ak-fehler .aufklapp{border:0;margin:0;padding:0;background:none}

/* --- Cashflow (Punkt 522, Nr. 3): eine große Karte, darunter die Staffel.
       Die Farbe sitzt am Rand, die Zahl bleibt in voller Tinte lesbar. --- */
.cf-haupt{margin:0 0 var(--l3)}
.cf-haupt .um-karte{width:100%;text-align:left}
.cf-gross .um-k-wert{font-size:34px;color:var(--gruen)}
.cf-gitter{grid-template-columns:repeat(5,minmax(0,1fr))}
.cf-amber{border-left:4px solid var(--amber)!important}
.cf-rot{border-left:4px solid var(--rot)!important}
.cf-rot .um-k-wert{color:var(--rot)}
.cf-fuss{font-size:12.5px;color:var(--grau);margin:var(--l2) 2px var(--l5)}
@media (max-width:1100px){ .cf-gitter{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .cf-gitter{grid-template-columns:minmax(0,1fr)} .cf-gross .um-k-wert{font-size:28px} }
/* Werkbank-Karte: Kopf untereinander. 05-auftraege.css (Kundenaufträge,
   gleicher Klassenname au-kopf) legt ihn sonst als Zeile, und der Titel
   rutscht neben die Marken. */
.rand-auftrag .au-kopf{display:block}
/* Konkreter Knopf in „Jetzt erledigen" (Punkt 522, Nr. 6). */
.ak-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ak-tat{white-space:nowrap;display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.ak-tat svg{width:14px;height:14px}
@media (max-width:760px){ .ak-tat span{display:inline} }
@media (max-width:760px){
  .ak-zeile{flex-wrap:wrap}
  .ak-l{flex:1 1 calc(100% - 40px)}
  .ak-r{flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center;padding-left:35px}
}

/* --- Ruhige Startseite (Punkt 572): drei Bereiche. Ein Eintrag ist eine
       Karte mit Satz, Empfehlung und einem Knopf; Farbe nur am linken Rand
       und an der Rangmarke, nie als Fläche über alles. Kleine graue Schrift
       in --grau (5,50:1), nie --grau-hell. --- */
.rh-schalter{display:flex;justify-content:flex-end;margin:0 0 var(--l2)}
.rh-bereich{margin-bottom:var(--l4)}
.rh-liste{display:flex;flex-direction:column;gap:8px}
.rh-eintrag{background:#0F1E2D;border:1px solid var(--linie);border-left:4px solid var(--linie-satt);
  border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:5px}
.rh-rang-0{border-left-color:var(--gruen)}
.rh-rang-1{border-left-color:var(--rot)}
.rh-rang-2{border-left-color:var(--amber)}
.rh-kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rh-rang{flex:0 0 auto;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:var(--flaeche);color:var(--tinte)}
.rh-rang-0 .rh-rang{background:var(--gruen-bg);color:var(--gruen)}
.rh-rang-1 .rh-rang{background:var(--rot-bg);color:var(--rot)}
.rh-rang-2 .rh-rang{background:var(--amber-bg);color:var(--amber)}
.rh-titel{flex:1 1 200px;min-width:0;display:inline-flex;align-items:baseline;gap:6px;font-size:15px;color:var(--tinte)}
.rh-titel svg{width:15px;height:15px;flex:0 0 auto;color:var(--grau);align-self:center}
.rh-titel b{font-weight:750;line-height:1.35}
.rh-betrag{flex:0 0 auto;margin-left:auto;font-size:15px;font-weight:800;color:var(--tinte);white-space:nowrap}
.rh-satz{font-size:14px;color:var(--tinte);line-height:1.45}
.rh-empf{font-size:13.5px;color:var(--grau);line-height:1.45}
.rh-empf b{color:var(--tinte);font-weight:700}
.rh-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.rh-tat{min-height:40px;padding:8px 16px;font-weight:700;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;white-space:normal;text-align:left}
.rh-details{margin-left:auto;font-size:13px}
.rh-details summary{cursor:pointer;color:var(--marke-tief);font-weight:650;padding:6px 2px;list-style:none}
.rh-details summary::-webkit-details-marker{display:none}
.rh-details summary::after{content:" ▾"}
.rh-details[open]{flex:1 1 100%;margin-left:0;border-top:1px solid var(--linie);padding-top:6px}
.rh-details[open] summary::after{content:" ▴"}
.rh-d-text{font-size:13.5px;color:var(--tinte);line-height:1.5;margin:4px 0 8px;white-space:pre-line}
.rh-d-zeile{display:flex;gap:10px;font-size:13px;padding:3px 0;color:var(--tinte)}
.rh-d-zeile>b{flex:0 0 110px;color:var(--grau);font-weight:600}
.rh-d-zeile>span{flex:1 1 auto;min-width:0}
.rh-d-knoepfe{display:flex;gap:6px;flex-wrap:wrap}
.rh-auto-liste{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--radius);
  background:#0F1E2D;overflow:hidden}
.rh-auto{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--linie);cursor:pointer}
.rh-auto:first-child{border-top:0}
.rh-auto:hover{background:var(--flaeche)}
.rh-a-zeichen svg{width:16px;height:16px;color:var(--grau);display:block}
.rh-erl .rh-a-zeichen svg{color:var(--gruen)}
.rh-a-l{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.rh-a-l b{font-size:14px;font-weight:650;color:var(--tinte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-a-l i{font-style:normal;font-size:12.5px;color:var(--grau);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-a-r{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.rh-sys{font-size:12px;color:var(--grau);font-weight:650}
.rh-wv{font-size:12.5px;color:var(--tinte);white-space:nowrap}
.rh-wv-leer{color:var(--grau)}
.rh-wv-ueber{color:var(--rot);font-weight:650}
.rh-ohne{color:var(--amber);font-weight:650}
.rh-uebersicht{margin-top:var(--l4);border:1px solid var(--linie);border-radius:var(--radius);background:#0F1E2D;padding:10px 14px}
.rh-uebersicht>.aufklapp{border:0;margin:0;padding:0;background:none}
.rh-uebersicht>.aufklapp>summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--tinte)}
.rh-uebersicht>.aufklapp>summary>span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.rh-uebersicht>.aufklapp>summary svg{width:16px;height:16px;flex:0 0 auto;color:var(--grau)}
.rh-u-was{font-size:12.5px;color:var(--grau)}
@media (max-width:760px){
  .rh-eintrag{padding:11px 12px}
  .rh-titel{flex-basis:100%;order:2}
  .rh-betrag{order:1}
  .rh-fuss{gap:8px}
  .rh-tat{flex:1 1 100%;justify-content:center}
  .rh-details{margin-left:0}
  .rh-a-l b,.rh-a-l i{white-space:normal}
  .rh-auto{flex-wrap:wrap;align-items:flex-start}
  .rh-a-l{flex:1 1 calc(100% - 30px)}
  .rh-a-r{flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center;padding-left:26px}
  .rh-d-zeile{flex-direction:column;gap:0}
  .rh-d-zeile>b{flex-basis:auto}
}
/* Hintergrund-Abläufe in „Läuft automatisch“ (Punkt 575, Teil 5) */
.rh-hg,.rh-hg-h{cursor:default}
.rh-hg-h i{color:var(--rot)}
.rh-hg-mehr{margin:4px 12px 8px}
/* Termine. Die Agenda benutzt die Bausteine der Startseite (dash-abschnitt,
   dash-zeile) — hier steht nur, was sie unterscheidet. */

/* Der Tageskopf von heute ist die eine Zeile, die beim Aufschlagen gefunden
   werden muss. */
.dash-abschnitt.tm-heute>span:first-child{color:var(--marke)}
.dash-abschnitt.tm-heute .da-zahl{background:var(--marke);color:var(--auf-farbe);border-color:var(--marke)}

/* Eine Erinnerung ist kein zweiter Termin. Sie steht leiser daneben, damit
   „Zahnarzt 11:00" und „Erinnerung: Zahnarzt heute 11:00" nicht wie zwei
   Verpflichtungen aussehen. */
.dash-zeile.tm-erinn{background:var(--flaeche);border-style:dashed}
.dash-zeile.tm-erinn .dz-titel{font-weight:600;color:var(--grau)}
.dash-zeile.tm-erinn .dz-ic{opacity:.55}

/* „in 4 Tagen" ist der Abstand zu heute, kein Beiwerk — grau-hell liegt mit
   2.84:1 unter der Lesbarkeitsschwelle. */
.da-hinweis.tm-fern{color:var(--grau)}

/* ------------------------------------------------------- Abschluss am Termin
   Die Knopfzeile haengt unter der Karte, nicht darin: in der Karte stuende sie
   am Handy neben der Uhrzeit und wuerde den Titel wegdruecken. */
.tm-block{margin-bottom:var(--l2)}
.tm-block>.dash-zeile{margin-bottom:0}
.tm-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:7px 13px 0}
.tm-fuss .btn{flex:0 0 auto}
.tm-marke{font-size:11.5px;font-weight:750;border-radius:999px;padding:2px 9px}
.tm-marke-zu{color:var(--gruen);background:var(--gruen-bg);border:1px solid var(--gruen-linie)}
.tm-marke-aus{color:var(--rot);background:var(--rot-bg);border:1px solid var(--rot-linie)}
.tm-notiz{font-size:12px;color:var(--grau);flex:1 1 200px;min-width:0}
.tm-wer{font-size:11.5px;color:var(--grau)}
.tm-wieder{margin-left:auto}

/* Abgehakt heisst: steht noch da, drängt aber nicht mehr. */
.dash-zeile.tm-zu{background:var(--flaeche)}
.dash-zeile.tm-zu .dz-titel{color:var(--grau);text-decoration:line-through}
.dash-zeile.tm-zu .dz-ic{background:var(--gruen-bg);color:var(--gruen)}
.dash-zeile.tm-aus .dz-ic{background:var(--rot-bg);color:var(--rot)}
.dash-zeile.tm-aus .dz-titel{color:var(--grau)}

/* Die fünf Antworten im Dialog: sie sollen alle nebeneinander lesbar sein. */
.tm-wahl{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 4px}

/* Eine offene Folge ist keine Erledigung: sie steht amber, bis die Arbeit
   daraus getan ist. */
.tm-fuss-folge{align-items:flex-start}
.tm-marke-folge{color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-linie)}

/* Die beiden Erinnerungshaken im Anlegen-Fenster. */
.tm-erinn-wahl{display:flex;flex-direction:column;gap:7px;margin:10px 0 4px}
.tm-erinn-wahl label{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
.tm-erinn-wahl input{width:18px;height:18px;accent-color:var(--marke);cursor:pointer}
/* Löschen steht still ganz rechts — niemand soll es versehentlich treffen. */
.tm-weg{margin-left:auto;border:0;background:none;color:var(--grau);font-size:20px;
  line-height:1;padding:0 6px;cursor:pointer;border-radius:6px}
.tm-weg:hover{color:var(--rot);background:var(--rot-bg)}
/* Termine einlesen (Punkt 559): Dialog aus Kalender > Woche, „…“.
   Breiter als der Standarddialog, weil die Tafel sieben Tage zeigt. Farben nur
   aus den Grundwerten: Schrift --tinte/--tinte-2/--grau (mind. 5,5:1 auf Weiß),
   Fragen in Amber auf Amber-Fläche, Fehler in Rot. */
dialog.te-dlg{width:min(96vw,760px);max-height:90vh;overflow:auto}
.te-dlg .dlg-btn{position:sticky;bottom:0;background:#0F1E2D;padding:12px 0 0;margin-top:12px;
  border-top:1px solid var(--linie)}
.te-modus{margin:0 0 10px}
.te-text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;
  resize:vertical;min-height:150px}
.dlg-in p.te-fuss,.te-fuss{font-size:12px;color:var(--grau);margin:6px 0 0;line-height:1.5}
.te-drop{margin:0}
.te-datei{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;font-weight:650;color:var(--tinte)}
.te-datei svg{width:16px;height:16px;color:var(--marke-tief);flex:0 0 auto}
.te-datei span{min-width:0}
.te-datei small{color:var(--grau);font-weight:600;white-space:nowrap;overflow-wrap:normal}

.te-ergebnis:not(:empty){margin-top:14px;border-top:1px solid var(--linie);padding-top:12px}
.te-stand{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--tinte-2);margin-bottom:8px}
.te-stand svg{width:15px;height:15px;flex:0 0 auto}
.te-stand.te-gut{color:var(--gruen)}
.te-zahlen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.te-zahl{font-size:12.5px;color:var(--tinte-2);background:var(--flaeche-2);border:1px solid var(--linie);
  border-radius:999px;padding:3px 10px}
.te-zahl b{font-weight:800;color:var(--tinte)}
.te-zahl.te-an{background:var(--marke-hell);border-color:rgba(141,187,226,0.4);color:var(--marke-tief)}
.te-zahl.te-an b{color:var(--marke-tief)}

.te-tafel-huelle{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--radius-klein);margin:0 0 4px}
.te-tafel{border-collapse:collapse;width:100%;font-size:12.5px;font-variant-numeric:tabular-nums}
.te-tafel th,.te-tafel td{padding:6px 8px;border-bottom:1px solid var(--linie);text-align:center;white-space:nowrap}
.te-tafel thead th{background:var(--flaeche-2);color:var(--tinte-2);font-weight:700;font-size:12px}
.te-tafel tbody th{text-align:left;font-weight:700;color:var(--tinte);white-space:normal;min-width:130px}
.te-tafel tbody tr:last-child th,.te-tafel tbody tr:last-child td{border-bottom:0}
.te-tafel td{color:var(--tinte)}
.te-tafel td.te-leer{color:var(--grau)}
.te-tafel .te-k{font-size:11px;font-weight:800;color:var(--marke-tief)}
.te-tafel.te-liste td,.te-tafel.te-liste th{text-align:left}
.te-tafel.te-liste tbody th{vertical-align:top;min-width:90px}
.te-name{color:var(--grau);font-size:12px}

.te-berichte{list-style:none;margin:10px 0 0;padding:0;font-size:12.5px;color:var(--tinte-2);line-height:1.5}
.te-berichte li{padding:3px 0}
.te-berichte li.te-fehler,.te-zuletzt li.te-fehler b{color:var(--rot)}
.te-hinweis{margin:10px 0 0;padding:9px 11px;border-radius:var(--radius-klein);background:var(--flaeche-2);
  border:1px solid var(--linie);font-size:13px;color:var(--tinte-2);line-height:1.5}
.te-link{border:0;background:none;padding:0;margin-left:4px;font:inherit;font-weight:700;color:var(--marke-tief);
  text-decoration:underline;cursor:pointer}
.te-fragen{margin:10px 0 0;padding:9px 11px;border-radius:var(--radius-klein);background:var(--amber-bg);
  border:1px solid var(--amber-linie);color:var(--amber);font-size:13px;line-height:1.5}
.te-fragen-kopf{display:flex;align-items:center;gap:7px;font-weight:750}
.te-fragen-kopf svg{width:15px;height:15px;flex:0 0 auto}
.te-fragen ul{margin:6px 0 0;padding-left:18px;color:#F7DBA1}

.te-zuletzt:not(:empty){margin-top:14px}
.te-zuletzt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.te-zuletzt li{display:flex;gap:10px;font-size:12.5px;color:var(--tinte-2);line-height:1.45}
.te-zuletzt li b{color:var(--tinte);font-weight:650}
.te-zuletzt li small{color:var(--grau);font-size:12px}
.te-wann{flex:0 0 78px;color:var(--grau);font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .te-dlg .dlg-in{padding:16px 14px 16px}
  .te-tafel th,.te-tafel td{padding:5px 6px}
  .te-wann{flex-basis:64px}
}
/* Vorgang an einer Stelle (Punkt 573): ui/js-19-vorgang.js */
dialog.vg-dlg{width:min(96vw,980px)}
.vg-laedt{color:var(--grau);padding:18px 0}
.vg-kopf{display:flex;flex-direction:column;gap:5px;padding-bottom:12px;border-bottom:1px solid var(--linie);margin-bottom:12px}
.vg-titel{font-size:16px;color:var(--tinte)}
.vg-meta{font-size:13px;color:var(--grau)}
.vg-naechst,.vg-wv{font-size:13.5px;color:var(--tinte);background:var(--marke-weich);border:1px solid var(--marke-hell);
  border-radius:var(--radius-klein);padding:6px 10px}
.vg-wv{background:var(--tuerkis-weich);border-color:var(--tuerkis-linie)}
.vg-vorschlag{display:inline-block;font-size:11.5px;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-linie);
  border-radius:20px;padding:0 8px;margin-left:4px}
.vg-schluessel{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--tinte)}
.vg-schluessel b{color:var(--grau);font-weight:600;margin-right:4px}
.vg-luecken{font-size:13px;color:var(--amber);background:var(--amber-weich);border:1px solid var(--amber-linie);
  border-radius:var(--radius-klein);padding:6px 10px;margin-bottom:12px}
.vg-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.vg-block{border:1px solid var(--linie);border-radius:var(--radius);padding:8px 10px;background:var(--flaeche);min-width:0}
.vg-block h4{margin:0 0 6px;font-size:13px;font-weight:650;color:var(--tinte);display:flex;align-items:center;gap:6px}
.vg-zahl{font-size:11.5px;font-weight:600;color:var(--grau);background:var(--grund);border-radius:20px;padding:0 7px}
.vg-zeile{display:flex;gap:8px;font-size:12.5px;padding:3px 0;border-top:1px solid var(--linie);align-items:baseline}
.vg-zeile:first-of-type{border-top:0}
.vg-d{flex:0 0 auto;color:var(--grau);font-variant-numeric:tabular-nums;min-width:62px}
.vg-r{flex:0 0 auto;font-size:11.5px;color:var(--grau);font-weight:600}
.vg-rein{color:var(--marke-tief)}
.vg-raus{color:var(--gruen)}
.vg-t{flex:1 1 auto;min-width:0;color:var(--tinte);overflow-wrap:anywhere}
.vg-b{flex:0 0 auto;color:var(--tinte);font-variant-numeric:tabular-nums}
.vg-leer,.vg-mehr{font-size:12.5px;color:var(--grau-hell);padding:2px 0}
.vg-zu{border-left:3px solid var(--lila)}
.vg-zu .rh-rang{color:var(--lila);background:var(--lila-bg)}
.vg-gruende{color:var(--grau);font-size:12.5px}
/* ============================================================================
   Wochenplan im Kalender (Punkt 559) — Sicht „Plan“. Aufbau wie das PDF und
   Haydars Vorlage KW 41: sieben Tagesspalten mit Kopf, Team und Terminen.
   ========================================================================== */
.wp-laedt{color:var(--grau);font-size:13px}
.wp-status{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;
  border-left:4px solid #C58B2A;padding:12px 14px;margin-bottom:12px}
.wp-status.wp-frei{border-left-color:var(--gruen)}
.wp-status.wp-geaendert{border-left-color:#C58B2A}
.wp-status b{font-weight:750;color:var(--tinte)}
.wp-unter{font-size:12.5px;color:var(--grau);margin-top:3px;max-width:640px}
.wp-knapp{font-size:12.5px;color:#F7D0A1;font-weight:650;margin-top:5px}
.wp-danach{color:#F7D0A1;font-weight:700}
.wp-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.wp-zeile{font-size:12.5px;color:var(--grau);margin:0 0 8px 2px}

.wp-woche{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:stretch}
.wp-tag{background:#0F1E2D;border:1px solid var(--linie);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.wp-tag.wp-heute{border-color:var(--marke);box-shadow:0 0 0 1px var(--marke)}
.wp-kopf{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;border:0;cursor:pointer;
  background:#0D2B52;color:#fff;padding:9px 10px 10px;font:inherit;text-align:left}
.wp-so .wp-kopf{background:#081C36}
.wp-kopf b{font-size:14px;font-weight:750}
.wp-kopf span{font-size:11.5px;color:#D5E2F0}
.wp-kopf .wp-start{font-weight:700;color:#fff;font-size:12px;margin-top:2px}
.wp-kopf .wp-start.wp-vs{font-style:italic;color:#D5E2F0}
.wp-kopf:hover{background:#163B6B}
.wp-team{display:block;width:100%;text-align:left;font:inherit;border:0;cursor:pointer;
  background:#1B3048;padding:8px 10px 9px;border-bottom:1px solid rgba(141,185,226,0.4);font-size:12.5px;font-weight:650;color:var(--tinte)}
.wp-team:hover{background:rgba(137,185,231,0.176)}
.wp-team:focus-visible{outline:2px solid var(--marke);outline-offset:-2px}
.wp-vsname{font-style:italic;color:#B7C9E1;font-weight:600}
.wp-aendern{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--marke-tief)}
.wp-aendern svg{width:12px;height:12px}
.wp-so .wp-team{border-top:4px solid #5AA9E6}
.wp-termine{padding:8px 10px;flex:1}
.wp-titel{display:flex;align-items:baseline;gap:6px;font-size:10.5px;font-weight:750;letter-spacing:.08em;
  text-transform:uppercase;color:#BECADA;margin-bottom:5px}
.wp-zahl{margin-left:auto;font-size:13px;letter-spacing:0;color:var(--tinte)}
.wp-vsmarke{font-size:10px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,206,112,0.176);color:#F7D0A1;border-radius:4px;padding:1px 5px;font-style:normal}
.wp-marken{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin:-2px 0 5px}
.wp-bedarf{font-size:10.5px;color:#F7D0A1;font-weight:700}
.wp-termin{display:flex;gap:6px;align-items:flex-start;padding:4px 0;border-bottom:1px dotted rgba(141,182,226,0.4)}
.wp-termin:last-child{border-bottom:0}
.wp-chip{flex:0 0 auto;display:inline-block;color:#fff;font-weight:750;font-size:10px;line-height:1.5;
  padding:0 5px;border-radius:4px;min-width:30px;text-align:center;margin-top:1px}
.wp-text{font-size:12.5px;font-weight:600;color:var(--tinte);overflow-wrap:anywhere;white-space:pre-line}
.wp-text.wp-summe{font-weight:750}
.wp-wortlaut{margin:8px 0;padding:10px 12px;border-left:3px solid var(--linie-satt);background:var(--flaeche);border-radius:6px;font-size:13px;line-height:1.5}
.wp-leer{color:var(--grau);font-style:italic;font-size:12px}
.wp-legende{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:12px;color:var(--grau);margin:12px 2px 4px}
.wp-legende b{color:var(--tinte-2)}
.wp-legende .wp-chip{margin-right:3px}
.wp-quelle{margin-left:auto}

@media (max-width:1180px){
  .wp-woche{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .wp-woche{grid-template-columns:1fr}
  .wp-status{flex-direction:column}
  .wp-quelle{margin-left:0}
}

/* Kräfte-Raster: Vorschlag und Bedarf in der Zeile „Einsätze / Kräfte“ */
.eins-vsbedarf{display:block;font-size:10.5px;font-weight:650;color:#F7D0A1;margin-top:1px}

/* Menü „…“ in der Kalender-Leiste: so breit wie sein Inhalt, rechtsbündig —
   bei 220 px brachen „Wochenplan Mitarbeiter“ und „Personal“ mitten im Wort. */
.eins-recht details.menue .menue-liste{width:max-content;max-width:min(360px,calc(100vw - 24px));left:auto;right:0}
.eins-recht details.menue .menue-e small{white-space:nowrap}

/* Team eines Tages auswählen (Dialog) */
.wp-teamdlg{max-width:620px;width:calc(100vw - 24px)}
.wp-dlgtermine{display:flex;flex-wrap:wrap;gap:6px 10px;margin:4px 0 12px;font-size:12.5px;font-weight:600;color:var(--tinte)}
.wp-dlgtermin{display:inline-flex;align-items:center;gap:5px}
.wp-dlgkopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.wp-dlgstart{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:650;color:var(--tinte-2)}
.wp-dlgstart .feld{width:auto;margin:0;padding:6px 8px}
.wp-dlgzahl{font-size:13px;color:var(--tinte-2)}
.wp-dlgzahl.wp-knapp{color:#F7D0A1}
.wp-dlgliste{display:flex;flex-direction:column;border-top:1px solid var(--linie)}
.wp-dlgzeile{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.wp-dlgname{font-size:13.5px;font-weight:650;color:var(--tinte)}
.wp-dlgname small{font-style:normal;font-size:10.5px;font-weight:750;color:#F7D0A1;background:rgba(255,206,112,0.176);border-radius:4px;padding:1px 5px;margin-left:4px}
.wp-stufen{display:inline-flex;gap:4px}
.wp-stufe{border:1px solid var(--linie);background:#0F1E2D;border-radius:8px;padding:5px 9px;font:inherit;font-size:12.5px;font-weight:650;
  color:var(--tinte-2);cursor:pointer;min-height:32px}
.wp-stufe:hover{border-color:var(--linie-satt);background:var(--flaeche-2)}
.wp-stufe.an.s-1{background:#0D2B52;border-color:#84B1EB;color:#fff}
.wp-stufe.an.s-f{background:#1B3048;border-color:#5F6B7A;color:#BACADE}
.wp-stufe.an.s-k{background:rgba(237,130,130,0.155);border-color:#B24242;color:#EDABAB}
.wp-stufe.an.s-U{background:rgba(255,206,112,0.176);border-color:#C58B2A;color:#F7D7A1}
.wp-dlgweitere{margin-top:10px}
.wp-dlgweitere summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--tinte-2);padding:4px 0}
@media (max-width:600px){ .wp-stufe{padding:6px 7px;font-size:12px} .wp-dlgzeile{gap:4px} }
/* ============================================================================
   Bedienung: Knopf-Zustände, Fokus, Felder, Tastatur, Touch, Übergänge
   (Punkt 575). Kommt nach allen Modulen und gilt für jede Ansicht.

   Löst seit dem 12.10.2026 die Formsprache „Facetten“ (06-form.css) ab:
   keine schrägen Flächen, keine harten Versatzschatten, kein Puls auf
   großen Flächen. Geblieben ist alles, was die Bedienung trägt.

   Regeln, gemessen vom Prüflauf (probe_bedienung.py):
     - Text mindestens 4,5:1, Bedienelemente und Fokusrahmen mindestens 3:1
     - Fokus immer sichtbar: gelber Rahmen mit dunklem Hof, steht auf Navy,
       auf Cyan und auf der weißen Unterschriftsfläche
     - Touch-Ziele mindestens 44 × 44 px auf Handy und Tablet
     - Bewegung nur mit data-effekte="voll" (Übergänge, Zählen, Atmen);
       „ruhig“ nur kurze Übergänge; „aus“ gar nichts. Kein Blinken, nichts
       schneller als einmal pro Sekunde, keine großflächigen Helligkeitswechsel.
   ========================================================================== */

:root{
  --fokus:#FFD66B;
  --fokus-hof:rgba(4,10,16,.9);
}
nav.handy{z-index:30}

/* ------------------------------------------------------------ Knöpfe
   Zustände für jeden Knopf: Standard, Zeiger darüber, Fokus, gedrückt,
   gesperrt (gestreift, mit Grund im title), lädt (aria-busy, „Läuft …“,
   gesperrt gegen Doppeltipp), Fehler (roter Rahmen, Meldung). */
.btn{border-radius:12px;font-weight:650;letter-spacing:.005em;
  transition:transform .14s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}
/* Der eine Leitakzent: Cyan mit dunkler Schrift. */
.b-haupt,.b-senden{background:var(--marke);color:var(--auf-farbe);border-color:var(--marke)}
.b-haupt:hover,.b-senden:hover{background:#8BE2FF;border-color:#8BE2FF;filter:none;
  box-shadow:0 8px 26px -8px rgba(79,209,255,.65)}
.b-frei{background:var(--gruen);color:var(--auf-farbe);border-color:var(--gruen)}
.b-frei:hover{filter:none;box-shadow:0 8px 24px -10px rgba(110,231,168,.6);background:#9AF0C4;border-color:#9AF0C4}
/* Test und Probe: dieselbe Farbe als Rand, nicht als Fläche — ein Test ist
   nie der Hauptknopf. */
.b-test{background:rgba(79,209,255,.10);color:var(--marke-tief);border-color:var(--marke)}
.b-test:hover{background:rgba(79,209,255,.18);filter:none}
.b-haupt:active,.b-senden:active,.b-frei:active,.b-test:active{transform:translateY(1px);box-shadow:none}
.b-zurueck,.b-still{background:transparent;color:var(--tinte);border-color:var(--kante)}
.b-zurueck:hover,.b-still:hover{border-color:var(--marke);background:var(--marke-weich);filter:none}
.b-aendern{background:transparent;color:var(--amber);border-color:var(--amber-linie)}
.b-aendern:hover{background:var(--amber-bg);border-color:var(--amber)}
.b-storno{background:transparent;color:var(--rot);border-color:var(--rot-linie)}
.b-storno:hover{background:var(--rot-bg);border-color:var(--rot)}
.b-zurueck:active,.b-still:active,.b-aendern:active,.b-storno:active{transform:translateY(1px)}
/* Ein .btn ohne Farbklasse wäre Text auf Navy ohne Kante: er bekommt die
   Form des Zweitknopfs. */
.btn:not(.b-haupt):not(.b-senden):not(.b-frei):not(.b-test):not(.b-aendern):not(.b-zurueck):not(.b-still):not(.b-storno){
  background:transparent;color:var(--tinte);border-color:var(--kante)}
.kopf-knopf{border-color:var(--kante)}
.kopf-knopf:hover{border-color:var(--marke)}
.segment{border-color:var(--kante-leise)}
.filter button{border-color:var(--kante-leise)}
.btn[disabled],.btn.aus,button[disabled]{cursor:not-allowed;box-shadow:none !important;transform:none !important;
  background:repeating-linear-gradient(-45deg,#15283A 0 6px,#1A2F44 6px 12px) !important;color:#9DB0C3 !important;
  border-color:#3D556E !important}
.laedt-knopf,[aria-busy="true"]{cursor:progress !important;position:relative}
.laedt-knopf::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;flex:0 0 auto;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-1px}
@keyframes knopf-drehen{to{transform:rotate(360deg)}}
html:not([data-effekte="aus"]) .laedt-knopf::after{animation:knopf-drehen 1s linear infinite}
.knopf-fehler{outline:3px solid var(--rot) !important;outline-offset:2px}
@keyframes knopf-wackeln{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
html[data-effekte="voll"] .knopf-fehler{animation:knopf-wackeln .4s ease-in-out 1}

/* Fokus: gelb mit dunklem Hof (Gelb 12:1 auf Navy, über 3:1 auf Cyan). */
:focus-visible{outline:3px solid var(--fokus) !important;outline-offset:3px !important;
  box-shadow:0 0 0 7px var(--fokus-hof) !important;border-radius:6px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:1px !important;
  box-shadow:0 0 0 6px var(--fokus-hof) !important}

/* ------------------------------------------------------------ Felder
   Der Rand muss das Feld zeigen (≥ 3:1), nicht nur andeuten. */
.feld,textarea,select,input[type=text],input[type=search],input[type=number],input[type=date],input[type=email],
input[type=tel],input[type=password],input[type=time],input[type=month],input[type=url],input:not([type]),.suche input,.kl-feld textarea{
  border-color:var(--kante) !important;background-color:var(--flaeche-2);color:var(--tinte)}
.feld:focus,textarea:focus,select:focus,.suche input:focus{border-color:var(--marke) !important;background-color:var(--flaeche-2)}
select option{background:var(--flaeche);color:var(--tinte)}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--marke)}
input[type=file]{color:var(--tinte-2)}
.menue-e small{color:var(--grau)}
input::placeholder,textarea::placeholder{color:var(--grau);opacity:1}
::selection{background:rgba(79,209,255,.32);color:#fff}

/* Sprungmarke für die Tastatur: unsichtbar, bis sie den Fokus hat. */
.sprung{position:absolute;left:12px;top:-60px;z-index:100;background:var(--marke);color:var(--auf-farbe);font-weight:750;
  padding:12px 18px;border-radius:12px;text-decoration:none}
.sprung:focus{top:12px}
main.inhalt{display:block;outline:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------ Klären
   Die Karte als ruhige Fläche mit dem Leitakzent am Rand; Schritte als
   Pillen, der aktuelle in Cyan. */
.kl-karte{border:1px solid var(--linie-satt);border-left:4px solid var(--marke);border-radius:var(--radius-gross);
  box-shadow:var(--schatten-hoch)}
.kl-karte.kl-pruef{border-left-color:var(--lila)}
.kl-thema{font-weight:700;letter-spacing:-.015em}
.kl-s{border:1px solid var(--linie-satt);background:var(--flaeche-2);color:var(--tinte-2)}
.kl-empf{border:1px solid var(--amber-linie);border-left:3px solid var(--amber);border-radius:12px;background:var(--amber-weich)}
.kl-empf-wort{color:var(--amber)}
.kl-ergebnis{border:1px solid var(--gruen-linie);border-radius:var(--radius-gross)}

/* Kennzahl der früheren Startseite (startTrend, in „Ganze Übersicht“ nicht
   mehr gezeigt, Prüfläufe rufen sie noch). */
.tr-leiste{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 16px;padding:10px 16px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross)}
.tr-heute-zahl{display:flex;align-items:baseline;gap:7px}
.tr-heute-zahl b{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--tinte);font-variant-numeric:tabular-nums}
.tr-heute-zahl b.tr-gut{color:var(--gruen)}
.tr-heute-zahl b.tr-mehr{color:var(--rot)}
.tr-heute-zahl span{font-size:13px;color:var(--tinte-2)}
.tr-verlauf{display:flex;align-items:flex-end;gap:12px;margin-left:auto}
.tr-verlauf svg{display:block;overflow:visible}
.tr-s{fill:rgba(169,186,203,.4)}
.tr-s.tr-heute{fill:var(--marke)}
.tr-text{font-size:13px;color:var(--tinte-2)}
.tr-text b{color:var(--tinte)}
@media (max-width:640px){ .tr-verlauf{margin-left:0;flex-wrap:wrap} .tr-leiste{gap:12px} }

/* Effekte: der Knopf im Kopf (schaltet weiter) und das Segment der früheren
   Startseite. Auf der Startseite steht der Schalter an/aus (07-zentrale). */
.rh-schalter{align-items:center;gap:12px;flex-wrap:wrap}
.eff-schalter{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--kante-leise);
  border-radius:12px;background:transparent;margin-right:auto}
.eff-titel{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);padding:0 8px 0 6px}
.eff-schalter button{border:0;background:none;font:inherit;font-size:13.5px;font-weight:650;color:var(--tinte-2);
  padding:6px 12px;border-radius:9px;cursor:pointer;min-height:36px}
.eff-schalter button:hover{background:var(--marke-weich);color:var(--tinte)}
.eff-schalter button.an{background:var(--tinte);color:var(--grund)}
.effekte-knopf{width:auto;min-width:36px;padding:0 10px;gap:6px;border-radius:999px}
.effekte-knopf svg{width:18px;height:18px}
.eff-wort{font-size:12.5px;font-weight:650}

/* ------------------------------------------------------------ Übergänge
   Beim Wechsel der Ansicht gleitet der Inhalt kurz ein („voll“) oder
   blendet nur ein („ruhig“). Nichts kippt, nichts schwingt nach. */
@keyframes ansicht-voll{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes ansicht-ruhig{0%{opacity:0}100%{opacity:1}}
html[data-effekte="voll"] .ansicht-neu{animation:ansicht-voll .36s cubic-bezier(.2,.8,.2,1) both}
html[data-effekte="ruhig"] .ansicht-neu{animation:ansicht-ruhig .18s ease-out both}
html[data-effekte="voll"] .ansicht-neu .kl-karte{animation:ansicht-voll .45s cubic-bezier(.2,.8,.2,1) both}
/* Karten heben sich unter dem Zeiger um einen Pixel (nur „voll“). */
html[data-effekte="voll"] .karte.klick:hover{transform:translateY(-1px)}

/* „aus“: nichts bewegt sich. */
html[data-effekte="aus"] *,html[data-effekte="aus"] *::before,html[data-effekte="aus"] *::after{
  animation:none !important;transition:none !important;scroll-behavior:auto !important}
html[data-effekte="aus"] .karte.klick:hover,html[data-effekte="aus"] .rh-eintrag:hover{transform:none}

/* ------------------------------------------------------------ Touch
   Handy und Tablet bis iPad quer (1180 px): jedes Bedienelement mindestens 44 × 44 px. Am
   Schreibtisch mit Maus bleiben die Tabellen dicht. */
@media (pointer:coarse),(max-width:1180px){
  /* !important: einzelne Module setzen min-height/min-width enger (Tabellen,
     Kalender, Tagpillen) — auf Touch-Geräten geht die Fingergröße vor. */
  button,.btn,a.btn,summary,[role=button],.chip,select,.menue-e,.segment button,.filter button,
  .unterleiste button,nav.handy button,.nav-punkt,.eff-schalter button,.zurueck,.pdf{min-height:44px !important}
  button,.btn,a.btn,summary,[role=button],.chip,.segment button,.filter button,.eff-schalter button{min-width:44px !important}
  .kopf-knopf,details.menue>summary.rund{width:44px;height:44px}
  .effekte-knopf{width:auto}
  .btn.klein{min-height:44px;padding:8px 13px}
  .chip{padding:8px 12px}
  input[type=checkbox],input[type=radio]{width:24px;height:24px}
  .kl-mehr summary,.rh-details summary{min-height:44px;display:flex;align-items:center}
  .menue-e{padding:10px 12px}
  td button,td .btn{min-height:44px}
  /* Zellen des Einsatzplans sind Tabellenzellen: min-height wirkt dort nicht, height schon. */
  td.eins-zelle{height:44px}
}
@media (max-width:640px){
  .eff-schalter{margin-right:0}
  /* Leiste: zwei beschriftete Knöpfe rechts (Personal: „Mitarbeiter
     onboarden“, „Vorfall erfassen“) lagen über dem Umschalter links — der
     Prüflauf meldete sie als verdeckt. Rechts darf umbrechen und eine eigene
     Zeile nehmen, links scrollt waagerecht statt zu überlappen. */
  .leiste{flex-wrap:wrap !important}
  .pers-leiste .leiste-r{grid-column:1 / -1;grid-row:2;justify-self:end}
  .pers-leiste .filter{grid-row:3}
  .leiste-r{max-width:100%;flex-wrap:wrap;justify-content:flex-end}
  .leiste-l{overflow-x:auto;overscroll-behavior-x:contain}
  .rh-schalter{justify-content:space-between}
  .kl-karte{border-left-width:4px}
}
/* ============================================================================
   Thema „Steuerzentrale“ — von Schero am 12.10.2026 abgenommen („Design ja“,
   Punkt 575) und auf alle Ansichten übertragen. Löst die Formsprache
   „Facetten“ ab.

   Die Farben stehen als Variablen in 01-grund.css (eine Quelle für alle
   Module). Hier stehen: Seitenleiste, Kopf und Handy-Leisten im Navy, die
   Startseite (js-04h) und am Ende die Bausteine aller Ansichten (Tabellen,
   Dialoge, Menüs, Formulare, Marken), damit keine helle Insel bleibt.

   Regeln, gemessen (probe_bedienung.py, Kontrastprüfung):
     Text            --tinte 16:1, --tinte-2 ≥ 7:1, --grau ≥ 5,5:1
                     auf Grund und Fläche
     Bedienelemente  Rand --kante ≥ 4:1, Leitakzent als Fläche mit dunkler
                     Schrift (≥ 9:1)
     Ziele           mindestens 44 × 44 px auf Handy und Tablet
     Fokus           Gelb mit dunklem Hof, steht auf jeder Fläche
     Bewegung        nur mit data-effekte="voll": Zahlen zählen beim Öffnen
                     (js-04h), der Punkt eines laufenden Ablaufs atmet
                     (2,4 s), Abschnitte gleiten beim Öffnen ein. „aus“ und
                     prefers-reduced-motion ohne eigene Wahl: nichts bewegt sich.
   ========================================================================== */

/* ------------------------------------------------------------ Grund */
html,body{background-color:var(--zt-grund)}
body{color:var(--zt-text);
  background-image:radial-gradient(1200px 520px at 78% -8%,rgba(79,209,255,.07),rgba(79,209,255,0) 70%);
  background-repeat:no-repeat}

/* Seitenleiste (Schreibtisch, iPad quer): ruhiges Navy, die Auswahl ist ein
   Lichtstreifen am Rand statt einer gekippten Fläche. */
html aside.seite{background:var(--zt-grund-2);border-right:1px solid var(--zt-linie)}
html aside.seite::after{display:none}
html .seite-fuss{background:var(--zt-grund-2);border-top-color:var(--zt-linie)}
html .firma{border-bottom-color:var(--zt-linie)}
html .nav-punkt{color:var(--zt-text-2)}
html .nav-punkt:hover{background:rgba(255,255,255,.05);color:var(--zt-text)}
html .nav-punkt.an{background:rgba(79,209,255,.12);color:#fff}
html .nav-punkt.an::before{inset:7px auto 7px 0;width:3px;background:var(--zt-akzent);
  border-radius:0 3px 3px 0;transform:none;box-shadow:0 0 12px var(--zt-akzent-hof)}
html .nav-punkt .zahl-marke{background:#22384F;color:var(--zt-text)}
html .nav-punkt .zahl-marke.warn{background:#B31E36;color:#fff}

/* Kopf */
html .kopf{background:rgba(10,21,32,.86);border-bottom-color:var(--zt-linie)}
html .kopf h1{color:var(--zt-text);background:none;font-weight:650}
html .kopf .kopf-sub{color:var(--zt-text-3)}
html .kopf-knopf{background:transparent;color:var(--zt-text);border-color:var(--zt-kante)}
html .kopf-knopf:hover{border-color:var(--zt-akzent);background:rgba(79,209,255,.08)}
html .kopf-knopf.ich{background:#1B3048;color:var(--zt-text);border-color:var(--zt-kante)}
html .kopf-knopf.auge.an{background:rgba(79,209,255,.14);color:var(--zt-akzent);border-color:var(--zt-akzent)}
html details.menue[open]>summary.kopf-knopf{border-color:var(--zt-akzent);color:var(--zt-akzent)}
/* Der Effekte-Knopf im Kopf ist auf der Startseite doppelt: der Schalter steht dort in der Seite. */
html[data-ansicht="dashboard"] .kopf .effekte-knopf{display:none}

/* Handy und iPad hoch */
@media (max-width:900px){
  html .handy-kopf{background:var(--zt-grund-2);border-bottom:1px solid var(--zt-linie)}
  html .unterleiste{background:var(--zt-grund);border-bottom-color:var(--zt-linie)}
  html .unterleiste button{background:transparent;color:var(--zt-text);border-color:var(--zt-kante-leise)}
  html .unterleiste button.an{background:var(--zt-text);color:var(--zt-grund);border-color:var(--zt-text)}
  html .unterleiste button .zahl-marke{background:#22384F;color:var(--zt-text)}
  html .kopf{background:var(--zt-grund)}
  html nav.handy{background:rgba(13,26,39,.97);border-top-color:var(--zt-linie);
    box-shadow:0 -8px 24px rgba(0,0,0,.35)}
  html nav.handy button{color:var(--zt-text-3)}
  html nav.handy button.an{color:var(--zt-akzent)}
  html nav.handy button.an::before{background:var(--zt-akzent);box-shadow:0 0 10px var(--zt-akzent-hof)}
  html nav.handy .punkt{background:#2D4762;box-shadow:0 0 0 2px var(--zt-grund-2)}
  html nav.handy .punkt.warn{background:#B31E36}
}

/* Fokus: gelber Rahmen mit dunklem Hof — auf Navy, Cyan und Weiß sichtbar. */
html :focus-visible{outline:3px solid #FFD66B !important;outline-offset:3px !important;
  box-shadow:0 0 0 7px rgba(4,10,16,.9) !important}

/* ------------------------------------------------------------ Seite */
.zt{display:flex;flex-direction:column;gap:30px;max-width:1240px;color:var(--zt-text)}
.zt-ueber{margin:0 0 6px;font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--zt-text-3)}
.zt-ziffer{font-variant-numeric:tabular-nums}
.zt svg{flex:0 0 auto}

/* Lage */
.zt-lage{display:flex;flex-direction:column;gap:18px}
.zt-lage-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}
.zt-lage-l{min-width:0}
.zt-gruss{margin:0;font-size:32px;line-height:1.12;font-weight:700;letter-spacing:-.025em;color:var(--zt-text)}
.zt-status{margin:10px 0 0;display:flex;align-items:center;gap:11px;font-size:14px;color:var(--zt-text-2)}
.zt-steuer{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Punkt für „läuft“: ein ruhiger Kern, bei Effekte an ein Ring, der langsam
   ausatmet (2,4 s, kein Blinken, keine Helligkeitssprünge). */
.zt-puls{position:relative;flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:#5E7690}
.zt-puls.an{background:var(--zt-akzent);box-shadow:0 0 10px var(--zt-akzent-hof)}
.zt-puls.zt-warn{background:var(--zt-block)}
.zt-puls::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0}
@keyframes zt-atmen{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.7);opacity:0}100%{transform:scale(2.7);opacity:0}}
html[data-effekte="voll"] .zt-puls.an::after{animation:zt-atmen 2.4s ease-out infinite !important}

/* Effekte-Schalter */
.zt-schalter{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 10px;border-radius:12px;
  border:1px solid var(--zt-kante-leise);background:transparent;color:var(--zt-text);font:inherit;font-size:14px;
  font-weight:600;cursor:pointer}
.zt-schalter:hover{border-color:var(--zt-akzent)}
.zt-spur{position:relative;width:38px;height:22px;border-radius:999px;background:#2A4158;border:1px solid var(--zt-kante);
  transition:background .2s ease}
.zt-spur i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--zt-text-2);
  transition:transform .2s ease,background .2s ease}
.zt-schalter[aria-checked="true"] .zt-spur{background:rgba(79,209,255,.3);border-color:var(--zt-akzent)}
.zt-schalter[aria-checked="true"] .zt-spur i{transform:translateX(16px);background:var(--zt-akzent)}

/* Meine Liste / Alle */
.zt-liste-wahl .segment{display:inline-flex;gap:2px;padding:3px;border-radius:12px;border:1px solid var(--zt-kante-leise);
  background:transparent}
.zt-liste-wahl .segment button{min-height:38px;min-width:44px;padding:0 14px;border:0;border-radius:9px;background:transparent;
  color:var(--zt-text-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.zt-liste-wahl .segment button:hover{color:var(--zt-text);background:rgba(255,255,255,.06)}
.zt-liste-wahl .segment button.an{background:var(--zt-text);color:var(--zt-grund)}

/* Kennzahlen */
.zt-kpi{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
.zt-k{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:44px;
  padding:18px 20px 16px;text-align:left;font:inherit;color:var(--zt-text);cursor:pointer;
  background:var(--zt-flaeche);border:1px solid var(--zt-kante-leise);border-radius:18px;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.zt-k-geld::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;
  background:linear-gradient(90deg,rgba(79,209,255,0),var(--zt-akzent),rgba(79,209,255,0));opacity:.9}
.zt-k-label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--zt-text-3)}
.zt-k-punkt{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.zt-p-geld{background:var(--zt-geld)} .zt-p-frist{background:var(--zt-frist)} .zt-p-block{background:var(--zt-block)}
.zt-k-wert{font-size:40px;line-height:1.05;font-weight:650;letter-spacing:-.03em;color:var(--zt-text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.zt-k-sub{font-size:13.5px;line-height:1.4;color:var(--zt-text-2)}
.zt-k-geh{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--zt-text-2)}
.zt-k-geh svg{width:14px;height:14px;transform:rotate(180deg)}
.zt-k:hover{border-color:var(--zt-akzent);background-color:var(--zt-flaeche-2)}
.zt-k:hover .zt-k-geh{color:var(--zt-akzent)}
.zt-k:active{transform:translateY(1px)}

/* Heute */
.zt-heute{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zt-h{display:inline-flex;align-items:baseline;gap:8px;min-height:48px;padding:10px 16px;border-radius:14px;
  border:1px solid var(--zt-kante-leise);background:transparent;color:var(--zt-text);font:inherit;cursor:pointer;
  text-align:left;transition:border-color .18s ease,background-color .18s ease}
.zt-k,.zt-z,.zt-r{text-align:left}
.zt-h b{font-size:22px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.zt-h span{font-size:13.5px;color:var(--zt-text-2)}
.zt-h:hover{border-color:var(--zt-akzent);background:rgba(79,209,255,.06)}
.zt-verlauf{margin-left:auto;display:flex;align-items:center;gap:12px;padding:4px 2px}
.zt-verlauf svg{display:block;overflow:visible}
.zt-verlauf>span{display:flex;flex-direction:column;gap:1px;font-size:13px;color:var(--zt-text-2)}
.zt-verlauf b{font-size:14.5px;color:var(--zt-text);font-weight:650}
.zt-verlauf i{font-style:normal}
.zt-s{fill:rgba(169,186,203,.4)}
.zt-s-heute{fill:var(--zt-akzent)}

/* Direktzugang */
.zt-direkt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.zt-d{display:flex;align-items:center;gap:14px;min-height:76px;padding:16px 18px;text-align:left;font:inherit;cursor:pointer;
  color:var(--zt-text);background:var(--zt-flaeche);border:1px solid var(--zt-kante-leise);border-radius:18px;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.zt-d:hover{border-color:var(--zt-akzent);background-color:var(--zt-flaeche-2)}
.zt-d:active{transform:translateY(1px)}
.zt-d-zeichen{flex:0 0 44px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(79,209,255,.12);color:var(--zt-akzent)}
.zt-d-zeichen svg{width:22px;height:22px}
.zt-d-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.zt-d-text b{font-size:16.5px;font-weight:650;letter-spacing:-.01em}
.zt-d-text>span{font-size:14px;color:var(--zt-text-2);font-variant-numeric:tabular-nums}
.zt-d-text i{font-style:normal;font-size:13px;color:var(--zt-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zt-d-pfeil{color:var(--zt-text-3)}
.zt-d-pfeil svg{width:18px;height:18px;transform:rotate(180deg);display:block}
.zt-d:hover .zt-d-pfeil{color:var(--zt-akzent)}

/* Bereiche */
.zt-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.zt-spalte{display:flex;flex-direction:column;gap:30px;min-width:0}
@media (min-width:1100px){
  .zt-raster{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:28px}
}
.zt-bereich{display:flex;flex-direction:column;gap:14px;outline:0}
.zt-bkopf{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap}
.zt-bkopf h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.015em;color:var(--zt-text)}
.zt-anzahl{font-size:14px;font-weight:650;color:var(--zt-text);background:rgba(255,255,255,.08);border-radius:999px;
  padding:2px 10px;font-variant-numeric:tabular-nums}
.zt-bhinweis{flex:1 1 100%;font-size:13px;color:var(--zt-text-3)}
.zt-bfuss{display:flex;gap:10px;flex-wrap:wrap}
.zt-leer{display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:16px;border:1px dashed var(--zt-linie-satt);
  color:var(--zt-text-2);font-size:14.5px}
.zt-leer svg{width:20px;height:20px;color:var(--zt-gut)}

/* Knöpfe der Seite */
.zt-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;font:inherit;
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color .16s ease,background-color .16s ease}
.zt-btn svg{width:17px;height:17px}
.zt-btn-zweit{background:rgba(79,209,255,.08);color:var(--zt-text);border:1px solid var(--zt-akzent)}
.zt-btn-zweit:hover{background:rgba(79,209,255,.16)}
.zt-btn-still{background:transparent;color:var(--zt-text);border:1px solid var(--zt-kante-leise)}
.zt-btn-still:hover{border-color:var(--zt-akzent);background:rgba(79,209,255,.06)}
/* Der eine Aktionsknopf je Karte (ruhigKnopf/akKnopf aus js-04e): Leitakzent. */
.zt .btn{border-radius:12px;box-shadow:none;transform:none}
.zt .btn.rh-tat,.zt a.btn.rh-tat{min-height:48px;padding:0 20px;font-size:15px;font-weight:650;gap:8px;
  background:var(--zt-akzent);color:var(--zt-akzent-schrift);border:1px solid var(--zt-akzent);
  box-shadow:0 6px 22px -8px rgba(79,209,255,.55);transition:background-color .16s ease,box-shadow .16s ease}
.zt .btn.rh-tat svg{width:17px;height:17px}
.zt .btn.rh-tat:hover{background:var(--zt-akzent-hell);border-color:var(--zt-akzent-hell);filter:none;transform:none;
  box-shadow:0 8px 28px -6px rgba(79,209,255,.7)}
.zt .btn.rh-tat:active{transform:translateY(1px);box-shadow:0 2px 10px -4px rgba(79,209,255,.6)}
.zt .btn.b-zurueck,.zt .btn.b-still{background:transparent;color:var(--zt-text);border-color:var(--zt-kante-leise);min-height:44px}
.zt .btn.b-zurueck:hover,.zt .btn.b-still:hover{border-color:var(--zt-akzent);background:rgba(79,209,255,.06)}

/* Entscheidung */
.zt-ent-liste{display:flex;flex-direction:column;gap:14px}
.zt-ent{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px 20px 16px 22px;
  background:var(--zt-flaeche);border:1px solid var(--zt-linie);border-radius:20px;transition:border-color .18s ease}
.zt-ent:hover{border-color:var(--zt-linie-satt)}
.zt-ent::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:#5E7690}
.zt-rang-0::before{background:var(--zt-geld)}
.zt-rang-1::before{background:var(--zt-frist)}
.zt-rang-2::before{background:var(--zt-block)}
.zt-ent-kopf{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.zt-chip{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:7px}
.zt-c-geld{color:var(--zt-geld);background:rgba(127,224,176,.12)}
.zt-c-frist{color:var(--zt-frist);background:rgba(255,176,154,.12)}
.zt-c-block{color:var(--zt-block);background:rgba(242,203,116,.12)}
.zt-c-offen{color:var(--zt-text-2);background:rgba(255,255,255,.07)}
.zt-ent-art{font-size:13px;color:var(--zt-text-3)}
.zt-ent-betrag{margin-left:auto;font-size:17px;font-weight:650;color:var(--zt-text);font-variant-numeric:tabular-nums}
.zt-ent-titel{margin:0;font-size:18px;line-height:1.3;font-weight:650;letter-spacing:-.01em;color:var(--zt-text)}
.zt-fakten{margin:0;display:grid;gap:10px}
.zt-fakten>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px}
.zt-fakten dt{font-size:11.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--zt-text-3);padding-top:3px}
.zt-fakten dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--zt-text-2)}
.zt-fakten .zt-empf dd{color:var(--zt-text);font-weight:550}
.zt-ent-versand{display:flex}
.zt-ent-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px}
/* Details (ruhigDetails aus js-04e) */
.zt .rh-details{margin-left:auto;font-size:13.5px}
.zt .rh-details summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;
  border:1px solid var(--zt-kante-leise);color:var(--zt-text);font-weight:600;cursor:pointer;list-style:none}
.zt .rh-details summary:hover{border-color:var(--zt-akzent)}
.zt .rh-details[open]{flex:1 1 100%;margin-left:0;border-top:1px solid var(--zt-linie);padding-top:10px}
.zt .rh-d-text{color:var(--zt-text-2)}
.zt .rh-d-zeile{color:var(--zt-text-2);align-items:baseline}
.zt .rh-d-zeile>b{color:var(--zt-text-3)}

/* Versandmarken: von uns (Leitakzent, gefüllt) und extern (gestrichelt,
   Lupe) sind nie zu verwechseln. */
.zt-vs{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:8px;font-size:13px;font-weight:600;line-height:1.35}
.zt-vs svg{width:14px;height:14px}
.zt-vs-wir{background:rgba(79,209,255,.14);color:var(--zt-akzent-hell);border:1px solid rgba(79,209,255,.45)}
.zt-vs-extern{background:transparent;color:var(--zt-extern);border:1px dashed rgba(201,184,255,.7)}
.zt-vs-offen{background:rgba(255,255,255,.06);color:var(--zt-text-2);border:1px solid var(--zt-linie-satt)}

/* Abläufe */
.zt-routinen{display:flex;flex-direction:column;border:1px solid var(--zt-linie);border-radius:18px;background:var(--zt-flaeche)}
.zt-r{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:12px 16px;
  border-top:1px solid var(--zt-linie);min-height:60px}
.zt-r:first-child{border-top:0}
.zt-r-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.zt-r-l b{font-size:14.5px;font-weight:650;color:var(--zt-text)}
.zt-r-l>span{font-size:13.5px;color:var(--zt-text-2);line-height:1.4}
.zt-r-zeit{font-size:13px;color:var(--zt-text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.zt-r-tat{grid-column:2 / -1;display:flex;justify-content:flex-start}
.zt-r-tat:empty{display:none}
.zt-befunde{font-size:13.5px}
.zt-befunde summary{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;
  border:1px solid var(--zt-kante-leise);color:var(--zt-text);font-weight:600;cursor:pointer;list-style:none}
.zt-befunde summary:hover{border-color:var(--zt-akzent)}
.zt-befunde[open]{grid-column:1 / -1}
.zt-befunde ul{margin:10px 0 0;padding:0 0 0 18px;color:var(--zt-text-2);line-height:1.5}
.zt-r:has(.zt-befunde[open]) .zt-r-tat{grid-column:2 / -1;justify-content:flex-start}

/* Zeilen (Wartet auf extern, Erledigt, Versand, Wiedervorlagen) */
.zt-zeilen{display:flex;flex-direction:column;border:1px solid var(--zt-linie);border-radius:18px;background:var(--zt-flaeche);overflow:hidden}
.zt-z{display:flex;align-items:center;gap:12px;min-height:56px;padding:11px 16px;border-top:1px solid var(--zt-linie);
  cursor:pointer;transition:background-color .16s ease}
.zt-z:first-child{border-top:0}
.zt-z:hover{background:var(--zt-flaeche-2)}
.zt-z-zeichen{flex:0 0 auto;color:var(--zt-text-3)}
.zt-z-zeichen svg{width:17px;height:17px;display:block}
.zt-z-zeichen.zt-gut{color:var(--zt-gut)}
.zt-z-l{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.zt-z-l b{font-size:14.5px;font-weight:600;color:var(--zt-text);overflow:hidden;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.zt-z-l>span{font-size:13px;color:var(--zt-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zt-z-l>span.zt-z-marke{overflow:visible;white-space:normal;margin-top:4px}
.zt-z-r{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.zt-z-betrag{font-size:14.5px;font-weight:650;color:var(--zt-text);font-variant-numeric:tabular-nums}
.zt-frist{font-size:12.5px;color:var(--zt-text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.zt-frist-ueber{color:var(--zt-block)}
.zt-frist-leer{font-style:italic}
.zt-ohne{font-style:normal;color:var(--zt-block)}
.zt-auto-liste{margin-top:-2px}
.zt-versand{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.zt-versand .zt-ueber{margin:0}

/* Ganze Übersicht: die bisherige Übersicht, im selben dunklen Thema */
.zt-uebersicht{border:1px solid var(--zt-linie);border-radius:18px;background:var(--zt-grund-2)}
.zt-uebersicht>summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 18px;cursor:pointer;list-style:none;color:var(--zt-text)}
.zt-uebersicht>summary::-webkit-details-marker{display:none}
.zt-uebersicht>summary svg{width:18px;height:18px;color:var(--zt-text-3)}
.zt-uebersicht>summary span{display:flex;flex-direction:column;gap:2px}
.zt-uebersicht>summary b{font-size:15px;font-weight:650}
.zt-uebersicht>summary i{font-style:normal;font-size:13px;color:var(--zt-text-3)}
.zt-uebersicht>summary:hover{background:rgba(255,255,255,.03)}
.zt-insel{margin:0 10px 10px;padding:16px 6px 6px;border-radius:14px;color:var(--tinte)}

/* Zuordnen? (startZuordnen aus js-19) im dunklen Thema */
html .zt>.rh-bereich .rh-eintrag{background:var(--zt-flaeche);border-color:var(--zt-linie);color:var(--zt-text)}
html .zt>.rh-bereich .rh-satz,html .zt>.rh-bereich .rh-titel{color:var(--zt-text)}
html .zt>.rh-bereich .rh-empf{color:var(--zt-text-2)}
html .zt>.rh-bereich .rh-empf b,html .zt>.rh-bereich .dash-abschnitt{color:var(--zt-text)}

/* ------------------------------------------------------------ Bewegung
   Beim Öffnen der Seite gleiten die Abschnitte nacheinander ein (nur
   „voll“), bei „ruhig“ nur ein kurzes Einblenden. Der Übergang der
   Facetten-Formsprache (Schräge) gilt hier nicht. */
@keyframes zt-ein{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes zt-ein-ruhig{0%{opacity:0}100%{opacity:1}}
html main.ansicht-neu{animation:none !important}
html[data-effekte="voll"] main.ansicht-neu .zt-block{animation:zt-ein .55s cubic-bezier(.2,.8,.2,1) both !important}
html[data-effekte="voll"] main.ansicht-neu .zt-direkt{animation-delay:.06s !important}
html[data-effekte="voll"] main.ansicht-neu .zt-raster .zt-spalte:first-child .zt-block{animation-delay:.12s !important}
html[data-effekte="voll"] main.ansicht-neu .zt-raster .zt-spalte:last-child .zt-block{animation-delay:.18s !important}
html[data-effekte="voll"] main.ansicht-neu .zt-uebersicht{animation-delay:.24s !important}
html[data-effekte="ruhig"] main.ansicht-neu .zt-block{animation:zt-ein-ruhig .2s ease-out both !important}
@media (prefers-reduced-motion:reduce){
  html:not([data-effekte="voll"]) .zt *{animation:none !important;transition:none !important}
}

/* ------------------------------------------------------------ Geräte */
@media (max-width:1180px){
  .zt-k-wert{font-size:36px}
}
@media (max-width:900px){
  .zt{gap:26px}
  .zt-gruss{font-size:28px}
}
@media (max-width:700px){
  .zt-kpi{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .zt-k-geld{grid-column:1 / -1}
  .zt-k{padding:16px 16px 14px}
  .zt-k-wert{font-size:32px}
  .zt-k-geld .zt-k-wert{font-size:36px}
  .zt-k-sub{font-size:13px}
  .zt-heute{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
  .zt-h{flex-direction:column;align-items:flex-start;gap:1px;padding:10px 12px}
  .zt-h span{font-size:12.5px;line-height:1.3}
  .zt-verlauf{grid-column:1 / -1;margin-left:0;padding:6px 2px 0}
  .zt-direkt{gap:10px}
  .zt-d{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .zt-d-pfeil{display:none}
  .zt-d-text b{font-size:15px}
  .zt-d-text i{white-space:normal}
  .zt-fakten>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .zt-ent{padding:16px 16px 14px 18px}
  .zt-ent-titel{font-size:17px}
  .zt-ent-fuss .btn.rh-tat{flex:1 1 100%;justify-content:center}
  .zt .rh-details{margin-left:0}
  .zt-r{grid-template-columns:10px minmax(0,1fr);padding:12px 14px}
  .zt-r-zeit{grid-column:2}
  .zt-r-tat{grid-column:2;justify-content:flex-start}
  .zt-steuer{width:100%;justify-content:space-between}
  .zt-z{padding:11px 14px}
}
@media (max-width:420px){
  .zt-gruss{font-size:26px}
  .zt-k-wert{font-size:28px}
  .zt-k-geld .zt-k-wert{font-size:34px}
}

/* Kleinteile */
.zt-verdeckt{letter-spacing:.08em;color:var(--zt-text-2)}
.zt-erl .zt-z-l b{white-space:normal}
.zt-vz{min-height:64px}

/* ============================================================ Alle Ansichten
   Die Bausteine aller Module im selben Thema. Die Farben kommen aus den
   Variablen (01-grund.css); hier steht nur, was sich in der Form ändert:
   mehr Luft, ruhigere Ränder, „gewählt“ als helle Fläche mit dunkler
   Schrift, der Leitakzent nur an dem, was man anfasst. */
.inhalt{padding:26px 30px 68px}
.kopf h1{font-weight:650;letter-spacing:-.02em}
.abschnitt{margin-bottom:34px}
.abschnitt-kopf h2{font-size:16px;font-weight:650;letter-spacing:-.01em}
.notiz,.hinweis{color:var(--grau)}
.dash-abschnitt{color:var(--grau)}

/* Karten und Tabellen: Fläche über dem Grund, feiner Rand, Zeiger = Cyan. */
.karte,.tab-huelle{background:var(--flaeche);border-color:var(--linie)}
.karte.klick:hover{border-color:var(--marke);box-shadow:var(--schatten-hoch)}
table.liste thead th{background:var(--flaeche-2);color:var(--grau);border-bottom-color:var(--linie-satt);letter-spacing:.08em}
table.liste tbody td{border-bottom-color:var(--linie)}
table.liste tbody tr:hover{background:rgba(79,209,255,.06)}
table.liste tbody tr.gewaehlt{background:rgba(79,209,255,.10);box-shadow:inset 3px 0 0 var(--marke)}
.tab-fuss{background:var(--flaeche-2);border-top-color:var(--linie)}

/* Gewählt: helle Fläche, dunkle Schrift (Umschalter, Filter, Reiter). */
.segment{background:transparent}
.segment button{color:var(--tinte-2)}
.segment button:hover{color:var(--tinte);background:rgba(255,255,255,.06)}
.segment button.an{background:var(--tinte);color:var(--grund);box-shadow:none}
.segment button b,.segment button.an b{background:#B31E36;color:#fff}
.filter button{background:transparent;color:var(--tinte-2)}
.filter button:hover{border-color:var(--marke);color:var(--tinte);background:var(--marke-weich)}
.filter button.an{background:var(--tinte);color:var(--grund);border-color:var(--tinte)}

/* Dialoge und Menüs: eine Ebene über der Seite. */
dialog{background:var(--flaeche);color:var(--tinte);border:1px solid var(--linie-satt);box-shadow:var(--schatten-dialog)}
dialog::backdrop{background:rgba(2,8,14,.72);backdrop-filter:blur(3px)}
dialog.mailblatt .dlg-btn,.te-dlg .dlg-btn{background:var(--flaeche)}
.menue-liste{background:#132536;border-color:var(--linie-satt)}
.menue-e:hover{background:var(--marke-hell);color:var(--tinte)}
.menue-e:hover svg{color:var(--marke)}

/* Kleinteile */
.zurueck{background:transparent;color:var(--tinte);border-color:var(--kante)}
.zurueck:hover{border-color:var(--marke);background:var(--marke-weich)}
.pdf{background:transparent;color:var(--marke-tief);border-color:var(--kante)}
.pdf:hover{border-color:var(--marke);background:var(--marke-weich)}
.chip{background:var(--marke-hell);color:var(--marke-tief)}
.chip:hover{background:rgba(79,209,255,.2);border-color:rgba(79,209,255,.5)}
.toast{background:#1D3550;color:var(--tinte);border:1px solid var(--marke);box-shadow:0 12px 32px -8px rgba(0,0,0,.6)}
.suche input{background-color:var(--flaeche-2)}
.suche svg{color:var(--grau)}
.leer b{color:var(--tinte)}
/* Die Unterschrift bleibt Papier: weiße Fläche, dunkle Tinte (js-04d). */
.sig-canvas{background:#fff}

/* Versand: „Gesendet von uns“ (Cyan, gefüllt, Senden-Zeichen) und
   „Extern gesendet“ (Lila, gestrichelt) sehen in jeder Ansicht gleich aus —
   Startseite, Rechnungen, Fragen und Klären nutzen dieselben Marken (.zt-vs). */
.zt-vs-wir,.zt-vs-extern,.zt-vs-offen{white-space:normal}

@media (max-width:1180px) and (min-width:901px){
  .inhalt{padding:22px 22px 60px}
}
@media (max-width:900px){
  .inhalt{padding:18px 14px 34px}
}
@media (max-width:900px){
  html .unterleiste button.an .zahl-marke{background:var(--zt-grund);color:var(--zt-text)}
  html .unterleiste button .zahl-marke.warn,html .unterleiste button.an .zahl-marke.warn{background:#B31E36;color:#fff}
}
/* iPad quer (901–1180 px): Rechnungen hatten 8 Spalten mit je 28 px Innenabstand
   und liefen 34 px seitlich hinaus (Prüflauf 12.10.2026). */
@media (max-width:1180px) and (min-width:901px){
  table.liste thead th,table.liste tbody td{padding-left:9px;padding-right:9px}
}