/* Pfyl's Office – Custom Styles */

/* ═══ SCHRIFTEN (Redesign Etappe C1, 18.09.2026) ═══════════════════════════
   Wie demo.pfyls.ch, selbst gehostet – die CSP erlaubt nur die eigene Domain,
   und Google Fonts kommt nie in Frage (Skill pfyls-brand §7).
   Pfad relativ zu dieser Datei: assets/fonts/. */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/source-serif-4-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/source-serif-4-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/source-serif-4-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans';  font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans';  font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans';  font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono';  font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono';  font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-mono-600.woff2') format('woff2'); }

/* Schriftgrösse je Benutzer: EIN Wert am <html> (Pref ui_schrift, serverseitig gerendert),
   alles andere ist rem. Prozent statt px, damit die Browser-Einstellung weiter gilt.
   klein = Stand bis 17.09.2026 (Text 14.7px) · gross = wie die Demo (Text ~17px). */
html                        { font-size: 100%; }
html[data-schrift="mittel"] { font-size: 108%; }
html[data-schrift="gross"]  { font-size: 116%; }

/* Seit 18.09.2026 auf allen Seiten, auch login.php / login_2fa.php (die verlinken style.css von Hand).
   Mail-HTML bleibt unberührt – Mails tragen ihre Schrift selbst. */
:root {
    --bs-body-font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-font-monospace:   'IBM Plex Mono', SFMono-Regular, Consolas, monospace;
}
h1, h2, h3,
.seitenkopf-titel,
.offcanvas-title, .modal-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
}
/* Zahlen, Nummern, Beträge: gleich breite Ziffern, damit Spalten sauber untereinander stehen */
.mono { font-family: var(--bs-font-monospace); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Kleine Schrift in vier Stufen (Etappe C2, 18.09.2026). Ersetzt die rund ein Dutzend verschiedenen
   style="font-size:…"-Werte zwischen .55 und .85rem. Braucht ein Bauteil eine kleine Schrift,
   nimmt es eine dieser vier – keine fünfte erfinden. */
.text-xxs { font-size: .6rem; }
.text-xs  { font-size: .68rem; }
.text-s   { font-size: .75rem; }
.text-m   { font-size: .82rem; }

/* Bausteine, die auf mehreren Seiten vorkommen */
/* Filterleiste (includes/filterbar.php) – vorher style='…' im erzeugten HTML */
.fb-suche       { min-width: 13.75rem; max-width: 26.25rem; }
.fb-haken-platz { display: inline-block; width: 1.1em; }      /* hält den Text bündig, wo kein Haken steht */
.fb-menue       { max-height: 70vh; overflow: auto; }
.fb-feld        { width: 9.375rem; }
/* Feste Masse als Klassen statt style="..." (C2). Die Zahl ist der fruehere px-Wert bei «klein»,
   der Wert steht in rem und waechst mit der Schriftgroesse. Fehlt ein Mass: hier eine Zeile ergaenzen. */
.bmax-220  { max-width: 13.75rem; }
.bmax-736  { max-width: 46rem; }
.bmin-60   { min-width: 3.75rem; }
.bmin-80   { min-width: 5rem; }
.bmin-130  { min-width: 8.125rem; }
.bmin-210  { min-width: 13.125rem; }
.bmin-216  { min-width: 13.5rem; }
.bx-30     { width: 1.875rem; }
.bx-32     { width: 2rem; }
.bx-90     { width: 5.625rem; }
.bx-96     { width: 6rem; }
.bx-110    { width: 6.875rem; }
.bx-120    { width: 7.5rem; }
.bx-130    { width: 8.125rem; }
.bx-140    { width: 8.75rem; }
.bx-144    { width: 9rem; }
.bx-176    { width: 11rem; }
.hmax-150  { max-height: 9.375rem; }
.hmax-200  { max-height: 12.5rem; }
.hmax-240  { max-height: 15rem; }
.hmax-380  { max-height: 23.75rem; }
.hmax-512  { max-height: 32rem; }
.hmin-216  { min-height: 13.5rem; }
.hmin-256  { min-height: 16rem; }
.zeiger    { cursor: pointer; }
/* steuern.php Pendenz-Zelle · mailing.php Vorschau-Rahmen */
.pendenz-wrap { white-space: normal; min-width: 10rem; }
.ml-vorschau { width: 100%; border: 0; }
.ml-vorschau-klein { height: 18rem; }
.ml-vorschau-gross { height: 65vh; }
.spalte-eng   { width: 1%; }                                  /* Tabellenspalte so schmal wie ihr Inhalt */
thead.tabellenkopf { --bs-table-bg: var(--bs-tertiary-bg); }  /* statt .table-light: folgt Hell/Dunkel von selbst */
.form-control.blink-ok, .form-select.blink-ok { background-color: var(--pf-blink-ok); transition: background-color .3s; }

/* ═══════════════════════════════════════════════════════════════════════════
   MARKENFARBEN – Quelle: Skill `pfyls-brand`. Werte nie hier ändern, sondern
   dort; diese Datei ist nur die Übersetzung ins Tool.

   Zwei Kanäle, die sich nie treffen:
     BEREICH (Treuhand/Steuern/Consulting)  → Rahmen: Band, Marker, Badge
     AMPEL   (Frist und SLA)                → Fläche: Zeilenhintergrund
   Weil der Bereich nur den Rahmen färbt, kann eine Ampelfarbe nie mit einer
   Bereichsfarbe kollidieren. Das ist Geometrie, nicht Disziplin.
   Siehe CLAUDE.md §8 und UI_KONVENTIONEN.md §5.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Bereichsfarben – kräftig = weisse Schrift, hell = Schrift --pf-auf-hell */
    --pf-marke:            #142b70;   /* Grundton, 13,05:1 auf Weiss           */
    --pf-marke-dunkel:     #0d1d4d;   /* nur Hover/Active                      */
    --pf-marke-flaeche:    #142b70;   /* Marke als FLÄCHE mit weisser Schrift (Knopf, Kopfzeile). In Hell = --pf-marke,
                                         im Dunkel-Block getrennt: dort ist --pf-marke ein heller Schrift-/Rahmenton (C3) */
    --pf-treuhand:         #2947b8;   /* weisse Schrift: 7,81:1                */
    --pf-treuhand-hell:    #dfe6f0;   /* Schrift --pf-auf-hell: 10,39:1        */
    --pf-steuern:          #12702f;   /* weisse Schrift: 6,20:1                */
    --pf-steuern-hell:     #eef7f0;   /* Schrift --pf-auf-hell: 11,93:1        */
    --pf-consulting:       #9d6616;   /* weisse Schrift: 4,83:1                */
    --pf-consulting-hell:  #f6efe0;   /* Schrift --pf-auf-hell: 11,40:1        */
    --pf-auf-hell:         #142b70;   /* Schrift auf jeder hellen Bereichsfläche */
    --pf-treuhand-band:    var(--pf-treuhand);     /* Band und Marker – im Dunkel-Block heller, weil ein schmaler
    --pf-steuern-band:     var(--pf-steuern);         Strich auf dunklem Grund sonst verschwindet */
    --pf-consulting-band:  var(--pf-consulting);

    /* Ampelfarben – bewusst entsättigt, damit das Ampel-Grün nicht mit dem
       Marken-Grün verwechselt wird. Sie unterscheiden sich nicht über den
       Farbton, sondern über die Bauart: Ampel ist immer eine blasse Fläche
       mit dunkler Schrift, Bereich immer eine satte Fläche mit weisser. */
    --pf-ampel-rot-flaeche:     #fdf2f2;
    --pf-ampel-rot-chip:        #f7dcdc;
    --pf-ampel-rot-text:        #8f2727;   /* auf Chip: 6,52:1                 */
    --pf-ampel-gelb-flaeche:    #fdf8ec;
    --pf-ampel-gelb-chip:       #f8eccf;
    --pf-ampel-gelb-text:       #7a5410;   /* auf Chip: 5,77:1                 */
    --pf-ampel-gruen-flaeche:   #f5faf2;
    --pf-ampel-gruen-chip:      #e4efe0;
    --pf-ampel-gruen-text:      #3d5c23;   /* auf Chip: 6,44:1                 */
    --pf-ampel-orange-chip:     #fbe3d0;   /* Stufe zwischen Gelb und Rot (pfyls-brand §2, 11.09.2026) */
    --pf-ampel-orange-text:     #a3480c;   /* auf Chip: 4,87:1                 */
    --pf-ampel-neutral-flaeche: #f4f5f7;
    --pf-ampel-neutral-chip:    #e6e8ec;
    --pf-ampel-neutral-text:    #4a5160;   /* auf Chip: 6,49:1                 */

    /* Neutrale Flächen, Linien, Text (Etappe C2, 18.09.2026) – Namen wie demo.pfyls.ch.
       Alles, was im Dunkel-Block (C3) einen zweiten Wert braucht, steht hier und nur hier. */
    --pf-grund:            #f0f2f7;   /* Seitenhintergrund                     */
    --pf-flaeche:          #ffffff;   /* Karte, Feld, aktiver Reiter           */
    --pf-flaeche-2:        #f6f7f9;   /* Seitenkopf, Tabellenkopf              */
    --pf-linie:            #e9ecef;
    --pf-linie-fein:       #f0f0f0;   /* Zeilentrenner in Listen               */
    --pf-text:             #212529;   /* = Bootstrap body-color */
    --pf-muted:            #626b75;   /* auf Weiss 5,41:1 · auf --pf-flaeche-2 5,05:1 · auf --pf-grund 4,83:1 (bis 18.09.2026 #6c757d = 4,19:1) */
    --pf-muted-hell:       #adb5bd;   /* nur Deko (Stift-Symbol), nie Text     */
    --pf-reiter-bg:        #e4e7ea;
    --pf-reiter-text:      #5a6169;   /* auf Reiter-Grund: 5,05:1              */
    --pf-zaehler-bg:       #d7dbe0;
    --pf-zaehler-text:     #4a5160;   /* auf Zähler-Grund: 5,73:1              */
    --pf-individuell:      var(--pf-kat-individuell);   /* Band links an der individuellen Aufgabe */

    /* KATEGORIE – vierter Kanal (pfyls-brand §8, 18.09.2026): Aufgabenarten in treuhand.php.
       Eigene Bauart, damit nichts verwechselt wird: Bereich = satte Fläche + weisse Schrift,
       Ampel = blasse Fläche + dunkle Schrift, Kategorie = UMRISS (Rand + Schrift, keine Füllung).
       Töne abseits von Markenblau, Markengrün, Orange und Ampel. Kontrast auf Weiss / auf --pf-flaeche-2.
       Kleinster Abstand der fünf untereinander: ΔE 12,7 (Deuteranopie, MWST/Abschluss). */
    --pf-kat-mwst:         #34507a;   /* Schiefer  8,16:1 / 7,61:1 */
    --pf-kat-abschluss:    #7050a0;   /* Violett   6,28:1 / 5,86:1 */
    --pf-kat-steuererkl:   #147d7d;   /* Petrol    4,93:1 / 4,60:1 */
    --pf-kat-lohn:         #96395f;   /* Pflaume   6,89:1 / 6,43:1 */
    --pf-kat-individuell:  #6b5a12;   /* Oliv      6,78:1 / 6,33:1 */
    --pf-blink-ok:         #d1e7dd;   /* kurzes Aufblinken nach dem Speichern  */
    --pf-blink-fehler:     #f8d7da;
    --pf-punkt-ok:         #28a745;   /* Statuspunkt fristerstreckung.php      */
    --pf-punkt-fehler:     #dc3545;

    /* Hover/Active der Bereiche – Werte aus pfyls-brand §2, «-tief» = Rand im Active-Zustand */
    --pf-marke-hover:        #0f2158;
    --pf-marke-tief:         #0b1840;
    --pf-treuhand-hover:     #223c9b;
    --pf-treuhand-active:    #1e358a;
    --pf-treuhand-tief:      #1a2e77;
    --pf-steuern-hover:      #0f5e28;
    --pf-steuern-active:     #0d5222;
    --pf-steuern-tief:       #0b471e;
    --pf-consulting-hover:   #855613;
    --pf-consulting-active:  #744b10;
    --pf-consulting-tief:    #63400e;

    /* Seitenmenü links (Redesign Etappe B, 17.09.2026) – Werte wie demo.pfyls.ch.
       Breite schmaler als in der Demo (264px): die Schrift hier ist kleiner, und
       Treuhand/Steuern/Kunden brauchen bei 1366 px jede Spalte. */
    --pf-menue-bg:        #142b70;
    --pf-menue-text:      #ffffff;
    --pf-menue-text-rgb:  255, 255, 255;
    --pf-menue-marke-bg:  #ffffff;      /* Logo-Block bleibt weiss, damit das Logo seine Farben behält */
    --seite-breite:       13.75rem;     /* = 220px bei «klein»; rem, damit das Menü mit der Schriftgrösse wächst (C1) */
    --seite-schmal:       4rem;         /* = 64px bei «klein» */
}

/* ─── Bootstrap auf die Marke ziehen ────────────────────────────────────────
   Bootstrap 5.3.2 rechnet `.text-primary`, `.bg-primary` und `.border-primary`
   über --bs-primary-rgb. Ein Wert hier ersetzt darum rund 30 Fundstellen im
   Code, ohne eine einzige Klasse umzuschreiben. Die Buttons brauchen einen
   eigenen Block: deren Farben stehen in 5.3 fest in der Klasse. */
