/* NICHT VON HAND ÄNDERN. Kopie von design/basis.css, erzeugt mit `pnpm design:sync` (scripts/design-sync.mjs).
Änderungen nur in design/basis.css, danach `pnpm design:sync`; `pnpm test` prüft den Gleichstand. */
/* ======================================================================================================================
vorortseite – Basis-CSS aller Anwendungsoberflächen (Stil „Papier & Stecknadel“, Regeln in DESIGN.md im Repo-Root).
Kanonische Datei: design/basis.css. Kopien entstehen mit `pnpm design:sync` in
apps/terminal/public/__assets/basis.css und apps/sites/public/__assets/basis.css; `pnpm test` prüft den Gleichstand.
Aufbau:
1. Tokens auf :root (Präfix --ui-, kollidiert nicht mit Kundenseiten)
2. Grundelemente, nur innerhalb von .ui (über :where(), Spezifität 0, jede Klasse gewinnt)
3. Bausteine als Klassen mit Präfix ui- (je eine Klasse, Modifikatoren stehen weiter unten und gewinnen per Reihenfolge)
Kein JavaScript, keine externen Schriften, keine Bilder. Nicht für Kundenwebsites.
==================================================================================================================== */
/* ---------- 1. Tokens ---------- */
:root {
/* Tinte und Papier (Markenpalette, Bearbeitungsmodus). Kontrast auf Weiß in Klammern. */
--ui-tinte: #22303f; /* Text, Primärknopf (13,4:1) */
--ui-tinte-tief: #172230; /* Hover Primärknopf */
--ui-tinte-2: #4a5866; /* Sekundärtext (7,3:1) */
--ui-tinte-3: #5e6a77; /* leiser Text, Meta (5,5:1; auf Papier 5,2:1) */
--ui-papier: #f7f7f5; /* Seitengrund, Seitenleiste; leicht warm, kein Creme */
--ui-papier-tief: #efeeea; /* Hover auf Papier, neutrale Pill */
--ui-flaeche: #ffffff; /* Karten, Tabellen, Felder */
--ui-linie: #e7e5e0; /* Kartenrand, Trenner */
--ui-linie-2: #d6d3cc; /* Rand Zweitknopf, stärkere Trenner */
--ui-linie-feld: #949088; /* Rand Eingabefeld (3,2:1, WCAG 1.4.11) */
/* Farben mit Bedeutung (wie im Bearbeitungsmodus). Nie als Schmuck verwenden. */
--ui-blau: #1f5fd1; /* bearbeitbar, Fokus, „du bist dran“ (5,8:1) */
--ui-blau-tief: #174aa6;
--ui-blau-hell: #eaf0fc;
--ui-gruen: #1d6b43; /* online, erledigt, positiv (6,5:1) */
--ui-gruen-tief: #155334;
--ui-gruen-hell: #e4f2e9;
--ui-gruen-linie: #b9dcc6;
--ui-amber: #9a5200; /* wartet, offen, heute fällig (5,9:1) */
--ui-amber-punkt: #ee9a1a; /* nur Punkte und Balken, nie Text */
--ui-amber-hell: #fff3df;
--ui-amber-linie: #f0d3a4;
--ui-rot: #a8261f; /* Fehler, gefährlich, überfällig (7,1:1) */
--ui-rot-tief: #861d18;
--ui-rot-hell: #fbeaea;
--ui-rot-linie: #efc2c2;
/* Schrift: Systemschrift, keine Webfonts. Skala in rem (16 px Wurzel). */
--ui-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ui-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
--ui-t-1: 0.75rem; /* 12 Tastenhinweis */
--ui-t-2: 0.8125rem; /* 13 Meta, Pill, Tabellenkopf */
--ui-t-3: 0.875rem; /* 14 Hilfetext, kleiner Knopf */
--ui-t-4: 0.9375rem; /* 15 Fließtext Terminal */
--ui-t-5: 1.0625rem; /* 17 Fließtext Kundenoberflächen, Kartentitel */
--ui-t-6: 1.25rem; /* 20 Abschnittstitel */
--ui-t-7: 1.5rem; /* 24 Seitentitel Handy */
--ui-t-8: 1.875rem; /* 30 Seitentitel */
--ui-zeile: 1.55;
--ui-zeile-titel: 1.2;
/* Abstände (4-px-Raster) */
--ui-a-1: 0.25rem; --ui-a-2: 0.5rem; --ui-a-3: 0.75rem; --ui-a-4: 1rem;
--ui-a-5: 1.5rem; --ui-a-6: 2rem; --ui-a-7: 3rem; --ui-a-8: 4rem;
/* Radien: je größer das Element, desto runder */
--ui-r-1: 6px; /* Code-Chip, Tastenhinweis */
--ui-r-2: 8px; /* Knöpfe, Eingabefelder */
--ui-r-3: 12px; /* Board-Karten, Tabellenrahmen, Hinweise, Kennzahlen */
--ui-r-4: 16px; /* Karten, Dialoge */
--ui-r-voll: 999px; /* Pills, Zähler */
/* Schatten: weich, bläulich getönt (Tinte), nie grau-schwarz */
--ui-schatten-1: 0 1px 2px rgba(23, 34, 48, 0.05), 0 1px 3px rgba(23, 34, 48, 0.04);
--ui-schatten-2: 0 2px 4px rgba(23, 34, 48, 0.05), 0 8px 24px rgba(23, 34, 48, 0.09);
--ui-schatten-3: 0 2px 6px rgba(23, 34, 48, 0.12), 0 24px 60px rgba(23, 34, 48, 0.28);
/* Breiten */
--ui-b-seitenleiste: 15.5rem; /* 248 px */
--ui-b-inhalt: 72rem; /* 1152 px */
--ui-b-formular: 46rem;
--ui-b-text: 42rem; /* Lesebreite ≈ 70 Zeichen */
--ui-b-seitenspalte: 20rem;
/* Klickflächen */
--ui-klick: 2.5rem; /* 40 px Maus */
--ui-klick-touch: 2.75rem; /* 44 px Finger */
/* Bewegung (nur als Antwort auf eine Handlung) */
--ui-dauer-1: 120ms;
--ui-dauer-2: 200ms;
--ui-kurve: cubic-bezier(0.2, 0.7, 0.3, 1);
color-scheme: light;
}
/* ---------- 2. Grundelemente (nur unter .ui) ---------- */
:where(.ui), :where(.ui) *, :where(.ui) *::before, :where(.ui) *::after { box-sizing: border-box; }
:where(.ui) {
margin: 0;
font-family: var(--ui-schrift);
font-size: var(--ui-t-4);
line-height: var(--ui-zeile);
color: var(--ui-tinte);
background: var(--ui-papier);
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
:where(.ui) [hidden] { display: none !important; }
:where(.ui a) { color: var(--ui-tinte); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ui-linie-feld); }
:where(.ui a:hover) { text-decoration-color: currentColor; }
:where(.ui :focus-visible) { outline: 3px solid var(--ui-blau); outline-offset: 2px; }
:where(.ui) ::selection { background: var(--ui-blau-hell); color: var(--ui-tinte); }
:where(.ui :is(h1, h2, h3, h4)) { color: var(--ui-tinte); line-height: var(--ui-zeile-titel); letter-spacing: -0.01em; margin: 0; font-weight: 700; }
:where(.ui h1) { font-size: var(--ui-t-8); letter-spacing: -0.02em; }
:where(.ui h2) { font-size: var(--ui-t-6); font-weight: 650; }
:where(.ui h3) { font-size: var(--ui-t-5); font-weight: 650; }
:where(.ui h4) { font-size: var(--ui-t-4); font-weight: 650; }
:where(.ui p) { margin: 0 0 var(--ui-a-3); }
:where(.ui p:last-child) { margin-bottom: 0; }
:where(.ui :is(ul, ol)) { margin: 0 0 var(--ui-a-3); padding-left: 1.25rem; }
:where(.ui li + li) { margin-top: var(--ui-a-1); }
:where(.ui hr) { border: 0; border-top: 1px solid var(--ui-linie); margin: var(--ui-a-5) 0; }
:where(.ui :is(strong, b)) { font-weight: 650; }
:where(.ui small) { font-size: var(--ui-t-2); }
:where(.ui code) { font-family: var(--ui-mono); font-size: 0.9em; }
/* Treffer einer Suche (seit 18.10.2026, Gesprächsleitfaden): wie markierter Text im Blau der Auswahl, mit Text in Blau tief (7,2:1) */
:where(.ui mark) { background: var(--ui-blau-hell); color: var(--ui-blau-tief); font-weight: 600; border-radius: 2px; padding: 0 0.08em; }
:where(.ui :is(img, svg)) { max-width: 100%; }
:where(.ui table) { border-collapse: collapse; }
:where(.ui :is(button, input, select, textarea)) { font: inherit; color: inherit; }
:where(.ui button) { cursor: pointer; }
:where(.ui :is(button, input, select, textarea):disabled) { cursor: not-allowed; }
:where(.ui details > summary) { cursor: pointer; }
/* Felder ohne eigene Klasse sehen aus wie .ui-eingabe (Spezifität 0: jede Klasse gewinnt). */
:where(.ui) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="color"]), select, textarea) {
font-size: var(--ui-t-4);
line-height: 1.4;
color: var(--ui-tinte);
background: var(--ui-flaeche);
border: 1px solid var(--ui-linie-feld);
border-radius: var(--ui-r-2);
padding: 0.5rem 0.75rem;
min-height: var(--ui-klick);
min-width: 0;
max-width: 100%;
transition: border-color var(--ui-dauer-1), box-shadow var(--ui-dauer-1);
}
:where(.ui) :where(input, select, textarea):where(:not([type="checkbox"], [type="radio"])):where(:hover) { border-color: var(--ui-tinte-3); }
:where(.ui) :where(input, select, textarea):where(:not([type="checkbox"], [type="radio"])):where(:focus, :focus-visible) {
outline: none; border-color: var(--ui-blau); box-shadow: 0 0 0 3px var(--ui-blau-hell);
}
:where(.ui) :where(input, select, textarea):where([aria-invalid="true"]) { border-color: var(--ui-rot); box-shadow: 0 0 0 3px var(--ui-rot-hell); }
:where(.ui) :where(input, textarea)::placeholder { color: var(--ui-tinte-3); opacity: 0.85; }
:where(.ui) :where(input, select, textarea):where(:disabled) { background: var(--ui-papier); color: var(--ui-tinte-3); border-color: var(--ui-linie-2); }
:where(.ui) :where(input[readonly], textarea[readonly]) { background: var(--ui-papier); }
:where(.ui) :where(textarea) { resize: vertical; min-height: 5rem; }
:where(.ui) :where(select) {
appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--ui-tinte-2) 50%), linear-gradient(135deg, var(--ui-tinte-2) 50%, transparent 50%);
background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
background-size: 5px 5px; background-repeat: no-repeat;
}
:where(.ui) :where(input[type="checkbox"], input[type="radio"]) { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ui-tinte); cursor: pointer; flex: none; }
:where(.ui) :where(input[type="date"]) { min-width: 9.5rem; }
/* ---------- 3. Bausteine ---------- */
/* Hilfsklassen */
.ui-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ui-leise { color: var(--ui-tinte-3); }
.ui-zweit { color: var(--ui-tinte-2); }
.ui-klein { font-size: var(--ui-t-3); }
.ui-nowrap { white-space: nowrap; }
.ui-zahl { font-variant-numeric: tabular-nums; }
.ui-mono { font-family: var(--ui-mono); font-size: 0.9em; }
.ui-umbruch { overflow-wrap: anywhere; }
.ui-ueberfaellig { color: var(--ui-rot); font-weight: 650; }
.ui-heute { color: var(--ui-amber); font-weight: 650; }
.ui-erledigt { color: var(--ui-gruen); font-weight: 650; }
.ui-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-i { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.ui-i-gross { width: 1.5rem; height: 1.5rem; }
/* Vorschau-Code, Nummern: gut vorlesbar, gesperrt, halbfett (keine Monospace). */
.ui-code { display: inline-block; font-weight: 650; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; background: var(--ui-papier-tief); color: var(--ui-tinte); border-radius: var(--ui-r-1); padding: 0.05rem 0.4rem 0.05rem 0.45rem; font-size: 0.92em; white-space: nowrap; }
a.ui-code { text-decoration: none; position: relative; }
a.ui-code::after { content: ""; position: absolute; inset: -9px -2px; } /* Klickfläche 40 px (Finger 44 px, unten) */
a.ui-code:hover { background: var(--ui-blau-hell); color: var(--ui-blau-tief); }
.ui-taste { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; font: 600 var(--ui-t-1)/1 var(--ui-schrift); color: var(--ui-tinte-3); background: var(--ui-flaeche); border: 1px solid var(--ui-linie-2); border-bottom-width: 2px; border-radius: var(--ui-r-1); }
/* Bausteine ohne Außenabstand. Nur als Vorgabe mit Spezifität 0: in Karten gilt der Rhythmus der Karte
(.ui-karte > * + *, .ui-karte-kopf + *), in .ui-stapel dessen gap. */
:where(.ui-feld, .ui-feldgruppe, .ui-hilfe, .ui-fehlertext, .ui-leer-zeile, .ui-liste, .ui-verlauf, .ui-eigenschaften, .ui-board-leer, .ui-schritte, .ui-trichter, .ui-verteilung) { margin: 0; }
/* Marke: die Wortmarke als feste Grafik (
, Quelle design/marke.svg, in Pfaden, RECHT.md B15),
Zusätze wie „Terminal“ in Systemschrift daneben. Logo und Zusatz stehen auf einer Grundlinie (die Wortmarke hat keine
Unterlängen, ihre Unterkante ist die Grundlinie); flex-wrap + align-content zentrieren die Zeile in einer höheren Klickfläche. */
.ui-marke { display: inline-flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 0.25rem 0.6rem; color: var(--ui-tinte); text-decoration: none; line-height: 1.2; }
.ui-marke:hover { text-decoration: none; }
.ui-marke-logo { display: block; flex: none; width: auto; height: 1.125rem; max-width: none; }
.ui-marke-zusatz { font-weight: 500; font-size: var(--ui-t-3); color: var(--ui-tinte-3); letter-spacing: 0; }
/* Layout */
.ui-stapel { display: flex; flex-direction: column; gap: var(--ui-a-4); }
.ui-stapel > * { margin: 0; }
.ui-stapel-eng { gap: var(--ui-a-2); }
.ui-stapel-weit { gap: var(--ui-a-5); }
.ui-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-2) var(--ui-a-3); }
.ui-reihe-oben { align-items: flex-start; }
.ui-reihe-unten { align-items: flex-end; }
.ui-reihe-ende { justify-content: flex-end; }
.ui-reihe-zwischen { justify-content: space-between; }
.ui-wachsen { flex: 1 1 auto; min-width: 0; }
.ui-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--ui-a-4); }
.ui-zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) var(--ui-b-seitenspalte); gap: var(--ui-a-5); align-items: start; }
.ui-zweispaltig > * { min-width: 0; }
.ui-seitenspalte { display: flex; flex-direction: column; gap: var(--ui-a-4); }
.ui-seitenspalte-klebend { position: sticky; top: var(--ui-a-4); } /* nur für kurze Spalten (Formular neben einer Liste) */
.ui-lesebreite { max-width: var(--ui-b-text); }
@media (max-width: 1099px) {
.ui-zweispaltig { grid-template-columns: minmax(0, 1fr); }
.ui-seitenspalte-klebend { position: static; }
}
/* Seitenkopf: Titel, Unterzeile, Aktionen rechts */
.ui-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-a-3) var(--ui-a-5); margin: 0 0 var(--ui-a-6); }
.ui-kopf-text { flex: 1 1 22rem; min-width: 0; }
.ui-kopf-zurueck { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--ui-t-3); color: var(--ui-tinte-3); text-decoration: none; margin: 0 0 var(--ui-a-2); min-height: 1.75rem; }
.ui-kopf-zurueck::after { content: ""; position: absolute; inset: -6px -8px; } /* Klickfläche 40 px, sichtbar bleibt die Zeile schmal */
.ui-kopf-zurueck:hover { color: var(--ui-tinte); }
.ui-kopf-titel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-2) var(--ui-a-3); font-size: var(--ui-t-8); line-height: var(--ui-zeile-titel); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ui-kopf-unter { margin: var(--ui-a-2) 0 0; color: var(--ui-tinte-2); font-size: var(--ui-t-5); max-width: var(--ui-b-text); }
.ui-kopf-meta { margin: var(--ui-a-2) 0 0; color: var(--ui-tinte-3); font-size: var(--ui-t-3); display: flex; flex-wrap: wrap; gap: var(--ui-a-1) var(--ui-a-4); }
.ui-kopf-aktionen { display: flex; flex-wrap: wrap; gap: var(--ui-a-2); align-items: center; }
/* Karte: weißes Blatt auf Papier */
.ui-karte { background: var(--ui-flaeche); border: 1px solid var(--ui-linie); border-radius: var(--ui-r-4); box-shadow: var(--ui-schatten-1); padding: var(--ui-a-5); min-width: 0; }
.ui-karte > * + * { margin-top: var(--ui-a-4); }
.ui-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-2) var(--ui-a-4); }
.ui-karte-kopf + * { margin-top: var(--ui-a-4); }
.ui-karte-titel { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-2); font-size: var(--ui-t-5); font-weight: 650; letter-spacing: -0.01em; margin: 0; min-width: 0; }
.ui-karte-aktionen { display: flex; flex-wrap: wrap; gap: var(--ui-a-2); align-items: center; }
/* Beschreibung immer in eigener Zeile unter dem Titel (flex-basis 100 %); die Lesebreite hält ein Innenabstand rechts,
eine max-width würde die Zeile neben einen kurzen Titel rutschen lassen. */
.ui-karte-beschreibung { flex: 1 0 100%; margin: 0; color: var(--ui-tinte-2); font-size: var(--ui-t-3); max-width: none; padding-right: max(0px, calc(100% - var(--ui-b-text))); }
.ui-karte-fuss { border-top: 1px solid var(--ui-linie); margin: var(--ui-a-5) calc(-1 * var(--ui-a-5)) calc(-1 * var(--ui-a-5)); padding: var(--ui-a-4) var(--ui-a-5); background: var(--ui-papier); border-radius: 0 0 var(--ui-r-4) var(--ui-r-4); display: flex; flex-wrap: wrap; gap: var(--ui-a-2) var(--ui-a-3); align-items: center; }
.ui-karte-eng { padding: var(--ui-a-4); }
.ui-karte-eng > .ui-karte-fuss { margin: var(--ui-a-4) calc(-1 * var(--ui-a-4)) calc(-1 * var(--ui-a-4)); padding: var(--ui-a-3) var(--ui-a-4); }
.ui-karte-flach { background: var(--ui-papier); box-shadow: none; }
.ui-karte-hinweis { background: #fffaf1; border-color: var(--ui-amber-linie); }
.ui-karte-gefahr { background: #fffafa; border-color: var(--ui-rot-linie); }
.ui-karte-erfolg { background: #f8fcf9; border-color: var(--ui-gruen-linie); }
.ui-karte-bund { padding: 0; overflow: hidden; } /* Tabelle oder Liste bündig in der Karte */
.ui-karte-bund > .ui-karte-kopf { padding: var(--ui-a-4) var(--ui-a-5); border-bottom: 1px solid var(--ui-linie); }
.ui-karte-bund > .ui-karte-kopf + * { margin-top: 0; }
.ui-karte-bund > * + * { margin-top: 0; }
.ui-karte-bund > .ui-tabelle-rahmen { border: 0; border-radius: 0; box-shadow: none; }
.ui-karte-bund > .ui-karte-fuss { margin: 0; }
.ui-karte-bund > .ui-leer, .ui-karte-bund > .ui-leer-zeile { margin: 0; padding: var(--ui-a-5); }
/* Abschnitt: Überschrift mit Linie, ohne Karte (Notion) */
.ui-abschnitt { min-width: 0; }
.ui-abschnitt + .ui-abschnitt { margin-top: var(--ui-a-6); }
.ui-abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ui-a-2) var(--ui-a-4); padding-bottom: var(--ui-a-2); margin-bottom: var(--ui-a-4); border-bottom: 1px solid var(--ui-linie); }
.ui-abschnitt-titel { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-2); font-size: var(--ui-t-6); font-weight: 650; margin: 0; }
.ui-abschnitt-beschreibung { flex: 1 0 100%; margin: 0; color: var(--ui-tinte-2); font-size: var(--ui-t-3); max-width: none; padding-right: max(0px, calc(100% - var(--ui-b-text))); }
/* Knöpfe */
.ui-knopf {
display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
min-height: var(--ui-klick); padding: 0.45rem 1rem; border-radius: var(--ui-r-2); border: 1px solid var(--ui-tinte);
background: var(--ui-tinte); color: #fff; font: 600 var(--ui-t-4)/1.2 var(--ui-schrift); letter-spacing: 0;
text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; vertical-align: middle;
transition: background-color var(--ui-dauer-1), border-color var(--ui-dauer-1), box-shadow var(--ui-dauer-1), color var(--ui-dauer-1);
}
.ui-knopf:hover { background: var(--ui-tinte-tief); border-color: var(--ui-tinte-tief); color: #fff; text-decoration: none; }
.ui-knopf:active { transform: translateY(1px); }
.ui-knopf:disabled, .ui-knopf[aria-disabled="true"] { background: var(--ui-papier-tief); border-color: var(--ui-papier-tief); color: var(--ui-tinte-3); cursor: not-allowed; transform: none; }
.ui-knopf-zweit { background: var(--ui-flaeche); color: var(--ui-tinte); border-color: var(--ui-linie-2); box-shadow: 0 1px 1px rgba(23, 34, 48, 0.04); }
.ui-knopf-zweit:hover { background: var(--ui-papier); border-color: var(--ui-tinte-3); color: var(--ui-tinte); }
.ui-knopf-leise { background: transparent; color: var(--ui-tinte-2); border-color: transparent; padding-inline: 0.65rem; }
.ui-knopf-leise:hover { background: var(--ui-papier-tief); border-color: transparent; color: var(--ui-tinte); }
.ui-knopf-gefahr { background: var(--ui-rot); border-color: var(--ui-rot); color: #fff; }
.ui-knopf-gefahr:hover { background: var(--ui-rot-tief); border-color: var(--ui-rot-tief); color: #fff; }
.ui-knopf-gefahr-leise { background: transparent; color: var(--ui-rot); border-color: transparent; padding-inline: 0.65rem; }
.ui-knopf-gefahr-leise:hover { background: var(--ui-rot-hell); border-color: var(--ui-rot-hell); color: var(--ui-rot-tief); }
.ui-knopf-erfolg { background: var(--ui-gruen); border-color: var(--ui-gruen); color: #fff; }
.ui-knopf-erfolg:hover { background: var(--ui-gruen-tief); border-color: var(--ui-gruen-tief); color: #fff; }
.ui-knopf-gross { min-height: 3rem; padding-inline: 1.4rem; font-size: var(--ui-t-5); }
/* Klein: sichtbar 32 px, Klickfläche per ::after auf 40 px erweitert (Abstand zu Nachbarn mindestens 8 px). */
.ui-knopf-klein { min-height: 2rem; padding: 0.3rem 0.7rem; font-size: var(--ui-t-3); border-radius: 7px; }
.ui-knopf-klein::after { content: ""; position: absolute; inset: -4px -2px; }
.ui-knopf-voll { width: 100%; }
.ui-knopf-icon { padding: 0; width: var(--ui-klick); }
.ui-knopf-icon.ui-knopf-klein { width: 2rem; }
.ui-knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-2); }
.ui-textknopf { font: inherit; color: var(--ui-tinte); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 1.75rem; }
form.ui-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-2); margin: 0; vertical-align: middle; }
/* Formulare */
.ui-formular { display: grid; gap: var(--ui-a-4); max-width: var(--ui-b-formular); }
.ui-formular-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-a-4) var(--ui-a-5); }
.ui-formular-raster > .ui-feld-breit, .ui-formular-raster > .ui-knopfreihe, .ui-formular-raster > .ui-formular-aktionen { grid-column: 1 / -1; }
.ui-formular-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-2) var(--ui-a-3); padding-top: var(--ui-a-1); }
.ui-formular-aktionen .ui-hilfe { flex: 1 1 18rem; margin: 0; }
.ui-feld { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.ui-feld > :is(input, select, textarea) { width: 100%; }
.ui-label { font-size: var(--ui-t-3); font-weight: 600; color: var(--ui-tinte); }
.ui-pflicht { color: var(--ui-rot); font-weight: 600; margin-left: 0.15rem; }
.ui-optional { color: var(--ui-tinte-3); font-weight: 400; margin-left: 0.25rem; }
.ui-hilfe { font-size: var(--ui-t-2); color: var(--ui-tinte-3); line-height: 1.45; max-width: var(--ui-b-text); }
.ui-fehlertext { font-size: var(--ui-t-3); color: var(--ui-rot); font-weight: 600; }
.ui-eingabe { width: 100%; }
.ui-check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; line-height: 1.45; min-height: 1.5rem; }
.ui-check input { margin-top: 0.15rem; }
.ui-feldgruppe { border: 0; padding: 0; min-width: 0; display: grid; gap: var(--ui-a-2); }
.ui-feldgruppe > legend { font-size: var(--ui-t-3); font-weight: 600; padding: 0; margin-bottom: var(--ui-a-2); }
/* Auswahl mit Erklärung je Möglichkeit (Radio als Blatt; wahlFeld() in apps/terminal/src/ui.ts): gewählt = blau (du entscheidest hier) */
.ui-wahl-optionen { display: grid; gap: var(--ui-a-2); }
.ui-wahl-option { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.9rem; background: var(--ui-flaeche); border: 1px solid var(--ui-linie-2); border-radius: var(--ui-r-2); cursor: pointer; line-height: 1.45; transition: border-color var(--ui-dauer-1), background-color var(--ui-dauer-1); }
.ui-wahl-option:hover { border-color: var(--ui-tinte-3); }
.ui-wahl-option:has(input:checked) { border-color: var(--ui-blau); background: var(--ui-blau-hell); box-shadow: inset 0 0 0 1px var(--ui-blau); }
.ui-wahl-option:has(input:focus-visible) { outline: 3px solid var(--ui-blau); outline-offset: 2px; }
.ui-wahl-option input { margin-top: 0.15rem; }
.ui-wahl-option input:focus-visible { outline: none; }
.ui-wahl-text { display: grid; gap: 0.2rem; min-width: 0; }
.ui-wahl-titel { font-weight: 600; color: var(--ui-tinte); }
.ui-wahl-text .ui-hilfe { max-width: none; }
.ui-wahl[aria-invalid="true"] .ui-wahl-option { border-color: var(--ui-rot); }
/* Zeilenformular: Felder nebeneinander, Knopf unten bündig (Filter, kurze Aktionen) */
.ui-feldreihe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-a-3); }
.ui-feldreihe > .ui-feld { flex: 0 1 12rem; }
.ui-feldreihe > .ui-feld-breit { flex: 1 1 16rem; }
.ui-filter { background: var(--ui-flaeche); border: 1px solid var(--ui-linie); border-radius: var(--ui-r-3); padding: var(--ui-a-3) var(--ui-a-4); }
.ui-suche { position: relative; display: flex; align-items: center; }
.ui-suche > .ui-i { position: absolute; left: 0.7rem; color: var(--ui-tinte-3); pointer-events: none; }
.ui-suche > input { width: 100%; padding-left: 2.2rem; }
.ui-suche > .ui-taste { position: absolute; right: 0.55rem; pointer-events: none; }
/* Suchzeile (suchfeld() in apps/terminal/src/ui.ts, seit 18.10.2026): Feld mit Lupe, daneben „Suchen“ und „Zurücksetzen“; wird es eng,
rutschen die Knöpfe unter das Feld */
.ui-suchzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-2); }
.ui-suchzeile > .ui-suche { flex: 1 1 16rem; min-width: 0; }
/* Zitat (zitat(), seit 18.10.2026): etwa ein Mustertext zum Abschreiben, abgesetzt mit Linie links auf Papier */
.ui-zitat { margin: 0; padding: var(--ui-a-3) var(--ui-a-4); max-width: var(--ui-b-text); background: var(--ui-papier); border-left: 3px solid var(--ui-linie-2); border-radius: 0 var(--ui-r-2) var(--ui-r-2) 0; color: var(--ui-tinte); overflow-wrap: anywhere; }
.ui-zitat > :last-child { margin-bottom: 0; }
/* Brief als Blatt (briefBlatt() in apps/terminal/src/ui.ts): Antwortschreiben zum Lesen, Kopieren und Drucken. Ein weißes Blatt
auf dem Papiergrund, Anschriftfeld und Betreff wie im Geschäftsbrief; Zeilenumbrüche des Texts bleiben stehen. */
.ui-brief { max-width: 44rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3.5rem); background: var(--ui-flaeche); border: 1px solid var(--ui-linie); border-radius: var(--ui-r-1); box-shadow: var(--ui-schatten-2); color: var(--ui-tinte); font-size: var(--ui-t-4); line-height: 1.6; }
.ui-brief > * { margin: 0; }
.ui-brief-absender { display: inline-block; font-size: var(--ui-t-1); color: var(--ui-tinte-3); padding-bottom: 0.15rem; border-bottom: 1px solid var(--ui-linie); }
.ui-brief-an { margin-top: var(--ui-a-2); min-height: 6.4em; font-style: normal; }
.ui-brief-platzhalter { display: grid; place-items: center start; padding: var(--ui-a-2) var(--ui-a-3); border: 1px dashed var(--ui-linie-2); border-radius: var(--ui-r-1); color: var(--ui-tinte-3); max-width: 22rem; }
.ui-brief-datum { margin-top: var(--ui-a-5); text-align: right; color: var(--ui-tinte-2); }
.ui-brief-betreff { margin-top: var(--ui-a-5); font-weight: 650; }
.ui-brief-text { margin-top: var(--ui-a-4); white-space: pre-line; overflow-wrap: anywhere; }
/* Tabellen: luftig, ohne Gitter; ab 640 px abwärts werden Zeilen zu Karten (td[data-label]) */
.ui-tabelle-rahmen { background: var(--ui-flaeche); border: 1px solid var(--ui-linie); border-radius: var(--ui-r-3); overflow-x: auto; min-width: 0; }
.ui-tabelle { width: 100%; border-collapse: collapse; font-size: var(--ui-t-4); font-variant-numeric: tabular-nums; }
.ui-tabelle th { text-align: left; font-size: var(--ui-t-2); font-weight: 600; color: var(--ui-tinte-3); padding: 0.65rem 1rem; border-bottom: 1px solid var(--ui-linie); white-space: nowrap; background: var(--ui-flaeche); }
.ui-tabelle td { text-align: left; vertical-align: top; padding: 0.8rem 1rem; border-bottom: 1px solid var(--ui-linie); }
.ui-tabelle tbody tr:last-child td { border-bottom: 0; }
.ui-tabelle tbody tr:hover td { background: #fbfbfa; }
.ui-tabelle :is(th, td).ui-rechts { text-align: right; }
.ui-tabelle td.ui-aktionen { text-align: right; }
.ui-tabelle td.ui-aktionen > * { margin: 0.1rem 0 0.1rem var(--ui-a-2); }
.ui-tabelle-dicht td { padding-block: 0.5rem; }
@media (max-width: 640px) {
.ui-tabelle-karten { background: transparent; border: 0; overflow: visible; }
.ui-tabelle-karten .ui-tabelle, .ui-tabelle-karten tbody, .ui-tabelle-karten tr, .ui-tabelle-karten td { display: block; width: 100%; }
.ui-tabelle-karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ui-tabelle-karten tr { background: var(--ui-flaeche); border: 1px solid var(--ui-linie); border-radius: var(--ui-r-3); padding: 0.35rem 0; margin-bottom: var(--ui-a-3); box-shadow: var(--ui-schatten-1); }
.ui-tabelle-karten tbody tr:hover td { background: transparent; }
/* Beschriftung links absolut, Inhalt fließt normal (Links, Pills, Formulare bleiben zusammen) */
.ui-tabelle-karten td { position: relative; border: 0; padding: 0.35rem 1rem 0.35rem 9.25rem; text-align: left; overflow-wrap: anywhere; }
.ui-tabelle-karten td[data-label=""], .ui-tabelle-karten td:not([data-label]) { padding-left: 1rem; }
.ui-tabelle-karten td[data-label]:not([data-label=""])::before { content: attr(data-label); position: absolute; left: 1rem; top: 0.45rem; width: 7.5rem; font-size: var(--ui-t-2); font-weight: 600; color: var(--ui-tinte-3); line-height: 1.35; overflow-wrap: normal; }
.ui-tabelle-karten td:first-child { font-weight: 600; }
.ui-tabelle-karten td.ui-rechts { text-align: left; } /* gleiche Spezifität wie .ui-tabelle :is(th, td).ui-rechts, steht später: Beschriftung und Wert wie in jeder Zeile */
.ui-tabelle-karten td.ui-aktionen { text-align: left; white-space: normal; border-top: 1px solid var(--ui-linie); margin-top: 0.35rem; padding-top: 0.6rem; display: flex; flex-wrap: wrap; gap: var(--ui-a-2); }
.ui-tabelle-karten td.ui-aktionen > * { margin: 0; }
.ui-tabelle-karten td:empty { display: none; }
/* In einer Karte keine Karten in der Karte: Zeilen flach mit Trennlinie (Seiten, die die äußere Karte auflösen, setzen die
Zeilenkarten selbst wieder). */
.ui-karte .ui-tabelle-karten tr { border: 0; border-bottom: 1px solid var(--ui-linie); border-radius: 0; box-shadow: none; margin: 0; padding-block: 0.5rem; }
.ui-karte .ui-tabelle-karten tr:last-child { border-bottom: 0; }
}
/* Pills: Status mit Punkt; Farbe nur mit Bedeutung */
.ui-pill { display: inline-flex; align-items: center; gap: 0.4rem; height: 1.5rem; padding: 0 0.6rem; border-radius: var(--ui-r-voll); font-size: var(--ui-t-2); font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; background: var(--ui-papier-tief); color: var(--ui-tinte-2); letter-spacing: 0; }
.ui-pill-punkt::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; flex: none; opacity: 0.9; }
.ui-pill-blau { background: var(--ui-blau-hell); color: var(--ui-blau-tief); }
.ui-pill-gruen { background: var(--ui-gruen-hell); color: var(--ui-gruen); }
.ui-pill-gruen-voll { background: var(--ui-gruen); color: #fff; }
.ui-pill-amber { background: var(--ui-amber-hell); color: var(--ui-amber); }
.ui-pill-amber.ui-pill-punkt::before { background: var(--ui-amber-punkt); }
.ui-pill-rot { background: var(--ui-rot-hell); color: var(--ui-rot); }
.ui-pill-rot-voll { background: var(--ui-rot); color: #fff; }
.ui-pill-tinte { background: var(--ui-tinte); color: #fff; }
.ui-pill-leise { background: transparent; color: var(--ui-tinte-3); box-shadow: inset 0 0 0 1px var(--ui-linie-2); }
.ui-pill-durch { text-decoration: line-through; }
.ui-zaehler { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem; border-radius: var(--ui-r-voll); background: var(--ui-papier-tief); color: var(--ui-tinte-2); font-size: var(--ui-t-1); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.ui-zaehler-amber { background: var(--ui-amber-hell); color: var(--ui-amber); }
.ui-zaehler-rot { background: var(--ui-rot); color: #fff; }
.ui-zaehler-tinte { background: var(--ui-tinte); color: #fff; }
/* Kennzahlen */
.ui-kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--ui-a-3); }
.ui-kennzahl { display: flex; flex-direction: column; gap: 0.15rem; background: var(--ui-flaeche); border: 1px solid var(--ui-linie); border-radius: var(--ui-r-3); padding: var(--ui-a-3) var(--ui-a-4); color: var(--ui-tinte); text-decoration: none; min-height: 5rem; transition: box-shadow var(--ui-dauer-2) var(--ui-kurve), border-color var(--ui-dauer-2); }
a.ui-kennzahl:hover { box-shadow: var(--ui-schatten-2); border-color: var(--ui-linie-2); text-decoration: none; }
.ui-kennzahl-zahl { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ui-kennzahl-label { display: flex; align-items: center; gap: 0.4rem; font-size: var(--ui-t-3); color: var(--ui-tinte-2); min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.ui-kennzahl-hinweis { font-size: var(--ui-t-2); color: var(--ui-tinte-3); }
.ui-kennzahl-null .ui-kennzahl-zahl { color: var(--ui-tinte-3); font-weight: 600; }
.ui-kennzahl-amber .ui-kennzahl-label::before, .ui-kennzahl-rot .ui-kennzahl-label::before, .ui-kennzahl-gruen .ui-kennzahl-label::before, .ui-kennzahl-blau .ui-kennzahl-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.ui-kennzahl-amber .ui-kennzahl-label::before { background: var(--ui-amber-punkt); }
.ui-kennzahl-rot .ui-kennzahl-label::before { background: var(--ui-rot); }
.ui-kennzahl-gruen .ui-kennzahl-label::before { background: var(--ui-gruen); }
.ui-kennzahl-blau .ui-kennzahl-label::before { background: var(--ui-blau); }
/* Fortschritt (Checkliste 3/6):