/* ========================================================================== KOPIE AUS DEM COCKPIT — nicht hier ändern. Herkunft: mareSpa-Cockpit/static/tokens.css, Stand Cockpit-Commit a60860c (letzte Änderung dieser Datei dort: 4981653, 11.09.2026). Kopiert am 12.10.2026 für die Team-Seite (Aufgabe 154). Die Team-Seite importiert nichts aus dem Cockpit (Bauplan B.2), deshalb liegt hier eine Kopie. Ändert sich die Datei im Cockpit, wird sie hier neu kopiert und dieser Kopf nachgezogen — tests/test_tokens.py prüft, dass der Inhalt unter dem Kopf bytegleich zur Cockpit-Fassung bleibt, solange das Cockpit danebenliegt. ========================================================================== */ /* ========================================================================== mareSpa Cockpit — TOKENS Hier stehen die WERTE. In style.css steht, wo sie hingehören. Die Trennung ist kein Selbstzweck: nur so lässt sich prüfen, ob im Code noch px-Werte an der Skala vorbei stehen — grep -oE "[0-9]+(\.[0-9]+)?px" static/style.css | sort -u | wc -l → < 15 Ein Zähler, der die Definitionen mitzählt, misst nichts. Alle Kontrastwerte in den Kommentaren sind mit design/kontrast.py nachgerechnet, nicht geschätzt. Wer eine Farbe ändert, lässt das Skript laufen — sonst entsteht wieder ein Kommentar, der 4,6:1 behauptet, wo 4,26:1 gemessen werden. ========================================================================== */ :root{ /* ── 1.1 MARKE ─────────────────────────────────────────────────────────── Marine ist am 14.08.2026 auf den CI-Wert gezogen worden. Vorher standen hier #123a52 / #0d2c3f — ein zweites Markenblau, das es neben dem der Corporate Identity (#102536 / #091B2A) nicht geben darf. Die Kontraste steigen dadurch, es geht nichts verloren. Kupfer hat DREI Rollen und sie sind nicht austauschbar: --copper NUR Fläche: Balken, Marker, aktiver Navigationsstrich. Niemals Text darauf, niemals Text darin. --copper-d Knopfgrund und Fokusring. Cremefarbener Text darauf = 4,83:1. --copper-t Kupfer als TEXT oder Link auf --fl = 5,89:1. Wer diese drei vertauscht, erzeugt genau den Fehler, der hier behoben wurde: --fl auf --copper sind nur 3,66:1, und das war der Primärknopf der ganzen Oberfläche. ZWEI ROLLENNAMEN FÜR DIE SCHRIFT AUF EINER GEFÜLLTEN FLÄCHE, neu am 10.09.2026. Im Hellen tragen beide denselben Wert wie --fl, und genau deshalb hat bisher niemand gemerkt, dass --fl hier ZWEI Rollen hat: die hellste Fläche UND „Creme als Schrift auf Farbe". Im Dunkeln laufen sie auseinander — die Flächen werden dunkel, die gefüllten Farbflächen werden hell und brauchen dunkle Schrift. Ohne die zwei Namen ist die dunkle Fassung nicht einschaltbar. --auf-marine Schrift auf --marine und --marine-d. Bleibt hell. --auf-farbe Schrift auf einer gefüllten FARBfläche: Knopf, Geldfluss-Segment, Dateityp-Kachel, Zahlbadge, Stempel. Kippt im Dunkeln auf einen dunklen Ton. Die Regel ist maßgeblich, nicht die Liste: wo --fl als SCHRIFT auf einer gefüllten Fläche steht, gehört einer dieser beiden Namen hin. */ --marine: #102536; --marine-d: #091B2A; /* tiefere Ebene: Herkunftszeile im Hero */ --nav-ruhe: #b9cfdd; /* Navigationstext auf Marine, 9,73:1 */ --nav-leise: #8fb0c2; /* inaktiv, 6,83:1 — nicht heller machen */ --auf-marine: #FDFCF9; /* Schrift auf Marine, 14,02:1 */ --copper: #b4763b; --copper-d: #9c6330; --copper-t: #8a5729; --copper-fl: #f7efe4; /* Kupferfläche für Hinweiskästen */ --auf-farbe: #FDFCF9; /* Schrift auf gefüllter Farbfläche, 4,83:1 auf --copper-d */ /* ── 1.2 ABSTAND ───────────────────────────────────────────────────────── Basis 8, Halbschritt 4. NICHTS außerhalb dieser Liste. Bänder: klein 0–8 Icon↔Text, Zellenpolster, Feldinneres, Badges mittel 12–24 Knopfpolster, Abstand innerhalb einer Gruppe groß 32–64 Seitenbereiche, Kopfzeile↔Inhalt Zwei Regeln, die im Code eingehalten werden müssen: Außenpolster ≥ größter Innenabstand. Abstand zwischen Gruppen ≥ 2 × Abstand innerhalb einer Gruppe. Sind beide gleich, sieht man nicht mehr, was zusammengehört. */ --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px; /* ── 1.3 GRAULEITER ────────────────────────────────────────────────────── DREI Stufen, mehr nicht. Kühl getönt Richtung Marine, kein neutrales Grau, kein reines Schwarz. Kontrast auf --fl: ink 17,21 text 9,99 muted 5,37 Auch auf der dunkelsten Fläche (--fl-5) bleiben alle drei über 4,5:1: ink 14,69 text 8,53 muted 4,59 4,59 ist der knappste Wert der ganzen Datei. Wer --fl-5 auch nur eine Spur dunkler macht, reißt ihn — dann muss --muted mit nachdunkeln. --muted ist die hellste erlaubte Textfarbe. HELLER WIRD NICHTS. Es gab hier eine vierte Stufe --leise (#7b8891, 3,64:1). Sie ist ersatzlos entfallen. Grund: sie war nur für Text ab 24 px zulässig, und dafür gibt es im Cockpit keinen Fall — die einzige große Zahl ist die Leitzahl, und die trägt eine Aussage, wird also nicht abgeschwächt. Ein Token ohne Verwendung ist eine Falle: der Nächste greift es, um schnell etwas zurückzunehmen, und landet unter 4,5:1. Wer künftig „etwas leiser" braucht, nimmt --muted und macht es kleiner, nicht heller. */ --ink: #0e1a22; --text: #33434c; --muted: #5c6b74; /* ── 1.4 FLÄCHEN UND LINIEN ────────────────────────────────────────────── Fünf Flächenstufen statt drei. Das ist die Gegenleistung dafür, dass Schatten fast überall verboten sind: ohne Schatten muss die Tiefe aus Flächen und Linien kommen, und mit drei Stufen geht das nicht. Auf ALLEN fünf Flächen bleiben ink/text/muted über 4,5:1. KEIN REINWEISS (14.08.2026). Die CI verbietet #FFFFFF ausdrücklich: „Creme statt Weiß, Tiefseeblau statt Schwarz." --fl ist deshalb #FDFCF9. Die ganze Leiter ist mitgezogen, nicht nur die oberste Stufe — eine cremefarbene Karte auf kühlgrauem Grund sieht nicht nach Marke aus, sondern nach halb erledigtem Umbau. Die alten Stufen waren kühl getönt (B > G > R); die neuen sind exakt dieselbe Leiter, an der Grauachse gespiegelt (R > G > B) und um 3 Einheiten nachgedunkelt. Das Nachdunkeln ist Rechnung, kein Gefühl: Weiß hatte Luminanz 1,000, Creme nur 0,973 — ohne Ausgleich wäre der Sprung Karte→Seitengrund von 1,049 auf 1,018 geschrumpft und die Karten hätten sich vom Grund nicht mehr abgesetzt. Jetzt: 1,046 · 1,047 · 1,058 · 1,020 — dieselbe Tiefe wie vorher. Die Zustandsflächen (--rot-fl usw.) bleiben, wie sie sind: sie sind von ihrer eigenen Farbe getönt, nicht vom Grund, und alle über 6:1. */ --fl: #FDFCF9; /* Karten, Detailbereich — Creme, kein Reinweiß */ --fl-2: #F8F7F5; /* Seitenhintergrund */ --fl-3: #F4F2EE; /* Listenspalte, Tabellenkopf */ --fl-4: #EFECE6; /* Hover, ausgewählte Zeile */ --fl-5: #EDEAE3; /* gedrückt, tiefste Stufe */ /* Linien ebenfalls warm. Eine blaugraue Haarlinie auf cremefarbenem Grund ist der sichtbarste Rest eines halben Umbaus — Linien liegen überall. */ --linie-w: #F5F2EE; /* sehr leise Trennung */ --linie: #E7E3DD; /* Standardtrennlinie */ --linie-s: #D2CCC3; /* betonte Kante — dekorativ, keine 3:1-Pflicht */ --linie-x: #0e1a22; /* Bilanz-Abschlussstrich */ /* Rahmen von Bedienelementen (Feld, Knopf, Segmentwahl, Klapp-Knopf). WCAG 1.4.11 verlangt 3:1 gegen JEDE angrenzende Fläche, nicht nur gegen die hellste. Die Vorgabe #88959f hielt das nur auf --fl (3,07) und fiel auf --fl-5 auf 2,59 — und Felder stehen auch auf grauen Flächen. #877E72 hält 3,32 auf der dunkelsten Fläche und ist damit sogar besser als das kühle #78858f davor (3,15 auf der neuen Leiter). Der Ton ist die warme Spiegelung, um 8 Einheiten nachgedunkelt — die Spiegelung allein hätte nur 3,02 gehalten, also fast nichts. NICHT heller machen. */ --feldrand: #877E72; /* ── 1.4b GELDFLUSS ────────────────────────────────────────────────────── Die Herleitung „jede Zeile teilt die Zeile darüber" braucht unterscheidbare Segmente. Sechs Töne mit heller Schrift gehen NICHT: bei 4,5:1 Untergrenze und 1,35 Abstand je Stufe reicht es für vier bis fünf (15,28 / 1,35³ = 6,21, / 1,35⁴ = 4,60 — die fünfte liegt auf der Kante). Deshalb nach ROLLE statt nach Kategorie — das ist ohnehin die Konzeptregel: weiter was in die nächste Zeile übergeht ab der große Abgang dieser Zeile ab2 der zweite Abgang plus/minus das Ergebnis ab und ab2 liegen auf der Blau/Orange-Achse. Ihr Luminanzverhältnis ist nur 1,02 — das ist Absicht: bei Rot-Grün-Schwäche ist Blau/Orange die einzige Achse, die trägt. Zusätzlich steht die Beschriftung IM Segment, Farbe ist also nie der einzige Träger. --fl als Text auf allen fünf: 15,28 · 5,75 · 5,89 · 6,62 · 6,46. */ --fluss-weiter: #102536; --fluss-ab: #2f6a8c; --fluss-ab2: #8a5729; --fluss-plus: #1f6748; --fluss-minus: #a83232; /* ── 1.4d DATEITYP-KACHELN ─────────────────────────────────────────────── In der Ablage trägt jede Datei eine kleine Kachel mit ihrer Endung in --fl. Klein und fett heißt: 4,5:1 sind Pflicht. Der Entwurf benutzt #b4763b für PDF (3,66:1) und #8a9aa3 für den Rest (2,83:1) — beide fallen durch. Ersetzt durch Töne, die es halten; dieselbe Familie, nur dunkler. --fl darauf: 5,89 · 5,75 · 15,28 · 6,62 · 6,10. */ /* MARKENFARBEN DER DATEITYPEN — bewusst AUSSERHALB der CI (22.08.2026). Diese vier Toene gehoeren nicht zu mareSpa, sondern zu Microsoft und Adobe. Sie stehen hier, weil die Ablage die Dateien so zeigen soll, wie man sie aus dem Explorer kennt: gruen ist Excel, blau ist Word, rot ist PDF. Das ist eine bewusste Entscheidung des Betriebs, ausdruecklich getroffen am 22.08.2026, nachdem der markenfreie Weg (eigene Zeichnungen in Cockpit-Farben) gebaut und wieder verworfen wurde. WAS MAN DAZU WISSEN MUSS: Produktlogos und -farben sind eingetragene Marken; die Richtlinien der Hersteller untersagen ihre Verwendung in fremder Software. Das Cockpit ist ein internes Werkzeug hinter einer Anmeldung — praktisch sieht es niemand von aussen. Sollte das Cockpit je oeffentlich werden oder an Dritte gehen, gehoeren diese vier Toene und die zugehoerigen Zeichen (typ-excel, typ-word, typ-ppt, typ-acrobat in _bausteine.html) VORHER wieder ersetzt. NICHT als CI-Farben verwenden. Sie gelten ausschliesslich fuer die Dateikacheln der Ablage und fuer nichts sonst. Adobe-Rot ist #FA0F00; hier steht ein dunklerer Ton, weil Creme darauf nur 3,99:1 ergibt und damit durch die Kontrastpruefung faellt. --fl auf allen vieren: 5,68 · 6,98 · 5,05 · 5,32 (nachgerechnet 22.08.2026). */ --typ-excel: #217346; --typ-word: #2B579A; --typ-ppt: #C43E1C; --typ-acrobat: #D1180B; --typ-pdf: #8a5729; --typ-tab: #2f6a8c; /* CSV, XLSX — alles Tabellarische */ --typ-daten: #102536; /* JSON, XML, CAMT */ --typ-bild: #1f6748; --typ-rest: #4a6472; /* ── 1.4c TEXT AUF MARINE ──────────────────────────────────────────────── Der Hero ist eine marineblaue Fläche mit hellem Text. Der Entwurf benutzt dort #7ba0b6 — das sind 5,63:1 und reicht knapp, taugt aber nicht als vierte Stufe. Es gibt genau zwei erlaubte, beide schon oben definiert: --nav-ruhe #b9cfdd 9,73:1 auf --marine · 10,84:1 auf --marine-d --nav-leise #8fb0c2 6,83:1 auf --marine · 7,62:1 auf --marine-d --fl auf Marine sind 15,28:1 und trägt die Leitzahl. */ /* ── 1.5 ZUSTANDSFARBEN ────────────────────────────────────────────────── Für ZUSTÄNDE, nicht für Kategorien. Rot heißt Verlust oder Fehler, nie „Ausgabe" — Ausgaben sind normal. Jeder Ton auf seiner eigenen Fläche über 6:1. */ --rot: #a83232; --rot-fl: #fdf2f2; --gruen: #1f6748; --gruen-fl: #eff6f2; --gelb: #7a4f19; --gelb-fl: #fdf7ec; --blau: #1c4c68; --blau-fl: #eef4f7; /* ── 1.5b ZUSTÄNDE AUF DUNKLER FLÄCHE ──────────────────────────────────── Der Hero, die aktive Monatskachel und die Regelkarte sind DUNKLE Flächen in einer hellen Oberfläche. Die Zustandsfarben aus 1.5 taugen dort nicht: --gruen auf --marine sind 1,48:1. Es braucht denselben Zustand in einem hellen Ton — das ist keine zweite Bedeutung, sondern dieselbe auf anderem Grund. Das Suffix -dkl heißt deshalb „gilt AUF dunkler Fläche"; der Ton SELBST ist hell. Nicht mit --copper-d zu verwechseln, wo -d „dunkler Ton" heißt. Diese neun Werte standen bis zum 09.09.2026 als rohe Hex- und rgba-Werte in style.css und waren damit für design/kontrast.py unsichtbar. Jetzt gemessen, auf --marine: gruen-dkl 10,35 gelb-dkl 8,96 rot-dkl 9,21 und der Text auf seiner eigenen Chipfläche: 6,57 (reife) · 6,96 (vergleich) · 5,95 (gelb) · 6,69 (rot). DIE CHIPFLÄCHEN SIND DESHALB EINZELN AUFGEFÜHRT, weil Reifegrad und Vergleich sich um zwei Prozentpunkte Deckkraft unterscheiden (.18 gegen .16) — ohne erkennbaren Grund, vermutlich eine Ungenauigkeit des Entwurfs. Zusammengelegt würde der Pixelvergleich anschlagen, deshalb bleiben sie getrennt. Wer den Entwurf das nächste Mal anfasst, klärt, ob es eine oder zwei Rollen sind. Die Flächen tragen die Farbe des Zustands, aber NICHT immer denselben Ton wie ihr Text: der gelbe Chip liegt auf #e2b278 und trägt #e6bd88, der rote auf #f0a9a9 und trägt #f0b9b9. Das ist so aus dem Entwurf übernommen. */ --gruen-dkl: #9fe0bd; --gelb-dkl: #e6bd88; --rot-dkl: #f0b9b9; --reife-gruen-dkl: rgba(159,224,189,.18); --reife-gelb-dkl: rgba(226,178,120,.2); --reife-neutral-dkl: rgba(253,252,249,.14); --vergleich-fl-dkl: rgba(253,252,249,.12); --vergleich-gruen-dkl: rgba(159,224,189,.16); --vergleich-rot-dkl: rgba(240,169,169,.16); /* ── 1.5c DECKSCHICHTEN ────────────────────────────────────────────────── Halbdurchsichtige Lagen. Sie sind KEINE Farben, sondern Rollen: ein Schleier lässt den Grund durchscheinen, und welcher Grund das ist, entscheidet die Stelle. Deshalb steht hier die Rolle im Namen und nicht der Ton — ein „dunkler Schleier auf hellem Grund" hat im Dunkeln keine Entsprechung und muss dort neu gedacht, nicht umgerechnet werden. Die ersten fünf sind DUNKEL auf HELL, die letzten beiden HELL auf DUNKEL. Genau an dieser Grenze wird eine dunkle Fassung entschieden, nicht gerechnet. */ --schleier-hover: rgba(14,26,34,.05); /* --ink, Navigationspunkt beim Überfahren */ --schleier-modal: rgba(14,26,34,.36); /* --ink, Grund hinter Palette und Dialog */ --ring-fokus: rgba(156,99,48,.24); /* --copper-d, Fokusring am Feld */ --ring-fehler: rgba(168,50,50,.2); /* --rot, Ring am ungültigen Feld */ --ring-dringend: rgba(180,118,59,.16); /* --copper, Hof um den dringenden Punkt */ --hover-dkl: rgba(253,252,249,.12);/* Creme, Überfahren auf dunkler Fläche */ --spur-dkl: rgba(253,252,249,.2); /* Creme, Balkenrinne auf dunkler Fläche */ /* ── 1.5d CREME AUF KUPFERFLÄCHE ───────────────────────────────────────── Die Regelkarte der Sachkosten ist eine kupferne Fläche (--copper-d) mit cremefarbenem Text und einem Eingabefeld darin. Sechs Deckkraftstufen, alle vorher roh in style.css. VIER DIESER SECHS HABEN IHRE SCHWELLE NICHT GEHALTEN — Befund vom 09.09.2026, effektiver Ton über --copper-d: Etikett .88 → #f1eae1 4,15:1 (Schwelle 4,5, Text mit 13 px) Wirktext .92 → #f5f0e9 4,37:1 (Schwelle 4,5, Text mit 13 px) Platzhalter .6 → #d6bfa9 2,80:1 (Schwelle 4,5) Feldtext --fl auf Feldfläche .16 3,59:1 (Schwelle 4,5) Der Rand des Feldes hielt gegen die Feldfläche nur 1,38:1 (Schwelle 3,0 nach WCAG 1.4.11). REPARIERT AM 10.09.2026 (Aufgabe 104, Etappe 3a), nach dem Entwurf aus Claude Design. DAS BEWEGT ABZÜGE — die Regelkarte auf /sachkosten sieht anders aus als vorher, und das ist die EINE Stelle, an der sich in dieser Etappe absichtlich helle Pixel bewegen. Zwei Entscheidungen tragen es: 1. ETIKETT UND WIRKTEXT WERDEN OPAK. Über --copper-d sind opake Creme 4,83:1, und mehr ist auf dieser Fläche nicht zu holen: jede Deckkraft unter 1 fällt unter 4,5. Die beiden unterscheiden sich damit nicht mehr in der Farbe. Ihre Rangfolge trägt jetzt Größe und Gewicht — dieselbe Regel wie bei --muted in 1.3: leiser heißt kleiner, nicht heller. 2. DAS FELD WIRD EINE MULDE STATT EINER AUFHELLUNG. Vorher hellte es das Kupfer um 16 % Creme auf und lag damit zu nah an ihm; jetzt dunkelt es um 30 % Tinte ab. Erst dadurch entsteht Platz für einen Platzhalter, der seine Schwelle hält, und für einen Rand, der gegen BEIDE Nachbarn zählt. Ein helles Feld auf heller Fläche konnte das nie. Jetzt, effektiver Ton über --copper-d beziehungsweise über der Mulde: Etikett 4,83:1 Wirktext 4,83:1 Feldtext 7,29:1 Feld im Fokus 8,64:1 Platzhalter 4,85:1 Rand 5,01 gegen die Mulde / 3,32 gegen Kupfer ZWEI STUFEN SIND DAMIT WERTGLEICH und bleiben trotzdem zwei Namen: Etikett und Wirktext haben verschiedene ROLLEN, und im Dunkeln laufen sie wieder auseinander (.88 gegen .92). Zusammenlegen hieße, die Unterscheidung dort mit zu verlieren. */ --auf-kupfer-etikett: #FDFCF9; --auf-kupfer-text: #FDFCF9; --auf-kupfer-schwach: rgba(253,252,249,.74); --auf-kupfer-feld: rgba(14,26,34,.3); --auf-kupfer-feld-an: rgba(14,26,34,.42); --auf-kupfer-rand: rgba(253,252,249,.76); /* ── 1.6 SCHRIFT ───────────────────────────────────────────────────────── SECHS Größen. Nicht sieben, nicht elf. Jede Stufe mindestens 2 px von der nächsten entfernt — eine Größenstufe, die man nicht sieht, ist keine. Keine Halb-Pixel-Werte. Ganze Leiter am 12.08.2026 um eine Stufe angehoben: 12 px trugen die Spaltenköpfe, Feldbeschriftungen und jede Fußnote — also den halben Bildschirm — und waren dafür zu klein. Grundgröße jetzt 15 px. SCHRIFTEN DER MARKE (14.08.2026). Vorher lief das Cockpit auf System-Sans und Georgia — beides gehört nicht zur Marke. Jetzt Mulish für alles Sichtbare, Cormorant Garamond ausschließlich für den Seitentitel. Selbst gehostet, siehe static/fonts.css. --serif trägt jetzt den SEITENTITEL (28 px), nicht mehr die Leitzahl. Das ist eine Verschiebung mit Grund: die Leitzahl ist eine ZAHL, und diese Datei verlangt an jeder anderen Stelle Mulish mit tabellarischen Ziffern. Eine Serifenzahl neben Sans-Labels in einer dichten Datenmaske ist ein Fremdkörper — das stand hier schon als Regel, während Georgia genau dagegen verstieß. Die Leitzahl läuft deshalb in Mulish 600, und Cormorant bekommt die Stelle, für die sie gemacht ist: eine Überschrift. Cormorant NUR bei --t-seite. Nicht bei --t-titel (20 px), nicht bei --t-stark (17 px): unter etwa 24 px laufen die Serifen zu, und ein Verwaltungswerkzeug ist kein Prospekt. Alles darunter Mulish 600. */ --schrift: Mulish,"Segoe UI",system-ui,Helvetica,Arial,sans-serif; --serif: "Cormorant Garamond",Georgia,"Times New Roman",serif; --mono: ui-monospace,Consolas,"Courier New",monospace; --t-mini: 10px; /* NUR die Endung auf der Dateityp-Kachel */ --t-label: 13px; --lh-label: 18px; /* Spaltenkopf, Etikett, Fußnote */ --t-body: 15px; --lh-body: 22px; /* Grundgröße — alles Normale */ --t-stark: 17px; --lh-stark: 24px; /* hervorgehobener Wert, Feldtext */ --t-titel: 20px; --lh-titel: 26px; /* Abschnittstitel, Mulish 600 */ --t-seite: 28px; --lh-seite: 34px; /* Seitentitel — die EINE Stelle mit Cormorant Garamond 600 */ --t-leit: 44px; --lh-leit: 48px; /* die EINE Leitzahl, Mulish 600 */ /* DREI Gewichte, und es sind genau die drei der Marke: 400/500/600. Vorher standen hier 400/600/700. Die 700 gibt es in der Marke nicht — sie war eine Erfindung der Systemschrift. Wäre sie stehen geblieben, hätte der Browser sie aus der 600 künstlich fett gerechnet: verschmierte Kanten an genau den kleinen Versalien, die am meisten davon abhängen. Mulish 600 heißt SemiBold und ist kräftig. Die 13-px-Versalien der Spaltenköpfe tragen darauf ohne Weiteres — sie stehen ohnehin gesperrt und in Großbuchstaben, zwei Auszeichnungen, die schon vor dem Gewicht wirken. --fw-halb rutscht von 600 auf 500; der Abstand zwischen den drei Stufen bleibt damit gleich groß, die ganze Leiter nur eine Stufe leichter. */ --fw-normal: 400; --fw-halb: 500; --fw-fett: 600; --ls-label: .3px; /* kleine Versalien sperren */ --ls-leit: -.02em; /* große Zahl leicht enger */ /* ── 1.7 MASSE ─────────────────────────────────────────────────────────── Zeilenhöhe 36 px = dicht genug für rund 22 sichtbare Zeilen auf 1080p, locker genug, dass Klickziele von 32 px hineinpassen. */ --oben: 48px; /* klebende Kopfzeile je Seite */ --unter: 240px; /* die eine Navigationsspalte */ --spalte: 344px; /* Listenspalte Arbeitsseiten */ --aufgabe: 880px; /* Inhaltsbreite Aufgabenseite */ --tor: 424px; /* Anmeldeseite */ /* Der Beleg neben dem Formular (style.css 6.5d). Die Bahn klebt und hat ihren eigenen Lauf; die Hoehe haengt am Fenster, nicht am Inhalt - ein Beleg ist so lang, wie er ist. ERSTE FASSUNG WAR ZU KLEIN (01.09.2026, beim ersten echten Benutzen): 520 px Blattbreite und 78vh Hoehe zwangen zum Zoomen, und ein Beleg, in den man hineinzoomen muss, ist derselbe Medienbruch wie der Link vorher. 720 px sind knapp A4 bei 96 dpi auf 70 % - die Schrift einer Rechnung bleibt damit ohne Zoom lesbar. */ --blatt: 720px; /* Breite eines Belegblatts */ --belegbahn-h: min(88vh, 1180px); /* Hoehe der klebenden Belegbahn */ /* 1,25 und nicht mehr: gemessen am 01.09.2026 ist das der groesste Anteil, bei dem die Kaestchenzeile des Formulars noch einlaeufig bleibt. Bei 1,35 bricht „Im Beleg nachgesehen, Wert stimmt“ in zwei Zeilen. */ --belegbahn-w: 1.25fr; /* Anteil der Belegbahn am Raster */ --schub-h: 78%; /* offene Belegschublade am Handy */ --griff: 48px; /* stehenbleibender Griff */ --ablege-min:320px; /* Umbruchbreite Ablegen-Karte */ --kachel-b: 40px; /* Dateityp-Kachel Breite */ --kachel-h: 32px; /* Dateityp-Kachel Höhe */ --detail: 1120px; /* Textbreite im Detailbereich */ --zeile: 36px; /* Tabellenzeile */ --ziel: 32px; /* Mindestgröße Klickziel */ /* Mindestgröße fürs FINGERZIEL. 32 px reichen für die Maus, am Tablet nicht: dort ist die Kuppe rund 9 mm breit, und die Ablage wird am Tablet bedient. 44 px ist der Wert, auf den sich Apple (44 pt) und die WCAG (2.5.5, 44 CSS-Pixel) einigen — kein Vielfaches von 8, aber ein Maß aus der Hand und nicht aus dem Raster. Gilt für die neuen Bedienelemente der Ablage: Drei-Punkte-Knopf, Menüeinträge, Zielchips im Dialog. */ --ziel-gross:44px; /* Mindestgröße Fingerziel */ --ikon: 16px; /* Icon im Fließtext */ --punkt: 8px; /* Statuspunkt, Kästchen */ /* Bauteilbreiten. Alle Vielfache von 8 — auch hier gilt die Skala, sonst entsteht der Wildwuchs an anderer Stelle wieder. */ --leit-neb: 288px; /* zweite Spalte der Leitzahl */ --bal: 112px; /* Größenbalken in Aufstellungen */ --suchfeld: 192px; /* globale Suche in Ebene 1 */ --schweber: 448px; /* Toast, Palette */ --wertsp: 160px; /* Mindestbreite Wertekachel */ --wertsp-weit:240px;/* dieselbe Kachel ab 1600 px */ /* Die gelesenen Zeilen laufen in einer eigenen Flaeche, damit die drei Pruefzahlen und der Knopf im Bild bleiben: bei 40 Zeilen waere sonst der halbe Vorgang weggescrollt. Die Mindestbreite haelt die fuenf Spalten lesbar - darunter scrollt die Flaeche quer, statt die Zahlenfelder auf zwei Zeichen zu druecken. */ --zeilenblock:520px;/* Hoehe der gelesenen Zeilenliste */ --poslist-min:512px;/* Mindestbreite derselben Liste */ /* Ein Betragsfeld der Zeilenliste. GEMESSEN, nicht geschaetzt: „1.500,00" braucht dort 71 px, „11.333,00" 80 px - jeweils mit Polster und Rahmen, in Mulish mit Tabellenziffern. 80 ist der Wert, bei dem auch ein fuenfstelliger Betrag noch ganz dasteht. Wer ihn senkt, schneidet Tausender ab, und zwar vorne: die Felder sind rechtsbuendig. */ --betragsfeld:80px; /* Mindestbreite eines Betragsfeldes */ /* Am Handy setzt das Haus Felder auf 17 px, sonst zoomt Safari beim Antippen. Derselbe Betrag braucht damit mehr Platz - gemessen: 88 px. */ --betragsfeld-gross:88px;/* dasselbe Feld bei 17 px Schrift */ --rohblock: 416px; /* Hoehe aufklappbarer Rohdaten */ /* Auf 1920 blieben rechts 304 px leer, weil die Deckelung bei 1344 lag. 1600 füllt die Breite bis auf den Rand aus. Die Lesbarkeit haengt nicht an dieser Deckelung, sondern an max-inline-size:65ch am Fliesstext. */ --seite-max:1600px; /* Inhaltsbreite Karten-Seite */ --bahn-eng: 1184px; /* Textseiten (System). Der Entwurf nennt 1180; 1184 ist das nächste Vielfache von 8. NICHT für Listen mit Spalten — dort bleibt auf breiten Schirmen ein leerer Streifen, ohne dass etwas lesbarer würde. */ --karte-min: 336px; /* Umbruchbreite Kartenraster */ --kartenrand: var(--sp-6); /* Der SEITLICHE Innenabstand der Karte. Er steht als eigener Wert da, weil sich etwas daran ausrichten muss, das AUSSERHALB der Karte liegt: die Kupferkante unvollstaendiger Zeilen sitzt an der Kartenkante und zieht sich dafuer um genau diesen Betrag nach links. Ein fester Wert an jener Stelle waere am Handy falsch - dort ist der Rand schmaler (Abschnitt 7 setzt das Token um). */ --kennz-min: 240px; /* Umbruchbreite Kennzahlkarte */ --kannsp: 288px; /* Umbruchbreite „Was sie kann": Qualifikationen und Wochenraster nebeneinander. Gemessen am Raster: die sieben Tagesfelder brauchen zusammen so viel, dass zwei Buchstaben je Feld ohne Umbruch stehen. Wird es schmaler, stapeln die beiden Spalten. */ --taste-min: 152px; /* Umbruchbreite Kategorietaste */ --stapel-l: 272px; /* Fortschrittsanzeige im Kopf */ /* Chat-Widget. Der Entwurf nennt 360 x 540 und einen Auslöser von 56 — alle drei sind Vielfache von 8 und bleiben deshalb, wie sie sind. Die Höhe ist zusätzlich auf 78vh gedeckelt, sonst steht das Fenster auf einem Laptop unten über den Rand hinaus. */ --chat-b: 360px; /* Fensterbreite */ --chat-h: 540px; /* Fensterhöhe, max. 78vh */ --chat-kn: 56px; /* Auslöser, rund */ --spalte-s: 56px; /* Datumsspalte in Listen */ /* Masse, die erst der Mobil-Umbau gebraucht hat (26.08.2026). Sie stehen hier und nicht als Zahl im CSS, weil style.css sonst wieder zu wachsen anfaengt — der Zaehler im Kopf dort misst genau das. */ --leiste: 56px; /* Hoehe der unteren Navigationsleiste am Handy. 56 und nicht 44: das TIPPZIEL ist 44, aber darueber steht noch die Beschriftung. Ein Symbol ohne Wort waere Hover-Auskunft, und die gibt es am Handy nicht. */ /* Diese drei sind ABSICHTLICH keine Vielfachen von 8, und das ist der einzige Bruch der Skala in dieser Datei. Sie standen vor dem Mobil-Umbau als nackte Zahlen im CSS; hierher gezogen wurden sie, damit der Zaehler in style.css wieder stimmt - NICHT um sie zu begradigen. 116 auf 112 zu ziehen waere eine Verschiebung am Schreibtisch gewesen, und die Abnahme des Umbaus lautet: dort sieht nichts anders aus als vorher. Wer sie glattziehen will, tut das als eigene Entscheidung und sieht sich das Ergebnis an. */ --frist: 116px; /* Fristspalte der Aufgabenzeile */ --glyph: 14px; /* Statuskreis auf dem Aufgabenknopf */ --segment: 40px; /* Hoehe der Segmentwahl */ --textfeld: 120px; /* Mindesthoehe mehrzeiliger Felder */ --menue: 200px; /* Mindestbreite eines Klappmenues */ --treppe: 560px; /* Deckel der senkrechten Herleitung. Ein Balken ueber die ganze Tabletbreite misst nichts mehr, er dekoriert nur. */ --spalte-eng:296px; /* Listenspalte, wenn es eng wird (Tablet) */ /* Geraeteraender (Notch oben, Home-Balken unten). Sie stehen als Token hier und nicht als env() im CSS, weil env() einen Rueckfallwert braucht ("0px") - und jeder solche Wert wuerde drueben im Zaehler von style.css auftauchen, obwohl er nichts mit der Skala zu tun hat. Was klebt, klebt INNERHALB dieser Raender. */ --rand-oben: env(safe-area-inset-top, 0px); --rand-unten: env(safe-area-inset-bottom, 0px); /* Die Auslastungstabelle (style.css 6.12). Sie ist KEINE Werktabelle, sondern ein Raster - deshalb stehen ihre Spaltenbreiten hier und nicht als nackte Zahl im Stylesheet. GEMESSEN an dem, was darin steht: der laengste Wert einer Stundenspalte ist "302,9 h", der laengste Kopf "Verkaufbar", und "Kalenderauslastung" bricht mit ­ in zwei Zeilen. Wer sie senkt, schneidet Zahlen ab - und zwar vorne, die Spalten sind rechtsbuendig (derselbe Fehler wie am 02.09.2026 am Betragsfeld). Die drei Fassungen (neun Spalten, sieben Spalten, Tageskarten) schaltet ein @container an der Breite der TABELLE, nicht des Fensters. */ --austab-tag: 172px; /* Datum plus Herkunftszeile darunter */ --austab-tag-eng: 128px; /* dasselbe in der Sieben-Spalten-Fassung */ --austab-beh: 104px; /* Behandler plus Vermerk */ --austab-std: 76px; /* eine Stundenspalte */ --austab-std-b: 84px; /* dieselbe mit laengerem Kopf */ --austab-verk: 92px; /* "Verkaufbar" */ --austab-belegt: 80px; /* "Belegt" */ --austab-quote: 100px; /* "Kalenderauslastung" */ --austab-quote-b: 96px; /* dieselbe Spalte, wenn es enger wird */ --austab-monat: 108px; /* "geht nicht ein · nicht erfasst" */ --spalte-m: 96px; /* Wertspalte in Listen */ --spalte-k: 112px; /* Kategoriespalte in Listen */ /* Radius. ZWEI Werte, und die Trennung ist die Aussage (15.08.2026). Vorgeschichte: hier standen erst drei Stufen (20/12/8 px — App-Kachel- Look, den die CI ablehnt), dann am 14.08.2026 genau einer mit 2 px. Beides war zu grob. Die CI sagt nämlich zwei Dinge, und das zweite wurde überlesen: „Ecken-Radius 2 px im Digitalen (wie die Portal- Buttons) … aber kein gleichmäßiger Radius auf allem, das wirkt nach App-Kachel." ALLES auf 2 px ist auch ein gleichmäßiger Radius auf allem. Die Regel meint die HANDLUNGSFLÄCHEN — Knöpfe, Felder, Chips —, nicht die Trägerflächen darunter. Deshalb jetzt: --radius 2px Bedienelemente: Knopf, Feld, Chip, Etikett, Segmentwahl. Unverändert, exakt nach CI. --radius-fl 10px Trägerflächen: Karte, Hero, Chatfenster, Ablegezone, Palette, Toast. Der Unterschied ist damit sichtbar und trägt eine Bedeutung: was scharf ist, kann man anfassen; was weich ist, hält nur etwas. Vorher sah beides gleich aus. 10 px und nicht 16: bei 16 kippt eine 36-px-Zeile optisch zur Pille, und genau das ist der App-Look. 10 ist weich genug, um die Karte vom Grund zu lösen, und flach genug, dass eine Tabelle darin noch nach Tabelle aussieht. Kreisrunde Elemente sind von beidem NICHT gemeint: Statuspunkte, Reifegrad-Glyphen, das Zeichen der Marke und der Auslöser des Assistenten behalten border-radius:50%. Ein Kreis ist eine Form, kein Radius. */ --radius: 2px; --radius-fl: 10px; /* ── 1.8 TIEFE ─────────────────────────────────────────────────────────── GEÄNDERT am 12.08.2026 mit dem v4-Umbau. Vorher galt: Schatten NUR für schwebende Ebenen, sonst Linie oder Flächenabstufung. Der neue Grundriss trägt seinen Inhalt in Karten auf einem getönten Seitengrund. Eine Karte ohne jede Tiefe verschwindet dort — die Trennung müsste dann wieder aus Rahmen kommen, und Rahmen + Karte nebeneinander ist genau das doppelte Mittel, das die Regel verhindern wollte. Deshalb jetzt: --tiefe-1 ist die RUHESTUFE einer Karte (1 px, kaum sichtbar, ersetzt den Rahmen). --tiefe-2 und --tiefe-3 bleiben den wirklich schwebenden Ebenen vorbehalten — Hero, Toast, Palette. Weiterhin gilt: eine Technik pro Element. Eine Karte hat Schatten ODER Rahmen. WEICHER UND MITTIG (15.08.2026). Vorher waren alle drei Stufen nach rechts versetzt (1px/2px/3px/8px Seitenversatz) und eng gestreut. Das ergibt eine harte Kante rechts und unten — die Karte sah aufgeklebt aus statt aufgelegt. Jetzt ohne Seitenversatz und mit weiterem Radius: eine enge Lage für die Kante, eine weite für die Tiefe. Die Deckkraft ist dabei gesunken, nicht gestiegen; der Schatten ist weicher, nicht stärker. */ --tiefe-1: 0 1px 2px rgba(16,37,54,.05), 0 6px 16px rgba(16,37,54,.045); --tiefe-2: 0 1px 2px rgba(16,37,54,.05), 0 4px 10px rgba(16,37,54,.05), 0 12px 28px rgba(16,37,54,.045); --tiefe-3: 0 1px 2px rgba(16,37,54,.05), 0 6px 14px rgba(16,37,54,.05), 0 16px 34px rgba(16,37,54,.05), 0 32px 64px rgba(16,37,54,.04); /* ── 1.9 BEWEGUNG ──────────────────────────────────────────────────────── Kurz halten. Der häufigste Fehler ist zu lang, nicht zu kurz. */ --zeit-schnell: 120ms; /* Hover, Fokus */ --zeit-normal: 180ms; /* Einklappen, Aufdecken */ --zeit-lang: 260ms; /* Overlay, Modal */ --ease-raus: cubic-bezier(.2,.7,.2,1); --ease-rein: cubic-bezier(.4,0,.8,.3); /* ── 1.10 FARBWELT-SCHALTER (seit 11.09.2026, Etappe 3b) ───────────────── Die drei Werte, die sich mit der Farbwelt UMSCHALTEN, obwohl sie keine Farbe sind oder in der hellen Fassung keine brauchen. Sie stehen hier und in tokens-dunkel.css und NICHT als Regel in style.css: nur so hängen sie an GENAU DERSELBEN Bedingung wie die Farben. Eine eigene Regel in style.css bräuchte die Bedingung ein zweites Mal (Attribut ODER Gerät), und dann zeigt der Kupferstrich eines Tages dunkel, wo die Farben hell sind. color-scheme gehört dazu: damit gehen Scrollbalken, Auswahlfelder und Datumswähler des Browsers mit. Ohne das steht in der dunklen Seite ein weißes Auswahlfeld. --nav-an-strich der Kupferstrich links am aktiven Navigationspunkt (style.css 3.2). Hell ist er DURCHSICHTIG, nicht weg: das Element steht in beiden Fassungen gleich, nur die Farbe schaltet. Warum es ihn im Dunkeln braucht, steht in tokens-dunkel.css, Entscheidung 3. --farbwelt-hell Anzeige der Wörter „hell“ und „dunkel“ in der --farbwelt-dunkel Zustandszeile des Umschalters im Zustand „Gerät“ — der Server weiß dort nicht, was das Gerät gerade will, also entscheidet dieselbe Bedingung wie bei den Farben, welches Wort steht. */ color-scheme: light; --nav-an-strich: transparent; --farbwelt-hell: inline; --farbwelt-dunkel: none; } /* Abschnitt 2, die DUNKLE FASSUNG, steht seit dem 11.09.2026 in tokens-dunkel.css. Der Grund steht in templates/_farbwelt.html: die Werte gelten unter zwei Bedingungen, und die Bedingung „Gerät steht auf dunkel“ sitzt am , nicht in einem Selektor. */