Glas im Hellmodus

Das Auge misst keine absolute Leuchtdichte, es verankert sein Weiss am hellsten grossen Feld im Blick. Nimmt man ringsum zwei Prozent weg, wandert dieser Anker mit, und der unangetastete Kern wird zum neuen Weiss, also zum Licht. Die Umkehr-Vignette steigt an und faellt nach aussen wieder ab, das ist eine Gegenkante im Sinne von Craik-O'Brien-Cornsweet: das Auge fuellt den Bereich innerhalb der Kante auf und liest ihn heller, als er gemessen ist, waehrend der Bildschirmrand fast reines Weiss bleibt und die Seite deshalb nicht angeschmutzt wirkt. Zwei Prozent liegen sicher ueber der Unterschiedsschwelle fuer grosse, weiche Flaechen und trotzdem unter der halben Stufe von --grund zu --panel (8 von 255), damit der Grund nie dunkler wird als eine Karte und die Hierarchie nicht kippt. Der zweite, staerkere Reiz ist geometrisch statt photometrisch: auf Papier erkennt man eine Lampe an der Richtung der Schatten, nicht an der Helligkeit des Papiers, deshalb wandert der Schlagschatten per transform vom Zeiger weg und traegt die Aussage auch dann, wenn der Helligkeitsunterschied im Sonnenlicht untergeht. Die Karte selbst leuchtet nicht, sie kippt: heller zum Zeiger, dunkler zur Gegenseite, Mittelwert bleibt --panel, damit jeder im System gemessene Kontrastwert gueltig bleibt.

Erstens, der Ansatz braucht eine ruhige, ueberwiegend weisse Umgebung. Die Cornsweet-Fuellung bricht an jeder harten Kante ab: ueber Fotos, ueber der Galerie, ueber einem dunklen Panel wird aus dem Raumlicht ein grauer Schleier, der wie Schmutz auf dem Bildschirm aussieht. Die Vignette gehoert deshalb unter die Seite, nicht ueber Bildflaechen. Zweitens, 2,2 % ueber 860 Pixel ist ein Verlauf am unteren Rand dessen, was 8-Bit-sRGB sauber aufloest. Auf guenstigen Panels und in Screenshots ohne Dithering entstehen Baender. Das ist die typische Ausfallart jedes flachen Verlaufs auf Weiss, und es faellt erst auf fremder Hardware auf. Drittens, Umgebungslicht frisst den Effekt. Im Dunkelmodus arbeitet man gegen Schwarz und hat Reserve, hier arbeitet man mit zwei Prozent auf einem spiegelnden Bildschirm bei Tageslicht. Am Fenster bleibt vom Raumlicht nichts uebrig. Nur der wandernde Schlagschatten ueberlebt das, weshalb er im Zweifel wichtiger ist als die Vignette. Viertens, ohne Zeiger existiert nichts davon. Auf Telefonen und Tablets faellt der ganze Ansatz weg, er ist Luxus fuer Desktop. Er darf deshalb nie die einzige Rueckmeldung eines Bauteils sein, sonst hat die Haelfte der Nutzer keinen Hover-Zustand. Fuenftens, er skaliert schlecht in die Breite. Ein Raster aus zwoelf Karten, die alle gleichzeitig ihren Schatten schieben, wirkt nervoes. Es darf immer nur ein Element reagieren, und global bewegt sich nur der Raum. Aus demselben Grund gibt es hier keinen Atem wie im Dunkelmodus: ein pulsierender Schatten auf Weiss sieht nicht nach Licht aus, sondern nach einem Fehler im Renderer. Sechstens, das Ding fotografiert sich schlecht. In einem Standbild sieht die Vignette aus wie eine ungleichmaessige Belichtung, und Design-Abnahmen passieren nun einmal an Screenshots. Wer den Ansatz nicht live bewegt sieht, haelt ihn fuer einen Fehler. Siebtens, zwei technische Fallen, die still versagen: ein transform (auch ein Presse-Effekt) auf .vx-taste oder .vx-signal macht daraus einen eigenen Stapelkontext, und der Halo mit z-index:-1 springt dann VOR die Flaeche. Und @property mit inherits:false erreicht das ::after nicht, der Halo bleibt dann fuer immer unsichtbar, ohne dass irgendwo eine Fehlermeldung steht. Das ist mir beim Bauen genau so passiert. Achtens, backdrop-filter hat auf Weiss fast nichts aufzunehmen. Glas traegt sich hier ueber Kante und Schatten, nicht ueber die Truebung. Wer die Truebung im Hellmodus behaelt, zahlt GPU-Last fuer einen Effekt, den niemand sieht.

