/* ============================================================ ERZEUGT AUS gestalt/gestalt.json -- NICHT VON HAND AENDERN. Quelle: gestalt/gestalt.json (sha256 470099fc4fa718c3) Erzeuger: node gestalt/erzeugen.mjs Zwilling: ios/Kontrollpunkt/Gestalt.swift Jede Aenderung hier wird beim naechsten Lauf des Erzeugers ueberschrieben, und web/tests/gestalt.test.mjs meldet sie vorher. ============================================================ */ /* * Palette, hell. Alle Werte mit einem eigenen Skript nach WCAG 2.1 * gerechnet, gegen die Flaeche, auf der der Ton wirklich vorkommt. * * Schrift auf Flaeche 18,47 | Grund 17,05 | Flaeche-2 16,29 | Flaeche-3 14,84 * Schrift-2 auf Flaeche 7,32 | Flaeche-2 6,46 * Schrift-3 auf Flaeche 5,41 | Flaeche-2 4,77 (Eyebrow, Beschriftung) * Grund auf Schrift 17,05 (Tinte-Knopf, Toast, gewaehltes Feld) * Warn-Schrift auf Flaeche-2 5,66 | Auf-Warn auf Warn 4,94 * Bus-Schrift auf Bus 5,98 * Kontur auf Flaeche 4,59 (Tafelkante, siehe Rechnung unten) * Kontur-Feld auf Flaeche 3,02 (Bedienkante im Bogen, Puffers Mass) * Akzent-kontrast auf Flaeche 5,02 (Markenpunkt, sonst nichts) * Ruhig auf Flaeche 4,98 | Warn auf Flaeche 4,94 (Lageflagge, Legende) * Fokus auf Flaeche 5,02 | Grund 4,63 * * Nachgerechnet fuer die Suchzeile in der Kopftafel (neu): * Schrift-2 auf Flaeche-2 6,46 (Aufforderungstext) * Schrift-3 auf Flaeche-2 4,77 (Lupe, grafisches Objekt, Ziel 3) * Kontur-Feld auf Flaeche-2 2,66, auf Flaeche 3,02 * Die Suchzeile ist ein eingelassenes Feld: ihre Fuellung liegt nur 1,13:1 * unter der Tafel, ihre Kante wird also gegen die Tafel gesehen und nicht * gegen die eigene Fuellung. Es gilt dieselbe Max-Regel wie bei der Tafel * ueber der Karte, siehe unten: max(Kante gegen Nachbarn) >= 3:1, hier 3,02. * Im Druckzustand faellt die Kante gegen die eigene Fuellung auf 2,43, gegen * die Tafel bleibt sie bei 3,02. * Grund auf Schrift 17,05 traegt weiterhin den Meldeknopf, jetzt mit Wort. * * DIE RECHNUNG, DIE IM BESTAND FEHLTE: Kontrast einer Tafel ueber * einer Kartenkachel. Alle Puffer-Werte gelten gegen Puffers eigene * ruhige Grundtoene; ueber einer Karte wechselt der Untergrund. * Geprueft gegen die neun Flaechentoene aus js/kartenstil.js und alle * zehn Linienfarben. Gefordert: fuer jeden Untergrund muss * max(Kontur gegen Untergrund, Flaeche gegen Untergrund) >= 3:1 sein. * * Ergebnis 1: Puffers Konturton #B9BCBF faellt hell an 12 von 21 * Untergruenden durch, #6A6F75 dunkel an 8. Eine woertliche Uebernahme * waere unbrauchbar gewesen. * Ergebnis 2: --kontur #6f767f traegt gegen alle neun Kartenflaechen, * schlechtester Wert 3,17 (Grenze, Strassenrand, Wasser), bester 4,59 * (weisse Strasse). Preis: 4,59:1 gegen die eigene Flaeche statt * Puffers 3:1. Ueber einer Karte ist die Kontur kraeftiger, weil sie * nach aussen gegen unbekannten Grund arbeitet und nicht nur nach innen. * Ergebnis 3: unter A1-Orange faellt sie auf 2,52. Das bleibt so. Eine * Linie ist vier Pixel breit, sie kann eine Tafelkante kreuzen, aber nie * auf ganzer Laenge belegen; eine Wasserflaeche kann genau das. * Ergebnis 4 (Gegenprobe): eine abdunkelnde Kontaktzone unter der Kante * verbessert nichts, sie schiebt helle Untergruende naeher an den * Konturton und verlangt dann noch dunklere Konturen. Der Schatten ist * hier also Tiefe, nicht Kontrast. Deshalb steht er an dritter Stelle. */ :root { --grund: #f4f6f8; --flaeche: #ffffff; --flaeche-2: #eef1f4; /* * Dritte Stufe allein fuer den Druckzustand. Ohne sie muesste ein * gedrueckter Knopf die Fuellflaeche mitbenutzen und saehe aus wie ein * ruhender. */ --flaeche-3: #e2e7ec; /* * Drei Kantenrollen, nach Aufgabe getrennt statt einer fuer alles. * --kontur umschliesst Tafeln ueber der Karte, gegen Kartentoene gerechnet * --kontur-feld umschliesst Bedienfelder im Bogen, dort ist der Untergrund * bekannt und Puffers 3:1 reicht genau * --linie gliedert nur (Listentrenner), umschliesst nichts Bedienbares * und braucht deshalb keine 3:1 */ --kontur: #6f767f; --kontur-feld: #8f959d; --linie: #dfe3e8; /* * DER EINE SCHALTER FUER DIE TAFELKANTE. Er steht auf "keine Kante", weil * der Auftraggeber sie weghaben wollte; die ganze Rechnung dazu steht bei * .oben weiter unten. Wer die strenge Lesart von WCAG 1.4.11 zurueckwill, * setzt hier `1px solid var(--kontur)` und im Dunkelsatz dasselbe, und die * Kante ist an allen vier Stellen zugleich wieder da. Sie kostet dann * wieder, was sie kostete, aber sie ist eine Zeile weit weg und nicht ueber * die Datei verstreut. */ --kontur-tafel: 0 none; /* Bleiben definiert, weil moderation.html darauf zugreift. */ --rand: #ccd4dd; --rand-leise: #e3e8ed; --rand-stark: #6f767f; /* Tinte in drei Stufen, nach Puffers Rollentrennung. */ --schrift: #10141a; --schrift-2: #4e5763; --schrift-3: #626b76; /* Alt-Name, den aeltere Regeln und moderation.html noch fuehren. */ --schrift-leise: #4e5763; /* * Kartentoene bleiben unveraendert: kartenstil.js fuehrt dieselben Werte * als JS-Konstanten, ein Auseinanderlaufen faellt sofort auf. */ --karte-grund: #f3f1ed; --karte-wasser: #bad6ec; --karte-grenze: #d9d2c6; --karte-station: #ffffff; --karte-station-rand: #2a2e35; --karte-schrift: #3a444f; --karte-schrift-stark: #10141a; /* * Gelb ist keine Bedienfarbe mehr. Es steht nur noch im Markenzeichen und * in der Ladeanimation, die denselben Punkt zeichnet. Der Meldeknopf traegt * Tinte, wie Puffers Erfassungsknopf: ein Knopf, dessen Handlung nichts * aussagt, bekommt keine semantische Farbe. * --akzent bleibt definiert, weil js/ladeanimation.js darauf zurueckfaellt. */ --akzent: #ffd400; --akzent-schrift: #10141a; --akzent-kontrast: #8a6b00; --warn: #e2001a; --warn-schrift: #c1000f; --auf-warn: #ffffff; --ruhig: #14804a; --standort: #1170d4; --standort-rand: #ffffff; --fokus: #8a6b00; /* * DER FOKUSRING IST ZWEIFARBIG, UND DAS IST KEINE ZIERDE. * * Suche, Standort, Meldeknopf und der Kartenausschnitt selbst schweben frei * ueber der Karte. Was hinter ihnen liegt, ist beliebig: U2-Rot, U3-Gelb, * Wasserflaeche, Kartengrund. Ein EINFARBIGER Ring kann WCAG 1.4.11 dort * grundsaetzlich nicht erfuellen; gerechnet gegen die Kartenpalette kam das * helle Gold #8a6b00 auf 1,02:1 gegen U2-Rot, das dunkle #ffd400 auf 1,06:1 * gegen U3-Gelb. Es gibt keine Farbe, die gegen jede andere Farbe 3:1 haelt. * * Es gibt aber ein PAAR, das es tut. Fuer Weiss und diese Tinte gilt: der * schlechteste denkbare Untergrund ist der, bei dem beide Verhaeltnisse * gleich sind, also (L+0,05)^2 = 1,05 * 0,0568 = 0,0597, L+0,05 = 0,2443. * Dort betraegt der bessere der beiden Werte 1,05 / 0,2443 = 4,30:1. Gegen * JEDEN Untergrund traegt also mindestens einer der beiden Toene 4,3:1, und * gegeneinander tragen sie 18,5:1. Deshalb sind beide Werte in HELL UND * DUNKEL gleich: der Untergrund ist die Karte, nicht das Farbschema. * * --fokus bleibt daneben stehen, weil js/tutorial.js es fuehrt. */ --fokus-hell: #ffffff; --fokus-dunkel: #10141a; /* * Aussen: 2 px hell, 3 px Tinte, 2 px hell. Die zuerst genannte Lage liegt * oben, die spaeteren schauen nur noch als Band darunter hervor. */ --fokus-ring: 0 0 0 2px var(--fokus-hell), 0 0 0 5px var(--fokus-dunkel), 0 0 0 7px var(--fokus-hell); /* * Dieselben drei Baender nach innen, fuer jedes Ziel, das in einer Flaeche * mit overflow: clip sitzt. Dort waere der aeussere Ring abgeschnitten. */ --fokus-ring-innen: inset 0 0 0 2px var(--fokus-hell), inset 0 0 0 5px var(--fokus-dunkel), inset 0 0 0 7px var(--fokus-hell); /* * BUSSE SIND ROT, nicht grau. Auf Ansage des Auftraggebers ("Bus-Symbole rot * faerben") und in Uebereinstimmung mit dem hvv, der seine Buslinien im * Aushang und in der App rot fuehrt. Grau war eine Erfindung dieser Datei. * * Genommen ist das HVV-Rot #E2001A, dasselbe, das MARKE.U2 in * js/kartenstil.js fuehrt. Eine Verwechslung von Bus und U2 kann daraus * nicht entstehen: kein Schnellbahn-Kuerzel ist rein numerisch (U1 bis U4, * S1 bis S7, A1), jedes Bussignet dagegen traegt eine Zahl oder ein M davor. * * Gemessen: Weiss auf #E2001A ergibt 4,94:1 und haelt damit die 4,5:1 aus * WCAG 1.4.3 fuer das Signet, das ja Text traegt. Tinte darauf waere 3,74:1 * und faellt durch, deshalb bleibt es bei Weiss. Der alte Grauton stand hier * nur, weil weisse Schrift auf ihm gerade eben trug (5,98:1 hell); der neue * Wert ist niedriger und immer noch ueber der Schwelle. * * Ein Satz fuer beide Modi. Anders als bei S2 und S3 gibt es keinen Grund * fuer eine dunkle Fassung: #E2001A traegt gegen den dunklen Kartengrund * 3,50:1 und gegen den hellen 4,38:1. */ --bus: #e2001a; --bus-schrift: #ffffff; /* * DIE LEGENDE ZEIGT, WAS DIE KARTE ZEICHNET -- dieselben vier Werte * wie RISIKO_STUFEN in web/js/kartenstil.js. Sie standen bis zum * 28.08.2026 zweimal da und liefen auseinander: die Karte bekam die * prallen Toene, die Legende zeigte weiter die dunklen. Eine Legende, * die andere Farben nennt als die Flaeche darunter, ist schlechter * als keine. web/tests/risikoansicht.test.mjs bindet beide Seiten. * * Ein Satz fuer beide Modi, weil die Farbe auf der Karte ihren * Kontrast aus dem SAUM der Linie zieht und nicht aus sich selbst * (Begruendung im Kopf von RISIKO_STUFEN). */ --risiko-keine: #00d67f; --risiko-gering: #ffd23f; --risiko-erhoeht: #ff8a3d; --risiko-hoch: #ff3b30; /* * Saum auf Liniensignets. U3 (#ffdd00) erreicht auf weisser Flaeche 1,35:1, * das Signet zerfliesst. Ein Innensaum aus 38 Prozent Schwarz hebt den * schlechtesten Fall auf 3,48:1, ohne den Farbton anzutasten. */ --kapsel-saum: rgb(0 0 0 / 0.38); /* * SCHWAECHER SEIT DEM 29.08.2026, weil der Bogen jetzt selbst ein Material * traegt. Vorher lag eine deckende Flaeche (--flaeche) auf einem kraeftigen * Abdunkler: zwei Lagen, die beide dasselbe taten, naemlich die Karte * verdecken. Der Auftraggeber dazu: die Boegen sehen aus wie das erste * App-Design, waehrend die Kopftafel darueber echtes Glas traegt. * * Jetzt bricht der Bogen den Untergrund, statt ihn zu ersetzen, und dafuer * muss etwas vom Untergrund uebrig sein. 0,28 statt 0,5 (hell) und 0,42 * statt 0,62 (dunkel): genug, damit der Text auf dem Glas traegt, wenig * genug, dass die Karte durchscheint und der Bogen darauf zu liegen scheint * statt sie abzuschalten. */ --abdunkler: rgb(16 20 26 / 0.28); /* * Tiefe. Zwei Lagen: eine enge Kontaktzone, die sagt, dass die Tafel * aufliegt, und eine weite mit negativem Spread, die sie anhebt, ohne * seitlich auszuleuchten. Nach kulturisten-hoch2/main.css:29-30. * Kein dritter Ambient-Schatten, das waere der Baukasten-Reflex. */ --schatten-tafel: 0 1px 2px rgb(16 20 26 / 0.10), 0 14px 30px -16px rgb(16 20 26 / 0.30); --schatten-druck: 0 1px 1px rgb(16 20 26 / 0.12); /* Stufe 2: liegt dauerhaft auf. Eine Lage, kein Weitschatten. */ --schatten-auflage: 0 1px 2px rgb(16 20 26 / 0.14); /* * SO PRALL, WIE ES OHNE VERLUST GEHT -- gemessen, nicht geschaetzt. * * Der Auftraggeber am 28.08.2026: "aus der so dunklen, haesslichen * Farbe hellere Farben [...] sowie der Melden-Knopf". Der Versuch, die * pralle Flaeche des Dunkelmodus (#ff3b30) auch hell zu nehmen, faellt * an einer Stelle durch, die der Knopf mit abdeckt: der Elbe. * * #ff3b30 gegen Wasser (#BAD6EC) 2,35:1 unter den 3:1 (WCAG 1.4.11) * #de332a gegen Wasser 3,02:1 * #d62b1f gegen Wasser 3,29:1 (bisher) * * Beide Bedingungen -- 4,5:1 gegen die weisse Schrift und 3:1 gegen * jede Kartenflaeche -- laufen rechnerisch auf DIESELBE Obergrenze * hinaus (Leuchtdichte 0,183), und #de332a sitzt genau darauf: * weisse Schrift 4,55, Wasser 3,02, Gruen 3,09, Gebaeude 3,21, * Grund 4,04. * * Praller geht nur mit einer Kontur, und die ist am 19.08.2026 mit * Grund entfallen (siehe .melden in stil.css). Auf der KARTE gilt die * Grenze nicht: dort liegt ein Saum zwischen Farbe und Grund, und * deshalb sind die Risikofarben dort voll gesaettigt (RISIKO_STUFEN). */ --melden-flaeche: #de332a; --melden-schrift: #ffffff; --glas: rgb(255 255 255 / 0.82); --glas-kante: inset 0 1px 0 rgb(255 255 255 / 0.55); --glas-filter: blur(20px) saturate(180%); /* * LIQUID GLASS, STUFE 1 (18.08.2026). Bis hierher war das Material * MILCHGLAS: blur(20px) saturate(180%) STREUT Licht. Apple sagt zu Liquid * Glass in "Meet Liquid Glass" (WWDC25) das Gegenteil, es "bends, shapes, * and concentrates light in real time". Die Token darunter bauen genau * diesen Unterschied nach, so weit WebKit es zulaesst. * * DAS RANDBAND ist der Ersatz fuer echte Refraktion. Die braeuchte * backdrop-filter: url(#filter) mit feDisplacementMap, und das ist in * WebKit nicht implementiert (Bug 245510, offen). Statt Pixel zu VERSCHIEBEN * konzentriert das Band Licht: 7 px Rand bekommen einen EIGENEN, kuerzeren * Weichzeichner (9 statt 20 px) und die dreifache Saettigung, und die * Flaeche laesst diese 7 px frei, damit das Band den rohen Kartengrund * sieht und nicht die schon verrechnete Scheibe. Weniger Blur heisst mehr * Struktur, mehr Saettigung heisst mehr Farbe: zusammen liest sich das als * gebuendeltes Licht an der Kante statt als zweite Truebung. * * 7 px ist kein Gefuehlswert, sondern der Abstand, den der randnaechste Text * hat. Gemessen (docs/messung/glas.mjs, Punkt 3) ist die knappste Stelle die * Lizenzzeile mit 8 px Innenabstand nach unten. Ein 8. Pixel wuerde Text auf * die duennere Randfuellung setzen, und die traegt die gemessenen 4,5:1 * nicht mehr. * * --glas-rand ist die Fuellung DES BANDES, 55 statt 82 Prozent. Sie liegt * bewusst duenner, sonst waere das Band nur eine hellere Flaeche derselben * Sorte. Text steht dort nicht (siehe oben), Symbole auch nicht: das * Lupensymbol ist 18 px in einem 44-px-Kreis, also 13 px von der Kante. */ --glas-rand-breite: 7px; /* * DER WEICHZEICHNER DES BANDES, als eigenes Token, weil ihn Stufe 2 ersetzt. * * 9 px ist der Wert von Stufe 1: das Band STREUT weniger als die Flaeche und * wirkt dadurch wie gebuendeltes Licht. Rechnet die Engine die echte * Brechung (js/brechung.js), faellt er auf 2 px -- eine Verschiebung, die * auf einem schon verwaschenen Bild arbeitet, verschiebt nichts Sichtbares. * Erst mit fast scharfem Untergrund WIRD aus dem Band eine Linse. * * Die gemessenen Grenzwerte beruehrt das nicht: der Weichzeichner geht in * die Kontrastrechnung gar nicht ein (docs/messung/glas.mjs, Punkt 1 rechnet * je Untergrundton, und Weichzeichnen mischt nur Toene, die dort alle schon * einzeln geprueft sind). Die Fuellung von 55 Prozent, die Saettigung und die * Aufhellung bleiben unangetastet, und Text steht auf dem Band ohnehin nicht. */ --glas-rand-blur: 9px; --glas-rand: rgb(255 255 255 / 0.55); --glas-rand-filter: blur(var(--glas-rand-blur)) saturate(300%) brightness(1.06); /* * DIE KALTE GEGENKANTE. --glas-kante oben ist warmes Streiflicht, das auf die * Scheibe faellt. Unten tritt Licht AUS, und zwar gebrochen und damit kuehler; * ohne die Gegenkante endet die Tafel nach unten im Nichts. Blaustich statt * Grau, weil Grau nur ein zweiter Schatten waere. */ --glas-gegenkante: inset 0 -1px 0 rgb(58 94 142 / 0.20); /* * DER SPEKULARE GLANZ. Ein Verlauf, dessen Winkel die Kartendrehung mitfuehrt * (js/karte.js, _lichtSetzen). Das Licht steht im WELTBILD fest, die Scheibe * am Schirm: dreht sich die Karte unter ihr weg, wandert der Glanz. * * ER LIEGT AUF DEM RANDBAND, NICHT AUF DER FLAECHE, und das ist keine * Geschmacksfrage, sondern die Rechnung. Gemessen (docs/messung/glas.mjs, * Punkt 1) darf im Dunkelsatz auf der Flaeche insgesamt WEISS ZU 2,0 PROZENT * liegen, bevor die leise Schrift --schrift-2 unter die 4,5:1 aus WCAG 1.4.3 * faellt: sie steht dort mit 4,78:1 ueber der weissen Station, das sind * 0,28 Reserve. Einen Glanz, den man bei 2 Prozent sieht, gibt es nicht. * * Auf dem Band gibt es die Schranke nicht, denn dort steht kein Text (siehe * --glas-rand-breite). Und es ist ohnehin der richtigere Ort: Apples Glanz * laeuft an der KANTE entlang, nicht ueber die Mitte -- eine Fase, die Licht * faengt, keine aufgelegte Folie. * * --glanz-spitze ist der Aufsatz auf der zugewandten Seite, --glanz-gegen der * schwaechere Rueckwurf gegenueber. Beide sind Deckungsgrade, keine Deckkraft * des Elements: opacity auf einer Glasflaeche wuerde sie zum Backdrop Root * machen und der Lage darunter den Untergrund nehmen. */ --glanz-winkel: 145deg; --glanz-spitze: 0.55; --glanz-gegen: 0.18; /* * DAS LEUCHTEN UNTER DEM FINGER, Apples Kernrueckmeldung. Ort aus dem * pointerdown, Staerke ueber --tupfer-staerke (0 bis 1, siehe @property). * Es liegt auf BEIDEN Lagen: schwach auf der Flaeche, damit es unter dem * Finger sitzt, und kraeftig auf dem Band, weil dort das Licht austritt. * Zusammen liest sich das als Licht, das an einem Punkt eintritt und die * Kante der Scheibe zum Leuchten bringt. * * --tupfer-ton ist im Hellsatz Weiss, weil Weiss dort LICHT ist und den * Kontrast der dunklen Schrift sogar hebt (Budget 59,5 Prozent, genutzt 26). * Im Dunkelsatz waere Weiss nach 2 Prozent aufgebraucht; dort steht deshalb * ein kuehler Ton, der bei gleicher Lichtwirkung 7,0 Prozent erlaubt. Beide * Zahlen aus docs/messung/glas.mjs. */ --tupfer-x: 50%; --tupfer-y: 50%; --tupfer-radius: 130px; --tupfer-ton: 255 255 255; --tupfer-spitze: 0.26; --rand-tupfer-spitze: 0.5; /* Stufe 3: kommt und geht. Der Weitschatten sagt genau das. */ --schatten-schwebend: 0 1px 2px rgb(16 20 26 / 0.12), 0 24px 48px -14px rgb(16 20 26 / 0.34); /* Diese beiden dienen nur den Kartenauflagen aus dem Altbestand. */ --schatten-weich: rgb(16 20 26 / 0.10); --schatten-hart: rgb(16 20 26 / 0.20); --plakette-halo: color-mix(in srgb, var(--warn) 30%, transparent); /* * 28 px statt 22. Der Auftraggeber wollte abgerundeter und frischer, und die * Zahl ist nicht gegriffen: die Kopftafel derselben App traegt 26 px * (--r-tafel), und ein Blatt, das vom unteren Rand kommt und die halbe * Bildschirmhoehe einnimmt, darf nicht schaerfer gerundet sein als eine * Leiste, die darueber schwebt. */ --r-bogen: 28px; --r-tafel: 20px; --r-feld: 12px; --r-signet: 6px; /* * Masse der Zonen. DREI DAVON SIND WEG, und das ist die eigentliche Nachricht * dieses Blocks: --bedienzeile-h, --werkzeugspalte-h und --lagetafel-h. * * Die ersten beiden mit den Flaechen, die sie massen. Die dritte war ein * geschaetzter Wert fuer eine Hoehe, die der Browser selbst kennt: Sie diente * allein dazu, den Toast ueber die untere Zone zu rechnen, und sie stimmte * nur bei normaler Systemschrift. Die Lagetafel waechst aber mit dem Text. * Der Toast haengt sich jetzt mit `bottom: 100%` an die Zone selbst (siehe * .toast), damit ist die Zahl ueberfluessig und mit ihr eine ganze Klasse von * Fehlern. Gemessen wurde sie zuletzt bei 92 px mit Meldung und 60 ohne; wer * sie braucht, misst sie neu, statt sie hier zu pflegen. * * Die 44 px der Fingernorm werden weiter nicht unterschritten, sie stehen * jetzt an den beiden freien Kreisen. */ --band-h: 54px; /* Fuge zwischen den beiden unteren Zeilen und zwischen Lagetafel und Melden. */ --reihe-fuge: 12px; --bogen-rand: 18px; --rand-aussen: 12px; /* * Die Signaturkurve. Identisch in Puffer (Design.swift:25), cl3verdesign * (tokens.css:86) und smaco. Dazu die Dauerleiter aus tokens.css:82-85. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --d-druck: 120ms; --d-schnell: 160ms; --d-basis: 240ms; --d-langsam: 380ms; /* * EIN BAUTEIL, VIER STELLEN. Darstellung, Glas, der Verkehrsmittelreiter im * Melde-Ablauf und jede weitere Wahl aus zwei bis drei festen Werten. * * Vorher war es kein Bauteil, sondern eine Reihe Rechtecke mit -1 px * Ueberlappung: harte Ecken, duenne Trennstriche, das aktive Feld ein weisses * Vollfeld ohne Rundung und ohne Bewegung. Der Auftraggeber hat es am * 27.08.2026 am iPhone gesehen und "ganz, ganz viele Probleme" gemeldet. * * Die Masse kommen aus einer Rechnung und nicht aus dem Gefuehl: die Spur ist * --ziel-h hoch (44 px, die Fingernorm), der Innenabstand 3 px, und der * Indikatorradius ist genau --seg-r minus --seg-innen. Nur so laufen * Aussenkante und Innenkante konzentrisch; jede andere Zahl ergibt einen * Spalt, der oben anders aussieht als an der Ecke. */ /* * Aussenradius der Spur. 22 px ist die halbe Spurhoehe (--ziel-h, 44 px), * die Spur ist damit an den Enden voll gerundet. Vorher 14 px, und das war * die Zahl, die den Schalter am 29.08.2026 alt aussehen liess: eine * 44 px hohe Flaeche mit 14 px Ecke liest sich als KASTEN mit weichen Ecken, * erst ab der halben Hoehe als Kapsel. Die Kapsel ist die Form, die diese * App sonst ueberall benutzt -- Linienkapseln, Meldeknopf, Kopftafel. * * Kreisbogen, keine Squircle-Maske: bei voller Rundung ist der Unterschied * zwischen beiden ohnehin null, und eine Maske kostet hier nur Rechenzeit. */ --seg-r: 22px; /* Der Spalt zwischen Spur und Indikator, rundum gleich. */ --seg-innen: 3px; /* Indikatorradius. 22 minus 3 -- konzentrisch zur Spur, nicht geraten. */ --seg-r-innen: 19px; /* * Die Fahrt des Indikators. Laenger als --d-schnell, weil hier eine * Flaeche eine Strecke zuruecklegt und nicht nur erscheint; unter den * 300 ms, die in dieser App fuer jede Bewegung gelten. */ --seg-dauer: 220ms; /* * Apples Blattkurve, nicht --ease-out. Der Unterschied ist die Ankunft: * --ease-out (0.23, 1, 0.32, 1) schiesst am Ziel vorbei und faellt zurueck, * was an einem erscheinenden Element richtig aussieht und an einem * fahrenden wie ein Wackeln. Diese Kurve setzt hart an und legt sich * sauber an. Sie gilt NUR fuer den Indikator; alles andere in dieser App * behaelt --ease-out. */ --seg-kurve: cubic-bezier(0.32, 0.72, 0, 1); /* * WENN EIN BOGEN DIE KARTE ABMELDET, GEHT DAS HUD WEG -- ES WIRD NICHT * GEDAEMPFT. * * Gemessen am 28.08.2026 im Simulator (docs/messung/glas/ursache-2026-08-28): * sobald der Mehr-Bogen aufging, verlor die Kopftafel die Haelfte ihrer * Helligkeit -- RGB(63,61,67) mit offenem Bogen und ausgeschaltetem * Umschaltpfad gegen RGB(30,33,38) im Ist-Zustand. Ursache war KEIN * Daempfungswert, sondern ein Materialwechsel: die Seite meldete der Huelle * "nichts zu zeichnen", nahm die Klassen hud-nativ-* ab, und der matte * Web-Nachbau kehrte unter dem Abdunkler zurueck. * * Gedaempftes Glas liest jeder als Fehler. Also gibt es kein Dazwischen mehr: * deckt der Bogen die Kopftafel, geht das ganze HUD in 200 ms auf null und * acht Pixel nach unten und wird danach unbegehbar (inert). Deckt er sie * nicht -- ein halbhoher Bogen --, bleibt das HUD VOLL stehen. Zwei * Zustaende, kein dritter. */ /* * Kuerzer als die 240 ms des Bogens: das HUD soll weg sein, bevor der * Bogen steht, nicht gleichzeitig mit ihm ankommen. * * Steht seit dem 28.08.2026 auch in Swift, und zwar in SEKUNDEN, weil * UIView.animate so rechnet. Grund fuer den Umzug: in der Huelle ist das * HUD nativ, das Web blendete also 200 ms lang eine Tafel aus, die gar * nicht mehr zu sehen war, waehrend die echte hart verschwand. */ --hud-raeum-dauer: 200ms; /* * Wie lange die Kopftafel braucht, wenn sie hoeher oder niedriger wird. * * Das passiert beim Wechsel in die Risikoansicht: die Legende kommt unter * das Linienband und die Tafel waechst um rund 40 pt. Bis zum 29.08.2026 * sprang sie, und mit ihr sprang der Ausschnitt der Karte darunter, weil * die ihren Rand an der Tafel ausrichtet. * * --d-basis und nicht --hud-raeum-dauer: das Raeumen ist ein Abgang und * darf kurz sein, das Wachsen ist eine Formaenderung, der man folgen * koennen soll. Dieselbe Dauer, mit der im Web jeder Bogen einfaehrt. */ --hud-wuchs-dauer: 240ms; /* * Der Weg nach unten. Dieselben acht Pixel, die auch die Quittung * faehrt (.toast); ein Element dieser App tritt immer um genau diesen * Betrag zurueck. * * Seit dem 28.08.2026 auch in Swift: die nativen Tafeln fahren denselben * Weg. Eine Zahl, zwei Leser -- nicht zwei Zahlen. */ --hud-raeum-weg: 8px; --schrift-familie: "Archivo", ui-sans-serif, system-ui, sans-serif; /* * Formvorrat fuer Maskensymbole. Enthaelt bewusst keine Farbe: Die Maske * schneidet nur aus, gefaerbt wird ueber background-color aus dem * Token-Block. Steht hier und nicht an der Regel, damit dieselbe Form * spaeter mehrfach benutzt werden kann, ohne den Pfad zu verdoppeln. */ --symbol-ebenen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 7.6l9 4.6 9-4.6z'/%3E%3Cpath d='M3 12.4 12 17l9-4.6'/%3E%3Cpath d='M3 16.8 12 21.4l9-4.6'/%3E%3C/svg%3E"); /* * DIE ZAHLEN, DIE BIS HIERHER ZWEIMAL DASTANDEN. * * docs/25-natives-hud.md hat es unter "Was die Doppelpflege kostet" so * aufgeschrieben: "Wer eine Massangabe im Layout aendert, aendert den Stil UND * HudAufsatz.swift. Dort stehen dieselben Zahlen ein zweites Mal (9/12/7 in der * Lagetafel, 8 px Fuge im Band, 44 px Zielhoehe). Kein Test faengt das; nur ein * Blick auf den Abzug. DAS IST DIE TEUERSTE STELLE." * * Genau diese Zahlen stehen jetzt hier, einmal. Sie waren vorher weder im * Token-Block noch in einer Konstante, sondern als nackte Ziffern in * CSS-Regeln und in Swift-Rechnungen. Ein Wert, der an zwei Stellen steht, * sind zwei Werte. */ /* * Die Fingernorm, WCAG 2.5.5 und 2.5.8. Sie ist die Untergrenze jedes Ziels in * dieser App und steht deshalb ganz oben: Bedienlage ist einhaendig, oft * unterirdisch, oft in einer fahrenden Bahn. */ --ziel-h: 44px; /* * Seitlicher Innenabstand JEDER Tafelzeile: Lage, Naeherung, Lizenz, Legende. * Eine Zahl fuer alle vier, damit die linke Textkante der Tafel durchlaeuft. */ --tafel-innen: 12px; /* Innenabstand des rollenden Bandes links und rechts. */ --band-innen: 10px; /* * Fuge zwischen zwei Kapseln im Band. War 6 px; gemessen lagen zwischen zwei * Liniensignets 6,0 px, und ein Fehlgriff filtert die Karte auf die falsche * Linie. Das Band ist ein Scroller, die zusaetzlichen 2 px je Fuge kosten * deshalb keine Breite, sondern nur Rollweg. */ --band-fuge: 8px; /* Innenabstand der Bandzeile rechts, vor dem Mehr-Knopf. */ --band-rechts: 6px; /* * Fuge zwischen der Schnittkante des Bandes und dem Mehr-Knopf. War 6 px und ist * 10: am Rand des Scrollers steht fast immer eine angeschnittene Kapsel, der * weiche Auslauf laesst sie verblassen, aber `mask-image` faerbt nur und fasst * das Klickziel nicht an. Der Splitter blieb also antippbar, und ein Fehlgriff * dorthin oeffnete die Einstellungen, statt eine Linie zu filtern. */ --band-knopf-fuge: 10px; /* * Die Strecke, ueber die eine 44 px hohe Kapsel am Bandrand erkennbar * verschwindet, ohne dass die davor stehende schon blass wird. */ --band-auslauf: 28px; /* Innenabstand einer Wortkapsel im Band, links und rechts. */ --kapsel-innen: 14px; /* * Innenabstand einer Linienkapsel. Kleiner als bei der Wortkapsel, weil das * farbige Signet darin schon eine eigene Flaeche ist. */ --linienkapsel-innen: 5px; /* * Hoehe des Liniensignets, wie im gedruckten hvv-Aushang. Der Traeger darum * bleibt bei --ziel-h und faellt nicht auf dieses Mass. */ --signet-h: 26px; /* Mindestbreite eines Signets, damit einstellige Kuerzel nicht zu schmal werden. */ --signet-min: 32px; /* Innenabstand im Signet, links und rechts. */ --signet-innen: 8px; /* Innenabstand des Ansichtswechslers. */ --ansicht-innen: 12px; /* Fuge zwischen Ebenensymbol und Wort im Ansichtswechsler. */ --ansicht-fuge: 7px; /* Kantenlaenge des Ebenensymbols. */ --ansicht-symbol: 16px; /* Abstand des Ansichtswechslers zur ersten Kapsel. */ --ansicht-rechts: 8px; /* * Innenabstand des Lage-Knopfes oben. Oben 9 und unten 7: die Lagetafel wird von * UNTEN nach oben aufgebaut, und die optische Mitte einer Textzeile liegt ueber * der geometrischen. */ --lage-oben: 9px; /* Innenabstand des Lage-Knopfes unten, siehe --lage-oben. */ --lage-unten: 7px; /* Fuge zwischen Titelzeile und neuester Meldung. */ --lage-fuge: 5px; /* Fuge zwischen Lageflagge und Titelzeile. */ --lage-kopf-fuge: 9px; /* Breite der Lageflagge. */ --flagge-b: 4px; /* Hoehe der Lageflagge. */ --flagge-h: 18px; /* Radius der Lageflagge. Halbe Breite, also eine Halbkapsel. */ --flagge-r: 2px; /* Fuge zwischen Signet, Stationsname und Zeit. */ --neueste-fuge: 8px; /* * Fuge, wenn die Zeit in eine zweite Zeile rutscht. Gemessen: mit starrem Signet * und starrer Zeitangabe blieb dem Stationsnamen bei 320 px und 200 Prozent * Systemschrift die Breite 0. Fuer eine Melde-App ist die Station DIE Information. */ --neueste-umbruch: 4px; /* Innenabstand der Naeherungsleiste oben. */ --naehe-oben: 7px; /* Innenabstand der Naeherungsleiste unten. */ --naehe-unten: 8px; /* Fuge zwischen Lagezeile und Hinweis in der Naeherungsleiste. */ --naehe-fuge: 2px; /* * Abstand der Lizenzzeile zur Tafelkante. Sie steht ausserhalb des Rollbereichs * und gibt nichts ab: eine ODbL-Angabe, die man herunterrollen muss, ist keine. */ --lizenz-unten: 8px; /* Abstand der Legende zur Tafelkante. */ --legende-unten: 10px; /* Fuge zwischen Skala und Beschriftung. */ --legende-fuge: 5px; /* Hoehe der Risikoskala. */ --legende-h: 10px; /* Radius der Risikoskala. Kleiner als --r-signet, weil die Skala nur 10 px hoch ist. */ --legende-r: 3px; /* Fuge zwischen den beiden Beschriftungen der Skala. */ --legende-enden-fuge: 12px; /* Kantenlaenge des Meldeknopfes. Deutlich ueber der Fingernorm, weil er die eine Handlung der App traegt. */ --melden-min: 72px; /* Innenabstand im Meldeknopf. */ --melden-innen: 8px; /* Fuge zwischen Kreuz und Wort im Meldeknopf. */ --melden-fuge: 3px; /* Kantenlaenge des Kreuzes im Meldeknopf. */ --melden-symbol: 22px; /* Breite des Auswahlrings am gewaehlten Liniensignet. */ --auswahlring-b: 2px; /* Abstand zwischen Signet und Auswahlring. */ --auswahlring-luft: 2px; /* * Deckkraft einer NICHT gewaehlten Linienkapsel, solange gefiltert wird. Sie * tritt zurueck, statt zu verschwinden: das Band ist auch dann noch die Legende. */ --kapsel-blass: 0.4; /* * Kantenlaenge des Symbols in einem Symbolknopf des Bandes (Mehr-Knopf). * * EIN UNTERSCHIED BLEIBT UND WIRD NICHT VERSCHWIEGEN: die Seite zeichnet ein * SVG dieser Groesse, die Huelle ein SF-Symbol mit `pointSize`. Eine Punktgroesse * ist keine Kantenlaenge -- das Zeichen sitzt mit Vor- und Nachbreite darin. * Deshalb steht in der Huelle weiter eine eigene Zahl, und deshalb ist sie dort * kleiner als diese. Der Drift-Test kann diesen Fall NICHT fangen; er steht in * docs/29-materialgesetz.md unter dem, was offen bleibt. */ --symbol-band: 20px; /* * DIE MASSE DER EINEN FLAECHE, DIE RECHTLICH TRAEGT. * * Das Tor steht seit dem 26.08.2026 zweimal auf dem Schirm: als Web-Flaeche * im Browser und als native Flaeche in der Huelle (ios/Kontrollpunkt/ * TorAufsatz.swift). Der Grund steht in docs/30-tor-nativ.md und ist nicht * Glas -- das Tor ist deckend --, sondern iOS-Dynamic-Type: eine WKWebView * wendet die Systemtextgroesse nicht auf `rem` an, eine native Flaeche kann * es. Bei einer Pflichtabfrage ist das kein Stilthema. * * Zwei Flaechen heisst zwei Zeichnungen, und deshalb muessen ihre Masse aus * einer Quelle kommen -- dieselbe Rechnung wie beim HUD eine Gruppe weiter * oben. Der WORTLAUT steht NICHT hier: er kommt aus web/index.html ueber die * Bruecke, weil ein Rechtstext an zwei Stellen zwei Rechtstexte sind. */ /* * Innenabstand oben und unten. Das Tor ist eine Vollbildflaeche und traegt * unten zusaetzlich env(safe-area-inset-bottom); die Huelle bekommt den * sicheren Bereich vom System und legt ihn genauso darunter. */ --tor-oben: 28px; /* * Seitlicher Innenabstand. Groesser als --rand-aussen (12) der Karte: hier * steht eine Textspalte, kein Bedienfeld ueber einem Bild. */ --tor-seite: 20px; /* * Groesste Breite der Textspalte. Auf dem Telefon nie erreicht, auf dem iPad * der Unterschied zwischen einer Spalte und einer Zeile ueber 1000 px. */ --tor-breite: 460px; /* Abstand unter dem Eyebrow bis zur Heldenzeile. */ --tor-marke-unten: 16px; --tor-titel-unten: 12px; /* * Die Heldenzeile waechst mit der Breite und ist nach beiden Seiten * gedeckelt: clamp(1,75rem, 8vw, 2,25rem). Bei 320 px liegt die Zeile damit * auf 28 px statt auf 36 und passt neben den Rand. * * Der Wert ist ein FAKTOR auf die Grundschriftgroesse, wie jede Groesse in * dieser Quelle -- deshalb rem und nicht px. */ --tor-titel-min: 1.75rem; /* * Der mittlere Wert des clamp, in Prozent der Fensterbreite. Die Huelle * rechnet ihn selbst aus ihrer Breite; ein `vw` gibt es in UIKit nicht. */ --tor-titel-vw: 8vw; --tor-vorspann-unten: 22px; /* * Innenabstand einer Zustimmungskarte. Groesser als --tafel-innen (12): die * Karte ist ein Ziel fuer den Daumen und traegt zwei Zeilen Text. */ --tor-punkt-innen: 15px; /* Zwischen Kaestchen und Text. */ --tor-punkt-fuge: 13px; /* Zwischen den beiden Karten. */ --tor-punkt-unten: 10px; /* * Breite des Schiebers. Er steht an zwei Stellen -- in den Einstellungen * (Ortung, Mitteilungen, Diskret) und im Tor -- und traegt dort dieselbe * Aussage: „ich schalte das jetzt bewusst ein“. Bis zum 30.08.2026 stand * die Zahl nur hart in .schalter-gleis; das Tor bekam damals seinen * eigenen Haken. Seit beide dieselbe Form fuehren, steht sie hier. */ --schalter-gleis-b: 46px; /* * Hoehe des Schiebers. 28 und nicht 44: Ziel ist die ganze Zeile * beziehungsweise die ganze Karte, nicht der Schieber selbst. */ --schalter-gleis-h: 28px; /* * Durchmesser des Knaufs. 22 in einem 28er Gleis mit 2 px Innenabstand: * oben und unten bleibt je 1 px Luft fuer die Kante des Knaufs. */ --schalter-knauf: 22px; /* * ABGELEITET, nicht eingetragen: --schalter-gleis-b minus zweimal * --schalter-gleis-innen minus --schalter-knauf. Siehe `abgeleitet` in * gestalt/erzeugen.mjs. */ --schalter-weg: 20px; /* * Der Rand, auf dem der Knauf laeuft. Zwei Pixel auf jeder Seite, oben * wie unten -- er sitzt damit mittig im Gleis und beruehrt die Kante nie. * Aus dieser Zahl folgt --schalter-weg (siehe `abgeleitet` in * gestalt/erzeugen.mjs). */ --schalter-gleis-innen: 2px; /* * Der Hauptknopf. Deutlich ueber der Fingernorm (44): er ist die einzige * Handlung auf der Flaeche, und die Flaeche ist die erste, die jemand sieht. */ --tor-knopf-h: 52px; --tor-knopf-oben: 18px; /* * Deckkraft des Hauptknopfes, solange nicht beide Haken sitzen. * * Sie steht hier und nicht als Ziffer, weil sie auf BEIDEN Seiten des * Materialwechsels vorkommt: `.tor-knopf:disabled` im Stil und der native * Knopf in TorAufsatz.swift. Genau die Sorte Zahl, die sonst auseinander * laeuft -- wie --kapsel-blass eine Gruppe weiter oben. */ --tor-knopf-aus: 0.35; --tor-fuss-oben: 22px; /* * DIE SCHRIFTSCHNITTE DES HUD, je als Groesse, Gewicht und Sperrung. * * Die Groesse steht in rem, nicht in px: in px gesetzte Schrift ignoriert * die Grundschriftgroesse des Browsers, und ueber die wird WCAG 1.4.4 in * dieser App erfuellt. Die Huelle bekommt dieselben Faktoren und * multipliziert sie mit `mass`, der gerechneten Pixelgroesse von 1rem in * der Seite -- deshalb steht in der Huelle keine feste Punktgroesse. * * Die Sperrung steht in em und ist damit ebenfalls ein Faktor. In der * Huelle wird daraus `kern = sperrung * groesse * mass`. */ /* .filter-knopf, .filter-linie */ --t-band-kapsel-groesse: 0.84375rem; --t-band-kapsel-gewicht: 700; --t-band-kapsel-sperrung: 0em; --t-band-kapsel-zeilenhoehe: 1; /* .linie */ --t-band-signet-groesse: 0.84375rem; --t-band-signet-gewicht: 800; --t-band-signet-sperrung: 0em; --t-band-signet-zeilenhoehe: 1; /* .ansicht-knopf */ --t-band-ansicht-groesse: 0.8125rem; --t-band-ansicht-gewicht: 700; --t-band-ansicht-sperrung: 0em; --t-band-ansicht-zeilenhoehe: 1; /* * Die grosse Zeile laeuft eng, der Eyebrow darueber weit. Das Paar ist das * typografische Signaturmerkmal dieser Arbeiten. Zwei Zeilen sind erlaubt, dann * Auslassungspunkte: gemessen bei 320 px braucht "Keine aktuellen Meldungen" * 210 px, neben dem Statusbalken sind 187 px da. */ /* .lage-titel */ --t-lage-titel-groesse: 0.9375rem; --t-lage-titel-gewicht: 600; --t-lage-titel-sperrung: -0.02em; --t-lage-titel-zeilenhoehe: 1.2; /* .lage-ort */ --t-lage-ort-groesse: 0.84375rem; --t-lage-ort-gewicht: 400; --t-lage-ort-sperrung: 0em; /* .lage-zeit */ --t-lage-zeit-groesse: 0.78125rem; --t-lage-zeit-gewicht: 600; --t-lage-zeit-sperrung: -0.01em; /* .naehe-lage */ --t-naehe-lage-groesse: 0.84375rem; --t-naehe-lage-gewicht: 600; --t-naehe-lage-sperrung: -0.01em; /* .naehe-hinweis */ --t-naehe-hinweis-groesse: 0.71875rem; --t-naehe-hinweis-gewicht: 400; --t-naehe-hinweis-sperrung: 0em; --t-naehe-hinweis-zeilenhoehe: 1.35; /* .lizenz */ --t-lizenz-groesse: 0.625rem; --t-lizenz-gewicht: 500; --t-lizenz-sperrung: 0.02em; /* .legende-enden */ --t-legende-enden-groesse: 0.65625rem; --t-legende-enden-gewicht: 600; --t-legende-enden-sperrung: 0.01em; --t-legende-enden-zeilenhoehe: 1.2; /* * Klein, halbfett, minimal gesperrt. Nicht in Versalien: Versalien sind in dieser * App die Beschriftung UEBER einem Inhalt, hier steht die Handlung selbst. */ /* .melden-wort */ --t-melden-wort-groesse: 0.71875rem; --t-melden-wort-gewicht: 700; --t-melden-wort-sperrung: 0.01em; --t-melden-wort-zeilenhoehe: 1; /* * Der Eyebrow. Winzig, halbfett, weit gesperrt, Versalien, gedaempft. Das ist * die eine Stelle, an der Versalien stehen; Fliesstext und Listenzeilen laufen * normal. Sperrung +0,16em nach Puffers tracking 0.9 auf 11pt und * cl3verdesigns 0,20em, zwischen beiden. * * Er steht hier, seit die Huelle ihn zeichnet: die Marke ueber der Heldenzeile * des Tores ist derselbe Schnitt wie der Eyebrow ueber einem Abschnitt. */ /* .abschnitt, .bogen-unter, .tor-marke, .text h3 */ --t-eyebrow-groesse: 0.65625rem; --t-eyebrow-gewicht: 700; --t-eyebrow-sperrung: 0.16em; /* * Die Heldenzeile: gross und eng, gegen den winzigen weiten Eyebrow darueber. * Das Paar ist das typografische Signaturmerkmal dieser Arbeiten. * * Die Groesse hier ist die OBERE Schranke des clamp; die untere steht als * --tor-titel-min, der mittlere Wert als --tor-titel-vw. */ /* .tor h1 */ --t-tor-titel-groesse: 2.25rem; --t-tor-titel-gewicht: 700; --t-tor-titel-sperrung: -0.03em; --t-tor-titel-zeilenhoehe: 1.1; /* .tor-vorspann */ --t-tor-vorspann-groesse: 0.96875rem; --t-tor-vorspann-gewicht: 400; --t-tor-vorspann-sperrung: 0em; --t-tor-vorspann-zeilenhoehe: 1.55; /* .tor-punkt span */ --t-tor-punkt-groesse: 0.90625rem; --t-tor-punkt-gewicht: 400; --t-tor-punkt-sperrung: 0em; --t-tor-punkt-zeilenhoehe: 1.5; /* .tor-knopf */ --t-tor-knopf-groesse: 1rem; --t-tor-knopf-gewicht: 600; --t-tor-knopf-sperrung: -0.01em; --t-tor-knopf-zeilenhoehe: 1.2; /* * Die leise Zeile unter dem Knopf: Verfall, kein Konto, die beiden * Datenlizenzen, Impressum und Datenschutz. Sie traegt --schrift-3, und das * geht nur, weil das Tor DECKEND ist -- auf Glas laege dieser Ton bei 3,90:1. * Die Rechnung steht in docs/29-materialgesetz.md. */ /* .tor-fuss */ --t-tor-fuss-groesse: 0.75rem; --t-tor-fuss-gewicht: 400; --t-tor-fuss-sperrung: 0em; --t-tor-fuss-zeilenhoehe: 1.7; /* * DIE ECKE IST EIN EIGENES TOKEN, WEIL DER RADIUS SIE NICHT BESCHREIBT. * * Der Befund, gemessen und nicht behauptet (docs/messung/eckform/, Lauf vom * 26.08.2026 auf macOS 26.7, echtes WebKit, echter Bildschirmabzug bei 2x): * * border-radius: 22px Superellipse mit Eckfeld 21,4 und Formzahl 1,98 * -- also der Kreisbogen, wie erwartet. * cornerRadius 22 .continuous Eckfeld 32,3 und Formzahl 3,24. Apples Ecke * laeuft FLACHER und dafuer WEITER. * * Groesster Abstand zwischen beiden Umrissen: 4,25 pt bei Radius 22, 3,59 bei 20, * 1,38 bei 12, 0,34 bei 6. Beide Seiten geben korrekt "22" aus. Ein Test, der * Zahlen vergleicht, kann das nie fangen -- deshalb misst der Drift-Test die FORM. * * WEBKIT KANN `corner-shape` NICHT. Gefragt statt geglaubt: * CSS.supports('corner-shape','squircle') ist false, ebenso superellipse(). * `mask-border` und `-webkit-mask-box-image` sind da, `clip-path: path()` auch. * * Nachgebildet wird deshalb mit dem Neun-Schnitt: eine Superellipse als SVG, die * vier Ecken unskaliert, die Kanten dazwischen gestreckt. Das ist die einzige * Bauweise, die auf einer FLIESSENDEN Flaeche die Eckgroesse haelt. * * Eckfeld 1,58 x Radius und Formzahl 3,6 sind gesucht, nicht gewaehlt: sie sind * das Paar, das ueber alle vier Radien den schlechtesten Fall am kleinsten haelt. * Am Bild nachgemessen bleibt die Nachbildung 0,67 pt neben Apples Ecke statt * 4,25 pt. Bei Radius 6 ist sie mit 0,37 pt minimal SCHLECHTER als der Kreis * (0,34 pt); beide liegen unter einem Bildpunkt, das ist kein Unterschied mehr. * * WO SIE ANGEWENDET WIRD, steht als "eckform" an jeder Flaeche in * docs/29-materialgesetz.md. Kurz: auf allen DECKENDEN Web-Flaechen, denn dort * kostet eine Maske nichts. Nicht auf den Glasflaechen des Web-HUD: eine Maske * macht ein Element zum Backdrop Root, und dann filtert die Lage darunter eine * leere Flaeche. Im Browser bleibt das HUD deshalb ein Kreisbogen -- erklaert, * gepruegt und nicht zufaellig. */ --eckfeld-faktor: 1.58; --eck-formzahl: 3.6; --eckform-bogen: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27140%27%20height=%27140%27%20viewBox=%270%200%20140%20140%27%3E%3Cpath%20d=%27M35,0%20L105,0%20L110.235,0.01%20L112.692,0.042%20L114.631,0.094%20L116.292,0.167%20L117.771,0.26%20L119.117,0.375%20L120.36,0.511%20L121.518,0.668%20L122.605,0.845%20L123.631,1.044%20L124.603,1.265%20L125.526,1.506%20L126.406,1.769%20L127.245,2.054%20L128.047,2.36%20L128.814,2.688%20L129.547,3.038%20L130.25,3.411%20L130.922,3.806%20L131.565,4.224%20L132.181,4.665%20L132.77,5.129%20L133.333,5.617%20L133.87,6.13%20L134.383,6.667%20L134.871,7.23%20L135.335,7.819%20L135.776,8.435%20L136.194,9.078%20L136.589,9.75%20L136.962,10.453%20L137.312,11.186%20L137.64,11.953%20L137.946,12.755%20L138.231,13.594%20L138.494,14.474%20L138.735,15.397%20L138.956,16.369%20L139.155,17.395%20L139.332,18.482%20L139.489,19.64%20L139.625,20.883%20L139.74,22.229%20L139.833,23.708%20L139.906,25.369%20L139.958,27.308%20L139.99,29.765%20L140,35%20L140,105%20L139.99,110.235%20L139.958,112.692%20L139.906,114.631%20L139.833,116.292%20L139.74,117.771%20L139.625,119.117%20L139.489,120.36%20L139.332,121.518%20L139.155,122.605%20L138.956,123.631%20L138.735,124.603%20L138.494,125.526%20L138.231,126.406%20L137.946,127.245%20L137.64,128.047%20L137.312,128.814%20L136.962,129.547%20L136.589,130.25%20L136.194,130.922%20L135.776,131.565%20L135.335,132.181%20L134.871,132.77%20L134.383,133.333%20L133.87,133.87%20L133.333,134.383%20L132.77,134.871%20L132.181,135.335%20L131.565,135.776%20L130.922,136.194%20L130.25,136.589%20L129.547,136.962%20L128.814,137.312%20L128.047,137.64%20L127.245,137.946%20L126.406,138.231%20L125.526,138.494%20L124.603,138.735%20L123.631,138.956%20L122.605,139.155%20L121.518,139.332%20L120.36,139.489%20L119.117,139.625%20L117.771,139.74%20L116.292,139.833%20L114.631,139.906%20L112.692,139.958%20L110.235,139.99%20L105,140%20L35,140%20L29.765,139.99%20L27.308,139.958%20L25.369,139.906%20L23.708,139.833%20L22.229,139.74%20L20.883,139.625%20L19.64,139.489%20L18.482,139.332%20L17.395,139.155%20L16.369,138.956%20L15.397,138.735%20L14.474,138.494%20L13.594,138.231%20L12.755,137.946%20L11.953,137.64%20L11.186,137.312%20L10.453,136.962%20L9.75,136.589%20L9.078,136.194%20L8.435,135.776%20L7.819,135.335%20L7.23,134.871%20L6.667,134.383%20L6.13,133.87%20L5.617,133.333%20L5.129,132.77%20L4.665,132.181%20L4.224,131.565%20L3.806,130.922%20L3.411,130.25%20L3.038,129.547%20L2.688,128.814%20L2.36,128.047%20L2.054,127.245%20L1.769,126.406%20L1.506,125.526%20L1.265,124.603%20L1.044,123.631%20L0.845,122.605%20L0.668,121.518%20L0.511,120.36%20L0.375,119.117%20L0.26,117.771%20L0.167,116.292%20L0.094,114.631%20L0.042,112.692%20L0.01,110.235%20L0,105%20L0,35%20L0.01,29.765%20L0.042,27.308%20L0.094,25.369%20L0.167,23.708%20L0.26,22.229%20L0.375,20.883%20L0.511,19.64%20L0.668,18.482%20L0.845,17.395%20L1.044,16.369%20L1.265,15.397%20L1.506,14.474%20L1.769,13.594%20L2.054,12.755%20L2.36,11.953%20L2.688,11.186%20L3.038,10.453%20L3.411,9.75%20L3.806,9.078%20L4.224,8.435%20L4.665,7.819%20L5.129,7.23%20L5.617,6.667%20L6.13,6.13%20L6.667,5.617%20L7.23,5.129%20L7.819,4.665%20L8.435,4.224%20L9.078,3.806%20L9.75,3.411%20L10.453,3.038%20L11.186,2.688%20L11.953,2.36%20L12.755,2.054%20L13.594,1.769%20L14.474,1.506%20L15.397,1.265%20L16.369,1.044%20L17.395,0.845%20L18.482,0.668%20L19.64,0.511%20L20.883,0.375%20L22.229,0.26%20L23.708,0.167%20L25.369,0.094%20L27.308,0.042%20L29.765,0.01%20L35,0%20Z%27%20fill=%27%23000%27/%3E%3C/svg%3E") 35 fill stretch; --eckbreite-bogen: 35px; --eckform-tafel: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27128%27%20height=%27128%27%20viewBox=%270%200%20128%20128%27%3E%3Cpath%20d=%27M32,0%20L96,0%20L100.787,0.01%20L103.033,0.038%20L104.806,0.086%20L106.325,0.152%20L107.677,0.238%20L108.907,0.343%20L110.043,0.467%20L111.102,0.61%20L112.096,0.773%20L113.034,0.955%20L113.923,1.156%20L114.767,1.377%20L115.571,1.617%20L116.339,1.878%20L117.072,2.158%20L117.773,2.458%20L118.443,2.778%20L119.085,3.118%20L119.7,3.48%20L120.288,3.862%20L120.851,4.265%20L121.39,4.689%20L121.904,5.136%20L122.396,5.604%20L122.864,6.096%20L123.311,6.61%20L123.735,7.149%20L124.138,7.712%20L124.52,8.3%20L124.882,8.915%20L125.222,9.557%20L125.542,10.227%20L125.842,10.928%20L126.122,11.661%20L126.383,12.429%20L126.623,13.233%20L126.844,14.077%20L127.045,14.966%20L127.227,15.904%20L127.39,16.898%20L127.533,17.957%20L127.657,19.093%20L127.762,20.323%20L127.848,21.675%20L127.914,23.194%20L127.962,24.967%20L127.99,27.213%20L128,32%20L128,96%20L127.99,100.787%20L127.962,103.033%20L127.914,104.806%20L127.848,106.325%20L127.762,107.677%20L127.657,108.907%20L127.533,110.043%20L127.39,111.102%20L127.227,112.096%20L127.045,113.034%20L126.844,113.923%20L126.623,114.767%20L126.383,115.571%20L126.122,116.339%20L125.842,117.072%20L125.542,117.773%20L125.222,118.443%20L124.882,119.085%20L124.52,119.7%20L124.138,120.288%20L123.735,120.851%20L123.311,121.39%20L122.864,121.904%20L122.396,122.396%20L121.904,122.864%20L121.39,123.311%20L120.851,123.735%20L120.288,124.138%20L119.7,124.52%20L119.085,124.882%20L118.443,125.222%20L117.773,125.542%20L117.072,125.842%20L116.339,126.122%20L115.571,126.383%20L114.767,126.623%20L113.923,126.844%20L113.034,127.045%20L112.096,127.227%20L111.102,127.39%20L110.043,127.533%20L108.907,127.657%20L107.677,127.762%20L106.325,127.848%20L104.806,127.914%20L103.033,127.962%20L100.787,127.99%20L96,128%20L32,128%20L27.213,127.99%20L24.967,127.962%20L23.194,127.914%20L21.675,127.848%20L20.323,127.762%20L19.093,127.657%20L17.957,127.533%20L16.898,127.39%20L15.904,127.227%20L14.966,127.045%20L14.077,126.844%20L13.233,126.623%20L12.429,126.383%20L11.661,126.122%20L10.928,125.842%20L10.227,125.542%20L9.557,125.222%20L8.915,124.882%20L8.3,124.52%20L7.712,124.138%20L7.149,123.735%20L6.61,123.311%20L6.096,122.864%20L5.604,122.396%20L5.136,121.904%20L4.689,121.39%20L4.265,120.851%20L3.862,120.288%20L3.48,119.7%20L3.118,119.085%20L2.778,118.443%20L2.458,117.773%20L2.158,117.072%20L1.878,116.339%20L1.617,115.571%20L1.377,114.767%20L1.156,113.923%20L0.955,113.034%20L0.773,112.096%20L0.61,111.102%20L0.467,110.043%20L0.343,108.907%20L0.238,107.677%20L0.152,106.325%20L0.086,104.806%20L0.038,103.033%20L0.01,100.787%20L0,96%20L0,32%20L0.01,27.213%20L0.038,24.967%20L0.086,23.194%20L0.152,21.675%20L0.238,20.323%20L0.343,19.093%20L0.467,17.957%20L0.61,16.898%20L0.773,15.904%20L0.955,14.966%20L1.156,14.077%20L1.377,13.233%20L1.617,12.429%20L1.878,11.661%20L2.158,10.928%20L2.458,10.227%20L2.778,9.557%20L3.118,8.915%20L3.48,8.3%20L3.862,7.712%20L4.265,7.149%20L4.689,6.61%20L5.136,6.096%20L5.604,5.604%20L6.096,5.136%20L6.61,4.689%20L7.149,4.265%20L7.712,3.862%20L8.3,3.48%20L8.915,3.118%20L9.557,2.778%20L10.227,2.458%20L10.928,2.158%20L11.661,1.878%20L12.429,1.617%20L13.233,1.377%20L14.077,1.156%20L14.966,0.955%20L15.904,0.773%20L16.898,0.61%20L17.957,0.467%20L19.093,0.343%20L20.323,0.238%20L21.675,0.152%20L23.194,0.086%20L24.967,0.038%20L27.213,0.01%20L32,0%20Z%27%20fill=%27%23000%27/%3E%3C/svg%3E") 32 fill stretch; --eckbreite-tafel: 32px; --eckform-feld: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2776%27%20height=%2776%27%20viewBox=%270%200%2076%2076%27%3E%3Cpath%20d=%27M19,0%20L57,0%20L59.842,0.006%20L61.176,0.023%20L62.228,0.051%20L63.13,0.09%20L63.933,0.141%20L64.664,0.204%20L65.338,0.277%20L65.967,0.362%20L66.557,0.459%20L67.114,0.567%20L67.642,0.686%20L68.143,0.818%20L68.62,0.96%20L69.076,1.115%20L69.511,1.281%20L69.928,1.459%20L70.326,1.649%20L70.707,1.852%20L71.072,2.066%20L71.421,2.293%20L71.755,2.532%20L72.075,2.784%20L72.381,3.049%20L72.672,3.328%20L72.951,3.619%20L73.216,3.925%20L73.468,4.245%20L73.707,4.579%20L73.934,4.928%20L74.148,5.293%20L74.351,5.674%20L74.541,6.072%20L74.719,6.489%20L74.885,6.924%20L75.04,7.38%20L75.182,7.857%20L75.314,8.358%20L75.433,8.886%20L75.541,9.443%20L75.638,10.033%20L75.723,10.662%20L75.796,11.336%20L75.859,12.067%20L75.91,12.87%20L75.949,13.772%20L75.977,14.824%20L75.994,16.158%20L76,19%20L76,57%20L75.994,59.842%20L75.977,61.176%20L75.949,62.228%20L75.91,63.13%20L75.859,63.933%20L75.796,64.664%20L75.723,65.338%20L75.638,65.967%20L75.541,66.557%20L75.433,67.114%20L75.314,67.642%20L75.182,68.143%20L75.04,68.62%20L74.885,69.076%20L74.719,69.511%20L74.541,69.928%20L74.351,70.326%20L74.148,70.707%20L73.934,71.072%20L73.707,71.421%20L73.468,71.755%20L73.216,72.075%20L72.951,72.381%20L72.672,72.672%20L72.381,72.951%20L72.075,73.216%20L71.755,73.468%20L71.421,73.707%20L71.072,73.934%20L70.707,74.148%20L70.326,74.351%20L69.928,74.541%20L69.511,74.719%20L69.076,74.885%20L68.62,75.04%20L68.143,75.182%20L67.642,75.314%20L67.114,75.433%20L66.557,75.541%20L65.967,75.638%20L65.338,75.723%20L64.664,75.796%20L63.933,75.859%20L63.13,75.91%20L62.228,75.949%20L61.176,75.977%20L59.842,75.994%20L57,76%20L19,76%20L16.158,75.994%20L14.824,75.977%20L13.772,75.949%20L12.87,75.91%20L12.067,75.859%20L11.336,75.796%20L10.662,75.723%20L10.033,75.638%20L9.443,75.541%20L8.886,75.433%20L8.358,75.314%20L7.857,75.182%20L7.38,75.04%20L6.924,74.885%20L6.489,74.719%20L6.072,74.541%20L5.674,74.351%20L5.293,74.148%20L4.928,73.934%20L4.579,73.707%20L4.245,73.468%20L3.925,73.216%20L3.619,72.951%20L3.328,72.672%20L3.049,72.381%20L2.784,72.075%20L2.532,71.755%20L2.293,71.421%20L2.066,71.072%20L1.852,70.707%20L1.649,70.326%20L1.459,69.928%20L1.281,69.511%20L1.115,69.076%20L0.96,68.62%20L0.818,68.143%20L0.686,67.642%20L0.567,67.114%20L0.459,66.557%20L0.362,65.967%20L0.277,65.338%20L0.204,64.664%20L0.141,63.933%20L0.09,63.13%20L0.051,62.228%20L0.023,61.176%20L0.006,59.842%20L0,57%20L0,19%20L0.006,16.158%20L0.023,14.824%20L0.051,13.772%20L0.09,12.87%20L0.141,12.067%20L0.204,11.336%20L0.277,10.662%20L0.362,10.033%20L0.459,9.443%20L0.567,8.886%20L0.686,8.358%20L0.818,7.857%20L0.96,7.38%20L1.115,6.924%20L1.281,6.489%20L1.459,6.072%20L1.649,5.674%20L1.852,5.293%20L2.066,4.928%20L2.293,4.579%20L2.532,4.245%20L2.784,3.925%20L3.049,3.619%20L3.328,3.328%20L3.619,3.049%20L3.925,2.784%20L4.245,2.532%20L4.579,2.293%20L4.928,2.066%20L5.293,1.852%20L5.674,1.649%20L6.072,1.459%20L6.489,1.281%20L6.924,1.115%20L7.38,0.96%20L7.857,0.818%20L8.358,0.686%20L8.886,0.567%20L9.443,0.459%20L10.033,0.362%20L10.662,0.277%20L11.336,0.204%20L12.067,0.141%20L12.87,0.09%20L13.772,0.051%20L14.824,0.023%20L16.158,0.006%20L19,0%20Z%27%20fill=%27%23000%27/%3E%3C/svg%3E") 19 fill stretch; --eckbreite-feld: 19px; --eckform-signet: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2736%27%20height=%2736%27%20viewBox=%270%200%2036%2036%27%3E%3Cpath%20d=%27M9,0%20L27,0%20L28.346,0.003%20L28.978,0.011%20L29.477,0.024%20L29.904,0.043%20L30.284,0.067%20L30.63,0.096%20L30.95,0.131%20L31.247,0.172%20L31.527,0.217%20L31.791,0.269%20L32.041,0.325%20L32.278,0.387%20L32.504,0.455%20L32.72,0.528%20L32.926,0.607%20L33.124,0.691%20L33.312,0.781%20L33.493,0.877%20L33.666,0.979%20L33.831,1.086%20L33.989,1.199%20L34.141,1.319%20L34.286,1.444%20L34.424,1.576%20L34.556,1.714%20L34.681,1.859%20L34.801,2.011%20L34.914,2.169%20L35.021,2.334%20L35.123,2.507%20L35.219,2.688%20L35.309,2.876%20L35.393,3.074%20L35.472,3.28%20L35.545,3.496%20L35.613,3.722%20L35.675,3.959%20L35.731,4.209%20L35.783,4.473%20L35.828,4.753%20L35.869,5.05%20L35.904,5.37%20L35.933,5.716%20L35.957,6.096%20L35.976,6.523%20L35.989,7.022%20L35.997,7.654%20L36,9%20L36,27%20L35.997,28.346%20L35.989,28.978%20L35.976,29.477%20L35.957,29.904%20L35.933,30.284%20L35.904,30.63%20L35.869,30.95%20L35.828,31.247%20L35.783,31.527%20L35.731,31.791%20L35.675,32.041%20L35.613,32.278%20L35.545,32.504%20L35.472,32.72%20L35.393,32.926%20L35.309,33.124%20L35.219,33.312%20L35.123,33.493%20L35.021,33.666%20L34.914,33.831%20L34.801,33.989%20L34.681,34.141%20L34.556,34.286%20L34.424,34.424%20L34.286,34.556%20L34.141,34.681%20L33.989,34.801%20L33.831,34.914%20L33.666,35.021%20L33.493,35.123%20L33.312,35.219%20L33.124,35.309%20L32.926,35.393%20L32.72,35.472%20L32.504,35.545%20L32.278,35.613%20L32.041,35.675%20L31.791,35.731%20L31.527,35.783%20L31.247,35.828%20L30.95,35.869%20L30.63,35.904%20L30.284,35.933%20L29.904,35.957%20L29.477,35.976%20L28.978,35.989%20L28.346,35.997%20L27,36%20L9,36%20L7.654,35.997%20L7.022,35.989%20L6.523,35.976%20L6.096,35.957%20L5.716,35.933%20L5.37,35.904%20L5.05,35.869%20L4.753,35.828%20L4.473,35.783%20L4.209,35.731%20L3.959,35.675%20L3.722,35.613%20L3.496,35.545%20L3.28,35.472%20L3.074,35.393%20L2.876,35.309%20L2.688,35.219%20L2.507,35.123%20L2.334,35.021%20L2.169,34.914%20L2.011,34.801%20L1.859,34.681%20L1.714,34.556%20L1.576,34.424%20L1.444,34.286%20L1.319,34.141%20L1.199,33.989%20L1.086,33.831%20L0.979,33.666%20L0.877,33.493%20L0.781,33.312%20L0.691,33.124%20L0.607,32.926%20L0.528,32.72%20L0.455,32.504%20L0.387,32.278%20L0.325,32.041%20L0.269,31.791%20L0.217,31.527%20L0.172,31.247%20L0.131,30.95%20L0.096,30.63%20L0.067,30.284%20L0.043,29.904%20L0.024,29.477%20L0.011,28.978%20L0.003,28.346%20L0,27%20L0,9%20L0.003,7.654%20L0.011,7.022%20L0.024,6.523%20L0.043,6.096%20L0.067,5.716%20L0.096,5.37%20L0.131,5.05%20L0.172,4.753%20L0.217,4.473%20L0.269,4.209%20L0.325,3.959%20L0.387,3.722%20L0.455,3.496%20L0.528,3.28%20L0.607,3.074%20L0.691,2.876%20L0.781,2.688%20L0.877,2.507%20L0.979,2.334%20L1.086,2.169%20L1.199,2.011%20L1.319,1.859%20L1.444,1.714%20L1.576,1.576%20L1.714,1.444%20L1.859,1.319%20L2.011,1.199%20L2.169,1.086%20L2.334,0.979%20L2.507,0.877%20L2.688,0.781%20L2.876,0.691%20L3.074,0.607%20L3.28,0.528%20L3.496,0.455%20L3.722,0.387%20L3.959,0.325%20L4.209,0.269%20L4.473,0.217%20L4.753,0.172%20L5.05,0.131%20L5.37,0.096%20L5.716,0.067%20L6.096,0.043%20L6.523,0.024%20L7.022,0.011%20L7.654,0.003%20L9,0%20Z%27%20fill=%27%23000%27/%3E%3C/svg%3E") 9 fill stretch; --eckbreite-signet: 9px; } /* * DER DUNKELSATZ, ZWEIMAL AUS DERSELBEN LISTE. * * Er muss zweimal dastehen, weil die beiden Faelle verschieden sind: das * Geraet steht dunkel (prefers-color-scheme) oder jemand hat unter 'Mehr' * ausdruecklich Dunkel gewaehlt (data-theme). Beide Bloecke kommen jetzt * aus derselben Quelle und koennen nicht mehr auseinanderlaufen. * * Dass das kein erfundener Fall ist, steht im Bestand: der data-theme-Block * hatte drei Glastoken nicht, die der andere hatte. Folge war dunkle Karte * mit weissem Glas, und die leise Schrift stand dann bei 1,76:1. */ /* * Palette, dunkel. Der Regelfall, weil die App in der U-Bahn benutzt wird. * * Schrift auf Flaeche 14,95 | Grund 17,28 | Flaeche-2 12,89 | Flaeche-3 10,86 * Schrift-2 auf Flaeche 8,52 | Flaeche-2 7,35 * Schrift-3 auf Flaeche 6,32 | Flaeche-2 5,45 * Grund auf Schrift 17,28 * Warn-Schrift auf Flaeche-2 4,74 | Bus-Schrift auf Bus 4,86 * Kontur auf Flaeche 5,34 Kontur-Feld auf Flaeche 3,26 * Akzent-kontrast auf Flaeche 11,43 | Fokus auf Flaeche 11,43 | Grund 13,21 * Ruhig auf Flaeche 8,14 | Warn auf Flaeche 3,31 * * Suchzeile, dunkel: Schrift-2 auf Flaeche-2 7,35 | Schrift-3 auf Flaeche-2 * 5,45 | Kontur-Feld auf Flaeche-2 2,81, auf Flaeche 3,26 (Max-Regel, siehe * Hellsatz) | gedrueckt gegen Flaeche-3 2,37, gegen Flaeche weiter 3,26. * Grund auf Schrift 17,28 fuer den Meldeknopf mit Wort. * * Tafel ueber Kartenkachel, dunkel: --kontur #8d949d traegt gegen alle neun * Kartenflaechen, schlechtester Wert 3,69 (Strasse), bester 5,91 (Grund). * Unter den dunklen Linienfarben S2, S3, U4 und U1 faellt sie auf 2,7 bis 2,9; * dieselbe Begruendung wie hell, eine Linie belegt keine Kante. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grund: #0e1116; --flaeche: #1b2028; --flaeche-2: #242c36; --flaeche-3: #2f3843; --kontur: #8d949d; --kontur-feld: #68707a; --linie: #2b323c; --rand: #333c47; --rand-leise: #262e38; --rand-stark: #8d949d; --schrift: #f2f5f8; --schrift-2: #b3bcc7; --schrift-3: #98a2ae; --schrift-leise: #b3bcc7; --karte-grund: #101622; --karte-wasser: #0c2a47; --karte-grenze: #29303f; --karte-station: #ffffff; --karte-station-rand: #070a11; --karte-schrift: #c8d0da; --karte-schrift-stark: #f2f5f8; --akzent-kontrast: #ffd400; --warn-schrift: #ff5f5f; --ruhig: #3ecf82; --standort: #4aa8ff; --fokus: #ffd400; /* Dunkelsatz derselben Quelle, RISIKO_STUFEN.dunkel. */ --risiko-keine: #00d67f; --risiko-gering: #ffd23f; --risiko-erhoeht: #ff8a3d; --risiko-hoch: #ff3b30; --kapsel-saum: rgb(255 255 255 / 0.42); --abdunkler: rgb(0 0 0 / 0.42); --schatten-tafel: 0 1px 2px rgb(0 0 0 / 0.40), 0 16px 36px -16px rgb(0 0 0 / 0.66); --schatten-druck: 0 1px 1px rgb(0 0 0 / 0.45); --schatten-auflage: 0 1px 2px rgb(0 0 0 / 0.50); /* * DIESE DREI FEHLTEN HIER. Der Block darueber (prefers-color-scheme) hatte * sie, dieser nicht, und dieser gilt genau dann, wenn jemand unter "Mehr" * ausdruecklich "Dunkel" waehlt, waehrend das Geraet hell steht. Folge: * dunkle Karte, aber weisses Glas auf allen drei Tafeln. Gemessen stand die * leise Schrift (--schrift-3 dunkel, #98a2ae) dann auf einem effektiven * Untergrund von #d4d6d9 und erreichte 1,76:1 statt der geforderten 4,5:1. * Der Fehler ist aelter als der Umbau der Zonen. Betroffen sind jetzt vier * Flaechen: die beiden Tafeln und die beiden freistehenden Kreise. * * DER MELDEKNOPF IM DUNKELN, dritte Fassung. Die Kette ist es wert, ganz * dazustehen, weil jede Stufe eine Zahl hatte: * * 1. Tinte #f2f5f8 als Fuellung. 16,55:1 gegen den Kartengrund und 15,25:1 * gegen die Glastafel daneben, waehrend jede andere Flaeche der * Oberflaeche bei 1,08 bis 1,52:1 liegt. In einer dunklen Bahn war der * Knopf damit das hellste Objekt des Bildschirms, in einer App, deren * Bedienlage "will nicht auffallen" lautet. * 2. #56657c aus der Grau-Blau-Rampe. 3,06:1 gegen den Kartengrund, hielt * also 1.4.11, und nahm dem Knopf die Leuchtkraft (Faktor 5,4). * 3. Jetzt #ff3b30, PALETTE.dunkel.signal aus js/kartenstil.js. Der * Auftraggeber will den Knopf rot und praesenter, und die Wahl faellt * bewusst auf den Ton der Meldungspunkte statt auf ein eigenes Rot, * damit Rot in dieser App eine einzige Bedeutung behaelt. * * Gemessen fuer Stufe 3, gegen alle Kartenflaechen: * Gruen 3,52 | Wasser 4,12 | Gebaeude 4,50 | Platz 4,88 | Grund 5,17 * Tinte #10141a darauf 5,21:1 (WCAG 1.4.3, Ziel 4,5) * Weiss darauf waere 3,55:1 und faellt damit durch; deshalb traegt der Knopf * im Dunkelsatz dunkle Schrift und im Hellsatz weisse. Das ist kein * Versehen, sondern folgt der Leuchtdichte der beiden Rottoene. * * Der Einwand aus Stufe 1 gilt weiter und wird beantwortet: 5,17:1 gegen den * Kartengrund ist ein Drittel der 16,55 von damals. Der Knopf faellt auf, er * blendet nicht. */ --melden-flaeche: #ff3b30; --melden-schrift: #10141a; --glas: rgb(27 32 40 / 0.82); /* * Auf dunklem Glas ist die Lichtkante schwaecher, sonst liest sie sich als * Leuchtstreifen statt als Kante. */ --glas-kante: inset 0 1px 0 rgb(255 255 255 / 0.10); --glas-filter: blur(20px) saturate(160%); /* * Dunkelsatz des Randbandes und des Glanzes. Drei Unterschiede, jeder mit * Grund: die Saettigung faellt (220 statt 300 Prozent), weil ein dunkler * Kartengrund bei 300 Prozent in die Farbe kippt; die Aufhellung steigt * (1,14 statt 1,06), weil an einer dunklen Kante sonst nichts zu sehen waere; * Glanz und Tupfer werden leiser, weil Weiss hier GEGEN die helle Schrift * arbeitet. Nachgerechnet in docs/messung/glas.mjs. */ --glas-rand: rgb(27 32 40 / 0.55); --glas-rand-filter: blur(var(--glas-rand-blur)) saturate(220%) brightness(1.14); --glas-gegenkante: inset 0 -1px 0 rgb(126 174 236 / 0.13); --glanz-spitze: 0.34; --glanz-gegen: 0.10; /* * Kuehler Ton statt Weiss, und 6 statt 26 Prozent. Gerechnet gegen alle zehn * Kartenflaechen und alle zehn Linienfarben: auf der dunklen Scheibe ist Weiss * nach 2,0 Prozent aufgebraucht, #4682dc erst nach 7,0. Genutzt sind 6,0, also * ein Punkt Reserve. */ --tupfer-ton: 70 130 220; --tupfer-spitze: 0.06; --rand-tupfer-spitze: 0.32; --schatten-schwebend: 0 1px 2px rgb(0 0 0 / 0.50), 0 24px 48px -14px rgb(0 0 0 / 0.70); --schatten-weich: rgb(0 0 0 / 0.44); --schatten-hart: rgb(0 0 0 / 0.62); } } :root[data-theme="dark"] { --grund: #0e1116; --flaeche: #1b2028; --flaeche-2: #242c36; --flaeche-3: #2f3843; --kontur: #8d949d; --kontur-feld: #68707a; --linie: #2b323c; --rand: #333c47; --rand-leise: #262e38; --rand-stark: #8d949d; --schrift: #f2f5f8; --schrift-2: #b3bcc7; --schrift-3: #98a2ae; --schrift-leise: #b3bcc7; --karte-grund: #101622; --karte-wasser: #0c2a47; --karte-grenze: #29303f; --karte-station: #ffffff; --karte-station-rand: #070a11; --karte-schrift: #c8d0da; --karte-schrift-stark: #f2f5f8; --akzent-kontrast: #ffd400; --warn-schrift: #ff5f5f; --ruhig: #3ecf82; --standort: #4aa8ff; --fokus: #ffd400; /* Dunkelsatz derselben Quelle, RISIKO_STUFEN.dunkel. */ --risiko-keine: #00d67f; --risiko-gering: #ffd23f; --risiko-erhoeht: #ff8a3d; --risiko-hoch: #ff3b30; --kapsel-saum: rgb(255 255 255 / 0.42); --abdunkler: rgb(0 0 0 / 0.42); --schatten-tafel: 0 1px 2px rgb(0 0 0 / 0.40), 0 16px 36px -16px rgb(0 0 0 / 0.66); --schatten-druck: 0 1px 1px rgb(0 0 0 / 0.45); --schatten-auflage: 0 1px 2px rgb(0 0 0 / 0.50); /* * DIESE DREI FEHLTEN HIER. Der Block darueber (prefers-color-scheme) hatte * sie, dieser nicht, und dieser gilt genau dann, wenn jemand unter "Mehr" * ausdruecklich "Dunkel" waehlt, waehrend das Geraet hell steht. Folge: * dunkle Karte, aber weisses Glas auf allen drei Tafeln. Gemessen stand die * leise Schrift (--schrift-3 dunkel, #98a2ae) dann auf einem effektiven * Untergrund von #d4d6d9 und erreichte 1,76:1 statt der geforderten 4,5:1. * Der Fehler ist aelter als der Umbau der Zonen. Betroffen sind jetzt vier * Flaechen: die beiden Tafeln und die beiden freistehenden Kreise. * * DER MELDEKNOPF IM DUNKELN, dritte Fassung. Die Kette ist es wert, ganz * dazustehen, weil jede Stufe eine Zahl hatte: * * 1. Tinte #f2f5f8 als Fuellung. 16,55:1 gegen den Kartengrund und 15,25:1 * gegen die Glastafel daneben, waehrend jede andere Flaeche der * Oberflaeche bei 1,08 bis 1,52:1 liegt. In einer dunklen Bahn war der * Knopf damit das hellste Objekt des Bildschirms, in einer App, deren * Bedienlage "will nicht auffallen" lautet. * 2. #56657c aus der Grau-Blau-Rampe. 3,06:1 gegen den Kartengrund, hielt * also 1.4.11, und nahm dem Knopf die Leuchtkraft (Faktor 5,4). * 3. Jetzt #ff3b30, PALETTE.dunkel.signal aus js/kartenstil.js. Der * Auftraggeber will den Knopf rot und praesenter, und die Wahl faellt * bewusst auf den Ton der Meldungspunkte statt auf ein eigenes Rot, * damit Rot in dieser App eine einzige Bedeutung behaelt. * * Gemessen fuer Stufe 3, gegen alle Kartenflaechen: * Gruen 3,52 | Wasser 4,12 | Gebaeude 4,50 | Platz 4,88 | Grund 5,17 * Tinte #10141a darauf 5,21:1 (WCAG 1.4.3, Ziel 4,5) * Weiss darauf waere 3,55:1 und faellt damit durch; deshalb traegt der Knopf * im Dunkelsatz dunkle Schrift und im Hellsatz weisse. Das ist kein * Versehen, sondern folgt der Leuchtdichte der beiden Rottoene. * * Der Einwand aus Stufe 1 gilt weiter und wird beantwortet: 5,17:1 gegen den * Kartengrund ist ein Drittel der 16,55 von damals. Der Knopf faellt auf, er * blendet nicht. */ --melden-flaeche: #ff3b30; --melden-schrift: #10141a; --glas: rgb(27 32 40 / 0.82); /* * Auf dunklem Glas ist die Lichtkante schwaecher, sonst liest sie sich als * Leuchtstreifen statt als Kante. */ --glas-kante: inset 0 1px 0 rgb(255 255 255 / 0.10); --glas-filter: blur(20px) saturate(160%); /* * Dunkelsatz des Randbandes und des Glanzes. Drei Unterschiede, jeder mit * Grund: die Saettigung faellt (220 statt 300 Prozent), weil ein dunkler * Kartengrund bei 300 Prozent in die Farbe kippt; die Aufhellung steigt * (1,14 statt 1,06), weil an einer dunklen Kante sonst nichts zu sehen waere; * Glanz und Tupfer werden leiser, weil Weiss hier GEGEN die helle Schrift * arbeitet. Nachgerechnet in docs/messung/glas.mjs. */ --glas-rand: rgb(27 32 40 / 0.55); --glas-rand-filter: blur(var(--glas-rand-blur)) saturate(220%) brightness(1.14); --glas-gegenkante: inset 0 -1px 0 rgb(126 174 236 / 0.13); --glanz-spitze: 0.34; --glanz-gegen: 0.10; /* * Kuehler Ton statt Weiss, und 6 statt 26 Prozent. Gerechnet gegen alle zehn * Kartenflaechen und alle zehn Linienfarben: auf der dunklen Scheibe ist Weiss * nach 2,0 Prozent aufgebraucht, #4682dc erst nach 7,0. Genutzt sind 6,0, also * ein Punkt Reserve. */ --tupfer-ton: 70 130 220; --tupfer-spitze: 0.06; --rand-tupfer-spitze: 0.32; --schatten-schwebend: 0 1px 2px rgb(0 0 0 / 0.50), 0 24px 48px -14px rgb(0 0 0 / 0.70); --schatten-weich: rgb(0 0 0 / 0.44); --schatten-hart: rgb(0 0 0 / 0.62); }