@font-face { font-family: 'Inter'; src: local('Inter'), local('Inter Variable'), url('/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* UX-8 (K-1) — `size-adjust` GEGEN DIE ERSATZSCHRIFT, wie R15 es verlangt. ========================================================================== Der Plan fordert `size-adjust` an der Schrift (plan_ux_final.md:1004) und begründet es in R15 (:1174): `font-display: swap` ohne `size-adjust` heißt ein kurzer Layoutsprung beim ersten Laden. Der Zusatz steht bewusst NICHT an der Inter-Regel darüber, und das ist der ganze Punkt: `size-adjust` skaliert die Glyphen DER Schrift, an der es steht. An Inter gesetzt, würde es Inter selbst kleiner (oder größer) zeichnen — bei den veröffentlichten Inter-Werten rund 7 % — und damit die gesamte Oberfläche verändern. UX-1 hat als Abnahmekriterium „Die Oberfläche sieht identisch aus" (:1004). Eine Zeile, die den Sprung beseitigt, indem sie das Ziel verschiebt, löst nichts. Die wirksame Form ist eine EIGENE Ersatzschrift-Regel: Sie lädt nichts nach, sondern nimmt eine lokal vorhandene Grotesk und rechnet sie auf Inters Maße um. Solange Inter noch nicht da ist, steht der Text damit bereits in Inters Zeilenhöhe und Breite; ist Inter da, greift diese Regel gar nicht mehr. Inter selbst bleibt unangetastet. ⚠ DIE VIER WERTE SIND ÜBERNOMMEN, NICHT HIER GEMESSEN: Es sind die veröffentlichten Inter-gegen-Arial/Helvetica-Überschreibungen. R15 sagt „gegen die Ersatzschrift gemessen", und eine echte Messung braucht einen Browser — sie steht als offener Punkt im Bau-Bericht. Falsch liegen kann dabei nur die GRÖSSE des verbleibenden Sprungs, nicht seine Richtung: Ohne diese Regel ist der Unterschied größer, mit ihr kleiner. */ @font-face { font-family: 'Inter Ersatz'; src: local('Helvetica Neue'), local('Helvetica'), local('Arial'), local('Liberation Sans'); size-adjust: 107.12%; ascent-override: 90.24%; descent-override: 22.48%; line-gap-override: 0%; } /* ========================================================================== TOKEN-SCHICHT (UX-1, plan_ux_final.md §2.2–2.5) ========================================================================== Drei Ebenen, eine Stelle. Farbliterale stehen AUSSCHLIESSLICH in Ebene 1 dieses Blocks — der Riegel dafür ist eine grep-Zeile (§2.2). Jeder Wert stammt aus dem Bestand (design/F1_ABNAHME.md §2, TE-12); die neutrale Palette ist der Vorgabe-Zustand und wird über `data-thema="neutral"` am Wurzelelement gewählt. Ein zweites Thema liefert seine eigene Ebene 1 und bindet Ebene 2 neu — Beweis: theme-toctv.css (mitgeliefert, nicht eingebunden). Termin-Grün #16a34a nach Timms TE-12-Entscheid vom 31.08.2026 (Kontrast 3,30:1 gegen weiße Schrift statt 2,09:1 beim Marken-Grün #2ecb8a). Schrift Inter (§7-1). Aktionsknöpfe und Auswahl-Chips ≥ 64 px (§7-2, inklusive Nachtrag für M15/M12). */ :root, [data-thema="neutral"] { /* ---- Ebene 1 · PALETTE — nur hier stehen Farbliterale ------------------ */ --ton-weiss: #ffffff; --ton-grau-25: #f7f8fa; --ton-grau-50: #f3f4f6; --ton-grau-75: #f2f3f6; --ton-grau-100: #eceef2; --ton-grau-150: #e9ebef; --ton-grau-200: #d9dbe0; --ton-grau-300: #c3c7ce; --ton-grau-400: #9ca3af; --ton-grau-500: #6b7280; --ton-grau-700: #374151; --ton-grau-900: #111827; --ton-schwarz: #000000; --ton-gruen-100: #dbf2e3; --ton-gruen-600: #16a34a; --ton-gruen-700: #15803d; --ton-gruen-900: #0d662e; --ton-gelb-100: #fef3c7; --ton-gelb-500: #f59e0b; --ton-gelb-800: #92610a; --ton-gelb-900: #7c4a03; --ton-rot-100: #fbe3e3; --ton-rot-600: #dc2626; --ton-rot-900: #8c1c1c; --ton-blau-100: #eef2ff; --ton-blau-900: #1e3a8a; --ton-schatten-rgb: 18 23 38; --ton-weiss-leise: rgba(255, 255, 255, 0.8); --ton-sales-tanne: #132e28; --ton-sales-aktion: #245b45; --ton-sales-akzent: #cbf06c; --ton-sales-grund: #f5f7f2; --ton-sales-linie: #dce4d9; /* ---- Ebene 2 · BEDEUTUNG — was ein Wert bedeutet; ein Thema setzt das neu */ /* Flächen */ --flaeche-grund: var(--ton-grau-50); --flaeche-karte: var(--ton-weiss); --flaeche-leise: var(--ton-grau-25); --flaeche-feld: var(--ton-weiss); --flaeche-kopf: var(--ton-weiss); /* Text */ --text-stark: var(--ton-grau-900); --text-mittel: var(--ton-grau-700); --text-leise: var(--ton-grau-500); --text-warnung: var(--ton-gelb-800); --text-auf-dunkel: var(--ton-weiss); --text-auf-dunkel-leise: var(--ton-weiss-leise); /* Linien */ --linie: var(--ton-grau-200); --linie-stark: var(--ton-grau-400); --linie-fokus: var(--ton-grau-900); --linie-fokus-innen: var(--ton-weiss); /* NA2/3 — DER UMRISS DES SPRUNGS, und er muss sich vom Fokusring UNTERSCHEIDEN. NA1 hatte dafür `--aktion-flaeche` genommen; beide Tokens lösen aber auf `--ton-grau-900` (#111827) auf — die Unterscheidung war nominell, im Browser lag derselbe schwarze 2-px-Strich da. Dieser Token trägt das Bernstein von `.knopf.folge` (`--ton-gelb-500`, #f59e0b): der Ton, den dieses Haus für „hier geht es weiter" führt, und mit Abstand verschieden von #111827. */ --hervor-linie: var(--ton-gelb-500); /* Aktionen — drei Lautstärken plus Gefahr (Kontur, keine Fläche, K-7) */ --aktion-flaeche: var(--ton-grau-900); --aktion-schrift: var(--ton-weiss); --aktion-tipp: var(--ton-grau-700); --aktion-druck: var(--ton-schwarz); --aktion-hell-flaeche: var(--ton-weiss); --aktion-hell-schrift: var(--ton-grau-700); --aktion-hell-rand: var(--ton-grau-400); --aktion-leise-schrift: var(--ton-grau-500); --aktion-leise-rand: var(--ton-grau-200); --aktion-gefahr-schrift: var(--ton-rot-900); --aktion-gefahr-rand: var(--ton-rot-600); --aktion-gefahr-tipp: var(--ton-rot-100); /* Status — Aktionsfarbe (kräftige Fläche) ≠ Statuschip (getönte Fläche), K-3 */ --status-offen-flaeche: var(--ton-weiss); --status-offen-schrift: var(--ton-grau-700); --status-offen-rand: var(--ton-grau-400); --status-offen-punkt: var(--ton-grau-300); --status-kontaktiert-flaeche: var(--ton-gelb-500); --status-kontaktiert-schrift: var(--ton-grau-900); --status-termin-flaeche: var(--ton-gruen-600); --status-termin-schrift: var(--ton-weiss); --status-termin-chip: var(--ton-gruen-100); --status-termin-chip-schrift: var(--ton-gruen-900); --status-absage-flaeche: var(--ton-rot-600); --status-absage-schrift: var(--ton-weiss); --status-absage-chip: var(--ton-rot-100); --status-absage-chip-schrift: var(--ton-rot-900); /* Rückmeldung — getönte Fläche + dunkle Schrift, nie Aktionsfarbe */ --meldung-fehler-flaeche: var(--ton-rot-100); --meldung-fehler-schrift: var(--ton-rot-900); --meldung-warnung-flaeche: var(--ton-gelb-100); --meldung-warnung-schrift: var(--ton-gelb-900); --meldung-erfolg-flaeche: var(--ton-gruen-100); --meldung-erfolg-schrift: var(--ton-gruen-900); --meldung-info-flaeche: var(--ton-blau-100); --meldung-info-schrift: var(--ton-blau-900); --meldung-neutral-flaeche: var(--ton-grau-100); --meldung-neutral-schrift: var(--ton-grau-700); /* Erhebung und Ladezustand */ --schatten-karte: 0 2px 12px rgb(var(--ton-schatten-rgb) / 0.08); --schatten-schwebend: 0 8px 28px rgb(var(--ton-schatten-rgb) / 0.18); --schatten-kante: rgb(var(--ton-schatten-rgb) / 0.18); --skelett-grund: var(--ton-grau-150); --skelett-glanz: var(--ton-grau-75); /* ---- Ebene 3 · MASS — Abstand, Größe, Radius, Trefferfläche, Takt, Breite */ --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 20px; --a-6: 24px; --a-8: 32px; --a-10: 40px; --a-12: 48px; --gr-xs: 12px; --gr-s: 13px; --gr-m: 14px; --gr-basis: 16px; --gr-l: 19px; --gr-xl: 24px; --gr-xxl: 30px; --zeile-eng: 1.25; --zeile: 1.45; --zeile-weit: 1.6; --stark: 600; --sehr-stark: 700; --r-klein: 8px; --r-chip: 12px; --r-knopf: 16px; --r-karte: 24px; --r-pille: 999px; --griff-gross: 64px; --griff-mittel: 48px; --griff-klein: 40px; --takt-schnell: 120ms; --takt: 180ms; --kurve: cubic-bezier(.2, .6, .2, 1); --e-kopf: 10; --e-band: 15; --e-toast: 20; --kopf-hoehe: 56px; /* App-Kopf: 56 mobil, 64 ab 900 px (§2.6) */ --spalte-arbeit: 480px; --spalte-arbeit-weit: 640px; --spalte-verwaltung: 1280px; --spalte-lesen: 72ch; /* ---- Rückwärts-Brücke — die heutigen Namen bleiben als Aliase bestehen -- */ --grund: var(--flaeche-grund); --karte: var(--flaeche-karte); --schatten: var(--schatten-karte); --text: var(--text-stark); --sekundaer: var(--text-leise); --rand: var(--linie); --dunkel: var(--aktion-flaeche); --offen-flaeche: var(--status-offen-flaeche); --offen-rand: var(--status-offen-rand); --offen-schrift: var(--status-offen-schrift); --offen-punkt: var(--status-offen-punkt); --kontaktiert: var(--status-kontaktiert-flaeche); --kontaktiert-schrift: var(--status-kontaktiert-schrift); --termin: var(--status-termin-flaeche); --termin-chip: var(--status-termin-chip); --termin-chip-schrift: var(--status-termin-chip-schrift); --absage: var(--status-absage-flaeche); --absage-chip: var(--status-absage-chip); --absage-chip-schrift: var(--status-absage-chip-schrift); --pille: var(--r-pille); } /* ===================== Ende des Token-Blocks ============================= */ /* ========================================================================== GRUNDGERÜST (UX-2, plan_ux_final.md §4) — mobil zuerst, Haltepunkte in min-width. Der Seitenrand ist ein Wert je Haltepunkt, das Band und der Fuß rechnen damit statt mit festen Pixeln. ========================================================================== */ html { overflow-x: hidden; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; /* UX-8 (K-1): „Inter Ersatz" steht GENAU EINE Stufe hinter Inter — sie ist die auf Inters Maße umgerechnete lokale Grotesk (siehe @font-face oben). Alle bisherigen Glieder bleiben in derselben Reihenfolge dahinter stehen: Findet ein Gerät keine der dort genannten Schriften, greift wie bisher -apple-system, dann Segoe UI, dann system-ui, dann sans-serif. */ font-family: Inter, 'Inter Ersatz', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--grund); color: var(--text); font-size: var(--gr-basis); line-height: var(--zeile); --rand-seite: var(--a-3); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } #buehne { /* Die beiden Seitenränder als Werte, damit Kopfleiste und Reiterband bis an die Kante reichen können (negativer Rand = derselbe Wert, nicht geraten). */ --buehne-links: calc(var(--rand-seite) + env(safe-area-inset-left)); --buehne-rechts: calc(var(--rand-seite) + env(safe-area-inset-right)); flex: 1 0 auto; width: 100%; max-width: calc(var(--spalte-arbeit) + 2 * var(--rand-seite)); margin: 0 auto; /* Unten steht die Wanze („Fehler melden"): 12 px Rand plus 44 px Grifffläche = 56 px, die dauerhaft belegt sind. Reserviert werden 64 px — die 56 plus eine Fuge von 8 px. Ohne diesen Freiraum liegt der letzte Knopf der Bühne bei vollem Bildlauf unter ihr, und die Wanze liegt eine Ebene darüber: Der Tipp träfe dann sie und nicht den Knopf. */ padding: var(--a-4) var(--buehne-rechts) calc(var(--griff-gross) + env(safe-area-inset-bottom)) var(--buehne-links); } #buehne:focus { outline: none; } /* Ziel des Sprunglinks, kein Ring um die ganze Bühne */ body.breit #buehne { max-width: calc(var(--spalte-verwaltung) + 2 * var(--rand-seite)); } body.breit { --r-karte: 16px; } /* Verwaltungsspalte: dichte Listen (K-4) */ /* ========================================================================== RAHMEN (UX-3, plan_ux_final.md §2.6, §2.8, §4.2) — Sprunglink, klebende Kopfleiste, unsichtbar-lesbare Beschriftungen. ========================================================================== */ /* Sprunglink (K-14): außerhalb des Bildes, bis ihn die Tastatur fokussiert. */ .skip { position: absolute; left: var(--a-3); top: -200px; z-index: calc(var(--e-toast) + 1); padding: var(--a-2) var(--a-4); border-radius: var(--r-chip); background: var(--aktion-flaeche); color: var(--aktion-schrift); font-weight: var(--stark); text-decoration: none; } .skip:focus-visible { top: calc(var(--a-2) + env(safe-area-inset-top)); } /* Nur für Vorleser: `` der Tabellen (§2.8). Bleibt im Baum, nimmt keinen Platz — `display: none` würde es aus dem Zugänglichkeitsbaum werfen. */ .nur-lesen { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* App-Kopf: klebt oben, reicht bis an die Kante, safe-area-sicher. Eine Zeile Produkt + Rolle, darunter Hauptzeile links und Nebenzeile rechts; beide dürfen kürzen, nie umbrechen — sonst stimmt der Versatz des Reiterbands darunter nicht mehr. `.kopf` ohne `.app` bleibt der schlichte Zwischenkopf im Inhalt (Prüfsicht, Klärliste). */ .kopf.app { position: sticky; top: 0; z-index: var(--e-kopf); display: grid; grid-template-columns: minmax(0, 1fr) fit-content(55%); grid-template-areas: 'marke marke' 'haupt neben'; column-gap: var(--a-3); row-gap: 0; align-items: baseline; min-height: var(--kopf-hoehe); line-height: var(--zeile-eng); /* eng: das Reiterband rechnet mit --kopf-hoehe */ margin: calc(-1 * var(--a-4)) calc(-1 * var(--buehne-rechts)) var(--a-4) calc(-1 * var(--buehne-links)); padding: calc(var(--a-2) + env(safe-area-inset-top)) var(--buehne-rechts) var(--a-2) var(--buehne-links); background: var(--flaeche-kopf); border-bottom: 1px solid var(--linie); box-shadow: var(--schatten-karte); } .kopf.app .kopf__marke { grid-area: marke; font-size: var(--gr-xs); line-height: 1.35; font-weight: var(--stark); letter-spacing: .02em; text-transform: uppercase; color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* UX-8 (M-2): Die Hauptzeile ist seit UX-8 ein `

` statt eines `` — der Screen-Titel war unsemantisches Markup, während eine nachgeordnete Karte zum h1 hochgestuft war (QA-Audit UX-8, M-2). Der ``-Wähler ist seit NA1/B3 wieder in Gebrauch: Auf der Anruf-Karte trägt die FIRMA das Screen-h1, und die Kopfzeile („Noch N offen", ein Zähler) steht dort als ``. Beide teilen sich dieselbe Zelle und dieselbe Kürzung — die Leiste sieht in beiden Fällen gleich aus. Die zweite Regel nimmt dem h1 seine EIGENEN Werte wieder ab (Größe kommt aus der Zeile darüber, Gewicht aus `.kopf b`, das für das h1 nicht greift): So sieht die Kopfleiste aus wie vorher — sie darf nicht springen, denn `--kopf-hoehe` ist der Wert, mit dem das Reiterband darunter rechnet. */ .kopf.app > b, .kopf.app > h1 { grid-area: haupt; font-size: var(--gr-basis); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kopf.app > h1 { font-weight: var(--stark); letter-spacing: normal; line-height: inherit; margin: 0; hyphens: manual; } .kopf.app > span:not(.kopf__marke) { grid-area: neben; justify-self: end; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Zeigt das Band (offline / Fehler), ist ES die klebende Leiste — Kopf und Reiter laufen dann normal mit, statt sich unter das Band zu schieben. */ body:has(#band:not(.verborgen)) .kopf.app, body:has(#band:not(.verborgen)) .reiter { position: static; } /* Regel 2 (§4.2): Jedes Grid- und Flex-Kind darf schrumpfen. Ohne diese Zeile hält ein Flex-Kind sein längstes Wort fest und ragt aus seinem Elternteil — das war Timms Hauptbefund („Betroffenenrechte“, 13 px über den Chip). */ #buehne > *, .karte > *, .kopf > *, .chips > *, .zahlen > *, .zahl > *, .gate > *, .knopf > *, .chip > *, .haken > *, .fuss > *, .suchzeile > * { min-width: 0; } /* Regel 3 und 4: Freitext, Namen, Nachweise und Links brechen überall um; `hyphens` nutzt das `lang="de"` aus index.html erstmals. */ h1, h2, h3, p, li, dt, dd, small, label, summary, code, .knopf, .chip, .marke, .aufhaenger, .hinweis, .sperrhinweis, .klein, .sekundaer, .kopf b, .kopf span, .leer, .zahl span { overflow-wrap: anywhere; } /* In echten Tabellen (ab 900 px und in Scroll-Rahmen) bricht nur an Wortgrenzen — `anywhere` ließe die automatische Spaltenbreite bis auf ein Zeichen schrumpfen („Widerspruc/h“). Unter 900 px sind die Kartenzellen Blöcke, dort gilt `anywhere`. */ td, th { overflow-wrap: break-word; } th { hyphens: manual; } h1, h2, p, .knopf, .chip, .aufhaenger { hyphens: auto; } td.zahlwert, th.zahlwert, .zahl b, time { white-space: nowrap; } .kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--a-1) var(--a-3); margin: var(--a-1) 2px var(--a-4); } .kopf b { font-weight: var(--stark); } .kopf span { color: var(--sekundaer); font-size: var(--gr-m); } .karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: var(--a-4); margin-bottom: var(--a-4); } .karte.leise { background: var(--flaeche-leise); box-shadow: none; } h1 { font-size: var(--gr-xl); font-weight: var(--sehr-stark); margin: 0 0 6px; letter-spacing: -0.01em; line-height: var(--zeile-eng); } h2 { font-size: var(--gr-l); font-weight: var(--stark); margin: 0 0 4px; line-height: 1.3; } /* UX-7 (Bauteil 3): Ein Karten-/Abschnittstitel, der aus Gründen der Überschriften-Hierarchie (ein h1 je Screen) als h2 ausgezeichnet ist, aber die bisherige h1-in-Karte-Optik behält — sonst spränge die Oberfläche. Werte exakt aus der h1-Regel darüber; nur `margin-bottom` (nicht die Kurzform `margin`), damit ein etwaiges `.oben-N` (`margin-top`) unberührt bleibt. Der Mobil-Override (28px) steht im 900px-Media-Block wie bei h1. */ h2.karten-titel { font-size: var(--gr-xl); font-weight: var(--sehr-stark); letter-spacing: -0.01em; line-height: var(--zeile-eng); margin-bottom: 6px; } p { margin: 0 0 10px; } .sekundaer { color: var(--sekundaer); font-size: var(--gr-m); } .klein { font-size: var(--gr-s); color: var(--sekundaer); } a.farbe-erben { color: inherit; } /* Abstands-Klassen (4er-Raster) — sie lösen die `margin-top`-Inline-Stile ab. */ .oben-1 { margin-top: var(--a-1); } .oben-2 { margin-top: var(--a-2); } .oben-3 { margin-top: var(--a-3); } .oben-4 { margin-top: var(--a-4); } .oben-5 { margin-top: var(--a-5); } .oben-6 { margin-top: var(--a-6); } .unten-0 { margin-bottom: 0; } .zeile { display: block; } /* ein Zusatzsatz unter einem Reihen-Knopf */ /* --- Knöpfe: Setter-Strecke hält >= 64 px (Plan 5.5, F1 §7-2) ------------ */ .knopf { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: var(--griff-gross); padding: 10px 18px; margin-bottom: 10px; border: none; border-radius: var(--r-knopf); background: var(--dunkel); color: var(--aktion-schrift); font: inherit; font-weight: var(--stark); text-align: left; cursor: pointer; text-decoration: none; transition: transform var(--takt-schnell) var(--kurve), background-color var(--takt-schnell); } a.knopf { text-decoration: none; } .knopf small { display: block; font-weight: 400; font-size: var(--gr-s); opacity: .82; margin-top: 2px; } .knopf:disabled { opacity: .45; cursor: not-allowed; } .knopf.hell { background: var(--aktion-hell-flaeche); color: var(--offen-schrift); border: 1.5px solid var(--offen-rand); } .knopf.termin { background: var(--termin); color: var(--status-termin-schrift); } .knopf.kontaktiert { background: var(--kontaktiert); color: var(--kontaktiert-schrift); } .knopf.absage { background: var(--absage); color: var(--status-absage-schrift); } /* T-23 — DER ORANGE KNOPF („Folgetermin vereinbaren"), neben dem grünen „Abschluss erfassen" (.knopf.termin). Timm hat die beiden Farben benannt. ER FÜHRT KEINEN ZEHNTEN TON EIN: Die Fläche ist die Amber-Fläche, die dieses Haus schon hat (--kontaktiert, #f59e0b auf --ton-grau-900 — 8,6:1, weit über AA). Eine eigene Klasse statt `.knopf.kontaktiert` bekommt er trotzdem, weil der Name eines Knopfes sagen soll, was er tut: „kontaktiert" ist ein LEAD-STATUS der Setter-Strecke, und ein Closer, der einen Folgetermin vereinbart, setzt keinen Lead-Status. Ein Ton, zwei Namen, kein zweiter Farbwert. */ .knopf.folge { background: var(--kontaktiert); color: var(--kontaktiert-schrift); } /* NA1/P1N-10: 52 px waren eine stille Ausnahme von PLAN 5.5 ("Buttons >= 64 px", ohne Ausnahme) — betraf "Später nochmal" und "Ist schon gespeichert". */ .knopf.leise { background: transparent; color: var(--sekundaer); border: 1px solid var(--rand); min-height: var(--griff-gross); font-weight: 500; } /* Gefahr = rote Kontur, keine Fläche (K-7, Timm-Entscheid #12): Verwerfen, Widerspruch, Widerruf, Rücknahme. Neben dem gefüllten Primärknopf schreien sonst zwei Flächen gleich laut. */ .knopf.gefahr { background: transparent; color: var(--aktion-gefahr-schrift); border: 1.5px solid var(--aktion-gefahr-rand); } .knopf.mitte { text-align: center; align-items: center; } /* Größen: 48 px für Verwaltungsformulare, 40 px für die Zeilenaktion in einer Tabelle am Schreibtisch (§2.5) — statt neun Inline-Stilen. */ .knopf.mittel { min-height: var(--griff-mittel); padding: 8px 16px; } .knopf.klein { min-height: var(--griff-klein); padding: 6px 12px; margin-bottom: 0; font-size: var(--gr-m); } /* Form: Breite nach Inhalt, für Tabellenzellen. Ein `
` dahinter stammt aus der Zeit der Blockknöpfe und würde jetzt eine Leerzeile erzeugen. */ .knopf.reihe { display: inline-flex; width: auto; vertical-align: middle; margin: 2px 6px 2px 0; } .knopf.reihe + br { display: none; } /* --- Auswahl-Chips: nach TE-12-Nachtrag ebenfalls >= 64 px ---------------- */ /* Raster-Mindestbreite 140 px, gedeckelt auf die Spaltenbreite (§1.2) — bei 318 px Inhaltsbreite zwei Spalten statt drei, und jeder Chip darf umbrechen. */ .chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--a-2); margin-bottom: var(--a-3); } .chips.eng { grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)); } .chip { min-height: var(--griff-gross); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--a-2) 6px; border: 1.5px solid var(--rand); border-radius: var(--r-chip); background: var(--flaeche-feld); font: inherit; font-weight: var(--stark); cursor: pointer; color: var(--text); text-align: center; transition: transform var(--takt-schnell) var(--kurve), border-color var(--takt-schnell); } .chip > * { max-width: 100%; } .chip small { font-weight: 400; font-size: var(--gr-xs); color: var(--sekundaer); } .chip[aria-pressed="true"] { border-color: var(--dunkel); background: var(--dunkel); color: var(--text-auf-dunkel); } .chip[aria-pressed="true"] small { color: var(--text-auf-dunkel-leise); } .chip:disabled { opacity: .35; cursor: not-allowed; } /* --- Reiterband (UX-3, §2.6): Chef und Betrieb -------------------------- `.chips.reiter` löst das Chip-Raster ab — die Klasse `chip` bleibt am Knopf (Namens-Riegel), `.reiter .chip` setzt darauf auf. Klebt unter dem Kopf, scrollt waagerecht mit Randhinweis, Unterstrich statt dunkler Fläche, Zählabzeichen als Pille. `role="tablist"` / `role="tab"` / `aria-selected` kommen aus app.js (reiterBand). */ .reiter { /* Unter 600 px bricht das Band um — vier Reiter passen bei 320 px nicht in eine Zeile, und ein halb sichtbares „Betroffenenrechte“ war Timms Befund. Ab 600 px eine Zeile, waagerecht scrollbar mit Randhinweis (§4.1). */ display: flex; flex-wrap: wrap; gap: 0 var(--a-1); align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scroll-padding: 0 var(--a-4); /* Klebt erst ab 600 px (eine Zeile). Zwei umgebrochene Reihen plus Kopf wären auf einem 320er-Handy ein Viertel des Bildes — dort läuft es mit. */ position: static; top: calc(var(--kopf-hoehe) + env(safe-area-inset-top)); z-index: calc(var(--e-kopf) - 1); margin: calc(-1 * var(--a-4)) calc(-1 * var(--buehne-rechts)) var(--a-4) calc(-1 * var(--buehne-links)); padding: 0 var(--buehne-rechts) 0 var(--buehne-links); border-bottom: 1px solid var(--linie); /* Randhinweis beim Überlauf — dieselbe Technik wie beim Tabellen-Rahmen. */ background: linear-gradient(90deg, var(--flaeche-kopf) 30%, transparent), linear-gradient(90deg, transparent, var(--flaeche-kopf) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, var(--schatten-kante), transparent), radial-gradient(farthest-side at 100% 50%, var(--schatten-kante), transparent) 100% 0, var(--flaeche-kopf); background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%, auto; background-attachment: local, local, scroll, scroll, scroll; } .reiter::-webkit-scrollbar { display: none; } .reiter .chip { flex: 0 0 auto; flex-direction: row; align-items: center; gap: var(--a-2); min-height: var(--griff-mittel); padding: var(--a-2) var(--a-3); border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; background: transparent; color: var(--text-mittel); white-space: nowrap; transition: color var(--takt-schnell), border-color var(--takt-schnell); } .reiter .chip > * { max-width: none; } .reiter .chip small { display: inline-block; padding: 1px 8px; border-radius: var(--r-pille); background: var(--meldung-neutral-flaeche); color: var(--meldung-neutral-schrift); font-size: var(--gr-xs); font-weight: var(--stark); line-height: 1.4; font-variant-numeric: tabular-nums; } .reiter .chip[aria-selected="true"] { color: var(--text-stark); border-bottom-color: var(--aktion-flaeche); } .reiter .chip[aria-selected="true"] small { background: var(--aktion-flaeche); color: var(--aktion-schrift); } .reiter .chip:focus-visible { outline-offset: -2px; } /* --- Eingaben (P2-A) ------------------------------------------------------ F1 zeichnet genau ZWEI Eingaben — das Notizfeld und die Datumswahl auf M15 — und beide als Inline-Stil. Der Import-Assistent hat rund fünfzehn; ein Stil-Attribut je Feld wäre eine Zweitschrift, die beim ersten Umbau auseinanderläuft. Werte aus M15: Rand `--rand` 1,5 px, Radius `--r-chip`, `font: inherit`. Standardhöhe ist seit UX-2 die mittlere Trefferfläche (48 px, Verwaltungsformulare); `.eingabe.gross` hält die 64 px der Setter-Strecke (Plan 5.5 / F1 §7-2). */ .eingabe { width: 100%; max-width: 100%; min-width: 0; min-height: var(--griff-mittel); padding: 10px 12px; margin-bottom: 10px; border: 1.5px solid var(--rand); border-radius: var(--r-chip); font: inherit; color: var(--text); background: var(--flaeche-feld); } .eingabe.gross { min-height: var(--griff-gross); padding: 12px; } .eingabe.schmal { min-height: var(--griff-mittel); margin-bottom: 0; } textarea.eingabe { min-height: 96px; } .eingabe:disabled { opacity: .55; } /* UX-5: Der Platzhalter ist ein BEISPIEL, kein Etikett — er steht leiser als die Beschriftung, damit „(Pflicht)" nie mehr allein in ihm lebt (§2.6). */ .eingabe::placeholder { color: var(--text-leise); opacity: 1; } /* UX-5: Auswahllisten tragen denselben Rahmen wie ein Textfeld und einen eigenen Pfeil (Inline-SVG, damit kein Aufruf nach draußen geht). `appearance` nimmt den Systempfeil weg; der SVG-Pfeil steht rechts, der Text bekommt davor Platz. Auf `.schmal` (Tabellenzelle) rückt er enger. NA1/A4 — BEWUSSTE AUSNAHME: Die Pfeilfarbe im SVG unten (%236b7280 = #6b7280) ist als Hexwert in der data-URI hartkodiert. Ein `var(--…)`-Token greift innerhalb einer als `background-image` eingebetteten data-URI nicht (die URI ist ein opaker String, kein CSS-Kontext). Der Wert entspricht dem Grauton der Linien-/Sekundärebene und ist bewusst inline gehalten. */ select.eingabe { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: calc(var(--a-4) + 14px); 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='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--a-3) center; } select.eingabe.schmal { padding-right: calc(var(--a-3) + 12px); background-position: right var(--a-2) center; } select.eingabe:disabled { opacity: .55; } /* UX-5: Ein Feld, das der Server (oder die Maske) beanstandet, trägt einen roten Rahmen. Die Verkabelung von `aria-invalid` und der Fehlerzeile ist UX-7 — hier steht nur die Fähigkeit, damit die Form schon feststeht. */ .eingabe[aria-invalid="true"] { border-color: var(--aktion-gefahr-rand); } /* Haken: EIN Kontrollkästchen-Stil in Fließtextgröße (§2.6). */ .haken { display: flex; gap: var(--a-3); align-items: flex-start; margin: var(--a-3) 0; font-size: var(--gr-basis); line-height: var(--zeile); cursor: pointer; } .haken input { flex: none; width: 24px; height: 24px; min-height: 24px; margin: 0; accent-color: var(--aktion-flaeche); } /* --- Statuspunkte, Pillen und Marken -------------------------------------- */ /* Regel 7 (§4.2): Kein langer Status verbreitert eine Tabellenspalte — die Pille darf umbrechen; lange Zustandstexte tragen die `.marke`. */ .pille { display: inline-block; max-width: 100%; padding: 5px 12px; border-radius: var(--pille); font-size: var(--gr-s); font-weight: var(--stark); line-height: 1.3; white-space: nowrap; } @media (max-width: 899px) { .pille { white-space: normal; overflow-wrap: anywhere; } } /* EINE PILLE, DIE FREI GETIPPTEN TEXT TRÄGT, MUSS AUCH AUF DESKTOP UMBRECHEN. Die Regel darüber hält jede Pille einzeilig — richtig, solange in ihr ein Zustandswort steht („Folgetermin", „Kein Abschluss"). Die Storno-Pille trägt dagegen einen bis zu 200 Zeichen langen Grund aus der Tastatur des Closers. Bis 899 px schaltete die Media-Regel das Umbrechen ein, ab 900 px nicht mehr: Ein langer Grund brauchte 770 px in einer Karte mit 558 px Innenmaß, lief in die Nachbarspalte und wurde am Seitenrand abgeschnitten — ausgerechnet die Auskunft, WARUM ein Umsatz nicht mehr zählt (Codex-Befund R1, 12.09.2026). Additiv als eigener Name, damit die übrigen Pillen einzeilig bleiben: `max-width` und `line-height` stehen hier noch einmal, weil eine mehrzeilige Pille anders atmet als eine einzeilige (1.3 klebt über zwei Zeilen). */ .pille.mehrzeilig { white-space: normal; overflow-wrap: anywhere; max-width: 100%; padding: 6px 12px; line-height: var(--zeile); } .pille.gruen { background: var(--termin-chip); color: var(--termin-chip-schrift); } .pille.rot { background: var(--absage-chip); color: var(--absage-chip-schrift); } .pille.grau { background: var(--meldung-neutral-flaeche); color: var(--offen-schrift); } .pille.gelb { background: var(--meldung-warnung-flaeche); color: var(--meldung-warnung-schrift); } .marke { display: inline-flex; gap: 6px; align-items: flex-start; max-width: 100%; font-size: var(--gr-s); font-weight: var(--stark); line-height: 1.3; color: var(--text-mittel); } .marke::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: .4em; border-radius: 50%; background: currentColor; } .marke.gruen { color: var(--meldung-erfolg-schrift); } .marke.rot { color: var(--meldung-fehler-schrift); } .marke.gelb { color: var(--text-warnung); } .marke.grau { color: var(--text-leise); } /* --- Hinweis: EINE Bauform für Rückmeldungen im Fluss (§2.6) -------------- */ .hinweis { padding: var(--a-3) var(--a-4); border-radius: var(--r-chip); margin: 0 0 var(--a-3); font-size: var(--gr-m); line-height: var(--zeile); } .hinweis--info { background: var(--meldung-info-flaeche); color: var(--meldung-info-schrift); } .hinweis--warnung { background: var(--meldung-warnung-flaeche); color: var(--meldung-warnung-schrift); } .hinweis--fehler { background: var(--meldung-fehler-flaeche); color: var(--meldung-fehler-schrift); } .hinweis--erfolg { background: var(--meldung-erfolg-flaeche); color: var(--meldung-erfolg-schrift); } /* --- Leerzustand: eine Form statt sechs (§5) ------------------------------ */ .leer { padding: var(--a-4); border: 1px dashed var(--linie-stark); border-radius: var(--r-chip); color: var(--text-leise); font-size: var(--gr-m); margin: 0 0 var(--a-3); } /* UX-8 (M-1): „Diese Woche ist voll" ist ein endgültiger Zustand OHNE Kopfleiste und stand deshalb ohne Überschrift da. Der Zustands-Satz selbst ist jetzt das h1; diese Regel gibt ihm exakt die Inline-Optik des `` zurück, das dort stand — dasselbe Muster wie `.aufklapp summary h2`. */ h1.leer__titel { display: inline; font-size: inherit; font-weight: bold; letter-spacing: normal; line-height: inherit; margin: 0; hyphens: inherit; } /* --- Aufklapp: Träger für die muss-bleiben-Rechtstexte (§6) --------------- */ .aufklapp { border-top: 1px solid var(--linie); margin-top: var(--a-3); padding-top: var(--a-1); } .aufklapp summary { cursor: pointer; padding: var(--a-2) 0; font-size: var(--gr-m); font-weight: var(--stark); color: var(--text-mittel); } .aufklapp summary h2 { display: inline; font-size: var(--gr-m); font-weight: var(--stark); margin: 0; } .aufklapp[open] summary { margin-bottom: var(--a-1); } .aufklapp .klein, .aufklapp p { line-height: var(--zeile-weit); } /* --- Gate-Nachweis (T3/T10) ---------------------------------------------- */ .gate { display: flex; gap: var(--a-2) 10px; flex-wrap: wrap; font-size: var(--gr-s); font-weight: var(--stark); margin: 14px 0 var(--a-2); } .gate .ok { color: var(--termin-chip-schrift); } .gate .offen { color: var(--text-warnung); } /* T-26: Hier stand die Regel für den R-1-Sprechzettel der Setter-Karte (12 px grau) und ein zweites Mal weiter unten dieselbe Klasse in Fließtextgröße. Beide sind mit dem Sprechzettel entfallen — es gibt kein Element mehr, das diese Klasse trägt. test/39 hält das fest. */ .aufhaenger { background: var(--flaeche-leise); border-left: 3px solid var(--termin); border-radius: 0 10px 10px 0; padding: 10px 12px; margin: var(--a-3) 0; font-size: 15px; } /* --- Zahlen (T11, Chef) --------------------------------------------------- */ /* Drei Kacheln, solange drei Platz haben; darunter 2 + 1 statt gequetschter Wörter (§2.6). Die Kennzahl schrumpft mit der Breite, „33,3 %“ bleibt drin. */ .zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)); gap: var(--a-2); } .zahl { background: var(--flaeche-karte); border-radius: var(--r-chip); border: 1px solid var(--rand); padding: var(--a-3) var(--a-1); text-align: center; } .zahl b { display: block; font-size: clamp(20px, 6.4vw, var(--gr-xxl)); font-weight: var(--sehr-stark); line-height: 1.1; font-variant-numeric: tabular-nums; } .zahl span { display: block; font-size: var(--gr-xs); color: var(--sekundaer); margin-top: 2px; } /* --- Closer: Terminkarten (UX-3, §4.1) — eine Spalte, ab 900 px zwei -------- */ .termine { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--a-4); } .termine > * { min-width: 0; } .sperrhinweis { margin-top: var(--a-3); font-size: var(--gr-s); color: var(--sekundaer); border-top: 1px solid var(--rand); padding-top: 10px; line-height: var(--zeile-weit); } /* --- Tabellen (§4.3) ------------------------------------------------------ Stufe 1: `.tabelle-rahmen` als Scroll-Umschlag mit Schattenkante — das Scrollen bleibt in der Karte statt die Seite zu verschieben. Stufe 2: `.tabelle--karten` wird unter 900 px zur Kartenliste; jedes `td` trägt sein Etikett in `data-spalte`. Ein DOM je Datensatz, kein zweiter Zeichenweg. Stufe 3: `.tabelle--vergleich` scrollt bewusst waagerecht mit klebender erster Spalte (Import-Beispieldaten, K-11). */ table { width: 100%; border-collapse: collapse; font-size: var(--gr-m); } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rand); vertical-align: top; } th { color: var(--sekundaer); font-weight: var(--stark); font-size: var(--gr-xs); text-transform: uppercase; letter-spacing: .03em; } td.zahlwert, th.zahlwert { text-align: right; font-variant-numeric: tabular-nums; } td .eingabe.schmal { margin-bottom: 0; } .tabelle-rahmen { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; margin-bottom: var(--a-2); background: linear-gradient(90deg, var(--flaeche-karte) 30%, transparent), linear-gradient(90deg, transparent, var(--flaeche-karte) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, var(--schatten-kante), transparent), radial-gradient(farthest-side at 100% 50%, var(--schatten-kante), transparent) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .tabelle--vergleich td, .tabelle--vergleich th { white-space: nowrap; } .tabelle--vergleich td:first-child, .tabelle--vergleich th:first-child { position: sticky; left: 0; background: var(--flaeche-karte); z-index: 1; } .tabelle--paare td { overflow-wrap: anywhere; } /* Schlüssel/Wert: der Wert darf umbrechen */ .tabelle--paare td:first-child { width: 38%; overflow-wrap: break-word; } /* Definitionslisten (§4.3 #11 Rohzeile, #15 Fristen) — die ehrlichere Form für zwei Spalten Schlüssel/Wert (U-B9). Gestapelt auf dem Handy (kein 38-%-Quetsch mehr), zweispaltig ab 600 px. Das `dt`-Etikett trägt den Feld-Zellen-Stil (uppercase, --gr-xs, --text-leise), damit man auch zweispaltig erkennt, was Schlüssel und was Wert ist. NA1/A1: EIGENER Klassenname `paarliste` (nicht `paare`) — die Alt-Regel `dl.paare` (Termin-steht-Schirm, UX-4, weiter unten) hat mit ihrem Tag höhere Spezifität (0-1-1) und zwang der `.paar`-DIV-Struktur ein `max-content`-Grid auf, das das Layout auf jeder Breite zerlegte. `.paar` bleibt als inneres Element, aber eindeutig unter `.paarliste` gescoped. */ .paarliste-kopf { font-size: var(--gr-xs); font-weight: var(--stark); text-transform: uppercase; letter-spacing: .03em; color: var(--text-leise); margin: 0 0 var(--a-2); } .paarliste { margin: 0 0 var(--a-2); } .paarliste .paar { padding: var(--a-1) 0; border-bottom: 1px solid var(--rand); } .paarliste .paar:last-child { border-bottom: none; } .paarliste .paar dt { font-size: var(--gr-xs); font-weight: var(--stark); text-transform: uppercase; letter-spacing: .03em; color: var(--text-leise); margin-bottom: 2px; overflow-wrap: break-word; } .paarliste .paar dd { margin: 0; overflow-wrap: anywhere; } @media (min-width: 600px) { .paarliste .paar { display: grid; grid-template-columns: 38% 1fr; column-gap: var(--a-3); align-items: baseline; } .paarliste .paar dt { margin-bottom: 0; } } @media (max-width: 899px) { .tabelle--karten, .tabelle--karten tbody, .tabelle--karten tr, .tabelle--karten td { display: block; } .tabelle--karten thead { display: none; } .tabelle--karten tr { border: 1px solid var(--linie); border-radius: var(--r-chip); padding: var(--a-3); margin-bottom: var(--a-3); background: var(--flaeche-karte); } .tabelle--karten td { border: none; padding: var(--a-1) 0; text-align: left; overflow-wrap: anywhere; } .tabelle--karten td:empty { display: none; } .tabelle--karten td[data-spalte]::before { content: attr(data-spalte); display: block; font-size: var(--gr-xs); font-weight: var(--stark); text-transform: uppercase; letter-spacing: .03em; color: var(--text-leise); margin-bottom: 2px; } /* NA1/A2: Zellen mit einer eigenen `.feld-zelle` (Etikett + Feld) tragen den Spaltennamen schon als sichtbaren — die generierte ::before-Marke wäre eine fast wortgleiche Doppel-Beschriftung. Sie wird hier unterdrückt (:has wird in diesem Paket bereits verwendet). */ .tabelle--karten td[data-spalte]:has(.feld-zelle)::before { content: none; } .tabelle--karten .knopf.reihe { display: flex; width: 100%; margin: var(--a-1) 0 0; } .tabelle--karten .knopf.klein { min-height: var(--griff-mittel); } /* NA1/A3: Nach dem Wrapper-Umbau steckt die Eingabe im `.feld-zelle`-Label, der alte `.eingabe.schmal + .knopf`-Selektor greift dann nicht mehr (die Eingabe ist kein direkter Nachbar des Knopfes mehr). `.feld-zelle + .knopf` stellt den Abstand wieder her; der alte Selektor bleibt für ungewrappte Fälle stehen. */ .tabelle--karten .knopf.klein + .knopf.klein, .tabelle--karten .eingabe.schmal + .knopf { margin-top: var(--a-2); } .tabelle--karten .feld-zelle + .knopf { margin-top: var(--a-2); } .tabelle--karten td .eingabe.schmal { margin-bottom: var(--a-2); } } /* --- Fuß: Impressum · Datenschutz · Nutzungsbedingungen (§6, R-11) -------- */ .fuss { width: 100%; max-width: calc(var(--spalte-arbeit) + 2 * var(--rand-seite)); margin: 0 auto; /* Derselbe Freiraum wie unter der Bühne: Die Wanze belegt unten rechts 56 px, und die drei Verweise stehen zentriert in EINER Reihe — auf 390 px reicht „Nutzungsbedingungen" bis in ihr Feld. Ohne die 64 px öffnete ein Tipp auf den letzten Verweis den Melde-Dialog. */ padding: var(--a-4) var(--rand-seite) calc(var(--griff-gross) + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-2) var(--a-4); font-size: var(--gr-s); color: var(--text-leise); text-align: center; } body.breit .fuss { max-width: calc(var(--spalte-verwaltung) + 2 * var(--rand-seite)); } .fuss a { color: inherit; } /* --- Rückmeldung: Tipp, Druck, Fokus (§2.7, §2.8) ------------------------- */ @media (hover: hover) and (pointer: fine) { .knopf:not(:disabled):not(.hell):not(.leise):not(.gefahr):not(.termin):not(.absage):not(.kontaktiert):hover { background: var(--aktion-tipp); } .knopf.hell:not(:disabled):hover, .knopf.leise:not(:disabled):hover { background: var(--flaeche-leise); } .knopf.gefahr:not(:disabled):hover { background: var(--aktion-gefahr-tipp); } .knopf.termin:not(:disabled):hover, .knopf.absage:not(:disabled):hover, .knopf.kontaktiert:not(:disabled):hover { filter: brightness(.94); } .chip:not(:disabled):hover { border-color: var(--linie-stark); } .reiter .chip:not(:disabled):hover { border-color: transparent; border-bottom-color: var(--linie-stark); color: var(--text-stark); } .reiter .chip[aria-selected="true"]:hover { border-bottom-color: var(--aktion-flaeche); } .fuss a:hover, .kopf a:hover { color: var(--text-stark); } } /* Zeilen-Hover für Tabellen (§7.2) — eine leise Ebene-2-Fläche unter der Zeile, auf die der Zeiger zeigt. Nur auf hover-fähigen Geräten; unter 900 px sind `.tabelle--karten` KEINE Tabellen mehr, sondern Karten, deshalb greift der Karten-Hover erst ab 900 px. Die Rahmen-Tabellen ohne `--karten` bleiben auf jeder Breite Tabellen und tragen den Hover durchgehend. Die Vergleichshülle ist bewusst AUSGENOMMEN: ihre erste Spalte klebt mit eigenem, opakem Hintergrund (sonst scrollt Text durch) — ein Zeilen-Hover würde genau diese Spalte nicht mitfärben und die Zeile zweifarbig zerreißen. Dort will man ohnehin vergleichen, nicht eine Zeile verfolgen. */ @media (hover: hover) and (pointer: fine) { .tabelle-rahmen table:not(.tabelle--karten):not(.tabelle--vergleich) tbody tr:hover td { background: var(--flaeche-leise); } } @media (hover: hover) and (pointer: fine) and (min-width: 900px) { .tabelle-rahmen table.tabelle--karten tbody tr:hover td { background: var(--flaeche-leise); } } .knopf:not(:disabled):active, .chip:not(:disabled):active { transform: scale(.985); } .knopf:not(:disabled):not(.hell):not(.leise):not(.gefahr):not(.termin):not(.absage):not(.kontaktiert):active { background: var(--aktion-druck); } .knopf:focus-visible, .chip:focus-visible, .eingabe:focus-visible, a:focus-visible, summary:focus-visible, .haken input:focus-visible { outline: 2px solid var(--linie-fokus); outline-offset: 2px; } /* --- Toast (T10) — Rechteck statt Pille (K-17), safe-area-sicher ---------- */ #toast { position: fixed; left: 50%; bottom: calc(var(--a-6) + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(8px); background: var(--dunkel); color: var(--text-auf-dunkel); padding: 12px 18px; border-radius: var(--r-chip); font-size: var(--gr-m); font-weight: 500; line-height: 1.35; opacity: 0; pointer-events: none; transition: opacity var(--takt) var(--kurve), transform var(--takt) var(--kurve); z-index: var(--e-toast); max-width: min(90vw, 480px); text-align: center; } #toast.sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); } /* --- Ladezustand M17: Skelett statt Spinner ------------------------------- */ .skelett { background: linear-gradient(90deg, var(--skelett-grund) 25%, var(--skelett-glanz) 37%, var(--skelett-grund) 63%); background-size: 400% 100%; animation: wandern 1.3s linear infinite; border-radius: var(--r-klein); height: 16px; margin-bottom: 10px; } .skelett.gross { height: 28px; width: 70%; } .skelett.kurz { width: 60%; } .skelett.knopf { height: var(--griff-gross); border-radius: var(--r-knopf); } @keyframes wandern { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } } .verborgen { display: none !important; } /* Offline- und Fehlerband (M7 / M18) — klebende Leiste in voller Breite, ohne den alten Negativ-Rand (der hing an der festen Bühnen-Polsterung und ragte auf jedem Handy 16 px über den rechten Rand). */ #band { position: sticky; top: 0; z-index: var(--e-band); margin: 0; padding: calc(10px + env(safe-area-inset-top)) var(--a-4) 10px; font-size: var(--gr-s); font-weight: var(--stark); text-align: center; line-height: 1.35; } #band.offline { background: var(--meldung-warnung-flaeche); color: var(--meldung-warnung-schrift); } #band.fehler { background: var(--absage-chip); color: var(--absage-chip-schrift); } /* --- Haltepunkte (§4.1) --------------------------------------------------- */ @media (min-width: 375px) { body { --rand-seite: var(--a-4); } } @media (min-width: 600px) { body { --rand-seite: var(--a-6); } .karte { padding: var(--a-5); } .reiter { flex-wrap: nowrap; position: sticky; } } @media (min-width: 900px) { body { --kopf-hoehe: 64px; } h1, h2.karten-titel { font-size: 28px; } .zahl b { font-size: 32px; } /* Arbeitsspalte am Schreibtisch: Setter auf 640 px (§4.1); Verwaltung (body.breit — Chef, Betrieb, Closer) bleibt auf --spalte-verwaltung. */ body:not(.breit) #buehne, body:not(.breit) .fuss { max-width: calc(var(--spalte-arbeit-weit) + 2 * var(--rand-seite)); } .kopf.app { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; } /* UX-8 (M-2): dieselbe Zeile für das umgetaggte h1 — sonst zöge hier die allgemeine Regel `h1 { font-size: 28px }` und die Kopfleiste spränge. */ .kopf.app > b, .kopf.app > h1 { font-size: var(--gr-l); } .termine { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { body { --rand-seite: var(--a-8); } } @media (prefers-reduced-motion: reduce) { .skelett { animation: none; } #toast, .knopf, .chip { transition: none; } .knopf:not(:disabled):active, .chip:not(:disabled):active { transform: none; } .reiter { scroll-behavior: auto; } } /* ========================================================================== UX-4 — SETTER-STRECKE (plan_ux_final.md §3.2, §5, §6): Karte „Wer", Vorbereitung, „Wie erreichen", „Wie gelaufen" je Kanal, Nachfrage-Schirme, Tagesgruppierung der Slots, Wiedervorlage mit Feldern, Bilanz-Fuß. Alle bisherigen Kennungen und Klassen bleiben — hier kommt nur dazu. ========================================================================== */ /* Etiketten in Versalien: Aufhänger, Sprechzettel, Kanalgruppe, Vorbereitung. NA1/C-5: `.vorbereitung__label` stand bis hierher als zeichengleiche KOPIE dieser Deklarationen weiter unten. Zwei Stellen für ein Aussehen driften auseinander, sobald jemand nur eine anfasst — der Selektor tritt der Gruppe bei, die Deklarationen bleiben unverändert. Kein anderer Satz greift zwischen der alten und der neuen Position auf dieses Etikett zu, die Spezifität ist dieselbe (0,1,0): sichtbar ändert sich nichts. */ /* T-26: Das Etikett des R-1-Sprechzettels ist aus dieser Gruppe genommen — Sprechzettel und Etikett stehen nicht mehr auf der Karte. Die drei übrigen Etiketten behalten Wert für Wert dieselben Deklarationen. */ .aufhaenger__label, .kanalgruppe__titel, .vorbereitung__label { display: block; font-size: var(--gr-xs); font-weight: var(--stark); letter-spacing: .03em; text-transform: uppercase; color: var(--text-leise); margin-bottom: var(--a-1); } .aufhaenger { font-size: var(--gr-basis); line-height: var(--zeile-weit); } /* Der WhatsApp-Weg: zentriert wie der Wählknopf, aber ohne dessen Klasse `mitte` — `a.knopf.mitte` bleibt der EINE Wählknopf (test/11, Namens-Riegel). */ .knopf.wa-weg { text-align: center; align-items: center; } /* Die Telefonnummer bricht nicht (U-S13). */ .nummer { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Vorbereitung: die Checkliste steht in ihrer eigenen Karte; erfüllt wird sie zur grünen Zeile (§3.2 Punkt 3). */ #vorbereitung .gate { margin-top: 0; } p#vorbereitung { margin-bottom: var(--a-4); font-weight: var(--stark); } /* ========================================================================== SETTER-KARTE (Timms Punkte T-1 bis T-3, 07.09.2026): Kontaktdaten in einer eigenen Karte, die vCard-Abfrage darin, die beiden Wege direkt untereinander. Rein additiv — keine bestehende Regel wird umgeschrieben. ========================================================================== */ /* Die Kontaktdaten selbst: die vorhandene `paarliste` (U-B9) trägt sie schon; hier nur der Abstand zum Block darunter und der Umbruch langer Adressen. */ .karte--kontakt .paarliste { margin-bottom: var(--a-2); } .karte--kontakt #kontakt-quelle { margin: 0 0 var(--a-2); } /* NA1/C-2 — HAUSREGEL FÜR DIE VERWEISE IN DIESER KARTE. Website und Herkunft sind die einzigen echten `` im Inhalt dieses Hauses; überall sonst erben Verweise ihre Farbe (`a.farbe-erben`, `.fuss a`) oder tragen die Knopf-Optik. Ohne eine Regel blieben genau diese zwei im Browser-Vorgabeblau #0000EE stehen — die einzige Farbe des Schirms, die in keinem Token steht und die kein Thema mitbewegt. Erkennbar bleiben sie über die UNTERSTREICHUNG, nicht über die Farbe; das trägt auch bei Farbfehlsichtigkeit. `:not(.knopf)` ist Pflicht und kein Feinschliff: Der vCard-Knopf ist ein `` IN dieser Karte — ohne den Ausschluss bekäme er graue Schrift auf dunkler Fläche und eine Unterstreichung. */ .karte--kontakt a:not(.knopf) { color: var(--text-mittel); text-decoration: underline; text-underline-offset: 2px; } /* Die Vorbereitung sitzt jetzt am Fuß der Kontaktdaten-Karte statt in einer eigenen. Abgesetzt wie `.nebenweg`/`.verwaltung`, damit sie als eigener Abschnitt lesbar bleibt; das Etikett ersetzt das frühere Karten-h2 und trägt denselben Wortlaut. */ .vorbereitung { margin-top: var(--a-3); padding-top: var(--a-3); border-top: 1px dashed var(--linie); } /* NA1/C-4 — DAS ETIKETT IST EINE ÜBERSCHRIFT (h3), UND SIE SIEHT GLEICH AUS. Größe, Gewicht, Laufweite, Versalien, Farbe und Unterrand kommen aus der Etikett-Gruppe oben (Autorenregeln schlagen die Browser-Vorgaben). Was von den h3-Vorgaben übrig bliebe, ist der `margin-top` von rund einer Zeile — und der würde die Karte auseinanderziehen. Genau der fällt hier weg. */ h3.vorbereitung__label { margin-top: 0; } .vorbereitung .gate { margin-bottom: var(--a-3); } .vorbereitung .knopf:last-child { margin-bottom: 0; } .karte--kontakt p#vorbereitung { margin-bottom: 0; } /* T-1: WhatsApp klebt am Anruf-Knopf — der halbe Knopf-Abstand statt des vollen macht aus zwei Knöpfen ein Knopfpaar. NA1/C-3: auch im gesperrten Fall. Dort ist `#anrufen` ausgeblendet und den Platz nimmt der gesperrte Ersatzknopf ein — der hat keine `id` und fiel aus dieser Regel heraus. Ergebnis war ein Paar, das gesperrt weiter auseinander stand als offen. */ .karte--weg #anrufen, .karte--weg .knopf--anruf-gesperrt { margin-bottom: var(--a-1); } /* Kanalgruppen in „Wie gelaufen": ein Rahmen je Kanal, die gebuchte Gruppe ist hervorgehoben — der Setter sieht nach der Rückkehr aus Telefon oder WhatsApp, wohin sein Ergebnis geht. */ .kanalgruppe { padding: var(--a-3); border: 1px solid var(--linie); border-radius: var(--r-chip); margin-bottom: var(--a-3); } .kanalgruppe.aktiv { border-color: var(--linie-stark); background: var(--flaeche-leise); } .kanalgruppe > .knopf:last-child { margin-bottom: 0; } /* Die Ergebnis-Knöpfe: eine Spalte mobil, ab 600 px 2×2 (entschieden, §3.2); jeder weiterhin ≥ 64 px, Reihenfolge und Farben unverändert. */ .ergebnisse { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-2); margin-bottom: var(--a-2); } .ergebnisse > * { min-width: 0; } .ergebnisse .knopf { margin-bottom: 0; } @media (min-width: 600px) { .ergebnisse { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Nebenweg (Wiedervorlage) und Freigabe-Verwaltung: räumlich abgesetzt, nie wie eine zweite Hauptaktion. */ .nebenweg, .verwaltung { margin-top: var(--a-4); padding-top: var(--a-3); border-top: 1px dashed var(--linie); } .nebenweg .knopf, .verwaltung .knopf { margin-bottom: 0; } /* T-26: Der Abstandssatz zwischen dem Knopf dieser Gruppe und einem Aufklapp dahinter ist entfallen — der einzige Aufklapp in einer Freigabe-Verwaltung war der R-2-Volltext der Setter-Karte. Der Aufklapp-Stil selbst bleibt (Betriebs-Sicht, „Worauf sich die Auskunft stützt"). */ /* Die Karte, auf die der Schirm gerade geführt hat (frisch vereinbarter Folgetermin). Sie bleibt sechs Sekunden markiert und wird dann von selbst wieder still — eine dauerhafte Markierung wäre nach dem dritten Termin eine Liste voller Markierungen. Kein Blinken: ein ruhiger Rahmen, den auch jemand mit reduzierter Bewegung sieht. */ .karte.hervorgehoben { border-color: var(--aktion-flaeche); box-shadow: 0 0 0 2px var(--aktion-flaeche); } /* Produktfamilien der Abschluss-Maske: die Hülle um mehrere Varianten. Weiterhin KEINE `.karte`-Klasse — der Rahmen käme sonst aus zwei Regeln und jede Änderung an `.karte` zöge hier mit. Was sie AUSSIEHT, steht seit dem Feinschliff trotzdem hier: eine eigene Fläche mit Rand und Radius, damit eine Familie als Block erkennbar ist und nicht als weitere Zeile in einer langen Liste (Timm, 12.09.2026: „grafisch aufgewertet und übersichtlicher"). Die Trennlinie von vorher entfällt dafür — Fläche UND Linie wären zweimal dieselbe Grenze. */ .produktkarte { background: var(--flaeche-leise); border: 1px solid var(--linie); border-radius: var(--r-chip); padding: var(--a-3); margin-top: var(--a-3); } .produktkarte:first-of-type { margin-top: 0; } /* Titel links, die Pille „gewählt" rechts daneben — sie darf den Titel nicht vor sich herschieben, deshalb `gap` statt `space-between` mit Umbruch. */ .produktkarte__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-2); margin-bottom: var(--a-2); } .produktkarte__titel { font-size: var(--gr-l); font-weight: var(--sehr-stark); line-height: var(--zeile-eng); margin: 0; } /* Der Aufklapp-Knopf steht unter dem Titel und trägt nur noch die Auskunft, wie viele Varianten dahinterstehen. Er ist bewusst leise: Der Titel ist die Überschrift, nicht er. */ .produktkarte > [data-familieauf] { margin-bottom: 0; } .produktkarte > [data-familieauf] + div { margin-top: var(--a-3); } /* Eine Variantenzeile. Die letzte Zeile einer Familie hat keinen Abstand nach unten — die Karte bringt ihren eigenen mit. */ .produktzeile { margin-bottom: var(--a-4); } .produktzeile:last-child { margin-bottom: 0; } /* DER PRODUKTNAME STEHT IN DER HAUPTFARBE — AUCH UNGEWÄHLT. Timms Einwand war „bei den Abschluss angeboten die Schrift so grau", und der Name ist die Schrift, die er dabei liest. Er hing an `.knopf.leise`, und die setzt `--sekundaer` (= `--text-leise`): Beim Öffnen der Maske ist nichts gewählt, also standen ALLE Angebotsnamen genau in dem Grau, das er beanstandet hat. Die Regel trägt `.knopf` mit, damit sie dieselbe Spezifität hat wie `.knopf.leise` und als spätere Zeile gewinnt. */ .knopf.produktwahl { color: var(--text-stark); } /* HOVER MUSS MAN SEHEN. `.knopf.leise:hover` legt `--flaeche-leise` unter den Knopf — genau die Farbe, die die Produktkarte seit dem Feinschliff selbst trägt. Am Schreibtisch war das Überfahren einer Variante damit unsichtbar. Auf der Karte ist die Kartenfläche der Gegensatz. */ @media (hover: hover) and (pointer: fine) { .produktkarte .knopf.leise:not(:disabled):hover { background: var(--flaeche-karte); } } /* DIE GEWÄHLTE VARIANTE IST UNÜBERSEHBAR: Rahmen in der Aktionsfarbe UND ein Haken vor dem Namen. Zwei Merkmale, weil eines allein zu wenig ist — der Rahmen fällt bei hellem Licht auf dem Handy weg, der Haken ist auch dann noch da (und für eine Vorlesehilfe steht ohnehin `aria-pressed`). */ .produktwahl[aria-pressed="true"] { border-color: var(--aktion-flaeche); box-shadow: inset 0 0 0 1px var(--aktion-flaeche); color: var(--text-stark); background: var(--flaeche-karte); font-weight: var(--stark); } .produktwahl[aria-pressed="true"] > span::before { content: "✓ "; font-weight: var(--sehr-stark); } /* Preis und Laufzeit: die Angabe, wegen der jemand hersieht. Hauptfarbe, Grundgröße, kein Grau. */ .produktzeile__preis { font-size: var(--gr-basis); color: var(--text-stark); line-height: var(--zeile); margin: var(--a-2) 0 var(--a-3); } /* Der Zeilenbetrag — LAUT ERST, WENN DIE VARIANTE GEWÄHLT IST. Der Befund: Er stand für JEDE Variante in der lautesten Stufe, und bei Anzahl 1 (dem Regelfall) stand damit dieselbe Zahl zweimal untereinander — oben der Preis, darunter derselbe Betrag, größer und fetter. Beim Aufklappen einer Familie schrien drei ungewählte Beträge lauter als die Summe. Das arbeitet gegen „übersichtlicher". Ungewählt ist er deshalb eine ruhige Nebenangabe; gewählt bekommt er die laute Stufe. Der Nachbarschafts-Wähler geht, weil Knopf und Betrag in derselben Zeile Geschwister sind. Tabellenziffern in beiden Stufen, damit die Beträge untereinander stehen. */ .produktzeile__betrag { font-size: var(--gr-basis); font-weight: 500; color: var(--text-mittel); font-variant-numeric: tabular-nums; margin: var(--a-2) 0 0; } .produktwahl[aria-pressed="true"] ~ .produktzeile__betrag { font-size: var(--gr-l); font-weight: var(--sehr-stark); color: var(--text-stark); } /* Die Summe der Abschluss-Maske als eine breite, hervorgehobene Zeile statt als eine Kachel unter mehreren: Sie ist die Zahl, die bestätigt wird. */ .summe-zeile { grid-template-columns: minmax(0, 1fr); } .summe-zeile .zahl { background: var(--meldung-erfolg-flaeche); border-color: transparent; padding: var(--a-4) var(--a-3); } .summe-zeile .zahl b { color: var(--meldung-erfolg-schrift); } .summe-zeile .zahl span { color: var(--meldung-erfolg-schrift); opacity: .85; } /* Der Stepper neben dem Zahlenfeld: zwei schmale Knöpfe links und rechts, das Feld dazwischen. Das Feld BLEIBT sichtbar — zwölf Monate Laufzeit wären sonst elf Tipps. Die Trefferfläche ist `--griff-mittel` (48 px) und damit über den 44 px, die der Feinschliff verlangt; sie steht hier ausdrücklich als Mindestmaß, damit ein späterer schmalerer Wert an dieser Zeile auffällt. */ .stepper { display: flex; align-items: stretch; gap: var(--a-2); } .stepper .eingabe { flex: 1 1 auto; text-align: center; font-size: var(--gr-l); font-weight: var(--stark); } .stepper .knopf { width: var(--griff-mittel); flex: 0 0 var(--griff-mittel); min-width: 44px; min-height: 44px; align-items: center; text-align: center; margin-bottom: 0; padding: 0; font-size: var(--gr-xl); } /* PUNKT 4 — der Deckel über „Abgesagt und verschoben". Er steht mittig unter der Arbeitsliste und sieht aus wie ein Abschnitt, nicht wie eine Aktion. */ #closer-abgesagt-auf { margin-bottom: var(--a-3); } /* Ein Feld mit Beschriftung (§2.6) — Termin-Vorschlag, Datum, Notiz. */ .feld { margin-bottom: var(--a-3); } .feld label { display: block; font-size: var(--gr-s); font-weight: var(--stark); color: var(--text-mittel); margin-bottom: var(--a-1); } .feld .eingabe { margin-bottom: 0; } /* UX-5: Zwei Zeilen unter einem Feld. `.hilfe` ist eine leise Erläuterung (das Beispiel, der Ländercode), `.fehler` die Beanstandung in Meldungsrot. Beide sitzen UNTER der Eingabe, deshalb ein kleiner Abstand nach oben; die Eingabe darüber verliert ihren eigenen unteren Rand. */ .feld:has(.hilfe) .eingabe, .feld:has(.fehler) .eingabe { margin-bottom: var(--a-1); } .feld .hilfe { font-size: var(--gr-s); color: var(--text-mittel); line-height: var(--zeile); margin: 0; } .feld .fehler { font-size: var(--gr-s); color: var(--meldung-fehler-schrift); line-height: var(--zeile); margin: 0; } /* UX-5: Kompakte Beschriftung in einer Tabellenzelle — ein `) — der gesperrte Knopf (#whatsapp-aus, ein