/* ====================================================================== Puls — die gemeinsame Bauteilschicht (24.09.2026) Renés Auftrag: „Ich habe eine Website gefunden, die mir aus der Seele spricht — gerade was Einheitlichkeit und Genauigkeit bei Eingaben und Angaben angeht … Ich finde, dies sollte nun ein fester Bestandteil unseres Layouts sein im gesamten Puls.“ Dazu drei Artikel der UI-Components-Serie (Textfelder, Auswahlelemente, Knöpfe) und der Dashboard-Leitfaden von Formwandler Interactive. **Diese Datei ist die unterste Schicht und wird von allen Oberflächen geladen** — Admin-Tool (`puls.css`), die Module (`dienstplan.css`), myPuls (`mypuls.css`), die Bereichsansicht und die Stempeluhr. Darüber liegt nur noch, was eine Oberfläche wirklich eigen hat. Vorher gab es dieselbe Feldregel viermal mit vier verschiedenen Maßen; das ist genau die Uneinheitlichkeit, die René meint. **Was hier steht, ist eine Entscheidung, keine Vorliebe.** Jede Regel nennt ihren Grund — und wo ein Maß aus einer Norm kommt (WCAG 2.2, § 3.3 Eingabehilfen), steht die Norm dabei. Die Musterseite unter `/gestaltung` zeigt jedes Bauteil in jedem Zustand; wer etwas ändert, ändert es dort sichtbar mit. Reihenfolge: Marken · Flächen · Schrift · Knöpfe · Felder · Auswahl · Karten · Tabellen · Meldungen · Raster. ====================================================================== */ /* ============================================================ 1. Die Marken **Ein Wert steht an einer Stelle.** Wer eine Farbe oder einen Abstand braucht, nimmt eine Marke von hier — eine fest eingetippte Zahl in einer Moduldatei ist der Anfang von vier verschiedenen Grautönen für dieselbe Linie. */ :root { /* --- Fläche und Schrift ------------------------------------------------ Puls hat **keine eigene Primärfarbe**: Die Fläche bleibt neutral, die Farbe kommt vom Mandanten und bedeutet immer dasselbe — in wessen Unternehmen man arbeitet. */ --grund: #FFFFFF; /* Karten, Felder, alles, was vorn liegt */ --flaeche: #F2F5F9; /* der Seitengrund hinter den Karten */ --flaeche-tief: #E8ECF2; /* Hervorhebung auf der Fläche, Tabellenköpfe */ --linie: #DDE2E8; /* Ränder, Trenner */ --linie-stark: #C3CAD3; /* Feldränder: sie müssen 3:1 erreichen, siehe unten */ --text: #1A1D21; /* **Schrift auf einer Markenfläche, die Weiß nicht trägt** (25.10.2026). Renés Hotelorange `#E6511E` kommt mit Weiß auf **3,78:1** — gerechnet wird die Schriftfarbe deshalb (`util.schrift_auf`). Und `--text` genügt dort **nicht**: Es erreicht auf derselben Fläche nur **4,48:1**, also eine Hundertstel unter den 4,5 von WCAG 1.4.3. Dieses Dunkel kommt auf **4,67**. *Eine Nuance, die man nicht sieht und nachrechnen muss* — und deshalb steht sie als Token da und nicht als Zahl in Python. */ --text-auf-farbe: #16191D; --gedaempft: #5F6771; /* 4.6:1 auf Weiß — noch Fließtext-tauglich */ /* **Gerechnet, nicht geschätzt** (10.10.2026, Renés Idee 22 — die Regel, die mews.design ausspricht und Puls nachprüfbar macht): Jede Farbe, die **Text** trägt, hält 4,5:1 (WCAG 1.4.3), und weiße Schrift auf einer Markenfläche ebenso. `tests/test_gestaltung.py` rechnet es nach. Drei Werte sind dafür an diesem Tag nachjustiert worden, jeder um eine Nuance: `--leise` (3,18 → 4,52 auf Weiß; sie trägt an **103** Stellen Text), `--gut` (4,33 → 4,50 unter weißer Schrift) und `--warnung` (4,23 → 4,52). **`--leise` bleibt die leiseste Stimme und nicht mehr:** Auf der getönten Fläche erreicht sie 4,13:1 — wer dort einen Satz zeigen will, der gelesen werden muss, nimmt `--gedaempft` (5,24:1). */ --leise: #71777F; /* nur für Nicht-Text: Striche, abgeschaltete Zeichen */ /* --- Der Mandant ist der Akzent --------------------------------------- */ --mandant: #4A5568; --mandant-fein: color-mix(in srgb, var(--mandant) 10%, white); --mandant-rand: color-mix(in srgb, var(--mandant) 45%, white); /* --- Bedeutungsfarben -------------------------------------------------- **Nie mehr als vier Farben gleichzeitig** und **niemals eine reine Rot/Grün- Codierung** (Formwandler-Leitfaden). Jede Bedeutung tritt als Dreiklang auf: kräftig für Flächen, fein als Hintergrund, dunkel für Text auf Weiß — denn ein kräftiges Grün trägt weißen Text, aber keinen schwarzen. */ --gut: #1E8759; --gut-fein: #E8F5EE; --gut-text: #14653F; --warnung: #AD650D; --warnung-fein: #FDF3E4; --warnung-text: #8A4F06; --fehler: #C0392B; --fehler-fein: #FDECEA; --fehler-text: #97271B; --info: #2E6FB8; --info-fein: #EAF2FB; --info-text: #1F4F86; /* --- Abstände: ein Raster von 4 --------------------------------------- Alles, was Abstand hat, nimmt eine dieser Stufen. Ein 13-Pixel-Abstand neben einem 14er sieht nicht nach Absicht aus, sondern nach Zufall — und genau daraus entsteht der Eindruck von Unordnung, den man nicht benennen kann. */ --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 20px; --a6: 24px; --a7: 32px; --a8: 40px; --a9: 48px; --a10: 64px; /* --- Rundungen und Schatten ------------------------------------------- */ --r-klein: 6px; --r: 10px; --r-karte: 14px; --r-pille: 999px; --schatten-1: 0 1px 2px rgba(16, 24, 40, .06); --schatten-2: 0 2px 8px rgba(16, 24, 40, .08); --schatten-3: 0 8px 24px rgba(16, 24, 40, .12); /* --- Höhen der Bedienelemente ----------------------------------------- **44 Pixel ist die Untergrenze für alles, was ein Finger trifft** (WCAG 2.2, Erfolgskriterium 2.5.8 „Zielgröße“, und die Grenze, unter der die Fehltippquote auf Tablets deutlich steigt). `--hoehe` ist der Regelfall, `--hoehe-gross` für Geräte im Betrieb — Küche, Bunker, Objekt —, `--hoehe-klein` nur für Werkzeugleisten am Schreibtisch, nie für ein Formularfeld. **`--hoehe-app` ist die vierte, und sie stand bis zum 01.10.2026 als rohe Zahl an acht Stellen in `mypuls.css`** (Renés Idee 8: „Oft sind die Buttons auf unterschiedlichen Höhen"). Die App bedient man im Gehen, mit einem Daumen, oft einhändig — großzügiger als am Schreibtisch, kleiner als ein Gerät an der Wand. Benannt ist sie, damit die Frage „sollen es 48 oder 52 sein?" **an einer Stelle** entschieden wird statt an acht; *eine vierte Zahl ohne Namen ist keine Entscheidung, sondern ein Zufall.* Sie gilt ausschließlich in myPuls. **`--hoehe-werkzeug` ist die fünfte und die einzige, die unter 44 liegt** (24.10.2026, Renés Notiz an Idee 8). Ein Zeichenknopf in einer Tabellenzeile ist ein Quadrat von 32 Pixeln: Drei davon brauchen 110 Pixel, drei Knöpfe mit Text über 220 und drängen die Inhaltsspalten zusammen. **Erfolgskriterium 2.5.8 ist trotzdem erfüllt** — es verlangt 24 × 24 *oder* genug Abstand, und beides steht: 32 Pixel Kante, 6 Pixel Lücke, also 38 Pixel zwischen den Mittelpunkten. *Eine unsichtbare Trefferfläche von 44 Pixeln wäre hier die schlechtere Lösung: Bei 6 Pixeln Lücke überlappte sie den Nachbarn und stähle ihm den Klick.* */ --hoehe-klein: 36px; --hoehe: 44px; --hoehe-gross: 52px; --hoehe-app: 48px; --hoehe-werkzeug: 32px; --schrift: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --schrift-zahl: "Open Sans", ui-monospace, "SF Mono", Menlo, monospace; /* --- Übergänge -------------------------------------------------------- Kurz und nur auf Farbe/Schatten. Eine Oberfläche, die sich bewegt, während jemand arbeitet, wirkt langsamer, als sie ist. */ --zeit: .12s; } /* **Wer weniger Bewegung eingestellt hat, hat einen Grund dafür.** */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================= 2. Grundflächen */ * { box-sizing: border-box; } /* **Kein Bild ist breiter als sein Platz** (15.09.2026, nach dem zu großen Logo). */ img, svg, video { max-width: 100%; } body { margin: 0; font-family: var(--schrift); color: var(--text); background: var(--flaeche); font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; } /* **16 Pixel auf dem Telefon** (Formwandler-Leitfaden, und ein iPhone zoomt bei jedem Feld unter 16px beim Antippen ungefragt hinein — der Grund, warum kleine Schrift auf Mobilgeräten nicht nur schlecht lesbar, sondern schlicht kaputt ist). */ @media (max-width: 720px) { body { font-size: 16px; } } /* **Fokus ist keine Zierde, sondern der einzige Weg für die Tastatur.** Ein Ring von 2 Pixeln mit Abstand, überall gleich, nie abgeschaltet. `:focus-visible` statt `:focus`, damit ein Mausklick keinen Ring hinterlässt. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--mandant); outline-offset: 2px; border-radius: var(--r-klein); } /* ============================================================== 3. Schrift Eine Skala mit wenigen Stufen. Wer eine Zwischengröße braucht, braucht in Wahrheit eine andere Stufe. */ h1 { font-size: 1.65rem; line-height: 1.25; margin: 0 0 var(--a3); font-weight: 700; } h2 { font-size: 1.25rem; line-height: 1.3; margin: var(--a7) 0 var(--a3); font-weight: 700; } h3 { font-size: 1.05rem; line-height: 1.35; margin: var(--a5) 0 var(--a2); font-weight: 700; } h1:first-child, h2:first-child, h3:first-child { margin-top: 0; } .gedaempft { color: var(--gedaempft); } .klein { font-size: .86rem; } /* **Zahlen stehen untereinander.** Tabellenziffern haben alle dieselbe Breite; ohne sie springt eine Spalte mit Beträgen bei jedem Wert, und man liest sie nicht mehr. */ /* **Am Ende der Spalte, nicht rechts.** In einer Tabelle sollen die Einer untereinander stehen — in einer von rechts nach links gelesenen Tabelle ist das die linke Kante. */ .zahl, td.zahl, th.zahl { font-variant-numeric: tabular-nums; text-align: end; } /* ============================================================== 4. Knöpfe Aus dem Knopf-Artikel der Serie, und jede Regel hat einen Grund, den man im Betrieb sieht: * **Eine primäre Handlung je Bildschirmabschnitt.** Zwei gleich starke Knöpfe nebeneinander sind keine Hierarchie, sondern eine Frage. * **Die Beschriftung ist ein Verb mit seinem Gegenstand** — „Schicht speichern“, nicht „OK“. Wer „OK“ liest, muss die Überschrift noch einmal lesen. * **Abgeschaltete Knöpfe sind die schlechtere Lösung.** Ein grauer Knopf sagt nicht, *warum* er grau ist. Wo es geht, bleibt der Knopf aktiv und die Absage nennt den Grund; `:disabled` bleibt für die Fälle, in denen wirklich nichts zu erklären ist (ein laufender Vorgang). * **Die zerstörende Handlung ist rot und steht nicht neben der primären.** */ button, .knopf, input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--a2); min-height: var(--hoehe); padding: 0 var(--a5); font: inherit; font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: var(--r-klein); background: var(--mandant); color: #fff; text-decoration: none; cursor: pointer; transition: background var(--zeit) ease, border-color var(--zeit) ease, box-shadow var(--zeit) ease, filter var(--zeit) ease; } button:hover, .knopf:hover { filter: brightness(1.08); } button:active, .knopf:active { filter: brightness(.94); } /* Zweite Stufe: gleiche Form, weniger Gewicht — für alles neben der Haupthandlung. */ button.zweit, .knopf.zweit, button.stumm, .knopf.stumm { background: var(--grund); color: var(--text); border-color: var(--linie-stark); } button.zweit:hover, .knopf.zweit:hover { background: var(--flaeche); filter: none; } /* **Der gewählte Filter sieht gewählt aus** (11.10.2026). `.knopf … an` stand seit dem 20.09.2026 in zwei Vorlagen (Gemeldete Fehler) und **in keiner Stildatei**: Die Filterzeile zeigte nicht, welcher Filter greift. Dieselbe Klasse wie `--radius-klein` am 10.10.2026 — *eine Klasse, die nichts bewirkt, fällt nicht auf.* Die Auswahl steht hinter `.zweit`, damit sie dessen Grund sticht. */ button.zweit.an, .knopf.zweit.an, button.an, .knopf.an { background: var(--flaeche); border-color: var(--text); color: var(--text); font-weight: 600; } /* Dritte Stufe: nur Schrift. Für das, was man selten braucht und nie sucht. */ button.leer, .knopf.leer { background: none; border-color: transparent; color: var(--gedaempft); font-weight: 600; padding: 0 var(--a3); } button.leer:hover, .knopf.leer:hover { background: var(--flaeche-tief); filter: none; } /* **Zerstörend**: rot, und die Beschriftung nennt die Tat („Löschen“, nie „Ja“). */ button.rot, .knopf.rot { background: var(--fehler); border-color: var(--fehler); } button.gross, .knopf.gross { min-height: var(--hoehe-gross); padding: 0 var(--a6); font-size: 1.05rem; } button.schmal, .knopf.schmal { min-height: var(--hoehe-klein); padding: 0 var(--a3); font-size: .88rem; } /* Auf dem Telefon nimmt die Haupthandlung die ganze Breite — ein 120 Pixel breiter Knopf am Rand eines 380-Pixel-Bildschirms ist verschenkter Platz und ein kleineres Ziel. */ button.breit, .knopf.breit { width: 100%; } @media (max-width: 560px) { .knopfzeile > button, .knopfzeile > .knopf { flex: 1 1 auto; } } button:disabled, .knopf[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; } /* **Der Ladezustand** ist ein eigener Zustand, kein abgeschalteter Knopf: Er sagt „es läuft“, nicht „geht nicht“. */ button[data-laeuft]::before { content: ""; width: 1em; height: 1em; border-radius: 50%; flex: 0 0 auto; border: 2px solid currentColor; border-top-color: transparent; animation: puls-dreht .7s linear infinite; } @keyframes puls-dreht { to { transform: rotate(360deg); } } .knopfzeile { display: flex; gap: var(--a3); align-items: center; flex-wrap: wrap; margin-top: var(--a5); } /* Ein Abstand, der die zerstörende Handlung von der primären trennt — damit der Daumen nicht danebentrifft. */ .knopfzeile .rot { margin-inline-start: auto; } /* ============================================================== 5. Felder Aus dem Textfeld-Artikel. Die vier Regeln, die den Unterschied machen: 1. **Das Etikett steht über dem Feld und bleibt stehen.** Nicht daneben (bricht auf schmalen Bildschirmen und bei langen Wörtern), nicht schwebend (schlechter Kontrast, und beim Ausfüllen sitzt es im Weg), nicht im Feld. 2. **Ein Platzhalter ist kein Etikett.** Er verschwindet beim ersten Zeichen, und dann weiß niemand mehr, was hier hingehört — im Formular des Personalfragebogens ist das der Unterschied zwischen einer Steuer-ID und einer Sozialversicherungsnummer. Er dient nur als **Beispiel** für das Format („z. B. 12.03.1980“). 3. **Die Breite des Feldes sagt, wie lang die Antwort ist.** Eine Postleitzahl bekommt 110 Pixel, eine Straße die ganze Zeile. Ein Formular aus lauter gleich breiten Feldern ist schwerer auszufüllen, weil jedes Feld erst gelesen werden muss. 4. **Der Fehler steht am Feld, nicht am Seitenkopf** — mit Text *und* Zeichen, nie mit Farbe allein, und **geprüft wird beim Verlassen des Feldes**, nicht bei jedem Tastendruck: Wer beim dritten Zeichen einer E-Mail-Adresse „ungültig“ liest, wird beim echten Fehler nicht mehr hinsehen. */ label { display: block; font-weight: 600; margin: 0 0 var(--a1); } /* **Gekennzeichnet wird das Seltenere.** In Puls sind die meisten Felder freiwillig, also steht „Pflicht“ dran — und wo fast alles Pflicht ist, steht „(optional)“ an den anderen. Eine Seite voller Sternchen sagt nichts. */ label .pflicht { color: var(--fehler-text); font-weight: 700; margin-inline-start: 2px; } label .freiwillig { color: var(--gedaempft); font-weight: 400; } /* **Kästchen, Punkte und Schalter sind ausgenommen** — sie sind keine Textfelder. `input` trifft sonst auch sie, und aus einem 22-Pixel-Kästchen würde eine Fläche über die ganze Zeilenbreite. Dieselbe Falle steckte schon in der alten `dienstplan.css`; mit einer Mindesthöhe von 44 Pixeln wäre sie unübersehbar geworden. Ebenso ausgenommen: Datei-, Farb- und Schiebefelder — sie bringen ihre eigene Darstellung mit, und ein Rahmen darum sieht aus wie ein zweites Feld. */ input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="range"], [type="image"], [type="submit"], [type="button"]), select, textarea { width: 100%; min-height: var(--hoehe); font: inherit; color: var(--text); padding: 0 var(--a3); background: var(--grund); border: 1px solid var(--linie-stark); border-radius: var(--r-klein); transition: border-color var(--zeit) ease, box-shadow var(--zeit) ease; } /* Ein Kästchen oder Punkt **außerhalb** einer `.wahl`-Zeile bekommt wenigstens eine brauchbare Größe und die Farbe des Unternehmens. */ input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--mandant); cursor: pointer; } textarea { padding: var(--a3); min-height: 96px; line-height: 1.5; resize: vertical; } select { appearance: none; padding-inline-end: var(--a7); /* Das Zeichen ist eingebettet, nicht geladen: ein Bild aus dem Netz wäre ein Weg nach draußen, der in keiner Integrationstabelle steht. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F6771' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--a3) center; } /* **Von rechts nach links wandert das Zeichen mit** (Arabisch, seit 23.09.2026): `background-position` kennt keine logische Schreibweise, also wird es hier gedreht. Eine einzige seitenabhängige Zeile reicht, damit die Oberfläche schief steht — und es fällt nur dem auf, der sie benutzt. */ [dir="rtl"] select { background-position: left var(--a3) center; padding-inline-end: var(--a3); padding-inline-start: var(--a7); } input:not([type="checkbox"], [type="radio"]):hover, select:hover, textarea:hover { border-color: var(--gedaempft); } input:not([type="checkbox"], [type="radio"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--mandant); box-shadow: 0 0 0 3px var(--mandant-fein); } input::placeholder, textarea::placeholder { color: var(--leise); } /* **Nicht änderbar heißt nicht kaputt.** `readonly` bleibt lesbar (der Text steht auf voller Deckkraft), `disabled` ist sichtbar außer Betrieb. Zwei verschiedene Aussagen, die überall gleich aussahen. */ input[readonly], textarea[readonly] { background: var(--flaeche); border-style: dashed; } input:not([type="checkbox"], [type="radio"]):disabled, select:disabled, textarea:disabled { background: var(--flaeche-tief); color: var(--gedaempft); cursor: not-allowed; } input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; } /* Zustände am Feld. `aria-invalid` ist die Quelle — so liest es auch ein Screenreader, und die Farbe ist nur die Zugabe. */ input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .feld.fehlerhaft input, .feld.fehlerhaft select, .feld.fehlerhaft textarea { border-color: var(--fehler); box-shadow: 0 0 0 3px var(--fehler-fein); } .feld.geprueft input { border-color: var(--gut); } /* Der Feldblock: Etikett, Feld, Hilfe, Fehler — immer in dieser Reihenfolge. */ .feld { margin-bottom: var(--a4); min-width: 0; } .feldhilfe { display: block; margin-top: var(--a1); font-size: .84rem; color: var(--gedaempft); } /* **Der Fehler trägt ein Zeichen**, damit er ohne Farbunterscheidung ankommt. */ .feldfehler { display: flex; align-items: flex-start; gap: var(--a1); margin-top: var(--a1); font-size: .86rem; font-weight: 600; color: var(--fehler-text); } .feldfehler::before { content: "⚠"; flex: 0 0 auto; } /* **Breiten, die der Antwort entsprechen.** Ein Feld, das dreimal so breit ist wie sein Inhalt, lässt den Ausfüllenden zweifeln, ob er alles eingegeben hat. */ .feld.w-klein { max-width: 110px; } /* PLZ, Hausnummer, Anzahl */ .feld.w-mittel { max-width: 200px; } /* Datum, Betrag, Telefon */ .feld.w-gross { max-width: 380px; } /* Name, Ort */ .feld.w-voll { max-width: none; } /* Straße, Betreff, Text */ /* Felder nebeneinander nur, wenn sie zusammengehören (PLZ und Ort). Sonst untereinander: Ein Formular in einer Spalte wird nachweislich schneller und fehlerärmer ausgefüllt. */ .feldpaar { display: flex; gap: var(--a4); flex-wrap: wrap; align-items: flex-start; } .feldpaar > .feld { flex: 1 1 200px; } /* Ein Bund gehört zusammen und trägt seine Überschrift — für die Tastatur und den Screenreader ist das `
` die Gruppe, nicht die Überschrift daneben. */ fieldset.bund { border: 1px solid var(--linie); border-radius: var(--r); padding: var(--a4); margin: 0 0 var(--a5); min-width: 0; } fieldset.bund > legend { padding: 0 var(--a2); font-weight: 700; } /* ======================================================= 6. Auswahlelemente Aus dem Artikel über Auswahlelemente. **Die Wahl des Bauteils ist eine fachliche Aussage**, keine Geschmacksfrage: | Bauteil | Wofür | Wirkt | |---|---|---| | **Kästchen** | mehrere aus einer Menge, unabhängig voneinander | erst beim Absenden | | **Punkt** | genau eines aus zwei bis fünf | erst beim Absenden | | **Schalter** | ein Zustand an oder aus | **sofort** | | **Liste** | eines aus vielen (ab etwa sechs) | erst beim Absenden | Der häufigste Fehler ist der Schalter, der erst beim Speichern wirkt: Wer ihn umlegt, hat den Eindruck, es sei erledigt — und geht. */ .wahl { display: flex; align-items: flex-start; gap: var(--a3); /* **Die ganze Zeile ist das Ziel**, nicht das 20-Pixel-Kästchen. */ min-height: var(--hoehe); padding-block: var(--a2); padding-inline: 0 var(--a2); cursor: pointer; font-weight: 400; margin: 0; } .wahl:hover { color: var(--text); } .wahl input[type="checkbox"], .wahl input[type="radio"] { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--mandant); cursor: pointer; } .wahl > span { display: block; } .wahl .wahlname { font-weight: 600; } .wahl .wahlhilfe { display: block; font-size: .84rem; color: var(--gedaempft); } /* Untereinander, nicht nebeneinander: eine senkrechte Liste liest man in einem Zug. */ .wahlgruppe { display: flex; flex-direction: column; } .wahlgruppe.nebeneinander { flex-direction: row; flex-wrap: wrap; gap: var(--a4); } /* **Der Schalter** — und er wirkt sofort. Deshalb steht er in einem eigenen kleinen Formular und braucht keinen Speichern-Knopf daneben. */ .schalter { display: flex; align-items: center; gap: var(--a3); min-height: var(--hoehe); cursor: pointer; font-weight: 600; margin: 0; } .schalter input { position: absolute; opacity: 0; width: 0; height: 0; } .schalter .gleis { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: var(--r-pille); background: var(--linie-stark); transition: background var(--zeit) ease; } .schalter .gleis::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--schatten-1); transition: transform var(--zeit) ease; } .schalter input:checked + .gleis { background: var(--gut); } .schalter input:checked + .gleis::after { transform: translateX(20px); } [dir="rtl"] .schalter input:checked + .gleis::after { transform: translateX(-20px); } .schalter input:focus-visible + .gleis { outline: 2px solid var(--mandant); outline-offset: 2px; } .schalter input:disabled + .gleis { opacity: .5; } /* **Das Wort neben dem Schalter benennt die Sache, nicht den Zustand** — „Push-Nachrichten“ und nicht „Push aus“: Sonst liest man beim Umlegen das Gegenteil dessen, was gilt. */ /* ============================================================== 7. Karten Aus dem Dashboard-Leitfaden: **weiße Karten auf getöntem Grund**, gestapelt statt nebeneinandergedrängt, eine Kennzahl groß. */ .karte { background: var(--grund); border-radius: var(--r-karte); padding: var(--a5); box-shadow: var(--schatten-1); } .karte > h2:first-child, .karte > h3:first-child { margin-top: 0; } .kartenkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a4); margin-bottom: var(--a4); } /* **Vier Grundformen, die keiner Moduldatei gehören** (26.10.2026, Renés „Räum auf — was gemacht werden muss"). **Gemessen waren es 36 Klassen**, die in mindestens einer Vorlage **nicht wirkten**: Sie stehen in einer Stildatei, die die Seite nicht lädt. *Eine Kanonklasse in der falschen Datei wirkt nicht und fällt nicht auf.* ***Und 32 davon lassen sich nicht hierher verschieben.*** Der Hausstandard sagt: **Ein Name gehört einer Schicht** (`test_die_bauteilschicht_belegt_keinen_fremden_namen_neu`), und `.hinweis` ist in vier Moduldateien, `.marke` in drei, `.abschnitt` in zwei — mit verschiedenen Bedeutungen. Eine Grundform hier würde ihnen eine fremde Bauart aufzwingen. *Die Lösung liegt deshalb in den Vorlagen und nicht in dieser Datei* — siehe die Frage dazu in `docs/plan.md`. Hier stehen nur die vier, die **keine** Moduldatei beansprucht. */ .still { opacity: .6; } /* **Eine Liste von Befunden, jeder ein Satz mit Weg** (Renés Abschnitt 9 zu Idee 36, 26.10.2026). Kein Aufzählungszeichen, sondern Luft zwischen den Sätzen: *Ein Befund ist ein Satz, den man liest, und kein Punkt in einer Liste, die man überfliegt.* */ .befundliste { list-style: none; padding: 0; margin: 0 0 var(--a5); } .befundliste li { border-inline-start: 3px solid var(--mandant); padding: var(--a2) var(--a4); margin-bottom: var(--a2); background: var(--flaeche); border-radius: var(--r-klein); } .befundliste a { color: var(--text); text-decoration: none; display: block; } .befundliste a:hover { text-decoration: underline; } .gewaehlt { outline: 2px solid var(--mandant); outline-offset: 1px; } .stark { font-weight: 700; } /* **Die Reihe, in der Kennzahlen stehen.** Sie gehört in den Kanon und nicht in eine Moduldatei — *eine Kennzahl ohne ihre Reihe ist ein halbes Bauteil*, und `.kennzahl` steht hier. **Gefunden am 26.10.2026:** Die Klasse stand nur in `kantine.css`. Damit war sie für **sieben Seiten des Admin-Tools wirkungslos** — `/lumi/statistik`, `/lumi/wissen`, `/lumi/archiv`, `/systeme` und die drei Einkaufsseiten laden `kantine.css` nicht, und ihre Kennzahlen standen untereinander statt nebeneinander. *Eine Kanonklasse in der falschen Datei wirkt nicht und fällt nicht auf.* */ .kopfzahlen { display: flex; flex-wrap: wrap; gap: var(--a4); } /* Die große Zahl mit ihrer Beschriftung **darüber** — man liest erst, was es ist. */ .kennzahl { display: flex; flex-direction: column; gap: 2px; } .kennzahl .kzname { font-size: .78rem; color: var(--gedaempft); text-transform: uppercase; letter-spacing: .04em; } .kennzahl .kzwert { font-size: 2rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; } /* **Eine Zahl ohne Vergleich ist keine Kennzahl** (Dashboard-Leitfaden und die Regel des Admin-Dashboards seit dem 13.09.2026). Der Pfeil trägt die Richtung, die Farbe ist Zugabe — nie Rot/Grün allein. */ .kennzahl .kztrend { font-size: .84rem; font-weight: 600; } .kztrend.hoch { color: var(--gut-text); } .kztrend.runter { color: var(--fehler-text); } /* =========================================================== 8. Tabellen */ table.liste { width: 100%; border-collapse: collapse; background: var(--grund); border-radius: var(--r); overflow: hidden; } table.liste th { text-align: start; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gedaempft); background: var(--flaeche-tief); padding: var(--a3) var(--a4); white-space: nowrap; } table.liste td { padding: var(--a3) var(--a4); border-top: 1px solid var(--linie); } table.liste tbody tr:hover { background: var(--flaeche); } /* ======================================= 8a. Sortierbare Spaltenköpfe Seit dem 26.10.2026 (Renés Auftrag zum Einkaufscontrolling: „Tabellen Übersichtlichkeit und Funktion nicht vergessen"). **Der Kopf bleibt ein Kopf.** Er sieht nicht wie ein Knopf aus — er trägt nur ein Zeichen, das sagt, dass man ihn anklicken kann: `⇅` ruhend, `▾`/`▴` an der Spalte, nach der gerade geordnet ist. *Zehn Knöpfe in einer Kopfzeile sehen aus wie zehn Handlungen, und keine davon ist die Tabelle.* **Das Ziel ist die ganze Zelle**, nicht das Wort darin: `display: block` plus die negativen Abstände des `th` — ein 14 Pixel hohes Klickziel in einer Kopfzeile trifft niemand mit dem Finger (WCAG 2.5.8, dieselbe Lehre wie bei `.ansichtswahl` am 09.10.2026). */ table.liste th:has(> .sortkopf) { padding: 0; } .sortkopf { display: block; padding: var(--a3) var(--a4); color: inherit; text-decoration: none; } .sortkopf:hover { background: var(--linie); color: var(--text); } .sortkopf.an { color: var(--text); } /* **Das ruhende Zeichen ist leise und wird beim Überfahren deutlich** — sonst stehen in jeder Kopfzeile neun gleich laute Zeichen, und keines sagt etwas. */ .sortpfeil { margin-inline-start: var(--a2); opacity: .35; } .sortkopf:hover .sortpfeil, .sortkopf.an .sortpfeil { opacity: 1; } /* =============================== 8b. Werkzeuge in einer Tabellenzeile Seit dem 24.10.2026 im Kanon statt in `dienstplan.css` (Renés Notiz an Idee 8: „Prüfe bitte die Buttons und Schaltflächen im Bereich Dienstplan/Mitarbeiter/Dokumente — dort stehen die Button in der Abfrage nach den Nachweisen nicht ordnungsgemäß aus.") **Die Form gab es seit dem 26.09.2026 und sie lag in der falschen Datei.** Das Admin-Tool lädt `dienstplan.css` nicht, also war sie auf `/berichte` **wirkungslos** — dieselbe Klasse wie `--radius-klein` am 10.10.2026: *eine Klasse, die nichts bewirkt, fällt nicht auf.* **`min-height: 0` ist hier wieder die halbe Regel** (die Lehre vom 01.10.2026, zum zweiten Mal): Der Kanon gibt **jedem** `button` 44 Pixel Mindesthöhe. `height: 32px` setzt die Höhe und hebt das Mindestmaß **nicht** auf — aus 32 × 32 wurden 32 × 44. Ein `` bekommt es nicht, ein `