Das Licht liegt ausschliesslich in den Hintergrundebenen der Flaeche, nie in einem Pseudo ueber dem Inhalt. Damit kann es die Schrift nicht ueberlaufen, und die Kipp-Bewegung bewegt sich fuer eine Karte zwischen etwa #F0F0F0 (Gegenseite) und #FEFEFE (Zeigerseite): gegen --ink sind das rund 16:1 bis 17,5:1, beide weit ueber jeder Anforderung, und der Mittelwert bleibt --panel, sodass die im System gemessenen Werte gueltig bleiben. Auf der Signaltaste geht es nur in eine Richtung: der Glanz macht die Limette heller, der Kontrast zur dunklen Schrift steigt dabei von 13,9:1 aufwaerts, und die Abdunklung mit --acc-600 sitzt in der Ecke, wo kein Text steht. Eine harte Grenze bleibt: die weisse Zeigerseite darf 95 % nicht ueberschreiten, sonst erreicht die Karte den Grundwert und ihre Kante verschwindet fuer Leute mit schwachem Kontrastsehen genau dort, wo der Zeiger steht. Der Halo der Taste bleibt ausserhalb der Taste und beruehrt keinen Text.

Auf #FFFFFF kann man keine Leuchtdichte mehr addieren, aber die Hierarchie ist im Hellmodus invertiert: die Karte (#F7F7F7) liegt unter dem Grund, und damit entsteht ausgerechnet auf der Flaeche wieder Luft nach oben. Ein weisser Glanzpunkt am Rand liegt also auf dunklerem Material und wird sichtbar, waehrend er nach aussen ins Weiss auslaeuft und die Kontur dort auffrisst, genau wie echtes Streiflicht eine Kante optisch aufloest. Damit der Glanz Halt hat, traegt der Rand ein paar Pixel Kantenmaterial (weiche Verdichtung nach innen), das beim Zeigen nachdunkelt: die Wahrnehmung misst keine absoluten Helligkeiten, sondern lokale Gradienten, und ein heller Streifen direkt neben einem dunkleren wird durch laterale Hemmung (Mach-Band) weit staerker gelesen als der Messwert hergibt. Die Kontaktlinie am Gegenpunkt liefert die zweite Haelfte der Information, weil ein Koerper mit einer Lichtquelle immer beides zeigt, und der Kontaktschatten dreht ueber --leucht-x/--leucht-y mit, sodass alle Koerper der Seite in dieselbe Richtung werfen. Das Raumlicht selbst kehrt sich um und zieht ab statt zuzugeben: am Zeiger bleibt das Papier rein weiss, zu den Raendern nimmt es unter drei Prozent Tinte an, mehr wuerde den Grund unter --panel druecken und die ganze Ordnung kippen.

Der ganze Ansatz haengt an einer Linie von 1,25 px. Auf einem guten Schirm liest er sich praezise, auf einem billigen Buero-TN-Panel, bei Sonne oder mit Nachtlicht-Filter faellt der Glanzpunkt unter die Wahrnehmungsschwelle und die Flaechen wirken einfach flach. Im Dunkelmodus traegt die Fuellung den Effekt mit, hier bleibt nichts uebrig, wenn die Kante ausfaellt. Zweitens: ohne Zeiger passiert gar nichts, also ist auf Touch die komplette Mechanik unsichtbar, der Ruhezustand muss allein tragen (er tut es, aber das ist dann ein anderes Design). Drittens der Massstab: Glanzpunkt und Kontaktlinie lesen sich nur dann als eine Lichtquelle, wenn der Koerper ungefaehr so breit wie hoch ist. Auf einer 1200 px breiten Sektion stehen beide so weit auseinander, dass der Zusammenhang verschwindet und die dunkle Seite als Schmutz auf der Kante wirkt (deshalb ist der Kontaktradius schon auf 0,82 gedrosselt, das lindert es nur). Umgekehrt frisst das Kantenmaterial bei Tasten unter 34 px Hoehe zuviel Flaeche, die Taste wird grauschleierig statt klar. Viertens: das Raumlicht darf nur unter drei Prozent Tinte gehen, sonst wird der Grund in den Ecken dunkler als --panel und Karten verlieren dort ihre Flaechentrennung, sie haengen dann nur noch an der Kontur. Fuenftens Technik: der Ring ist ein mask-composite-Konstrukt (hinter @supports, alte Engines bekommen gar nichts) und kostet pro angefasster Flaeche eine Composite-Ebene, und der Richtungsschatten wird bei jeder Zeigerbewegung neu gemalt, auf einer Seite mit zwanzig grossen Karten kostet das Bilder. Sechstens: bei 1,25x oder 1,5x Skalierung (Windows) rendert die 1-px-Linie ungleichmaessig, der Glanz kann auf einer Seite dicker aussehen. Und die Signaltaste ist der schwaechste Punkt des Ansatzes: Weiss auf Limette sind nur rund 1,3:1, dort kommt das Licht fast ausschliesslich ueber die dunkle Gegenseite. Wer erwartet, dass der Hauptknopf im Hellmodus "leuchtet", wird hier enttaeuscht.

