/* Lohnfluss Mandanten-Portal — Design nach dem Lohnfluss-System (Teal/Petrol, IBM Plex). Werte 1:1 aus dem Design-System: Primär #0e7c86, Linie #dbe4e8, Radius 14px Karten / 8px Felder, genau zwei Schattenstufen, beide kühl. Keine Verläufe, keine Glasflächen. ⚠️ **Abstände kommen ab 22.08.2026 ausschließlich aus der Leiter** `--lf-raum-1 … -8` (4/8/12/16/24/32). Vorher standen im Portal drei Systeme nebeneinander — `rem`-Werte mit drei Stellen (0.65rem), runde Pixel (12px) und `clamp()` —, und dieselbe Karte hatte je nach Seite eine andere Innenluft. Genau das war der Befund „manche Stellen sehen gebastelt aus": nicht eine falsche Farbe, sondern vier verschiedene Abstände auf einem Bildschirm. Wer einen neuen Baustein ergänzt, nimmt einen Wert der Leiter. Ein Zwischenwert („18px, weil es hier besser passt") ist der Anfang des nächsten Durcheinanders. */ :root { --lf-primary: #0e7c86; --lf-primary-dark: #0a5960; --lf-primary-tint: #e6f4f5; --lf-accent: #f0a500; --lf-ink: #16212b; --lf-ink-2: #46555f; --lf-ink-3: #6b7a84; --lf-line: #dbe4e8; --lf-bg: #fff; --lf-bg-soft: #f6f9fa; --lf-bg-ink: #0f2830; --lf-ok: #1a8f52; --lf-warn: #b9770a; --lf-err: #b3261e; --lf-radius: 14px; --lf-radius-s: 8px; --lf-schatten: 0 6px 24px rgba(16,40,48,.08); --lf-schatten-hoch: 0 16px 48px rgba(16,40,48,.14); --lf-on-ink-2: #a9c2c7; /* Abstandsleiter — die EINZIGE Quelle für Abstände. */ --lf-raum-1: 4px; --lf-raum-2: 8px; --lf-raum-3: 12px; --lf-raum-4: 16px; --lf-raum-6: 24px; --lf-raum-8: 32px; /* Schriftskala. ⚠️ `--lf-schrift-eingabe` ist mit 16px eine Verhaltensgrenze, keine Geschmacksfrage: darunter zoomt iOS Safari beim Antippen eines Feldes hinein. */ --lf-schrift-xs: 0.78rem; --lf-schrift-s: 0.86rem; --lf-schrift-m: 0.95rem; --lf-schrift-body: 1.02rem; --lf-schrift-l: 1.15rem; --lf-schrift-xl: 1.4rem; --lf-schrift-2xl: 1.75rem; --lf-schrift-eingabe: 1rem; /* Innenluft der Karten — an EINER Stelle, damit sie überall gleich ist. */ --lf-karte-luft: var(--lf-raum-6); } * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; color: var(--lf-ink); background: var(--lf-bg-soft); font-size: var(--lf-schrift-body); line-height: 1.6; } h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; } h1 { font-size: var(--lf-schrift-xl); margin: 0; } h2 { font-size: var(--lf-schrift-l); margin: 0; } h3 { font-size: var(--lf-schrift-m); margin: 0; } a { color: var(--lf-primary-dark); text-decoration: none; } a:hover { text-decoration: underline; } .lf-dim { color: var(--lf-ink-3); font-size: var(--lf-schrift-s); } .lf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Senkrechte Stapel mit fester Lücke — statt `margin` an jedem Kind. Ein `gap` überlebt das Entfernen eines Kindes, eine Sammlung von Rändern nicht. */ .lf-stapel { display: flex; flex-direction: column; gap: var(--lf-raum-4); min-width: 0; } .lf-stapel--eng { gap: var(--lf-raum-2); } .lf-stapel--weit { gap: var(--lf-raum-6); } .lf-reihe { display: flex; gap: var(--lf-raum-2); align-items: center; flex-wrap: wrap; } /* Ein Wort, das nicht allein gelassen werden darf — die Beschriftung und ihr Fragezeichen. */ .lf-nowrap { white-space: nowrap; } /* ⚠️ Sicherheitsnetz für Seiten, die ihre Karten in einen namenlosen `div` legen (Bewegungsdaten tut das, um beim Monatswechsel nur diesen Teil zu tauschen). Der `gap` des Inhaltsbereichs greift dort nicht — die Karten kleben aneinander. Nur namenlose Behälter, damit Raster mit eigenem `gap` (lf-heute, lf-kacheln, lf-stapel) nicht doppelt Abstand bekommen. */ .lf-shell__inhalt > div:not([class]) > * + * { margin-top: var(--lf-raum-6); } /* ── Anmeldung ─────────────────────────────────────────────────────────── */ .lf-login { min-height: 100dvh; display: grid; place-items: center; padding: var(--lf-raum-6); } .lf-login__karte { background: var(--lf-bg); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); box-shadow: var(--lf-schatten); padding: var(--lf-raum-8); width: min(26rem, 100%); } .lf-login__karte h1 { font-size: var(--lf-schrift-l); margin: var(--lf-raum-2) 0 var(--lf-raum-6); } .lf-login__meldung { color: var(--lf-err); font-size: var(--lf-schrift-m); margin: var(--lf-raum-3) 0 0; } .lf-login__fuss { margin: var(--lf-raum-4) 0 0; font-size: var(--lf-schrift-s); } .lf-logo { font-weight: 800; letter-spacing: -0.02em; font-size: var(--lf-schrift-l); color: var(--lf-ink); } .lf-logo b { color: var(--lf-primary); font-weight: 800; } /* ── Rahmen ────────────────────────────────────────────────────────────── */ /* * ⚠️ DIE REGEL, an der diese Oberfläche zweimal gescheitert ist: `1fr` bedeutet * `minmax(auto, 1fr)` — sein MINIMUM ist die Inhaltsbreite. Eine Spalte mit `1fr` schrumpft * also NICHT unter ihren Inhalt, sondern schiebt die ganze Seite waagerecht auf. Dasselbe gilt * für Flex-Kinder, die ohne `min-width: 0` bei `auto` bleiben. * * Wirkung, gemessen am 09.08.2026 bei 534 px: die Seite war 831 px breit, also **297 px * Überlauf**. Deshalb steht `minmax(0, 1fr)` bzw. `min-width: 0` an JEDEM Glied der Kette vom * Seitenrahmen bis zur Tabelle. Wer ein neues Glied einzieht, muss es mitgeben. */ .lf-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; } .lf-shell__seite { background: var(--lf-bg-ink); color: var(--lf-on-ink-2); display: flex; flex-direction: column; padding-top: var(--lf-raum-4); position: sticky; top: 0; height: 100dvh; min-width: 0; overflow-y: auto; } .lf-shell__marke { padding: 0 var(--lf-raum-4) var(--lf-raum-4); } .lf-shell__seite .lf-logo { color: #fff; } .lf-nav { display: flex; flex-direction: column; min-width: 0; } /* Gruppentitel der Navigation. ⚠️ Die Gruppen sind der Kern des Bedienkonzepts: „Monatsroutine" und „Einrichtung" sind zwei verschiedene Arbeitsweisen, keine zwei Ordner. Wer sie in eine flache Liste legt (Stand bis 22.08.2026), bekommt neun gleichwertige Punkte, unter denen die Reihenfolge der Arbeit nicht mehr zu erkennen ist. */ .lf-nav__gruppe { padding: var(--lf-raum-4) var(--lf-raum-4) var(--lf-raum-1); font-size: var(--lf-schrift-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #7f9aa1; } .lf-nav__link { display: flex; align-items: center; gap: var(--lf-raum-2); padding: var(--lf-raum-2) var(--lf-raum-4); color: var(--lf-on-ink-2); font-weight: 600; font-size: var(--lf-schrift-m); min-height: 40px; } .lf-nav__link:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; } .lf-nav__link.is-aktiv { background: rgba(255,255,255,0.1); color: #fff; box-shadow: inset 3px 0 0 var(--lf-primary); } /* Zähler am Navigationspunkt (offene Posteingangs-Einträge, Entwürfe). ⚠️ Nur eine ZAHL, kein roter Punkt ohne Aussage: „3" sagt, wie viel Arbeit wartet, ein Punkt sagt „irgendwas". */ .lf-nav__zahl { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,0.14); color: #fff; font-size: var(--lf-schrift-xs); font-weight: 700; text-align: center; line-height: 20px; } .lf-nav__zahl--dringend { background: var(--lf-err); } .lf-shell__fuss { margin-top: auto; padding: var(--lf-raum-4); border-top: 1px solid rgba(255,255,255,0.1); } .lf-shell__benutzer { display: flex; flex-direction: column; margin-bottom: var(--lf-raum-2); font-size: var(--lf-schrift-s); } .lf-shell__benutzer strong { color: #fff; } .lf-shell__haupt { display: flex; flex-direction: column; min-width: 0; } /* Kopfzeile jeder Seite: Bereich (Einordnung) · Titel · Kontext · genau EINE primäre Aktion. ⚠️ Der Aktionsplatz ist ein leerer Behälter im Rahmen, den die Seite füllt (`kopfAktion()`). Vorher setzte jede Seite ihren Knopf irgendwo in den Inhalt — auf drei Seiten oben rechts, auf zwei unten, auf einer zweimal. Ein Anwender, der die Hauptaktion sucht, soll sie nicht suchen. */ .lf-shell__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lf-raum-4); background: var(--lf-bg); border-bottom: 1px solid var(--lf-line); padding: var(--lf-raum-4) var(--lf-raum-8); } .lf-shell__titelzeile { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lf-shell__bereich { font-size: var(--lf-schrift-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lf-ink-3); } .lf-shell__kontext { color: var(--lf-ink-3); font-size: var(--lf-schrift-s); } .lf-shell__kopfaktion { display: flex; gap: var(--lf-raum-2); align-items: center; flex: none; } .lf-shell__inhalt { padding: var(--lf-raum-6) var(--lf-raum-8) var(--lf-raum-8); display: flex; flex-direction: column; gap: var(--lf-raum-6); min-width: 0; } /* ── Karte ─────────────────────────────────────────────────────────────── */ .lf-karte { min-width: 0; background: var(--lf-bg); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); box-shadow: var(--lf-schatten); } /* Auf soft-Flächen und innerhalb anderer Karten: dieselbe Karte ohne Schatten. */ .lf-karte--flach { box-shadow: none; } .lf-karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--lf-raum-4); padding: var(--lf-raum-4) var(--lf-karte-luft); border-bottom: 1px solid var(--lf-line); } .lf-karte__kopf h2 { min-width: 0; } .lf-karte__unter { display: block; font-weight: 400; font-size: var(--lf-schrift-s); color: var(--lf-ink-3); } .lf-karte__inhalt { padding: var(--lf-karte-luft); } /* Die Karte hat GENAU EINE Innenluft. Ein erstes/letztes Kind darf keinen eigenen Rand mehr mitbringen, sonst addieren sich zwei Systeme. */ .lf-karte__inhalt > :first-child { margin-top: 0; } .lf-karte__inhalt > :last-child { margin-bottom: 0; } .lf-karte__fuss { display: flex; gap: var(--lf-raum-2); justify-content: flex-end; align-items: center; padding: var(--lf-raum-3) var(--lf-karte-luft); border-top: 1px solid var(--lf-line); background: var(--lf-bg-soft); border-radius: 0 0 var(--lf-radius) var(--lf-radius); } .lf-karte__fuss--links { justify-content: space-between; } /* ── Kacheln ───────────────────────────────────────────────────────────── */ .lf-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--lf-raum-4); } .lf-kachel { background: var(--lf-bg); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); box-shadow: var(--lf-schatten); padding: var(--lf-raum-4) var(--lf-raum-6); display: flex; flex-direction: column; gap: var(--lf-raum-1); } .lf-kachel__label { color: var(--lf-ink-3); font-size: var(--lf-schrift-s); } .lf-kachel__wert { font-size: var(--lf-schrift-2xl); font-weight: 800; line-height: 1.1; } .lf-kachel__wert--klein { font-size: var(--lf-schrift-l); font-weight: 700; } .lf-kachel__sub { color: var(--lf-ink-3); font-size: var(--lf-schrift-xs); } /* ── Tabelle ───────────────────────────────────────────────────────────── */ .lf-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; } .lf-table { width: 100%; border-collapse: collapse; font-size: var(--lf-schrift-m); } .lf-tabelle .lf-table { min-width: 32rem; } .lf-table th { text-align: left; color: var(--lf-ink-3); font-size: var(--lf-schrift-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: var(--lf-raum-2) var(--lf-raum-2); border-bottom: 1px solid var(--lf-line); } .lf-table td { padding: var(--lf-raum-3) var(--lf-raum-2); border-bottom: 1px solid var(--lf-line); } .lf-table tr:last-child td { border-bottom: 0; } .lf-table .r { text-align: right; font-variant-numeric: tabular-nums; } .lf-klickbar { cursor: pointer; } .lf-klickbar:hover, .lf-klickbar:focus-visible { background: var(--lf-primary-tint); outline: none; } /* Nebenspalten: sie tragen Nutzen, aber nicht den Überblick. ⚠️ Der Befund lautete „Tabellen teils überladen". Die Antwort ist NICHT, Spalten zu löschen — in einem Lohnprogramm braucht jede irgendwann jemand. Sie verschwinden ab mittlerer Breite aus der Liste und stehen vollständig im Detail-Auszug der Zeile (`zeilenAuszug` in ui.mjs). Eine Tabelle mit 14 Spalten ist auf keinem Bildschirm eine Übersicht. */ @media (max-width: 1180px) { .lf-table .lf-neben { display: none; } } /* ── Werteliste (Detail-Auszug) ────────────────────────────────────────── */ .lf-werte { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--lf-raum-1) var(--lf-raum-4); margin: 0; } .lf-werte dt { color: var(--lf-ink-3); font-size: var(--lf-schrift-s); } .lf-werte dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } @media (max-width: 640px) { .lf-werte { grid-template-columns: minmax(0, 1fr); gap: 0 0; } .lf-werte dd { margin-bottom: var(--lf-raum-3); } } /* ── Felder ────────────────────────────────────────────────────────────── */ .lf-feld { display: flex; flex-direction: column; gap: var(--lf-raum-1); margin-bottom: 0; min-width: 0; } /* ⚠️ Der Abstand zwischen Feldern kommt aus dem `gap` ihres Rasters — ein eigener Rand am Feld würde sich dazu addieren. Steht ein Feld AUSSERHALB eines Rasters (Anmeldung, ein Dialog ohne Raster), fehlte er dann aber ganz: die Felder klebten aneinander. Deshalb genau hier, und nur dort, wo kein Raster den Abstand schon setzt. */ *:not(.lf-formular__raster):not(.lf-gruppe__raster):not(.lf-zeile__felder) > .lf-feld + .lf-feld { margin-top: var(--lf-raum-4); } .lf-login__karte .lf-feld { margin-bottom: var(--lf-raum-4); } .lf-feld label { font-weight: 600; font-size: var(--lf-schrift-s); } .lf-feld input, .lf-feld select { font: inherit; font-size: 1rem; /* >= 16px: kein iOS-Zoom (Waechter layout_schrumpfkette) */ color: var(--lf-ink); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-s); padding: var(--lf-raum-2) var(--lf-raum-3); background: var(--lf-bg); min-width: 0; min-height: 42px; } .lf-feld input:focus, .lf-feld select:focus { outline: 2px solid var(--lf-primary); outline-offset: 1px; border-color: var(--lf-primary); } .lf-feld input[readonly] { background: var(--lf-bg-soft); color: var(--lf-ink-2); } .lf-feld--schalter { flex-direction: row; align-items: center; gap: var(--lf-raum-2); min-height: 42px; } .lf-feld--schalter input { width: 1.1rem; height: 1.1rem; min-height: 0; } .lf-feld--geld input, .lf-feld--zahl input { text-align: right; font-variant-numeric: tabular-nums; } .lf-feld__hilfe { margin: 0; color: var(--lf-ink-3); font-size: var(--lf-schrift-s); } .lf-feld__fehler { margin: 0; color: var(--lf-err); font-size: var(--lf-schrift-s); font-weight: 600; } .lf-feld.is-fehler input, .lf-feld.is-fehler select { border-color: var(--lf-err); } .lf-pflicht { color: var(--lf-err); } /* Formularraster: 12 Spalten, feste Lücke, Feldbreiten als Spannweite. ⚠️ Vorher: `repeat(auto-fit, minmax(15rem, 1fr))`. Das Raster entschied damit selbst, was nebeneinander landet — bei „Unternehmen" standen Firmenname, Bundesland, Straße und Hausnummer in EINER Reihe und PLZ/Ort in der nächsten. Genau der Befund der Geschäftsführung: die Feldbreite muss aus der BEDEUTUNG kommen (Hausnummer ist kurz, Firmenname lang), nicht aus dem Zufall der Fensterbreite. */ .lf-formular__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--lf-raum-4) var(--lf-raum-4); } .lf-formular__raster > .lf-feld { grid-column: span 6; } .lf-feld--sp2 { grid-column: span 2 !important; } .lf-feld--sp3 { grid-column: span 3 !important; } .lf-feld--sp4 { grid-column: span 4 !important; } .lf-feld--sp5 { grid-column: span 5 !important; } .lf-feld--sp6 { grid-column: span 6 !important; } .lf-feld--sp8 { grid-column: span 8 !important; } .lf-feld--sp9 { grid-column: span 9 !important; } .lf-feld--sp12 { grid-column: span 12 !important; } .lf-formular__fuss { margin-top: var(--lf-raum-4); display: flex; justify-content: flex-end; gap: var(--lf-raum-2); } /* Feldgruppe (z. B. der Adressblock). ⚠️ Eine Anschrift ist EIN Gedanke: Straße, Hausnummer, PLZ, Ort gehören sichtbar zusammen und nicht in die allgemeine Feldreihe. Als `fieldset` mit `legend`, damit ein Screenreader die Zusammengehörigkeit auch hört. */ .lf-gruppe { grid-column: span 12; margin: 0; padding: var(--lf-raum-4); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-s); background: var(--lf-bg-soft); min-width: 0; } .lf-gruppe > legend { padding: 0 var(--lf-raum-2); font-size: var(--lf-schrift-s); font-weight: 600; color: var(--lf-ink-2); } .lf-gruppe__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--lf-raum-3) var(--lf-raum-4); } .lf-gruppe .lf-feld input, .lf-gruppe .lf-feld select { background: var(--lf-bg); } .lf-gruppe--eng { grid-column: span 6; } /* Hilfe als Popover statt als Fließtext. ⚠️ Der Befund: „Erklärtexte statt Bedienung" — bei „Rechtsform" standen drei Zeilen Warntext VOR dem Feld, bei „Erstattungssatz U1" fünf Zeilen vor der ersten Auswahl. Ein Formular, das man lesen muss, bevor man es bedienen kann, ist im Regelfall falsch gebaut: der Regelfall braucht kein Wort, der Sonderfall braucht alles. Deshalb ein Fragezeichen am Feldnamen, das den Text auf Abruf zeigt — und ihn nicht wegnimmt. */ /* ⚠️ Die Beschriftungszeile ist ein BLOCK mit inline-Inhalt, keine Flexbox. Als Flexbox konnte eine lange Beschriftung („Finanzamtsnummer (BUFA)", „Tag des Insolvenzereignisses") nicht brechen und schob in die Nachbarspalte (gemessen bis 38 px Überlauf bei 880 px Fensterbreite); mit `flex-wrap` brach stattdessen der Hilfe-Knopf als Waise in die zweite Zeile. Inline gesetzt fließt das Fragezeichen hinter dem letzten Wort mit — wie eine Fußnote, die es ja auch ist. */ .lf-labelzeile { display: block; min-width: 0; } .lf-labelzeile label { display: inline; overflow-wrap: anywhere; } .lf-labelzeile .lf-hilfe { vertical-align: middle; margin-left: 2px; } .lf-hilfe { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--lf-ink-3); cursor: pointer; } .lf-hilfe:hover { background: var(--lf-primary-tint); color: var(--lf-primary-dark); } .lf-hilfe:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 1px; } .lf-hilfe[aria-expanded="true"] { background: var(--lf-primary-tint); color: var(--lf-primary-dark); } .lf-hilfe__box { position: absolute; z-index: 50; max-width: 26rem; width: max-content; padding: var(--lf-raum-3) var(--lf-raum-4); background: var(--lf-bg); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-s); box-shadow: var(--lf-schatten-hoch); font-size: var(--lf-schrift-s); line-height: 1.5; color: var(--lf-ink-2); } .lf-hilfe__box p { margin: 0 0 var(--lf-raum-2); } .lf-hilfe__box p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .lf-hilfe__box { max-width: calc(100vw - 32px); } } /* Aufklappbarer Hinweis über einem Abschnitt — für das, was früher als Absatz über den Feldern stand. Zu ist der Vorgabezustand. */ .lf-mehr { margin: 0; } .lf-mehr > summary { cursor: pointer; padding: var(--lf-raum-2) 0; font-weight: 600; color: var(--lf-primary); font-size: var(--lf-schrift-s); list-style: none; } .lf-mehr > summary::-webkit-details-marker { display: none; } .lf-mehr > summary::before { content: '▸ '; } .lf-mehr[open] > summary::before { content: '▾ '; } .lf-mehr > summary:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 2px; } .lf-mehr__text { margin: 0 0 var(--lf-raum-3); padding: var(--lf-raum-3) var(--lf-raum-4); background: var(--lf-bg-soft); border-radius: var(--lf-radius-s); font-size: var(--lf-schrift-s); color: var(--lf-ink-2); } .lf-mehr__text p { margin: 0 0 var(--lf-raum-2); } .lf-mehr__text p:last-child { margin-bottom: 0; } /* ── Knöpfe ────────────────────────────────────────────────────────────── */ .lf-btn { font: inherit; font-weight: 600; font-size: var(--lf-schrift-m); cursor: pointer; border: 1.5px solid transparent; border-radius: var(--lf-radius-s); padding: var(--lf-raum-2) var(--lf-raum-4); background: transparent; color: var(--lf-ink); min-height: 42px; transition: background .15s, border-color .15s, color .15s; } .lf-btn--primary { background: var(--lf-primary); color: #fff; } .lf-btn--primary:hover { background: var(--lf-primary-dark); } .lf-btn--ghost { border-color: var(--lf-line); } .lf-btn--ghost:hover { border-color: var(--lf-primary); color: var(--lf-primary-dark); } .lf-btn--gefahr { background: var(--lf-err); color: #fff; } .lf-btn--sm { padding: var(--lf-raum-1) var(--lf-raum-3); font-size: var(--lf-schrift-s); min-height: 34px; } .lf-btn--block { display: block; width: 100%; } .lf-btn:active { transform: translateY(1px); } .lf-btn:disabled, .lf-btn.is-laeuft { opacity: 0.55; cursor: not-allowed; transform: none; } .lf-btn:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 2px; } .lf-shell__seite .lf-btn--ghost { border-color: rgba(255,255,255,0.2); color: var(--lf-on-ink-2); } .lf-shell__seite .lf-btn--ghost:hover { border-color: #fff; color: #fff; } /* ── Zustände ──────────────────────────────────────────────────────────── */ .lf-laedt { display: flex; flex-direction: column; gap: var(--lf-raum-3); padding: var(--lf-raum-1) 0; } .lf-laedt__zeile { height: 1.05rem; border-radius: 6px; background: linear-gradient(90deg, var(--lf-bg-soft), #eef4f6, var(--lf-bg-soft)); background-size: 200% 100%; animation: lf-puls 1.2s ease-in-out infinite; } .lf-laedt__zeile:nth-child(2) { width: 78%; } .lf-laedt__zeile:nth-child(3) { width: 55%; } @keyframes lf-puls { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .lf-leer { padding: var(--lf-raum-6) 0; text-align: center; color: var(--lf-ink-3); } .lf-leer p { margin: 0 0 var(--lf-raum-3); } .lf-banner { border-radius: var(--lf-radius-s); padding: var(--lf-raum-3) var(--lf-raum-4); font-size: var(--lf-schrift-m); } .lf-banner + .lf-banner { margin-top: var(--lf-raum-2); } /* ⚠️ Nur der DIREKTE `strong` ist die Überschrift des Banners. Vorher galt die Regel für jedes `strong` im Banner — ein hervorgehobenes Wort MITTEN im Satz wurde dadurch zum Block und riss den Satz in drei Zeilen. */ .lf-banner > strong { display: block; } .lf-banner p, .lf-banner ul { margin: var(--lf-raum-1) 0 0; } .lf-banner ul { padding-left: var(--lf-raum-4); } .lf-banner--fehler { background: #fdeceb; color: #7c1a15; border: 1px solid #f3c4c1; } .lf-banner--warnung { background: #fdf4e3; color: #7a4e06; border: 1px solid #f0dcae; } .lf-banner--info { background: var(--lf-primary-tint); color: var(--lf-primary-dark); } .lf-banner .lf-btn { margin-top: var(--lf-raum-2); } .lf-befunde { display: flex; flex-direction: column; } .lf-badge { display: inline-block; border-radius: 999px; padding: 2px var(--lf-raum-2); font-size: var(--lf-schrift-xs); font-weight: 600; background: var(--lf-primary-tint); color: var(--lf-primary-dark); } .lf-badge--warn { background: #fdf4e3; color: var(--lf-warn); } .lf-badge--ok { background: #e6f5ec; color: var(--lf-ok); } /* ── Toast und Modal ───────────────────────────────────────────────────── */ .lf-toasts { position: fixed; right: var(--lf-raum-4); bottom: var(--lf-raum-4); display: flex; flex-direction: column; gap: var(--lf-raum-2); z-index: 60; } .lf-toast { background: var(--lf-bg-ink); color: #fff; border-radius: var(--lf-radius-s); padding: var(--lf-raum-3) var(--lf-raum-4); box-shadow: var(--lf-schatten-hoch); font-size: var(--lf-schrift-m); max-width: 22rem; transition: opacity .3s, transform .3s; } .lf-toast--warnung { background: var(--lf-warn); } .lf-toast--fehler { background: var(--lf-err); } .lf-toast.is-weg { opacity: 0; transform: translateY(6px); } .lf-modal { position: fixed; inset: 0; background: rgba(15,40,48,.45); display: grid; place-items: center; padding: var(--lf-raum-4); z-index: 70; } .lf-modal__box { background: var(--lf-bg); border-radius: var(--lf-radius); box-shadow: var(--lf-schatten-hoch); padding: var(--lf-raum-6); width: min(30rem, 100%); } .lf-modal__box h2 { margin: 0 0 var(--lf-raum-2); } .lf-modal__box p { margin: 0 0 var(--lf-raum-4); color: var(--lf-ink-2); } .lf-modal__aktionen { display: flex; gap: var(--lf-raum-2); justify-content: flex-end; flex-wrap: wrap; } /* Eine Sicherheitsabfrage bekommt keine Farbe geschenkt: die Folge steht im Text, das Wort auf dem Knopf benennt sie. */ .lf-modal__folge { margin: 0 0 var(--lf-raum-4); padding: var(--lf-raum-3) var(--lf-raum-4); background: var(--lf-bg-soft); border-left: 0; border-radius: var(--lf-radius-s); font-size: var(--lf-schrift-s); } .lf-modal__box--weit { max-width: 760px; width: 92vw; } .lf-modal__inhalt { max-height: 62vh; overflow-y: auto; margin: var(--lf-raum-2) 0 var(--lf-raum-4); } /* ── Assistent: ein Vorgang in Schritten ─────────────────────────────────── ⚠️ Nur für die wenigen Vorgänge, bei denen ein einzelnes Feld die Folgen verschweigt (Kurzarbeit, Insolvenz): dort ist die Eingabe nicht das Problem, sondern die Meldekette, die sie auslöst. Der Assistent zeigt sie VOR dem Speichern. Die Felder bleiben zusätzlich in der Karte bedienbar — wer weiß, was er tut, braucht keinen Führer. */ .lf-schritte { display: flex; gap: var(--lf-raum-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--lf-raum-4); } .lf-schritte__punkt { display: inline-flex; align-items: center; gap: var(--lf-raum-2); font-size: var(--lf-schrift-s); color: var(--lf-ink-3); } .lf-schritte__punkt strong { font-weight: 600; } .lf-schritte__num { width: 22px; height: 22px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--lf-bg-soft); border: 1px solid var(--lf-line); font-size: var(--lf-schrift-xs); font-weight: 700; } .lf-schritte__punkt.is-dran { color: var(--lf-ink); } .lf-schritte__punkt.is-dran .lf-schritte__num { background: var(--lf-primary); border-color: var(--lf-primary); color: #fff; } .lf-schritte__punkt.is-fertig .lf-schritte__num { background: var(--lf-primary-tint); border-color: var(--lf-primary-tint); color: var(--lf-primary-dark); } .lf-schritte__pfeil { color: var(--lf-line); } .lf-assistent__schritt[hidden] { display: none; } /* ── Fortschritt der Einrichtung ─────────────────────────────────────────── Eine Liste von Schritten mit Zustand. ⚠️ Sie zeigt ANWESENHEIT von Angaben, nicht das fachliche Urteil „produktivreif" — das trifft das Backend. Ein Häkchen hier heißt „ausgefüllt", nicht „geprüft"; deshalb steht der Satz auch in der Karte. */ .lf-fortschritt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .lf-fortschritt__schritt { display: flex; gap: var(--lf-raum-3); align-items: flex-start; padding: var(--lf-raum-3) 0; border-top: 1px solid var(--lf-line); } .lf-fortschritt__schritt:first-child { border-top: 0; } .lf-fortschritt__num { flex: none; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--lf-bg-soft); color: var(--lf-ink-3); font-size: var(--lf-schrift-s); font-weight: 700; border: 1px solid var(--lf-line); } .lf-fortschritt__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } .lf-fortschritt__text strong { font-size: var(--lf-schrift-m); } .lf-fortschritt__schritt.is-erledigt .lf-fortschritt__num { background: var(--lf-primary-tint); color: var(--lf-primary-dark); border-color: var(--lf-primary-tint); } .lf-fortschritt__schritt.is-offen .lf-fortschritt__num { border-color: var(--lf-warn); color: var(--lf-warn); } .lf-fortschritt__aktion { flex: none; align-self: center; } .lf-balken { height: 6px; border-radius: 999px; background: var(--lf-bg-soft); overflow: hidden; } .lf-balken__wert { height: 100%; background: var(--lf-primary); } /* ── Monatsroutine: die Leiste mit Stand ────────────────────────────────── ⚠️ Sieben Schritte, immer alle sichtbar, immer in derselben Reihenfolge — auch die, die noch nicht dran sind. Der Befund war „kein erkennbarer Flow": eine Navigation aus neun gleichwertigen Punkten sagt nicht, dass Bewegungsdaten VOR dem Probelauf kommen und die Freigabe NACH dem Festschreiben. Diese Leiste sagt es, ohne einen Assistenten zu erzwingen — jeder Schritt bleibt einzeln erreichbar. */ .lf-routine { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--lf-raum-2); } .lf-routine__schritt { display: flex; flex-direction: column; gap: var(--lf-raum-1); padding: var(--lf-raum-3); min-width: 0; border: 1px solid var(--lf-line); border-radius: var(--lf-radius-s); background: var(--lf-bg); color: var(--lf-ink); } .lf-routine__schritt:hover { border-color: var(--lf-primary); text-decoration: none; } .lf-routine__schritt.is-dran { border-color: var(--lf-primary); box-shadow: inset 0 -3px 0 var(--lf-primary); } .lf-routine__kopf { display: flex; align-items: center; gap: var(--lf-raum-2); } .lf-routine__num { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--lf-bg-soft); color: var(--lf-ink-3); font-size: var(--lf-schrift-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .lf-routine__schritt.is-erledigt .lf-routine__num { background: var(--lf-primary-tint); color: var(--lf-primary-dark); } .lf-routine__name { font-weight: 600; font-size: var(--lf-schrift-s); min-width: 0; } .lf-routine__stand { font-size: var(--lf-schrift-xs); color: var(--lf-ink-3); } /* ── Startseite „Heute" ─────────────────────────────────────────────────── Zwei Spalten: links, was zu TUN ist, rechts, wo der Monat und die Einrichtung stehen. ⚠️ Keine Tabelle von allem. Eine Startseite, die alles zeigt, sagt nichts. */ .lf-heute { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--lf-raum-6); align-items: start; } @media (max-width: 1100px) { .lf-heute { grid-template-columns: minmax(0, 1fr); } } .lf-spalte { display: flex; flex-direction: column; gap: var(--lf-raum-6); min-width: 0; } /* Aufgabenzeile. Betreff · Einordnung · Frist · genau ein Weg dorthin. */ .lf-aufgaben { display: flex; flex-direction: column; } .lf-aufgabe { display: flex; gap: var(--lf-raum-3); align-items: flex-start; padding: var(--lf-raum-3) 0; border-top: 1px solid var(--lf-line); min-width: 0; } .lf-aufgabe:first-child { border-top: 0; } .lf-aufgabe__ikone { flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--lf-primary-tint); color: var(--lf-primary-dark); display: inline-flex; align-items: center; justify-content: center; } .lf-aufgabe--dringend .lf-aufgabe__ikone { background: #fdeceb; color: var(--lf-err); } .lf-aufgabe__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } .lf-aufgabe__betreff { font-weight: 600; overflow-wrap: anywhere; } .lf-aufgabe__zeile { display: flex; gap: var(--lf-raum-2); align-items: center; flex-wrap: wrap; font-size: var(--lf-schrift-s); color: var(--lf-ink-3); } .lf-aufgabe__aktion { flex: none; align-self: center; } @media (max-width: 640px) { .lf-aufgabe { flex-wrap: wrap; } .lf-aufgabe__aktion { width: 100%; } .lf-aufgabe__aktion .lf-btn { width: 100%; } } /* ── Platzfläche für eine Funktionslücke ────────────────────────────────── ⚠️ Eine Fläche, die benennt, was hier hinkommt und welcher Endpunkt sie füllt — statt einer leeren Karte oder, schlimmer, einer nachgebauten Fachlogik im Frontend. Gestrichelt, damit niemand sie für fertig hält. */ .lf-platz { border: 1px dashed var(--lf-line); border-radius: var(--lf-radius); background: var(--lf-bg); padding: var(--lf-karte-luft); display: flex; flex-direction: column; gap: var(--lf-raum-2); } .lf-platz h2 { font-size: var(--lf-schrift-m); } /* ⚠️ Die Marke bleibt eine Pille. `.lf-platz` ist eine Spalten-Flexbox — ein `inline-block`-Kind wird darin blockifiziert und zieht sich über die ganze Kartenbreite (gemessen: 547 von 597 px). Genau die Sorte Unsauberkeit, die der Auftrag als „gebastelt" benennt. */ .lf-platz > .lf-badge { align-self: flex-start; } .lf-platz p { margin: 0; font-size: var(--lf-schrift-s); color: var(--lf-ink-2); } .lf-platz code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--lf-schrift-xs); background: var(--lf-bg-soft); padding: 2px 6px; border-radius: 5px; overflow-wrap: anywhere; } .lf-platz__pfade { display: flex; flex-wrap: wrap; gap: var(--lf-raum-1); } /* ── Telefon/Tablet: Hamburger + Konto, Seitenleiste als Schublade ──────── * * ⚠️ Auf dem Desktop bleibt die Seitenleiste stehen — dort ist Platz, und ein permanentes Menü * ist schneller als eines, das man erst öffnen muss. */ @media (max-width: 860px) { .lf-shell { grid-template-columns: minmax(0, 1fr); } /* Die Schublade liegt ÜBER dem Inhalt, nicht daneben — sonst schiebt sie ihn zur Seite und der Anwender verliert seine Leseposition. */ .lf-shell__seite { position: fixed; top: 0; left: 0; z-index: 40; width: min(17rem, 82vw); height: 100dvh; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: var(--lf-schatten-hoch); overflow-y: auto; } .lf-shell__seite.is-offen { transform: translateX(0); } .lf-schublade__schatten { position: fixed; inset: 0; z-index: 35; background: rgba(6, 20, 24, 0.45); } body.lf-fixiert { overflow: hidden; } .lf-shell__kopf { padding: var(--lf-raum-3) var(--lf-raum-4); flex-wrap: wrap; } .lf-shell__kontext { display: none; } .lf-shell__kopf h1 { font-size: var(--lf-schrift-l); } .lf-shell__inhalt { padding: var(--lf-raum-4); gap: var(--lf-raum-4); } .lf-karte { --lf-karte-luft: var(--lf-raum-4); } .lf-formular__raster > .lf-feld, .lf-gruppe__raster > .lf-feld, .lf-feld--sp2, .lf-feld--sp3, .lf-feld--sp4, .lf-feld--sp5, .lf-feld--sp6, .lf-feld--sp8, .lf-feld--sp9 { grid-column: span 12 !important; } .lf-gruppe--eng { grid-column: span 12; } } @media (prefers-reduced-motion: reduce) { .lf-laedt__zeile { animation: none; } .lf-btn, .lf-toast { transition: none; } .lf-shell__seite { transition: none; } } /* ── Listenkopf: Suche + Filter + Primäraktion ─────────────────────────────── ⚠️ Die Suche steht LINKS und ist das breiteste Element der Zeile. Sie ist der übliche Einstieg in eine Personenliste; die Anlage ist der seltene Fall. */ .lf-listenkopf { display: flex; gap: var(--lf-raum-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--lf-raum-4); } .lf-suche { flex: 1 1 260px; min-width: 200px; } .lf-suche input { width: 100%; padding: var(--lf-raum-2) var(--lf-raum-3); font: inherit; font-size: var(--lf-schrift-eingabe); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-s); background: var(--lf-bg); min-height: 42px; } .lf-suche input:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 1px; } .lf-listenkopf__rechts { display: flex; gap: var(--lf-raum-2); align-items: center; flex-wrap: wrap; } .lf-listenkopf__rechts select { padding: var(--lf-raum-2) var(--lf-raum-3); font: inherit; font-size: var(--lf-schrift-eingabe); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-s); background: var(--lf-bg); min-height: 42px; } /* ── Marke: ein Statuswort in der Tabelle ─────────────────────────────────── Farbe allein trägt die Aussage nicht — das Wort steht immer daneben, damit sie auch bei Farbenblindheit ankommt. */ .lf-marke { display: inline-block; padding: 2px var(--lf-raum-2); border-radius: 999px; font-size: var(--lf-schrift-xs); font-weight: 600; white-space: nowrap; } .lf-marke--gruen { background: #e8f5ee; color: var(--lf-ok); } .lf-marke--grau { background: var(--lf-bg-soft); color: var(--lf-ink-3); } .lf-marke--blau { background: var(--lf-primary-tint); color: var(--lf-primary-dark); } .lf-marke--rot { background: #fdeceb; color: var(--lf-err); } .lf-marke--ocker { background: #fdf4e3; color: var(--lf-warn); } /* ── Detailkopf einer Person ─────────────────────────────────────────────── */ .lf-detailkopf { margin-bottom: var(--lf-raum-4); } .lf-detailkopf h2 { margin: var(--lf-raum-1) 0 2px; font-size: var(--lf-schrift-xl); } .lf-detailkopf p { margin: 0; } .lf-zurueck { font-size: var(--lf-schrift-s); color: var(--lf-ink-2); text-decoration: none; } .lf-zurueck:hover { color: var(--lf-primary); text-decoration: underline; } @media (max-width: 640px) { /* Auf dem Telefon gehört die Suche über die ganze Breite; der Filter darunter. */ .lf-listenkopf { flex-direction: column; align-items: stretch; } /* ⚠️ `flex: 1 1 260px` meint in einer SPALTEN-Flexbox die HÖHE — das Suchfeld stand dadurch 260 px hoch da. Die Basis muss hier zurückgesetzt werden. */ .lf-suche { flex: 0 0 auto; min-width: 0; } .lf-listenkopf__rechts { justify-content: space-between; } } /* ── Zeitachse: die Differenz zur Vorgängerscheibe ────────────────────────── */ .lf-diff { margin: 0; padding-left: var(--lf-raum-4); } .lf-diff li { margin: 2px 0; font-size: var(--lf-schrift-s); } .lf-abschnitt { margin: var(--lf-raum-8) 0 var(--lf-raum-1); font-size: var(--lf-schrift-l); font-weight: 700; color: var(--lf-ink); } .lf-unterabschnitt { margin: var(--lf-raum-6) 0 var(--lf-raum-2); font-size: var(--lf-schrift-m); font-weight: 600; } .lf-hinweis { margin: 0 0 var(--lf-raum-3); } /* ── Monatswahl ────────────────────────────────────────────────────────────*/ .lf-monatswahl { display: flex; gap: var(--lf-raum-2); align-items: center; flex-wrap: wrap; } .lf-monatswahl input { padding: var(--lf-raum-2) var(--lf-raum-3); font: inherit; font-size: var(--lf-schrift-eingabe); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-s); background: var(--lf-bg); min-height: 42px; } /* ── Bewegungszeilen ─────────────────────────────────────────────────────── ⚠️ Jede Zeile behält ihren Entfernen-Knopf auf gleicher Höhe wie die Felder. Ein Knopf, der je nach Feldanzahl wandert, wird beim schnellen Erfassen zur Fehlerquelle. */ .lf-zeile { display: flex; gap: var(--lf-raum-3); align-items: start; padding: var(--lf-raum-3) 0; border-top: 1px solid var(--lf-line); } .lf-zeile:first-child { border-top: 0; } .lf-zeile__felder { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--lf-raum-3); } .lf-zeile__weg { flex: 0 0 auto; margin-top: 22px; } .lf-zeilen__liste { margin-bottom: var(--lf-raum-3); } @media (max-width: 640px) { .lf-zeile { flex-direction: column; } .lf-zeile__weg { margin-top: 0; align-self: flex-end; } } /* ── Lohnlauf ───────────────────────────────────────────────────────────────*/ .lf-stand { display: flex; gap: var(--lf-raum-3); align-items: baseline; flex-wrap: wrap; margin: 0 0 var(--lf-raum-2); } .lf-ok { color: var(--lf-ok); font-weight: 600; margin: 0; } .lf-fuss__hinweis { align-self: center; margin-right: auto; font-size: var(--lf-schrift-s); color: var(--lf-ink-3); } /* Summenzeile unter dem Ergebnis — wer die Auszahlung wissen will, soll nicht addieren. */ .lf-summen { display: flex; gap: var(--lf-raum-6); flex-wrap: wrap; justify-content: flex-end; margin-top: var(--lf-raum-3); padding-top: var(--lf-raum-3); border-top: 2px solid var(--lf-line); } .lf-summen div { display: flex; flex-direction: column; align-items: flex-end; } .lf-summen span { font-size: var(--lf-schrift-xs); color: var(--lf-ink-3); } .lf-summen strong { font-size: var(--lf-schrift-l); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .lf-summen { justify-content: space-between; gap: var(--lf-raum-3); } } /* ── Meldungen ───────────────────────────────────────────────────────────── Der Datensatz wird im Klartext gezeigt: er ist das, was den Betrieb verlaesst, und wer freigibt, soll ihn ansehen koennen. Feste Breite, damit die Satzstellen stimmen. */ .lf-datensatz { margin: var(--lf-raum-2) 0 0; padding: var(--lf-raum-3); overflow-x: auto; background: var(--lf-bg-soft); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-s); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--lf-schrift-xs); line-height: 1.6; white-space: pre-wrap; word-break: break-all; } /* ── Auswertungen ──────────────────────────────────────────────────────────*/ .lf-jahreswahl { display: flex; gap: var(--lf-raum-3); align-items: center; margin: 0; } .lf-jahreswahl input { width: 110px; padding: var(--lf-raum-2) var(--lf-raum-3); font: inherit; font-size: var(--lf-schrift-eingabe); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-s); background: var(--lf-bg); min-height: 42px; } /* ── Verwaltung ────────────────────────────────────────────────────────────*/ .lf-rollen { margin: 0 0 var(--lf-raum-4); padding-left: var(--lf-raum-4); font-size: var(--lf-schrift-s); color: var(--lf-ink-2); } .lf-rollen li { margin: 3px 0; } /* Das Einladungs-Kennwort: gross, auswaehlbar, unverwechselbar. */ .lf-kennwort { margin: var(--lf-raum-3) 0; padding: var(--lf-raum-4); text-align: center; background: var(--lf-bg-soft); border: 2px dashed var(--lf-primary); border-radius: var(--lf-radius-s); } .lf-kennwort code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--lf-schrift-m); word-break: break-all; user-select: all; } /* ── Berechtigungen eines API-Schlüssels ────────────────────────────────── Ein Ankreuzfeld je Berechtigung, mit dem Klartext DANEBEN statt darunter. Die ganze Zeile ist ein