:root,
[data-bs-theme="light"] {
    --bs-primary:          var(--pf-marke);
    --bs-primary-rgb:      20, 43, 112;
    --bs-link-color:       var(--pf-marke);
    --bs-link-color-rgb:   20, 43, 112;
    --bs-link-hover-color: var(--pf-marke-dunkel);
    --bs-focus-ring-color: rgba(20, 43, 112, .25);
}

/* Bootstrap-Grün #198754 als Schrift im Umriss-Knopf: 4,13:1 auf der Ampel-Rot-Fläche, 4,23:1 auf --pf-flaeche-2
   (gemessen 18.09.2026, «+ Auftrag» in treuhand.php). Dunkler Ton: 5,88 / 6,02 / 6,45:1. Dunkel-Block setzt eigene Werte. */
.btn-outline-success { --bs-btn-color: #146c43; --bs-btn-border-color: #146c43; }

/* ═══ DUNKEL (Redesign Etappe C3, 18.09.2026) ═════════════════════════════════
   Quelle aller Werte: Skill `pfyls-brand` §9, jeder mit gemessenem Kontrast. Dieser Block setzt NUR Tokens neu –
   braucht ein Bauteil im Dunkeln eine Sonderregel, fehlt ihm ein Token. <html data-bs-theme> kommt
   serverseitig aus der Pref ui_theme (includes/header.php), darum flackert nichts.
   Bauart bleibt: Bereich = satte Fläche + weisse Schrift · Ampel = Chip + helle Schrift · Kategorie = Umriss.
   Menü (dunkelblau) und Logo-Block (weiss) sind in beiden Themes gleich. */
[data-bs-theme="dark"] {
    --pf-grund:            #14171f;
    --pf-flaeche:          #1c2029;
    --pf-flaeche-2:        #232834;
    --pf-linie:            #323846;
    --pf-linie-fein:       #2a2f3b;
    --pf-text:             #e6e8ee;   /* auf Fläche 13,31:1 · auf Grund 14,63:1 */
    --pf-muted:            #a0a7b5;   /* auf Grund 7,41 · Fläche 6,75 · Fläche-2 6,10 */
    --pf-muted-hell:       #6b7384;   /* nur Deko (Stift, Platzhalter-Strich), 3,42:1 – nie für Text */

    --pf-marke:            #9db4ff;   /* Schrift/Rahmen: auf Fläche 8,08 · Grund 8,88 · Fläche-2 7,30 */
    --pf-marke-dunkel:     #c3d1ff;   /* Link-Hover: im Dunkeln heller statt dunkler */
    --pf-marke-flaeche:    #4065dd;   /* weisse Schrift 5,09:1 · hebt sich mit 3,20:1 von der Fläche ab */
    --pf-marke-hover:      #335adb;   /* weisse Schrift 5,79:1 */
    --pf-marke-tief:       #2650d9;

    /* Bereich kräftig: unverändert (weisse Schrift 7,81 / 6,20 / 4,83). Hell-Varianten und Band neu. */
    --pf-treuhand-hell:    #1f2a4a;   /* Schrift --pf-auf-hell 11,52:1 */
    --pf-steuern-hell:     #16301f;   /* 11,61:1 */
    --pf-consulting-hell:  #33270f;   /* 11,92:1 */
    --pf-auf-hell:         #e6e8ee;
    --pf-treuhand-band:    #6d8cf0;   /* Band/Marker auf Fläche 5,17:1 (kräftig hätte nur 2,09) */
    --pf-steuern-band:     #3fae63;   /* 5,78:1 */
    --pf-consulting-band:  #d0942f;   /* 6,18:1 */

    --pf-ampel-rot-flaeche:     #2a1a1d;
    --pf-ampel-rot-chip:        #4a1f1f;
    --pf-ampel-rot-text:        #ff9c9c;   /* auf Chip 6,96 · auf Fläche 8,30 */
    --pf-ampel-gelb-flaeche:    #2a2416;
    --pf-ampel-gelb-chip:       #453512;
    --pf-ampel-gelb-text:       #f2c25c;   /* 7,14 · 9,28 */
    --pf-ampel-gruen-flaeche:   #1c271b;
    --pf-ampel-gruen-chip:      #24391c;
    --pf-ampel-gruen-text:      #a5d38a;   /* 7,33 · 9,06 */
    --pf-ampel-neutral-flaeche: #20242e;
    --pf-ampel-neutral-chip:    #2e3440;
    --pf-ampel-neutral-text:    #b8bfcc;   /* 6,76 · 8,40 */
    --pf-ampel-orange-chip:     #4a2c14;
    --pf-ampel-orange-text:     #ffa45c;   /* 6,45 */

    /* Kategorie: über die Helligkeit getrennt – kleinster Abstand ΔE 16,5 (Deuteranopie). Kontrast auf Fläche. */
    --pf-kat-mwst:         #629ada;   /* 5,55:1 */
    --pf-kat-abschluss:    #d7c1f0;   /* 9,92:1 */
    --pf-kat-steuererkl:   #c1f0ef;   /* 13,18:1 */
    --pf-kat-lohn:         #da628e;   /* 4,75:1 · auf Ampel-Rot-Fläche 4,84 – nicht dunkler machen */
    --pf-kat-individuell:  #d3b745;   /* 8,25:1 */

    --pf-reiter-bg:        #2a303c;
    --pf-reiter-text:      #a0a7b5;   /* 5,48:1 */
    --pf-zaehler-bg:       #3a4150;
    --pf-zaehler-text:     #c5cad6;   /* 6,23:1 */
    --pf-blink-ok:         #1f4a30;
    --pf-blink-fehler:     #5a2327;
    --pf-punkt-ok:         #4cc46a;   /* 7,31:1 */
    --pf-punkt-fehler:     #f0626e;   /* 5,18:1 */

    /* Bootstrap auf dieselben Töne ziehen */
    --bs-body-bg:             #1c2029;
    --bs-body-bg-rgb:         28, 32, 41;
    --bs-body-color:          #e6e8ee;
    --bs-body-color-rgb:      230, 232, 238;
    --bs-secondary-color:     #a0a7b5;
    --bs-secondary-color-rgb: 160, 167, 181;
    --bs-tertiary-bg:         #232834;
    --bs-tertiary-bg-rgb:     35, 40, 52;
    --bs-secondary-bg:        #2a303c;
    --bs-border-color:        #323846;
    --bs-emphasis-color:      #ffffff;
    --bs-primary:             #9db4ff;
    --bs-primary-rgb:         157, 180, 255;   /* .text-primary / .border-primary = heller Ton */
    --bs-link-color:          #9db4ff;
    --bs-link-color-rgb:      157, 180, 255;
    --bs-link-hover-color:    #c3d1ff;
    --bs-link-hover-color-rgb:195, 209, 255;
    --bs-focus-ring-color:    rgba(157, 180, 255, .3);
}
/* .bg-primary trägt weisse Schrift → braucht die Fläche, nicht den hellen Schriftton */
[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .text-bg-primary { background-color: var(--pf-marke-flaeche) !important; color: #fff !important; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
/* Bootstrap lässt .text-success/.text-danger und die Umriss-Knöpfe im Dunkeln auf den hellen Werten
   (#198754 auf Fläche = 3,9:1, #6c757d = 3,1–3,5:1 – im Browser gemessen 18.09.2026). Darum die
   Emphasis-Töne von Bootstrap: Grün 6,97:1 · Rot 6,45:1 · Grau = --pf-muted 6,75:1 auf Fläche. */
/* Hover auf Ampel-Zeilen: Bootstrap würde ein helles Rosa/Gelb/Grün darüberlegen – mit heller Schrift unlesbar */
[data-bs-theme="dark"] .table-danger, [data-bs-theme="dark"] .table-warning, [data-bs-theme="dark"] .table-success {
    --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255, 255, 255, .06); --bs-table-active-bg: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] .text-success { color: #75b798 !important; }
[data-bs-theme="dark"] .text-danger  { color: #ea868f !important; }
[data-bs-theme="dark"] .text-secondary { color: var(--pf-muted) !important; }   /* war 3,83:1 auf bg-secondary-subtle (protokoll.php) */
[data-bs-theme="dark"] .btn-outline-success   { --bs-btn-color: #75b798; --bs-btn-border-color: #75b798; }
[data-bs-theme="dark"] .btn-outline-danger    { --bs-btn-color: #ea868f; --bs-btn-border-color: #ea868f; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--pf-muted); --bs-btn-border-color: #4a5160; }

.btn-primary {
    --bs-btn-bg:                   var(--pf-marke-flaeche);
    --bs-btn-border-color:         var(--pf-marke-flaeche);
    --bs-btn-hover-bg:             var(--pf-marke-hover);
    --bs-btn-hover-border-color:   var(--pf-marke-dunkel);
    --bs-btn-active-bg:            var(--pf-marke-dunkel);
    --bs-btn-active-border-color:  var(--pf-marke-tief);
    --bs-btn-disabled-bg:          var(--pf-marke-flaeche);
    --bs-btn-disabled-border-color:var(--pf-marke-flaeche);
    --bs-btn-focus-shadow-rgb:     41, 71, 184;
}

.btn-outline-primary {
    --bs-btn-color:                var(--pf-marke);
    --bs-btn-border-color:         var(--pf-marke);
    --bs-btn-hover-bg:             var(--pf-marke-flaeche);
    --bs-btn-hover-border-color:   var(--pf-marke-flaeche);
    --bs-btn-active-bg:            var(--pf-marke-flaeche);
    --bs-btn-active-border-color:  var(--pf-marke-flaeche);
    --bs-btn-focus-shadow-rgb:     41, 71, 184;
}

body {
    background-color: var(--pf-grund);
    font-size: 0.92rem;
}

/* ═══ SEITENMENÜ LINKS (Redesign Etappe B, 17.09.2026) ═════════════════════
   Bauart aus der Demo: .raster = Menü links + .inhalt rechts. Geöffnet in
   includes/header.php, geschlossen in includes/footer.php.
   Zustand am <html>: data-menue="fixiert" | "geloest" (Pref ui_menue, je Benutzer).
   ⚠️ .inhalt braucht min-width:0 – sonst drückt eine breite Tabelle das Raster
      auf statt in ihrem .table-responsive zu scrollen. */
.raster { display: flex; min-height: 100vh; }
.seitenmenue {
    width: var(--seite-breite);
    flex: 0 0 var(--seite-breite);
    background: var(--pf-menue-bg);
    color: var(--pf-menue-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    transition: width .2s, flex-basis .2s;
}
.inhalt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.inhalt > .container-fluid { flex: 1 0 auto; }

.marke {
    background: var(--pf-menue-marke-bg);
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    min-height: 3.875rem;
    border-bottom: 3px solid var(--pf-treuhand);
}
.marke img { height: 2.5rem; width: auto; max-width: 100%; }

.menue { list-style: none; margin: 0; padding: .5rem 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.menue a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--pf-menue-text);
    text-decoration: none;
    padding: .5rem .9rem;
    font-weight: 500;
    border-left: 4px solid transparent;
    white-space: nowrap;
}
.menue a .bi { font-size: 1.1rem; width: 1.4rem; text-align: center; opacity: .9; flex: 0 0 auto; }
.menue a:hover { background: rgba(var(--pf-menue-text-rgb), .10); color: var(--pf-menue-text); }
.menue a.aktiv { background: rgba(var(--pf-menue-text-rgb), .16); border-left-color: var(--pf-menue-text); }
.menue .pfeil { margin-left: auto; font-size: .8rem; opacity: .75; transition: transform .2s; padding: .25rem .3rem; width: auto; }
.menue .abz ~ .pfeil { margin-left: 0; }
.menue a[aria-expanded="true"] .pfeil { transform: rotate(90deg); }
.menue .abz { margin-left: auto; font-size: .7rem; }
.menue .abz ~ .abz { margin-left: 0; }
.untermenue { list-style: none; margin: 0; padding: .1rem 0 .3rem; background: rgba(0, 0, 0, .18); }
.untermenue a { padding: .35rem .9rem .35rem 2.9rem; font-size: .88rem; font-weight: 400; }
.untermenue a.aktiv { font-weight: 600; }

.menue-fuss { padding: .7rem .9rem .9rem; border-top: 1px solid rgba(var(--pf-menue-text-rgb), .18); }
.schalter { display: flex; gap: .4rem; margin-bottom: .5rem; }
.schalter button {
    flex: 1 1 0;
    background: rgba(var(--pf-menue-text-rgb), .10);
    border: 1px solid rgba(var(--pf-menue-text-rgb), .25);
    color: var(--pf-menue-text);
    border-radius: .4rem;
    padding: .3rem .4rem;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    white-space: nowrap;
}
.schalter button:hover { background: rgba(var(--pf-menue-text-rgb), .20); }
.schalter .taste { opacity: .7; font-size: .7rem; margin-left: .2rem; }
.benutzer-zeile {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    margin: .2rem 0 .5rem;
    white-space: nowrap;
    overflow: hidden;
}
.btn-abmelden {
    --bs-btn-color: var(--pf-menue-bg);
    --bs-btn-bg: var(--pf-menue-text);
    --bs-btn-border-color: var(--pf-menue-text);
    --bs-btn-hover-color: var(--pf-menue-bg);
    --bs-btn-hover-bg: var(--pf-treuhand-hell);
    --bs-btn-hover-border-color: var(--pf-treuhand-hell);
    --bs-btn-active-color: var(--pf-menue-bg);
    --bs-btn-active-bg: var(--pf-treuhand-hell);
    font-size: .85rem;
    font-weight: 600;
    width: 100%;
    white-space: nowrap;
}

/* Leiste mit dem Menü-Knopf – nur unter 992 px sichtbar */
.mobilkopf { display: none; align-items: center; gap: .75rem; padding: .4rem .75rem; background: var(--pf-menue-marke-bg); border-bottom: 3px solid var(--pf-menue-bg); }
.mobilkopf img { height: 34px; width: auto; }
.toggler { border: 1px solid rgba(var(--bs-primary-rgb), .3); background: var(--pf-menue-marke-bg); border-radius: .4rem; padding: .2rem .55rem; color: var(--pf-menue-bg); font-size: 1.3rem; line-height: 1; }

/* Menü gelöst: schmale Symbolleiste, klappt beim Überfahren (oder mit Tab) auf.
   Abzeichen bleiben sichtbar – sie rutschen als kleine Marke an die Ecke des Symbols. */
@media (min-width: 992px) {
    [data-menue="geloest"] .seitenmenue { position: fixed; left: 0; top: 0; width: var(--seite-schmal); flex-basis: var(--seite-schmal); z-index: 1040; }
    [data-menue="geloest"] .inhalt { margin-left: var(--seite-schmal); }
    [data-menue="geloest"] .seitenmenue:hover,
    [data-menue="geloest"] .seitenmenue:focus-within { width: var(--seite-breite); box-shadow: 6px 0 24px rgba(0, 0, 0, .25); }
    [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .txt,
    [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .pfeil,
    [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .untermenue { display: none; }
    [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .marke { padding: .6rem .3rem; justify-content: center; }
    [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .marke img { height: auto; max-height: 40px; }
    [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .menue a { justify-content: center; padding-left: 0; padding-right: 4px; gap: 0; }
    [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .menue .abz { position: absolute; top: 2px; right: 6px; margin: 0; font-size: .6rem; padding: .15em .4em; }
    [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .menue .abz ~ .abz { top: auto; bottom: 2px; }
    [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .menue-fuss { padding-left: .5rem; padding-right: .5rem; }
    [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .benutzer-zeile { justify-content: center; }
}

/* Unterseiten zum Anwählen (Meldung 9, 18.09.2026): fährt die Maus über einen Hauptpunkt, dessen Unterseiten
   nicht schon offen im Menü stehen, schweben sie rechts neben dem Menü – ein Klick, und man ist dort.
   Absichtlich daneben statt in der Liste aufgeklappt: sonst verschiebt sich beim Herunterfahren alles.
   Fixiert statt absolut, weil .seitenmenue und .menue überlaufen abschneiden; top setzt script.js. */
@media (min-width: 992px) {
    .menue li.schwebt > .untermenue {
        display: block;
        position: fixed;
        left: var(--seite-breite);
        min-width: 13rem;
        padding: .3rem 0;
        background: var(--pf-menue-bg);
        border-radius: 0 .4rem .4rem 0;
        box-shadow: 6px 4px 24px rgba(0, 0, 0, .3);
        z-index: 1050;
    }
    .menue li.schwebt > .untermenue a { padding-left: 1rem; }
}

/* Unter 992 px: Menü wird zum Aufklapper von links */
@media (max-width: 991.98px) {
    .seitenmenue { position: fixed; left: calc(-1 * var(--seite-breite) - 30px); top: 0; z-index: 1040; transition: left .25s; box-shadow: 0 0 30px rgba(0, 0, 0, .3); }
    .seitenmenue.offen { left: 0; }
    .mobilkopf { display: flex; }
    #schalter-menue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .seitenmenue, .menue .pfeil { transition: none; }
}
@media print {
    .seitenmenue, .mobilkopf { display: none !important; }
    [data-menue] .inhalt { margin-left: 0 !important; }
}

/* Cards */
.card {
    border-radius: 0.5rem;
}

/* ═══ BEREICH – färbt ausschliesslich den Rahmen ════════════════════════════
   Drei Bauformen je Bereich:
     .bereich-<x>        satte Fläche, weisse Schrift   → Badge, Kachel, Balken
     .bereich-<x>-hell   helle Fläche, Schrift #142b70  → Karte, Hinterlegung
     .bereich-band-<x>   4px-Streifen links             → Listenblock, Karte

   Consulting ist vollständig definiert, aber noch nirgends verwendet: das
   Tool kennt heute nur die Module `treuhand` und `steuern`, weil Consulting
   fachlich innerhalb der Treuhand läuft (FACHLOGIK.md). Sobald eine eigene
   Seite kommt, ist die Farbe da – und stimmt mit der Website überein. */
.bereich-treuhand,
.bereich-steuern,
.bereich-consulting        { color: #fff !important; }
.bereich-treuhand          { background-color: var(--pf-treuhand) !important; }
.bereich-steuern           { background-color: var(--pf-steuern) !important; }
.bereich-consulting        { background-color: var(--pf-consulting) !important; }

.bereich-treuhand-hell,
.bereich-steuern-hell,
.bereich-consulting-hell   { color: var(--pf-auf-hell) !important; }
.bereich-treuhand-hell     { background-color: var(--pf-treuhand-hell) !important; }
.bereich-steuern-hell      { background-color: var(--pf-steuern-hell) !important; }
.bereich-consulting-hell   { background-color: var(--pf-consulting-hell) !important; }

/* Band: einseitiger Rand – darum ohne runde Ecken, sonst bricht die Kante. */
.bereich-band-treuhand,
.bereich-band-steuern,
.bereich-band-consulting   { border-radius: 0 !important; }
.bereich-band-treuhand     { border-left: 4px solid var(--pf-treuhand-band) !important; }
.bereich-band-steuern      { border-left: 4px solid var(--pf-steuern-band) !important; }
.bereich-band-consulting   { border-left: 4px solid var(--pf-consulting-band) !important; }

/* Abschnitt auf dem Dashboard: Band plus Einzug, damit der Streifen nicht am
   Inhalt klebt. Zusammen mit .bereich-band-<x> verwenden.
   ⚠️ Nur dort einsetzen, wo **mehrere Bereiche untereinander** stehen. Auf einer
   Seite, die ohnehin nur einen Bereich zeigt, sagt das Band nichts – dann ist es
   Dekoration, und Dekoration im Arbeitsbereich stört. Entscheid Samuel 07.08.2026. */
.bereich-abschnitt { padding-left: .7rem; }

/* Abschnitts-Titel in Bereichsfarbe.
   ⚠️ Bewusste Ausnahme von «Markenfarben sind Hintergrundfarben, keine
   Schriftfarben» (Skill pfyls-brand §1). Gilt **nur** für die kleine
   Abschnitts-Überschrift im Dashboard: bei 0.7rem Grossbuchstaben verschwindet
   Grau neben dem farbigen Band. Kontrast gemessen auf Weiss – Treuhand 7,81:1,
   Steuern 6,20:1, Consulting 4,83:1, alle über WCAG AA 4,5:1.
   Nicht für Fliesstext verwenden. */
.bereich-titel-treuhand   { color: var(--pf-treuhand-band) !important; }
.bereich-titel-steuern    { color: var(--pf-steuern-band) !important; }
.bereich-titel-consulting { color: var(--pf-consulting-band) !important; }

/* Aktionsknopf in Bereichsfarbe – der lauteste Punkt eines Abschnitts.
   Vorher trugen «Alle Treuhand-Aufgaben» und «Alle Steuern-Aufgaben» dieselbe
   Farbe, obwohl sie in zwei verschiedene Welten führen. */
.btn-bereich-treuhand {
    --bs-btn-color: #fff;             --bs-btn-bg: var(--pf-treuhand);
    --bs-btn-border-color: var(--pf-treuhand);   --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pf-treuhand-hover);       --bs-btn-hover-border-color: var(--pf-treuhand-active);
    --bs-btn-active-color: #fff;      --bs-btn-active-bg: var(--pf-treuhand-active);
    --bs-btn-active-border-color: var(--pf-treuhand-tief);
    --bs-btn-focus-shadow-rgb: 41, 71, 184;
}
.btn-bereich-steuern {
    --bs-btn-color: #fff;             --bs-btn-bg: var(--pf-steuern);
    --bs-btn-border-color: var(--pf-steuern);   --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pf-steuern-hover);       --bs-btn-hover-border-color: var(--pf-steuern-active);
    --bs-btn-active-color: #fff;      --bs-btn-active-bg: var(--pf-steuern-active);
    --bs-btn-active-border-color: var(--pf-steuern-tief);
    --bs-btn-focus-shadow-rgb: 18, 112, 47;
}
.btn-bereich-consulting {
    --bs-btn-color: #fff;             --bs-btn-bg: var(--pf-consulting);
    --bs-btn-border-color: var(--pf-consulting);   --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pf-consulting-hover);       --bs-btn-hover-border-color: var(--pf-consulting-active);
    --bs-btn-active-color: #fff;      --bs-btn-active-bg: var(--pf-consulting-active);
    --bs-btn-active-border-color: var(--pf-consulting-tief);
    --bs-btn-focus-shadow-rgb: 157, 102, 22;
}

/* Marker vor einer Überschrift – ersetzt das eingefärbte Icon. */
.bereich-marker {
    display: inline-block;
    width: 8px;
    height: 1.05em;
    border-radius: 2px;
    vertical-align: -1px;
    margin-right: .45rem;
}
.bereich-marker-treuhand   { background-color: var(--pf-treuhand-band); }
.bereich-marker-steuern    { background-color: var(--pf-steuern-band); }
.bereich-marker-consulting { background-color: var(--pf-consulting-band); }

/* ═══ AMPEL – färbt ausschliesslich die Fläche in der Zeile ═════════════════
   Entsättigt gegenüber vorher. Grund: knalliges Bootstrap-Grün direkt neben
   dem Marken-Grün sieht aus wie ein Fehler. Bedeutung der Farben unverändert –
   die rechnet weiterhin allein includes/steuern_status.php. */
.table-danger td  { background-color: var(--pf-ampel-rot-flaeche) !important; }
.table-warning td { background-color: var(--pf-ampel-gelb-flaeche) !important; }
.table-success td { background-color: var(--pf-ampel-gruen-flaeche) !important; }
/* Bootstrap setzt in .table-danger & Co. die Schrift fest auf Schwarz – auf der dunklen Ampelfläche 1,26:1
   (gemessen 18.09.2026). Die Zeile übernimmt darum die normale Textfarbe des Themes. */
.table-danger, .table-warning, .table-success {
    --bs-table-color: var(--pf-text); --bs-table-hover-color: var(--pf-text);
    --bs-table-striped-color: var(--pf-text); --bs-table-active-color: var(--pf-text);
    --bs-table-border-color: var(--pf-linie);
}

/* Ampel-Chips: bereitgestellt, heute noch nicht angewendet – die Seiten
   nutzen dafür weiterhin die Bootstrap-Badges. Wer eine Ampel neu baut,
   nimmt diese hier, nicht bg-success und Co. */
.ampel-rot     { background-color: var(--pf-ampel-rot-chip);     color: var(--pf-ampel-rot-text);     }
.ampel-gelb    { background-color: var(--pf-ampel-gelb-chip);    color: var(--pf-ampel-gelb-text);    }
.ampel-gruen   { background-color: var(--pf-ampel-gruen-chip);   color: var(--pf-ampel-gruen-text);   }
.ampel-orange  { background-color: var(--pf-ampel-orange-chip);  color: var(--pf-ampel-orange-text);  }
.ampel-neutral { background-color: var(--pf-ampel-neutral-chip); color: var(--pf-ampel-neutral-text); }

/* Individuelle Aufgaben-Zeile */
.indiv-row { border-left: 3px solid var(--pf-individuell) !important; }
.indiv-form-row input[type="text"]:focus { border-color: var(--pf-individuell); box-shadow: 0 0 0 .15rem rgba(107,90,18,.2); }

/* Status-Badge Klickbar */
.status-toggle {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}
.status-toggle:hover {
    opacity: 0.8;
}

/* Stat-Karte Zahlen */
.stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

/* Tabellen kompakter */
.table-sm td, .table-sm th {
    padding: 0.35rem 0.5rem;
}

/* Kleine Hilfsklasse */
.cursor-pointer { cursor: pointer; }

/* Footer Abstand */
.main-content {
    padding-bottom: 3rem;
}

/* Login Box */
.login-box {
    max-width: 430px;
    margin: 80px auto;
}

/* ─── Mobile (≤ 767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Weniger Body-Schriftgrösse auf kleinen Screens */
  body { font-size: 0.88rem; }

  /* Stat-Zahlen kleiner */
  .stat-number { font-size: 1.4rem; }
  .fs-2 { font-size: 1.35rem !important; }
  .fs-3 { font-size: 1.1rem !important; }

  /* Dashboard KPI-Kacheln: 2 Spalten bleiben, etwas kompakter */
  .card-body.py-2 { padding-top: .3rem !important; padding-bottom: .3rem !important; }

  /* Treuhand: Kunden-Header Wrap */
  .kunde-header { flex-wrap: wrap; gap: .4rem; }
  .kunde-header .btn-settings { font-size: .72rem; padding: .2rem .5rem; }

  /* Treuhand: Task-Tabelle scrollbar */
  .task-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .task-table { min-width: 520px; }

  /* Alle Tabellen scrollbar */
  .table-responsive { font-size: 0.8rem; }

  /* Legende in Treuhand: umbrechen */
  .d-flex.gap-3 { gap: .5rem !important; flex-wrap: wrap; }

  /* Modals: volle Breite */
  .modal-dialog { margin: .5rem; }

  /* Buttons: etwas grösser für Touch */
  .btn-sm { padding: .3rem .6rem; font-size: .8rem; }

  /* Login Box */
  .login-box { margin: 30px auto; }
}

/* ─── Kleine Smartphones (≤ 575px) ─────────────────────────────── */
@media (max-width: 575px) {
  .stat-number { font-size: 1.2rem; }
  .fs-2 { font-size: 1.15rem !important; }

  /* Steuern/Kunden Tabellen: noch kleiner */
  .table-responsive { font-size: 0.75rem; }
  .table-sm td, .table-sm th { padding: .25rem .3rem; }
}

/* ═══ SEITENKOPF – zweite Stufe des Headers (04.09.2026) ═══════════════════
   Zeile unter der Navigation: Marker, Titel, Reiter, Kontext, Aktionen.
   Gebaut in includes/seitenkopf.php, ausgegeben von includes/header.php –
   ausserhalb des container-fluid, damit die Zeile über die volle Breite läuft.

   Bewusst NICHT klebend (Entscheid Samuel, 04.09.2026): das Tool ist
   stundenlang offen, und eine dauerhaft belegte Zeile kostet mehr Höhe, als
   das Mitscrollen an Orientierung bringt.

   Die Fläche ist grau, nicht weiss: so trennt sie sichtbar die Navigation
   (weiss, Markenband) vom Arbeitsbereich darunter. Kein zweites Markenband –
   die Identität trägt die Navigation. */
.seitenkopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    min-height: 46px;
    padding: .5rem 1rem;
    background: var(--pf-flaeche-2);
    border-bottom: 1px solid var(--pf-linie);
}
.seitenkopf-titel {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pf-marke);
}
.seitenkopf-kontext { color: var(--pf-muted); font-size: .8rem; }
.seitenkopf-schub   { flex: 1 1 auto; }        /* schiebt die Aktionen nach rechts */
.seitenkopf-aktionen {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Reiter der Unterseiten – Segment-Schalter, kein zweites Menü.
   Er zeigt, DASS es eine zweite Seite im Bereich gibt; ein Aufklapper kann das
   nicht. Deshalb steht hier auch der Zähler. */
.seitenkopf-reiter {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--pf-reiter-bg);
    border-radius: 6px;
}
.seitenkopf-reiter a {
    padding: .25rem .7rem;
    border-radius: 4px;
    font-size: .83rem;
    color: var(--pf-reiter-text);
    text-decoration: none;
    white-space: nowrap;
}
.seitenkopf-reiter a:hover { color: var(--pf-marke); }
.seitenkopf-reiter a.aktiv {
    background: var(--pf-flaeche);
    color: var(--pf-marke);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
}
/* Zähler am Reiter: neutral, nicht rot. Er zählt die offenen Dossiers des
   gewählten Steuerjahrs – das ist der Arbeitsvorrat, keine Alarmmeldung.
   Rot bleibt der Ampel vorbehalten (UI_KONVENTIONEN.md §5). */
.seitenkopf-zaehler {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 .35em;
    border-radius: 99px;
    background: var(--pf-zaehler-bg);
    color: var(--pf-zaehler-text);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}
.seitenkopf-reiter a.aktiv .seitenkopf-zaehler { background: var(--pf-reiter-bg); }

@media (max-width: 767.98px) {
    .seitenkopf         { gap: .5rem; padding: .5rem .75rem; }
    .seitenkopf-titel   { font-size: 1.05rem; }
    /* Kontext ist die erste Zeile, die weichen darf: sie wiederholt, was in der
       Filterleiste ohnehin steht. Titel, Reiter und Knöpfe bleiben. */
    .seitenkopf-kontext { display: none; }
}


/* ============================================================================
   Hinweise (Toasts) – Ersatz für alert(). Steuerung in assets/hinweis.js
   ----------------------------------------------------------------------------
   Farben ausschliesslich aus den Ampel-Tokens oben: eine Rückmeldung sagt WIE
   etwas gelaufen ist, nicht in welchem Bereich man ist. Darum hier bewusst
   keine Bereichsfarbe (Skill pfyls-brand §5.1).
   Kontraste sind die bereits gemessenen der Chip-Töne: rot 6,52:1,
   gelb 5,77:1, grün 6,44:1, neutral 6,49:1.
   ==========================================================================*/
#pf-hinweise {
    z-index: 1090;              /* über Offcanvas (1045) und Modal-Backdrop (1050) */
    max-width: min(28rem, calc(100vw - 1.5rem));
}

.pf-hinweis {
    border: 1px solid rgba(0, 0, 0, .08);
    border-left-width: 4px;
    box-shadow: 0 .5rem 1rem rgba(20, 43, 112, .15);
}

.pf-hinweis .toast-body { font-size: .9rem; }

.pf-hinweis-symbol { font-size: 1.05rem; line-height: 1.35; }

.pf-hinweis-ok {
    background-color: var(--pf-ampel-gruen-chip);
    border-left-color: var(--pf-ampel-gruen-text);
    color: var(--pf-ampel-gruen-text);
}
.pf-hinweis-warnung {
    background-color: var(--pf-ampel-gelb-chip);
    border-left-color: var(--pf-ampel-gelb-text);
    color: var(--pf-ampel-gelb-text);
}
.pf-hinweis-fehler {
    background-color: var(--pf-ampel-rot-chip);
    border-left-color: var(--pf-ampel-rot-text);
    color: var(--pf-ampel-rot-text);
}
.pf-hinweis-info {
    background-color: var(--pf-ampel-neutral-chip);
    border-left-color: var(--pf-ampel-neutral-text);
    color: var(--pf-ampel-neutral-text);
}

/* Auf dem Handy über die volle Breite, sonst steht die Meldung als schmaler
   Streifen am Rand und wird überlesen. */
@media (max-width: 575.98px) {
    #pf-hinweise {
        left: 0;
        right: 0;
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   treuhand.php – bis 06.09.2026 als <style>-Block in der Seite. Hierher verschoben,
   damit die Seite ohne Inline-CSS auskommt (CSP Stufe 2) und der Browser cacht.
   Steht bewusst am Ende: in der Seite stand der Block NACH style.css und gewann
   damit gegen die Handy-Regeln oben (.kunde-header .btn-settings) – so bleibt es.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Filter-Bar ─────────────────────────────── */
.filter-bar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* ── Kunden-Gruppe ──────────────────────────── */
.kunde-group { margin-bottom:.55rem; border-radius:.4rem; overflow:hidden;
               box-shadow:0 1px 3px rgba(0,0,0,.07); }
.kunde-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:.38rem .8rem;
    background: var(--pf-flaeche-2);
    border-bottom:1px solid var(--pf-linie);
}
/* Zustand des Kunden = Ampel → Ampel-Tokens statt eigener Verläufe (C2, 18.09.2026).
   Gesetzt in treuhand.php und nachgeführt in assets/treuhand.js recolorHeader(). */
.kunde-header.kopf-gruen { background: var(--pf-ampel-gruen-flaeche); border-bottom-color: var(--pf-ampel-gruen-chip); }
.kunde-header.kopf-rot   { background: var(--pf-ampel-rot-flaeche);   border-bottom-color: var(--pf-ampel-rot-chip); }
.kunde-header.kopf-gelb  { background: var(--pf-ampel-gelb-flaeche);  border-bottom-color: var(--pf-ampel-gelb-chip); }
.kunde-header .all-done-lbl { font-size:.75rem; color: var(--pf-ampel-gruen-text); }
.kunde-header .btn-add-indiv { font-size:.75rem; padding:.2rem .55rem; }
.kunde-header .kunde-name { font-weight:700; font-size:.88rem; color:var(--pf-marke); }
.kunde-header .ver-badge {
    font-size:.68rem; font-weight:600; padding:.15rem .45rem; border-radius:20px;
    background:var(--pf-flaeche); color:var(--pf-marke); border:1px solid var(--pf-linie);
}
.kunde-header .btn-settings {
    padding:.15rem .4rem; font-size:.75rem; line-height:1;
    border:1px solid var(--bs-border-color); border-radius:.3rem; background:var(--pf-flaeche);
    color:var(--pf-muted); transition:.15s; white-space:nowrap;
}
.kunde-header .btn-settings:hover { background:var(--pf-marke-flaeche); color:#fff; border-color:var(--pf-marke-flaeche); }

/* ── Task-Zeilen ────────────────────────────── */
.task-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.task-table td { padding:.28rem .5rem; border-bottom:1px solid var(--pf-linie-fein); vertical-align:middle; }
.task-table tr:last-child td { border-bottom:none; }
.row-ok     td { background:var(--pf-ampel-gruen-flaeche); }
.row-danger td { background:var(--pf-ampel-rot-flaeche); }
.row-warn   td { background:var(--pf-ampel-gelb-flaeche); }
/* Kopfzeile und Spalten der Aufgabentabelle – vorher style="…" in treuhand.php (16px-Basis: 155/95/120/130/100/28 px) */
.task-kopf th   { padding:.2rem .5rem; background:var(--bs-tertiary-bg); font-size:.68rem; font-weight:600;
                  color:var(--pf-muted); text-transform:uppercase; letter-spacing:.02em; }
.tt-aufgabe     { width:8.5rem; }
.tt-frist       { width:5.5rem; }
.tt-nachgefragt { width:6.75rem; }
.tt-status      { width:6.75rem; }
.tt-erledigt    { width:5.5rem; }
/* Seit der Schrift aus C1 (Plex Sans läuft breiter) passten die sieben Spalten bei 1366 px nicht mehr in den
   halben Bildschirm (gemessen 18.09.2026: 27/27 Blöcke 15–102 px abgeschnitten). Darum engere Polster und
   Spalten; die Bemerkung darf überall umbrechen. */
.task-table td[data-field="bemerkung"] { overflow-wrap:anywhere; }
.task-table td.tt-loeschen { width:1.75rem; padding:.2rem; }
.tt-loeschen .btn { font-size:.8rem; line-height:1; }
.tt-periode     { font-size:.68rem; color:var(--pf-muted); line-height:1; }
.leer-strich    { color:var(--pf-muted-hell); }                 /* Platzhalter «–», nur Deko */
td.editable[data-fest] { pointer-events:none; }                  /* Frist nicht von Hand änderbar (MWST, Abschluss, Lohn) */
.indiv-form-row td { padding:.5rem .8rem; background:var(--pf-flaeche-2); border-top:2px dashed var(--pf-kat-individuell); }
.indiv-form-row input[type="text"] { max-width:17.5rem; }
.indiv-form-row input[type="date"] { max-width:9.375rem; }
#tkSettingsOC   { --bs-offcanvas-width: 21.25rem; }             /* 340 px bei «klein» */
/* Ampel als Schriftfarbe – nur für die Legende über der Liste */
.ampel-schrift-gruen { color:var(--pf-ampel-gruen-text); }
.ampel-schrift-rot   { color:var(--pf-ampel-rot-text); }
.ampel-schrift-gelb  { color:var(--pf-ampel-gelb-text); }

/* ── Typ-Badge ──────────────────────────────── */
/* Kategorie = Umriss: Rand und Schrift in der Kategoriefarbe, Füllung neutral. Tokens im :root. */
.typ-badge { display:inline-block; padding:.12rem .5rem; border-radius:20px;
             font-size:.72rem; font-weight:600; white-space:nowrap;
             background:var(--pf-flaeche); border:1.5px solid currentColor; }
.kat-mwst        { color:var(--pf-kat-mwst); }
.kat-abschluss   { color:var(--pf-kat-abschluss); }
.kat-steuererkl  { color:var(--pf-kat-steuererkl); }
.kat-lohn        { color:var(--pf-kat-lohn); }
.kat-individuell { color:var(--pf-kat-individuell); }
/* Frei getippter Titel: darf umbrechen, sonst drückt er die Tabelle aus dem Block */
.typ-badge.kat-individuell { white-space:normal; border-radius:.6rem; }
/* Passt ein Block trotzdem nicht (Menü fixiert bei 1366 px): waagrecht scrollen statt abschneiden */
.kunde-group { overflow-x:auto; }

/* ── Status-Toggle ──────────────────────────── */
.status-toggle { cursor:pointer; user-select:none; display:inline-flex;
                 align-items:center; gap:.25rem; padding:.15rem .5rem;
                 border-radius:20px; font-size:.74rem; font-weight:600;
                 border:none; transition:.15s; }
.status-toggle.erledigt { background:var(--pf-ampel-gruen-chip);   color:var(--pf-ampel-gruen-text); }
.status-toggle.pendent  { background:var(--pf-ampel-neutral-chip); color:var(--pf-ampel-neutral-text); }
.status-toggle:hover { filter:brightness(.93); }

/* ── Inline-Edit ────────────────────────────── */
td.editable { cursor:pointer; }
td.editable:hover::after { content:' ✎'; color:var(--pf-muted-hell); font-size:.7em; }
td.save-ok   { animation: flashGreen .9s ease; }
@keyframes flashGreen { 0%{background:var(--pf-blink-ok)} 100%{background:inherit} }

/* ── 2-Spalten-Grid ─────────────────────────── */
#groups-container { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; align-items:start; }
@media(max-width:1100px){ #groups-container { grid-template-columns:1fr; } }

/* ── Suche ──────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   steuern.php – bis 06.09.2026 als <style>-Block in der Seite (CSP Stufe 2, Browser-Cache).
   Bewusst auf .bereich-band-steuern (die Karte der Steuern-Tabelle) eingegrenzt: treuhand.php
   hat oben eigene, abweichende Regeln für td.editable und td.save-ok. Ohne Eingrenzung
   würde die zuletzt geladene Regel beide Seiten färben – so bleibt jede Seite wie vorher.
   ═══════════════════════════════════════════════════════════════════════════ */
.bereich-band-steuern td.editable { cursor: pointer; transition: background .15s; }
.bereich-band-steuern td.editable:hover { background: rgba(13,110,253,.06) !important; }
.bereich-band-steuern td.editable:hover::after { content: ' ✎'; color: var(--pf-muted-hell); font-size:.75em; }
.bereich-band-steuern td.save-ok  { background: var(--pf-blink-ok) !important; transition: background 1s; }
.bereich-band-steuern td.save-err { background: var(--pf-blink-fehler) !important; transition: background 1s; }
.bereich-band-steuern .toggle-badge { transition: opacity .15s; }
.bereich-band-steuern .toggle-badge:hover { opacity: .75; }
/* Welche Belege fehlen (steuern.php, 18.09.2026) */
.belege-notiz { font-size: .78rem; line-height: 1.25; margin: .2rem auto 0; max-width: 14rem; white-space: normal; }
.belege-notiz-text { color: var(--bs-danger-text-emphasis); }
.belege-notiz-edit { text-decoration: none; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   fristerstreckung.php – bis 06.09.2026 als <style>-Block in der Seite (CSP Stufe 2,
   Browser-Cache). Die Selektoren kommen nur auf dieser Seite vor.
   ═══════════════════════════════════════════════════════════════════════════ */
.status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; }
.dot-ok     { background:var(--pf-punkt-ok); }
.dot-err    { background:var(--pf-punkt-fehler); }
.check-col  { font-size:.75rem; }
td.edit-cell { cursor:pointer; }
td.edit-cell:hover::after { content:' ✎'; color:var(--pf-muted-hell); font-size:.8em; }
/* Ergänzt 18.09.2026 (C2): vorher style="…" in der Seite. Breiten in rem (16px-Basis: 160/200/36/80/420/160/150 px). */
.fr-b-datum        { width: 10rem; }
.fr-b-feld, #frist-email { width: 12.5rem; }
.fr-sp-chk         { width: 2.25rem; }
.fr-sp-check       { width: 5rem; }
.fr-sp-status      { width: 10rem; }
.fr-suche          { max-width: 26.25rem; }
.fr-knopf-klein    { padding: 1px 6px; }
#prot-table        { font-size: .82rem; }
#prot-table .ag-status-sel, #prot-table .ag-frist { min-width: 9.375rem; }
#vm-body           { white-space: pre-wrap; font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   kunden.php – bis 06.09.2026 als <style>-Block in der Seite (CSP Stufe 2, Browser-Cache).
   Über die id #kunden-table von selbst auf die Kundenliste begrenzt.
   ═══════════════════════════════════════════════════════════════════════════ */
#kunden-table td, #kunden-table th { padding: .28rem .6rem; vertical-align: middle; }
#kunden-table tbody tr { border-bottom: 1px solid var(--pf-linie-fein); }
#kunden-table { font-size: .82rem; }
/* Spaltenbreiten in rem, damit sie mit der Schriftgrösse wachsen (16px-Basis: 120/90/72/95/60/130 px) */
.kd-sp-nr     { width: 7.5rem; }
.kd-sp-ver    { width: 5.625rem; }
.kd-sp-aba    { width: 4.5rem; }
.kd-sp-module { width: 5.95rem; }
.kd-sp-aktion { width: 3.75rem; }
.kd-sp-label  { width: 8.125rem; }
.kd-ver       { display: inline-block; min-width: 3.25rem; }
.kd-aba-chip  { cursor: default; letter-spacing: .02em; }
#kunden-table tr[data-kid] { cursor: pointer; }               /* ganze Zeile öffnet den Kunden (Meldung 7) */
@media (max-width:767px) {
  #kunden-table th.d-none-mobile,
  #kunden-table td.d-none-mobile { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   mailing.php – bis 06.09.2026 als <style>-Block in der Seite (CSP Stufe 2, Browser-Cache).
   Über die id #body-editor von selbst auf den Mail-Editor begrenzt.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Ein contenteditable kennt kein placeholder-Attribut. Statt ein Overlay
   zu positionieren, hängt der Hinweis als ::before am leeren Editor –
   das verrutscht nicht und braucht keine Positionsrechnerei. */
#body-editor.ed-leer::before{
  content: attr(data-platzhalter);
  color: var(--pf-muted); font-style: italic; pointer-events: none;
}
#body-editor:focus{ outline: 0; box-shadow: 0 0 0 .2rem rgba(13,110,253,.2); }
#body-editor p{ margin: 0 0 .75rem; }
#body-editor ul, #body-editor ol{ margin: 0 0 .75rem; padding-left: 1.4rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   «Fehler melden» (assets/melden.js, Etappe A 17.09.2026) – aus der Demo übernommen.
   Orange = Consulting-Ton als Signalfarbe des Melders: er gehört zu keinem Bereich und darf
   mit keiner Ampelfarbe verwechselt werden. Alle Töne über Tokens bzw. Bootstrap-Variablen,
   damit der Dunkelmodus (Etappe C) ohne Nacharbeit greift. z-index unter #pf-hinweise (1090).
   ═══════════════════════════════════════════════════════════════════════════ */
.melder-aktiv, .melder-aktiv * { cursor: crosshair !important; }
.melder-ueberlage { position: fixed; z-index: 1085; pointer-events: none; box-sizing: border-box;
  border: 2px solid var(--pf-consulting); border-radius: 3px;
  background: color-mix(in srgb, var(--pf-consulting) 12%, transparent); }
.melder-ueberlage.fest { background: color-mix(in srgb, var(--pf-consulting) 18%, transparent); }
.melder-ueberlage .melder-chip { position: absolute; left: -2px; top: -1.3rem; background: var(--pf-consulting); color: #fff;
  font-size: .7rem; font-weight: 600; line-height: 1.2; padding: .12rem .45rem; border-radius: 3px 3px 0 0; white-space: nowrap; }
.melder-band { position: fixed; left: 0; right: 0; top: 0; z-index: 1086; display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  background: var(--pf-consulting-hell); color: var(--pf-auf-hell); border-left: 4px solid var(--pf-consulting);
  box-shadow: 0 2px 10px rgba(0,0,0,.2); padding: .55rem 1rem; }
.melder-band .bi-flag-fill { color: var(--pf-consulting); font-size: 1.1rem; }
.melder-band .melder-band-text { flex: 1 1 16rem; }
.melder-band .melder-band-knoepfe { display: flex; gap: .4rem; flex-wrap: wrap; }
.melder-band .btn, .melder-band .btn * { cursor: pointer !important; }
.melder-tafel { position: fixed; right: 1rem; bottom: 1rem; z-index: 1086; width: min(480px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem); overflow: auto; background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-top: 4px solid var(--pf-consulting); border-radius: .5rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); padding: 1rem 1.1rem; text-align: left; }
.melder-tafel h2 { font-size: 1.1rem; margin: 0; }
.melder-tafel .melder-stelle { font-family: var(--bs-font-monospace); font-size: .78rem; background: var(--bs-tertiary-bg);
  border-radius: .3rem; padding: .35rem .55rem; word-break: break-all; }
.melder-tafel details { font-size: .85rem; }
.melder-tafel details summary { cursor: pointer; color: var(--bs-link-color); }
.melder-tafel .melder-liste { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--bs-secondary-color); }
.melder-tafel .melder-liste code { font-size: .78rem; word-break: break-all; }
.melder-tafel .melder-bild { border: 1px dashed var(--bs-border-color); border-radius: .375rem; padding: .5rem .6rem;
  font-size: .82rem; color: var(--bs-secondary-color); outline: none; }
.melder-tafel .melder-bild:focus { border-color: var(--pf-consulting); }
.melder-tafel .melder-bild kbd { font-size: .75rem; }
.melder-tafel .melder-bild img { display: block; max-width: 100%; max-height: 180px; border-radius: .25rem; }
@media print { .melder-ui, .melder-ueberlage { display: none !important; } }

/* meldungen.php (Verwaltung → Meldungen) */
.meldung-text { white-space: pre-wrap; }
.meldung-foto { max-width: 360px; max-height: 240px; }

/* ═══════════════════════════════════════════════════════════════════════════
   dashboard.php – bis 18.09.2026 als <style>-Block in der Seite (Etappe C2).
   Nur Geometrie. Jede Farbe ist ein Token aus dem :root oben – CLAUDE.md §8.
   Bereich (Treuhand/Steuern) färbt nur Rahmen und Spaltenkopf, Ampel nur Flächen.
   ⚠️ .chip ist auf .dash-wrap eingegrenzt: die Klasse gibt es auch auf kunden.php und im Nachfrage-Fenster.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Nur Geometrie. Jede Farbe ist ein Token aus dem :root von assets/style.css –
   CLAUDE.md §8: dort und nirgends sonst wird eine Farbe definiert.
   Bereich (Treuhand/Steuern) färbt nur Rahmen und Spaltenkopf, Ampel nur Flächen. */
.dash-sec         { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pf-marke); }
.dash-box         { border:1.5px solid var(--pf-marke); border-radius:.4rem; overflow:hidden; background:var(--pf-flaeche); }

.wo-row           { display:grid; grid-template-columns:10px 1fr 78px 70px 18px; gap:.5rem; align-items:center;
                    padding:.28rem .45rem; border-bottom:1px dashed var(--pf-ampel-neutral-chip);
                    font-size:.8rem; color:var(--pf-marke); text-decoration:none; }
.wo-row:hover     { background:var(--pf-ampel-neutral-flaeche); }
.wo-row.is-rot    { background:var(--pf-ampel-rot-flaeche); color:var(--pf-ampel-rot-text); }
.wo-row.is-rot:hover { background:var(--pf-ampel-rot-chip); }
.wo-dot           { width:10px; height:10px; border-radius:2px; }
.wo-dot-treuhand  { background:var(--pf-treuhand-band); }
.wo-dot-steuern   { background:var(--pf-steuern-band); }
.wo-dot-pendenz   { background:var(--pf-marke); }
.wo-tag           { flex:1; border:1.5px solid var(--pf-marke); border-radius:.25rem; padding:.25rem;
                    text-align:center; color:var(--pf-marke); }
.wo-tag.is-rot    { border-color:var(--pf-ampel-rot-text);  background:var(--pf-ampel-rot-chip);  color:var(--pf-ampel-rot-text); }
.wo-tag.is-orange { border-color:var(--pf-ampel-gelb-text); background:var(--pf-ampel-gelb-chip); color:var(--pf-ampel-gelb-text); }
.wo-tag .n        { font-size:1.15rem; font-weight:700; line-height:1.1; }
.wo-tag .l        { font-size:.6rem; font-weight:600; }

/* Arbeitsvorrat: zwei Spalten, Zeilen auf gleicher Höhe */
.av               { display:grid; grid-template-columns:1fr 1fr; font-size:.82rem; color:var(--pf-marke); }
.av > div         { padding:.35rem .6rem; display:flex; justify-content:space-between; gap:.5rem; align-items:baseline; }
/* Spaltenkopf: satte Bereichsfläche mit weisser Schrift – derselbe Kanal wie ein Badge.
   Er trägt keine Ampel-Information, darum kann hier nichts kollidieren. */
.av .hd           { color:#fff; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.4rem .6rem; }
.av .hd-th        { background:var(--pf-treuhand); }
.av .hd-st        { background:var(--pf-steuern); }
.av .hd a         { color:#fff; text-decoration:none; font-weight:400; text-transform:none; letter-spacing:0; }
.av .rot          { background:var(--pf-ampel-rot-flaeche);  color:var(--pf-ampel-rot-text);  border-bottom:1px solid var(--pf-ampel-rot-chip); }
.av .orange       { background:var(--pf-ampel-gelb-flaeche); color:var(--pf-ampel-gelb-text); border-bottom:1px solid var(--pf-ampel-gelb-chip); }
.av .neutral      { border-bottom:1px dashed var(--pf-ampel-neutral-chip); }
.av .total        { background:var(--pf-ampel-neutral-flaeche); font-weight:700; }
.av .re           { border-left:1px solid var(--pf-ampel-neutral-chip); }
.av .leer         { opacity:.35; }
.av .z            { font-weight:700; white-space:nowrap; }
.av a             { color:inherit; text-decoration:none; }
.av a:hover       { text-decoration:underline; }

.dash-wrap .chip             { display:inline-block; border:1.5px solid var(--pf-marke); border-radius:20px;
                    padding:.2rem .6rem; font-size:.75rem; color:var(--pf-marke); text-decoration:none; }
.dash-wrap .chip.warn        { border-color:var(--pf-ampel-gelb-text); background:var(--pf-ampel-gelb-chip); color:var(--pf-ampel-gelb-text); }
.dash-wrap .chip:hover       { filter:brightness(.96); }
.pend-kopf        { background:var(--pf-marke-flaeche); color:#fff; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; }
.pend-kopf th     { color:#fff; }
.pend-rot td      { background:var(--pf-ampel-rot-flaeche) !important; color:var(--pf-ampel-rot-text); }

/* ── Umsatz & Mindestumsatz: Abschlussblock (31.08.2026) ───────────────
   Gross heisst mehr Platz PRO ZAHL, nicht mehr Zahlen. Die Ampel faerbt
   nur die kleine Plakette in der Spalte «Stand», nie eine Flaeche – so
   kann sie mit den Bereichsfarben nicht kollidieren (pfyls-brand §5.1). */
.ub-kopf     { background:var(--pf-marke-flaeche); color:#fff; padding:.5rem .85rem; display:flex;
               justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.4rem; }
.ub-kopf .t  { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.ub-kopf .s  { font-size:.7rem; opacity:.88; }
.ub-kopf a   { color:#fff; }
.ub-sync     { background:var(--pf-flaeche); color:var(--pf-marke); border:0; border-radius:.25rem;
               font-size:.68rem; font-weight:600; padding:.12rem .5rem; margin-left:.5rem;
               white-space:nowrap; }
.ub-sync:hover  { filter:brightness(.94); }
.ub-sync:disabled { opacity:.7; }
.ub-reihe    { display:grid; grid-template-columns:minmax(320px,1fr) 1.3fr; }
.ub-pan      { padding:.9rem 1rem; }
.ub-pan + .ub-pan { border-left:1px solid var(--pf-ampel-neutral-chip);
                    background:var(--pf-ampel-neutral-flaeche); }
.ub-tit      { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
               color:var(--pf-ampel-neutral-text); }
.ub-say      { font-size:.73rem; color:var(--pf-ampel-neutral-text); line-height:1.5; margin-top:.5rem; }
.ub-say b    { color:var(--pf-marke); }
.ub-tabbox   { overflow-x:auto; }
table.ub-tab { width:100%; min-width:255px; border-collapse:collapse; font-size:.9rem; font-variant-numeric:tabular-nums; }
table.ub-tab th { font-size:.6rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700;
                  color:var(--pf-ampel-neutral-text); text-align:right; padding:.35rem 0 .45rem;
                  border-bottom:1px solid var(--pf-ampel-neutral-chip); line-height:1.2;
                  vertical-align:bottom; }
table.ub-tab td, table.ub-tab th { padding-left:.3rem; }
table.ub-tab td:first-child, table.ub-tab th:first-child { padding-left:0; }
table.ub-tab th:first-child { text-align:left; }
table.ub-tab td { padding:.6rem 0; border-bottom:1px dashed var(--pf-ampel-neutral-chip); text-align:right; }
table.ub-tab td:first-child { text-align:left; font-weight:600; }
table.ub-tab td.gr { font-size:1.05rem; font-weight:700; }
table.ub-tab tr.tot td { border-bottom:0; border-top:1.5px solid var(--pf-ampel-neutral-chip);
                         padding-top:.6rem; color:var(--pf-ampel-neutral-text); }
table.ub-tab tr.tot td:first-child, table.ub-tab tr.tot td.gr { color:var(--pf-marke); }
.ub-chip     { font-weight:700; padding:.12rem .3rem; border-radius:.2rem; white-space:nowrap; font-size:.75rem; }
.ub-gruen    { background:var(--pf-ampel-gruen-chip); color:var(--pf-ampel-gruen-text); }
.ub-gelb     { background:var(--pf-ampel-gelb-chip);  color:var(--pf-ampel-gelb-text); }
.ub-rot      { background:var(--pf-ampel-rot-chip);   color:var(--pf-ampel-rot-text); }
.ub-neutral  { background:var(--pf-ampel-neutral-chip); color:var(--pf-ampel-neutral-text); }
.ub-grid     { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:.35rem; }
.ub-vkopf    { display:flex; justify-content:space-between; align-items:baseline; font-size:.76rem;
               color:var(--pf-ampel-neutral-text); }
.ub-vkopf b  { color:var(--pf-marke); font-size:.84rem; }
.ub-chart    { width:100%; height:auto; display:block; margin-top:.1rem; }
.ub-leg      { font-size:.67rem; color:var(--pf-ampel-neutral-text); display:flex; gap:.9rem;
               flex-wrap:wrap; margin-top:.3rem; }
.ub-leg i    { display:inline-block; width:15px; height:0; border-top:2px solid var(--pf-marke);
               margin-right:.25rem; vertical-align:middle; }
.ub-leg i.so { border-top:2px dashed var(--pf-ampel-neutral-text); }
.ub-leg i.neu { border-top:6px solid var(--pf-steuern); }           /* Mandate pro Steuerjahr (uebersicht_steuern) */
.ub-leg i.weg { border-top:6px solid var(--pf-ampel-rot-text); }
.ub-leg i.vl  { opacity:.55; }
.ub-fuss     { border-top:1.5px solid var(--pf-ampel-neutral-chip); padding:.55rem 1rem; font-size:.76rem;
               color:var(--pf-ampel-neutral-text); background:var(--pf-ampel-neutral-flaeche);
               display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }
.ub-fuss a   { color:var(--pf-marke); }
.ub-reihe2   { display:grid; grid-template-columns:1.45fr 1fr; }
.ub-liste    { margin-top:.55rem; }
.ub-zeile    { display:grid; grid-template-columns:minmax(78px,auto) 1fr auto; gap:.55rem;
               align-items:center; font-size:.78rem; padding:.22rem 0; }
.ub-zeile .n { color:var(--pf-ampel-neutral-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ub-zeile .z { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ub-balken   { height:12px; background:var(--pf-ampel-neutral-chip); position:relative; }
.ub-balken i { position:absolute; left:0; top:0; bottom:0; background:var(--pf-marke); }
.ub-balken i.w { background:var(--pf-ampel-gelb-text); }
.ub-balken i.s { background:var(--pf-ampel-rot-text); }
/* ── Arbeitsvorrat auf schmalen Fenstern (Fix 31.08.2026) ─────────────
   🔴 Das Markup steht ABWECHSELND im DOM: Treuhand-Kopf, Steuern-Kopf,
   Treuhand-Zeile, Steuern-Zeile, … Klappt das Raster auf eine Spalte,
   landen dadurch beide Spaltenköpfe direkt untereinander und darunter
   alternieren die Zeilen ohne jede Kennzeichnung – der zuletzt sichtbare
   Kopf ist «Steuern», also liest man die ganze Liste als Steuern. Die
   Zahlen waren immer richtig, nur die Zuordnung unlesbar.

   Gelöst über `order` statt über einen Markup-Umbau: `.re` markiert
   ausnahmslos jede Steuern-Zelle und keine einzige Treuhand-Zelle (24 von
   24 Zellen geprüft). Innerhalb derselben order-Gruppe gilt die
   Quellreihenfolge – der jeweilige Spaltenkopf bleibt darum vor seinen
   eigenen Zeilen. ⚠️ Wer eine Zeile ergänzt, muss `.re` weiterhin genau
   auf der Steuern-Seite setzen, sonst rutscht sie unter den falschen Kopf.

   Die `.leer`-Zellen («—») halten nur die beiden Spalten auf gleicher
   Höhe. Einspaltig haben sie keine Aufgabe mehr und wären leere Zeilen. */
@media(max-width:991px){
  .av              { grid-template-columns:1fr; }
  .av > div        { order:1; }          /* Treuhand zuerst, in Quellreihenfolge */
  .av > div.re     { order:2; }          /* danach der ganze Steuern-Block      */
  .av .re          { border-left:0; }
  .av .leer        { display:none; }
  .av .hd-st       { margin-top:.35rem; }
}
@media(max-width:900px){ .ub-reihe, .ub-reihe2, .ub-grid { grid-template-columns:1fr; }
  .ub-pan + .ub-pan { border-left:0; border-top:1px solid var(--pf-ampel-neutral-chip); } }

/* Ergänzt 18.09.2026 (C2): was vorher als style="…" in der Seite stand */
.wo-tag-offen     { border-style:dashed; }
.dash-link-gelb   { color:var(--pf-ampel-gelb-text); }

/* Bereichsübersichten (Etappe D, 18.09.2026): dieselben Arbeitsvorrat-Zeilen wie auf dem
   Dashboard, aber nur EINE Spalte – uebersicht_treuhand/_steuern/_adressen.php. */
.av.av-eins       { grid-template-columns:1fr; }
.dash-schmal      { max-width:40rem; }
.ub-linie-oben    { border-top:1px solid var(--pf-ampel-neutral-chip); }
.ub-jahrfeld      { display:inline-block; width:11px; height:9px; background:var(--pf-marke); margin-right:.25rem; }
.ub-jahrfeld-vor  { background:var(--pf-ampel-neutral-text); opacity:.4; }
.ub-zeile-kunde   { grid-template-columns:minmax(140px,220px) 1fr auto; }
.ub-zeile-kunde .n { color:var(--pf-marke); font-weight:600; }
#ubOffcanvas      { --bs-offcanvas-width: 25rem; }            /* 400 px bei «klein» */

/* ═══ Kalender (Etappe E1, 18.09.2026) – Raster nach der Demo, Termine aus Google ═══════════════
   Farben NUR aus vorhandenen Tokens (pfyls-brand): ein Termin ist weder Bereich noch Ampel.
   Jeder Termin liegt auf einer leichten Tönung des Markentons (--bs-primary-rgb, in Hell und Dunkel je eigener Wert),
   verknüpfte kräftiger und mit der Marke als RAHMEN (pfyls-brand §9). Gemessen 18.09.2026: Text auf der kräftigen Tönung
   hell 10,93:1, dunkel 9,11:1; Adressname (--pf-marke) hell 9,25:1, dunkel 5,53:1. Gedämpfte Schrift fiele hell auf 3,84:1 –
   darum trägt die Zeit die normale Textfarbe. Erster Wurf (--pf-flaeche-2) war im Dunkeln unsichtbar.
   Positionen im Wochenraster setzt assets/kalender.js aus data-Attributen (kein style= im HTML). */
.kal-karte{overflow:hidden;}
.kal-woche{--kal-zeitspalte:3.4rem;--kal-tage:7;}
.kal-woche.kal-tage-5{--kal-tage:5;} .kal-woche.kal-tage-6{--kal-tage:6;}
.kal-kopf,.kal-ganztags{display:grid;grid-template-columns:var(--kal-zeitspalte) repeat(var(--kal-tage),minmax(0,1fr));border-bottom:1px solid var(--pf-linie);}
.kal-kopf{background:var(--pf-flaeche-2);}
.kal-ecke{border-right:1px solid var(--pf-linie);padding:.3rem .4rem;}
.kal-tag-kopf{padding:.45rem .5rem;border-right:1px solid var(--pf-linie);text-align:center;line-height:1.2;}
.kal-tag-kopf .wt{font-family:var(--bs-font-monospace);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pf-muted);}
.kal-tag-kopf .dt{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:1.05rem;}
.kal-tag-kopf.heute .dt{background:var(--pf-marke-flaeche);color:#fff;border-radius:999px;padding:0 .45rem;}
.kal-gz-zelle{min-height:1.9rem;border-right:1px solid var(--pf-linie);padding:.15rem .2rem;display:flex;flex-direction:column;gap:2px;cursor:pointer;}
.kal-koerper{display:flex;position:relative;}
.kal-zeiten{flex:0 0 var(--kal-zeitspalte);position:relative;border-right:1px solid var(--pf-linie);}
.kal-zeit{position:absolute;right:.35rem;transform:translateY(-.55em);font-family:var(--bs-font-monospace);font-size:.72rem;color:var(--pf-muted);}
.kal-spalte{flex:1 1 0;min-width:0;position:relative;border-right:1px solid var(--pf-linie);}
.kal-spalte.heute{background:rgba(var(--bs-primary-rgb),.04);}
.kal-zelle{position:absolute;left:0;right:0;border-top:1px solid var(--pf-linie);cursor:pointer;}
.kal-zelle:not(.volle){border-top-style:dotted;}
.kal-zelle:hover{background:rgba(var(--bs-primary-rgb),.08);}
.kal-termin{position:absolute;border-radius:.35rem;padding:.15rem .4rem;font-size:.8rem;line-height:1.25;overflow:hidden;cursor:pointer;z-index:2;
  background:rgba(var(--bs-primary-rgb),.10);color:var(--pf-text);border:1px solid rgba(var(--bs-primary-rgb),.3);border-left:3px solid var(--pf-muted);box-shadow:0 1px 2px rgba(0,0,0,.12);}
.kal-termin .zeit{display:block;font-family:var(--bs-font-monospace);font-size:.7rem;font-weight:600;}
.kal-termin .titel{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kal-termin .kunde{display:block;font-size:.74rem;color:var(--pf-marke);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kal-termin.verknuepft,.kal-chip.verknuepft,.kal-farbe.verknuepft{background:rgba(var(--bs-primary-rgb),.18);border-color:var(--pf-marke);}
.kal-termin:focus-visible,.kal-chip:focus-visible{outline:2px solid var(--pf-marke);outline-offset:1px;}
/* E2 Drag & Drop: nur Tokens – gilt darum in hell und dunkel */
.kal-termin[draggable="true"],.kal-chip[draggable="true"]{cursor:grab;}
.kal-termin.ziehe,.kal-chip.ziehe{opacity:.45;}
.kal-termin.wartet,.kal-chip.wartet{opacity:.6;pointer-events:none;}
.kal-spalte.drop-ziel,.kal-gz-zelle.drop-ziel,.kal-monat-zelle.drop-ziel{background:rgba(var(--bs-primary-rgb),.12);box-shadow:inset 0 0 0 2px var(--pf-marke);}
.kal-jetzt{position:absolute;left:0;right:0;border-top:2px solid var(--pf-ampel-rot-text);z-index:3;pointer-events:none;}
.kal-jetzt::before{content:'';position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--pf-ampel-rot-text);}
.kal-chip{display:block;width:100%;text-align:left;border:1px solid rgba(var(--bs-primary-rgb),.3);border-left:3px solid var(--pf-muted);border-radius:.3rem;padding:.1rem .35rem;font-size:.76rem;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:inherit;background:rgba(var(--bs-primary-rgb),.10);color:var(--pf-text);}
.kal-chip .zeit{font-family:var(--bs-font-monospace);font-size:.7rem;font-weight:600;}
.kal-farbe{display:inline-block;width:.9rem;height:.9rem;border-radius:.2rem;border:1px solid rgba(var(--bs-primary-rgb),.3);border-left:3px solid var(--pf-muted);background:rgba(var(--bs-primary-rgb),.10);vertical-align:-.1rem;margin-right:.2rem;}
.kal-monat-kopf{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--pf-flaeche-2);border-bottom:1px solid var(--pf-linie);}
.kal-monat-kopf div{padding:.4rem;text-align:center;font-family:var(--bs-font-monospace);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pf-muted);border-right:1px solid var(--pf-linie);}
.kal-monat-zeile{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--pf-linie);}
.kal-monat-zelle{min-height:6.2rem;border-right:1px solid var(--pf-linie);padding:.25rem .3rem;display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0;}
.kal-monat-zelle:hover{background:rgba(var(--bs-primary-rgb),.04);}
.kal-monat-zelle.fremd{opacity:.5;}
.kal-monat-zelle.heute{background:rgba(var(--bs-primary-rgb),.07);}
.kal-monat-tag{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:.95rem;margin-bottom:.1rem;}
.kal-monat-zelle.heute .kal-monat-tag a{background:var(--pf-marke-flaeche);color:#fff;border-radius:999px;padding:0 .4rem;}
.kal-mehr{font-size:.74rem;color:var(--pf-muted);text-decoration:none;}
.kal-legende .bi{color:var(--pf-muted);}
.kal-titelzeit{font-family:'Source Serif 4',Georgia,serif;}
.kal-beschreibung{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--pf-flaeche-2);border:1px solid var(--pf-linie);border-radius:.4rem;padding:.5rem .7rem;max-height:14rem;overflow:auto;}
.kal-vorschlaege{position:absolute;left:0;right:0;top:100%;z-index:1060;max-height:16rem;overflow:auto;box-shadow:0 .4rem 1rem rgba(0,0,0,.15);}
.kal-adresse{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--pf-marke);border-radius:999px;padding:.1rem .3rem .1rem .6rem;font-size:.82rem;background:var(--pf-flaeche);}
.kal-adresse a{text-decoration:none;}
.btn-close-sm{width:.55em;height:.55em;padding:.2em;}
.oc-termin{display:flex;gap:.5rem;align-items:baseline;padding:.3rem 0;border-top:1px solid var(--pf-linie);}
.oc-termin .wann{flex:0 0 6.2rem;font-family:var(--bs-font-monospace);font-size:.75rem;color:var(--pf-muted);}
.oc-termin.weg{color:var(--pf-muted);}
@media (max-width:767px){
  .kal-woche{--kal-zeitspalte:2.6rem;}
  .kal-tag-kopf{padding:.3rem .1rem;} .kal-tag-kopf .wt{display:block;font-size:.62rem;} .kal-tag-kopf .dt{font-size:.7rem;white-space:nowrap;}
  .kal-tag-kopf.heute .dt{padding:0 .2rem;}
  .kal-termin{font-size:.68rem;padding:.1rem .2rem;} .kal-termin .kunde,.kal-termin .zeit{display:none;}   /* die Zeit zeigt das Raster */
  .kal-monat-zelle{min-height:4.2rem;padding:.15rem;} .kal-chip{font-size:.62rem;padding:.05rem .2rem;} .kal-chip .zeit{display:none;}
  .kal-legende .ms-auto{margin-left:0!important;}
}
.text-none{text-transform:none;}   /* Knopf in einer Grossbuchstaben-Überschrift (kunden.php, Termine) */

/* Treuhand-Übersicht, Etappe D2 (18.09.2026) – uebersicht_treuhand.php.
   Zwei Blöcke nebeneinander, unter 992 px untereinander. Nur Geometrie, Farben aus den Tokens. */
.ut-raster        { display:grid; grid-template-columns:1fr 1fr; gap:0 1.25rem; align-items:start; }
@media(max-width:991px){ .ut-raster { grid-template-columns:1fr; } }
.ut-innen         { padding:.35rem .6rem .5rem; }
.ut-innen .wo-row { grid-template-columns:10px 1fr 92px 58px 18px; }
.ut-gruppe        { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
                    color:var(--pf-ampel-neutral-text); padding:.55rem .45rem .2rem; }
.ut-gruppe:first-child { padding-top:.2rem; }
.ut-art th        { font-weight:700; }
.ut-art th:not(:first-child), .ut-art td:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.ut-art a         { text-decoration:none; }
.ut-art a:hover   { text-decoration:underline; }
.ut-art-total td  { font-weight:700; background:var(--pf-ampel-neutral-flaeche); }
.ut-fort          { padding:.45rem 0 .6rem; }
.ut-fort + .ut-fort { border-top:1px dashed var(--pf-ampel-neutral-chip); }
.ut-fort-kopf     { display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem;
                    font-size:.85rem; color:var(--pf-marke); }
.ut-fort-kopf .z  { font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ut-fort .ub-balken { display:block; margin:.35rem 0 .3rem; border-radius:2px; overflow:hidden; }

/* ═══ Checklisten – checkliste.php, Link in treuhand.php (seit 02.10.2026, PLAN_Checklisten_2026-10-02.md) ═══
   Nur Geometrie, Farben aus den Tokens. Der Ausdruck ist dasselbe HTML: schwarz auf weiss (auch im Dunkelmodus),
   Akzente nur als Rahmen. assets/checkliste.js setzt .cl-druckform vor dem Druck und misst in dieser Form –
   darum stehen die Druckregeln unter der Klasse und nicht nur im @media print. */
.cl-blatt        { max-width:62rem; }
.cl-blattkopf    { border-bottom:2px solid var(--pf-treuhand); padding-bottom:.4rem; margin-bottom:.4rem; }
.cl-titelzeile   { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.cl-blatt-titel  { font-size:1.15rem; font-weight:700; }
.cl-fortschritt  { font-weight:700; font-variant-numeric:tabular-nums; }
.cl-fortschritt.cl-fertig { color:var(--pf-ampel-gruen-text); }
.cl-meta         { font-size:.85rem; color:var(--pf-ampel-neutral-text); }
.cl-mandat-bem   { font-size:.8rem; margin-top:.2rem; }
.cl-block        { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
                   color:var(--pf-ampel-neutral-text); margin:.5rem 0 .1rem; }
.cl-punkt        { border-bottom:1px solid var(--pf-linie); padding:.3rem 0; }
.cl-kopfzeile    { display:grid; grid-template-columns:1.4rem 1.8rem 1fr auto auto; gap:.4rem; align-items:start; }
.cl-box          { width:1.1rem; height:1.1rem; border:1.5px solid var(--pf-ampel-neutral-text); border-radius:3px; padding:0;
                   display:inline-flex; align-items:center; justify-content:center; background:transparent; color:inherit;
                   font-size:.8rem; line-height:1; margin-top:.1rem; }
button.cl-box    { cursor:pointer; }
.cl-box-erledigt { background:var(--pf-treuhand); border-color:var(--pf-treuhand); color:#fff; }
.cl-box-entfaellt { color:var(--pf-ampel-neutral-text); }
.cl-nr           { font-variant-numeric:tabular-nums; color:var(--pf-ampel-neutral-text); text-decoration:none; }
.cl-nr:hover     { text-decoration:underline; }
.cl-st-entfaellt > .cl-kopfzeile .cl-titel { text-decoration:line-through; color:var(--pf-ampel-neutral-text); }
.cl-wer          { font-size:.75rem; color:var(--pf-ampel-neutral-text); white-space:nowrap; }
.cl-werkzeuge    { display:inline-flex; gap:.1rem; }
.cl-zeile .cl-werkzeuge { grid-column:6; }
.cl-werkzeug     { border:0; background:transparent; padding:0 .25rem; color:var(--pf-ampel-neutral-text); }
.cl-werkzeug:hover { color:var(--pf-treuhand); }
.cl-aus          { opacity:.65; }
.cl-hinweis      { font-size:.75rem; color:var(--pf-ampel-orange-text); margin-left:3.6rem; }
.cl-zahlen       { margin:.15rem 0 0 3.6rem; }
.cl-zeile        { display:grid; grid-template-columns:minmax(7rem,1.3fr) 7.5rem 7.5rem 6.5rem 1.4rem 4.2rem; gap:.4rem;
                   align-items:center; font-size:.85rem; padding:.05rem 0; }
.cl-zeile-kopf   { font-size:.7rem; color:var(--pf-ampel-neutral-text); }
.cl-zeile-kopf span:nth-child(n+2):nth-child(-n+4) { text-align:right; }
.cl-betrag       { width:100%; text-align:right; font-variant-numeric:tabular-nums; border:1px solid var(--pf-linie);
                   border-radius:4px; padding:.05rem .35rem; background:transparent; color:inherit; }
.cl-vorschlag    { font-style:italic; color:var(--pf-ampel-neutral-text); }
.cl-zahl         { text-align:right; font-variant-numeric:tabular-nums; }
.cl-diff-rot     { color:var(--pf-ampel-rot-text); font-weight:700; }
.cl-wae, .cl-klein { font-size:.7rem; color:var(--pf-ampel-neutral-text); }
.cl-entfaellt-text { grid-column:2 / 5; color:var(--pf-ampel-neutral-text); font-style:italic; }
.cl-korrektur    { font-size:.78rem; font-style:italic; margin-left:3.6rem; }
/* Bemerkungen: sofort sichtbar (Samuel 02.10.2026) – volle Schrift, Fläche, kräftiger Rand, fettes Etikett */
.cl-dauer, .cl-einmal, .cl-vor { font-size:.875rem; margin:.25rem 0 0 3.6rem; padding:.2rem .55rem; border-left:4px solid; border-radius:0; }
.cl-dauer        { background:var(--pf-ampel-gelb-chip); color:var(--pf-ampel-gelb-text); border-left-color:var(--pf-ampel-orange-text); }
.cl-einmal       { background:var(--pf-treuhand-hell); color:var(--pf-auf-hell); border-left-color:var(--pf-treuhand); }
.cl-vor          { background:var(--pf-ampel-neutral-flaeche); color:var(--pf-ampel-neutral-text); border-left-color:var(--pf-ampel-neutral-chip); }
.cl-bem-label    { font-weight:700; margin-right:.3rem; }
.cl-zahlen .cl-korrektur, .cl-zahlen .cl-einmal { margin-left:0; }
.cl-achtung      { border:1px solid var(--pf-ampel-gelb-chip); background:var(--pf-ampel-gelb-flaeche); border-radius:6px;
                   padding:.45rem .75rem; margin:.4rem 0 .6rem; font-size:.875rem; }
.cl-achtung-titel { font-weight:700; color:var(--pf-ampel-gelb-text); margin-bottom:.2rem; }
.cl-achtung ul   { list-style:none; margin:0; padding:0; }
.cl-achtung li   { padding:.1rem 0; }
.cl-achtung .cl-nr { font-weight:700; }
.cl-achtung-dauer .bi-pin-angle { color:var(--pf-ampel-orange-text); }
.cl-achtung-einmal .bi-pencil { color:var(--pf-treuhand); }
.cl-zusammen     { font-size:.82rem; margin-left:3.6rem; }
.cl-fuss         { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.75rem;
                   color:var(--pf-ampel-neutral-text); border-top:2px solid var(--pf-treuhand); margin-top:.4rem; padding-top:.3rem; }
.cl-edit         { margin:.3rem 0 .3rem 3.6rem; padding:.5rem; border:1px solid var(--pf-linie); border-radius:6px; max-width:36rem; }
.cl-einstellungen { margin-top:1.2rem; max-width:62rem; }
.cl-einstellungen summary { cursor:pointer; font-weight:600; }
.cl-einst-raster { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:.5rem; }
@media(max-width:991px){ .cl-einst-raster { grid-template-columns:1fr; } }
.cl-einst-titel  { font-weight:600; font-size:.85rem; }
.cl-pos-liste, .cl-schalter-liste { list-style:none; padding:0; margin:0 0 .5rem; font-size:.85rem; }
.cl-pos-liste li, .cl-schalter-liste li { display:flex; justify-content:space-between; align-items:center; gap:.5rem;
                   padding:.15rem 0; border-bottom:1px solid var(--pf-linie); }
.cl-aufgeloest   { opacity:.6; }
.cl-pos-neu      { display:grid; grid-template-columns:9rem 1fr 5rem auto; gap:.35rem; }
.cl-nr-klein     { width:1.8rem; color:var(--pf-ampel-neutral-text); }
.cl-schalter-titel { flex:1; }
.cl-schalter-liste select { width:9rem; }
.cl-link         { display:inline-block; font-size:.72rem; margin-top:.15rem; text-decoration:none; color:var(--pf-ampel-neutral-text); }
.cl-link:hover   { text-decoration:underline; color:var(--pf-treuhand); }
.cl-link-fertig  { color:var(--pf-ampel-gruen-text); }
.cl-link-kontrolle { font-size:.68rem; color:var(--pf-ampel-orange-text); margin-left:.3rem; }
@media(max-width:767px){   /* schmal: nicht mehr einrücken, Werkzeuge auf eine eigene Zeile */
  .cl-zahlen, .cl-hinweis, .cl-korrektur, .cl-einmal, .cl-dauer, .cl-vor, .cl-zusammen, .cl-edit { margin-left:0; }
  .cl-kopfzeile { grid-template-columns:1.4rem 1.6rem 1fr auto; }
  .cl-kopfzeile .cl-werkzeuge { grid-column:3 / -1; justify-self:end; }
  .cl-zeile { grid-template-columns:minmax(3rem,1fr) 5rem 5rem 4.2rem 1.2rem; gap:.3rem; }
  .cl-zeile .cl-werkzeuge { grid-column:1 / -1; justify-self:end; }
  .cl-pos-neu { grid-template-columns:1fr 1fr; }
}
/* checklisten.php – Suche und Verlauf */
.cls-treffer td, .cls-verlauf td { vertical-align:top; font-size:.85rem; }
.cls-verlauf .cl-zahl { white-space:nowrap; }

/* Ausdruck randlos (02.10.2026): die benannte Seite «checkliste» hat keinen Rand – damit blendet Chrome Datum und Adresse
   (Kopf-/Fusszeile) von selbst aus; die 12 mm Rand gibt das Blatt selbst (padding). Andere Seiten des Tools behalten ihren Rand. */
@page checkliste { size:A4; margin:0; }
@media print { .kein-druck { display:none !important; } body:has(.cl-blatt) .seitenkopf { display:none !important; } }
.cl-druckform .kein-druck, .cl-druckform .seitenkopf, .cl-druckform .cl-edit { display:none !important; }
.cl-druckform .cl-blatt   { width:186mm; max-width:none; font-size:9pt; color:black; background:white; }
.cl-druckform .cl-blatt * { color:black !important; }
.cl-druckform .cl-kopfzeile { grid-template-columns:1.2rem 1.6rem 1fr auto; }
.cl-druckform .cl-zeile   { grid-template-columns:minmax(6rem,1.3fr) 6.5rem 6.5rem 6rem 1.2rem; font-size:8.5pt; }
.cl-druckform .cl-betrag  { border:0; border-bottom:1px solid black; border-radius:0; padding:0; }
.cl-druckform .cl-box     { border-color:black; }
.cl-druckform .cl-box-erledigt { background:white; }
.cl-druckform .cl-dauer, .cl-druckform .cl-einmal { background:white; border-left-color:black; font-size:8.5pt; padding:0 .4rem; }
.cl-druckform .cl-punkt   { padding:.12rem 0; break-inside:avoid; }
.cl-druckform .cl-aus     { opacity:1; }

/* Checklisten – Darstellung überarbeitet (Samuel 02.10.2026): Fortschritt als Balken, Werkzeuge ruhig bis zum Überfahren,
   erledigte Punkte gedämpft, offene im Vordergrund, Blöcke mit Linie. Breite des Balkens in 5-%-Stufen über Klassen (kein style=). */
.cl-balken       { height:6px; background:var(--pf-linie); border-radius:3px; overflow:hidden; margin:.35rem 0 .3rem; }
.cl-balken > span { display:block; height:100%; background:var(--pf-treuhand); }
.cl-balken-0 { width:0%; }
.cl-balken-5 { width:5%; }
.cl-balken-10 { width:10%; }
.cl-balken-15 { width:15%; }
.cl-balken-20 { width:20%; }
.cl-balken-25 { width:25%; }
.cl-balken-30 { width:30%; }
.cl-balken-35 { width:35%; }
.cl-balken-40 { width:40%; }
.cl-balken-45 { width:45%; }
.cl-balken-50 { width:50%; }
.cl-balken-55 { width:55%; }
.cl-balken-60 { width:60%; }
.cl-balken-65 { width:65%; }
.cl-balken-70 { width:70%; }
.cl-balken-75 { width:75%; }
.cl-balken-80 { width:80%; }
.cl-balken-85 { width:85%; }
.cl-balken-90 { width:90%; }
.cl-balken-95 { width:95%; }
.cl-balken-100 { width:100%; }
.cl-blatt-titel  { font-size:1.25rem; }
.cl-mandat-bem   { background:var(--pf-ampel-neutral-flaeche); border-left:4px solid var(--pf-ampel-neutral-chip); padding:.2rem .55rem; font-size:.85rem; }
.cl-block        { font-size:.75rem; color:var(--pf-treuhand); border-bottom:1px solid var(--pf-treuhand-hell); padding-bottom:.15rem; margin:.9rem 0 .15rem; }
.cl-punkt        { padding:.4rem .35rem; border-radius:4px; }
.cl-punkt:hover  { background:var(--pf-ampel-neutral-flaeche); }
.cl-titel        { font-weight:600; }
.cl-st-erledigt > .cl-kopfzeile .cl-titel { font-weight:400; color:var(--pf-ampel-neutral-text); }
.cl-werkzeuge    { opacity:.35; transition:opacity .15s; }
.cl-punkt:hover .cl-werkzeuge, .cl-werkzeuge:focus-within, .cl-zeile:hover .cl-werkzeuge { opacity:1; }
@media (hover:none) { .cl-werkzeuge { opacity:1; } }
.cl-werkzeug     { font-size:1rem; padding:0 .3rem; }
.cl-box          { width:1.25rem; height:1.25rem; }
.cl-zeile        { padding:.12rem 0; }
.cl-betrag       { padding:.15rem .4rem; }
.cl-betrag:focus { outline:2px solid var(--pf-treuhand); outline-offset:0; }
.cl-druckform .cl-punkt { border-radius:0; }
.cl-druckform .cl-punkt:hover { background:none; }
.cl-druckform .cl-titel { font-weight:400; }
.cl-druckform .cl-mandat-bem { background:white; border-left-color:black; }
.cl-druckform .cl-block { border-bottom-color:black; margin:.35rem 0 .05rem; }
/* Druckform dichter (02.10.2026): ein grosses Mandat mit Personal und Bemerkungen soll ohne Verkleinerung auf eine Seite */
.cl-druckform .cl-blatt   { font-size:8.5pt; line-height:1.25; }
.cl-druckform .cl-punkt   { padding:.05rem 0; }
.cl-druckform .cl-kopfzeile { gap:.3rem; }
.cl-druckform .cl-box     { width:.85rem; height:.85rem; font-size:.6rem; margin-top:.05rem; }
.cl-druckform .cl-zahlen  { margin-top:0; }
.cl-druckform .cl-zeile   { font-size:8pt; padding:0; line-height:1.2; }
.cl-druckform .cl-zeile-kopf { font-size:6.5pt; }
.cl-druckform .cl-betrag  { line-height:1.1; height:auto; }
.cl-druckform .cl-dauer, .cl-druckform .cl-einmal, .cl-druckform .cl-korrektur { margin-top:.05rem; font-size:8pt; }
.cl-druckform .cl-blattkopf { padding-bottom:.2rem; margin-bottom:.2rem; }
.cl-druckform .cl-blatt-titel { font-size:12pt; }
.cl-druckform .cl-fuss    { margin-top:.2rem; padding-top:.15rem; }
/* Meldung #31: Bemerkung per Klick anpassen */
.cl-bem-edit     { cursor:pointer; }
.cl-bem-edit:hover, .cl-bem-edit:focus-visible { outline:1px dashed currentColor; outline-offset:1px; }
.cl-bem-stift    { opacity:.55; margin-left:.25rem; }
/* Meldung #32: mehrere Punkte einer Bemerkung untereinander */
.cl-bem-liste    { margin:.1rem 0 0; padding-left:1.1rem; }
.cl-bem-liste li { margin:.05rem 0; }
.cl-dauer .cl-bem-liste, .cl-einmal .cl-bem-liste { display:block; }
.cl-achtung .cl-bem-liste { margin-left:2rem; }
.cl-druckform .cl-bem-liste { margin:0; padding-left:.9rem; }
/* MWST-Umsatzabstimmung (Punkt 9 und umsatzabstimmung.php, seit 02.10.2026) – nur Geometrie, Farben aus Tokens */
.cl-ut-wrap      { margin:.2rem 0 0 3.6rem; overflow-x:auto; }
.cl-ut           { border-collapse:collapse; font-size:.85rem; min-width:26rem; }
.cl-ut td        { padding:.12rem .5rem; border-bottom:1px solid var(--pf-linie); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cl-ut td:first-child { text-align:left; white-space:normal; min-width:13rem; }
.cl-ut-sek td    { font-weight:700; background:var(--pf-ampel-neutral-flaeche); text-align:left !important; }
.cl-ut-kopf td   { font-size:.72rem; color:var(--pf-ampel-neutral-text); }
.cl-ut-sum td    { font-weight:700; }
.cl-ut-alt       { color:var(--pf-ampel-neutral-text); }
.cl-ut-ok        { color:var(--pf-ampel-gruen-text); }
.cl-ut .cl-betrag { width:7.5rem; }
.cl-pos-neu.cl-ut-neu { grid-template-columns:10rem 5rem 1fr auto; }
@media(max-width:767px){ .cl-ut-wrap { margin-left:0; } }
.cl-druckform .cl-ut-wrap { margin-left:1.6rem; overflow:visible; }
.cl-druckform .cl-ut td   { padding:0 .35rem; font-size:7.5pt; }
.cl-druckform .cl-ut .cl-betrag { width:5.5rem; }
.cl-druckform .cl-ut-sek td { background:white; border-bottom-color:black; }
/* #33: Zahllast hervorheben, Tabelle im Druck schmaler */
.cl-ut-zahllast  { font-weight:700; }
.cl-druckform .cl-ut td:first-child { min-width:6rem; }
.cl-druckform .cl-ut .cl-betrag { width:4.6rem; }
/* Firmenlogo im Ausdruck oben rechts (02.10.2026) – am Bildschirm aus */
.cl-logo         { display:none; }
.cl-druckform .cl-blattkopf { position:relative; padding-right:34mm; min-height:16mm; }
.cl-druckform .cl-logo { display:block; position:absolute; top:0; right:0; width:30mm; height:auto; }
@media print { .cl-logo { display:block; } }
.cl-druckform .cl-klein, .cl-druckform .cl-wae { font-size:6.5pt; }   /* rem-Grössen sind im Ausdruck zu gross (Basis 9 pt) */
/* Ausdruck: Rahmen des Tools weg, sonst ragt das Blatt über den druckbaren Bereich (Logo rechts abgeschnitten, Samuel 02.10.2026) */
.cl-druckform .seitenmenue, .cl-druckform .mobilkopf, .cl-druckform footer { display:none !important; }
.cl-druckform .raster { display:block; min-height:0; }
.cl-druckform .inhalt { margin-left:0 !important; }
.cl-druckform .inhalt > .container-fluid { padding:0 !important; max-width:none !important; }
.cl-druckform .cl-blatt { page:checkliste; width:186mm; padding:12mm; box-sizing:content-box; }
body.cl-druckform, .cl-druckform .raster, .cl-druckform .inhalt { background:white !important; }   /* kein grauer Seitengrund, falls «Hintergrundgrafiken» an ist */
/* Ausdruck: ausgefüllte Zahlen ohne eigene Linie (sonst doppelt mit der Tabellenlinie, Samuel 02.10.2026); nur leere Felder behalten eine Schreiblinie */
.cl-druckform .cl-betrag { border:0 !important; }
.cl-druckform .cl-betrag[value=""] { border-bottom:1px solid black !important; }
/* Ausdruck einheitlich (Samuel 02.10.2026: «Darstellung noch nicht gut»): im Druck alle Grössen in pt statt rem – rem hängt an
   der Bildschirmschrift, darum waren Datum/Kürzel grösser als die Punkte. Logo kleiner mit Abstand zur Linie, Tabellen volle Breite. */
.cl-druckform .cl-blatt         { font-size:9pt; line-height:1.3; }
.cl-druckform .cl-blatt-titel   { font-size:13pt; }
.cl-druckform .cl-fortschritt   { font-size:9pt; }
.cl-druckform .cl-meta          { font-size:8.5pt; }
.cl-druckform .cl-mandat-bem    { font-size:8pt; margin-top:1mm; }
.cl-druckform .cl-blattkopf     { padding-right:30mm; min-height:18mm; margin-bottom:1.5mm; }
.cl-druckform .cl-logo          { width:26mm; top:-1mm; }
.cl-druckform .cl-block         { font-size:7.5pt; margin:2mm 0 .5mm; }
.cl-druckform .cl-kopfzeile     { grid-template-columns:4mm 6mm 1fr auto; gap:1.5mm; align-items:baseline; }
.cl-druckform .cl-box           { width:3.2mm; height:3.2mm; font-size:7pt; margin-top:0; align-self:center; }
.cl-druckform .cl-nr            { font-size:8.5pt; }
.cl-druckform .cl-titel         { font-size:9pt; }
.cl-druckform .cl-wer           { font-size:8pt; }
.cl-druckform .cl-zahlen, .cl-druckform .cl-ut-wrap, .cl-druckform .cl-hinweis, .cl-druckform .cl-zusammen,
.cl-druckform .cl-dauer, .cl-druckform .cl-einmal, .cl-druckform .cl-korrektur { margin-left:10mm; }
.cl-druckform .cl-zeile         { grid-template-columns:1fr 28mm 28mm 24mm 4mm; font-size:8.5pt; gap:1.5mm; }
.cl-druckform .cl-zeile-kopf    { font-size:7pt; }
.cl-druckform .cl-betrag        { font-size:8.5pt; }
.cl-druckform .cl-dauer, .cl-druckform .cl-einmal { font-size:8.5pt; padding:.2mm 2mm; margin-top:.8mm; }
.cl-druckform .cl-korrektur, .cl-druckform .cl-hinweis, .cl-druckform .cl-zusammen { font-size:8pt; }
.cl-druckform .cl-ut            { width:calc(100% - 0mm); min-width:0; table-layout:auto; }
.cl-druckform .cl-ut td         { font-size:8pt; padding:.2mm 1.5mm; }
.cl-druckform .cl-ut td:first-child { width:38%; min-width:0; }
.cl-druckform .cl-ut-sek td     { font-size:8pt; padding-top:1.2mm; }
.cl-druckform .cl-ut-kopf td    { font-size:7pt; }
.cl-druckform .cl-ut .cl-betrag { width:100%; font-size:8pt; }
.cl-druckform .cl-fuss          { font-size:8pt; margin-top:2mm; padding-top:1mm; }
.cl-druckform .cl-klein, .cl-druckform .cl-wae { font-size:7pt; }