/** * nachlauf.css — nur Nachlauf-Spezifika (v0.1.0, #645 T2) * * Alle generischen Listen-Patterns (Layout, Hover, Empty, Loading, * Load-More, Pillen-Geometrie, Entscheidungs-Pille, Öffnen-Pille, * Sortier-Indikatoren, Save-Animation, Zahlen-Zelle, Action-Zelle, * Karten-Modus) kommen aus: * - _shared/functions/list-view/grid-css/idf-list-grid.css * - _shared/functions/inline-editing/idf-inline-edit.css * * Hier bleiben ausschließlich: * - Spaltenbreiten (.nl-grid) * - Zell-Anker (.nl-cell-* für Inline-Edit-hostSel + Responsive-Hide) * - die zwei Farbaussagen der Zahlen-Spalten * - Responsive */ /* ================================================================ */ /* Grid: Spaltenbreiten */ /* ================================================================ */ /* Spalten: Abrechnen · Nicht abrechnen · Nummer · Titel (1fr) · Kunde · Leistung · Erledigt am · Geplant · Gebucht · Differenz. Konvention: EINE 1fr-Spalte (Titel) nimmt den Restplatz, alle anderen sind fix. Die beiden Entscheidungs-Pillen stehen vorn, wie der Erledigt-Check in den Aufgaben. Am Zeilenende steht KEINE Öffnen-Pille: das Aufgaben-Fenster geht an Ort und Stelle auf, dafür genügt der Doppelklick. Eine Öffnen-Pille gibt es nur, wenn der Klick auf eine andere Seite navigiert. */ .nl-grid { display: grid; /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */ grid-template-columns: var(--nl-cols, 44px /* Freigeben (Haken) */ 44px /* Im Vertrags-Budget */ 44px /* Nicht abrechnen (Kreuz) */ 110px /* Nummer (AG-Nummer) */ minmax(220px, 1fr) /* Titel — wächst */ 150px /* Kunde */ 160px /* Leistung */ 120px /* Erledigt am */ 100px /* Geplant (Std.) */ 100px /* Gebucht (Std.) */ 110px /* Differenz (Std.) */ 110px /* Budget-Rest (Std.) */ 44px /* Löschen (Issue 968) */ ); align-items: stretch; gap: 0; } /* Seite „Abrechnen": derselbe Mittelblock, andere Klammer. Vorn Zustand und Rückweg statt der zwei Entscheidungen, hinten die Rechnungsnummer. */ .nla-grid { display: grid; grid-template-columns: var(--nla-cols, 44px /* Zustand (klicken zum Ändern) */ 44px /* Ist abgerechnet */ 44px /* Zurück in den Nachlauf */ 110px /* Nummer */ minmax(200px, 1fr) /* Titel — wächst */ 150px /* Kunde */ 160px /* Leistung */ 120px /* Erledigt am */ 100px /* Geplant (Std.) */ 100px /* Gebucht (Std.) */ 110px /* Differenz (Std.) */ 110px /* Budget-Rest (Std.) */ 130px /* Rechnung */ ); align-items: stretch; gap: 0; } /* M2O-Zellen dürfen während des Edits aufmachen, damit ein Combobox-Popup nicht abgeschnitten wird (is-editing setzt der Cell-Dispatcher). */ .idf-list-rows .idf-list-row .nl-grid > div.is-editing, .idf-list-rows .idf-list-row .nla-grid > div.is-editing { overflow: visible; } /* Pen + Inhalt mit einheitlichem Abstand, falls die Zelle direkt Host ist. */ .idf-list-rows .idf-list-row .nl-grid .idf-inline-edit-host, .idf-list-rows .idf-list-row .nla-grid .idf-inline-edit-host { gap: 8px; } /* ================================================================ */ /* Zahlen-Spalten: die zwei Aussagen */ /* ================================================================ */ /* Ausrichtung, Tabellenziffern und die Stift-Position bringt die Shared- Klasse .idf-list-cell-num mit; hier steht nur, was Farbe bedeutet. */ /* Überzug: mehr gebucht als geplant. Gefärbt wird NUR das Problem — unter Plan ist der Normalfall und bliebe sonst als Dauer-Grün stehen, das niemand mehr liest. Primary ist die Aufmerksamkeitsfarbe des Systems (dieselbe wie bei überfälligen Terminen), nicht ein zweites Rot. */ .nl-diff.is-ueber { color: var(--primary, #c8134b); font-weight: 600; } /* Aufgabe mit ausgeschalteter Zeiterfassung: der Strich ist kein fehlender Wert, sondern eine bewusste Einstellung. Er tritt deshalb zurück und erklärt sich im Tooltip, statt wie eine Lücke auszusehen. */ .nl-ohne-zeit { color: var(--soft, #999999); } /* Kunde ohne Budget-Vertrag: derselbe zurückgenommene Strich, aus demselben Grund — hier fehlt nichts, es gibt schlicht kein Kontingent. */ .nl-kein-budget { color: var(--soft, #999999); } /* Kontingent überzogen: mehr ins Budget gebucht, als der Monat hergibt. Wieder nur das Problem gefärbt; ein Rest über null bleibt ruhig. */ .nl-budget.is-leer { color: var(--primary, #c8134b); font-weight: 600; } /* Seit Issue 977 zehrt jede Buchung das Kontingent IHRES Monats, eine Aufgabe kann also zwei Töpfe berühren. Dann steht je Monat eine Zeile in der Zelle, untereinander und rechtsbündig wie jede Zahl. Das Monatskürzel davor ist Meta (Token font-xs2, Farbe mid); die Zahl bleibt Inhalt. */ .nl-budget-stapel { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; } .nl-budget-monat { font-size: var(--font-xs2); color: var(--mid); } /* ================================================================ */ /* Die Budget-Pille */ /* ================================================================ */ /* Der dritte Ausgang trägt --accent und damit die kühle Verweis-Farbe des Systems: „das gehört woandershin" (in einen Vertrag), nicht „erledigt" (--confirm) und nicht „abgelehnt" (--mid). Geometrie und Ruhezustand kommen unverändert aus .idf-list-done-pill. */ .idf-list-done-pill.nl-pill-budget:hover { background: var(--accent, #167ea0); color: var(--white, #ffffff); } .idf-list-done-pill.is-static.nl-pill-budget, .idf-list-done-pill.is-static.nl-pill-budget:hover { background: var(--accent, #167ea0); color: var(--white, #ffffff); filter: none; } /* Aktiv gefuellt ebenfalls accent (Issue 946). Ohne diese Regel fiel die Budget-Pille mit `is-active` auf das confirm-Gruen des Shared-Standards zurueck - auf der Abrechnen-Seite sah der Budget-Zustand damit aus wie „abgerechnet". Dieselbe Klasse traegt jetzt auch die Offen-Seite, wenn die Aufgabe eine Budget-Vormerkung mitbringt. */ .idf-list-done-pill.nl-pill-budget.is-active, .idf-list-done-pill.nl-pill-budget.is-active:hover { background: var(--accent); color: var(--white); } /* Ohne Budget-Vertrag steht in der Zelle gar nichts. Die Spur bleibt trotzdem stehen (festes Grid), es springt also nichts - und eine Pille an jeder Zeile würde ein Angebot behaupten, das es dort nicht gibt (Joerg 22.08.2026). */ /* ================================================================ */ /* Zustands-Pillen der Abrechnen-Seite */ /* ================================================================ */ /* Jeder Zustand hat sein eigenes Zeichen UND seine eigene Farbe. Vorher trugen „zur Abrechnung" und „abgerechnet" beide einen Haken und unterschieden sich nur darin, ob man ihn drücken konnte — in einer Liste, die man überfliegt, ist das kein Unterschied. Die Pille ist immer ein Knopf: sie zeigt den Zustand und öffnet die Auswahl, in die er wechseln kann. Geometrie kommt aus `.idf-list-done-pill`, hier steht nur die Farbe. Rollen: wartet = zurückgenommen (es ist noch nichts passiert), Budget = accent (verweist woandershin), fertig = confirm (abgeschlossen), nicht abzurechnen = --mid über `.is-decline` aus dem Shared. */ .idf-list-done-pill.nl-pill-wartet.is-active, .idf-list-done-pill.nl-pill-wartet.is-active:hover { background: var(--neutral-bg); color: var(--mid, #555); } .idf-list-done-pill.nl-pill-fertig.is-active, .idf-list-done-pill.nl-pill-fertig.is-active:hover { background: var(--confirm, #0c998e); color: var(--white, #ffffff); } /* Alle vier reagieren auf Hover, weil alle vier anklickbar sind. */ .idf-list-done-pill[data-zustand]:hover { filter: brightness(1.06); } /* ================================================================ */ /* Rückfrage „Stimmen die Zeiten?" */ /* ================================================================ */ /* Body eines IDF.confirmModal. Der Buchungs-Block darunter kommt aus domain/zeiterfassung und bringt seine Optik mit; hier steht nur der Kopf darüber: worum es geht und die zwei Zahlen, die man vergleicht. */ /* Der Aufgabentitel ist der GEGENSTAND des Dialogs und steht deshalb eine Stufe unter dessen Titel, nicht auf Inhalts-Groesse (Issue 956). Zweiter Anlauf an derselben Stelle. v0.8.2 hatte ihn von --font-md (14 px) auf Erben (16 px) gehoben, mit dem Argument, den Rang trage das Gewicht. Das war die falsche Richtung: gemessen stand er damit immer noch KLEINER da als die Abschnitts-Ueberschrift „Geplante Zeiten" (--font-lg, 18 px) und genau so gross wie der erklaerende Satz daneben - er hatte gegen nichts einen Rang (Joerg, 01.09.2026: „steht die Aufgabe klein und der Rest gross. Man uebersieht die Aufgabe."). Jetzt faellt die Stufung im Dialog von oben nach unten, wie es die Token-Leiter vorgibt: 22 Dialog-Titel · 20 Aufgabe · 18 Abschnitt · 16 Inhalt · 12 Meta */ .nl-zeitcheck-titel { font-size: var(--font-xl); font-weight: 600; line-height: 1.25; color: var(--ink, #111); } .nl-zeitcheck-meta { color: var(--mid, #555); font-size: var(--font-xs2); margin-top: 2px; } /* Plan und Ist nebeneinander, nicht untereinander: verglichen wird quer, und ein Stapel würde zum Lesen zwingen statt zum Sehen. */ .nl-zeitcheck-zahlen { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 14px; color: var(--mid, #555); } .nl-zeitcheck-zahlen b { color: var(--ink, #111); font-variant-numeric: tabular-nums; } /* Ein Satz zwischen den Zahlen und dem Buchungs-Block: wozu das Formular darunter da ist. Zurückgenommen — er erklärt, er wirbt nicht. */ /* Ein Satz, den man liest, also keine Meta-Groesse: er erbt wie der uebrige Inhalt und ist nur in der Farbe zurueckgenommen. --font-xs2 gehoert Sublines und Kennungen, nicht Fliesstext (Joerg 25.08.2026). */ .nl-zeitcheck-hinweis { margin: 0 0 var(--space-3); color: var(--mid, #555); } /* Der Buchungs-Block darf hoch werden (viele Buchungen an einer Aufgabe), soll aber den Dialog nicht über den Schirm schieben. */ .nl-zeitcheck .ze-zeiten { max-height: 46vh; overflow-y: auto; } /* ================================================================ */ /* Responsive - Kanon 1100/600 */ /* ================================================================ */ @media (max-width: 1100px) { /* col-resize im Schmal-Layout inaktiv (Modul-Grid gewinnt hier): Griffe weg, Scroll-Modus neutralisieren, damit nichts verrutscht/überläuft. Gilt bewusst auch unter 600 (Karten-Modus) weiter. Der ID-Scope ist nötig, nicht Zierde: die Griff-Ebene ist ein Kind von `.idf-list-grid`, und die Shared-Basisregel `.idf-list-thead .idf-list-grid > div { display: flex }` liegt bei (0,3,1). Ein nacktes `.idf-colresize-layer { display: none }` (0,1,0) verliert dagegen — die Griffe blieben ziehbar und schrieben Breiten in `--nl-cols`, die die Media-Query darunter ohnehin überschreibt: ein Bedienelement, das sich anfassen lässt und nichts tut. Gemessen am 22.08.2026 bei 1024 px. */ #nl-thead .idf-colresize-layer, #nla-thead .idf-colresize-layer { display: none; } .idf-colresize-scroll .idf-list-thead, .idf-colresize-scroll .idf-list-rows { width: auto; min-width: 0; } } /* Enger Desktop: Nummer, Leistung und Differenz weg. Es bleiben die Entscheidungen, Titel, Kunde, Erledigt am, Geplant, Gebucht und der Budget-Rest — genau das, worüber hier entschieden wird. Neun sichtbare Zellen, neun Grid-Spuren. Die Differenz fällt zugunsten des Budget-Rests: Plan gegen Ist steht mit „Geplant" und „Gebucht" nebeneinander und lässt sich ablesen, der Budget-Rest dagegen ist gerechnet und sonst nirgends zu sehen. Die (min-width: 601px)-Klammer ist Pflicht: ohne sie fehlten die drei Spalten per display:none auch auf der Handy-Karte — dort entscheiden die data-m-Rollen (alle drei = beschriftete Meta). Spezifität: die Shared-Basisregel `.idf-list-rows .idf-list-row .idf-list-grid > div { display: flex }` liegt bei (0,3,1) — ein nacktes `.nl-cell-nr { display: none }` (0,1,0) verlöre dagegen, die Zellen flössen als zweite Grid-Zeile weiter mit. Darum Zeilen-Scope; die Kopfzellen laufen über ihr data-sort-Attribut bzw. ihre Klasse (ID-Scope). */ @media (max-width: 1100px) and (min-width: 601px) { .nl-grid { grid-template-columns: 44px /* Freigeben */ 44px /* Im Vertrags-Budget */ 44px /* Nicht abrechnen */ minmax(0, 1fr) /* Titel */ 150px /* Kunde */ 120px /* Erledigt am */ 100px /* Geplant */ 100px /* Gebucht */ 110px /* Budget-Rest */ 44px; /* Löschen (Issue 968) - bleibt auch hier: was man weglässt, ist die Zahl daneben, nicht die Handlung */ } /* Abrechnen: dieselbe Kürzung, aber die Rechnungsnummer bleibt — sie ist hier der Grund, warum man die Seite offen hat. Neun sichtbare Zellen. */ .nla-grid { grid-template-columns: 44px /* Zustand */ 44px /* Ist abgerechnet */ 44px /* Zurück */ minmax(0, 1fr) /* Titel */ 150px /* Kunde */ 120px /* Erledigt am */ 100px /* Geplant */ 100px /* Gebucht */ 110px /* Budget-Rest */ 130px; /* Rechnung */ } .idf-list-rows .idf-list-row .nl-grid > .nl-cell-nr, .idf-list-rows .idf-list-row .nl-grid > .nl-cell-leistung, .idf-list-rows .idf-list-row .nl-grid > .nl-cell-diff, .idf-list-rows .idf-list-row .nla-grid > .nl-cell-nr, .idf-list-rows .idf-list-row .nla-grid > .nl-cell-leistung, .idf-list-rows .idf-list-row .nla-grid > .nl-cell-diff, #nl-thead .nl-grid > [data-sort="nummer"], #nl-thead .nl-grid > [data-sort="leistung.leistung"], #nl-thead .nl-grid > .nl-head-diff, #nla-thead .nla-grid > [data-sort="nummer"], #nla-thead .nla-grid > [data-sort="leistung.leistung"], #nla-thead .nla-grid > .nl-head-diff { display: none; } }