bleibt als sr-only stehen, nicht aus Formtreue: es ist die
einzige Ortsangabe fuer Vorleser, und zwei Waechter zaehlen je Seite genau
ein
. sr-only ist position:absolute, faellt also aus dem
Fluss und kostet keinen Pixel.
Ohne .page-title greift die Regel darueber nicht mehr, und der Kopf fiele in
zwei Zeilen auseinander (Abzeichen oben, Beitext darunter) -- also mehr
Hoehe statt weniger. Diese Klasse haelt die eine Zeile.
Kein Mittelpunkt-Trenner: der stand zwischen Titel und Beitext, und der
Titel ist weg. Was bleibt, sind Abzeichen, und die trennen sich selbst.
---------------------------------------------------------------------------- */
/* sr-only kommt sonst nur aus Tailwind, und Tailwind laedt hier vom CDN
(siehe _base.html). Faellt das CDN aus, stuende die versteckte Ueberschrift
plotzlich als riesiges h1 auf neun Seiten. Deshalb hier noch einmal in
unserer eigenen Datei: doppelt definiert, dafuer nicht vom Netz abhaengig.
Gleicher Rumpf wie Tailwind, damit sich die beiden nicht widersprechen. */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
.dgfe-rule-left.kopf-ohne-titel{ display:flex; align-items:baseline; flex-wrap:wrap;
column-gap:.625rem; row-gap:2px; min-width:0; }
.dgfe-rule-left.kopf-ohne-titel > .page-subtitle{ margin-top:0; }
/* Der Schnellzugriff auf Kunde-Detail behaelt eine eigene Zeile, sonst reihte
er sich in die neue Titelzeile ein. */
.dgfe-rule-left:has(.page-title) > .kd-hdr-qa{ flex-basis:100%; margin-top:6px; }
.page-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }
/* Werkzeugzeile auf das schmalere 32er Knopfmass, vorher 38. Auf Seiten mit
Werkzeugzeile setzte die Knopfreihe bisher die Mindesthoehe des Kopfes. */
.page-actions .btn{ padding:.3125rem .75rem; font-size:.8125rem; }
.page-actions .segmented-item{ padding:.1875rem .75rem; }
/* ----------------------------------------------------------------------------
§4.13b SEITENKOPF — platzsparend beim Lesen, da auf Zuruf (2026-08-05)
----------------------------------------------------------------------------
Bis hierher scrollte der Kopf wie jeder andere Block einfach weg. Das kostet
keinen Platz, macht ihn aber unerreichbar: wer weit unten in einer Liste
steht und den Umschalter oder "Kunde anlegen" braucht, muss die ganze Seite
hochscrollen und danach die Stelle wiederfinden. Ein fest stehender Kopf
waere die andere Haelfte des Problems: er kostet auf jeder Seite dauerhaft
seine Hoehe, auf Kunde-Detail sind das 144 px.
Deshalb beides: der Kopf KLEBT (position:sticky), klappt aber beim Lesen
nach unten von selbst weg und kommt beim Scrollen nach oben, bei Mauskontakt
am oberen Rand oder bei Tastatur-Fokus zurueck. Wer ihn dauerhaft will,
klemmt ihn fest — html.et-kopf-fest, gespeichert pro Mensch
(app/services/kopf_service.py).
Warum das nichts verschiebt: der Kopf behaelt seinen Platz im Fluss, exakt
wie vorher. Sticky verschiebt nur die Anzeige, das Einklappen ist ein
transform — der Inhalt darunter bewegt sich in keinem der beiden Faelle,
die Seite kann also nicht huepfen.
Alles haengt an html.et-kopf-an. Die Klasse setzt ein Schnipsel im ,
es gibt sie also nur mit Skript. Ohne Skript bliebe der Kopf eingeklappt und
niemand koennte ihn zurueckholen; ohne die Klasse ist er unveraendert.
Zusaetzlich .et-shell davor: ausserhalb der App-Huelle (Anmeldeseite) gibt
es weder Kopfzeile noch etwas, woran der Kopf kleben koennte. */
html.et-kopf-an .et-shell .page-head{
position:sticky; top:var(--et-kopf-top,53px); z-index:15;
transition:transform .18s cubic-bezier(.2,.6,.2,1), opacity .18s cubic-bezier(.2,.6,.2,1);
}
/* Die Flaeche hinter dem Kopf. Sie liegt BEWUSST nur in einem Pseudo-Element
und nicht als Polster am Kopf selbst: jedes padding und jeder Aussenabstand
hier wuerde den Fluss veraendern und damit alle 67 Seiten um ein paar Pixel
verschieben. So bleibt der Kopf millimetergenau da, wo er vorher stand, und
nur seine Unterlage ist groesser als er.
- oben 8 px darueber hinaus: der Streifen verschwindet hinter der
Kopfzeile (die ist deckend und liegt mit z-index:20 davor)
- seitlich um den Seitenrand hinaus: sonst schiene der durchlaufende
Inhalt links und rechts am Kopf vorbei
- unten 4 px, damit die Trennlinie Luft zum Inhalt hat
z-index:-1 legt sie hinter den Text des Kopfes, aber vor die Seite. */
html.et-kopf-an .et-shell .page-head::after{
content:""; position:absolute; z-index:-1; pointer-events:none;
inset:calc(var(--sp-2) * -1) calc(var(--et-gutter,26px) * -1) calc(var(--sp-1) * -1);
background:var(--et-bg,#f6f7f9);
border-bottom:1px solid transparent;
transition:border-color .18s cubic-bezier(.2,.6,.2,1);
}
/* Losgeloest = der Kopf schwebt ueber dem Inhalt. Erst dann eine Trennlinie;
im Ruhezustand waere sie ein Strich, der vorher nicht da war. */
html.et-kopf-an .et-shell .page-head[data-kopf-los="1"]::after{
border-bottom-color:var(--et-line,#e9ebef);
}
/* Eingeklappt: hinter die Kopfzeile schieben (die ist deckend und liegt mit
z-index:20 darueber). pointer-events aus, damit der weggeklappte Kopf keine
Klicks abfaengt, die dem Inhalt gelten. */
html.et-kopf-an:not(.et-kopf-fest) .et-shell .page-head[data-kopf-zu="1"]{
transform:translateY(calc(-100% - 12px)); opacity:0; pointer-events:none;
}
/* Festgeklemmt: nie einklappen, egal was der Zustand sagt. */
html.et-kopf-fest .et-shell .page-head{ transform:none; opacity:1; pointer-events:auto; }
/* Starr: diese Seite will einen ganz normalen Kopf, der mit dem Inhalt nach
oben wegscrollt. Stef am 08.09.2026 fuer die Kundenakte: „der Kundenkopf
soll starr normal sein, nicht verschwinden wenn man runterscrollt."
⚠ ES IST DIE WEGNAHME DES GANZEN VERFAHRENS, nicht sein dritter Zustand:
kein ``sticky``, kein Einklappen, keine Unterlage dahinter. Der Kopf ist
wieder ein Block wie jeder andere, also auch keiner, der etwas ueberdeckt.
⚠ DIESE REGEL IST NUR DIE HAELFTE. Die andere steht in dgfe-crm.js: eine
so markierte Seite laesst das Skript vollstaendig in Ruhe -- kein
Festklemm-Knopf, keine Zustands-Marken, keine gemeldete Hoehe. Ohne sie
liefe ein Skript weiter, dessen Marken niemand mehr liest.
⚠ ``[data-kopf-starr]`` STEHT AN GENAU EINER SEITE (kunde_dashboard.html).
Die uebrigen behalten den klebenden Kopf; gemessen und beauftragt war die
Akte. */
html.et-kopf-an .et-shell .page-head[data-kopf-starr]{
position:static; top:auto; z-index:auto;
transform:none; opacity:1; pointer-events:auto;
}
html.et-kopf-an .et-shell .page-head[data-kopf-starr]::after{ content:none; }
/* Der Schalter. Klein und ruhig, erst beim Daraufzeigen blau — er soll die
Werkzeugzeile nicht ueberreden. margin-left:auto haelt ihn am rechten Rand,
in der Zeilen- wie in der gestapelten Anordnung des Kopfes. */
.et-kopf-pin{
flex:0 0 auto; align-self:center; margin-left:auto;
width:26px; height:26px; padding:0; display:inline-grid; place-items:center;
border:1px solid transparent; border-radius:8px; background:transparent;
color:var(--et-muted,#6b7280); cursor:pointer; font-family:inherit; line-height:0;
transition:background-color .12s, color .12s, border-color .12s;
}
/* Lose liegt die Nadel schraeg, festgeklemmt steht sie. Ein Zustand, den man
sieht, ohne die Beschriftung lesen zu muessen. */
.et-kopf-pin svg{ width:15px; height:15px; display:block; transform:rotate(-40deg);
transition:transform .18s cubic-bezier(.2,.6,.2,1); }
.et-kopf-pin:hover{ background:var(--et-primary-soft,#EAF1FA); color:var(--et-primary,#0C4DA2); }
.et-kopf-pin:focus-visible{ outline:2px solid var(--et-primary,#0C4DA2); outline-offset:1px; }
.et-kopf-pin[aria-pressed="true"]{
background:var(--et-primary-soft,#EAF1FA); color:var(--et-primary,#0C4DA2);
border-color:var(--et-primary-soft,#EAF1FA);
}
.et-kopf-pin[aria-pressed="true"] svg{ transform:none; }
/* Wer weniger Bewegung eingestellt hat, bekommt keine: der Kopf ist dann
entweder da oder nicht, ohne Gleiten. Das Verhalten bleibt dasselbe. */
@media (prefers-reduced-motion: reduce){
html.et-kopf-an .et-shell .page-head,
html.et-kopf-an .et-shell .page-head::after,
.et-kopf-pin, .et-kopf-pin svg{ transition:none; }
}
/* ============================================================================
§6.4 TRANSITIONS & MIKRO-INTERAKTIONEN (<=150ms, ease-out)
============================================================================ */
.htmx-indicator{ opacity:0; transition:opacity var(--dgfe-t-base) var(--dgfe-ease); }
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{ opacity:1; }
.dgfe-swap-target.htmx-request{ opacity:.6; pointer-events:none; transition:opacity var(--dgfe-t-fast) var(--dgfe-ease); }
.dgfe-progress{ position:relative; }
.dgfe-progress.htmx-request::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
background:linear-gradient(90deg,transparent,var(--dgfe-gold),transparent); background-size:40% 100%;
animation:dgfe-bar 900ms linear infinite; }
@keyframes dgfe-bar{ 0%{background-position:-40% 0;} 100%{background-position:140% 0;} }
@keyframes dgfe-flash{ from{background-color:var(--dgfe-flash);} to{background-color:transparent;} }
.dgfe-flash{ animation:dgfe-flash 600ms var(--dgfe-ease); }
@keyframes dgfe-enter{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.dgfe-enter{ animation:dgfe-enter var(--dgfe-t-base) var(--dgfe-ease) both; }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }
/* ============================================================================
§7 WELCOME-TOUR (#dgfe-tour-root — eigene Vanilla-Engine, dgfe-tour.js)
Energy-Sales-Look: Primaerblau #0C4DA2, ruhige Flaechen, klarer Fortschritt.
Self-contained: das Tour-Root haengt am document.body (ausserhalb .et-scope),
daher eigene Blau-Variablen statt Scope-Tokens.
============================================================================ */
#dgfe-tour-root{ position:fixed; inset:0; z-index:var(--z-overlay); pointer-events:none;
--et-tour-blue:#0C4DA2; --et-tour-blue-dark:#0A3F86; }
.dgfe-tour-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.55);
pointer-events:auto; animation:dgfe-tour-fade var(--dgfe-t-base) var(--dgfe-ease); }
.dgfe-tour-spot{ position:fixed; border-radius:10px;
box-shadow:0 0 0 9999px rgba(15,23,42,.55), 0 0 0 3px #fff, 0 0 0 5px var(--et-tour-blue);
background:transparent; pointer-events:none; z-index:1;
transition:top var(--dgfe-t-base) var(--dgfe-ease), left var(--dgfe-t-base) var(--dgfe-ease),
width var(--dgfe-t-base) var(--dgfe-ease), height var(--dgfe-t-base) var(--dgfe-ease); }
.dgfe-tour-pop{ position:fixed; z-index:2; width:min(360px, calc(100vw - 16px));
pointer-events:auto; background:var(--c-surface); color:var(--c-ink-soft);
border:1px solid var(--c-line); border-top:3px solid var(--et-tour-blue);
border-radius:12px; box-shadow:0 18px 48px rgba(15,23,42,.20), 0 6px 16px rgba(15,23,42,.10);
padding:16px 18px 14px;
font-family:var(--font-sans); font-size:var(--fs-sm); line-height:var(--lh-sm);
animation:dgfe-tour-pop-in var(--dgfe-t-base) var(--dgfe-ease) both;
transition:top var(--dgfe-t-base) var(--dgfe-ease), left var(--dgfe-t-base) var(--dgfe-ease); }
.dgfe-tour-x{ position:absolute; top:8px; right:10px; border:0; background:transparent;
color:var(--c-faint); font-size:18px; line-height:1; cursor:pointer; padding:2px; border-radius:6px; }
.dgfe-tour-x:hover{ color:var(--c-ink); background:var(--c-line-soft); }
.dgfe-tour-step{ font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-label);
font-weight:700; color:var(--et-tour-blue); margin:0 0 6px; }
.dgfe-tour-track{ height:4px; border-radius:999px; background:#e2e8f0; overflow:hidden; margin:0 0 12px; }
.dgfe-tour-bar{ display:block; height:100%; width:0; border-radius:999px;
background:var(--et-tour-blue); transition:width var(--dgfe-t-base) var(--dgfe-ease); }
.dgfe-tour-title{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3);
line-height:var(--lh-h3); color:var(--dgfe-n-900); margin:0 0 6px; }
.dgfe-tour-body{ margin:0 0 16px; color:var(--c-ink-soft); }
.dgfe-tour-actions{ display:flex; align-items:center; gap:8px; }
.dgfe-tour-spacer{ flex:1; }
.dgfe-tour-skip{ border:0; background:transparent; color:var(--c-muted);
font-size:var(--fs-sm); cursor:pointer; padding:6px 8px; border-radius:6px; }
.dgfe-tour-skip:hover{ color:var(--c-ink); background:var(--c-line-soft); }
.dgfe-tour-back,.dgfe-tour-next{ font:inherit; font-weight:600; font-size:var(--fs-sm);
cursor:pointer; border-radius:8px; padding:7px 14px; border:1px solid transparent;
transition:background-color .12s, border-color .12s, color .12s, box-shadow .12s; }
.dgfe-tour-back{ background:#fff; color:#334155; border-color:#cbd5e1; }
.dgfe-tour-back:hover{ background:#f1f5f9; border-color:#94a3b8; }
.dgfe-tour-next{ background:var(--et-tour-blue); color:#fff; box-shadow:0 1px 2px rgba(37,99,235,.35); }
.dgfe-tour-next:hover{ background:var(--et-tour-blue-dark); }
.dgfe-tour-next:active{ transform:translateY(.5px); box-shadow:none; }
.dgfe-tour-dismiss:hover{ color:var(--et-tour-blue) !important; }
@keyframes dgfe-tour-fade{ from{opacity:0;} to{opacity:1;} }
@keyframes dgfe-tour-pop-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
/* ===== Help-Popover (Block D, 2026-07-24) ==============================
Tap/Klick/Hover/Fokus-Tooltip statt hover-only title. Der generische
"?"-Trigger .help-pop traegt sinnvolle Defaults; bestehende Layout-Klassen
(.komm-tabhelp / .lw-help) bleiben zusaetzlich gesetzt und gewinnen bei
Kollisionen (gleiche/hoehere Spezifitaet, spaeter geladen). ===== */
.help-pop{ box-sizing:border-box; display:inline-flex; align-items:center;
justify-content:center; width:16px; height:16px; padding:0;
border:1px solid var(--n-300, #d4d4d8); border-radius:999px;
background:transparent; color:var(--n-500, #71717a);
font-size:11px; line-height:1; font-weight:700; cursor:help;
vertical-align:middle; user-select:none; -webkit-user-select:none; }
.help-pop:hover, .help-pop:focus-visible{
border-color:var(--et-primary, #0C4DA2); color:var(--et-primary, #0C4DA2); }
.help-pop:focus-visible{ outline:2px solid var(--et-primary, #0C4DA2);
outline-offset:1px; }
/* Die Blase selbst — an gehaengt, absolut positioniert (JS setzt
left/top inkl. Scroll-Offset), ueber Modal-/Toast-Ebene. pointer-events:none
-> stoert weder Outside-Click noch das Hover-Schliessen. */
.dgfe-help-bubble{ position:absolute; z-index:100000;
max-width:min(280px, calc(100vw - 24px));
background:#ffffff; color:var(--n-800, #27272a);
border:1px solid var(--n-200, #e5e7eb); border-radius:8px;
padding:8px 11px; font-size:12.5px; line-height:1.45; font-weight:500;
box-shadow:0 8px 24px rgba(15, 23, 42, .14); pointer-events:none; }
.dgfe-help-bubble[hidden]{ display:none; }
/* ============================================================================
§8 GELDBAND (.pv-* — Provisions-Uebersicht)
Ein Band ueber die volle Breite statt vier Karten: die fuenf Zustaende aus
analytics.geld_verteilung() als Segmente, zusammen 100 % des erwarteten Soll.
Die Farben sind bewusst KEINE fuenf bunten Marker, sondern eine Rampe aus
EINER Hausfarbe plus zwei Rollen. Von links (fertig) nach rechts (noch nicht da):
Ausgezahlt Navy das Tragende, am weitesten
Freigegeben, im Lauf Blau in Bewegung
Firmen-Marge Neutral-600 unser Anteil, kein Partnergeld
Eingang unverteilt Blau hell Geld ohne Empfaenger
Soll ohne Geld Neutral-300 noch gar nicht da
Blau-Familie = Geld, das an Partner geht. Grau = unseres. Hellgrau = nicht da.
Gelb kommt im Band NICHT vor, obwohl „was bei uns bleibt" der naheliegende
Markenakzent waere. Grund: dieselbe Firmen-Marge steckt in der Anteils-Karte
darunter in einem Balken mit weisser Beschriftung, und weisse Schrift auf
Gelb ist unlesbar. Zwei Farben fuer einen Zustand auf einer Seite waeren
schlimmer als ein fehlender Akzent. Der eine Gelb-Einsatz ist deshalb die
Marke „wartet auf GSP" unten, und dort steht Navy darauf.
Alle Werte kommen aus den Tokens oben; hier steht kein Hexwert, und im Markup
steht keiner mehr. Beschriftet wird ausschliesslich in der Legende (dunkle
Schrift auf Weiss), auf dem Band selbst steht kein Text: ein Segment kann
beliebig schmal werden.
============================================================================ */
.pv-band{ display:flex; width:100%; height:36px; overflow:hidden;
border-radius:var(--r-sm, 6px); background:var(--dgfe-n-100, #EFEFF1); }
.pv-seg{ display:block; height:100%; min-width:3px; }
/* Der Legendenpunkt traegt dieselbe Farbklasse wie sein Segment — eine Quelle,
damit Band und Legende nicht auseinanderlaufen koennen. */
.pv-punkt{ display:inline-block; width:10px; height:10px; border-radius:3px;
flex:0 0 auto; }
.pv-farbe-ausgezahlt{ background:var(--dgfe-navy); }
.pv-farbe-im_lauf{ background:var(--dgfe-blau); }
.pv-farbe-firma{ background:var(--dgfe-n-600, #52525B); }
.pv-farbe-unverteilt{ background:var(--dgfe-blau-hell); }
.pv-farbe-ohne_geld{ background:var(--dgfe-n-300, #D4D4D8); }
/* „An Partner" in der Anteils-Karte: dasselbe Blau wie im Band. Vorher standen
beide Punkte als style="background:#0C4DA2" bzw. #64748b im Markup. Der
Balken derselben Karte bekommt dieselben Tokens uebergeben, damit Punkt und
Balken eines Zustands nicht auseinanderlaufen. */
.pv-farbe-partner{ background:var(--dgfe-blau); }
/* Die Marke „wartet auf GSP" in der Aufgabenliste: der einzige Gelb-Einsatz der
Seite, und der einzige Ort, an dem Gelb Schrift traegt. Navy auf Gelb, 11,29:1.
Sie steht genau dort, wo kein Knopf steht — die Aufgabe, die uns nicht gehoert. */
.pv-marke-warten{ display:inline-flex; align-items:center; gap:6px;
padding:3px 9px; border-radius:999px; white-space:nowrap;
background:var(--dgfe-gelb); color:var(--dgfe-navy);
font-size:11.5px; font-weight:700; letter-spacing:.01em; }
/* ============================================================================
Auswahl-Modus der Kundenliste (09.09.2026)
Stef: „Kaestchen ausblenden, und wenn man das Bulk-Kaestchen im Kopf
drueckt, werden die Kaesten eingeblendet."
⚠ VISIBILITY UND NICHT DISPLAY. ``display:none`` nimmt die Zelle aus dem
Umbruch, und die ganze Tabelle rutscht beim Einschalten um eine Spaltenbreite
zur Seite -- die Zeile, auf die jemand gerade zielt, ist dann eine andere.
``visibility:hidden`` laesst den Platz stehen und nimmt das Kaestchen
zugleich aus der Tastatur-Reihenfolge.
========================================================================= */
.bulk-schalter{ background:none; border:none; padding:0; cursor:pointer;
font-size:15px; line-height:1; color:var(--c-ink-soft, #71717A); }
.bulk-schalter:hover{ color:var(--dgfe-gold, #B8975F); }
.bulk-schalter:focus-visible{ outline:2px solid var(--dgfe-gold, #B8975F); outline-offset:2px; }
/* AUS: der Schalter steht da, die Kaestchen nicht. */
body:not([data-auswahl]) #bulk-select-all{ display:none; }
body:not([data-auswahl]) .bulk-zelle > input{ visibility:hidden; }
/* AN: das echte Alle-Kaestchen uebernimmt den Platz des Schalters. */
body[data-auswahl] #bulk-an{ display:none; }
/* Das Kreuz ist der Rueckweg und gibt es nur im eingeschalteten Zustand. */
.bulk-aus{ display:none; margin-left:2px; font-size:13px; }
body[data-auswahl] .bulk-aus{ display:inline; }
/* --- Offene Punkte: Hover statt Klick (09.09.2026) ----------------------
Stef: „diese ,x offen' soll als hover sein nicht das man klickt und das
dann sieht."
⚠ ES IST EIN PANEL UND KEIN ``title``-TOOLTIP. In den offenen Punkten
stehen Verweise in die Akte und die Abschluss-Marke mit einer eigenen
Form. Ein Tooltip haette den Text gezeigt und die Handlungen genommen.
⚠ ``padding-top`` IST DIE BRUECKE. Ohne sie liegt zwischen Knopf und
Panel eine Luecke; der Mauszeiger faellt auf dem Weg hindurch, ``:hover``
endet, und das Panel schliesst sich unter dem Zeiger weg. Das Polster
gehoert an das Panel und nicht als ``margin`` dazwischen -- ein Abstand
ausserhalb des Elements traegt kein ``:hover``.
⚠ ``:focus-within`` IST NICHT KOSMETIK. Ohne die Zeile ist der Inhalt
fuer jeden unerreichbar, der mit der Tastatur arbeitet: der Knopf laesst
sich anspringen, aber nichts geschieht. */
.offen-hover{ position:relative; display:inline-flex; }
.offen-hover > .offen-pop{
position:absolute; top:100%; left:0; z-index:40;
padding-top:4px; display:none;
}
.offen-hover:hover > .offen-pop,
.offen-hover:focus-within > .offen-pop{ display:block; }
/* Beim Tabben soll das Panel dort bleiben, wo der Fokus ist. */
.offen-hover:focus-within > .offen-pop{ display:block; }
@media (prefers-reduced-motion: reduce){ .offen-hover > .offen-pop{ transition:none; } }
/* Bestandsleute (mitarbeiter/bestand.html): Auswahl-Haken je Zeile. Die
Klasse ist der Griff fuer "alle waehlen" (querySelectorAll(.bk-pick)).
Eine echte Regel statt eines Eintrags in der Ausnahmeliste von
tests/test_tailwind_vollstaendig.py: die Seite rendert die Haken nur mit
Bestandsdaten, und die Ausnahmeliste verlangt, dass jede eingetragene
Klasse in JEDEM Lauf auftaucht (Lauf 36429227800 rot, 0d68a0d2 gruen). */
.bk-pick { cursor: pointer; }
/* Zaehlerformular „Aus Rechnung füllen“ (28.09.2026): Ergebniszeile und die
Felder, die das Lesen eingetragen hat (dgfe-crm.js, dgfe:formular-fuellen).
Die Markierung zeigt vor dem Speichern, was nicht getippt wurde. */
.zf-aus-dok-ergebnis { min-height: 1rem; }
.zf-aus-dok { background-color: rgb(254 252 232); }
/* Dokument-Upload: Zaehler mehrfach waehlen (30.09.2026). */
.dok-zwahl { border: 0; padding: 0; margin: 0; min-width: 0; }
.dok-zwahl-liste { display: flex; flex-direction: column; gap: .125rem; max-height: 12rem; overflow-y: auto;
border: 1px solid rgb(231 229 228); border-radius: .5rem; padding: .25rem; }
.dok-zwahl-opt { display: flex; align-items: center; gap: .5rem; padding: .25rem .375rem; border-radius: .375rem;
font-size: .8125rem; cursor: pointer; min-width: 0; }
.dok-zwahl-opt:hover { background: rgb(245 245 244); }
.dok-zwahl-alle { font-weight: 600; border-bottom: 1px solid rgb(231 229 228); border-radius: .375rem .375rem 0 0; }
.dok-zwahl-nr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zaehlerliste: Rechnungen ohne Zaehler, eine schlichte Zeile (30.09.2026). */
.zl-roz { margin-bottom: .5rem; font-size: .75rem; color: rgb(120 113 108); }
.zl-roz[hidden] { display: none; }
.zl-roz-kopf { display: flex; align-items: center; gap: .375rem; cursor: pointer; list-style: none;
padding: .125rem .25rem; border-radius: .375rem; width: fit-content; max-width: 100%; }
.zl-roz-kopf::-webkit-details-marker { display: none; }
.zl-roz-kopf:hover { color: rgb(68 64 60); background: rgb(245 245 244); }
.zl-roz-auf { text-decoration: underline; text-underline-offset: 2px; }
.zl-roz[open] .zl-roz-auf { display: none; }
.zl-roz-weg { border: 0; background: none; color: inherit; cursor: pointer; font-size: .9375rem; line-height: 1;
padding: 0 .25rem; border-radius: .25rem; }
.zl-roz-weg:hover { color: rgb(41 37 36); background: rgb(231 229 228); }
.zl-roz-liste { margin: .25rem 0 0 1.125rem; padding-left: .5rem; border-left: 2px solid rgb(231 229 228); }
.zl-roz-zeile { display: flex; align-items: center; gap: .5rem; padding: .125rem 0; min-width: 0; }
.zl-roz-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: rgb(68 64 60); }
.zl-roz-quelle { font-size: .6875rem; color: rgb(168 162 158); }
.zl-roz-lesen { flex-shrink: 0; border: 0; background: none; padding: 0; cursor: pointer; font-size: .75rem;
font-weight: 600; color: rgb(68 64 60); text-decoration: underline; text-underline-offset: 2px; }
.zl-roz-lesen:hover { color: rgb(28 25 23); }
.zl-roz-rest { padding-top: .125rem; }