/* ============================================================================ emha.app — gemeinsames Designsystem ============================================================================ Diese Datei ist die einzige Quelle für das Aussehen aller Apps. Was hier steht, wird in keiner App noch einmal geschrieben. Die Vereinbarung, in drei Sätzen: 1. Vor einer neuen Ansicht zuerst in die Designvorlage sehen: https://auth.emha.app/shared/design.html 2. Gibt es die Sache dort, wird die Klasse benutzt — nicht nachgebaut. 3. Braucht man sie öfter als einmal, kommt sie hierher. Eine eigene Regel in der App schreibt man nur für das, was wirklich nur diese eine Ansicht braucht. Warum das hier so ausführlich steht: die Leiter aus Farb-, Abstands- und Schriftvariablen gab es vorher schon, aber niemand stand darauf. Gemessen am 2026-09-16 waren im Bestand: · `main { max-width; margin:0 auto; padding }` neunmal kopiert, mit drei verschiedenen Breiten und zwei verschiedenen Innenabständen · sechs Klassennamen (.convert-card, .go-card, .lookup-card, .share-card, .speak-card, .pass-card) für genau das, was .card schon war · .btn-icon fünfmal einzeln definiert, jedes Mal leicht anders · .status-ok/-warn/-fail dreimal, mit drei verschiedenen Grüntönen · .tabs/.tab-btn viermal, unter demselben Namen mit zwei völlig verschiedenen Aussehen · 31 verschiedene font-size-Rohwerte, obwohl es eine Token-Leiter gab · stackweit genau eine einzige h1-Regel — alle übrigen Überschriften waren Browservorgabe Aufbau dieser Datei: 1 Variablen Farbe, Zustand, Schrift, Abstand, Radius, Tiefe, Bewegung 2 Grundschicht rohe Elemente: body, Überschriften, Absätze, Links, Code 3 Aufbau main, .stack, .cluster, .toolbar, .grid-auto, .view-header 4 Formular Eingabefelder, Auswahl, .field, .hint, .field-error 5 Bausteine .btn, .icon-btn, .card, .tabs, .chip, .badge, .data-table, .facts, .list-row, .dialog, .callout, .empty-state 6 Zustand Laden, Leere, Fehler, Erfolg 7 Rahmen Kopfleiste, Kontomenü 8 Bewegung & Druck 9 Schriftdateien ============================================================================ */ /* ============================================================================ 1 VARIABLEN ========================================================================= */ :root { /* Native Bedienelemente (Ankreuzfelder, Datumsauswahl, Bildlaufleisten) folgen dem Thema. Ohne diese Angabe malte Chrome sie im Dunklen weiß. */ color-scheme: light; /* Ankreuzfeld/Auswahlknopf unausgewählt: graue Fläche, Rand 3:1 gegen Karte. */ --control-bg: #e9edf1; --control-border: #7b8794; /* --- Flächen ------------------------------------------------------------- Drei Ebenen, mehr nicht: die Seite, eine Fläche darauf, und ein Feld, das darin vertieft liegt. Wer eine vierte Ebene braucht, braucht in Wahrheit eine andere Anordnung. */ --bg: #f3f5f7; /* die Seite (2026-09-22: vom Dashboard-Redesign übernommen, kühleres Blaugrau statt warmem Salbeigrau) */ --card: #fcfdfd; /* Karte, Panel, Dialog */ --border: #dce2e8; /* Haarlinie, 1px, nie dicker */ --text: #171b20; --muted: #586573; /* Nebentext, Beschriftungen, Einheiten */ /* --- Akzent -------------------------------------------------------------- Kabelblau. --accent färbt Text und Linien, --accent-solid füllt Flächen mit weißer Schrift darauf. Im hellen Thema gleich, im dunklen nicht — deshalb sind sie nicht austauschbar. */ --accent: #1f4e79; /* 7,9:1 auf --bg */ --accent-solid: #1f4e79; /* 8,7:1 gegen weiße Schrift */ --accent-solid-hover: #163a5c; /* Getönte Auflage für Zeilen unter dem Zeiger und für die ausgewählte Zeile. Vorher hat sich das jede App als rgba(31,78,121,0.07) selbst hingeschrieben — mit der Folge, dass eine Änderung am Akzent hier nicht mitkam. */ --accent-wash: rgba(31, 78, 121, 0.07); --accent-wash-strong: rgba(31, 78, 121, 0.11); /* --- Zustandsfarben ------------------------------------------------------ Vier Aussagen, mehr gibt es nicht: es läuft, sieh hin, es ist kaputt, wir wissen es nicht. Alle vier sind gegen --card auf mindestens 4,5:1 geprüft. Der Warnton war vorher stackweit #b8860b — auf Kartengrund sind das 3,0:1 und damit unter AA. In doku, lookup und status stand echte Warnmeldung in dieser Farbe. #8a6400 sagt dasselbe und ist lesbar (5,0:1). Nie Farbe allein. Jede Zustandsanzeige trägt zusätzlich ein Zeichen, eine Form oder ein Wort — sonst ist sie für farbfehlsichtige Nutzer keine Aussage, sondern eine Behauptung. */ --ok: #3f7d4e; /* 4,8:1 */ --warn: #856009; /* 5,6:1 (2026-09-22: vom Dashboard-Redesign übernommen) */ --danger: #b42332; /* 6,4:1 (2026-09-22: vom Dashboard-Redesign übernommen) */ --danger-solid: #b42332; /* Fläche mit weißer Schrift (6,4:1) */ --info: var(--accent); --neutral: var(--muted); /* --- Schrift ------------------------------------------------------------- Plex Sans für alles. Plex Mono ausschließlich für Werte, die man vergleicht, abtippt oder diktiert: Adressen, Prüfsummen, Messwerte, Portnummern, Befehlszeilen. Mono als Gestaltungsmittel für Beschriftungen wäre Dekoration und ist hier nicht gemeint. */ --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Acht Stufen. Sie stammen aus dem, was im Bestand ohnehin schon am häufigsten stand — die Leiter ist also nicht erfunden, sondern aufgeräumt. Wer eine neue Größe braucht, braucht fast immer eine vorhandene. */ /* Unterhalb der Leseschrift. NUR für Beschriftung, die auf einer Blende oder einem Etikett steht und nicht gelesen, sondern abgezählt wird — Portnummern, der Namensstreifen einer Geräteblende. Nie für Fließtext oder Bedienelemente. Vorher standen dafür in doku vier verschiedene Werte nebeneinander (0.6rem, 0.62rem, 0.68rem, 10px) und meinten alle dasselbe. */ --fs-3xs: 0.625rem; /* 10px — Blenden-/Etikettenbeschriftung */ --fs-2xs: 0.6875rem; /* 11px — Portnummern, Mikro-Beschriftung */ --fs-xs: 0.75rem; /* 12px — Tabellenkopf, Meta, Einheiten */ --fs-sm: 0.85rem; /* 14px — Nebentext, dichte Tabellen, Reiter */ --fs-base: 0.95rem; /* 15px — Fließtext, Eingabefelder */ --fs-md: 1.05rem; /* 17px — h3, Dialogüberschrift */ --fs-lg: 1.25rem; /* 20px — h2 */ --fs-xl: 1.5rem; /* 24px — h1 */ --fs-2xl: 2rem; /* 32px — die eine große Zahl, die Startseite */ --lh-tight: 1.2; /* Überschriften, große Zahlen */ --lh-snug: 1.35; /* dichte Listen, Tabellenzellen */ --lh-base: 1.55; /* Fließtext */ --fw-normal: 400; --fw-medium: 500; /* Messwerte in Mono */ --fw-semibold: 600; /* Überschriften, Schaltflächen, Namen */ --fw-bold: 700; /* Zeilenlänge. Über 80 Zeichen verliert das Auge beim Rücksprung die Zeile. */ --measure: 68ch; /* --- Abstände ------------------------------------------------------------ 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Keine krummen Zwischenwerte. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* --- Radien -------------------------------------------------------------- Der Radius sagt, wie groß eine Fläche ist — nicht, wie freundlich sie sein soll. Klein für Felder, mittel für Flächen, groß für das, was über der Seite liegt. Alles auf denselben Radius zu setzen nimmt der Anordnung genau diese Information. */ --radius-sm: 8px; /* Eingabefeld, Schaltfläche, kleine Kachel */ --radius-md: 10px; /* Karte, Panel, Tabellenrahmen */ --radius-lg: 14px; /* Dialog, Menü — was über der Seite schwebt */ --radius-pill: 999px; /* Etikett, Filter, Fortschritt */ /* --- Tiefe --------------------------------------------------------------- Drei Stufen, passend zu den drei Radien. Im hellen Thema trägt der Schatten, im dunklen der Rand — ein Schatten auf fast schwarzem Grund ist schlicht nicht sichtbar und macht die Fläche nur schmutzig. */ --shadow-sm: 0 1px 2px rgba(23, 27, 32, 0.04), 0 1px 3px rgba(23, 27, 32, 0.05); --shadow-md: 0 2px 4px rgba(23, 27, 32, 0.04), 0 8px 16px -8px rgba(23, 27, 32, 0.14); --shadow-lg: 0 8px 24px rgba(23, 27, 32, 0.12); --shadow-elevated: var(--shadow-lg); /* alter Name, bleibt gültig */ /* --- Bewegung ------------------------------------------------------------ Bewegung ist eine Antwort, keine Verzierung. Sie zeigt, was sich gerade geändert hat und wohin etwas gegangen ist. Eine Einblendung auf jeder Karte und ein Aufleuchten bei jedem Überfahren sind genau das Gegenteil: Bewegung ohne Aussage. Beim Laden einer Ansicht gibt es genau einen Moment, nicht fünf. */ --dur-1: 120ms; /* Zustand am Ort: Farbe, Rand, Haken */ --dur-2: 180ms; /* Öffnen, Einblenden, Ankommen */ --dur-3: 320ms; /* größere Wege, selten */ --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); /* kommt an und bleibt stehen */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* --- Seitenbreite -------------------------------------------------------- Jede App setzt --page-max einmal auf :root und schreibt nie wieder eine eigene main-Regel. Drei Werte decken alles ab: --w-form 560px ein einzelnes schmales Formular (profile) --w-tool 640px ein Werkzeug auf einer Karte (convert, lookup, pass, share, speak, labels) --w-page 1280px Arbeitsbereich mit Listen und Tabellen (customers, tickets, know, go, status, runbooks, emergency, settings) — seit 2026-09-23 eine Breite für alle, vorher 960px, zu schmal für die Tabellen doku setzt einen eigenen, breiteren Wert: eine Schrankansicht ist so breit, wie der Schrank ist. */ --w-form: 560px; --w-tool: 640px; --w-page: 1280px; --page-max: var(--w-page); /* Höhe der Kopfleiste. Steht als Token da, weil sich etwas darunter daran ausrichten muss: die Kundenzeile der Shell klebt auf dem Telefon bei top: var(--header-h) und wäre bei top: 0 exakt hinter der Kopfleiste verschwunden — genau der Fehler, den diese Zahl als Literal an zwei Stellen provoziert hat. */ --header-h: 64px; /* Fläche der Tabellenköpfe: zwischen Seitengrund und Karte. Deckend, weil ein stehenbleibender Kopf (.is-sticky) sonst die Zeilen durchscheinen ließe. */ --table-head-bg: color-mix(in srgb, var(--bg) 65%, var(--card)); /* Feine Punktrasterung des Seitenhintergrunds — das Patchfeld hinter allem. Sie darf nur in wirklich leeren Bereichen auffallen und nie mit Inhalt konkurrieren. */ --texture-dot: rgba(23, 27, 32, 0.07); } :root[data-theme="dark"] { color-scheme: dark; --control-bg: #2b343f; --control-border: #75828f; --bg: #14191f; /* 2026-09-22: vom Dashboard-Redesign übernommen */ --card: #1d242d; --border: #36414d; --text: #eef0ea; --muted: #afbdca; --accent: #5b9bd5; /* 6,0:1 auf dunklem --bg */ --accent-solid: #2f6fae; /* 5,3:1 gegen weiße Schrift */ --accent-solid-hover: #24578c; --accent-wash: rgba(91, 155, 213, 0.10); --accent-wash-strong: rgba(91, 155, 213, 0.16); --ok: #6aae7c; /* 5,9:1 */ --warn: #e6c271; /* 9,2:1 (2026-09-22: vom Dashboard-Redesign übernommen) */ --danger: #ff9b9e; /* 7,8:1 (2026-09-22: vom Dashboard-Redesign übernommen) */ --danger-solid: #c62f3d; /* Fläche mit weißer Schrift (5,2:1) — --danger ist hier Textfarbe */ /* Im Dunklen tragen die Ränder, nicht die Schatten. --shadow-sm ist absichtlich leer: ein Schatten unter einer Karte auf #14191f ist nicht zu sehen, er trübt nur die Kante. */ --shadow-sm: none; --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --texture-dot: rgba(255, 255, 255, 0.055); } /* --- Semantische Alias-Schicht (Ops-Console, 2026-09-22) --------------------- Zeigt nur auf bestehende Werte, ersetzt nichts. Neue Bausteine (Shell, Sidepanel, Toast, Filterleiste) benutzen diese Namen; der Bestand bleibt unverändert auf --bg/--card/--text/--muted/--border/--accent-solid/--ok/ --warn/--danger. Warum überhaupt zwei Namen für dieselbe Farbe: die älteren Namen sagen, was etwas IST (--card, --muted), die neuen sagen, wofür es DA ist (--surface-raised, --text-secondary). Umbenennen hätte jede App angefasst; die Alias-Schicht kostet nichts und macht neuen Code lesbar. Vier Einträge sind KEIN Alias, sondern echte neue Werte — sie schließen Lücken, gegen die drei Apps heute mit hartem Hex-Fallback anschreiben (doku/public/styles.css:1188,1199,1200,1202,1207; tickets/public/styles.css:199,303). Sobald sie hier existieren, greifen die Fallbacks dort nie mehr und die Farben sind wieder die der Marke — ohne einen einzigen Diff in jenen Apps. */ :root { --surface: var(--bg); --surface-raised: var(--card); --surface-subtle: color-mix(in srgb, var(--card) 55%, var(--bg)); --text-primary: var(--text); --text-secondary: var(--muted); --text-muted: var(--muted); --border-default: var(--border); --action-primary: var(--accent-solid); --action-primary-hover: var(--accent-solid-hover); --status-ok: var(--ok); --status-warn: var(--warn); --status-danger: var(--danger); --status-info: var(--info); --focus-ring: var(--accent); /* Echte neue Werte (kein Alias, weil es im Bestand keinen zweiten Rahmen-/ Grauton gibt). Alle über color-mix aus vorhandenen Tokens abgeleitet, also in beiden Themen automatisch richtig — keine Wiederholung im Dark-Block. */ --border-strong: color-mix(in srgb, var(--text) 28%, var(--border)); --surface-2: color-mix(in srgb, var(--text) 8%, transparent); --success: var(--ok); /* deckt doku var(--success, #2e9e5b) ab */ --warning: var(--warn); /* deckt doku var(--warning, #c98a00) ab */ --shadow-2: var(--shadow-lg); /* alter Name aus tickets, zeigt auf die echte Stufe */ /* --- Schrift auf gefärbter Fläche ---------------------------------------- ZWEI Token, weil es zwei Flächen gibt und keine Farbe auf beiden trägt. Gemessen: --accent --accent-solid hell weiß 8,66:1 8,66:1 dunkel weiß 2,96:1 ← durchfällt 5,24:1 dunkel --bg 6,07:1 3,43:1 ← durchfällt Im hellen Thema sind beide Töne derselbe Wert, im dunklen nicht: --accent ist dort ein heller Blauton für Text und Linien, --accent-solid ein dunklerer zum Füllen. Ein gemeinsames Token müsste im Dunkeln entweder auf der einen oder der anderen Fläche unter 4,5:1 fallen — deshalb steht am Namen, wozu er gehört, und nicht nur, was er ist. */ --accent-contrast: #fff; /* NUR auf --accent-solid (gefüllte Knöpfe, .badge-solid) */ --on-accent: #fff; /* NUR auf --accent (getönte Flächen, hover-Füllungen) */ } :root[data-theme="dark"] { --on-accent: var(--bg); /* auf dem hellen --accent trägt im Dunkeln die Seitenfarbe */ } /* ============================================================================ 2 GRUNDSCHICHT — wie ein rohes Element aussieht, wenn niemand etwas dazu sagt ---------------------------------------------------------------------------- Diese Schicht ist ein Auffangnetz, kein Diktat. Zwei Regeln machen sie ungefährlich: · Nur nackte Elementselektoren, Spezifität (0,0,1). Jede vorhandene Regel einer App mit Klasse oder Id gewinnt weiterhin. Die Schicht greift also ausschließlich dort, wo sonst gar nichts stünde. · Nie eine Pseudoklasse in einer Regel, die von Komponenten überstimmt werden soll. `a:visited` hat Spezifität (0,1,1) und schlägt damit `.btn-ghost` (0,1,0) — Folge war, dass jede besuchte Schaltfläche blau wurde. Nur `a { color: … }` schreiben; das Verlauf-Lila kommt trotzdem nicht zurück, weil Autorenregeln die Browservorgabe schon aufgrund ihrer Herkunft schlagen, unabhängig von der Spezifität. ========================================================================= */ * { box-sizing: border-box; } /* `hidden` muss immer verstecken. Komponenten mit eigenem display (.field, .field-row, …) schlugen das UA-Stylesheet sonst — Felder, die ein Skript per el.hidden = true ausblendet, blieben sichtbar (runbooks-Zeitplan 2026-09-24). Druckregeln, die [hidden] bewusst zeigen, sind spezifischer und ebenfalls !important, sie gewinnen weiter. */ [hidden]:not([hidden="until-found"]) { display: none !important; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text); /* Ein Hauch Akzent im Grund, damit weiße Karten sich ohne Schatten abheben (Übersicht-Runde 2026-09-22, vorher nur in customers/doku/tickets). Gemischt wird mit dem deckenden --accent, nicht mit --accent-wash: dessen Transparenz machte den Grund durchscheinend, und im dunklen Thema schien der weiße Browser-Hintergrund durch. */ background-color: color-mix(in srgb, var(--bg) 97%, var(--accent)); background-image: radial-gradient(circle, var(--texture-dot) 1.5px, transparent 1.5px); background-size: 28px 28px; /* Bewusst KEIN background-attachment: fixed. Ein fester Hintergrund sieht beim Scrollen zwar ruhiger aus, zwingt den Browser aber dazu, das 28px-Raster bei jedem Scroll-Frame über die volle Seitenhöhe neu zu rastern — auf einer langen Seite (die Designvorlage ist über 8000px hoch) ist das teuer und bringt nichts ein. Die Punkte laufen mit; sie sollen ohnehin nicht auffallen. */ -webkit-text-size-adjust: 100%; } /* --- Überschriften --------------------------------------------------------- Das hier fehlte vollständig. Stackweit gab es genau eine h1-Regel, alles andere war Browservorgabe: h1 als 2em fett mit 0.67em Außenabstand oben und unten. Das ist für eine Anwendungsansicht zu groß und steht zu weit von dem weg, was es überschreibt — der Titel schwebte über der Seite, statt sie anzuführen. Vier Stufen, jede deutlich unterscheidbar, alle mit engem Abstand nach unten: eine Überschrift gehört zu dem, was unter ihr steht, nicht zu dem darüber. Deshalb hat sie oben viel und unten wenig Abstand. */ h1, h2, h3, h4, h5, h6 { margin-block: 0 var(--space-2); font-weight: var(--fw-semibold); line-height: var(--lh-tight); text-wrap: balance; } h1 { font-size: var(--fs-xl); letter-spacing: -0.012em; } h2 { font-size: var(--fs-lg); letter-spacing: -0.006em; } h3 { font-size: var(--fs-md); } h4 { font-size: var(--fs-base); } h5, h6 { font-size: var(--fs-sm); color: var(--muted); } /* Eine Überschrift, die auf Text folgt, braucht Abstand nach oben. Eine, die eine Fläche anführt, nicht — deshalb :not(:first-child) statt margin-top auf allen. */ h2:not(:first-child), h3:not(:first-child) { margin-top: var(--space-5); } p { margin-block: 0 var(--space-3); } p:last-child { margin-bottom: 0; } /* Zeilenlänge nur dort begrenzen, wo ein

wirklich Fließtext ist. Die erste Fassung hatte max-width einfach auf `p` stehen — und damit auch auf jedem

, das in Wahrheit ein Anordnungselement ist. Live nachgewiesen an der Gruppenbeschriftung einer Pillenreihe: sie trägt `flex: 0 0 100%`, um einen Zeilenumbruch zu erzwingen, wurde von den 68ch aber auf halbe Breite gedeckelt und stand dann neben den Pillen statt darüber. Drei benannte Umgebungen statt des nackten Elements treffen denselben Text und können das nicht anrichten. */ main > p, section > p, .card > p { max-width: var(--measure); } ul, ol { margin-block: 0 var(--space-3); padding-inline-start: 1.4em; } small { font-size: var(--fs-xs); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; } hr { border: none; border-top: 1px solid var(--border); margin-block: var(--space-5); } /* Links. Ohne diese Regel fällt jeder Link, den keine Komponente einfärbt, auf das Browserblau zurück — auf dem dunklen Kartengrund unlesbar. Die Unterstreichung bleibt die Browservorgabe: sie ist das einzige Merkmal, an dem ein Link auch ohne Farbwahrnehmung als Link erkennbar ist. */ a { color: var(--accent-solid); text-underline-offset: 2px; } /* :where() und nicht `:root[data-theme="dark"] a`. Das ist derselbe Fehler wie seinerzeit bei a:visited, nur eine Ebene höher: ein Vorfahrenselektor mit Attribut zählt (0,1,1) und schlägt damit JEDE Komponentenregel mit einer Klasse. Im dunklen Thema hat das jedes blau eingefärbt — .module auf der Startseite, .list-row, .account-item, .btn-ghost als Link. Auf der Startseite waren dadurch alle Werkzeugnamen blau statt in Textfarbe; am 2026-09-16 im Browser gesehen, nicht vermutet. :where() trägt null zur Spezifität bei. Die Regel bleibt damit (0,0,1), gewinnt gegen den nackten Elementselektor darüber (spätere Regel bei gleicher Spezifität) und verliert gegen jede Komponente — genau so herum. */ :where(:root[data-theme="dark"]) a { color: var(--accent); } /* Sichtbarer Tastaturfokus überall. Nichts darf den Fokus unterdrücken, ohne ihn zu ersetzen. */ :focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; } :root[data-theme="dark"] :focus-visible { outline-color: var(--accent); } /* Eingabefelder: Rahmen direkt an der Kante statt 2px davor. Mit Abstand ragte er 4px in die Zeile darunter und lag dort auf Hinweistexten. */ :where(input, select, textarea):focus-visible { outline-offset: 0; } /* --- Textwerkzeuge --------------------------------------------------------- */ .muted { color: var(--muted); } .mono { font-family: var(--font-mono); } /* Tabellarische Ziffern für alles, was untereinander verglichen wird oder sich live ändert. Proportionale Ziffern lassen eine Spalte bei jeder Aktualisierung sichtbar zappeln. */ .num { font-variant-numeric: tabular-nums; } /* Kleine Bezeichnung über einer Gruppe von Bedienelementen. Bewusst sparsam: eine gesperrte Versalzeile über jeder Überschrift ist die verbreitetste Verzierung ohne Inhalt. Hier trägt sie Information — sie benennt eine Gruppe, die sonst keinen Namen hätte, so wie die Beschriftung über einem Feld am echten Patchfeld. */ .section-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-2); } .hidden { display: none !important; } /* Versteckt ein Element optisch, lässt es aber im Fokuszug und im Barrierefreiheitsbaum — für Text, den nur ein Screenreader hört, und für ein echtes Bedienelement, das eine gestaltete Hülle optisch ersetzt. Nie `hidden`/`display:none` dafür: beides entfernt das Element vollständig, und genau das darf bei einem bedienbaren Element nicht passieren. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Der Sprung über die Kopfleiste. Nicht `.sr-only`, sondern wirklich nur aus dem Bild geschoben: ein Element mit `clip: rect(0,0,0,0)` bleibt beim Fokus unsichtbar, und genau dann muss es zu sehen sein. Erstes Element im , vor der Kopfleiste — sonst springt man mit der Tabulatortaste erst durch Navigation, Kundenchip, Suche, Thema und Konto, bevor der Inhalt kommt. Fügt app-shell.js selbst ein, wenn die Seite keinen hat. */ .skip-link { position: absolute; left: var(--space-3); top: -100%; z-index: 100; background: var(--surface-raised); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); text-decoration: none; transition: top var(--dur-1) var(--ease-out); } .skip-link:focus { top: var(--space-3); } /* ============================================================================ 3 AUFBAU ========================================================================= */ /* Der Seitenrahmen. Eine Regel für alle — jede App sagt nur noch, wie breit sie ist, indem sie --page-max auf :root setzt. */ main { width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--space-7) var(--space-4) var(--space-8); } @media (max-width: 640px) { main { padding-top: var(--space-5); } } /* Senkrechter Rhythmus. Ersetzt die hunderte einzelner margin-top-Angaben: Abstand gehört zwischen die Dinge, nicht an die Dinge. */ .stack > * + * { margin-top: var(--stack-gap, var(--space-4)); } .stack-sm { --stack-gap: var(--space-2); } .stack-lg { --stack-gap: var(--space-6); } /* Waagerechte Gruppe, die umbricht statt zu überlaufen. */ .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } /* Werkzeugleiste: links der Inhalt, rechts die Aktionen, auf schmalen Schirmen untereinander. */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .toolbar > .spacer { flex: 1; } .toolbar > h2, .toolbar > h3 { margin: 0 auto 0 0; } /* Filterleiste über einer Liste: eine ruhige Fläche, Felder in Fingerhöhe. */ .filter-bar { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); } .filter-bar :where(input, select) { min-height: 44px; } /* Raster, das sich selbst füllt. --col-min steuert, ab wann umbrochen wird. */ .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--col-min, 220px), 1fr)); gap: var(--space-3); align-items: start; } /* Kopf einer Ansicht: Brotkrume und großer Titel links, Aktionen rechts unten bündig, darunter eine Linie. Seit 2026-09-23 die eine Fassung für alle Apps — vorher stand dieselbe Überschreibung als redesign.css dreimal einzeln in customers/doku/tickets und ein viertes Mal in know. */ .view-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .view-header h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.04em; } .view-header p { max-width: 60ch; margin: var(--space-2) 0 0; color: var(--muted); } .view-header :where(.actions, .toolbar) { margin-left: auto; } /* Direkt über Reitern nur EINE Linie (die der Reiterleiste), nicht zwei. */ .view-header:has(+ .tabs) { border-bottom: 0; padding-bottom: 0; } @media (max-width: 640px) { .view-header { align-items: flex-start; flex-direction: column; } .view-header :where(.actions, .toolbar) { margin-left: 0; } } .view-header .crumb { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 2px; } .view-header .crumb a { color: var(--muted); } .view-header .crumb a:hover { color: var(--accent); } /* Eine Reihe von Bedienelementen, die auf schmalen Schirmen untereinander rutscht statt abgeschnitten zu werden. */ @media (max-width: 640px) { .responsive-row { flex-direction: column; align-items: stretch; } .responsive-row > select { max-width: none !important; } } /* ============================================================================ 4 FORMULAR ---------------------------------------------------------------------------- Nur Langform-Eigenschaften. Eine Kurzform (`background`, `padding`) setzt beim Anwenden alle ihre Langformen auf den Ausgangswert zurück — genau daran ist die Chevron-Grafik des Text. Die Beschriftung ist die Klickfläche (WCAG 2.5.8), deshalb mindestens 32 px hoch. */ .check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); min-height: 32px; cursor: pointer; } .check[hidden] { display: none; } /* Schalter (an/aus mit sofortiger Wirkung): . Gleiches Feld, andere Form — der Haken entfällt, dafür wandert der Knopf; der Zustand steht zusätzlich im Wort der Beschriftung bzw. aria-checked. */ .switch-line { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--fs-sm); } .switch-line input[type="checkbox"] { --check-w: 40px; --check-h: 22px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong, var(--border)); background: var(--surface-2, var(--bg)); transition: background var(--dur-1) var(--ease-out); } .switch-line input[type="checkbox"]::before { content: none; } .switch-line input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform var(--dur-1) var(--ease-out); } .switch-line input[type="checkbox"]:checked { background: var(--accent-solid); border-color: var(--accent-solid); } .switch-line input[type="checkbox"]:checked::after { transform: translateX(18px); background: #fff; } .switch-line input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .switch-line input[type="checkbox"], .switch-line input[type="checkbox"]::after { transition: none; } } @media (prefers-reduced-motion: reduce) { input:where([type="checkbox"], [type="radio"]) { transition: none; } } @media (forced-colors: active) { input:where([type="checkbox"], [type="radio"]) { appearance: auto; -webkit-appearance: auto; } input:where([type="checkbox"], [type="radio"])::before { content: none; } } /* Das OS-eigene beim Aufklappen die nackte Betriebssystem-Liste: weiß, eckig, ohne Rand. Chromium (Chrome, Edge ab 135) lässt die Liste mit `appearance: base-select` gestalten — ohne Skript und ohne dass eine App ihr (shared/combobox.js, geladen von app-shell.js). Sieht aus wie die aufgeklappte