Er ruehrt sie nicht an. Die Flaeche bleibt flach --panel, der Text bleibt --ink, das Verhaeltnis liegt unveraendert bei rund 17:1, es gibt keinen Verlauf und keine Transparenz unter der Schrift. Ring und Kantenmaterial sitzen am Perimeter, sind pointer-events:none und laufen nach innen aus, bevor die Textkante beginnt (Kartenpolster 22/24 px gegen rund 10 px Materialtiefe), Inhalte liegen ueber z-index:1. Das Raumlicht beruehrt nur den Seitengrund, weil Karten deckend darueber liegen, und da es abzieht statt zuzugeben, steigt der Kontrast von Text auf dem blanken Grund leicht an, statt zu fallen. Die einzige echte Vorsicht gilt kleinen Chips, bei denen Schrift naeher als 8 px an die Kante kommt: dort dunkelt das Kantenmaterial den Untergrund minimal nach, was dunkler Schrift hilft und heller Schrift schaden wuerde (im Hellmodus kommt heller Text aber nur auf der Signaltaste vor, und die traegt --ink).

Auf reinem Weiss gibt es null Leuchtdichte nach oben, jede Lichtmechanik muss deshalb als Abdunklung auftreten, und eine Abdunklung auf Weiss liest das Auge nicht als Licht, sondern als Schmutz. Genau das passiert heute live: der Hellmodus-Spot ist rgba(19,19,19,.05) und ergibt 1,112, das Raumlicht 1,062, beides technisch vorhanden und wahrnehmungsseitig wertlos, weil es in die falsche Richtung zeigt. Mit Grund #EFEFEF entstehen 1,150 Spielraum nach oben, und das reicht fuer exakt zwei Stufen von je 1,07: Grund zu Glasflaeche (#EFEFEF nach #F7F7F7 = 1,073) und Glasflaeche zu Spot (#F7F7F7 nach #FFFFFF = 1,071). 1,071 ist rechnerisch dieselbe Stufe, mit der heute schon jede Karte vom Grund getrennt wird, wer also heute die Karte sieht, sieht morgen den Spot. Dazu kommt die Asymmetrie des Hellmodus: nach oben sind 15 Prozent Platz, nach unten fast 100, deshalb traegt der wandernde Schatten mit 1,397 das Dreieinhalbfache des Glanzes, was auch physikalisch stimmt, weil man bei Tag Koerper an ihren Schatten liest und nicht an ihren Lichtern, und weil alle Schatten aus derselben --leucht-Position gerechnet werden, steht im Raum genau eine Lampe statt eines Raumlichts plus davon unabhaengiger Spots wie im Dunkelmodus.

