/* ═══════════════════════════════════════════════════════════════════════════
   Spielwiese demo.pfyls.ch – style.css (07.09.2026, Fassung 3 freigegeben)

   Optik = Mischung (Entscheid 07.09.2026): Struktur, Seitenmenü, Tabellen und Filterleiste
   vom Office, Schriften von pfyls.ch (Source Serif 4, IBM Plex Sans, IBM Plex Mono – selbst
   gehostet, nie Google Fonts). Schrift praktisch schwarz, Grund leichtes neutrales Grau,
   Blau nur für Menü, Knöpfe, Links und aktive Zustände, Orange nur im Erklärkasten.
   Farbwerte: Skill pfyls-brand. Dunkelmodus über data-bs-theme="dark" am <html>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Schriften von pfyls.ch, selbst gehostet ─────────────────────────────── */
@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');}

/* ── Farbtöne: hell = Standard ───────────────────────────────────────────── */
:root{
  --pf-marke:#142b70;            /* Hauptfarbe Blau: Menü, Knöpfe, Links, aktive Zustände */
  --pf-marke-dunkel:#0d1d4d;
  --pf-consulting:#9d6616;       /* Band am Erklärkasten */
  --pf-consulting-text:#744b10;  /* Kicker im Erklärkasten: 6,62:1 auf #f6efe0 */
  --pf-grund:#f2f3f5;            /* Seitenhintergrund: leichtes, neutrales Grau */
  --pf-flaeche:#ffffff;          /* Karten, Kopfzeile, Tabellen */
  --pf-flaeche-2:#f7f8fa;        /* Tabellenkopf, Zeilen-Hover */
  --pf-text:#111418;             /* praktisch Schwarz, 18,6:1 auf Weiss */
  --pf-muted:#3f4656;            /* Nebentext: 9,4:1 auf Weiss */
  --pf-linie:#dfe2e8;
  --pf-link:#142b70;
  --pf-link-hover:#0d1d4d;
  --pf-erklaer-bg:#f6efe0;       /* helle Consulting-Fläche */
  --pf-erklaer-text:#111418;
  --pf-menue-bg:#142b70; --pf-menue-text:#ffffff;
  --pf-ampel-gelb-chip:#f8eccf; --pf-ampel-gelb-text:#7a5410;
  --pf-ampel-rot-chip:#f7dcdc;  --pf-ampel-rot-text:#8f2727;
  --pf-ampel-gruen-chip:#e4efe0;--pf-ampel-gruen-text:#3d5c23;
  --pf-ampel-neutral-chip:#e6e8ec;--pf-ampel-neutral-text:#4a5160;
  --pf-btn-bg:#142b70; --pf-btn-hover:#0f2158; --pf-btn-active:#0d1d4d;
  --bs-primary:#142b70; --bs-primary-rgb:20,43,112;
  --bs-link-color:#142b70; --bs-link-color-rgb:20,43,112; --bs-link-hover-color:#0d1d4d;
  --bs-focus-ring-color:rgba(20,43,112,.25);
  /* PLAN_FARBEN Runde 1: alles, was eine eigene Farbe des Betriebs braucht, ist eine Variable – includes/farben.php überschreibt sie */
  --pf-marke-rgb:20,43,112;              /* für rgba(): Fokusring, «heute», gewählte Karte */
  --pf-marke-auf-weiss:#142b70;          /* Hauptfarbe als Schrift auf immer-weissen Flächen (Logo-Block, Blatt) */
  --pf-auf-marke:#ffffff;                /* Schrift auf der Hauptfarbe (Chips, «heute», Knöpfe) */
  --pf-menue-text-rgb:255,255,255;       /* Aufhellungen im Menü folgen der Menüschrift */
  --pf-menue-knopf-hover:#eef2fd;        /* «Beenden» im Menüfuss */
  --pf-marke-hell:#e6ebf7; --pf-marke-hell-text:#142b70; --pf-marke-hell-rand:#142b70;   /* Termin «geplant» */
  --pf-fokus:rgba(20,43,112,.45);
  --pf-akzent-linie:#142b70;             /* Linie unter dem Logo-Block */
  --pf-akzent-menue:#ffffff;             /* Marke am aktiven Menüpunkt */
  --pf-akzent-kicker:#744b10;            /* Kicker unter dem Wortzeichen, auf Weiss */
  --web-haupt:#1c1c1c; --web-auf-haupt:#ffffff; --web-text:#1c1c1c; --web-akzent:#1c1c1c;   /* Website-Buchung: neutral, bis der Betrieb eigene Farben wählt (PLAN_FARBEN §7) */
  --seite-breite:264px; --seite-schmal:64px;
  /* PLAN_DARSTELLUNG §4.3 (25.09.2026): die Schrift-Skala – jede Grösse im Cockpit ist eine dieser Stufen. Alles misst in rem,
     darum wirkt html[data-schrift] (Meldung 66) weiter. Ausnahmen: Blatt/Zahlteil (Dokumente), Website-Buchung, Fehlermelder, Login,
     Logo-Block, Handy-Knöpfe und reine Symbole. Etikett nur für Grossbuchstaben-Beschriftungen (Kicker, Tabellenkopf, Zähler)
     und das dichte Kalender-Raster (Zeit, Kunde, Handy-Monat). */
  --s-etikett:.8rem; --s-klein:.88rem; --s-normal:1rem; --s-gross:1.15rem; --s-kachel:1.5rem; --s-titel:1.6rem;
}
[data-bs-theme="dark"]{
  --pf-grund:#13161c; --pf-flaeche:#1c2029; --pf-flaeche-2:#232834;
  --pf-text:#eceef2; --pf-muted:#aab1c0; --pf-linie:#2e3442;
  --pf-link:#9db4f5; --pf-link-hover:#c3d2ff;
  --pf-erklaer-bg:#2b2314; --pf-erklaer-text:#f3ede0; --pf-consulting:#d9a24a; --pf-consulting-text:#e6bc74;
  --pf-menue-bg:#0f2158; --pf-menue-text:#ffffff;
  --pf-ampel-gelb-chip:#4a3a12; --pf-ampel-gelb-text:#f2d58a;
  --pf-ampel-rot-chip:#4a2020;  --pf-ampel-rot-text:#f5b5b5;
  --pf-ampel-gruen-chip:#22361a;--pf-ampel-gruen-text:#b7dca3;
  --pf-ampel-neutral-chip:#2f3440;--pf-ampel-neutral-text:#c9cfda;
  --pf-btn-bg:#2947b8; --pf-btn-hover:#3554cc; --pf-btn-active:#223c9b;
  --bs-link-color:#9db4f5; --bs-link-color-rgb:157,180,245; --bs-link-hover-color:#c3d2ff;
  --pf-marke-hell:#233a7a; --pf-marke-hell-text:#e6ebf7; --pf-marke-hell-rand:#9db4f5;
  --pf-fokus:rgba(157,180,245,.7); --pf-chip-aktiv:#2947b8;
  --bs-body-bg:#13161c; --bs-body-color:#eceef2; --bs-border-color:#2e3442;
}

/* ── Grundschrift 17 px (Entscheid 07.09.2026: gut lesbar) ───────────────── */
html{font-size:17px;}
/* Meldung 66 (21.09.2026): Schriftgrösse einstellbar – alles im Cockpit misst in rem, darum genügt die Wurzel. Das Rechnungsblatt und das PDF bleiben gleich gross. */
html[data-schrift="klein"]{font-size:15px;}
html[data-schrift="gross"]{font-size:19px;}
body{background:var(--pf-grund);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:var(--s-normal);line-height:1.55;color:var(--pf-text);margin:0;}
h1,h2,h3,.serif{font-family:'Source Serif 4',serif;color:var(--pf-text);}
a{color:var(--pf-link);}a:hover{color:var(--pf-link-hover);}
.text-muted{color:var(--pf-muted)!important;}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:var(--s-etikett);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pf-muted);}
.btn{font-size:var(--s-normal);}
.btn-primary{--bs-btn-bg:var(--pf-btn-bg);--bs-btn-border-color:var(--pf-btn-bg);--bs-btn-hover-bg:var(--pf-btn-hover);--bs-btn-hover-border-color:var(--pf-btn-hover);--bs-btn-active-bg:var(--pf-btn-active);--bs-btn-active-border-color:var(--pf-btn-active);--bs-btn-disabled-bg:var(--pf-btn-bg);--bs-btn-disabled-border-color:var(--pf-btn-bg);--bs-btn-color:var(--pf-auf-marke);--bs-btn-hover-color:var(--pf-auf-marke);--bs-btn-active-color:var(--pf-auf-marke);--bs-btn-disabled-color:var(--pf-auf-marke);}
.btn-outline-primary{--bs-btn-color:var(--pf-link);--bs-btn-border-color:var(--pf-link);--bs-btn-hover-bg:var(--pf-btn-bg);--bs-btn-hover-border-color:var(--pf-btn-bg);--bs-btn-hover-color:var(--pf-auf-marke);--bs-btn-active-bg:var(--pf-btn-active);--bs-btn-active-border-color:var(--pf-btn-active);--bs-btn-active-color:var(--pf-auf-marke);}
.btn-outline-secondary{--bs-btn-color:var(--pf-muted);--bs-btn-border-color:var(--pf-linie);--bs-btn-hover-bg:var(--pf-flaeche-2);--bs-btn-hover-color:var(--pf-text);--bs-btn-hover-border-color:var(--pf-linie);--bs-btn-active-bg:var(--pf-flaeche-2);--bs-btn-active-color:var(--pf-text);}
:focus-visible{outline:3px solid var(--pf-fokus);outline-offset:2px;}

/* ── Raster: Seitenmenü links, Inhalt rechts ────────────────────────────── */
.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);border-right:var(--pf-menue-rand,0 none);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .2s,flex-basis .2s;}
.inhalt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}

