/* ========================================================================= bauteile.css — die fünf Bauteile, die jede Seite braucht (10.08.2026) ========================================================================= WOFÜR DIESE DATEI DA IST Til, 10.08.2026, nach der neuen Nachrichten-Seite: „wenn diese stringenz in allen teilen von tilly wäre, wäre das toll. ist das so?" Sie war es nicht, und zwar messbar. Gemessen wurde je Seite, welche Klasse ihre Listenzeilen trägt: pe-karte · freigabe-karte · beleg-karte · report-karte · backend-karte · recall-zeile · mahn-zeile · arbeit-zeile · zeile + zwei Seiten mit NEUN Bauteile für dieselbe Sache, jedes mit eigenen Unterklassen (freigabe-kopf/-patient/-meta/-betrag gegen beleg-kopf/-titel/-meta/-nr gegen recall-name/-detail/-weg). Dazu 73 Stellen in 11 Stilblättern, die das Kartenrezept (1 px Rand plus Radius) eigenhändig nachbauen. Das ist keine Frage von Geschmack: wer eine Karte ändert, ändert eine von neun. Die anderen acht laufen auseinander, und nach einem halben Jahr sieht jede Seite anders aus, ohne dass jemand das entschieden hätte. WAS HIER STEHT UND WAS NICHT Hier stehen die FORM und die MASSE eines Bauteils. Nicht hier stehen Farben je Zustand (die stehen bei den Zuständen, farben.css) und nichts, was nur eine Seite braucht. WARUM DIE NAMEN SO HEISSEN, WIE SIE HEISSEN Sie sind nicht erfunden, sondern die schon vorhandenen. `.filter-zeile` gab es (style.css, dort 2026 aus drei Doppelungen zusammengelegt), `.abzeichen` gab es (backend-seiten.css). Ein sechster Name für eine Sache, die schon zwei hat, macht es schlimmer. Neu sind nur die drei, die es wirklich noch nicht gab: `.seitenkopf`, `.segment`, `.leermeldung`. REIHENFOLGE BEIM LADEN Nach knoepfe.css (damit die Bauteile deren ältere Einzelregeln schlagen) und VOR den Seitenblättern (damit eine Seite im Ausnahmefall noch übersteuern kann). Siehe base.html und, für den Kalender, basis.html -- beide Anwendungen laden diese Datei. ========================================================================= */ /* ========================================================================= 1. SEITENKOPF — Titel, Erklärzeichen, Zahl, Hauptaktion ========================================================================= Vor dem 10.08.2026 gab es dieses Muster genau EINMAL, auf der Nachrichten-Seite. Alle anderen dreizehn Backend-Seiten hatten keine Hauptaktion neben dem Titel; sie stand irgendwo im Inhalt oder in einer eigenen Knopfreihe darunter. Die Reihenfolge ist die der Wichtigkeit: was die Seite IST (Titel), was man dazu wissen muss (ⓘ), wie viel davon offen ist (Abzeichen), was man hier TUT (Hauptaktion, rechts). Nur EINE Hauptaktion. Wer zwei hat, hat keine -- die zweite gehört in die Filterzeile oder zur Karte, an der sie wirkt. ------------------------------------------------------------------------ */ .seitenkopf { display: flex; align-items: center; gap: var(--abstand-3); margin-bottom: var(--abstand-4); } .seitenkopf h1 { margin: 0; font-size: 20px; white-space: nowrap; } /* ---- Der Bereichsstrich ------------------------------------------------- Til, 24.08.2026, auf den UI-Audit-Befund "alle Bereiche sehen farblich gleich aus -- man erkennt beim Umschalten nicht, wo man ist": ein schmaler Akzent in der Kopfzeile je Bereich, sonst nichts. DIESELBE FORM WIE AN DER KACHEL, ueber die man hereinkommt: derselbe 3-px-Strich links, dieselbe Farbe aus [data-bereich="..."]. Damit ist der Strich kein neues Zeichen, das man lernen muss, sondern dasselbe, das man eine Sekunde vorher angeklickt hat -- die Farbe reist mit. NUR HIER UND NICHT AUF DER GANZEN SEITE. Das Audit schlug ein Farbschema je Themenbereich vor, also getönte Flächen. Dagegen sprechen die Statusfarben: in dieser Anwendung bedeutet Rot "da muss jemand hin" und Grün "erledigt". Eine zweite Farbsprache auf denselben Flächen nähme beiden die Aussage. Ein Strich am Kopf sagt "wo", die Statusfarben sagen "was" -- und sie treffen sich nirgends. `--strich-farbe` kommt aus design-tokens.css und trägt dort selbst einen Rückfall (die Randfarbe). Ein unbekannter Bereichsname gibt also einen unauffälligen grauen Strich und keine leere Lücke. */ .seitenkopf[data-bereich] { border-left: var(--strich) solid var(--strich-farbe); padding-left: var(--abstand-3); } /* Die Hauptaktion rechts, und sie behält ihre Inhaltsbreite: `button` trägt seitenweit `width: 100%` (style.css:297), und in einer Flexzeile wird daraus die ganze Zeile. Diese eine Zeile hat mich am 10.08.2026 zweimal eine Messung gekostet. */ .seitenkopf > button, .seitenkopf > .button-optik { margin-left: auto; width: max-content; flex: 0 0 auto; height: var(--knopf-hoehe-md); min-height: var(--knopf-hoehe-md); padding: var(--knopf-polster-md); font-size: 13px; } /* Das ⓘ steht IN der Überschrift und behält die Tippgröße von 44 px -- negative Außenabstände halten die Zeile trotzdem flach. Ohne sie wäre die Kopfzeile 44 px hoch, und am Handy bräche das Zeichen unter den Titel. */ .seitenkopf .info-knopf { width: var(--knopf-hoehe-lg); height: var(--knopf-hoehe-lg); padding: 0; margin-block: calc((var(--knopf-hoehe-lg) - 26px) / -2); } /* EINE ZEILE AUCH AM HANDY -- die Wahl gehoert der Seite (11.08.2026). ------------------------------------------------------------------------ Die Vorgabe ist der Umbruch: wo neben dem Titel eine Zahl UND eine Hauptaktion mit Text steht, bleiben dem Titel am Handy rund 150 px. Der Kalender braucht das nicht -- dort ist die Hauptaktion am Handy ein Lupenknopf von 44 px, und der passt neben den Titel. Deshalb ein Zusatz und kein Spezifitaetswettlauf im Seitenblatt: `.seitenkopf.eine-zeile`. Der Anlass war eine Reihenfolge, die ich selbst falsch gebaut hatte. Im Kalender laedt das Seitenblatt VOR den gemeinsamen (so gewollt, siehe basis.html: "beide muessen den Seitenstil weiterhin schlagen") -- meine Regeln in kalender.css konnten die Vorgabe hier also gar nicht ueberstimmen, und das Bild blieb wie vorher. Gemessen: Titel und Knopf standen weiter auf zwei Zeilen, 88 px hoch. */ .seitenkopf.eine-zeile { flex-wrap: nowrap; } @media (max-width: 700px) { /* Titel allein in die erste Zeile, Zahl und Hauptaktion in die zweite. Sonst bleiben dem Titel neben beidem rund 150 px. */ .seitenkopf { flex-wrap: wrap; } .seitenkopf h1 { flex: 1 1 100%; } .seitenkopf.eine-zeile { flex-wrap: nowrap; } .seitenkopf.eine-zeile h1 { flex: 0 1 auto; min-width: 0; } } /* ========================================================================= 2. SEGMENT — eine Wahl aus wenigen, alle sichtbar ========================================================================= Für drei bis fünf Werte, die man vergleichen will (Ansicht, Zeitraum, Umfang). Mehr Werte gehören in ein Auswahlfeld: ein Segment mit acht Knöpfen ist eine Reihe, die umbricht, und dann ist die Wahl nicht mehr auf einen Blick zu sehen. Die Höhe kommt aus dem Token. Die Knöpfe DARIN sind zwangsläufig kleiner (Polster und Abstand der Hülle) -- das ist der eine Fall, in dem ein Bedienelement keine Tokenhöhe trägt, und pruefe_ui_raster.py kennt ihn: geprüft wird die Hülle, nicht ihre Teile. Am Touchgerät sind auch die Teile 44 px (style.css, @media (pointer: coarse)). ------------------------------------------------------------------------ */ .segment { display: inline-flex; height: var(--knopf-hoehe-md); background: var(--farbe-flaeche); border: 1px solid var(--farbe-flaeche-rand); border-radius: var(--radius-gross); padding: 2px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .segment::-webkit-scrollbar { display: none; } /* AM TOUCHGERAET WAECHST DIE HUELLE MIT (17.08.2026) Der Kopf oben sagt seit jeher: "Am Touchgeraet sind auch die Teile 44 px (style.css, @media (pointer: coarse))." Die Huelle stand daneben auf fester Hoehe -- 34 px. Die Teile wuchsen also aus ihr heraus. UNTER 700 px faengt das die Regel weiter unten schon ab (umbrechen statt scrollen). Diese hier gilt dem anderen Fall: einem BREITEN Touchgeraet -- dem iPad im Querformat. Dort ist der Zeiger grob, aber die Seite breit, also greift der Umbruch nicht und die feste Hoehe stand allein da. Aufgefallen am 17.08.2026 auf einem Pixel 9 Pro an der neuen Berechtigungsansicht; der Schalter steht ebenso im Posteingang und bei den Fehlermeldungen. */ @media (pointer: coarse) { .segment { height: auto; align-items: stretch; } .segment > button { height: auto; } } .segment > button { height: calc(var(--knopf-hoehe-md) - 6px); min-height: 0; padding: 0 12px; border: 0; background: none; box-shadow: none; width: auto; /* Stand hier als `calc(var(--radius-gross) - 2px)`: die Segmentknöpfe waren um 2 px weniger gerundet als ihre Hülle. Mit --radius-gross = 0 (12.08.2026) ergäbe die Rechnung -2px -- ein ungültiger Wert, den der Browser stillschweigend verwirft. Das Ergebnis wäre dasselbe wie 0, der Grund aber unlesbar. */ border-radius: 0; font-family: var(--font-text); font-size: 13px; color: var(--farbe-text-gedaempft); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .segment > button[aria-pressed="true"] { background: var(--farbe-karte); color: var(--farbe-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .segment .zahl { font-size: 11px; color: var(--farbe-text-gedaempft); font-variant-numeric: tabular-nums; } @media (max-width: 700px) { /* UMBRECHEN, NICHT SCROLLEN. Am 10.08.2026 zweimal entschieden, beide Male aus demselben Grund: von einer scrollenden Reihe sah man auf 412 px nur „Mir zugewiese…" -- ein abgeschnittenes Wort ohne Hinweis, dass es weitergeht. Ein verstecktes Scrollfeld ist kein Hinweis. */ .segment { flex-wrap: wrap; height: auto; overflow: visible; width: 100%; } .segment > button { flex: 1 1 auto; justify-content: center; } } /* ========================================================================= 3. KARTE — die Fläche, auf der ein Ding steht ========================================================================= `.karte` gab es schon, war aber die ANMELDEKARTE: 420 px breit, 40 px Polster, Schatten. Das ist eine Sonderform und kein Bauteil. Sie heißt deshalb ab dem 10.08.2026 `.karte.formular` und steht an acht Stellen (patient_login, patient_verify, zwei Passwortseiten, patient_stammdaten). `.karte` selbst trägt jetzt nur, was JEDE Karte braucht: Fläche, Rand, Radius. Kein Polster -- das hängt davon ab, was drin steht, und ein Bauteil, das Polster mitbringt, wird an der Hälfte der Stellen wieder überschrieben. .karte-kopf und .karte-inhalt sind die aufklappbare Form: Kopf immer sichtbar und anfassbar, Inhalt erst nach dem Klick. Das ist das Muster der Nachrichten-Seite, und es ist der Grund, warum diese Seite mit 10 Vorgängen ruhig aussieht und die Zahlungsseite mit 3 Zeilen unruhig. ------------------------------------------------------------------------ */ .karte { background: var(--farbe-karte); border: 1px solid var(--farbe-flaeche-rand); border-radius: var(--radius); } /* Die alte Anmeldekarte, unverändert in ihrer Wirkung. */ .karte.formular { width: 100%; max-width: 420px; box-shadow: var(--schatten); padding: 40px 36px; } .karte.offen { border-color: var(--farbe-akzent); } /* Der Kopf einer aufklappbaren Karte. Er IST der Knopf -- nicht ein Knopf darin: eine Zeile, die man anfassen kann, muss ganz anfassbar sein. */ .karte-kopf { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; gap: var(--abstand-3); width: 100%; text-align: left; padding: 13px var(--abstand-4); background: transparent; border: 0; border-radius: 0; cursor: pointer; font-size: inherit; /* Die Knopf-Grundregel färbt Knopftext weiß (Primärknopf). Ohne diese Zeile stünde der Titel weiß auf weiß -- im Mockup vom 10.08.2026 genau so passiert und erst im Bild aufgefallen. */ color: var(--farbe-text); min-height: 0; } /* Der Zustand :hover ist ausdrücklich gesetzt, weil `button:hover` aus knoepfe.css sonst die Aktionsfarbe darüberlegt: der Kartenkopf wurde tiefschwarz, sobald der Zeiger ihn berührte. Im Quelltext stand „transparent", und das war wahr -- nur nicht in diesem Zustand. */ .karte-kopf:hover { background: var(--farbe-flaeche); color: var(--farbe-text); } .karte.offen > .karte-kopf { background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-flaeche-rand); } .karte-kopf:active { box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .16); } .karte-kopf:focus-visible { outline: 2px solid var(--farbe-fokus); outline-offset: 2px; } .karte-titel { display: block; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Die Kurzangabe steht UNTER dem Titel, nicht dahinter: dahinter wurde sie bei jedem zweiten Eintrag abgeschnitten, und dann fehlte genau die Angabe, nach der man sucht (Betrag, Datum, Grund). */ .karte-meta { display: block; margin-top: 3px; font-weight: 400; font-size: 12.5px; color: var(--farbe-text-gedaempft); white-space: normal; } .karte-marken { display: flex; align-items: center; gap: 8px; } /* DER TITEL WAR AM HANDY NULL PIXEL BREIT (Til, 12.08.2026) ------------------------------------------------------------------------ Gemessen an einer offenen Aufgabe bei 412 px: `.karte-text` war **0 px breit und 103 px hoch** -- der Titel unsichtbar, die Kurzangabe eine Buchstabensäule. Die Abzeichen daneben hatten 220 von 290 px. MEIN ERSTER BEFUND WAR FALSCH, und das gehört hierhin: ich habe auf die Flex-Falle geschlossen (`min-width: 0` fehlt) und `flex`-Regeln geschrieben. Sie haben nichts geändert, denn `.karte-kopf` ist **kein Flex-Container, sondern ein Grid** -- `flex` an einem Grid-Kind ist wirkungslos. Gemessen: `display: grid`, und der Text blieb bei 0. Die wirkliche Ursache ist die Spaltenaufteilung `8px minmax(0, 1fr) auto`: die `auto`-Spalte nimmt sich ihren Inhalt, und Abzeichen brechen nicht um. Bleiben nach Polster und Abständen 218 px, und die Abzeichen wollen 220, dann bekommt `minmax(0, 1fr)` genau **0**. Die Spalte, die nachgeben KANN, verliert gegen die, die es nicht kann. Am Schirm (1500 px) war alles in Ordnung -- 706 px für den Text. Ein Fehler, den nur die Messung am Handy zeigt. Die Lösung ist eine Zeile mehr statt einer Spalte weniger: Punkt und Titel oben, Abzeichen darunter und linksbündig. Dieselbe Entscheidung wie bei `.seitenkopf`. */ @media (max-width: 700px) { .karte-kopf { grid-template-columns: 8px minmax(0, 1fr); } .karte-marken { grid-column: 2; justify-self: start; flex-wrap: wrap; margin-top: 2px; } } .karte-inhalt { padding: var(--abstand-4) var(--abstand-3) var(--abstand-4) 0; } /* Der Punkt sagt die Art. Farbe allein trägt keine Aussage (WCAG 1.4.1) -- die Art steht deshalb zusätzlich als Wort in der Kurzangabe. */ .karte-punkt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; background: var(--farbe-flaeche-rand); } .karte-chevron { flex-shrink: 0; width: 14px; text-align: center; color: var(--farbe-text-gedaempft); font-size: 11px; transition: transform .12s ease; } .karte-kopf[aria-expanded="true"] .karte-chevron { transform: rotate(180deg); } /* ========================================================================= 4. LEERMELDUNG — was dasteht, wenn nichts dasteht ========================================================================= Am 10.08.2026 hatten 14 Backend-Seiten irgendeinen Text für den leeren Fall, aber genau EINE nannte den GRUND und trug einen Weg heraus. Auf der Nachrichten-Seite war der leere Fall vorher eine weiße Fläche -- gemessen: der Textinhalt der Liste war die leere Zeichenkette. Til hielt die Seite dafür für kaputt, und das war die richtige Schlussfolgerung aus dem, was zu sehen war. Eine Leermeldung besteht aus drei Teilen, und keiner ist Zierde: Titel -- dass hier nichts ist Grund -- WARUM (welche Filter stehen), sonst rät man Ausweg -- ein Knopf, der den Grund wegnimmt Ohne Grund und Ausweg ist es eine höflichere weiße Fläche. WANN NICHT — DIE GRENZE ZU .leer-hinweis (11.08.2026, Paket C) `.leermeldung` gilt für das, was eine SEITE oder eine ganze Liste ausmacht: keine Rechnungen, kein Treffer, nichts zu exportieren. Dort steht der Nutzer vor einer leeren Fläche und braucht den Grund. `.leer-hinweis` (style.css) bleibt für den kleinen Hinweis INNERHALB einer Karte: "Keine Angaben vorhanden", "Keine vorhanden (oder älter als 1 Jahr)", "Lädt …". In der Patientenakte sind das fünfzehn Abschnitte auf einer Seite; fünfzehn gestrichelte Kästen mit 44 px Polster wären keine Aufräumung, sondern eine Seite aus Rahmen. Ein Abschnitt in einer Karte, die selbst schon eine Überschrift trägt, hat seinen Grund im Titel stehen. Kurz: eine Leermeldung ersetzt eine LISTE, ein Leerhinweis eine ZEILE. ------------------------------------------------------------------------ */ .leermeldung { padding: var(--abstand-5) var(--abstand-4); text-align: center; background: var(--farbe-karte); border: 1px dashed var(--farbe-flaeche-rand); border-radius: var(--radius); } .leermeldung-titel { font-weight: 600; margin-bottom: 4px; } .leermeldung-grund { font-size: 13px; color: var(--farbe-text-gedaempft); } .leermeldung button { margin: var(--abstand-3) auto 0; display: inline-flex; align-items: center; width: max-content; height: var(--knopf-hoehe-md); min-height: var(--knopf-hoehe-md); padding: var(--knopf-polster-md); font-size: 13px; } /* ========================================================================= 5. ABZEICHEN — ein Wort über einen Zustand ========================================================================= Stand bis zum 10.08.2026 in backend-seiten.css und ist von dort hierher gezogen, unverändert in Form und Maß. Die FARBEN je Zustand (.z-neu, .z-erledigt …) bleiben dort, wo die Zustände stehen -- sie gehören zur Bedeutung, nicht zur Form. Eine Höhe, aus dem kleinen Token. Vor dem 10.08.2026 trugen vier Varianten (.status-abzeichen, .typ-abzeichen, .via-abzeichen, .pe-abzeichen) ihre eigenen Polsterzahlen; in einer Reihe mit einem Knopf standen sie damit krumm. ------------------------------------------------------------------------ */ .abzeichen { display: inline-flex; align-items: center; height: var(--knopf-hoehe-sm); padding: var(--knopf-polster-sm); border-radius: var(--radius-gross); font-size: 11.5px; white-space: nowrap; flex-shrink: 0; background: var(--farbe-flaeche); color: var(--farbe-text-gedaempft); } /* `display` schlägt das hidden-Attribut: ohne diese Zeile stünde ein Abzeichen, das das Markup versteckt, sichtbar da. Die Falle trifft jede Regel, die display auf ein Element mit [hidden] setzt. */ .abzeichen[hidden] { display: none; } /* ---- VIER BEDEUTUNGEN, VIER FARBEN ------------------------------------- Til, 24.08.2026, auf den UI-Audit-Befund zu den Statusanzeigen: "eine Chip-Form überall, Farbe nur nach Bedeutung." Vorher trugen sechs Familien dieselbe Aufgabe mit eigenen Namen und eigenen Maßen: .abzeichen mit status-ja/status-nein, .typ-abzeichen mit typ-wartet/typ-frei, .via-abzeichen mit via-stripe/via-bank_sync/ via-offen, .stufe-abzeichen, dazu zwei Pillen im Patientenportal. Die Farben stimmten grob überein — die Namen sagten nur nichts darüber. Wer "typ-frei" liest, weiß nicht, dass es dasselbe Grün ist wie "status-ja". WAS DIE VIER BEDEUTEN gut abgeschlossen, und zwar richtig herum: bezahlt, freigegeben, unterschrieben, zugeordnet wartet liegt an und ist noch offen. Kein Vorwurf, nur ein Zustand ruht zurückgezogen, verworfen, erstattet, stillgelegt. Der Vorgang ist beendet, aber nicht erfüllt worden -- und das ist etwas anderes als "wartet". Diese Farbe fehlte, weshalb Verworfenes bis heute wie Wartendes aussah problem überfällig, fehlgeschlagen, abgelehnt. Hier muss jemand hin WARUM DIE FARBEN HIER STEHEN UND NICHT BEI DEN SEITEN Der Kopf dieser Datei sagt: hier stehen Form und Maße, nicht Farben je Zustand. Das gilt für seitenspezifische Farben. Diese vier sind keine -- sie SIND das Bauteil: ein Abzeichen ohne Bedeutungsfarbe ist ein grauer Kasten. Sie über drei Blätter zu verstreuen war genau der Zustand, aus dem dieser Umbau kommt. Die Grundregel oben bleibt der Rückfall: ein Abzeichen ohne eine dieser vier Klassen ist ruhig grau -- richtig für alles Beschreibende (die Zuweisung im Posteingang, die Art eines Behandlers). */ .abzeichen.gut { background: var(--status-bezahlt-bg); color: var(--status-bezahlt); } .abzeichen.wartet { background: var(--status-erinnerung-bg); color: var(--status-erinnerung); } .abzeichen.ruht { background: var(--farbe-flaeche); color: var(--farbe-text-gedaempft); } .abzeichen.problem { background: var(--status-inkasso-bg); color: var(--status-inkasso); } /* ========================================================================= 6. AKTIONSZEILE, ZEICHENKNOPF, META-FUSSZEILE — 12.08.2026 ========================================================================= Til hat am 12.08. die Aufgaben-Detailansicht neu geordnet und die Freigabe „systemweit" gegeben. Drei der sechs Punkte sind allgemein und stehen deshalb hier, nicht auf der Nachrichten-Seite: .aktionszeile verwandte Handlungen in EINER Zeile, gleiche Höhe .knopf-zeichen ein Knopf, der nur ein Zeichen trägt (Papierkorb) .meta-fuss Auskunft am Ende: Label und Wert je in einer Zeile DIE HÖHE KOMMT AUS DEM TOKEN, und das ist hier eine Korrektur an mir selbst: mein Mockup hatte 40 px: einen Wert, den das System nicht kennt (es hat 44/34/26). Wer nach einem Bild baut, prüft die Zahlen darin. ------------------------------------------------------------------------ */ .aktionszeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); } /* Der Hauptknopf trägt Inhaltsbreite statt der ganzen Zeile: `button` gilt seitenweit mit `width: 100%` (style.css:297), und daraus würde hier ein Balken, unter dem die zweite Handlung in die nächste Zeile fällt. */ .aktionszeile > button, .aktionszeile > .button-optik { width: max-content; flex: 0 0 auto; height: var(--knopf-hoehe-md); min-height: var(--knopf-hoehe-md); padding: var(--knopf-polster-md); font-size: 13px; } /* Ein Zeichenknopf ist quadratisch und so hoch wie die Zeile -- sonst ist „gleiche Höhe" eine Behauptung. */ .knopf-zeichen { display: inline-flex; align-items: center; justify-content: center; width: var(--knopf-hoehe-md); height: var(--knopf-hoehe-md); min-height: var(--knopf-hoehe-md); padding: 0; flex: 0 0 auto; background: var(--farbe-karte); color: var(--farbe-text-gedaempft); border: 1px solid var(--farbe-flaeche-rand); } .knopf-zeichen:hover { background: var(--farbe-flaeche); color: var(--farbe-text); border-color: var(--farbe-flaeche-rand); } /* CHIPS UND KNÖPFE IN EINER ZEILE HABEN DIESELBE HÖHE. `.chip` (style.css) hatte nur Polster und richtete sich nach seinem Text -- neben einem Knopf von 34 px stand er 32 oder 36 hoch, je nach Schrift. */ .chip-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); } .chip-reihe .chip, .chip-reihe input[type="date"] { height: var(--knopf-hoehe-md); min-height: var(--knopf-hoehe-md); width: auto; display: inline-flex; align-items: center; gap: 6px; } /* Das × am aktiven Chip hebt die Rückstellung auf -- an der Stelle, an der sie gesetzt wurde. Vorher stand dafür ein eigener Knopf „jetzt wieder anzeigen" in der Zeile darunter (Til, 12.08.2026: weg damit). */ .chip-weg { width: 18px; height: 18px; min-height: 0; padding: 0; background: none; border: 1px solid currentColor; color: inherit; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .chip-weg:hover { background: rgba(255, 255, 255, .25); color: inherit; } /* Die Auskunft am Ende. Klein, Label links, Wert rechts -- gestapelt braucht dasselbe die doppelte Höhe, und niemand liest es zweimal. */ .meta-fuss { margin: 0; padding-top: var(--abstand-3); border-top: 1px solid var(--farbe-flaeche-rand); display: flex; flex-direction: column; gap: 4px; } .meta-fuss > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-3); font-size: 12px; } .meta-fuss dt { color: var(--farbe-text-gedaempft); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .meta-fuss dd { margin: 0; text-align: right; }