Erstens der Wert aus dem Briefing selbst: #F1F1EF ist zwei Punkte warm und damit genau der Beige-Stich, der am 04.09.2026 rausgeflogen ist ("weg mit diesem unglaublich haesslichen gelb"). Auf einer Flaeche von 100 % der Seite wird der Stich sichtbarer als damals auf Karten. Ich habe #EFEFEF genommen. Wer den Briefing-Wert nimmt, holt das Problem zurueck. Zweitens ist das keine Aenderung an sechs Token, sondern eine Migration. Der Teil im eigenen CSS ist klein, aber alles, was Weiss ANNIMMT, wird zum weissen Rechteck auf grauem Grund: die Stripe-Kasse, eingebettete Instagram- und YouTube-Rahmen, OG-Bilder, Betreiber-Mails, PDF-Ausgaben und der Editor-Bogen in app.html. Beim Editor ist das Ergebnis sogar besser (grauer Schreibtisch, weisser Bogen), bei der Kasse nicht. Drittens der Druck. Browser werfen Hintergrundfarben beim Drucken weg, der Grund ist dann wieder Weiss, die Karten sind Weiss, und die komplette Hierarchie haengt allein an den Haarlinien. Dass ich die dunkler mache, rettet das zur Haelfte, mehr nicht. Viertens verliert die Limette. #A8F517 auf Weiss sind 1,334, auf #EFEFEF nur 1,16, die Signalflaeche hebt sich also 13 % schlechter vom Grund ab als heute. Die Kante ist danach Pflicht, nicht Geschmack. Auf einer Seite, die vom Signalknopf lebt, ist das ein echter Preis. Fuenftens --glas-deck von 72 auf 52: mehr Bild schlaegt durchs Glas. Auf .galcard und den House-Seiten mit Fotos dahinter kann Text auf Glas unter 4,5 fallen. Diese Flaechen brauchen eine deckende Ausnahme, und wer die vergisst, merkt es erst im Audit. Sechstens bleibt der Glanz physikalisch klein. 1,071 ist auf einem gedimmten Laptop im hellen Raum an oder unter der Wahrnehmungsschwelle. Der Effekt haengt am Schatten, nicht am Licht. Wer spaeter die vier Schattenstufen zu einer "aufraeumt", schaltet die Lichtmechanik aus, ohne es zu merken, und im Dunkelmodus faellt das nicht auf, weil es dort andersherum laeuft. Siebtens luegen danach die Token-Namen. --raised ist die dunkelste Flaeche, --panel die hellste, --box liegt unter dem Grund. Schon heute halb falsch, nach dem Umbau ganz. Entweder im selben Zug umbenennen oder eine Migration spaeter zahlen. Achtens der Umschaltmoment. Bestandsnutzer mit data-theme="light" bekommen ueber Nacht eine graue Seite. Das ist keine Feinheit, das sind Meldungen am naechsten Morgen. Neuntens die Rechenlast. --vx-lehn-x/y haengen an :root, also rechnet jede Zeigerbewegung saemtliche box-shadow auf der Seite neu. Bei 20 Karten mit 44px-Blur ruckelt das auf schwacher Hardware. Die Abschaltung greift nur bei hover:none, ein alter Windows-Laptop mit Maus faellt durchs Raster. Zehntens, und das ist der ehrlichste Punkt: dieser Ansatz macht den Hellmodus zu einem eigenen Materialsystem, nicht zu einer Spiegelung. Zwei Systeme heissen doppelte Pflege, und die CI hat sich bisher gerade damit gerettet, dass Hell die Umkehrung war und nicht ein zweites Regelwerk.

Text auf Karten wird besser, Text auf dem Grund schlechter, und der schlechteste Wert des Systems bewegt sich gar nicht. Gerechnet (WCAG 2.1, sRGB): --ink-3 auf der Karte 5,69 auf 6,10 (plus 7 %, weil die Karte von #F7F7F7 auf #FFFFFF geht), auf dem Grund 6,10 auf 5,30 (minus 13 %). Dasselbe Muster bei allen anderen: --ink 18,58/16,16 Grund und 17,34/18,58 Karte, --signal-tx 6,14/5,34 und 5,73/6,14, --danger 6,52/5,67 und 6,08/6,52. Kein Paar faellt unter 4,5, der schlechteste Wert im ganzen System bleibt exakt 5,02 (--ink-3 auf --raised #E9E9E9), weil --raised nicht angefasst wird. Zwei strukturelle Vorteile dazu: erstens ist der Spot nach oben hart gedeckelt, er kann nur bis Weiss gehen und damit niemals Text ueberstrahlen, waehrend im Dunkelmodus ein Spot die Flaeche ueber --panel heben und Kontrast klauen kann. Zweitens wechselt die Signaltaste ihre Schriftfarbe nie mehr, sie bleibt in jedem Zustand --on-signal #131313 bei 13,9:1, weil sie Vollton bleibt statt beim Zeigen durchsichtig zu werden. Die Punkttextur ueberlebt den Umbau ohne Eingriff (1,237 auf 1,228), weil sie alphabasiert ist. Daraus faellt die Migrationsregel: alles Alphabasierte traegt sich beim Grundwechsel selbst mit, alles Hex-basierte muss nachgerechnet werden. Genau deshalb muessen --hair und --edge mit (auf #D5D5D5 und #C1C1C1), sonst verliert die Haarlinie 40 % ihrer Trennkraft, und auf Hell macht die Haarlinie die halbe Ordnung.