/* Inter, vier Schnitte, mitgeliefert unter app/static/fonts (SIL Open Font License 1.1,
   LICENSE.txt liegt daneben und muss dort bleiben). Latin-Teilmenge mit Umlauten, ss
   und Eurozeichen - mehr braucht diese Oberflaeche nicht.
   Nichts wird aus dem Netz geholt: die Adressen zeigen auf den eigenen Server, und die
   CSP (default-src 'self') laesst genau das zu. Der Rechner laeuft ohne Internet weiter.
   font-display:swap - bis die 24 KB da sind, steht der Text in Segoe UI. Lesen geht vor
   Aussehen; ein leeres Blatt waere der schlechtere Tausch.
   Vier Schnitte, vier Aufgaben: 400 Fliesstext, 500 die fuehrende Zeile einer Liste,
   600 Ueberschriften, Knoepfe und Etiketten, 700 nur echte Betonung (Alarm, Kennzahl). */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/inter-latin-400.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/fonts/inter-latin-500.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/inter-latin-600.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fonts/inter-latin-700.woff2") format("woff2")}

/* Hausfarben nach dem SHALA-Logo: Marineblau mit Gold.
   --gold ist die Markenfarbe (Logo, aktiver Menuepunkt) und NICHT die Warnfarbe;
   dafuer ist --amber da, das bewusst dunkler und roter gehalten ist.

   Gruen, Rot und Amber gibt es zweimal: --green/--red/--amber faerben Flaechen,
   Punkte und Raender, wo 3:1 Kontrast genuegt. Fuer Schrift auf hellem Grund sind
   sie zu hell (Amber kam auf 3,5:1) - dafuer stehen --green-text/--red-text/
   --amber-text bereit, alle ueber 4,5:1. Dieselben Werte tragen schon die
   Etiketten (.tag.amber und Verwandte), die Oberflaeche wird davon nicht bunter.

   --muted war #67778c: auf dem Seitengrund 4,25:1, auf dem Tabellenkopf 4,14:1 -
   unter der Grenze von 4,5:1, und genau dieser Ton traegt die halbe Oberflaeche
   (Beschriftungen, Zweitzeilen, Tabellenkoepfe). Jetzt #5c6c80: 5,0:1 auf dem
   Seitengrund, 4,86:1 auf dem Tabellenkopf, 5,37:1 auf Weiss.

   --line faerbt Trennlinien - Schmuck, kein Bauteil. Der Rand eines Eingabefelds
   sagt dagegen, wo man tippen darf, und braucht 3:1: dafuer --feldrand (3,07:1). */
:root{--navy:#11385b;--navy2:#1b4a72;--blue:#1b5c93;--gold:#f0ba37;--bg:#f4f7fb;--card:#fff;--text:#10233d;--muted:#5c6c80;--line:#dce5ef;--feldrand:#8195ad;--green:#12a36d;--red:#db3b45;--amber:#c07a08;--green-text:#087f56;--red-text:#b32631;--amber-text:#8a5b00;--shadow:0 8px 28px rgba(16,35,61,.08);
  /* Eine Leiter statt Einzelwerte: Wer einen Abstand oder eine Rundung braucht,
     nimmt die naechste Sprosse. Das haelt die Oberflaeche ruhig, auch wenn zehn
     Bereiche zu verschiedenen Zeiten entstehen. */
  --r-klein:8px;--r-mittel:11px;--r-gross:16px;
  /* Schriftleiter, neun Sprossen mit rund 10 % Abstand. Vorher standen 21 Werte im
     Blatt, darunter Paare wie 12/12,5 und 13/13,5, die sich um einen halben Pixel
     unterschieden - auf einer Seite sah das nach Zufall aus, nicht nach Rangfolge.
     mikro  = Etiketten, Tabellenkoepfe, Zaehlmarken
     klein  = Feldbeschriftungen, Hinweise, Zweitzeilen
     dicht  = lange Listen und Tabellen (der haeufigste Wert der Oberflaeche)
     normal = Fliesstext, Eingabefelder, Knoepfe
     mittel = fuehrende Zeile einer Liste, Menuepunkt
     gross  = hervorgehobener Wert
     titel  = Ueberschrift einer Karte oder eines Reiters
     zahl   = Kennzahl zum Ablesen
     seite  = Seitentitel */
  --t-mikro:10.5px;--t-klein:11.5px;--t-dicht:12.5px;--t-normal:13px;
  --t-mittel:14px;--t-gross:15px;--t-titel:17px;--t-zahl:20px;--t-seite:24px;
  --ab-eng:6px;--ab-mittel:10px;--ab-weit:16px}