/* Markenblock: weiss, damit das Logo seine Farben behält */
.marke{background:#fff;padding:.9rem 1.1rem;display:flex;align-items:center;border-bottom:3px solid var(--pf-akzent-linie);min-height:76px;}
.marke img{height:42px;width:auto;flex:0 0 auto;}
.marke .wortblock{display:flex;flex-direction:column;min-width:0;}
.marke .wort{font-family:'Source Serif 4',serif;font-weight:600;font-size:1.3rem;color:var(--pf-marke-auf-weiss);line-height:1;}
.marke .kicker{color:var(--pf-akzent-kicker);margin-top:4px;line-height:1;}

/* Menüpunkte */
.menue{list-style:none;margin:0;padding:.8rem 0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;}
.menue a{display:flex;align-items:center;gap:.7rem;color:var(--pf-menue-text);text-decoration:none;padding:.6rem 1.1rem;font-size:var(--s-normal);font-weight:500;border-left:4px solid transparent;white-space:nowrap;}
.menue a .bi{font-size:var(--s-gross);width:1.4rem;text-align:center;opacity:.9;flex:0 0 auto;}
.menue a:hover{background:rgba(var(--pf-menue-text-rgb),.1);color:var(--pf-menue-text);}
.menue a.aktiv{background:rgba(var(--pf-menue-text-rgb),.16);border-left-color:var(--pf-akzent-menue);}
.menue .pfeil{margin-left:auto;font-size:var(--s-klein);opacity:.75;transition:transform .2s;padding:.2rem .3rem;width:auto;}
.menue a[aria-expanded="true"] .pfeil{transform:rotate(90deg);}
.untermenue{list-style:none;margin:0;padding:.15rem 0 .4rem;background:rgba(0,0,0,.18);}
.untermenue a{padding:.42rem 1.1rem .42rem 3.2rem;font-size:var(--s-normal);font-weight:400;}
.untermenue a.aktiv{font-weight:500;}
.untermenue-trenner{height:0;margin:.35rem 1.1rem .35rem 3.2rem;border-top:1px solid rgba(var(--pf-menue-text-rgb),.2);}   /* FiBU: erfassen/prüfen · anschauen (PLAN_KONTENPLAN §7) */

/* ── Erfolgsrechnung (PLAN_KONTENPLAN Etappe 3) ─────────────────────────── */
.er-tabelle .er-position th,.er-tabelle .er-position td{padding-top:.9rem;font-weight:600;}
.er-tabelle .er-zwischensumme th,.er-tabelle .er-zwischensumme td{border-top:1px solid var(--pf-text);font-weight:600;}
.er-tabelle .er-ergebnis th,.er-tabelle .er-ergebnis td{border-top:2px solid var(--pf-text);border-bottom:0;font-weight:700;font-size:var(--s-gross);}
.er-tabelle .er-details > td{background:var(--pf-flaeche-2);}
.er-klappe .bi-chevron-right{display:inline-block;transition:transform .15s;}
.er-klappe[aria-expanded="true"] .bi-chevron-right{transform:rotate(90deg);}
.untermenue .zaehler{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:var(--s-etikett);background:rgba(var(--pf-menue-text-rgb),.18);border-radius:999px;padding:.05rem .5rem;}
.menue-fuss{padding:.8rem 1.1rem 1.1rem;border-top:1px solid rgba(var(--pf-menue-text-rgb),.18);}
.konto-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:'IBM Plex Mono',monospace;font-size:var(--s-klein);font-weight:600;background:rgba(var(--pf-menue-text-rgb),.14);color:var(--pf-menue-text);border-radius:999px;padding:.3rem .8rem;margin-bottom:.7rem;white-space:nowrap;max-width:100%;overflow:hidden;}
.benutzer-zeile{font-size:var(--s-klein);color:rgba(var(--pf-menue-text-rgb),.85);margin:-.3rem 0 .7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.benutzer-zeile a{color:var(--pf-menue-text);font-weight:500;}
.rechte-matrix td,.rechte-matrix th{text-align:center;}
.rechte-matrix td:first-child,.rechte-matrix th:first-child{text-align:left;}
.stufe-keins{background:var(--pf-ampel-neutral-chip);color:var(--pf-ampel-neutral-text);}
.stufe-lesen{background:var(--pf-ampel-gelb-chip);color:var(--pf-ampel-gelb-text);}
.stufe-schreiben{background:var(--pf-ampel-gruen-chip);color:var(--pf-ampel-gruen-text);}
.stufe-voll{background:var(--pf-chip-aktiv,var(--pf-marke));color:var(--pf-auf-marke);}
.btn-beenden{--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-bg:var(--pf-menue-knopf-hover);--bs-btn-hover-border-color:var(--pf-menue-knopf-hover);--bs-btn-hover-color:var(--pf-menue-bg);--bs-btn-active-bg:var(--pf-menue-knopf-hover);--bs-btn-active-color:var(--pf-menue-bg);font-weight:600;width:100%;white-space:nowrap;}

/* Schalter im Menüfuss: Menü fixieren/lösen, Hell/Dunkel */
.schalter{display:flex;gap:.4rem;margin-bottom:.7rem;}
.schalter button{flex:1 1 0;background:rgba(var(--pf-menue-text-rgb),.1);border:1px solid rgba(var(--pf-menue-text-rgb),.25);color:var(--pf-menue-text);border-radius:.4rem;padding:.3rem .4rem;font-size:var(--s-klein);display:flex;align-items:center;justify-content:center;gap:.35rem;white-space:nowrap;}
.schalter button:hover{background:rgba(var(--pf-menue-text-rgb),.2);}
.schalter .bi{font-size:var(--s-normal);}

/* ── Menü gelöst: schmale Symbolleiste, klappt beim Überfahren auf ───────── */
@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;box-shadow:none;}
  [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) .zaehler,
  [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .untermenue,
  [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .marke .wortblock{display:none;}
  [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .marke{padding:.9rem 0;justify-content:center;}
  [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .marke img{height:36px;}
  [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-fuss{padding-left:.5rem;padding-right:.5rem;}
  [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .schalter{flex-direction:column;}
  [data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .konto-chip{padding:.3rem .5rem;}
}

/* ── Kopfzeile über dem Inhalt ───────────────────────────────────────────── */
.kopf{background:var(--pf-flaeche);border-bottom:1px solid var(--pf-linie);padding:.8rem 1.6rem;display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1.2rem;}
.kopf-titel{font-family:'Source Serif 4',serif;font-size:var(--s-titel);font-weight:600;margin:0;color:var(--pf-text);}
.kopf-kontext{color:var(--pf-muted);font-size:var(--s-klein);}
.kopf-schub{flex:1 1 auto;}
.toggler{display:none;border:1px solid var(--pf-linie);background:var(--pf-flaeche);border-radius:.4rem;padding:.3rem .55rem;color:var(--pf-text);font-size:var(--s-gross);}

/* ── Erklärkasten: Orange-hell oben, Schrift schwarz ────────────────────── */
.erklaer{background:var(--pf-erklaer-bg);color:var(--pf-erklaer-text);border-left:4px solid var(--pf-consulting);border-radius:0 .5rem .5rem 0;padding:1rem 1.3rem;}
.erklaer.zu{padding-top:.7rem;padding-bottom:.7rem;}
.erklaer .kicker{color:var(--pf-consulting-text);}
.erklaer h3{font-size:var(--s-gross);margin:0;color:var(--pf-erklaer-text);}
.erklaer .spalte h4{font-family:'IBM Plex Sans',sans-serif;font-size:var(--s-etikett);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin:0 0 .3rem;color:var(--pf-erklaer-text);}
.erklaer .spalte p{margin:0;font-size:var(--s-normal);}
.erklaer-toggle{background:none;border:0;color:var(--pf-erklaer-text);font-size:var(--s-klein);padding:0;white-space:nowrap;}
/* Kurzfassung 21.09.2026: «Womit gebaut» als fette Stichwörter (neutrale Schildchen – keine Kategorie-Umrisse, pfyls-brand §8.1), Rest hinter «Mehr erfahren» */
.erklaer .stichworte{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;}
.erklaer .stichworte li{font-weight:600;font-size:var(--s-klein);line-height:1.3;padding:.2rem .55rem;background:var(--pf-flaeche);color:var(--pf-text);border:1px solid var(--pf-linie);border-radius:.35rem;}
.erklaer-mehr{margin-top:.75rem;}
.erklaer-mehr summary,.legende summary{cursor:pointer;font-weight:600;font-size:var(--s-klein);width:max-content;max-width:100%;}
.erklaer-mehr summary{color:var(--pf-consulting-text);}
.erklaer-mehr ul,.legende ul{margin:.4rem 0 0;padding-left:1.2rem;}
.erklaer-mehr li,.legende li{margin-bottom:.2rem;}
.erklaer-mehr li{font-size:var(--s-normal);}
/* Legende unter Listen und Hinweise mit ⓘ (21.09.2026): kurz sichtbar, der Rest auf Klick */
.legende{font-size:var(--s-klein);color:var(--pf-muted);}
.legende summary{color:var(--pf-link);}
.info-knopf{background:none;border:0;padding:0 .15rem;margin:0;color:var(--pf-link);font-size:.95em;line-height:1;vertical-align:baseline;cursor:pointer;}
.info-knopf:hover,.info-knopf[aria-expanded="true"]{color:var(--pf-link-hover);}

/* ── Kacheln, Filter, Tabelle (Office-Bauart) ────────────────────────────── */
.card{border:1px solid var(--pf-linie);border-radius:.5rem;box-shadow:0 1px 2px rgba(0,0,0,.05);background:var(--pf-flaeche);color:var(--pf-text);}
.card-header{background:var(--pf-flaeche);border-bottom:1px solid var(--pf-linie);}
.kpi .wert{font-family:'Source Serif 4',serif;font-size:var(--s-kachel);font-weight:600;color:var(--pf-text);line-height:1.1;font-variant-numeric:tabular-nums;}
.kpi .delta{font-size:var(--s-klein);color:var(--pf-muted);}
.table{font-size:var(--s-normal);--bs-table-bg:var(--pf-flaeche);--bs-table-color:var(--pf-text);--bs-table-border-color:var(--pf-linie);--bs-table-hover-bg:var(--pf-flaeche-2);--bs-table-hover-color:var(--pf-text);}
.table thead th{font-family:'IBM Plex Sans',sans-serif;font-size:var(--s-etikett);text-transform:uppercase;letter-spacing:.05em;color:var(--pf-muted);background:var(--pf-flaeche-2);border-bottom:2px solid var(--pf-linie);font-weight:600;white-space:nowrap;}
/* Meldung 103 (Samuel 27.09.2026: in allen langen Listen): die Spaltenköpfe bleiben stehen. Die Tabelle scrollt in ihrem Kasten (höchstens Fensterhöhe), weil
   .table-responsive seitlich scrollen muss und sticky darum nur im Kasten wirkt. Am Handy scrollt die ganze Seite wie bisher. */
@media (min-width:768px){.kopf-bleibt{max-height:calc(100vh - 6rem);overflow:auto;}.kopf-bleibt thead th{position:sticky;top:0;z-index:2;}}
.table td{vertical-align:middle;padding:.65rem .75rem;}
.ampel-gelb{background:var(--pf-ampel-gelb-chip);color:var(--pf-ampel-gelb-text);}
.ampel-rot{background:var(--pf-ampel-rot-chip);color:var(--pf-ampel-rot-text);}
.ampel-gruen{background:var(--pf-ampel-gruen-chip);color:var(--pf-ampel-gruen-text);}
.ampel-neutral{background:var(--pf-ampel-neutral-chip);color:var(--pf-ampel-neutral-text);}
.chip{display:inline-block;border-radius:999px;padding:.18rem .65rem;font-size:var(--s-klein);font-weight:500;white-space:nowrap;}
.mono{font-family:'IBM Plex Mono',monospace;font-size:var(--s-normal);font-variant-numeric:tabular-nums;}
.filterbar{background:var(--pf-flaeche);border:1px solid var(--pf-linie);border-radius:.5rem;padding:.6rem .9rem;}
.form-control,.form-select{background-color:var(--pf-flaeche);color:var(--pf-text);border-color:var(--pf-linie);}
.form-control:focus,.form-select:focus{background-color:var(--pf-flaeche);color:var(--pf-text);border-color:var(--pf-link);box-shadow:0 0 0 .25rem var(--bs-focus-ring-color);}
.muster-hinweis{font-size:var(--s-klein);color:var(--pf-muted);}
.muster-hinweis .bi{color:var(--pf-consulting);}
footer{color:var(--pf-muted);font-size:var(--s-klein);border-color:var(--pf-linie)!important;}

/* Nächste Schritte (Dashboard): drei Vorschläge, verschwinden wenn erledigt */
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.schritte li{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border:1px dashed var(--pf-linie);border-radius:.5rem;}
.schritte li .bi{color:var(--pf-consulting);font-size:var(--s-gross);}
.schritte li.erledigt{opacity:.55;text-decoration:line-through;}
.schritte li.erledigt .bi{color:var(--pf-ampel-gruen-text);}

/* Modals im Dunkelmodus */
.modal-content{background:var(--pf-flaeche);color:var(--pf-text);border-color:var(--pf-linie);}
.modal-header,.modal-footer{border-color:var(--pf-linie);}

/* ── Hinweise (Toasts) – assets/hinweis.js, Kopie aus dem Office ─────────── */
#pf-hinweise{z-index:1090;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(0,0,0,.15);}
.pf-hinweis .toast-body{font-size:var(--s-klein);}
.pf-hinweis-symbol{font-size:var(--s-normal);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);}
@media (max-width:575.98px){#pf-hinweise{left:0;right:0;max-width:100%;}}

/* ── Login-, Danke- und Admin-Seiten (ohne Seitenmenü) ───────────────────── */
.einzel{max-width:720px;margin:2.5rem auto;padding:0 1rem;}
.einzel .marke{border-radius:.5rem .5rem 0 0;}
.einzel-karte{background:var(--pf-flaeche);border:1px solid var(--pf-linie);border-radius:.5rem;padding:1.5rem;}
.konto-karte{display:flex;align-items:center;gap:1rem;border:1px solid var(--pf-linie);border-radius:.5rem;padding:.9rem 1.1rem;background:var(--pf-flaeche);}
.konto-karte .name{font-family:'Source Serif 4',serif;font-weight:600;font-size:1.2rem;}
.konto-karte .zustand{font-size:.9rem;color:var(--pf-muted);}
.passwort-anzeige{font-family:'IBM Plex Mono',monospace;font-size:1.25rem;font-weight:600;letter-spacing:.05em;background:var(--pf-erklaer-bg);color:var(--pf-erklaer-text);border-left:4px solid var(--pf-consulting);border-radius:0 .5rem .5rem 0;padding:.6rem 1rem;display:inline-block;}
.admin .table{font-size:var(--s-klein);}

/* ── Handy: Menü wird zum Aufklapper von links ───────────────────────────── */
@media (max-width: 991px){
  .seitenmenue{position:fixed;left:calc(-1 * var(--seite-breite));top:0;z-index:1040;transition:left .25s;box-shadow:0 0 30px rgba(0,0,0,.3);}
  .seitenmenue.offen{left:0;}
  .toggler{display:inline-flex;}
  .kopf{padding:.7rem 1rem;}
  .kopf-titel{font-size:var(--s-gross);}
  .kopf-kontext{display:none;}
  #schalter-menue{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .seitenmenue,.menue .pfeil{transition:none;}
}

/* ── Stufe B (09.09.2026): Adressen, Hinweis-Gelb, Reiter, Verwaltung ─────── */
:root{--pf-hinweis-bg:#fdf6e6;--pf-hinweis-band:#f4c14e;--pf-hinweis-text:#142b70;}   /* pfyls-brand §2 «Hinweis-Gelb», Schrift 12,12:1 */
[data-bs-theme="dark"]{--pf-hinweis-bg:#2e2712;--pf-hinweis-band:#f4c14e;--pf-hinweis-text:#f3ede0;}
.hinweis-gelb{background:var(--pf-hinweis-bg);color:var(--pf-hinweis-text);border-left:4px solid var(--pf-hinweis-band);border-radius:0 .5rem .5rem 0;padding:.8rem 1.2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.hinweis-gelb .bi{font-size:1.4rem;color:var(--pf-hinweis-band);}
.hinweis-gelb p{margin:0;flex:1 1 20rem;}
.hinweis-gelb .btn{--bs-btn-color:var(--pf-hinweis-text);--bs-btn-border-color:var(--pf-hinweis-text);--bs-btn-hover-bg:var(--pf-hinweis-text);--bs-btn-hover-color:#fff;}
.zeile-link{cursor:pointer;}
.nav-tabs{--bs-nav-tabs-border-color:var(--pf-linie);--bs-nav-tabs-link-active-bg:var(--pf-flaeche);--bs-nav-tabs-link-active-color:var(--pf-text);--bs-nav-tabs-link-active-border-color:var(--pf-linie) var(--pf-linie) var(--pf-flaeche);--bs-nav-tabs-link-hover-border-color:var(--pf-linie);--bs-nav-link-color:var(--pf-muted);--bs-nav-link-hover-color:var(--pf-text);}
.nav-tabs .nav-link{font-size:var(--s-normal);}
.nav-tabs .nav-link .zaehler{font-family:'IBM Plex Mono',monospace;font-size:var(--s-etikett);background:var(--pf-flaeche-2);border-radius:999px;padding:.05rem .45rem;margin-left:.3rem;}
.reiter-inhalt{background:var(--pf-flaeche);border:1px solid var(--pf-linie);border-top:0;border-radius:0 0 .5rem .5rem;padding:1.2rem;}
.form-label{font-size:var(--s-klein);font-weight:600;color:var(--pf-muted);margin-bottom:.2rem;}
.feld-hinweis{font-size:var(--s-klein);color:var(--pf-muted);}
.haupt-stern{color:var(--pf-consulting);}
.filterbar .form-control,.filterbar .form-select{font-size:var(--s-klein);}
.filter-chips a{text-decoration:none;}
.filter-chips .chip{border:1px solid var(--pf-linie);background:var(--pf-flaeche);color:var(--pf-text);}
.filter-chips .chip.aktiv{background:var(--pf-chip-aktiv,var(--pf-marke));color:var(--pf-auf-marke);border-color:var(--pf-chip-aktiv,var(--pf-marke));}
.rechte-matrix .chip[data-stufe]{cursor:pointer;}
.rechte-matrix .chip[data-stufe]:hover{outline:2px solid var(--pf-link);}
.form-check-input:checked{background-color:var(--pf-btn-bg);border-color:var(--pf-btn-bg);}
.liste-zeile{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--pf-linie);}
.liste-zeile:last-child{border-bottom:0;}
.liste-zeile .inaktiv{opacity:.5;text-decoration:line-through;}
.schritte{display:flex;gap:1.2rem;flex-wrap:wrap;list-style:none;padding:0;margin:0;font-size:var(--s-normal);color:var(--pf-muted);}   /* Import in drei Schritten (Etappe 4) */
.schritte li{display:flex;align-items:center;gap:.5rem;}
.schritte .nr{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid var(--pf-linie);font-family:'IBM Plex Mono',monospace;font-size:var(--s-etikett);font-weight:600;}
.schritte .aktiv{color:var(--pf-text);font-weight:600;}
.schritte .aktiv .nr{background:var(--pf-btn-bg);border-color:var(--pf-btn-bg);color:var(--pf-auf-marke);}
.schritte .erledigt .nr{border-color:var(--pf-ampel-gruen-text);color:var(--pf-ampel-gruen-text);}
.shop-karte{border:1px solid var(--pf-linie);border-radius:.6rem;overflow:hidden;background:var(--pf-flaeche);max-width:24rem;}   /* Shop-Vorschau Artikelkarte (PLAN_ANGEBOT) */
.shop-bild{aspect-ratio:4/3;background:var(--pf-flaeche-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;color:var(--pf-muted);font-size:var(--s-klein);}
.shop-bild .bi{font-size:2.6rem;opacity:.5;}
.shop-text{padding:1rem 1.2rem;}
.mahntext{font-family:'IBM Plex Sans',sans-serif;font-size:var(--s-normal);background:var(--pf-flaeche-2);border:1px solid var(--pf-linie);border-radius:.4rem;padding:1rem 1.2rem;white-space:pre-wrap;line-height:1.5;}   /* Brieftext-Vorschau Mahnstufen (Etappe 3) */
.abgleich-json{font-family:'IBM Plex Mono',monospace;font-size:var(--s-klein);background:var(--pf-flaeche-2);border:1px solid var(--pf-linie);border-radius:.4rem;padding:.8rem;white-space:pre;overflow:auto;max-height:22rem;}
@media (max-width:767.98px){.reiter-inhalt{padding:.9rem;}.nav-tabs .nav-link{padding:.4rem .6rem;}}
/* Live-Suche im Telefonbuch (09.09.2026): Vorschläge unter dem Namensfeld */
.vorschlaege{margin-top:-.4rem;}
.vorschlaege .list-group{max-height:16rem;overflow:auto;box-shadow:0 .5rem 1rem rgba(0,0,0,.12);}
.vorschlaege .list-group-item{background:var(--pf-flaeche);color:var(--pf-text);border-color:var(--pf-linie);font-size:var(--s-klein);padding:.35rem .7rem;}
.vorschlaege .list-group-item:hover{background:var(--pf-flaeche-2);}
.vorschlaege .quelle{font-size:var(--s-klein);color:var(--pf-muted);padding:.2rem .1rem;}

/* ── Kalender (11.09.2026, PLAN_KALENDER): Woche, Monat, Termine, Fenster, Website-Buchung ── */
.kal-karte{overflow:hidden;}
.kal-woche{--kal-zeitspalte:3.4rem;}
.kal-kopf,.kal-ganztags{display:grid;grid-template-columns:var(--kal-zeitspalte) repeat(var(--kal-tage,6),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;font-size:var(--s-etikett);}
.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:'IBM Plex Mono',monospace;font-size:var(--s-etikett);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pf-muted);}
.kal-tag-kopf .dt{font-family:'Source Serif 4',serif;font-weight:600;font-size:var(--s-normal);}
.kal-tag-kopf.heute .dt{background:var(--pf-marke);color:var(--pf-auf-marke);border-radius:999px;padding:0 .45rem;}
.kal-tag-kopf.zu{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.035) 6px 12px);}
.kal-tag-kopf small{font-size:var(--s-etikett);}
.kal-gz-zelle{min-height:1.9rem;border-right:1px solid var(--pf-linie);padding:.15rem .2rem;display:flex;flex-direction:column;gap:2px;}
.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:'IBM Plex Mono',monospace;font-size:var(--s-etikett);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(--pf-marke-rgb),.03);}
.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.zu{background:rgba(0,0,0,.045);cursor:default;}
[data-bs-theme="dark"] .kal-zelle.zu{background:rgba(255,255,255,.05);}
.kal-zelle:not(.zu):hover{background:rgba(var(--pf-marke-rgb),.07);}
.kal-spalte.drop-ziel,.kal-gz-zelle.drop-ziel{outline:2px dashed var(--pf-link);outline-offset:-2px;}
.kal-termin{position:absolute;border-radius:.35rem;padding:.15rem .4rem;font-size:var(--s-klein);line-height:1.25;overflow:hidden;cursor:pointer;border-left:3px solid;box-shadow:0 1px 2px rgba(0,0,0,.12);z-index:2;}
.kal-termin[draggable="true"]{cursor:grab;}
/* Handy-Startseite (PLAN_HANDY §3): sechs grosse Knöpfe, zwei Spalten, mindestens 96 px hoch – Farben nur aus den Variablen (includes/farben.php) */
.handy-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;max-width:34rem;margin:0 auto;}
.handy-knopf{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-height:7rem;padding:1rem .5rem;border-radius:.75rem;border:1px solid var(--pf-marke-hell-rand);background:var(--pf-marke-hell);color:var(--pf-marke-hell-text);text-decoration:none;font-weight:600;font-size:1.05rem;text-align:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08);}
.handy-knopf:hover,.handy-knopf:focus-within{filter:brightness(.97);color:var(--pf-marke-hell-text);}
.handy-knopf .bi{font-size:2rem;line-height:1;}
.handy-knopf small{position:absolute;top:.5rem;right:.6rem;min-width:1.5rem;padding:0 .35rem;border-radius:1rem;background:var(--pf-marke);color:#fff;font-size:.8rem;line-height:1.5rem;}
.handy-knopf.laedt{opacity:.55;pointer-events:none;}
/* Fahrzeit (PLAN_KALENDER_C §3d): schraffiertes Band über und unter dem Termin – gehört zum Termin, ist aber keine Arbeitszeit */
.kal-farbe.kal-farbe-fahrzeit{border:1px dashed var(--pf-linie);background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(20,43,112,.2) 3px 5px);}
.kal-fahrzeit{position:absolute;z-index:1;border-radius:.25rem;border:1px dashed var(--pf-linie);background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(20,43,112,.13) 5px 7px);pointer-events:none;}
.kal-termin.ziehe,.kal-chip.ziehe{opacity:.45;}
.kal-termin .zeit{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--s-etikett);font-weight:600;opacity:.85;}
.kal-termin .titel{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kal-termin .kunde{display:block;font-size:var(--s-etikett);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kal-termin.status-geplant,.kal-chip.status-geplant,.kal-farbe.status-geplant{background:var(--pf-marke-hell);color:var(--pf-marke-hell-text);border-color:var(--pf-marke-hell-rand);}
.kal-termin.status-erledigt,.kal-chip.status-erledigt,.kal-farbe.status-erledigt{background:var(--pf-ampel-gruen-chip);color:var(--pf-ampel-gruen-text);border-color:var(--pf-ampel-gruen-text);}
.kal-termin.status-abgesagt,.kal-chip.status-abgesagt,.kal-farbe.status-abgesagt{background:var(--pf-ampel-neutral-chip);color:var(--pf-ampel-neutral-text);border-color:var(--pf-ampel-neutral-text);text-decoration:line-through;opacity:.75;}
.kal-termin.status-blocker,.kal-chip.status-blocker,.kal-farbe.status-blocker{background:repeating-linear-gradient(135deg,var(--pf-ampel-neutral-chip) 0 6px,rgba(0,0,0,.05) 6px 12px);color:var(--pf-ampel-neutral-text);border-color:var(--pf-ampel-neutral-text);}
[data-bs-theme="dark"] .kal-termin.status-geplant,[data-bs-theme="dark"] .kal-chip.status-geplant,[data-bs-theme="dark"] .kal-farbe.status-geplant{background:#233a7a;color:#e6ebf7;border-color:#9db4f5;}
.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:0;border-left:3px solid;border-radius:.3rem;padding:.1rem .35rem;font-size:var(--s-klein);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:inherit;}
.kal-chip .zeit{font-family:'IBM Plex Mono',monospace;font-size:var(--s-etikett);font-weight:600;}
.kal-farbe{display:inline-block;width:.9rem;height:.9rem;border-radius:.2rem;border-left:3px solid;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:'IBM Plex Mono',monospace;font-size:var(--s-etikett);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;}
.kal-monat-zelle.fremd{opacity:.5;}
.kal-monat-zelle.zu{background:rgba(0,0,0,.035);}
[data-bs-theme="dark"] .kal-monat-zelle.zu{background:rgba(255,255,255,.04);}
.kal-monat-zelle.heute{background:rgba(var(--pf-marke-rgb),.06);}
.kal-monat-zelle.drop-ziel{outline:2px dashed var(--pf-link);outline-offset:-2px;}
.kal-monat-tag{font-family:'Source Serif 4',serif;font-weight:600;font-size:var(--s-normal);margin-bottom:.1rem;}
.kal-monat-tag small{font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:var(--s-etikett);}
.kal-monat-zelle.heute .kal-monat-tag a{background:var(--pf-marke);color:var(--pf-auf-marke);border-radius:999px;padding:0 .4rem;}
.kal-mehr{font-size:var(--s-klein);color:var(--pf-muted);text-decoration:none;}
.kal-legende .bi{color:var(--pf-muted);}
.kal-status-zeile{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--pf-flaeche-2);border:1px solid var(--pf-linie);border-radius:.4rem;padding:.5rem .7rem;}
.kal-weg{display:flex;gap:.7rem;align-items:flex-start;border:1px solid var(--pf-linie);border-radius:.5rem;padding:.6rem .8rem;cursor:pointer;margin:0;}
.kal-weg:has(input:checked){border-color:var(--pf-link);background:rgba(var(--pf-marke-rgb),.05);}
.kal-weg input{margin-top:.25rem;}
.kal-weg > span{display:flex;flex-direction:column;}
.kal-weg small{color:var(--pf-muted);}
.kal-weg:has(input:disabled){opacity:.5;cursor:default;}
@media (max-width:767.98px){
  .kal-woche{--kal-zeitspalte:2.6rem;}
  .kal-tag-kopf{padding:.3rem .15rem;} .kal-tag-kopf .dt{font-size:var(--s-klein);} .kal-tag-kopf small{display:none!important;}
  .kal-termin{font-size:var(--s-etikett);padding:.1rem .2rem;} .kal-termin .kunde{display:none;}
  .kal-monat-zelle{min-height:4.2rem;padding:.15rem;} .kal-chip{font-size:var(--s-etikett);padding:.05rem .2rem;} .kal-chip .zeit{display:none;}
}
/* Website-Buchung: nachgestellte Kundenseite der Muster GmbH in einem Browser-Rahmen (bewusst immer hell – es ist «die Website», nicht das Cockpit) */
.web-rahmen{border:1px solid var(--pf-linie);border-radius:.7rem;overflow:hidden;background:#fff;color:#1c1c1c;box-shadow:0 4px 18px rgba(0,0,0,.08);}
.web-leiste{background:#e9ebef;padding:.45rem .8rem;display:flex;align-items:center;gap:.4rem;border-bottom:1px solid #d7dae0;}
.web-leiste .punkt{width:.7rem;height:.7rem;border-radius:50%;background:#c9ccd3;}
.web-leiste .web-url{flex:1 1 auto;margin-left:.6rem;background:#fff;border-radius:.4rem;padding:.15rem .7rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:#555;}
.web-seite{padding:0 0 2rem;font-family:'IBM Plex Sans',sans-serif;}
.web-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 2rem;border-bottom:1px solid #eee;flex-wrap:wrap;}
.web-nav .marke-web{font-family:'Source Serif 4',serif;font-weight:700;font-size:1.3rem;color:var(--web-text);}
.web-nav .links{display:flex;gap:1.2rem;font-size:.9rem;color:#555;}
.web-nav .links span.aktiv{color:#1c1c1c;font-weight:600;border-bottom:2px solid var(--web-akzent);}
.web-inhalt{padding:1.6rem 2rem;max-width:56rem;}
.web-inhalt h1{font-family:'Source Serif 4',serif;font-size:1.9rem;color:#1c1c1c;margin-bottom:.3rem;}
.web-inhalt h2{font-family:'IBM Plex Sans',sans-serif;font-size:1.05rem;font-weight:600;color:#1c1c1c;margin:1.4rem 0 .6rem;}
.web-inhalt p,.web-inhalt .text-muted{color:#444!important;}
.web-inhalt .form-control,.web-inhalt .form-select{background:#fff;color:#1c1c1c;border-color:#cfd3da;}
.web-inhalt .form-label,.web-inhalt .form-check-label{color:#444;}
.web-leistungen{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.7rem;}
.web-leistung{display:block;border:1px solid #cfd3da;border-radius:.6rem;padding:.7rem .9rem;cursor:pointer;margin:0;background:#fff;color:#1c1c1c;}
.web-leistung:has(input:checked){border-color:var(--web-text);box-shadow:0 0 0 2px var(--web-text) inset;}
.web-leistung input{margin-right:.4rem;}
.web-leistung .preis{font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:#555;display:block;margin-top:.15rem;}
.web-slots{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.4rem;}
.web-tag{flex:0 0 7.2rem;display:flex;flex-direction:column;gap:.3rem;}
.web-tag-kopf{font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600;text-align:center;color:#444;padding-bottom:.2rem;border-bottom:1px solid #e3e5ea;}
.web-slot{border:1px solid #cfd3da;background:#fff;border-radius:.4rem;padding:.3rem;font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:#1c1c1c;cursor:pointer;}
.web-slot:hover{border-color:var(--web-text);}
.web-slot.aktiv{background:var(--web-haupt);color:var(--web-auf-haupt);border-color:var(--web-haupt);}
.web-knopf{background:var(--web-haupt);color:var(--web-auf-haupt);border:0;border-radius:.5rem;padding:.6rem 1.4rem;font-weight:600;}
.web-knopf:disabled{opacity:.6;}
.web-mail{border:1px solid var(--pf-linie);border-radius:.5rem;background:var(--pf-flaeche);height:100%;}
.web-mail .mail-kopf{padding:.6rem .9rem;border-bottom:1px solid var(--pf-linie);font-size:.85rem;color:var(--pf-muted);}
.web-mail .mail-kopf strong{color:var(--pf-text);}
.web-mail pre{margin:0;padding:.9rem;font-family:'IBM Plex Sans',sans-serif;font-size:.92rem;white-space:pre-wrap;color:var(--pf-text);}
.oz-tabelle td,.oz-tabelle th{vertical-align:middle;}
.oz-tabelle input[type=time]{max-width:7.2rem;}
#form-termin [data-kunde-liste],
#form-einnahme [data-kunde-liste]{position:absolute;left:.5rem;right:.5rem;z-index:5;margin-top:.1rem;}   /* Kundensuche im Fenster Termin und Einnahme: Vorschläge liegen über dem Formular, statt es nach unten zu schieben */

/* ── Bereichs-Übersichten (11.09.2026, PLAN_UEBERSICHTEN §3) – keine Bereichsfarben; Ampel nur als Punkt, Balken neutral ── */
a.kachel-link{color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s;}
a.kachel-link:hover,a.kachel-link:focus-visible{border-color:var(--pf-link);box-shadow:0 2px 8px rgba(0,0,0,.08);color:inherit;}
a.kachel-link .kicker .bi{opacity:.45;}
a.kachel-link:hover .kicker .bi,a.kachel-link:focus-visible .kicker .bi{opacity:1;}
.ansteht,.rang,.zuletzt{list-style:none;margin:0;padding:0;}
.ansteht li{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;border-bottom:1px solid var(--pf-linie);}
.ansteht li:last-child{border-bottom:0;}
.ansteht-punkt{flex:0 0 .7rem;width:.7rem;height:.7rem;border-radius:50%;}
.ansteht-punkt.ampel-rot{background:var(--pf-ampel-rot-text);}
.ansteht-punkt.ampel-gelb{background:var(--pf-ampel-gelb-text);}
.ansteht-punkt.ampel-neutral{background:var(--pf-ampel-neutral-text);opacity:.55;}
.ansteht-text{flex:1 1 auto;min-width:0;}
.ansteht li .btn{flex:0 0 auto;white-space:nowrap;}
.ansteht-leer{color:var(--pf-ampel-gruen-text);}
.ansteht-mehr{border-top:1px solid var(--pf-linie);}
.ansteht-mehr summary{padding:.55rem 1rem;cursor:pointer;font-size:var(--s-klein);color:var(--pf-link);}
.ansteht-mehr[open] summary{border-bottom:1px solid var(--pf-linie);}
.rang li{margin-bottom:.75rem;}
.rang li:last-child{margin-bottom:0;}
.rang-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;font-size:var(--s-normal);}
.rang-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rang-wert{white-space:nowrap;color:var(--pf-muted);font-size:var(--s-klein);font-variant-numeric:tabular-nums;}
.rang-balken{height:.45rem;background:var(--pf-flaeche-2);border-radius:999px;overflow:hidden;margin-top:.2rem;}
.rang-balken span{display:block;height:100%;background:var(--pf-link);border-radius:999px;}
.zuletzt li{display:flex;gap:.8rem;align-items:baseline;padding:.5rem 1rem;border-bottom:1px solid var(--pf-linie);font-size:var(--s-normal);}
.zuletzt li:last-child{border-bottom:0;}
.zuletzt-wann,.zuletzt-wer{flex:0 0 auto;font-size:var(--s-klein);color:var(--pf-muted);font-variant-numeric:tabular-nums;}
.zuletzt-text{flex:1 1 auto;min-width:0;}
.einstieg{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem;}
.einstieg-knopf{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;border:1px solid var(--pf-linie);border-radius:.5rem;color:var(--pf-text);text-decoration:none;}
.einstieg-knopf:hover,.einstieg-knopf:focus-visible{border-color:var(--pf-link);background:var(--pf-flaeche-2);color:var(--pf-text);}
.einstieg-knopf .bi{font-size:var(--s-gross);color:var(--pf-link);line-height:1.2;}
@media (max-width:575.98px){.ansteht li,.zuletzt li{flex-wrap:wrap;}.ansteht li .btn{margin-left:1.45rem;}}

/* ── Ampel Orange (11.09.2026, Samuel: «1. Mahnung orange, ab 2. Mahnung rot») – Stufe zwischen Gelb und Rot, keine Markenfarbe.
   Hell: Schrift #a3480c auf Chip #fbe3d0 4,87:1, Punkt #cf6a12 3,67:1 auf Weiss. Dunkel: #ffa45c auf #4a2c14 6,45:1, Punkt #ea7a1f 5,67:1.
   Punkte gegen Gelb und Rot mit dem dataviz-Prüfskript geprüft (Farbsehschwäche ΔE 12, normal 17). pfyls-brand §2. ── */
:root{--pf-ampel-orange-chip:#fbe3d0;--pf-ampel-orange-text:#a3480c;--pf-ampel-orange-punkt:#cf6a12;}
[data-bs-theme="dark"]{--pf-ampel-orange-chip:#4a2c14;--pf-ampel-orange-text:#ffa45c;--pf-ampel-orange-punkt:#ea7a1f;}
.ampel-orange{background:var(--pf-ampel-orange-chip);color:var(--pf-ampel-orange-text);}
.ansteht-punkt.ampel-orange{background:var(--pf-ampel-orange-punkt);}

/* ── FiBU-Übersicht und Zeile «Bereiche» (PLAN_UEBERSICHTEN Runde 4) ── */
.fibu-monate{font-size:var(--s-klein);}
.fibu-monate td,.fibu-monate tfoot th{white-space:nowrap;vertical-align:middle;}
.fibu-monate thead th{white-space:normal;vertical-align:bottom;line-height:1.25;}
.fibu-monate tfoot th{border-top:2px solid var(--pf-linie);font-weight:600;}
.fibu-balken{display:block;height:.3rem;min-width:3.5rem;background:var(--pf-flaeche-2);border-radius:999px;overflow:hidden;margin-top:.15rem;}
.fibu-balken span{display:block;height:100%;margin-left:auto;background:var(--pf-link);border-radius:999px;}
/* PLAN_DARSTELLUNG §4.8 (25.09.2026): Mahn-Chips sind einzeilig (rechnungStand kurz1), der volle Text steht im title – kein Umbruch mehr */
.table td.mono{white-space:nowrap;}                    /* Rechnungsnummer und Betrag nie am Bindestrich trennen */
.bereich-satz{display:flex;gap:.55rem;align-items:baseline;font-size:var(--s-normal);line-height:1.35;}
.bereich-satz .ansteht-punkt{transform:translateY(.05rem);}

/* ── Mailing (11.09.2026, PLAN_MAILING) – Vorschau wie eine Mail, Platzhalter-Knöpfe, Meldung nach «Senden» ── */
.mail-vorschau{height:auto;}
.mail-vorschau pre[data-v-text]{padding-bottom:.4rem;}
.mail-vorschau pre.mail-signatur{padding-top:.4rem;color:var(--pf-muted);}
.mail-abmeldung{margin:0;padding:.55rem .9rem;border-top:1px dashed var(--pf-linie);font-size:var(--s-klein);color:var(--pf-muted);}
.mail-link{color:var(--pf-link);text-decoration:underline;}
.mail-hinweise{margin:0;padding:.6rem .9rem .6rem 2rem;border-top:1px solid var(--pf-linie);background:var(--pf-hinweis-bg);color:var(--pf-hinweis-text);font-size:var(--s-klein);border-radius:0 0 .5rem .5rem;}
.platzhalter-knoepfe{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;}
.platzhalter-knoepfe .btn{--bs-btn-padding-y:.1rem;--bs-btn-padding-x:.45rem;font-size:var(--s-klein);}
.mail-text-roh{white-space:pre-wrap;font-family:'IBM Plex Mono',monospace;font-size:var(--s-klein);margin:0;color:var(--pf-text);}
.senden-meldung{border-left:4px solid var(--pf-ampel-gruen-text);}
.senden-meldung .bi-envelope-check{font-size:1.8rem;color:var(--pf-ampel-gruen-text);}

/* ── Tagesabschluss: die Matrix im Fenster (12.09.2026, PLAN_EINNAHMEN §6) ──
   Zeilen = Zahlungswege, Spalten = Ertragsarten. Die Summenzeile unten und die Summenspalte rechts sind die
   Probe – sie bekommen darum eine eigene Linie, damit sie nicht wie eine weitere Eingabe aussehen. */
.tag-matrix th,.tag-matrix td{vertical-align:middle;}
.tag-matrix thead th{white-space:normal;line-height:1.2;}
.tag-matrix thead th small{display:block;font-weight:400;}
.tag-matrix input{min-width:5.5rem;}
.tag-matrix td:last-child,.tag-matrix thead th:last-child{border-left:1px solid var(--pf-linie);}
.tag-matrix tfoot th{border-top:2px solid var(--pf-linie);font-weight:600;}
[data-tag-probe]{font-weight:600;}

/* ── Rechnungskarte im Erfassungsfenster (12.09.2026, PLAN_EINNAHMEN §5a) ──
   Die Statuszeile einer bestehenden Einnahme sitzt über den Feldern und ist als Block abgesetzt, damit klar
   ist: oben steht, was diese Zeile IST, unten, was man ändern kann. Der Zeitstrahl liest nur. */
.karte-kopf{background:var(--pf-flaeche-2);border:1px solid var(--pf-linie);border-radius:.5rem;padding:.7rem .9rem;}
.karte-verlauf{font-size:var(--s-klein);color:var(--pf-muted);border-top:1px dashed var(--pf-linie);padding-top:.5rem;}
.karte-verlauf span{display:block;}
.karte-verlauf span + span{margin-top:.15rem;}

/* ── Das druckbare Blatt (rechnung_blatt.php) ──
   Bewusst immer hell und weiss: es ist ein Dokument, kein Bildschirm – so sieht es auf Papier gleich aus.
   Das Musterband steht IM Dokument und wird mitgedruckt (PLAN_EINNAHMEN §7): wer das Blatt weglegt, soll auch
   später sehen, dass es aus einer Demo stammt. */
.blatt{max-width:52rem;}
.blatt-band{background:var(--pf-erklaer-bg);color:#744b10;border:1px solid #e3d5b4;border-bottom:0;border-radius:.7rem .7rem 0 0;
            padding:.5rem 2rem;font-size:.85rem;font-weight:600;letter-spacing:.02em;}
.blatt-seite{background:#fff;color:#1c1c1c;border:1px solid var(--pf-linie);border-radius:0 0 .7rem .7rem;padding:2rem;box-shadow:0 4px 18px rgba(0,0,0,.08);}
.blatt-seite a{color:var(--pf-marke-auf-weiss);}
.blatt-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;font-size:.9rem;line-height:1.5;}
.blatt-absender{font-size:1.15rem;font-weight:600;margin-bottom:.2rem;}
/* Meldung 52 (21.09.2026): das Logo so hoch wie der Absenderblock – Name (1.15rem × 1.5 + .2rem) plus N Zeilen zu .9rem × 1.5;
   N setzt die Klasse blatt-kopf-zN (includes/dokumente.php, rechnung_blatt.php) */
.blatt-kopf{--kopf-z:0;--kopf-h:calc(1.925rem + var(--kopf-z) * 1.35rem);}
.blatt-kopf-z1{--kopf-z:1}.blatt-kopf-z2{--kopf-z:2}.blatt-kopf-z3{--kopf-z:3}.blatt-kopf-z4{--kopf-z:4}.blatt-kopf-z5{--kopf-z:5}.blatt-kopf-z6{--kopf-z:6}
.blatt-logo{flex:0 1 auto;max-width:50%;}
/* Samuel 21.09.2026: Logo rechts und Anschrift rechts – das Logo beginnt auf derselben Linie wie «Rechnung an» (Spalte 22rem, linksbündig) */
.blatt-logo-rechts.blatt-anschrift-rechts .blatt-logo{flex:0 0 min(50%,22rem);}
.blatt-logo-rechts.blatt-anschrift-rechts .blatt-logo img{object-position:left center;}
.blatt-logo img{display:block;height:max(4.5rem, var(--kopf-h));width:auto;max-width:100%;object-fit:contain;object-position:left top;}
/* Logo-Grösse nach Vorlage (Meldung #22, Samuel 21.09.2026 «sauber»): alle drei am Absenderblock gemessen, Oberkante auf dem Namen –
   klein = halbe Höhe, mittel (Standard) = gleiche Höhe, gross = ein Viertel mehr; nie breiter als die Spalte. PDF rechnet gleich. */
.blatt-logo-klein .blatt-logo img{height:max(2.6rem, calc(var(--kopf-h) * .5));}
.blatt-logo-mittel .blatt-logo img{height:max(4.5rem, var(--kopf-h));}
.blatt-logo-gross .blatt-logo img{height:max(6rem, calc(var(--kopf-h) * 1.25));}
.blatt-titel{font-size:1.5rem;margin:2rem 0 .4rem;}
.blatt-zeile{font-size:.95rem;margin-bottom:1.4rem;}
.blatt-matrix{color:#1c1c1c;--bs-table-color:#1c1c1c;--bs-table-bg:transparent;--bs-table-border-color:#dfe2e8;}
.blatt-matrix thead th{white-space:normal;line-height:1.2;font-weight:600;}
.blatt-matrix thead th small{display:block;font-weight:400;color:#555;}
.blatt-matrix tfoot th{border-top:2px solid #b9bec9;font-weight:600;}
.blatt-matrix td:last-child,.blatt-matrix thead th:last-child,.blatt-matrix tfoot th:last-child{border-left:1px solid #dfe2e8;}
.blatt-matrix td[colspan]{border-left:0;}   /* Textzeile über die ganze Breite: kein Strich links (Meldung 32) */
/* Test Blatt-Beträge (26.09.2026): gleicher Seitenabstand für td und th – sonst stand der Betrag der Zeilen 8.5 px links vom Total
   (.table td hat .75rem, th nur .25rem) – und jeder Betrag auf der Grundlinie der ersten Zeile seiner Leistung statt in der Mitte */
.blatt-matrix td,.blatt-matrix th{padding-left:.6rem;padding-right:.6rem;vertical-align:baseline;}
.blatt-total{font-size:1.1rem;font-weight:600;margin:.6rem 0 1.6rem;display:flex;justify-content:space-between;gap:1rem;
             border-top:2px solid #b9bec9;padding-top:.6rem;}
.blatt-fuss{font-size:.82rem;color:#555;margin-bottom:.6rem;}
/* Das Blatt einer einzelnen Einnahme (Etappe 6, 13.09.2026): Empfänger, Rechnungsdaten und Vermerke.
   Vermerke bewusst ohne Ampelfarbe – auf Papier soll «bezahlt» oder «storniert» im Wort stehen, nicht in einer Farbe. */
.blatt-empfaenger{margin-top:2.2rem;font-size:.95rem;line-height:1.5;}
.blatt-etikett{font-size:.78rem;color:#555;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem;}
.blatt-daten{font-size:.92rem;margin-bottom:1.2rem;}
.blatt-daten th{font-weight:400;color:#555;padding:0 1.2rem .1rem 0;white-space:nowrap;vertical-align:top;}
.blatt-daten td{padding:0 0 .1rem;}
.blatt-vermerk{border-left:3px solid #b9bec9;padding:.35rem .8rem;margin:1rem 0;font-size:.95rem;}
.blatt-vermerk-stark{font-weight:600;border-left-width:5px;}
/* ── Aussehen nach Vorlage (PLAN_RECHNUNG R4, 14.09.2026) ──
   Die Vorlage setzt --blatt-farbe am .blatt (vier Töne aus pfyls-brand, §6b) und Klassen für Schrift, Anschrift, Ränder und
   Logo-Stellung. Farbe nur dort, wo sie das Blatt gliedert: Oberkante, Absender, Titel, Etiketten, Kopfzeile der Tabelle. */
.blatt{--blatt-farbe:#142b70;}
.blatt-seite{border-top:6px solid var(--blatt-farbe);}
.blatt-serif .blatt-seite{font-family:'Source Serif 4',Georgia,serif;}
.blatt-sans .blatt-seite{font-family:'IBM Plex Sans',system-ui,sans-serif;}
.blatt-sans .blatt-titel,.blatt-sans .blatt-absender{font-family:'IBM Plex Sans',system-ui,sans-serif;}
.blatt-serif .blatt-titel,.blatt-serif .blatt-absender{font-family:'Source Serif 4',Georgia,serif;}
.blatt-seite .blatt-titel,.blatt-seite .blatt-absender,.blatt-seite .blatt-etikett{color:var(--blatt-farbe);}
.blatt-matrix thead th{border-bottom:2px solid var(--blatt-farbe);}
.blatt-logo-links .blatt-kopf{flex-direction:row-reverse;}
.blatt-logo-links .blatt-absenderblock{text-align:right;}
.blatt-absenderblock{min-width:12rem;}
.blatt-anschrift-rechts .blatt-empfaenger{margin-left:auto;width:min(100%,22rem);}
.blatt-anschrift-links .blatt-empfaenger{width:min(100%,22rem);}
.blatt-raender-schmal .blatt-seite{padding:1.1rem 1.3rem;}
@media (max-width:575px){.blatt-seite,.blatt-raender-schmal .blatt-seite{padding:1rem .75rem;}}   /* Handy: mehr Platz für die Tabelle (Test Blatt-Beträge) */
.blatt-nebentext{color:#555;}
.blatt-anrede{margin-top:.5rem;}
.blatt-bedingungen{font-size:.92rem;color:#333;}
.blatt-gruss{white-space:pre-line;}
.blatt-unterschrift{margin:2.2rem 0 0;font-size:.88rem;color:#333;width:16rem;}
.blatt-unterschrift-linie{border-top:1px solid #777;margin-bottom:.25rem;}
.blatt-fusszeile{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;padding-top:.8rem;border-top:1px solid var(--blatt-farbe);font-size:.78rem;color:#444;line-height:1.45;}
/* ── Empfangsschein und Zahlteil (PLAN_RECHNUNG R7, §8a) – Masse in mm nach dem Style Guide QR-Rechnung ──
   210 × 105 mm: Empfangsschein 62 mm links, Zahlteil 148 mm rechts; Ränder 5 mm; QR 46 × 46 mm bei x 67 / y 17 mm des Zahlteils.
   Am Bildschirm sitzt der Zahlteil unter dem Blatt; gedruckt bleibt er zusammen (page-break-inside) und behält die Millimeter. */
.qrz{position:relative;background:#fff;color:#000;width:210mm;max-width:100%;height:105mm;border-top:1px dashed #000;margin-top:1.5rem;font-family:Helvetica,Arial,'Liberation Sans',sans-serif;box-sizing:border-box;page-break-inside:avoid;break-inside:avoid;overflow:hidden;}
.qrz-band{position:absolute;left:62mm;top:0;width:148mm;background:#f6efe0;color:#744b10;font-size:7pt;font-weight:600;text-align:center;padding:.6mm 0;}
.qrz-empfangsschein{position:absolute;left:0;top:0;width:62mm;height:105mm;padding:5mm;border-right:1px dashed #000;box-sizing:border-box;font-size:8pt;line-height:9pt;}
.qrz-zahlteil{position:absolute;left:62mm;top:0;width:148mm;height:105mm;padding:5mm;box-sizing:border-box;display:flex;gap:5mm;font-size:10pt;line-height:11pt;}
.qrz-links{width:46mm;flex:0 0 46mm;} .qrz-rechts{flex:1 1 auto;padding-top:0;}
.qrz-titel{font-size:11pt;font-weight:700;line-height:1;margin-bottom:5mm;}
.qrz-h{font-weight:700;font-size:6pt;line-height:9pt;margin-top:2.5mm;} .qrz-zahlteil .qrz-h{font-size:8pt;line-height:11pt;}
.qrz-w{margin-bottom:.5mm;}
.qrz-code{width:46mm;height:46mm;margin:2mm 0 5mm;} .qrz-code svg{display:block;width:46mm;height:46mm;}
.bez-qr-bild{flex:0 0 46mm;width:46mm;height:46mm;background:#fff;} .bez-qr-bild svg{display:block;width:46mm;height:46mm;} .bez-qr-text{flex:1 1 12rem;min-width:0;overflow-wrap:anywhere;}
.qrz-betrag{display:flex;gap:4mm;} .qrz-betrag>div>.qrz-h{margin-top:0;}
.qrz-empfangsschein .qrz-betrag{position:absolute;left:5mm;top:68mm;}
.qrz-annahme{position:absolute;right:5mm;bottom:5mm;font-size:6pt;font-weight:700;}
/* BACKLOG 126d: leeres Feld mit Eckwinkeln statt Rahmen (SIX Style Guide QR-Rechnung: 3 mm lang, 0.75 pt) */
.qrz-feld{width:52mm;height:20mm;margin-top:1mm;background:linear-gradient(#000,#000) top left/3mm .75pt no-repeat,linear-gradient(#000,#000) top left/.75pt 3mm no-repeat,linear-gradient(#000,#000) top right/3mm .75pt no-repeat,linear-gradient(#000,#000) top right/.75pt 3mm no-repeat,linear-gradient(#000,#000) bottom left/3mm .75pt no-repeat,linear-gradient(#000,#000) bottom left/.75pt 3mm no-repeat,linear-gradient(#000,#000) bottom right/3mm .75pt no-repeat,linear-gradient(#000,#000) bottom right/.75pt 3mm no-repeat;-webkit-print-color-adjust:exact;print-color-adjust:exact;} .qrz-zahlteil .qrz-feld{width:65mm;height:25mm;}
@media print{.qrz{margin-top:8mm;}}
/* Designer: Farbkarten und die verkleinerte Vorschau */
.dok-farben{display:flex;flex-wrap:wrap;gap:.5rem;}
.dok-farbe{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--pf-linie);border-radius:.4rem;padding:.3rem .6rem;cursor:pointer;font-size:var(--s-klein);}
.dok-farbe.gewaehlt{border-color:var(--pf-marke);box-shadow:0 0 0 2px rgba(var(--pf-marke-rgb),.15);}
.dok-farbe input{position:absolute;opacity:0;width:0;height:0;}
.dok-farbe-punkt{width:1.1rem;height:1.1rem;border-radius:50%;display:inline-block;}
.dok-vorschau{position:sticky;top:1rem;}
.dok-vorschau .blatt{max-width:none;zoom:.82;}
@media (max-width:991px){.dok-vorschau{position:static;}.dok-vorschau .blatt{zoom:1;}}
/* Test Blatt-Beträge (26.09.2026): auf dem Laptop (bis 1399 px) passt die Vorschau mit allen Spalten sonst nur mit seitlichem Scrollen */
@media (min-width:992px) and (max-width:1399px){.dok-vorschau .blatt{zoom:.72;}}
@media print{.blatt .table-responsive{zoom:1!important;}}   /* assets/blatt_einpassen.js verkleinert nur am Bildschirm */
/* Meldung 97 (26.09.2026): das Blatt als Vorschau im Fenster «Einnahme» – verkleinert, eigener Rollbalken */
.karte-blatt-rahmen{max-height:30rem;overflow:auto;border:1px solid var(--pf-linie);border-radius:.5rem;padding:.5rem;}
.karte-blatt-rahmen .blatt{max-width:none;zoom:.7;}
@media (max-width:575px){.karte-blatt-rahmen .blatt{zoom:.5;}}
/* Meldung 99 (26.09.2026): ab 1200 px zwei Spalten – Fenster links, Rechnung rechts (mitlaufend); zugeklappt wieder eine Spalte */
.ein-rechts{margin-top:1rem;}
@media (min-width:1200px){
  .modal-dialog.mit-vorschau:not(.vorschau-zu){max-width:min(1500px,96vw);}
  .mit-vorschau:not(.vorschau-zu) .ein-spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start;}
  .mit-vorschau:not(.vorschau-zu) .ein-rechts{margin-top:0;position:sticky;top:0;}
  .mit-vorschau .karte-blatt-rahmen{max-height:calc(100vh - 11rem);}
  .mit-vorschau .karte-blatt-rahmen .blatt{zoom:.8;}
}

/* Vorschlagszeile «Noch nicht verrechnet» im Fenster «Einnahme erfassen» – bei vielen Terminen scrollt die Liste */
.termin-vorschlaege .list-group{max-height:14rem;overflow-y:auto;}

/* Nachgestellter Bankauszug im Fenster «Bezahlt setzen» (Etappe 7, 13.09.2026) – dieselbe Fläche wie die Rechnungskarte.
   ⚠️ px-0 trägt !important, darum auch hier: die passende Zeile bekommt einen Strich links und etwas Luft. */
.auszug{background:var(--pf-flaeche-2);border:1px solid var(--pf-linie);border-radius:.5rem;padding:.6rem .9rem;}
.auszug .list-group-item{background:transparent;}
.auszug-passt{border-left:3px solid var(--pf-link)!important;padding-left:.6rem!important;}
.auszug .auszug-gewaehlt{background:var(--pf-erklaer-bg);}
.auszug-wahl{max-width:20rem;}
.auszug .chip{white-space:normal;}   /* «passt zu RE-2026-041 – Betrag und Name stimmen» ist breiter als ein Handy */

/* ── «Fehler melden» (PLAN_FEHLERMELDER §9, 14.09.2026) ──
   Markier-Rahmen und Chip in Consulting-Orange (Bereichsfarbe der Demo, kein Ampel-Rot – eine Markierung ist kein
   Fehlerzustand); das Band ist derselbe Baustein wie der Erklärkasten; die Tafel eine Karte mit orangem Oberrand.
   Die Überlage liegt über dem Modal (1055), Toasts (1090) bleiben darüber. */
.melder-aktiv,.melder-aktiv *{cursor:crosshair!important;}
.melder-ueberlage{position:fixed;z-index:1085;pointer-events:none;border:2px solid var(--pf-consulting);background:rgba(157,102,22,.12);border-radius:3px;box-sizing:border-box;}
.melder-ueberlage.fest{background:rgba(157,102,22,.18);}
.melder-ueberlage .melder-chip{position:absolute;left:-2px;top:-1.3rem;background:#9d6616;color:#fff;font-family:'IBM Plex Sans',sans-serif;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;background:var(--pf-erklaer-bg);color:var(--pf-erklaer-text);border-left:4px solid var(--pf-consulting);box-shadow:0 2px 10px rgba(0,0,0,.2);padding:.55rem 1rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;font-size:.95rem;}
.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(--pf-flaeche);color:var(--pf-text);border:1px solid var(--pf-linie);border-top:4px solid var(--pf-consulting);border-radius:.5rem;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:1rem 1.1rem;}
.melder-tafel h2{font-size:1.15rem;margin:0;}
.melder-tafel .melder-stelle{font-family:'IBM Plex Mono',monospace;font-size:.78rem;background:var(--pf-flaeche-2);border-radius:.3rem;padding:.35rem .55rem;word-break:break-all;}
.melder-tafel details{font-size:.85rem;}
.melder-tafel details summary{cursor:pointer;color:var(--pf-link);}
.melder-tafel .melder-liste{margin:.4rem 0 0;padding-left:1.1rem;font-size:.82rem;color:var(--pf-muted);}
.melder-tafel .melder-liste code{font-size:.78rem;word-break:break-all;}
.melder-tafel .melder-bild{border:1px dashed var(--pf-linie);border-radius:.375rem;padding:.5rem .6rem;font-size:.82rem;color:var(--pf-muted);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;}
.menue-fuss .schalter.melden{margin-top:-.3rem;}

/* ── Drucken (12.09.2026) ──
   Gedruckt wird nur das Blatt: Menü, Kopfzeile, Fusszeile und alle Knöpfe fallen weg. Farben zwingen wir auf
   Weiss/Schwarz – im Dunkelmodus käme sonst eine schwarze Seite aus dem Drucker. */
@media print{
  .seitenmenue,.kopf,footer,.btn,.modal,.modal-backdrop,#pf-hinweise,.erklaer,.melder-ui,.melder-ueberlage{display:none!important;}
  html,body{background:#fff!important;color:#000!important;}
  /* Das Raster ist am Bildschirm ein Flexbereich mit min-height:100vh – gedruckt gäbe das eine leere Seite. */
  .raster{display:block!important;min-height:0!important;}
  .inhalt{display:block!important;margin:0!important;}
  .container-fluid{padding:0!important;}
  .blatt{max-width:none;}
  .blatt-band{border-radius:0;border-color:#999;}
  .blatt-seite{border:0;border-radius:0;box-shadow:none;padding:0 0 1rem;}
  .blatt-matrix{--bs-table-color:#000;}
  /* Samuel 21.09.2026: gedruckt wiederholt der Browser ein <tfoot> unten auf JEDER Seite – das Total stand so schon auf Seite 1, mitten
     in den Positionen. Als gewöhnliche Zeilengruppe steht es einmal, am Ende. Eine Position wird nie über zwei Seiten zerrissen. */
  .blatt-matrix tfoot{display:table-row-group;}
  .blatt-matrix tr,.blatt-vermerk,.blatt-unterschrift,.blatt-fusszeile{break-inside:avoid;page-break-inside:avoid;}
  .blatt .table-responsive{overflow:visible!important;}
  a[href]:after{content:none!important;}
}
/* Ausgaben (14.09.2026): «Wofür» als anklickbare Chips im Fenster – dieselbe Optik wie die Filter-Chips */
.filter-chips label.chip{cursor:pointer;user-select:none;}
.beleg-vorschau{max-width:120px;max-height:90px;object-fit:cover;border:1px solid var(--pf-linie);border-radius:.35rem;background:#fff;}
.beleg-gross{max-width:100%;max-height:70vh;border:1px solid var(--pf-linie);border-radius:.35rem;background:#fff;}

/* ── Aussehen: eigene Farben des Betriebs (PLAN_FARBEN §5) ───────────────── */
.farb-paletten{display:flex;flex-wrap:wrap;gap:.5rem;}
.farb-palette{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--pf-linie);background:var(--pf-flaeche);color:var(--pf-text);border-radius:.5rem;padding:.35rem .7rem;font-size:var(--s-klein);cursor:pointer;}
.farb-palette:hover:not(:disabled){border-color:var(--pf-link);}
.farb-palette.gewaehlt{border-color:var(--pf-link);box-shadow:0 0 0 2px rgba(var(--pf-marke-rgb),.15);font-weight:600;}
.farb-muster{display:inline-flex;border-radius:.3rem;overflow:hidden;border:1px solid rgba(0,0,0,.15);}
.farb-muster span{display:block;width:1.3rem;height:1.3rem;}
.farb-muster span + span{width:.7rem;}
.form-control-color{max-width:3.2rem;}
.farb-vorschau{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;border:1px solid var(--pf-linie);border-radius:.5rem;padding:.6rem;background:var(--pf-flaeche);}
.farb-vorschau-menue{background:var(--pf-menue-bg);color:var(--pf-menue-text);border-left:4px solid var(--pf-akzent-menue);padding:.35rem .8rem;border-radius:.3rem;font-weight:500;display:inline-flex;gap:.5rem;align-items:center;}
.marke img.logo-eigen{height:auto;max-height:46px;max-width:92px;object-fit:contain;}
@media (min-width:992px){[data-menue="geloest"] .seitenmenue:not(:hover):not(:focus-within) .marke img.logo-eigen{height:auto;max-height:36px;max-width:52px;}}   /* schmales Menü: 64 px */
.web-logo{height:1.9rem;width:auto;max-width:8rem;object-fit:contain;margin-right:.6rem;vertical-align:middle;}
.logo-vorschau{display:flex;align-items:center;justify-content:center;min-height:5rem;border:1px dashed var(--pf-linie);border-radius:.5rem;background:#fff;padding:.6rem;}
.logo-vorschau img{max-height:4.5rem;max-width:100%;object-fit:contain;}
/* Wofür nach der Erfolgsrechnung (21.09.2026): die Konten einer Gruppe als Knöpfe, auf breiten Bildschirmen zweispaltig */
.konten-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.25rem;}
.konten-liste .konto-wahl{white-space:normal;}
/* Kontenplan (Meldung 55, 21.09.2026): Zwischentitel je Gruppe des Kontenrahmens, die Konten darunter eingerückt */
.konto-gruppe th{font-size:var(--s-etikett);font-weight:600;color:var(--pf-muted);padding-top:.7rem;padding-bottom:.25rem;padding-left:1.25rem;border-bottom-width:0;background:transparent;}
.konto-gruppe .mono{margin-right:.35rem;}
[data-kontenliste] td.konto-nr{padding-left:2rem;}
.er-tabelle .er-gruppe th{padding-left:1.5rem;}
.er-tabelle .er-gruppe td{padding-top:.7rem;padding-bottom:.25rem;border-bottom-width:0;}

/* ── Kalender je Person (PLAN_KALENDER_PERSONEN, 21.09.2026): sechs Töne aus KALENDER_FARBEN – nur als Klasse, nie ein DB-Wert roh ── */
.person-f1{--kal-p:#1f5fa8;} .person-f2{--kal-p:#9d6616;} .person-f3{--kal-p:#2f7d4f;} .person-f4{--kal-p:#8a3f8f;} .person-f5{--kal-p:#b03a3a;} .person-f6{--kal-p:#2a7f86;}
.kal-termin.status-geplant[class*="person-f"],.kal-chip.status-geplant[class*="person-f"],.kal-farbe.status-geplant[class*="person-f"]{border-color:var(--kal-p);background:color-mix(in srgb,var(--kal-p) 14%,#fff);color:#1d2430;}
.kal-termin.status-blocker[class*="person-f"],.kal-chip.status-blocker[class*="person-f"]{border-color:var(--kal-p);}
.kal-kurz{font-family:'IBM Plex Mono',monospace;font-size:var(--s-etikett);padding:0 .25rem;border-radius:.2rem;background:var(--kal-p,var(--pf-linie));color:#fff;margin-left:.15rem;}
.chip[class*="person-f"] .kal-farbe{border-color:var(--kal-p);background:color-mix(in srgb,var(--kal-p) 14%,#fff);}
.kal-tag{display:grid;grid-template-columns:var(--kal-zeitspalte) repeat(var(--kal-spalten,1),minmax(0,1fr));}
.kal-tag .kal-tag-kopf{padding:.4rem .5rem;border-bottom:1px solid var(--pf-linie);font-weight:600;}

/* ── Benutzer & Rechte (Meldung 75, 25.09.2026): drei Reiter, Benutzer als Karten – Kürzel in der Kalenderfarbe, Farbpunkte statt Auswahl ── */
.min-w-0{min-width:0;}
.benutzer-kuerzel{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--kal-p,var(--pf-muted));color:#fff;font-family:'IBM Plex Mono',monospace;font-size:var(--s-klein);font-weight:600;}
.benutzer-ich{border-color:var(--pf-marke-hell-rand);}
.farb-punkte{display:inline-flex;gap:.35rem;align-items:center;}
.farb-punkt{width:1.15rem;height:1.15rem;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:var(--kal-p);padding:0;cursor:pointer;}
.farb-punkt.aktiv{outline:2px solid var(--pf-text);outline-offset:2px;}
.farb-punkt:focus-visible{outline:2px solid var(--pf-link);outline-offset:2px;}
.farb-keine{background:#fff linear-gradient(135deg,transparent 44%,#b03a3a 44% 56%,transparent 56%);}
.rolle-beschreibung{font-weight:400;font-size:var(--s-klein);color:var(--pf-muted);max-width:15rem;white-space:normal;line-height:1.3;margin-top:.15rem;}
.rechte-gruppe td{padding-top:.8rem;border-bottom-width:0;}
.rechte-gruppe .btn-link .bi-chevron-down{display:inline-block;transition:transform .15s;}
.rechte-gruppe .btn-link[aria-expanded="false"] .bi-chevron-down{transform:rotate(-90deg);}
.chip.chip-klein{font-size:var(--s-etikett);padding:.02rem .4rem;}   /* Meldung 76: Titel aus der Buchhaltung in der Adressliste */

/* ── «Wofür?» als Kacheln (Meldung 70, 25.09.2026): erst die Kategorie, dann das Konto – nach der Wahl eine Zeile, darunter die Kontoliste ── */
.wofuer-kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;}
@media (max-width:767.98px){.wofuer-kacheln{grid-template-columns:repeat(2,minmax(0,1fr));}}
.wofuer-trenner{grid-column:1/-1;margin-top:.15rem;}
.wofuer-kachel{display:flex;flex-direction:column;gap:.1rem;margin:0;padding:.45rem .6rem;border:1px solid var(--pf-linie);border-radius:.4rem;background:var(--pf-flaeche);cursor:pointer;line-height:1.25;}
.wofuer-kachel:hover{border-color:var(--pf-link);}
.wofuer-kachel:focus-within{outline:2px solid var(--pf-link);outline-offset:1px;}
.wofuer-kachel.aktiv{border:2px solid var(--pf-link);padding:calc(.45rem - 1px) calc(.6rem - 1px);}
.wofuer-kein-aufwand{background:transparent;border-style:dashed;}
.wofuer-titel{font-weight:600;font-size:var(--s-klein);}
.wofuer-beispiel{font-size:var(--s-klein);color:var(--pf-muted);}
.wofuer-andere{display:none;}
.wofuer-kacheln.zu{grid-template-columns:minmax(0,1fr) auto;align-items:center;}
.wofuer-kacheln.zu .wofuer-trenner,.wofuer-kacheln.zu .wofuer-kachel:not(.aktiv){display:none;}
.wofuer-kacheln.zu .wofuer-kachel.aktiv{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;}
.wofuer-kacheln.zu .wofuer-andere{display:inline-block;}
/* Meldung 88 (BACKLOG 146): «Wie bezahlt?» mit denselben Kacheln – fünf in einer Reihe, am Handy zwei; zugeklappt eine Zeile */
.wofuer-kacheln.fuenf{grid-template-columns:repeat(5,minmax(0,1fr));}
@media (max-width:767.98px){.wofuer-kacheln.fuenf{grid-template-columns:repeat(2,minmax(0,1fr));}}
.wofuer-kacheln.fuenf.zu{grid-template-columns:minmax(0,1fr) auto;}
/* BACKLOG 148: die Adresse des neuen Lieferanten unter «Neu» */
.lieferant-neu{border-left:3px solid var(--pf-linie);padding-left:.6rem;}
.lieferant-neu .hinweis-gelb{flex-wrap:nowrap;align-items:flex-start;gap:.6rem;padding:.5rem .7rem;}
.lieferant-neu .hinweis-gelb .bi{font-size:1.1rem;}
.lieferant-neu .register-treffer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border:1px solid var(--pf-linie);border-radius:.4rem;padding:.35rem .5rem;margin-top:.3rem;font-size:var(--s-klein);}
.konten-liste{grid-template-columns:minmax(0,1fr);}
.konto-wahl-nr{display:inline-block;min-width:2.9rem;color:var(--pf-muted);}
.konto-wahl.active .konto-wahl-nr{color:inherit;}

/* ── Darstellung (PLAN_DARSTELLUNG, 25.09.2026): Kachel-Regel, Reiter, Lesemodus, Speicher-Leiste, Willkommen-Band ──
   Kacheln brechen nie um (ein Satz über 40 Zeichen steht im title). Farben nur aus --pf-* – hell und dunkel sind gemessen (pfyls-brand §9). */
.kpi{min-width:0;}
.kpi .kicker{margin-bottom:.25rem;}
.kpi .wert,.kpi .delta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpi .einheit{font-family:'IBM Plex Sans',sans-serif;font-size:var(--s-klein);font-weight:400;}
.kpi .balken{display:none;margin-top:.35rem;line-height:0;}
@media (min-width:1200px){.kpi .balken{display:block;}}
@media (max-width:575.98px){.kpi{padding:.8rem!important;}.kpi .wert{font-size:var(--s-gross);}}
/* Reiter (§4.5): ab 992 px eine Zeile, darunter waagrecht scrollbar; leer = grau ohne Zahl; «Mehr» als Aufklappmenü (Popper fixed, damit es nicht abgeschnitten wird) */
.reiter{flex-wrap:nowrap;}
.reiter .nav-link{white-space:nowrap;}
.reiter .leer .nav-link,.reiter .leer .dropdown-item{color:var(--pf-muted);}
.reiter .dropdown-menu{background:var(--pf-flaeche);border-color:var(--pf-linie);}
.reiter .dropdown-item{color:var(--pf-text);}
.reiter .dropdown-item:hover,.reiter .dropdown-item.active{background:var(--pf-flaeche-2);color:var(--pf-text);}
@media (max-width:991.98px){.reiter{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}.reiter .nav-item{flex:0 0 auto;}}
/* Lesemodus (§4.6): je Feld Label, Lesewert und Eingabe – data-modus am Container entscheidet; leere Felder verschwinden beim Lesen */
.feld .lese{display:none;padding:.15rem 0;min-height:1.7rem;overflow-wrap:anywhere;}
[data-modus="lesen"] .feld .lese{display:block;}
[data-modus="lesen"] .feld > :is(.form-control,.form-select,.input-group,.form-check,.d-flex,.row,textarea,.form-control-plaintext){display:none!important;}
[data-modus="lesen"] .feld.leer,[data-modus="lesen"] .nur-bearbeiten{display:none!important;}
[data-modus="bearbeiten"] .nur-lesen{display:none!important;}
.lese[data-feld]{cursor:text;border-radius:.3rem;margin-left:-.3rem;padding-left:.3rem;padding-right:.3rem;}
[data-modus="lesen"] .lese[data-feld]:hover{background:var(--pf-flaeche-2);}
.chip-lese{background:var(--pf-flaeche-2);color:var(--pf-text);border:1px solid var(--pf-linie);}
/* Speicher-Leiste (§4.7): am unteren Rand der Karte, bleibt beim Scrollen sichtbar – nur beim Bearbeiten */
.karte-leiste{display:none;position:sticky;bottom:0;z-index:5;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--pf-flaeche);border:1px solid var(--pf-linie);border-top-width:2px;border-radius:0 0 .5rem .5rem;padding:.7rem 1.2rem;box-shadow:0 -4px 12px rgba(0,0,0,.06);}
[data-modus="bearbeiten"] .karte-leiste{display:flex;}
[data-modus="bearbeiten"] .tab-content > .tab-pane > .reiter-inhalt:last-child{border-radius:0;}
/* Willkommen-Band (§5.4): derselbe Baustein wie der Erklärkasten – Consulting-Orange nur hier (pfyls-brand §5.2) */
.willkommen-band{background:var(--pf-erklaer-bg);color:var(--pf-erklaer-text);border-left:4px solid var(--pf-consulting);border-radius:0 .5rem .5rem 0;padding:.6rem 1rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;}
.willkommen-band p{margin:0;flex:1 1 20rem;}
.willkommen-band > .bi{color:var(--pf-consulting);font-size:var(--s-gross);}
/* Kopf-Chips (Mahnung, inaktiv) neben dem Kontext der Seite */
.kopf-chips{display:inline-flex;gap:.35rem;flex-wrap:wrap;}
/* «Was ansteht» (§4.8): je Punkt eine Zeile, der Nebensatz steht im title */
.ansteht-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Erklärkasten kompakt (§6.5): zu = Titel + ein Satz, auf = dazu die drei Spalten */
.erklaer .satz{margin:.25rem 0 0;font-size:var(--s-normal);}
.erklaer:not(.zu) .satz{display:none;}   /* offen steht der Satz in der ersten Spalte */
.erklaer.zu{padding-top:.8rem;padding-bottom:.8rem;}
.bereich-satz .bereich-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}   /* Zeile «Bereiche» auf dem Dashboard: ein Satz, der Rest im title */
/* ── Journal und Kontoblatt (PLAN_JOURNAL, 25.09.2026) ── */
.journal-tabelle .journal-vortrag td{background:var(--pf-flaeche-2);font-style:italic;}
.journal-tabelle td .bi-chevron-right{font-size:.75em;}
/* ── Handy-Hülle (PLAN_HANDY_2 §3, 25.09.2026) ────────────────────────────────────────────────────────────────
   Nur unter 768 px, und die Leiste und das ausgeblendete Menü nur in der Handy-Ansicht (html[data-handy="1"], bis «Volle Ansicht»).
   Farben nur aus den Variablen (includes/farben.php) – eigene Farben des Betriebs färben mit. */
.handy-leiste{display:none;}
.handy-fuss{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:2rem;}
@media (max-width:767.98px){
  html[data-handy="1"] .toggler{display:none;}                                   /* kein Seitenmenü – der eine Weg hinaus ist «Volle Ansicht» */
  html[data-handy="1"] .handy-leiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1030;gap:.5rem;align-items:center;
    padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));background:var(--pf-flaeche);border-top:1px solid var(--pf-linie);box-shadow:0 -2px 10px rgba(0,0,0,.08);}
  html[data-handy="1"] .handy-leiste-start{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;border-radius:.6rem;
    background:var(--pf-marke);color:#fff;font-weight:600;font-size:1.1rem;text-decoration:none;}
  html[data-handy="1"] .handy-leiste-start:hover,html[data-handy="1"] .handy-leiste-start:focus{color:#fff;filter:brightness(1.1);}
  html[data-handy="1"] .handy-leiste-melden{min-width:48px;min-height:48px;border:1px solid var(--pf-linie);border-radius:.6rem;background:var(--pf-flaeche);color:var(--pf-muted);}
  html[data-handy="1"] body{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom));}   /* der Inhalt verschwindet nie hinter der Leiste */
  html[data-handy="1"] body.modal-open .handy-leiste{display:none;}               /* ein offenes Fenster hat seine eigene Speicher-Leiste */
  html[data-handy="1"] #pf-hinweise{bottom:calc(4.5rem + env(safe-area-inset-bottom))!important;}
  /* Felder mit mindestens 16 px – darunter zoomt das iPhone beim Antippen hinein (Filterleiste, -sm-Felder) */
  .form-control,.form-select,.input-group-text{font-size:max(1rem,16px)!important;}
}
/* «Neuer Kunde» (assets/kunde_neu.js): Privat / Firma als zwei grosse Kacheln, der Kasten hebt sich leicht ab */
.kunde-neu{border:1px solid var(--pf-linie);border-radius:.6rem;padding:.9rem;background:var(--pf-flaeche);}
.kunde-neu-art{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.kunde-neu-art label{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;border:1px solid var(--pf-linie);border-radius:.5rem;cursor:pointer;font-weight:600;}
.kunde-neu-art input{position:absolute;opacity:0;pointer-events:none;}
.kunde-neu-art label:has(input:checked){border-color:var(--pf-marke);background:rgba(var(--pf-marke-rgb),.08);color:var(--pf-marke);}
.kunde-neu-art label:has(input:focus-visible){outline:2px solid var(--pf-marke);outline-offset:2px;}
.kunde-neu-knopf{color:var(--pf-link);font-weight:600;}
/* Zeitraum-Knöpfe am Handy (Zahlen, Erfolgsrechnung, Bilanz) */
.handy-chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.handy-chip{display:inline-flex;align-items:center;gap:.3rem;min-height:40px;padding:.3rem .9rem;border:1px solid var(--pf-linie);border-radius:2rem;background:var(--pf-flaeche);color:var(--pf-text);text-decoration:none;font-weight:600;font-size:var(--s-normal);}
.handy-chip.aktiv{background:var(--pf-marke);border-color:var(--pf-marke);color:#fff;}
.handy-chip:hover{color:var(--pf-text);filter:brightness(.97);}
.handy-chip.aktiv:hover{color:#fff;}
/* Erfolgsrechnung und Bilanz unter 576 px: Filter zu, Vorjahr zu, Konten der Erfolgsrechnung erst nach Antippen der Position */
@media (max-width:575.98px){
  .filter-handy-zu:not(.offen){display:none;}
  .er-tabelle .vj{display:none;}
  .er-tabelle.vj-an .vj{display:table-cell;}
  .er-tabelle:not(.vj-an) thead{display:none;}   /* der Zeitraum steht schon im Kartenkopf – die Kopfzeile trägt nur die Vorjahrestitel */
  .er-tabelle[data-er] tr.er-konto:not(.handy-auf),.er-tabelle[data-er] tr.er-gruppe:not(.handy-auf),.er-tabelle[data-er] tr.er-details:not(.handy-auf){display:none;}
  .er-tabelle[data-er] tr.handy-klappe > th{cursor:pointer;}
  .er-tabelle[data-er] tr.handy-klappe > th::before{content:"\F285";font-family:bootstrap-icons;display:inline-block;margin-right:.35rem;font-size:.8em;transition:transform .15s;}
  .er-tabelle[data-er] tr.handy-klappe.handy-offen > th::before{transform:rotate(90deg);}
  .er-tabelle td.ps-5,.er-tabelle td.ps-4{padding-left:.9rem!important;}
  .er-tabelle th,.er-tabelle td:first-child{hyphens:auto;overflow-wrap:anywhere;}   /* «Kommunikationstechnologie» sprengt sonst die Breite */
  .er-tabelle [data-konto-edit],.er-tabelle [data-auszahlung]{display:none;}   /* Konto ändern, Auszahlung erfassen: Schreibtisch-Arbeit – am Handy bleibt die Zeile schmal */
  .er-tabelle tr.er-konto > td:nth-child(2){padding-left:0;padding-right:0;}   /* die Zelle bleibt (sonst rutscht der Betrag eine Spalte nach links), nur schmal */
}
/* Grosse Fenster über den ganzen Bildschirm (wie modal-fullscreen-sm-down): Titel mit ✕ oben, Knöpfe unten immer sichtbar,
   dazwischen scrollt der Inhalt. Kleine Rückfragen bleiben mittig. Gilt am Handy auch in der vollen Ansicht. */
@media (max-width:575.98px){
  .modal-dialog.modal-lg,.modal-dialog.modal-xl{width:100vw;max-width:none;height:100%;margin:0;}
  .modal-dialog.modal-lg .modal-content,.modal-dialog.modal-xl .modal-content{height:100%;min-height:100dvh;border:0;border-radius:0;}
  .modal-dialog.modal-lg .modal-body,.modal-dialog.modal-xl .modal-body{overflow-y:auto;}
  .modal-dialog.modal-lg .modal-header,.modal-dialog.modal-xl .modal-header{position:sticky;top:0;z-index:2;background:var(--bs-modal-bg);}
  .modal-dialog.modal-lg .modal-footer,.modal-dialog.modal-xl .modal-footer{position:sticky;bottom:0;z-index:2;background:var(--bs-modal-bg);padding-bottom:calc(.75rem + env(safe-area-inset-bottom));}
  .modal-dialog.modal-lg .modal-footer .btn,.modal-dialog.modal-xl .modal-footer .btn{min-height:44px;}
  .modal-dialog.modal-lg .modal-footer > .btn-primary,.modal-dialog.modal-xl .modal-footer > .btn-primary{flex:1 1 auto;}
  /* Ausgabe nach dem Beleg-Foto: der Beleg klein oben (antippen öffnet ihn gross), die Felder gleich darunter */
  [data-beleg-vor] .beleg-gross{max-height:9rem;}
  /* Knopfreihe im Kopf der Einnahme-Karte: je zwei nebeneinander, mit dem Daumen zu treffen */
  .karte-kopf .btn-sm{flex:1 1 45%;min-height:40px;}
}