*{box-sizing:border-box}
/* Ausgeblendet heisst ausgeblendet - auch wenn das Element eine eigene display-Angabe hat. */
[hidden]{display:none!important}
/* ---------------------------------------------------------------- Unterschrift / Inventar */
.signatur{margin-top:10px}
.signatur canvas{display:block;width:100%;max-width:560px;aspect-ratio:3/1;border:2px dashed #b8c6d6;border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}
.signatur-leiste{display:flex;justify-content:space-between;align-items:center;max-width:560px;margin-top:4px;font-size:var(--t-klein)}
.aktion{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px;background:#fbfcfe}
.aktion>summary{font-weight:600;font-size:var(--t-dicht)}
.zeilen-liste>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid #e3e8ef}
.zeilen-liste>div>.wachse{flex:1;min-width:200px}
/* Belegliste: bei dreissig Blaettern ist Fettdruck in jeder Zeile Laerm. Der Titel
   traegt die Zeile ohne Fettdruck, das Datum darunter bleibt klein und grau. */
.beleg-titel{font-weight:500;font-size:var(--t-normal);color:var(--text);letter-spacing:.1px}
/* ---------------------------------------------------------------- Echtbetrieb / Schnellpflege */
.ampel-zeile{display:flex;gap:12px;align-items:center;padding:10px 4px;border-top:1px solid #eef2f6}
.ampel-zeile:first-child{border-top:0}
.ampel-punkt{flex:none;width:12px;height:12px;border-radius:50%;background:var(--green)}
.ampel-zeile.rot .ampel-punkt{background:var(--red);box-shadow:0 0 0 4px #fdebed}
.ampel-zeile .wachse{flex:1;min-width:0}
.ampel-zeile .btn{flex:none;min-width:84px}
.ampel-wert{font-size:var(--t-dicht);font-weight:600;white-space:nowrap;width:220px;text-align:right;overflow:hidden;text-overflow:ellipsis}
.ampel-zeile.ok .ampel-wert{margin-right:96px}
.ampel-zeile.rot .ampel-wert{color:#8f1d26}
/* Symbole (siehe _symbole.html): Umriss in der Textfarbe, Fuellung ein heller
   Schimmer derselben Farbe. So bleiben sie im aktiven Reiter blau, im ruhenden grau -
   ein zweifarbiges Bild, ohne dass es bunt wird. */
.sym{flex:none;vertical-align:-4px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sym .voll{fill:currentColor;fill-opacity:.14}
.sym-titel{display:inline-flex;align-items:center;gap:10px}
.reiter-leiste a{display:inline-flex;align-items:center;gap:7px}
.reiter-leiste a .sym{opacity:.85}
.reiter-leiste a.aktiv .sym{opacity:1}
.reiter-leiste{display:flex;gap:4px;flex-wrap:wrap;margin:18px 0 0;border-bottom:2px solid var(--line);position:sticky;top:0;z-index:20;background:var(--bg)}
.reiter-leiste a{padding:10px 14px;font-weight:600;font-size:var(--t-normal);color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:8px 8px 0 0}
.reiter-leiste a:hover{color:var(--text);background:#eef3f9}
.reiter-leiste a.aktiv{color:var(--blue);border-bottom-color:var(--blue);background:#fff}
.reiter-zahl{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--red);color:#fff;font-size:var(--t-klein);text-align:center}
.reiter-zahl.grau{background:#8a97a6}
.einrichtung-hinweis{display:flex;gap:10px;align-items:center;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#fdebed;border:1px solid #f3c2c7;color:#8f1d26;text-decoration:none;font-size:var(--t-normal)}
.einrichtung-hinweis .ampel-punkt{background:var(--red)}
.einrichtung-hinweis span:last-child{margin-left:auto;font-weight:700}
.schnellpflege td{vertical-align:middle}
.schnellpflege input{padding:5px 6px;font-size:var(--t-dicht)}
.schnellpflege input.fehlt{border-color:#e7a3a9;background:#fff6f7}
.schnellpflege-fuss{position:sticky;bottom:0;background:#fff;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 0 2px;border-top:1px solid var(--line);margin-top:8px}
/* ---------------------------------------------------------------- Vertrieb */
.kopf-filter{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.kopf-filter select,.kopf-filter input{width:auto;padding:7px 9px;font-size:var(--t-normal)}
.pipeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.pipe{position:relative;display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px 12px;text-decoration:none;color:var(--text);border-top:4px solid #8a97a6;transition:box-shadow .15s,transform .15s}
.pipe:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.pipe:not(:last-child)::after{content:"›";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:#b8c6d6;font-size:var(--t-zahl);z-index:1}
.pipe-anfragen{border-top-color:#7c5cd6}.pipe-entwurf{border-top-color:var(--amber)}.pipe-offen{border-top-color:var(--blue)}
.pipe-angenommen{border-top-color:var(--green)}.pipe-verloren{border-top-color:#c9a2a6}
.pipe-label{font-size:var(--t-klein);text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600}
.pipe-zahl{font-size:var(--t-seite);font-weight:700;line-height:1.1;margin-top:4px}
.pipe-summe{font-size:var(--t-normal);font-weight:600}
.pipe-hinweis{font-size:var(--t-klein);color:var(--muted);margin-top:2px}
.vertrieb-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
.vertrieb-raster.drei{grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr)}
.kompakt-tabelle td.r,.kompakt-tabelle th.r{white-space:nowrap}
.kompakt-tabelle td:first-child strong{white-space:nowrap}
.todo-liste{margin-top:8px}
/* Erste Spalte `auto` statt fester 12px: die Ampel ist selbst 12px breit, das Raster
   bleibt also gleich. Zeilen ohne Ampelpunkt (oder mit einem Knopf davor) quetschen
   ihren Inhalt aber nicht mehr in eine 12px-Spalte und ueberlappen den Namen. */
.todo{display:grid;grid-template-columns:auto 150px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 6px;border-top:1px solid #eef2f6;text-decoration:none;color:var(--text);border-radius:8px}
.todo:hover{background:#f5f8fc}
.todo .ampel-punkt{background:var(--amber)}
.todo.rot .ampel-punkt{background:var(--red);box-shadow:0 0 0 3px #fdebed}
.todo-art{font-size:var(--t-klein);font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#8a5b00}
.todo.rot .todo-art{color:#b32631}
.todo-text{min-width:0;display:flex;flex-direction:column}
.todo-text strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t-normal)}
.todo-text .muted{font-size:var(--t-klein)}
.todo-datum{font-size:var(--t-dicht);font-weight:600;white-space:nowrap}
.leer-hinweis{padding:14px;border-radius:10px;background:#e6f7f0;color:#087f56;font-weight:600;margin-top:8px}
.kompakt-tabelle td,.kompakt-tabelle th{padding:7px 6px;font-size:var(--t-dicht)}
.zeile-klein{font-size:var(--t-klein)}
td.r,th.r{text-align:right}
.balken-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;height:170px;margin-top:12px;align-items:end}
.balken-spalte{display:flex;flex-direction:column;height:100%}
.balken-flaeche{position:relative;flex:1}
.balken{position:absolute;left:0;right:0;bottom:0;border-radius:5px 5px 0 0}
.balken.voll{background:#d6e4f7}.balken.gewonnen{background:var(--green);left:25%;right:25%}
.balken-monat{text-align:center;font-size:var(--t-klein);color:var(--muted);margin-top:4px}
.verlauf-liste{margin-top:8px}
.verlauf-zeile{display:grid;grid-template-columns:110px auto minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid #eef2f6;font-size:var(--t-dicht)}
.chip-leiste{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.chip-zahl{display:inline-block;min-width:18px;margin-left:3px;padding:0 5px;border-radius:99px;background:rgba(255,255,255,.55);font-size:var(--t-klein);text-align:center}
.chip.rot:not(.aktiv){background:#fdebed;color:#b32631}
.schritt-tag{display:inline-block;padding:3px 9px;border-radius:99px;font-size:var(--t-klein);font-weight:600;white-space:nowrap;background:#eef2f6;color:#5d6c7e}
.schritt-tag.rot{background:#fdebed;color:#b32631}.schritt-tag.gelb{background:#fff4d8;color:#8a5b00}.schritt-tag.gruen{background:#e6f7f0;color:#087f56}
.neu-karte>summary{list-style:none;display:flex;gap:12px;align-items:center;cursor:pointer}
.neu-karte>summary::-webkit-details-marker{display:none}
.neu-karte>summary>span:last-child{display:flex;flex-direction:column}
.neu-karte>summary .muted{font-size:var(--t-dicht)}
.neu-symbol{font-size:var(--t-seite);width:42px;height:42px;border-radius:12px;background:#eef5ff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.stepper{display:flex;gap:0;margin:4px 0 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.step{flex:1;display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:var(--t-dicht);font-weight:600;color:var(--muted);border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step span{width:22px;height:22px;border-radius:50%;background:#e3e9f1;color:#5d6c7e;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-klein);flex:none}
.step.fertig{color:#087f56}.step.fertig span{background:var(--green);color:#fff}
.step.jetzt{color:var(--blue);background:#eef5ff}.step.jetzt span{background:var(--blue);color:#fff}
.naechster-schritt{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue)}
.naechster-schritt.rot{border-left-color:var(--red);background:#fffafa}
.naechster-schritt.gelb{border-left-color:var(--amber)}
.naechster-schritt.gruen{border-left-color:var(--green)}
.naechster-schritt.spalte{display:block}
.ns-titel{font-weight:600;font-size:var(--t-gross);margin-bottom:6px}
.angebot-kopf{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start}
.angebot-zahlen{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.angebot-zahlen div{display:flex;justify-content:space-between;padding:4px 0;font-size:var(--t-normal)}
.angebot-zahlen div span{color:var(--muted)}
.angebot-zahlen .gross{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:3px 0;padding:6px 0;font-size:var(--t-gross)}
.pruefliste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:3px 14px;font-size:var(--t-normal)}
.pruefliste li.ok{color:#087f56}.pruefliste li.fehlt{color:#b32631;font-weight:600}.pruefliste li.hinweis{color:#8a5b00}
.btn.gruen{background:var(--green);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.speicher-leiste{position:sticky;bottom:0;z-index:15;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:12px 16px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:12px;box-shadow:0 -4px 18px rgba(16,35,61,.06)}
.speicher-leiste [data-ungespeichert]{color:#8a5b00;font-weight:700}
input.fehlt,select.fehlt{border-color:#e7a3a9;background:#fff6f7}
.textblock{margin-top:14px}
.textblock-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:5px;flex-wrap:wrap}
.vorlage-wahl{width:auto;max-width:320px;padding:6px 8px;font-size:var(--t-dicht);background:#eef5ff;border-color:#c5dcff;color:#174f92;font-weight:600}
.als-vorlage{display:inline-block;margin-top:4px}
.link-knopf{list-style:none;font-size:var(--t-dicht);color:var(--blue);cursor:pointer}
.link-knopf::-webkit-details-marker{display:none}
.positionen .neue-zeile td{background:#f7fafe}
.text-vorschau{margin-top:6px;padding:8px 10px;border-radius:8px;background:#f7fafe;border:1px dashed #d6e2f0;font-size:var(--t-dicht);white-space:pre-wrap;max-height:150px;overflow:auto;color:#43546a}
.text-vorschau:empty{display:none}
.bereich-wahl{display:flex;flex-wrap:wrap;gap:8px}
.bereich-wahl label{margin:0;padding:10px 16px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-weight:600;background:#fff}
.bereich-wahl input{display:none}
.bereich-wahl label:has(input:checked){background:var(--blue);border-color:var(--blue);color:#fff}
.vorlagen-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.vorlagen-spalte{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.vorlagen-kopf{padding:2px 4px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.vorlage-karte{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px;background:#fff}
.vorlage-karte.standard{border-color:#9bddc3;background:#fbfffd}
.vorlage-karte>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.vorlage-karte>summary::-webkit-details-marker{display:none}
.vorlage-name{font-weight:600;font-size:var(--t-normal)}
.vorlage-vorschau{flex-basis:100%;font-size:var(--t-dicht);color:var(--muted);white-space:pre-line;max-height:3.9em;overflow:hidden}
.vorlage-karte[open] .vorlage-vorschau{display:none}
.platzhalter-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 16px;margin-top:10px;font-size:var(--t-normal)}
.platzhalter-liste code{background:#eef5ff;color:#174f92;padding:2px 6px;border-radius:6px;font-weight:600}
.anlagen-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.anlage-karte{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:150px}
.anlage-karte.inaktiv{opacity:.6}
.anlage-kopf{display:flex;gap:10px;align-items:flex-start}
.datei-symbol{flex:none;width:44px;height:52px;border-radius:6px;background:#eef3f9;border:1px solid #d6e2f0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:var(--t-mikro);font-weight:600;color:#174f92}
.anlage-text{font-size:var(--t-dicht);color:#43546a;margin-top:8px}
.anlage-marken{margin-top:6px}
.akte-ordner{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.akte-titel{font-weight:600;margin-bottom:6px}
.akte-fach{font-size:var(--t-normal);color:var(--text);font-weight:600;letter-spacing:0}
/* Der Hinweis dahinter bleibt leise und klein - er nennt nur das erste Blatt. */
.akte-fach .zeile-klein{font-weight:400;color:var(--muted)}
.mail-drop input[type=file]{padding:18px;border:2px dashed #b8c6d6;border-radius:10px;background:#f7fafe;cursor:pointer}
.mail-karte{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px}
.mail-karte>summary{cursor:pointer;display:flex;flex-direction:column}
.mail-kopf{font-weight:600;font-size:var(--t-normal)}
.mail-kopfzeilen{margin:10px 0 6px;font-family:inherit;font-size:var(--t-dicht);line-height:1.5;white-space:pre-wrap;color:#5d6c7e}
.mail-text{white-space:pre-wrap;font-size:var(--t-normal);max-height:420px;overflow:auto;padding:10px;background:#f7fafe;border-radius:8px}
.hinweis-box{margin-top:14px;padding:10px 12px;border-radius:10px;background:#fff8e6;border:1px solid #f1dca4;font-size:var(--t-dicht)}
@media (max-width:1100px){.pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.pipe::after{display:none}.vertrieb-raster,.vertrieb-raster.drei,.angebot-kopf,.vorlagen-spalten{grid-template-columns:1fr}.todo{grid-template-columns:auto minmax(0,90px) minmax(0,1fr) auto;gap:8px}.todo-art{font-size:var(--t-mikro);overflow-wrap:anywhere}}
/* ---------------------------------------------------------------- Berichte aus der App */
.berichte-liste{display:grid;gap:12px}
.bericht-karte{border-left:4px solid #8a97a6}
.bericht-karte.dringend{border-left-color:var(--red)}
.bericht-karte.erledigt{opacity:.72}
.bericht-felder{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 16px;margin-top:10px;font-size:var(--t-dicht)}
.bericht-felder span{display:block;font-size:var(--t-klein)}
.bericht-text{white-space:pre-wrap;margin-top:8px;font-size:var(--t-normal)}
.bericht-fotos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bericht-fotos img{width:120px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
/* ---------------------------------------------------------------- Klappkarte (selten gebraucht: Sperren) */
details.klappkarte{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:14px}
details.klappkarte>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:13px 18px;cursor:pointer}
details.klappkarte>summary::-webkit-details-marker{display:none}
.klapp-titel{font-weight:600;font-size:var(--t-gross)}
/* Der Hinweis in der Kopfzeile ist eine Beschriftung, kein Text: eine Zeile, der
   Rest wird abgeschnitten. Sonst wuchs die Kopfzeile auf schmalen Schirmen zu einem
   Absatz, und der Titel ging darin unter. */
.klapp-hinweis{flex:1;min-width:0;color:var(--muted);font-size:var(--t-dicht);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.klapp-hinweis{display:none}}
.klapp-pfeil{color:var(--muted);transition:transform .15s}
details.klappkarte[open] .klapp-pfeil{transform:rotate(90deg)}
.klapp-inhalt{padding:14px 18px 16px;border-top:1px solid var(--line)}
/* ---------------------------------------------------------------- Assistent (NU-Preisvereinbarung) */
.assistent{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:#fbfcfe}
.assistent>summary{margin:12px}
.assistent[open]>summary{margin-bottom:0}
.assistent-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;padding:14px;align-items:start}
@media (max-width:1100px){.assistent-raster{grid-template-columns:1fr}}
.schritt{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px;margin:0 0 12px;min-width:0}
.schritt[disabled]{opacity:.5}
.schritt-kopf{display:flex;align-items:center;gap:10px;font-weight:600;font-size:var(--t-mittel);margin-bottom:10px}
.schritt-nr{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-normal);flex:none}
.schritt.fertig .schritt-nr{background:var(--green)}
.objekt-karte{margin-top:8px;padding:10px 12px;border-radius:10px;background:#eef5ff;border:1px solid #c5dcff}
.objekt-karte strong{display:block}
.objekt-karte span{font-size:var(--t-dicht);color:var(--muted)}
.positionsliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.positionskarte{display:block;position:relative;border:1px solid var(--line);border-radius:10px;padding:10px 12px 10px 36px;cursor:pointer;background:#fff;margin:0}
.positionskarte input{position:absolute;left:12px;top:12px;width:auto}
.positionskarte:has(input:checked){border-color:var(--blue);background:#eef5ff;box-shadow:0 0 0 1px var(--blue)}
.pk-name{display:block;font-weight:600}
.pk-info,.pk-preis{display:block;font-size:var(--t-klein);color:var(--muted);margin-top:2px}
.segment{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
.segment label{margin:0;padding:8px 16px;cursor:pointer;font-weight:600;font-size:var(--t-normal);background:#fff;color:var(--text)}
.segment label+label{border-left:1px solid var(--line)}
.segment input{display:none}
.segment label:has(input:checked){background:var(--blue);color:#fff}
.feldreihe{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.feldreihe>div{min-width:0}
.feldreihe label{font-size:var(--t-klein)}
.assistent-summe{position:sticky;top:12px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px}
.assistent-summe h3{margin:0 0 10px}
.summe-zeile{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed var(--line);font-size:var(--t-normal)}
.summe-zeile span:first-child{color:var(--muted)}
.summe-zeile strong{text-align:right}
.summe-zeile.gross{font-size:var(--t-gross);border-top:1px solid var(--line)}
.summe-hinweis{margin-top:10px;font-size:var(--t-dicht);border-radius:8px;padding:8px 10px;background:#fff4d8;color:#8a5b00}
.summe-hinweis.gut{background:#e6f7f0;color:#087f56}
.summe-hinweis.schlecht{background:#fdebed;color:#8f1d26}
/* Inter zuerst, Segoe UI als Rueckfall - die Angabe stimmt jetzt: die vier Schnitte
   liegen oben als @font-face und werden vom eigenen Server geladen.
   Zeilenhoehe 1,45 fuer den Fliesstext: vorher galt ueberall "normal" (rund 1,33),
   und die Textbloecke in den Akten standen zu eng. Tabellen bekommen weiter unten
   ihre eigene, engere Zeile - dort zaehlt jeder Pixel Hoehe.
   "cv11" stellt Inters einstoeckiges a/g auf die gewohnte Form um; "tnum" gilt nur
   dort, wo gerechnet wird, und steht weiter unten bei den Zahlenspalten. */
body{margin:0;font-family:Inter,"Segoe UI",system-ui,Arial,sans-serif;font-feature-settings:"cv11";
  background:var(--bg);color:var(--text);font-size:var(--t-normal);line-height:1.45;-webkit-font-smoothing:antialiased}
/* Rangfolge, einmal fuer das ganze Haus: Seitentitel > Abschnitt > Karte > Zeile.
   Vorher galt sie nur innerhalb von .card; ueberall sonst rechnete der Browser mit
   seinen Grundwerten, und eine h2 ausserhalb einer Karte kam auf 24 px - genauso
   gross wie der Seitentitel. Die Gliederung war damit nicht zu sehen.
   Das Gewicht ist ueberall dasselbe; die Rangfolge tragen Groesse und Farbe. */
h1,h2,h3,h4{font-weight:600;line-height:1.25;letter-spacing:-.1px;color:var(--text)}
h1{font-size:var(--t-seite)}
h2{font-size:var(--t-titel)}
h3{font-size:var(--t-normal);letter-spacing:.2px}
/* Vierte Stufe: eine Beschriftung ueber einer Gruppe, kein Titel mehr. */
h4{font-size:var(--t-klein);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
a{color:inherit}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto}
/* Wortmarke wie im Logo: SHALA in Gold, der Zusatz weiss. */
/* Der Kopf der Seitenleiste ist die eine Stelle, an der die Marke jeden Tag zu
   sehen ist. Liegt ein Logo in den Einstellungen, steht es hier - sonst der
   Schriftzug in den Hausfarben. Darunter die goldene Linie, die sich durch
   Bildschirm, Druckseite und Vordruck zieht. */
.login-logo{display:block;max-width:230px;max-height:74px;object-fit:contain;margin:0 0 8px}
.brand{padding:4px 10px 18px;border-bottom:2px solid var(--gold);margin-bottom:16px}
.brand-zeile{display:flex;align-items:center;gap:10px;font-size:var(--t-zahl);font-weight:700;letter-spacing:.4px}
.brand b{color:var(--gold);font-weight:700;letter-spacing:.11em}
.brand small{display:block;color:#86a5c7;font-size:var(--t-klein);margin-top:6px;font-weight:600}
/* Das Zeichen der Marke: aussen Gold, innen oben rechts ein Marinequadrat. Auf dem
   hellen Grund (Login, Papier) ist es umgekehrt - siehe marke.svg. Gezeichnet statt
   Bilddatei, damit es auf jedem Bildschirm scharf bleibt und die Hausfarben traegt.
   Masse als Anteil der Kantenlaenge, damit eine andere Groesse dieselbe Form ergibt. */
.brand-zeichen{flex:none;position:relative;width:26px;height:26px;border-radius:7px;background:var(--gold)}
.brand-zeichen::after{content:"";position:absolute;top:4.9px;right:4.9px;width:6.5px;height:6.5px;
  border-radius:1.8px;background:var(--navy)}
.brand img{display:block;max-width:100%;max-height:24px;object-fit:contain;min-width:0}
.brand-logo{margin-bottom:10px}
.nav a{display:block;width:100%;text-align:left;padding:11px 12px;border-radius:10px;color:#c9d7e8;text-decoration:none;margin:3px 0;font-size:var(--t-mittel);background:none;border:0;cursor:pointer;font-family:inherit}
.nav a:hover{background:#123252;color:#fff}
.nav .sep{margin:18px 10px 7px;color:#9ab0c8;font-size:var(--t-mikro);text-transform:uppercase;letter-spacing:1.4px}
.nav-form{margin:0}
/* ---------------------------------------------------------------- Menue: Gruppen zum Auf- und Zuklappen */
.punkt-icon{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7;margin-right:6px;vertical-align:-2px}
.nav-eintraege a.aktiv .punkt-icon{opacity:1}
.nav-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav a.nav-top{display:flex;align-items:center;gap:11px;font-weight:600;margin-bottom:10px}
.nav-gruppe{margin:4px 0;border-radius:12px}
.nav-gruppe>summary{list-style:none;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;cursor:pointer;
  color:#c9d7e8;font-size:var(--t-mittel);font-weight:600;user-select:none;transition:background .15s,color .15s}
.nav-gruppe>summary::-webkit-details-marker{display:none}
.nav-gruppe>summary:hover{background:#123252;color:#fff}
.nav-gruppe>summary span{flex:1}
.nav-pfeil{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .2s}
.nav-gruppe[open]>summary .nav-pfeil{transform:rotate(90deg)}
.nav-gruppe[open]{background:rgba(255,255,255,.035)}
.nav-gruppe[data-aktiv]>summary{color:#fff}
.nav-gruppe[data-aktiv]>summary .nav-icon{color:var(--gold);opacity:1}
.nav-eintraege{margin:2px 0 8px 21px;padding-left:12px;border-left:1px solid rgba(134,165,199,.25)}
.nav .nav-eintraege a{padding:8px 11px;margin:2px 0;font-size:var(--t-normal);color:#a9bdd4}
.nav a.aktiv{background:linear-gradient(90deg,rgba(240,186,55,.26),rgba(240,186,55,.04));color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--gold)}
/* ---------------------------------------------------------------- Anlegen: aufklappbar, einheitlich */
details.anlegen{margin-bottom:14px}
/* Anlegeformulare: viele Felder auf einmal. Niedrigere Zeilen und engere Abstaende,
   damit das Formular nicht die halbe Seite belegt, bevor die Liste anfaengt. */
details.anlegen input,details.anlegen select{padding:6px 9px}
details.anlegen .form-grid{gap:9px 10px}
details.anlegen label{margin-bottom:3px}
details.anlegen>summary{list-style:none;display:inline-block}
details.anlegen>summary::-webkit-details-marker{display:none}
details.anlegen[open]>summary{background:var(--navy2)}
/* ---------------------------------------------------------------- Globale Suche */
.topsuche{flex:1;max-width:520px;margin:0 20px;position:relative}
.topsuche svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.topsuche input{padding-left:38px;border-radius:12px;background:#f4f7fb;border-color:transparent}
.topsuche input:focus{background:#fff;border-color:var(--blue)}
@media(max-width:780px){.topsuche{margin:0 8px}.topsuche input{font-size:var(--t-normal)}}
/* ---------------------------------------------------------------- Handy: Menue-Knopf und Seitenmenue als Schublade */
.menue-knopf{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;padding:8px}
.menue-knopf svg{width:22px;height:22px;fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round}
.menue-schleier{display:none}
@media(max-width:780px){
  .menue-knopf{display:inline-block}
  .titel-zusatz,.benutzermenue .wer{display:none}
  body.menue-offen .sidebar{display:block!important;position:fixed;left:0;top:0;bottom:0;width:280px;z-index:100;box-shadow:0 0 40px rgba(0,0,0,.35)}
  body.menue-offen .menue-schleier{display:block;position:fixed;inset:0;background:rgba(7,20,38,.45);z-index:90}
}
/* ---------------------------------------------------------------- Benutzermenue oben rechts */
.benutzermenue{position:relative}
.benutzermenue>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 10px;border-radius:12px;color:var(--text)}
.benutzermenue>summary::-webkit-details-marker{display:none}
.benutzermenue>summary:hover{background:#f1f5fa}
.benutzermenue .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.benutzermenue .wer{display:flex;flex-direction:column;line-height:1.15;font-size:var(--t-normal)}
.benutzermenue .wer small{color:var(--muted);font-size:var(--t-klein)}
.benutzermenue-liste{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:50}
.benutzermenue-liste a,.benutzermenue-liste button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:var(--t-normal);background:none;border:0;cursor:pointer;font-family:inherit}
.benutzermenue-liste a:hover,.benutzermenue-liste button:hover{background:#f1f5fa}
.benutzermenue-liste button{color:var(--red-text);font-weight:600}
.main{min-width:0}
.topbar{height:66px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:20}
.topbar .user{font-size:var(--t-normal);color:var(--muted)}
.content{padding:24px 26px 48px;max-width:1700px;margin:auto}
.title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
/* Die Knopfreihe im Kopf bricht um, statt die Seite in die Breite zu ziehen: In der
   Nachunternehmerakte standen dort vier Schaltflaechen in einer starren Zeile. */
.title-row>div{flex-wrap:wrap;min-width:0}
/* Breite Arbeitsseiten (Planung, Objektakte): oben dichter an die Leiste heran -
   der Platz gehoert der Tabelle darunter, nicht dem Abstand darueber. */
.content.weit{padding-top:14px}
.content.weit .title-row{margin-bottom:10px}
/* Der Name der Akte fuehrt die Seite an - gross, aber nicht plakativ. Darunter
   ordnet sich alles in denselben zwei Stufen: Bereich (h2) und Zwischentitel (h3). */
.title-row h1{margin:0;font-size:var(--t-seite);letter-spacing:-.2px}
.subtitle{color:var(--muted);font-size:var(--t-normal);margin-top:5px}
.grid{display:grid;gap:16px}
/* Rasterfelder duerfen schmaler werden als ihr Inhalt. Ohne diese Zeile waechst eine
   Karte mit breiter Tabelle ueber den Bildschirm hinaus und zieht die ganze Seite in
   die Breite, statt die Tabelle scrollen zu lassen (min-width:auto ist die
   Voreinstellung bei Raster- und Flexfeldern). */
.grid>*{min-width:0}
/* auto-fit statt fester Spaltenzahl: die Kacheln verteilen sich stufenlos auf die
   vorhandene Breite, statt nur an zwei Sprungpunkten umzubrechen. Am grossen
   Monitor stehen alle sechs nebeneinander, am Notebook bricht es von selbst um. */
.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid.two{grid-template-columns:1.25fr .75fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
/* Gleich breite Karten, die sich selbst umbrechen - fuer Auswertungsseiten. */
.grid.auto{grid-template-columns:repeat(auto-fit,minmax(440px,1fr));align-items:start}
/* Vier Auswertungskarten nebeneinander sollen wie ein Satz aussehen: gleiche Hoehe,
   gleicher Kopf, Zahlen rechtsbuendig. Vorher endete jede Karte dort, wo ihre Tabelle
   aufhoerte, und die laengste zog eine Scrollleiste mitten ins Bild. */
/* Immer zwei nebeneinander, nie drei plus eine einzelne darunter: Zwei Reihen zu zwei
   Karten sind ein Satz, 3+1 sieht aus, als waere etwas verrutscht. */
.grid.analyse{align-items:stretch;grid-template-columns:1fr}
@media(min-width:1100px){.grid.analyse{grid-template-columns:1fr 1fr}}
.grid.analyse>.card{display:flex;flex-direction:column;min-height:360px}
.analyse-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.analyse-kopf h2{margin:0}
.analyse-kopf .subtitle{margin:0;white-space:nowrap}
.grid.analyse .table-wrap{flex:1;max-height:420px;overflow:auto}
/* Kopfzeile bleibt beim Scrollen stehen - sonst weiss nach zehn Zeilen niemand mehr,
   welche Spalte welche ist. */
.grid.analyse thead th{position:sticky;top:0;z-index:1;background:#eef2f7}
.grid.analyse td.zahl,.grid.analyse th.zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Acht Spalten in einer halben Bildschirmbreite: ohne Mindestbreite quetscht der Browser
   die Zahlenspalten zusammen, bis "32.478,92" als "32.478,9" abgeschnitten dasteht. Mit
   Mindestbreite schiebt sich die Tabelle stattdessen in ihrem Rahmen zur Seite. */
.grid.analyse table{min-width:620px}
.grid.analyse tr.we td{background:#f6f7f9}
/* Filterleiste: Felder nebeneinander statt untereinander. Ohne diese Regel wird
   jedes Feld durch input{width:100%} zu einer eigenen Zeile. */
.filterleiste{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;align-items:end}
.filterleiste label{margin-bottom:4px}
/* Filter mit Alltagszeile und aufklappbarem Rest: die Liste ist der Inhalt der Seite,
   der Filter nur ihr Griff. Deshalb schmaler Kasten, keine Schattierung. */
.filterleiste:has(.filter-zeile){display:block;padding:12px 14px;box-shadow:none}
.filter-zeile{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.filter-zeile>div{min-width:150px}
.filter-zeile>.wachsend{flex:1 1 260px}
.filter-mehr{margin-top:2px}
.filter-mehr[open]{margin-top:10px}
.filter-mehr>summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:var(--t-klein);color:var(--muted);padding:4px 0;list-style:none}
.filter-mehr>summary::-webkit-details-marker{display:none}
.filter-mehr>summary::before{content:"▸";font-size:11px;transition:transform .12s}
.filter-mehr[open]>summary::before{transform:rotate(90deg)}
.filter-mehr>summary:hover{color:var(--text)}
.filter-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;align-items:end;margin-top:8px}
/* Die Haken nutzen .checkboxes - dort steht schon `input{width:auto}`. Ohne das trifft
   die allgemeine Regel `input{width:100%}` auch das Kaestchen: es nimmt die ganze
   Zeilenbreite ein und die Beschriftung rutscht neben den falschen Haken. */
.filter-mehr .checkboxes{margin-top:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-gross);box-shadow:var(--shadow);padding:18px}
.card h2,.card h3{margin:0 0 12px}
/* Kennzahlkacheln: flach halten. Sie sind der Randwert einer Seite, nicht ihr Inhalt -
   in voller Hoehe schieben sechs davon die eigentliche Arbeit unter den Bildschirmrand. */
.kpi-card{padding:9px 14px}
.kpi-card .label{font-size:var(--t-mikro);color:var(--muted);text-transform:uppercase;letter-spacing:.7px}
.kpi-card .value{font-size:var(--t-zahl);font-weight:700;margin-top:2px}
.kpi-card .hint{font-size:var(--t-mikro);color:var(--muted);margin-top:2px}
.grid.kpi{gap:10px}
/* Reihe "Handeln" ueber den Geldkacheln: dieselbe Bauform wie die Geldkacheln - gleiche
   Spaltenbreite, gleiche Innenabstaende, gleiche Schrift. Zwei Kartenentwuerfe nebeneinander
   sahen aus wie zwei Systeme. Dass hier etwas liegt, sagen die rote Zahl und ein schmaler
   Streifen am linken Rand (innen gezeichnet, damit die Kachel nicht breiter wird als die
   anderen). Kacheln ohne offene Zahl zeigt die Vorlage gar nicht erst an. */
.grid.kpi.handeln{margin-bottom:10px}
/* Jede anklickbare Kachel, nicht nur die aus der Reihe "Handeln": in der Faktura fehlte
   die zweite Klasse, und dort war jede Zeile unterstrichen - "4.663.041,75 EUR" sah aus,
   als sei etwas kaputt. */
a.kpi-card,.kpi-card.handeln{display:block;text-decoration:none;color:inherit}
a.kpi-card:hover,.kpi-card.handeln:hover{border-color:var(--blue)}
.kpi-card.handeln.alarm{box-shadow:inset 3px 0 0 var(--red),var(--shadow)}
.kpi-card.handeln.alarm .value{color:var(--red-text)}
.kpi-card.handeln .handeln-warnung{color:var(--amber-text)}
/* Spaltenwahl vor dem Druck: nach Themen gruppiert, je Gruppe eine Zeile Chips.
   Als Wortwolke aus achtzehn Ankreuzfeldern war nicht zu sehen, was zusammengehoert. */
/* Die Auswahl steht in der Karte, nicht als schwebendes Feld am Knopf: So ist sie
   auf jeder Breite vollstaendig zu sehen - auf dem Tablet ragte das schwebende Feld
   ueber den Rand hinaus und zog die ganze Seite in die Breite. */
.druckwahl{display:flex;flex-direction:column;align-items:flex-end;margin-top:10px}
.druckwahl>summary{list-style:none;cursor:pointer}
.druckwahl>summary::-webkit-details-marker{display:none}
.druckwahl-feld{width:100%;margin-top:10px;text-align:left}
.druckwahl-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.druckwahl-schnell button{background:none;border:0;padding:2px 6px;font:inherit;font-size:var(--t-dicht);
  font-weight:600;color:var(--blue);cursor:pointer;border-radius:6px}
.druckwahl-schnell button:hover{background:#eef3f9}
.druckwahl-gruppe{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:start;
  padding:6px 0;border-top:1px solid var(--line)}
.druckwahl-gruppe .gruppe-titel{font-size:var(--t-klein);font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;padding-top:5px}
.druckwahl-gruppe .gruppe-felder{display:flex;flex-wrap:wrap;gap:5px}
.spaltenchip{display:inline-flex;align-items:center;gap:5px;margin:0;padding:4px 9px;font-size:var(--t-dicht);
  font-weight:400;color:var(--text);border:1px solid var(--line);border-radius:999px;cursor:pointer;background:#fff}
.spaltenchip input{width:auto;margin:0}
.spaltenchip:has(input:checked){border-color:var(--blue);background:#eef4fd;font-weight:600}
.druckwahl-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:var(--t-klein)}

/* Positionszelle im Monatsraster: eine Aktionszeile, der Rest hinter dem Menue.
   Vier Knoepfe untereinander machten die erste Spalte hoeher als die Dienste daneben. */
.pos-aktionen{display:flex;gap:4px;align-items:center;margin-top:7px}
.pos-aktionen>button{flex:1}
.pos-menue>summary{padding:3px 9px;font-size:var(--t-mittel);line-height:1.1}
.pos-menue-inhalt{margin-top:6px;padding:10px;border:1px solid var(--line);border-radius:10px;
  background:#fbfcfe;min-width:210px}

/* Rueckgabepruefung: ein kleines Formular je Stueck - Menge, Zustand, Einbehalt,
   Foto. Es oeffnet sich in der Zeile, damit man sieht, worum es geht. */
/* Rueckgabe pruefen: schwebendes Blatt am rechten Rand der Zeile. Frueher stand es
   im Tabellenfeld und schob die Tabelle auseinander; Beschriftung und Feld lagen
   uebereinander, weil <label> von Haus aus in der Zeile laeuft. */
/* Das Blatt steht in der Aktionsspalte, und die stellt Formulare sonst in eine Zeile
   (td.aktionszelle form{display:inline-flex}) und verbietet Umbrueche. Beides muss hier
   zurueckgenommen werden, sonst liegen Beschriftung und Feld uebereinander. */
td.aktionszelle form.rueckgabe-pruefung,.rueckgabe-pruefung{display:block;margin:8px 0 0;
  width:min(420px,70vw);text-align:left;white-space:normal;
  box-shadow:var(--shadow);border:1px solid var(--line);border-radius:10px;padding:14px}
.rp-kopf{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid var(--line);font-size:var(--t-dicht)}
.rp-felder{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rueckgabe-pruefung label{display:block;margin:0;font-size:var(--t-klein);font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.rueckgabe-pruefung input,.rueckgabe-pruefung select{width:100%;margin-top:3px;text-transform:none;
  font-weight:400;letter-spacing:0}
.rueckgabe-pruefung>label{margin-top:10px}
.rp-fuss{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:560px){.rp-felder{grid-template-columns:1fr}}
.rueckgabe-zeile td{background:#fbfcfe;font-size:var(--t-klein);border-top:0}
.rueckgabe-zeile .warnt{color:var(--amber-text)}

/* Vorschusskonto: je Vorschuss eine Zeile mit festen Spalten - Verlauf links,
   offener Betrag rechtsbuendig, Aktionen darunter. Als Flexzeile sprangen die
   Betraege je nach Laenge der Notiz hin und her und standen nicht untereinander. */
.vorschuss-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;
  padding:9px 0;border-top:1px solid #edf2f6}
.vorschuss-zeile:first-child{border-top:0}
.vz-verlauf strong{font-size:var(--t-normal);font-weight:600}
.vz-verlauf small{display:block;font-size:var(--t-klein);line-height:1.4}
.vz-stand{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.vz-stand span{display:block;font-size:var(--t-mikro);text-transform:uppercase;letter-spacing:.5px}
.vz-stand strong{font-size:var(--t-mittel)}
.vz-aktionen{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;margin-top:4px}
.vz-rueck{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.vz-rueck input{width:120px;padding:5px 8px;font-size:var(--t-dicht)}
.vz-rueck input[type=date]{width:135px}
.vorschusskonto .klapp-hinweis .offen-betrag{color:var(--text);font-size:var(--t-normal)}
.vz-neu{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line)}
.vz-neu label{margin:0;font-size:var(--t-klein)}
.vz-neu input{width:150px;margin-top:3px}

/* Datei oder Kamera: zwei gleich grosse Flaechen, damit das Fotografieren genauso
   nah liegt wie das Suchen im Dateisystem. */
.dateiwahl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.dateiwahl label{display:block;margin:0;padding:14px;border:2px dashed #b8c9dc;border-radius:12px;
  background:#f8fbff;text-align:center;cursor:pointer;font-weight:400;color:var(--text)}
.dateiwahl label:hover{border-color:var(--blue);background:#eef4fd}
.dateiwahl span{font-size:var(--t-zahl);display:block}
.dateiwahl strong{display:block;font-size:var(--t-normal);margin:2px 0 3px}
.dateiwahl small{display:block;color:var(--muted);font-size:var(--t-klein);line-height:1.35}
.dateiwahl input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:560px){.dateiwahl{grid-template-columns:1fr}}

/* Neue Zeile der Preisliste: eine Reihe Felder, kein zweites Formularraster. */
.preisliste-neu{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.preisliste-neu input{width:120px;padding:6px 8px}
.preisliste-neu input[name="name"]{width:190px}
.preisliste-neu input[type="time"]{width:96px}
.preistabelle .weg{color:var(--red-text);font-size:var(--t-titel);line-height:1;padding:2px 8px}

/* Nachtzeit in der Preistabelle: zwei Uhrzeiten mit Gedankenstrich in einer Zelle. */
td.nachtzeit{white-space:nowrap}
td.nachtzeit input{width:82px;display:inline-block}
td.nachtzeit span{color:var(--muted);margin:0 2px}
.positive{color:var(--green-text)}.negative{color:var(--red-text)}.warning{color:var(--amber-text)}
/* Trefferflaeche: 36 px hoch, damit ein Knopf auch mit ungenauem Klick sitzt.
   .btn.small steht in Tabellenzeilen und bleibt bei 32 px - die Zeile ist ohnehin
   41 px hoch, 36 wuerden die Mitarbeiterliste um eine Bildschirmhoehe verlaengern,
   ohne dass der Knopf leichter zu treffen waere. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:var(--r-klein);padding:9px 13px;min-height:36px;background:var(--blue);color:white;text-decoration:none;font-weight:600;font-size:var(--t-normal);line-height:1.2;cursor:pointer;font-family:inherit}
.btn.secondary{background:#e8f0fb;color:#174f92}
.btn.dark{background:var(--navy2)}
.btn.danger{background:var(--red)}
.btn.small{padding:6px 10px;min-height:32px;font-size:var(--t-klein)}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line)}
.btn.wa{background:#1fae54;color:#fff;white-space:nowrap}
/* Knoepfe haben bisher nicht auf die Maus reagiert: gleiche Farbe beim Zeigen, beim
   Druecken, beim Tabben. Das laesst eine Oberflaeche tot wirken, und mit der Tastatur
   war nicht zu erkennen, wo man steht. Drei Zustaende, alle aus den Hausfarben. */
.btn{transition:background .12s ease,box-shadow .12s ease}
.btn:hover{background:#17507f}
.btn.secondary:hover{background:#d8e6f8}
.btn.dark:hover{background:var(--navy)}
.btn.danger:hover{background:#c22e38}
.btn.ghost:hover{background:#f2f7fc;border-color:#c3d3e6}
.btn.wa:hover{background:#199a49}
.btn:active{transform:translateY(1px)}
.btn[disabled]:hover,.btn[disabled]:active{background:var(--blue);transform:none}
/* Der Tastaturring gilt ueberall, nicht nur in Formularen - und nur bei Tastatur,
   damit ein Mausklick keinen Rahmen stehen laesst. */
.btn:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
button:focus-visible,label:focus-visible,[contenteditable]:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px}
.sidebar a:focus-visible,.sidebar summary:focus-visible{outline-color:var(--gold)}
/* Auf farbigem Grund ist der blaue Ring nicht zu sehen - dort trennt ein weisser
   Ring mit dunklem Saum den Knopf vom Untergrund. */
.btn:not(.secondary,.ghost):focus-visible,.btn.danger:focus-visible,.btn.wa:focus-visible{
  outline-color:#fff;box-shadow:0 0 0 4px rgba(16,35,61,.45)}
/* Ein Knopf, der etwas absendet, sagt dass er laeuft (app.js setzt data-laedt).
   Nicht disabled: das nimmt dem Formular Name und Wert des Knopfes. */
.btn[data-laedt]{pointer-events:none;opacity:.72}
.btn[data-laedt]::after{content:"";width:13px;height:13px;flex:none;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:btn-dreht .65s linear infinite}
@keyframes btn-dreht{to{transform:rotate(360deg)}}
/* Gefaehrlich neben harmlos: der Loesch- oder Inaktiv-Knopf traegt data-confirm und
   bekommt Abstand, damit er nicht direkt an "Akte" oder "Speichern" klebt. */
td.aktionszelle form[data-confirm],.title-row form[data-confirm],
.bericht-fuss form[data-confirm],.ul-aktionen form[data-confirm]{margin-left:18px}
.btn.danger:not(:first-child),.btn[data-confirm]:not(:first-child){margin-left:18px}
form.inline{display:inline}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.form-grid.two{grid-template-columns:repeat(2,1fr)}
.form-grid.six{grid-template-columns:repeat(6,1fr)}
label{display:block;font-size:var(--t-klein);color:var(--muted);font-weight:600;margin-bottom:5px}
/* Der Feldrand sagt, wo man tippen darf - das ist Information, kein Schmuck, und
   braucht 3:1. #cdd9e6 kam auf 1,43:1 und verschwand auf dem hellen Grund fast
   ganz; --feldrand liegt bei 3,07:1. Trennlinien bleiben bei --line. */
input,select,textarea{width:100%;padding:9px 10px;border:1px solid var(--feldrand);border-radius:8px;background:#fff;color:var(--text);font:inherit;font-size:var(--t-normal);max-width:100%}
/* Der alte Fokusring (#bcd6f6) hatte 1,49:1 gegen Weiss - mit der Tastatur war
   nicht zu sehen, in welchem Feld man steht. Jetzt derselbe Ring wie an Knoepfen. */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{min-height:80px;resize:vertical}
.checkboxes{display:flex;flex-wrap:wrap;gap:8px}
.checkboxes label,.checkboxes span{display:flex;align-items:center;gap:5px;margin:0;padding:6px 8px;background:#f1f5fa;border-radius:8px;color:var(--text);font-size:var(--t-dicht)}
.checkboxes input{width:auto}
.table-wrap{overflow:auto;min-width:0;max-width:100%;border:1px solid var(--line);border-radius:12px}
/* Kopfzeile bleibt stehen - aber nur bei langen Tabellen.
   th traegt seit jeher position:sticky, wirksam war das nie: der Kasten drumherum
   hat overflow:auto und wuchs mit dem Inhalt mit, also gab es nichts zu scrollen,
   woran der Kopf haetten kleben koennen. Erst eine Hoehengrenze macht den Kasten
   zum Scrollbereich. Ab 26 Zeilen (:has) - kuerzere Tabellen scrollen weiter mit
   der Seite, zwei Rollbalken nebeneinander waeren schlimmer als kein sticky. */
.table-wrap:has(tbody tr:nth-child(26)){max-height:calc(100vh - 190px)}
.grid.analyse .table-wrap:has(tbody tr:nth-child(26)){max-height:420px}
@media print{.table-wrap{max-height:none!important;overflow:visible}}
/* Kompakte Liste: bei dreihundert Zeilen zaehlt jede Zeilenhoehe. */
/* Kontrollpunkte einrichten: fuenf Punkte auf einen Blick statt einer Bildschirmhoehe.
   Die Checkliste ist einzeilig und waechst beim Tippen mit (field-sizing), statt von
   vornherein zwei leere Zeilen Platz zu belegen. */
table.punkte-tabelle{font-size:var(--t-dicht)}
table.punkte-tabelle th,table.punkte-tabelle td{padding:4px 6px;vertical-align:middle}
table.punkte-tabelle input:not([type=checkbox]),table.punkte-tabelle textarea{padding:5px 8px;font-size:var(--t-dicht);min-height:0}
table.punkte-tabelle textarea{field-sizing:content;min-height:30px;max-height:120px;resize:vertical;line-height:1.35}
table.punkte-tabelle code{font-size:var(--t-klein)}
table.punkte-tabelle td.chip-zelle{white-space:nowrap}
table.punkte-tabelle td.chip-zelle label{display:inline-flex;gap:3px;align-items:center;margin-left:6px}
table.punkte-tabelle .btn.small{padding:4px 10px}
table.kompakt{font-size:var(--t-dicht)}
table.kompakt th,table.kompakt td{padding:5px 8px}
table.kompakt th a:hover{text-decoration:underline}
table.kompakt tbody tr:hover td{background:#f4f8fc}
/* Rechnungsliste: "in lexoffice oeffnen" brach in der letzten Spalte auf drei
   Zeilen um - jede der 800 Zeilen war dadurch doppelt so hoch wie noetig. Die
   Regel haengt an der Tabelle, nicht an jeder Zelle: eine Angabe statt 800. */
.rechnungsliste td:last-child,.rechnungsliste th:last-child{white-space:nowrap;text-align:right}
.rechnungsliste td:nth-child(5){white-space:nowrap}
table{width:100%;border-collapse:collapse;font-size:var(--t-dicht);background:#fff}
/* Der Tabellenkopf ist eine Beschriftung, keine Ueberschrift: 600 statt des
   Browser-Fettdrucks. Bei zwoelf Spalten war die Kopfzeile sonst die schwerste
   Zeile der Seite und zog den Blick nach oben statt in die Liste. */
th{background:#f0f4f9;text-align:left;color:#52657a;font-size:var(--t-mikro);font-weight:600;text-transform:uppercase;letter-spacing:.55px;position:sticky;top:0;z-index:2}
/* Enge, gleichmaessige Zeilen: 1,3 statt der 1,45 des Fliesstexts. Bei 150 Zeilen
   sind das rund zwei Bildschirmhoehen weniger Scrollweg. */
th,td{padding:9px 10px;border-bottom:1px solid #e8eef5;vertical-align:top;line-height:1.3}
/* Betraege und Stunden fluchten untereinander - Ziffern gleich breit, wo gerechnet
   wird. Ohne das rutschte in der Rechnungsliste die 1 schmaler als die 8, und die
   Kommastellen standen nicht in einer Linie. */
td.r,th.r,td.zahl,th.zahl,td.kennzahl,.kpi-card .value,.mini-metrics strong,.pipe-zahl,
.summe-zeile strong,.angebot-zahlen div,.ampel-wert{font-variant-numeric:tabular-nums}
tr:hover td{background:#fafcff}
tr.inactive-row td{opacity:.55}
tr.locked-row td{background:#f6fbf8}
tr.noshow-row td{background:#fff5f5}
.times-table input{padding:5px 6px;font-size:var(--t-dicht)}
/* Feldbreiten der Ist-Zeiten-Tabelle: standen als style="" an jedem Feld und damit
   knapp tausendmal im fertigen Blatt (190 Zeilen x 5 Felder). */
.times-table .zeit-feld{width:95px}
.times-table .pausen-feld{width:60px}
.times-table .notiz-feld{min-width:120px}
.times-table .grund-feld{width:auto;display:inline-block;padding:2px 4px}
.times-table td.aktionen{white-space:nowrap}
/* Etikett und Abzeichen sagen dasselbe in derselben Groesse: ein Zustand in einem
   Wort. Vorher stand 9,5 neben 10 neben 11 Pixel auf einer Seite. */
.tag{white-space:nowrap;display:inline-block;padding:3px 8px;border-radius:99px;font-size:var(--t-mikro);font-weight:600;letter-spacing:.2px;background:#e8f0fb;color:#245b9b}
.tag.green{background:#e6f7f0;color:#087f56}
.tag.red{background:#fdebed;color:#b32631}
.tag.amber{background:#fff4d8;color:#8a5b00}
.message{padding:11px 14px;border-radius:10px;background:#eaf3ff;border:1px solid #c5dcff;color:#174f92;margin-bottom:16px}
.message.error{background:#fdebed;border-color:#f3a4aa;color:#8f1d26}
.accordion{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:6px;overflow:hidden}
/* Ruhiger als zuvor: kleinere Polsterung, normale Schrift, nur der Name fett.
   Bei siebzig Kunden untereinander war die alte Zeile zu wuchtig. */
/* Listenzeile, kein Fliesstext: 1,3 statt der 1,45 des Textkoerpers. Bei siebzig
   Kunden mit Name und Anschrift untereinander sind das rund zwei Zeilen mehr je
   Bildschirm. */
.accordion summary{list-style:none;cursor:pointer;padding:11px 16px;font-weight:400;font-size:var(--t-normal);
  line-height:1.3;display:flex;justify-content:space-between;align-items:center;gap:14px}
.accordion summary:hover{background:#f4f8fc}
.accordion summary strong{font-weight:500;font-size:var(--t-mittel)}
/* Nachunternehmerliste: Name lesbar, aber nicht fett geschrien - in einer Liste
   aus zwanzig Zeilen ermuedet Fettdruck, statt zu fuehren. */
.accordion summary .nu-name{font-weight:500;font-size:var(--t-mittel);color:var(--text)}
.accordion summary .nu-zahlen{display:flex;gap:12px;align-items:center;white-space:nowrap;
  font-weight:400;font-variant-numeric:tabular-nums}
.accordion summary .nu-nummer{color:var(--muted);font-size:var(--t-dicht);min-width:78px;text-align:right}
/* Kennzahlen je Zeile: in einer Reihe, aber feste, rechtsbuendige Spalten mit Luft dazwischen -
   so stehen Objekte, Stunden und Euro in allen Zeilen genau untereinander. */
.accordion summary .nu-zahlen:has(.kz){gap:0}
.accordion summary .kz{display:inline-block;min-width:100px;padding-left:28px;text-align:right;color:var(--text)}
.accordion summary .kz.geld{min-width:140px}
.accordion summary .kz.null{color:var(--muted)}
.accordion summary .nu-zahlen:has(.kz) .nu-nummer{padding-left:28px}
@media (max-width:700px){.accordion summary:has(.kz){flex-wrap:wrap}.accordion summary .kundenzeile{flex:1 1 60%}
  .accordion summary .nu-zahlen:has(.kz){flex-basis:100%;justify-content:flex-end;margin-top:4px}
  .accordion summary .kz,.accordion summary .kz.geld{min-width:0;padding-left:16px}}
.accordion[open]>summary{border-bottom:1px solid var(--line);background:#f7fafd}
/* Laufende Nummer: gibt der Liste einen Anker zum Zeigen und Abzaehlen. */
.accordion summary .lfd{flex:none;width:30px;text-align:right;color:var(--muted);font-size:var(--t-dicht);
  font-variant-numeric:tabular-nums}
/* Name und Anschrift untereinander statt nebeneinander - liest sich ruhiger. */
.accordion summary .kundenzeile{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.accordion summary .kundenzeile .muted{font-size:var(--t-dicht);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accordion summary::-webkit-details-marker{display:none}
.accordion .inside{padding:0 18px 18px;border-top:1px solid var(--line)}
.mini-metrics{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0;color:var(--muted);font-size:var(--t-klein)}
.mini-metrics strong{display:block;color:var(--text);font-size:var(--t-gross);margin-top:2px;font-variant-numeric:tabular-nums}
.object-link{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;background:#f6f9fc;margin-top:8px;text-decoration:none}
.object-link:hover{background:#eaf2fb}
/* Objektzeile in der Kunden- und Nachunternehmerliste: Verweis links, Schalter rechts.
   Stand bisher fuenfmal als style="" im Baustein und damit einmal je Objekt im
   fertigen Blatt - bei siebzig Kunden waren das ueber dreihundert Wiederholungen. */
.reihe{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.objektzeile{display:flex;gap:8px;align-items:center}
.objektzeile.still{margin-top:6px}
.objektzeile>.object-link{flex:1;min-width:0}
.object-link small{display:block}
.object-link>span:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.zeilen-knoepfe{display:flex;gap:6px;align-items:center;margin-top:12px}
.performance-bar{height:7px;background:#e7eef7;border-radius:99px;overflow:hidden;margin-top:6px}
/* Die Breite traegt die Aussage, nicht der Verlauf: Ein Balken, der von Blau nach
   Gold laeuft, sieht nach Anteil aus, wo keiner ist. Einfarbig, in der Bedienfarbe. */
.performance-bar span{height:100%;display:block;background:var(--blue)}
.chart{width:100%;height:310px}
.news{display:grid;gap:10px}
.news-item{border-left:4px solid var(--blue);padding:12px 13px;background:#f7faff;border-radius:8px}
.news-item .rank{font-size:var(--t-mikro);color:var(--muted);font-weight:600}
.news-item .name{font-weight:600;margin:3px 0}
.news-item .name a{text-decoration:none}
/* Die Gesamtplanung darf das ganze Fenster nutzen - bei einem grossen Monitor
   sieht man damit den kompletten Monat ohne Scrollen. */
.content.weit{max-width:none}
.planning-shell{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;max-height:78vh}
.content.weit .planning-shell{max-height:calc(100vh - 230px)}
/* Kompaktmodus: der ganze Monat auf einen Bildschirm. Die Zellen zeigen nur noch
   den Namen und die offenen Stunden - Uhrzeiten stehen ohnehin im Zeilenkopf, und
   die Bearbeitungsknoepfe waeren in dieser Groesse nicht mehr treffbar.
   Den Rest erledigt das Verkleinern in app.js. */
.planning-shell.kompakt .planning-table th,
.planning-shell.kompakt .planning-table td{min-width:44px;max-width:none;padding:2px}
.planning-shell.kompakt .planning-table th:first-child,
.planning-shell.kompakt .planning-table td:first-child{min-width:140px;max-width:140px}
.planning-shell.kompakt .plan-cell{min-height:auto;padding:3px;font-size:9px}
.planning-shell.kompakt .assignee{font-size:9px;line-height:1.15;margin-bottom:2px}
.planning-shell.kompakt .plan-cell .zeit,
.planning-shell.kompakt .plan-cell .date,
.planning-shell.kompakt .plan-cell details,
.planning-shell.kompakt .plan-cell form,
.planning-shell.kompakt .plan-cell .tag{display:none}
.planning-shell.kompakt .open-pulse{font-size:7px;white-space:nowrap;margin-top:2px!important}

/* Geld in der Planungszelle: Umsatz, Kosten, Deckungsbeitrag untereinander.
   Bewusst sehr klein - es soll beim Planen mitlaufen, nicht die Besetzung
   verdecken. */
.plan-cell .geld{margin-top:3px;padding-top:3px;border-top:1px dotted #b9c7d6;
  display:flex;flex-direction:column;line-height:1.25;font-size:9px;white-space:nowrap}
.plan-cell .geld .kosten{color:#5c6c80}
.planning-shell.kompakt .plan-cell .geld{font-size:7.5px;margin-top:2px;padding-top:2px}
.planning-table td.summe,.planning-table th.summe{background:#f2f6fa;font-weight:600}
.planning-table td.summe .geld{display:flex;flex-direction:column;line-height:1.3;white-space:nowrap}
/* Tage ohne Dienst in der Auswahl (meist Wochenenden) schmal - mehr Platz fuer belegte Tage */
.planning-table th.leer,.planning-table td.leer{min-width:26px!important;max-width:30px!important;width:30px;padding:2px!important}
/* ---------------------------------------------------------------- Planungsfilter */
details.auswahl{position:relative}
details.auswahl>summary{list-style:none}
details.auswahl>summary::-webkit-details-marker{display:none}
.auswahl-liste{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:360px;max-width:calc(100vw - 32px);max-height:420px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px}
.auswahl-gruppe{padding:6px 0;border-top:1px solid #eef2f6}
.auswahl-liste label{display:flex;gap:7px;align-items:center;margin:0;padding:3px 2px;font-size:var(--t-dicht);font-weight:400;cursor:pointer}
.auswahl-liste label input{width:auto}
.auswahl-kunde{font-weight:600!important;font-size:var(--t-dicht)!important;color:#43546a}
.auswahl-objekt{padding-left:22px!important;color:#5d6c7e}
.auswahl-liste .muted{font-weight:400;font-size:var(--t-klein)}
.filter-panel{left:auto;right:0;width:380px;max-height:none;padding:10px 12px}
.filter-panel input[type=search]{margin-bottom:4px}
.filter-objekte{max-height:300px;overflow:auto;margin:0 -4px;padding:0 4px}
.filter-schalter{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.filter-fuss{display:flex;gap:6px;margin-top:8px}
.filter-ansichten{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.chip-zeile{display:inline-flex;align-items:center;margin:0 6px 6px 0}
.chip-weg{border:0;background:none;color:#5c6c80;cursor:pointer;font-size:var(--t-mittel);padding:0 2px}
.btn.filter-aktiv{background:#fff;color:var(--blue);border:2px solid var(--blue)}
details.kosten-hinweis{margin:0 0 12px;padding:8px 12px;border-radius:10px;background:#fdebed;color:#8f1d26;font-size:var(--t-dicht);border:1px solid #f3c2c7}
details.kosten-hinweis>summary{cursor:pointer;list-style:none}
details.kosten-hinweis>summary::-webkit-details-marker{display:none}
.kosten-hinweis-auf{margin-left:6px;text-decoration:underline;font-size:var(--t-klein)}
details.kosten-hinweis[open] .kosten-hinweis-auf{display:none}
details.kosten-hinweis a{color:#8f1d26}
.chip{display:inline-block;padding:5px 10px;border-radius:999px;background:#e8f0fb;color:#174f92;font-size:var(--t-dicht);font-weight:600;text-decoration:none}
.chip.aktiv{background:var(--blue);color:#fff}
.planning-table tfoot td{background:#eef3f8;border-top:2px solid #cdd9e6;position:sticky;bottom:0}
.planning-table tfoot td.summe .geld,.planning-table td.summe .geld{border:0;margin:0;padding:0;font-size:9px}
.planning-table{border-collapse:separate;border-spacing:0;min-width:max-content}
.planning-table th,.planning-table td{min-width:92px;max-width:130px;padding:5px;border-right:1px solid #e5edf5;border-bottom:1px solid #e5edf5}
.planning-table th:first-child,.planning-table td:first-child{position:sticky;left:0;z-index:4;min-width:175px;max-width:175px;background:#fff}
.planning-table th:first-child{background:#eef3f8;z-index:5}
.planning-table th.weekend{background:#f6f1e6}
.planning-table th.holiday,.planning-table td.holiday{background:#fff0f1}
.plan-cell{min-height:72px;border-radius:8px;padding:6px;background:#f5f8fb;font-size:var(--t-mikro);margin-bottom:4px}
.plan-cell.open{background:#fff0f1;border:1px solid #f3a4aa}
.plan-cell.partial{background:#fff7e6;border:1px solid #ffd273}
.plan-cell.full{background:#eaf8f2;border:1px solid #9bddc3}
.plan-cell .date{font-weight:600}
.assignee{background:#fff;border:1px solid #dce5ef;border-radius:6px;padding:4px;margin-top:4px}
.assignee strong{display:block}
.assignee.noshow{opacity:.5;text-decoration:line-through}
.open-pulse{color:var(--red-text);font-weight:700;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.35}}
.modalish{border:1px dashed #b8c9db;background:#f9fbfd;border-radius:12px;padding:14px;margin-top:12px}
/* Dasselbe Formular, aber in einer Tabellenzelle: der gestrichelte Rahmen von
   .modalish macht jede Zeile doppelt so hoch, auch wenn nichts aufgeklappt ist. */
.inline-wahl>summary{margin:0}
.inline-wahl[open]{border:1px dashed #b8c9db;background:#f9fbfd;border-radius:12px;padding:12px}
.inline-wahl[open]>summary{margin-bottom:8px}
.split{display:flex;gap:10px;align-items:center;justify-content:space-between}
.avatar{width:96px;height:116px;border-radius:12px;object-fit:cover;background:#e7eef6;border:1px solid var(--line)}
/* Dokumentzeilen: eine Datei ist ein Listeneintrag, kein Absatz. Dateiname in
   normaler Staerke, Art und Gueltigkeit klein daneben statt darunter - zwanzig
   Unterlagen passten sonst nicht mehr auf den Bildschirm. */
.doc-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:4px 0;border-bottom:1px solid #edf2f6;font-size:var(--t-dicht);line-height:1.35}
.doc-row:last-child{border-bottom:0}
.doc-row strong{font-weight:600}
.doc-row small.muted{display:inline!important;margin-left:8px;font-size:var(--t-klein)}
.doc-row .tag{padding:0 5px;font-size:var(--t-mikro)}
.doc-row .btn.small{padding:2px 9px;font-size:var(--t-klein)}
.expiry.bad{color:var(--red-text);font-weight:700}
.portal{max-width:760px;margin:20px auto;padding:0 14px}
/* Das Logo steht ueber dem blauen Kopf, nicht darin: auf weissem Grund ist es
   lesbar, egal welche Fassung der Betrieb hinterlegt hat. */
.portal-logo{margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--gold)}
.portal-logo img{display:block;max-width:210px;max-height:56px;object-fit:contain}
.portal .hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:18px;padding:20px}
.portal-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;margin-top:12px;box-shadow:var(--shadow)}
.portal-card.today-card{border:2px solid var(--blue)}
/* Der Verlauf liegt auf <body> und wird von dort auf die ganze Flaeche gezogen - ohne no-repeat und Grundfarbe kachelt er sichtbar, sobald das Fenster hoeher
   ist als der Inhalt. */
.login-page{min-height:100vh;display:grid;place-items:center;background:var(--navy) radial-gradient(circle at 30% 10%,#1e4272,var(--navy) 52%) no-repeat}
.login-card{width:min(440px,92vw);background:#fff;padding:28px;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.login-card h1{margin:0 0 5px}
/* SHALA in Gold wie im Logo - auf weissem Grund braucht es den dunkleren Ton,
   reines Logogold waere hier zu hell zum Lesen. */
.login-card h1 b{color:#b07d0a;font-weight:700}
.muted{color:var(--muted)}
.section-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.section-tabs a{padding:7px 10px;border-radius:8px;background:#eef3f8;text-decoration:none;font-size:var(--t-dicht);font-weight:600}
.section-tabs a.active{background:var(--blue);color:#fff}
details>summary{cursor:pointer}
details>summary.btn{list-style:none}
details>summary.btn::-webkit-details-marker{display:none}
code{background:#eef3f8;padding:1px 5px;border-radius:4px;font-size:var(--t-dicht)}
/* .grid.kpi und .grid.auto brauchen hier nichts mehr - die regeln sich selbst. */
@media(max-width:1200px){.grid.two{grid-template-columns:1fr}.form-grid,.form-grid.six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.app{display:block}.sidebar{display:none}.content{padding:15px}.grid.kpi,.grid.three{grid-template-columns:1fr 1fr}.form-grid,.form-grid.two,.form-grid.six{grid-template-columns:1fr}.topbar{padding:0 14px}.title-row{align-items:flex-start;flex-direction:column}}
/* ---------------------------------------------------------------- Tablett

   Zwischen Handy und Schreibtisch: Tablet quer 1024, hochkant 768 - beides lag
   bisher im Niemandsland. Hier wird die Seitenleiste schmaler, die Schrift groesser
   und jedes Bedienelement so hoch, dass ein Finger es trifft (Richtwert 32 px). */
@media (min-width:600px) and (max-width:1180px){
  /* Hochkant (768) uebernimmt die Handyregel weiter oben und blendet die Leiste aus -
     die Breitenangabe hier gilt nur, solange sie sichtbar ist (ab 781). */
  .app{grid-template-columns:200px 1fr}
  .sidebar{padding:16px 10px}
  .content{padding:16px 16px 40px}
  .title-row h1{font-size:22px}
  table{font-size:var(--t-dicht)}
  th,td{padding:7px 8px}
  .btn{padding:10px 14px}
  .btn.small{padding:8px 11px;font-size:var(--t-dicht)}
  input,select,textarea{min-height:38px;font-size:var(--t-normal)}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  .checkboxes label{padding:4px 0}
  .grid.kpi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .form-grid,.form-grid.six,.form-grid.two{grid-template-columns:repeat(2,1fr)}
  /* Das Monatsraster bleibt dicht, aber lesbar: 7,5 Pixel sind auf Glas nichts. */
  .planning-table{font-size:var(--t-mikro)}
  .planning-table th,.planning-table td{padding:3px 4px}
  /* Kleinstschrift hochziehen: Unter 11 Pixel liest auf einem Tablett niemand mehr
     mit, und gerade Etiketten und Tabellenkoepfe tragen die Bedeutung. */
  th,.tag,.badge,small,.muted,.hint,.zeile-klein{font-size:var(--t-klein)}
  .planning-table th,.planning-table td,.planning-table .tag{font-size:inherit}
  .druckwahl-schnell button{min-height:30px}
}

@media print{.sidebar,.topbar,.no-print,.btn,.nav-form{display:none!important}.app{display:block}.content{padding:0}.card{box-shadow:none;border:0}body{background:#fff}}

/* Fenster zum Besetzen eines Dienstes. Bewusst ein echtes <dialog>: es liegt
   ueber dem Raster statt darin, laesst sich mit Escape schliessen und kann die
   Spaltenbreite nicht mehr sprengen. */
dialog.dialog{border:0;border-radius:14px;padding:22px;width:min(460px,92vw);
  box-shadow:0 24px 60px rgba(0,0,0,.3);color:var(--text);font-family:inherit}
dialog.dialog::backdrop{background:rgba(11,30,53,.45)}
dialog.dialog h2{margin:0}
dialog.dialog .form-grid{grid-template-columns:1fr 1fr 1fr}
/* Trefferliste im Besetzen-Fenster: als Liste statt Klappmenue, damit man die
   Vorschlaege beim Tippen sofort sieht. */
dialog.dialog select[size]{height:auto;padding:4px;font-size:var(--t-dicht)}
dialog.dialog select[size] option{padding:4px 6px;border-radius:5px}

/* Statusmarken im Stempelprotokoll der Mitarbeiter-App.
   Sie hatten eine eigene Palette, die dem Etikett (.tag) zum Verwechseln aehnlich
   sah und dabei unter 4,5:1 blieb (ok 4,38, warn 4,09). Jetzt dieselben Farben wie
   .tag - ein Zustand sieht im ganzen Haus gleich aus, und die Werte stimmen. */
.badge{display:inline-block;font-size:var(--t-mikro);font-weight:600;padding:3px 8px;border-radius:99px;background:#eef1f5;color:#4c5b6d;letter-spacing:.2px}
.badge.ok{background:#e6f7f0;color:var(--green-text)}
.badge.warn{background:#fff4d8;color:var(--amber-text)}
.badge.bad{background:#fdebed;color:var(--red-text)}

/* Notruf-Band im Kopf jeder Seite (static/app.js fragt /notrufe/offen.json) */
.notruf-band{position:sticky;top:0;z-index:60;display:flex;gap:12px;align-items:center;justify-content:center;
  padding:10px 16px;background:#c62828;color:#fff;font-weight:600;animation:notruf-blinken 1.2s ease-in-out infinite}
.notruf-band a{color:#fff;text-decoration:underline}
@keyframes notruf-blinken{50%{background:#8e1b1b}}
@media (prefers-reduced-motion:reduce){.notruf-band{animation:none}}
.btn.notruf-knopf{background:#c62828;color:#fff}

/* Dienstplan freigeben: Filterleiste und Baum aus Objekt, Mitarbeiter, Dienst.
   Die Listen werden lang (ein Objekt kann 200 Leute haben), deshalb Klappstufen
   statt einer Wolke aus Knoepfen. */
/* Filterleiste: eine ruhige Zeile. Jedes Feld so breit wie noetig, nichts zieht sich
   ueber die halbe Seite - sonst wandert der Blick zum Filter statt zur Liste. */
.filter-leiste{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;padding-bottom:10px;border-bottom:1px solid var(--line)}
.filter-leiste label{display:flex;flex-direction:column;gap:3px;font-size:var(--t-mikro);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.filter-leiste select,.filter-leiste input{min-width:0;width:200px;max-width:100%;font-size:var(--t-normal);padding:5px 8px}
.filter-leiste input[type=date]{width:140px}
.filter-leiste input[type=number]{width:110px}
.filter-knoepfe{display:flex;gap:6px;margin-left:auto}
.frei-baum{margin-top:6px}
.frei-objekt{border-bottom:1px solid var(--line)}
/* Haekchen steht neben dem Klappblock, nicht darin: im <summary> wuerde jeder
   Klick auf das Haekchen zugleich den Zweig auf- und zuklappen. */
.frei-reihe{display:flex;align-items:flex-start;gap:9px}
.frei-reihe>input[type=checkbox]{margin-top:12px}
.frei-klapp{flex:1;min-width:0}
.frei-klapp>summary{display:flex;align-items:center;gap:9px;padding:8px 6px;border-radius:7px;cursor:pointer;list-style:none}
.frei-klapp>summary::-webkit-details-marker{display:none}
.frei-klapp>summary::before{content:"▸";color:var(--muted);font-size:var(--t-klein);transition:transform .12s}
.frei-klapp[open]>summary::before{transform:rotate(90deg)}
.frei-klapp>summary:hover{background:#f6f8fb}
.frei-reihe-objekt>.frei-klapp>summary{font-weight:600;font-size:var(--t-mittel);padding:11px 6px}
.frei-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frei-zahl{margin-left:auto;font-size:var(--t-dicht);font-weight:400;white-space:nowrap}
.frei-inhalt{padding:0 0 8px 14px;border-left:2px solid var(--line);margin-left:4px}
.frei-person{margin:1px 0}
.frei-liste{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px 18px}
.frei-dienst{display:flex;align-items:center;gap:10px;padding:3px 6px;border-radius:6px;font-size:var(--t-dicht);cursor:pointer}
.frei-dienst:hover{background:#f6f8fb}
.frei-leer{padding:14px 2px}
@media(max-width:780px){.filter-knoepfe{margin-left:0}.filter-leiste label{flex:1 1 140px}.filter-leiste select,.filter-leiste input{width:100%}}
/* Ohne das zieht die globale Regel input{width:100%} jedes Haekchen auf Zeilenbreite */
.frei-baum input[type=checkbox]{width:16px;height:16px;flex:none;margin:0;padding:0}
.frei-ueberschrift{margin:0 0 12px;font-size:var(--t-titel)}
/* Ampelzeile in Gelb: ein Hinweis ist weder erledigt (gruen) noch kritisch (rot) */
.ampel-zeile.gelb .ampel-punkt{background:var(--amber);box-shadow:0 0 0 4px #fff4d8}

/* Selten gebrauchte Menuepunkte: eingeklappt unter "Mehr". Sie bleiben in ihrer
   Gruppe und damit dort, wo man sie sucht - sie belegen nur keinen Platz mehr. */
.nav-mehr>summary{list-style:none;cursor:pointer;padding:7px 11px;margin:2px 0;border-radius:8px;
  font-size:var(--t-dicht);color:#93a8c0;display:flex;align-items:center;gap:6px}
.nav-mehr>summary::-webkit-details-marker{display:none}
.nav-mehr>summary::before{content:"▸";font-size:var(--t-mikro);transition:transform .12s}
.nav-mehr[open]>summary::before{transform:rotate(90deg)}
.nav-mehr>summary:hover{background:rgba(255,255,255,.05);color:#a9bdd4}
.nav-mehr-zahl{font-size:var(--t-klein);opacity:.7}

/* Dashboard-Kopf: Hinweise als schmale Leiste, damit die Zahlen oben stehen bleiben. */
.kopfleiste{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  margin:0 0 8px;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.kopf-marke{font-weight:600;font-size:var(--t-dicht);color:var(--muted);letter-spacing:.3px;margin-right:2px}
.kopf-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-dicht);line-height:1.4;
  padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;color:inherit;cursor:pointer}
.kopf-chip:hover{border-color:var(--blue)}
.kopf-chip.dringend{border-color:var(--red);color:var(--red-text);font-weight:600}
.kopf-chip.rechts{margin-left:auto}
.kopf-rest{font-size:var(--t-dicht)}

/* Spaltenfilter ueber einer Tabelle - schmal, damit die Tabelle der Blickfang bleibt. */
.tabellenfilter{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.tabellenfilter .tf-feld{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-dicht);color:var(--muted)}
.tabellenfilter select,.tabellenfilter .tf-suche{width:auto;min-width:130px;padding:3px 7px;font-size:var(--t-dicht);margin:0}
.tabellenfilter .tf-stand{font-size:var(--t-dicht)}

/* Einarbeitung: zwei Spalten, eine Zeile je Punkt - die Liste hat sonst zwei Seiten gefuellt. */
.ea-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:0 22px;margin-top:6px}
.ea-punkt{display:flex;align-items:center;gap:8px;min-width:0;padding:5px 0;border-bottom:1px solid var(--line)}
.ea-punkt form{display:inline-flex;margin:0}
.ea-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-normal)}
.ea-punkt.fertig .ea-text{text-decoration:line-through;color:var(--muted)}
.ea-haken{width:22px;height:22px;flex:none;border:1px solid var(--line);border-radius:50%;background:#fff;
  color:var(--muted);font-size:var(--t-dicht);line-height:1;cursor:pointer;padding:0}
.ea-haken.an{background:var(--green);border-color:var(--green);color:#fff}
.ea-app{flex:none;font-size:var(--t-mikro);letter-spacing:.4px;color:var(--blue);border:1px solid var(--line);
  border-radius:999px;padding:0 6px}
.ea-weg{border:0;background:none;color:var(--muted);cursor:pointer;font-size:var(--t-mittel);line-height:1;padding:0 2px}
.ea-weg:hover{color:var(--red-text)}

/* Kennzahlen in der Akte: eine Zeile statt dreier Kacheln. */
.zahlenleiste{display:flex;flex-wrap:wrap;align-items:stretch;
  margin:0 0 12px;padding:12px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:var(--t-dicht);color:var(--muted)}
/* Jede Kennzahl eine gleich breite Spalte, Wert gross oben, Bezeichnung darunter, mittig. */
.zahlenleiste > span{flex:1 1 130px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:2px 10px;text-align:center}
.zahlenleiste > span + span{border-left:1px solid var(--line)}
.zahlenleiste b{order:-1;font-size:var(--t-zahl);line-height:1.2;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:700px){.zahlenleiste > span{flex-basis:45%}.zahlenleiste > span + span{border-left:0}}
.zahlenleiste .warnt b{color:var(--amber-text)}

/* Berichtskarte: Titel fuehrt, Etiketten folgen, Aktionen stehen ruhig in der Fusszeile. */
.bericht-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bericht-titel>strong{font-size:var(--t-gross);line-height:1.3}
.bericht-merkmale{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;font-size:var(--t-klein)}
.bericht-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line)}
.bericht-fuss form{display:flex;align-items:center;gap:6px;margin:0}
.bericht-abschluss{flex:1;min-width:260px;justify-content:flex-end}
.bericht-abschluss input{flex:1;min-width:140px;padding:4px 8px;font-size:var(--t-dicht);margin:0}
.bericht-schalter{border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);
  font-size:var(--t-klein);padding:3px 10px;cursor:pointer}
.bericht-schalter.an{border-color:var(--green);color:var(--green-text)}
.bericht-schalter:hover{border-color:var(--blue);color:var(--blue)}
/* Objektinformationen: Besonderheiten oben (Band), Rest nach Zweck gruppiert */
.objinfo-band{margin-top:16px;padding:12px 16px 8px;border:1px solid #f0d9a5;border-left:5px solid var(--amber);
  border-radius:12px;background:#fff8e6}
.objinfo-band h2{margin:0 0 6px;font-size:var(--t-normal);text-transform:uppercase;letter-spacing:.6px;color:#8a5b00}
/* Als Klappkarte: der amberfarbene Rand bleibt, die Polsterung kommt von summary
   und .klapp-inhalt - sonst stuende innen doppelter Abstand. */
details.objinfo-band{padding:0}
details.objinfo-band>summary{padding:9px 14px}
details.objinfo-band .klapp-titel{font-size:var(--t-normal);text-transform:uppercase;letter-spacing:.6px;color:#8a5b00}
details.objinfo-band .klapp-inhalt{padding:2px 14px 10px;border-top-color:#f2e4bf}
details.objinfo-band .klapp-inhalt>.zeile:first-child{border-top:0}
.objinfo-band .zeile,.objinfo .zeile{display:grid;grid-template-columns:190px minmax(0,1fr);gap:2px 14px;padding:6px 0;
  border-top:1px solid #f2e4bf;font-size:var(--t-mittel);line-height:1.4}
.objinfo .zeile{grid-template-columns:170px minmax(0,1fr);border-top:0;border-bottom:1px solid #eef2f7;font-size:var(--t-normal)}
.objinfo-band h2+.zeile{border-top:0}
.objinfo-band .k,.objinfo .k{font-size:var(--t-dicht);font-weight:600;color:var(--muted)}
.objinfo-band .t,.objinfo .t{white-space:pre-wrap;overflow-wrap:anywhere}
.objinfo-band .kurz{display:flex;flex-wrap:wrap;gap:6px 28px;padding:8px 0 4px;border-top:1px solid #f2e4bf}
.objinfo-band .kurz>div{display:flex;flex-direction:column;min-width:170px;max-width:340px}
.objinfo-band .kurz .t{font-size:var(--t-mittel)}
.objinfo .gruppe h3{margin:14px 0 2px;font-size:var(--t-klein);text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.objinfo .gruppe:first-child h3{margin-top:2px}
.objinfo .zeile a{color:var(--blue);text-decoration:none}
.objinfo .zeile a:hover{text-decoration:underline}
.objinfo-fehlt{margin-top:12px;padding:8px 10px;border-radius:8px;background:#f4f7fb;color:var(--muted);font-size:var(--t-dicht)}
@media(max-width:700px){.objinfo-band .zeile,.objinfo .zeile{grid-template-columns:1fr}}

/* Reiter: Bereiche, die sich per Klick auf die Ueberschrift einklappen lassen */
details.reiter{padding:0}
details.reiter>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;border-radius:16px;user-select:none}
details.reiter>summary::-webkit-details-marker{display:none}
details.reiter>summary::after{content:"\25BE";flex:none;margin-left:6px;color:var(--muted);font-size:var(--t-titel);line-height:1;
  transition:transform .15s}
details.reiter:not([open])>summary::after{transform:rotate(-90deg)}
details.reiter>summary:hover{background:#f7faff}
details.reiter[open]>summary{border-bottom:1px solid var(--line);border-radius:16px 16px 0 0}
details.reiter:not([open])>summary .subtitle{display:none}
/* Die Ueberschrift eines Reiters benennt einen Bereich, sie eroeffnet keine Seite -
   Titelgroesse ist hier verschenkte Hoehe. */
details.reiter>summary h2{margin:0;font-size:var(--t-titel)}
details.reiter>.reiter-inhalt{padding:14px 18px 18px}

/* Preistabelle im Objekt: Zahlenfelder klein und rechtsbuendig */
.preistabelle input{width:100px;padding:6px 8px;text-align:right;font-size:var(--t-normal)}
.preistabelle td:first-child input{width:140px;text-align:left}
.preistabelle td:nth-child(4) input{width:90px}
.preistabelle td:nth-child(n+5):nth-child(-n+8) input{width:64px}
.preistabelle select{font-size:var(--t-dicht);padding:5px 6px;max-width:170px}
.preistabelle td.gueltig input{width:128px;text-align:left;display:block;margin:1px 0}
/* "Neuer Preis ab ...": kleines Formular ueber der Zeile, nicht in der Tabelle */
.neuer-preis-form{position:absolute;right:0;top:100%;z-index:6;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:10px;display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));
  gap:6px 8px;width:max-content;max-width:440px;text-align:left}
.neuer-preis-form label{font-size:var(--t-klein);display:flex;flex-direction:column;gap:2px}
.neuer-preis-form input,.neuer-preis-form select{width:100%;text-align:left}
.neuer-preis-form button{grid-column:1/-1}
.preislink{font-size:var(--t-klein);font-weight:600;margin-left:4px}

/* Stammdaten zum Nachschlagen: Beschriftung klein darueber, Wert lesbar darunter. */
.stammzeile{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:4px}
.stammzeile>span{display:flex;flex-direction:column;min-width:0;font-size:var(--t-normal)}
.stammzeile i{font-style:normal;font-size:var(--t-mikro);letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}

/* Gewerbeunterlagen: eine Zeile je Unterlage - als Tabelle mit Hinweistext fuellte
   die Liste den halben Bildschirm, obwohl nur "was fehlt?" zaehlt. */
.unterlagen-liste{margin-top:8px;border-top:1px solid var(--line)}
.ul-zeile{display:grid;grid-template-columns:minmax(200px,1.6fr) minmax(130px,1fr) minmax(150px,1fr) auto;
  gap:10px;align-items:center;padding:6px 2px;border-bottom:1px solid var(--line);font-size:var(--t-dicht)}
.ul-zeile.fehlt .ul-name,.ul-zeile.abgelaufen .ul-name{font-weight:600}
.ul-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ul-name b{color:var(--red-text)}
.ul-zeit{color:var(--muted);white-space:nowrap}
.ul-stand{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:var(--t-klein)}
.ul-aktionen{display:flex;gap:8px;align-items:center;justify-content:flex-end;font-size:var(--t-klein)}
.ul-aktionen form{margin:0}
.ul-weg{border:0;background:none;color:var(--muted);cursor:pointer;font-size:var(--t-klein);padding:0}
.ul-weg:hover{color:var(--red-text);text-decoration:underline}
/* Kleine Aufklapper in einer Zeile: das Formular liegt ueber der Liste, nicht darin. */
.inline-klapp{display:inline-block;position:relative}
.inline-klapp>summary{list-style:none;cursor:pointer;color:var(--blue)}
.inline-klapp>summary::-webkit-details-marker{display:none}
.inline-klapp[open]>summary{font-weight:600}
.inline-klapp .feldreihe{position:absolute;right:0;top:100%;z-index:5;background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:10px;
  display:flex;gap:6px;flex-wrap:wrap;width:max-content;max-width:420px}
@media(max-width:900px){.ul-zeile{grid-template-columns:1fr 1fr}.ul-aktionen{justify-content:flex-start}}

/* Aktionsspalte einer Tabelle: alles rechtsbuendig in einer Reihe, damit die
   Loeschknoepfe untereinander stehen - auch wenn eine Zeile kein "Öffnen" hat. */
td.aktionszelle{white-space:nowrap;text-align:right}
td.aktionszelle>*{vertical-align:middle}
td.aktionszelle form{display:inline-flex;margin:0}
td.aktionszelle .btn,td.aktionszelle form{margin-left:6px}
td.aktionszelle .btn.danger{min-width:30px}

/* Namen in Listen: dieselbe Schrift, dieselbe Groesse wie die uebrige Zeile - nur
   in Grossbuchstaben. Das hebt den Nachnamen heraus, ohne die Zeile zu sprengen;
   groesser und halbfett war in einer Liste mit 150 Zeilen unruhig. */
td.ma-name{font-size:inherit;font-weight:400;color:var(--text);text-transform:uppercase}

/* Filterleiste (Kontrollrundgaenge): festes Raster statt umbrechender Zeile - jedes Feld gleich breit,
   Beschriftung darueber, Aktionen in einer eigenen Reihe. */
.filterkarte{padding-bottom:14px}
.filterraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 14px;align-items:end}
.filterraster .filterfeld{display:flex;flex-direction:column;gap:4px;margin:0;font-weight:600}
.filterraster .filterfeld > span{font-size:var(--t-klein);letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.filterraster .filterfeld select,.filterraster .filterfeld input{width:100%;margin:0}
.filterraster .filterfeld.schmal{max-width:260px}
@media (min-width:1200px){.filterraster.einzeilig{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.filterraster.einzeilig .filterfeld.schmal{max-width:none}}
.filteraktionen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.filteraktionen .filtertrenner{flex:1 1 auto}
@media (max-width:900px){.filteraktionen .filtertrenner{display:none}}


/* Global, nicht je Bauteil: Wer Bewegung abgestellt hat, bekommt weder den Puls an
   offenen Diensten noch die Uebergaenge an Knoepfen. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Karten untereinander in einer Akte: ein Abstand fuer alle, gesetzt am Stapel statt
   an jeder Karte. Vorher trug jede ihr eigenes margin-top - eine hatte keins, und
   zwei Balken klebten aneinander, waehrend die anderen 16 px Luft hatten. */
.kartenstapel{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.kartenstapel>details.card{margin:0}

/* Passbild in der Mitarbeiterliste: dasselbe Hochformat wie in der Akte, nur klein.
   Ohne Foto die Initialen auf demselben Grund - die Spalte bleibt gleich breit. */
table.kompakt th.ma-foto,table.kompakt td.ma-foto{width:40px;padding-top:3px;padding-bottom:3px}
td.ma-foto img,td.ma-foto span{display:grid;place-items:center;width:28px;height:34px;border-radius:6px;
  object-fit:cover;background:#e7eef6;border:1px solid var(--line);color:#8aa0b8;font-size:var(--t-mikro);font-weight:600}

/* Personenwahl (Zugang Kontrollrundgaenge): gewaehlte Personen als Chips mit x */
.pw-gewaehlt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px}
.pw-gewaehlt .chip button{border:0;background:none;color:inherit;font-weight:600;cursor:pointer;padding:0 0 0 4px;font-size:var(--t-mittel);line-height:1}
.personenwahl select{width:100%;max-width:520px}.personenwahl input[type=text]{max-width:520px}
form:has(input[name=modus][value=alle]:checked) .personenwahl{display:none}
.zahlenleiste b.positive{color:var(--green-text)}.zahlenleiste b.negative{color:var(--red-text)}

/* Ausklappmenue "Drucken & Export" in Kopfzeilen */
.export-menue{position:relative}
.export-menue>summary{list-style:none}
.export-menue>summary::-webkit-details-marker{display:none}
.export-menue-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:260px;padding:6px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(15,35,65,.16)}
.export-menue-liste a{display:block;padding:8px 10px;border-radius:7px;color:var(--text);font-weight:600;font-size:var(--t-normal);text-decoration:none}
.export-menue-liste a small{display:block;font-weight:400;color:var(--muted);font-size:var(--t-klein);margin-top:1px}
.export-menue-liste a:hover,.export-menue-liste a:focus-visible{background:#eef4fd}

/* Arbeitsbericht: Briefkopf mit Logo, Tabelle in Hausfarben (Marine-Kopf, Goldlinie) */
.ab-kopf{display:flex;align-items:center;gap:18px;padding:4px 2px 14px;margin-bottom:12px;border-bottom:2px solid var(--gold)}
.ab-logo{height:48px;width:auto;max-width:180px;object-fit:contain;order:9}   /* Logo rechts - Hausregel auf jedem Blatt */
.ab-kopf-text{flex:1;min-width:220px}
.ab-kopf-titel{font-size:var(--t-seite);font-weight:600;color:var(--navy);letter-spacing:.2px}
.ab-kopf-zeile{color:var(--muted);font-size:var(--t-normal);margin-top:2px}
.ab-kopf-zahl{text-align:center;padding:6px 14px;border-left:1px solid var(--line)}
.ab-kopf-zahl strong{display:block;font-size:var(--t-seite);color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums}
.ab-kopf-zahl span{font-size:var(--t-klein);color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.arbeitsbericht{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.arbeitsbericht th{background:var(--navy);color:#fff;font-size:var(--t-klein);font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  padding:9px 8px;text-align:left;border-bottom:3px solid var(--gold)}
.arbeitsbericht td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.arbeitsbericht tbody tr:last-child td{border-bottom:0}
.arbeitsbericht tbody tr:hover td{background:#f7f9fc}
.arbeitsbericht .ab-nr{width:44px;text-align:center;color:var(--muted);font-weight:600}
.arbeitsbericht .ab-pos{width:170px;font-weight:700;color:var(--navy)}
.arbeitsbericht .ab-zeit{font-variant-numeric:tabular-nums;width:84px}
.arbeitsbericht .ab-bereich{color:var(--muted);font-size:var(--t-dicht)}
.arbeitsbericht input{width:100%;margin:0;min-width:0;padding:5px 7px;font-size:var(--t-normal)}
.arbeitsbericht input[type=checkbox]{width:auto}
.arbeitsbericht .ab-weg{width:44px;text-align:center}
.arbeitsbericht tr.ab-neu td{background:#fbfcfe}
.arbeitsbericht tr.ab-offen td{background:#fff7f7}.arbeitsbericht tr.ab-offen input[name^=name_]{border-color:#f0b4b9}
.ab-kopf{flex-wrap:wrap}
.arbeitsbericht .ab-taetigkeit{min-width:340px;width:34%}
.arbeitsbericht textarea{width:100%;margin:0;min-height:38px;padding:5px 7px;font-size:var(--t-normal);resize:vertical;font-family:inherit;line-height:1.35}
.wn-zusammen{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe;max-width:560px}
.wn-zusammen-titel{font-weight:600;color:var(--navy);margin-bottom:6px}
.wn-zusammen td{padding:3px 6px}
.arbeitsbericht .ab-vorlage{margin-top:4px;width:100%;font-size:var(--t-dicht);padding:3px 6px;color:var(--muted)}

/* Wochennachweis von Hand bearbeiten */
.wn-bearbeiten td{vertical-align:top}
.wn-bearbeiten .wn-tag{min-width:96px}
.wn-bearbeiten .wn-tag input{width:100%;padding:3px 4px;margin-bottom:3px;font-size:var(--t-dicht)}
.wn-bearbeiten .wn-tag input[name^="p_"]{opacity:.8}

/* Kundenlogo: klein vor dem Namen; ohne Logo ein ruhiges Initial in derselben Groesse */
.firmenlogo{flex:none;width:28px;height:28px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:2px}
.firmenlogo.leer{display:inline-flex;align-items:center;justify-content:center;background:#eef3f9;color:#11385B;font-weight:600;font-size:var(--t-normal);padding:0}
.firmenlogo.gross{width:48px;height:48px;border-radius:10px;padding:4px}
.firmenlogo.leer.gross{font-size:var(--t-zahl);padding:0}
/* --primary gab es nie; gegriffen hat immer der Ersatzwert. Jetzt die Hausfarbe. */
.linkbutton{background:none;border:0;padding:0;color:var(--blue);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkbutton:hover{color:#11385B}
.feld-inline{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-dicht);font-weight:600;color:var(--muted);margin:0}
.wn-woche{margin:22px 0 0;font-size:var(--t-titel);color:#11385B;border-bottom:2px solid #F0BA37;padding-bottom:4px}
.wn-unterzeichnen .signatur{max-width:620px;margin-top:10px}
.wn-unterschrift{margin:10px 0;display:inline-block;border-bottom:1px solid var(--line);padding:4px 12px}
.wn-unterschrift img{height:60px;display:block}
.btn.adobe{background:#b30b00;border-color:#b30b00;color:#fff}
.btn.adobe:disabled{opacity:.5}
.pause-korrektur{display:flex;gap:4px;align-items:center;font-size:var(--t-klein);color:#8a5a00;margin-top:3px;white-space:nowrap}
.pause-korrektur input{width:auto}
/* Stunden-Ampel in Vorschlagslisten (stunden_ampel): gruen im Rahmen, gelb ab 90 %, rot drueber */
.std-ampel{display:inline-block;font-size:var(--t-mikro);font-weight:600;border-radius:4px;padding:0 5px;margin-left:4px;white-space:normal}
/* Dritte Palette fuer denselben Gedanken - jetzt dieselbe wie Etikett und Marke.
   Gruen lag vorher bei 3,93:1 und war damit zu hell zum Lesen. */
.std-ampel.gruen{background:#e6f7f0;color:var(--green-text)}.std-ampel.gelb{background:#fff4d8;color:var(--amber-text)}.std-ampel.rot{background:#fdebed;color:var(--red-text)}
.std-ampel b{color:var(--red-text);font-weight:700}

/* Zahl am Menuepunkt "Zur Freigabe": was wartet, soll man sehen, ohne hinzuklicken. */
.nav-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  margin-left:auto;padding:0 5px;border-radius:999px;background:var(--gold);color:var(--navy);
  font-size:11px;font-weight:700;line-height:1}

/* ---------------------------------------------------------------- Pflichtfelder
   Ein Stern an jedem Pflichtfeld - gesetzt vom Stylesheet, nicht von Hand im Template.
   Vorher trug ihn, wer daran gedacht hat: 44 Pflichtfelder in Objekt-, Personal- und
   Nachunternehmerakte sahen aus wie freiwillige, und das Speichern brach erst am Ende ab.
   `:has(+ ...)` deckt das uebliche Muster <label>Text</label><input required> ab. */
label:has(+ input[required]),
label:has(+ select[required]),
label:has(+ textarea[required]) { position: relative; }
label:has(+ input[required])::after,
label:has(+ select[required])::after,
label:has(+ textarea[required])::after { content: " *"; color: var(--red); font-weight: 700; }
/* Umschliessendes <label>Text <input required></label>: der Stern gehoert vor den Text,
   sonst stuende er hinter dem Eingabefeld. */
label:has(> input[required]):not(:has(> input[type="checkbox"]))::before { content: "* "; color: var(--red); font-weight: 700; }
.pflicht-legende { color: var(--muted); font-size: var(--t-klein); margin-top: 6px; }
.pflicht-legende b { color: var(--red); }

/* ---------------------------------------------------------------- Videoturm am Objekt
   Die Aktionen stehen in einer Zeile nebeneinander und klappen an Ort und Stelle auf.
   Vorher war jede in einem eigenen Kasten - drei halbleere Spalten quer ueber den
   Bildschirm, und der Knopf, den man sucht, irgendwo dazwischen. */
.turm-aktionen{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.turm-aktionen .wachse{flex:1 1 20px}
.turm-aktionen>.aktion{margin-top:0;padding:0;border:0;background:none;min-width:0}
.turm-aktionen>.aktion>summary{list-style:none;display:inline-block}
.turm-aktionen>.aktion>summary::-webkit-details-marker{display:none}
.turm-aktionen>.aktion[open]{flex:1 1 100%;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;background:#fbfcfe}
.turm-aktionen .aktion-inhalt{margin-top:10px}
.btn.gefahr{color:var(--red-text);border-color:#f0c4c9}
.btn.gefahr:hover{background:#fdebed;border-color:#e39aa3}
/* Buchungen je Turm: Monatsband und Schlusszeile heben sich ab, ohne dass jede Zeile
   fett wird. Die Bemerkung steht klein unter der Leistung, nicht in eigener Spalte. */
table.turmposten tr.gruppe td{background:#f4f7fb;font-size:var(--t-klein);padding:5px 10px}
table.turmposten tr.summe td{background:#f9fafc;border-top:2px solid var(--line)}

/* ---------------------------------------------------------------- Monatsplanung: Kopf
   Fuenf gleich aussehende Knoepfe nebeneinander sind keine Rangfolge, sondern eine Wand.
   Zwei stehen sichtbar, der Rest liegt im Menü "Weitere" - mit einer Zeile Erklaerung,
   damit "Auto-Planung" nicht geraten werden muss. */
.mp-knoepfe{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.export-menue-liste button.knopf-zeile{display:block;width:100%;text-align:left;padding:8px 10px;
  border:0;border-radius:7px;background:none;color:var(--text);font-weight:600;
  font-size:var(--t-normal);cursor:pointer}
.export-menue-liste button.knopf-zeile:hover{background:#f2f7fc}
.export-menue-liste button.knopf-zeile small{display:block;font-weight:400;color:var(--muted);
  font-size:var(--t-klein);margin-top:1px}
.export-menue-liste form{margin:0}
/* Die Legende: einmal gelesen, nie wieder gebraucht - aber fuer den Neuen da. */
.mp-legende-klapp{margin-top:8px}
.mp-legende-klapp>summary{font-size:var(--t-klein);color:var(--muted);cursor:pointer;
  display:inline-block;padding:2px 0}
.mp-legende-klapp>summary:hover{color:var(--text)}
.mp-legende-klapp[open]>summary{margin-bottom:4px}

/* Ist-Zeiten: die offene Zeile soll man sehen, ohne sie zu suchen. */
.times-table tr.zeile-offen > td { background: #f2f7fd; }
.times-table tr.zeile-offen > td:first-child { box-shadow: inset 3px 0 0 var(--navy, #11385b); }
.times-table tr.zeile-laedt { opacity: .55; }

/* Hilfe steht am Fuss der Leiste - erreichbar, ohne die Gruppen zu verlängern. */
.nav-hilfe { margin-top: 10px; opacity: .85; }
.nav-hilfe:hover, .nav-hilfe.aktiv { opacity: 1; }