/* ========================================================================= APERTURE — Bauteil-Bibliothek Grundlage: exodus/APERTURE-TOKENS.md (gemessene Werte) + exodus/APERTURE-PALETTE.md Handwerk: tzuki/skills/app_designer/SKILL.md Teil 1 (Skala, Raster, Zustände) DAS MATERIALGESETZ — drei Materialien, sonst nichts: 1. PAPIER ist alles. Geprägt, nie flach. Licht kommt von OBEN LINKS. 2. TIEFE erscheint nur, wo das Papier aufgeschnitten ist. Ein Loch, keine Farbfläche. 3. LICHT ist EIN Punkt und sitzt IMMER in der Tiefe, NIE auf dem Papier. Regel 3 ist gerechnet, nicht Geschmack: Gelb auf Papier = 1,4:1, Gelb in der Tiefe = 6,7:1. Wer Gelb aufs Papier legt, zerstört beides. ========================================================================== DIE EINE SONNE — die Regel, an der sich JEDER Schatten dieser Datei misst ========================================================================== Jakob am 01.08.2026 über die Fassung von gestern, wörtlich: „A ist das, was cheap aussieht, WEIL es rundherum diesen Schlagschatten hat und nicht sozusagen der Schatten aus derselben Richtung kommt." Er hatte recht, und die Ursache war mechanisch: fast jeder Schlagschatten hier stand auf `0 Npx` — also OHNE seitlichen Versatz. Ein Schatten ohne x-Versatz mit grossem Weichzeichner läuft links und rechts gleich weit heraus; das Auge liest ihn als Ring statt als Wurf. Fünfzig Bauteile mit einem Ring-Schatten ergeben eine Fläche ohne Lichtquelle. DIE SONNE STEHT OBEN LINKS, unter 45 Grad. Nachgemessen, nicht gewählt — an `43-card-window.webp` (1677 px breit), 1-px-Abtastung entlang je einer Zeile und einer Spalte durch die Karte: linke Kante x = 212 : 246 von 255 HELL (Lichtkante), kein Schatten obere Kante y = 189 : 249 von 255 HELL (Lichtkante), kein Schatten rechte Kante x = 1461: fällt auf 112, zurück auf Papier bei 1512 → Schatten 51 px WEIT nach rechts untere Kante y = 749 : fällt auf 92, zurück auf Papier bei 798 → Schatten 49 px WEIT nach unten 51 zu 49 ist 1,04 : 1. Der Wurf liegt also auf der Diagonalen, und über und links vom Bauteil ist überhaupt kein Schatten. Dasselbe Bild gibt die Schwerpunktmessung über 24 freigegebene Bilder: die neun mit dem stärksten Signal liegen zwischen 101 und 131 Grad (Mittel 118 Grad, 90 = senkrecht oben, 135 = oben links). Kein einziges Bild zeigt oben RECHTS. DARAUS FOLGEN VIER ZEILEN, die für jedes Bauteil gelten: | Ebene | Lichtkante | Schatten | |-----------|-------------------|---------------------------------| | erhaben | innen oben links | AUSSEN nach unten rechts (x=+y) | | bündig | keine | keiner, nur eine Kontur | | vertieft | innen unten rechts| INNEN von oben links (x=+y) | | Loch/tief | Grat unten rechts | INNEN von oben links, stärker | In CSS heisst das: JEDER weiche `box-shadow` (Weichzeichner ab 3 px) hat einen Versatz, x und y haben dasselbe Vorzeichen, und x liegt zwischen dem 0,4- und dem 1,6-fachen von y. Ein `0 0 Npx`-Schatten ist verboten. Flächenverläufe laufen auf 135deg (CSS-Winkel) — das ist genau „von oben links nach unten rechts". ZWEI AUSNAHMEN, und nur diese zwei. Beide stehen im Code mit der Marke `SONNE:AUSNAHME` und werden vom Gate übersprungen: a) DER LICHTPUNKT. Eine Lichtquelle strahlt in alle Richtungen; ihr Hof MUSS rund sein. Er ist kein Schatten. b) DIE KONTAKTVERDECKUNG. Wo zwei Flächen sich berühren, fehlt dem Streulicht der Weg dazwischen — das ist Umgebungsverdeckung, keine Richtung. Erlaubt nur hauchdünn: Weichzeichner höchstens 2 px. Erzwungen wird die Regel von `tzuki/tests/test_aperture_sonne.py`, das über `scripts/check.sh` bei jedem Commit läuft. ========================================================================== DIE EBENEN — jede Kante, nicht nur die äusserste ========================================================================== Jakob am 01.08.2026, nachdem die Sonne-Regel eingebaut war: „Jetzt hast du diesen Schatteneffekt auch ZU STARK gemacht, zum Beispiel bei dem Knopf unten, da ist er richtig stark. Bei dem Sprechknopf." „DER SCHATTENEFFEKT MUSS JEDE KANTE TREFFEN. Also er sollte eher an der oberen linken Kante leicht sein, und dann an der Knopfkante ist ja das Umgekehrte — da leuchtet Licht drauf, und dann unten an der Kante geht es runter, und an der nächsten Kante geht es wieder hoch." „Es muss nur eine feste Regel sein, dass man JEDES EINZELNE GEBAUTE DING nach der Schatten- und Lichtkonfiguration brieft." Das geht über die Sonne-Regel hinaus. Die Sonne sagt, WOHER das Licht kommt. Die Ebenen sagen, WIE OFT es umschlägt. Bis heute behandelte jedes Bauteil genau EINE Kante — die gegen seinen eigenen Untergrund. Ein Stapel aus drei Bauteilen hatte deshalb einen beleuchteten Rand und innen nichts; das Auge liest so etwas als Klecks, nicht als Objekt. DIE LEITER. Fünf benannte Höhenstufen, jede mit EINER Zahl (`--ap-hoehe`) und EINEM fertigen Schattensatz. Ein Bauteil wählt eine Stufe; es stellt sich seine Schatten nicht mehr selbst zusammen. | Stufe | Name | --ap-hoehe | Satz | |-------|---------|-----------:|----------------------------| | Träger | liegt hoch auf | +2 | --praegung-erhaben-hoch | | Auflage | liegt auf | +1 | --praegung-erhaben | | Fläche | ist der Grund | 0 | keiner | | Senke | eingedrückt | -1 | --praegung-vertieft | | Loch | durchgeschnitten| -2 | --praegung-vertieft-tief | | | | | bzw. --loch-innen/-kante, | | | | | wenn die Tiefe sichtbar ist| DIE REGEL IN EINEM SATZ: An JEDEM Übergang zwischen zwei ineinanderliegenden Bauteilen muss sich die Höhe ändern. Wer höher liegt als sein Untergrund, bekommt die Lichtkante innen oben links und wirft nach unten rechts; wer tiefer liegt, bekommt den Schatten innen oben links und die Lichtkante innen unten rechts. Zwei ineinanderliegende Bauteile derselben Höhe haben keine Kante — und sind damit ein Fehler, kein Sparen. DER SPRECHKNOPF IST DER VORFÜHRFALL. Vier Ebenen, drei Vorzeichenwechsel, genau Jakobs „runter, hoch, runter": .ap-fussleiste +1 Papier liegt auf Licht oben links .ap-mulde -2 ins Papier geschnitten RUNTER → Schatten innen oben links, heller Grat innen unten rechts .ap-sprechknopf +2 sitzt in der Mulde HOCH → Lichtkante oben links auf ihm, Wurf nach unten rechts IN die Mulde .ap-symbol -1 ins Papier geprägt RUNTER → dunkle Rille, heller Lippenrand unten rechts WARUM DIE ZAHL UND NICHT NUR DER SCHATTEN: Ein `box-shadow` sagt einer Maschine nicht, ob er eine Erhebung oder eine Vertiefung meint — das war der ausdrückliche Grund, warum die erste Fassung des Gates nur die Geometrie prüfen konnte. `--ap-hoehe` schreibt die Absicht hin. Damit kann `tzuki/tests/test_aperture_sonne.py` die VERSCHACHTELUNG prüfen: es liest die HTML-Dateien, baut den Elternstapel und meldet jedes Paar, das ineinanderliegt, ohne dass eine Kante entsteht. ========================================================================== DIE DOSIS — abgelesen, nicht gewählt ========================================================================== Jakobs zweiter Satz war „zu stark". Die Stärke stand vorher auf runden Zahlen, die niemand hergeleitet hatte. Sie steht jetzt auf Messungen an `35-speech-button-rest.webp` (1254 px, die freigegebene Vorlage GENAU dieses Bauteils) und `43-card-window.webp`. 35-speech-button-rest, Strahlen vom Mittelpunkt, Helligkeit von 255, Papier = 218. Scheibenradius 315 px; im Produkt ist der Sprechknopf 56 px breit, also Radius 28 px — Massstab 0,0889: oben links (135°) Lichtkante Spitze 250 (+32), DANACH KEIN SCHATTEN oben ( 90°) Lichtkante Spitze 246 (+28) links (180°) Lichtkante Spitze 241 (+23) unten rechts (315°) 104 an der Kante, dann 113·115·130·137·157·171· 179 … 195 … 207 — Papier erst weit draussen In Bauteil-Pixeln umgerechnet ergibt das die Sollkurve des Wurfs: an der Kante 52 % dunkler ← das ist die KONTAKTLINIE, hart 1,4 px 40 % 2,5 px 28 % 3,6 px 22 % 5 px 18 % 9 px 11 % 12,4 px 5 % Die alte Fassung lag bei 2–3 px bei rund 44 % (also die Hälfte zu dunkel) und trug ihren Wurf bis über 20 px hinaus (also 1,6-fach zu weit). Genau das ist „richtig stark". 43-card-window, Fenster 1155 × 264 px, Grundton der Tiefe 76 von 255, von der Schnittkante nach innen: 13 · 29 · 39 · 42 · 52 · 56 · 62 · 66 · 68 · 71 — nach 27 px ist der Schatten praktisch weg. Die Karte ist im Bild 1249 px breit und im Produkt 358 px, Massstab 0,287, also endet der Schlagschatten IN der Tiefe nach rund 8 px. Die alte Rampe lief bis 32 px und war damit rund viermal zu lang — das ist der Grund, warum der 8 px breite blaue Ring um den Sprechknopf durchgehend fast schwarz war. ========================================================================== Namensregel: alle Klassen beginnen mit `ap-`. Zustände als `.ist-*`. ========================================================================= */ /* --- Animierbare Eigenschaften ------------------------------------------- Ohne @property sind Custom Properties für den Browser nur Text und lassen sich nicht animieren — die Blende könnte dann nur springen, nicht öffnen. */ @property --ap-oeffnung { syntax: ""; inherits: true; initial-value: 0px; } @property --ap-drehung { syntax: ""; inherits: true; initial-value: 0deg; } /* DIE HÖHE EINES BAUTEILS — der maschinenlesbare Teil des Ebenengesetzes. `inherits: false` ist hier keine Formsache: Erbte die Höhe nach unten, hätte ein Symbol IN einem Knopf automatisch die Höhe des Knopfes, und weder der Browser noch eine Prüfung könnte „liegt darauf" von „ist dasselbe" trennen. Genau diese Trennung ist der ganze Punkt (siehe DIE EBENEN weiter unten). */ @property --ap-hoehe { syntax: ""; inherits: false; initial-value: 0; } /* IST DAS BAUTEIL EIN KÖRPER? — neu 02.08.2026, und es beantwortet eine Frage, die `--ap-hoehe` NICHT beantworten kann. Die Höhenleiter sagt, WIE TIEF etwas liegt. Sie sagt nichts über die GRÖSSE. Für das Auge ist das aber der Unterschied zwischen einem Objekt und einer Textur: gemessen an den zehn Originalbildern tragen dort die fünf grössten modellierten Körper 46–83 % der modellierten Fläche, im eigenen Musterbogen nur 25–51 % (Messung: `design/exodus/tiefe/TIEFE.md`, Abschnitt 2b). Die Vorlage VERTEILT ihre Tiefe nicht, sie KONZENTRIERT sie. `--ap-koerper: 1` heisst deshalb: dieses Bauteil ist ein tragender Körper, an dem das Auge Tiefe festmacht — und nicht Möblierung. Ein 6-px-Lichtpunkt (`.ap-zeile__signal`) steht auf Stufe −2 wie ein ganzes Kartenfenster; ohne diese zweite Angabe zählt eine Prüfung beides gleich und ist wertlos. Die Eigenschaft wird zur Laufzeit von NICHTS gelesen. Sie steht hier, damit die Regel „höchstens zwei Körper je Bildschirm" an EINER Stelle definiert ist und nicht als abgetippte Klassenliste in einem Test — diese zweite Liste war in diesem Projekt schon mehrfach die Fehlerquelle. */ @property --ap-koerper { syntax: ""; inherits: false; initial-value: 0; } /* Wie stark der überstrahlte Kern eines Lichtpunkts ausgeprägt ist — 0 bei einem winzigen Punkt, 1 bei einem grossen. Wird aus `--punkt-groesse` gerechnet, nicht gesetzt; die Begründung steht bei `--punkt-kern`. */ @property --punkt-kernstaerke { syntax: ""; inherits: true; initial-value: 1; } :root { /* --- Materialien (gemessen, nicht geschätzt) --------------------------- */ --papier: #E8DCCC; --papier-hell: #F0E4D8; /* Lichtkante der Prägung, oben/links */ --papier-dunkel: #D8CCBC; /* Schattenkante der Prägung, unten/rechts */ --tiefe: #204080; --tiefe-rand: #102858; --tiefe-kern: #000818; /* --- DAS LICHT --------------------------------------------------------- DREI Werte statt zwei, und der dritte ist der neue: `--punkt-kern`. Jakob am 01.08.2026: „Der innerste Punkt darf noch ein bisschen weisser sein — je heller etwas leuchtet, desto weisser wird es ja auch." Das ist am Bild nachgemessen und stimmt. 1-px-Ringe um das hellste Pixel des Lichtpunkts, Buntheit als HSV-Sättigung: 13-aperture-light r=0 #FCEDA7 Sättigung 0,34 r=2 #EBC987 Sättigung 0,42 r=4 #D8B07A Sättigung 0,44 ← Gipfel der Buntheit r=8 #A88C70 Sättigung 0,33 21-slit-light r=0 #F5C66B 0,56 · r=2 #DDA454 0,62 ← Gipfel 22-slit-light-upper r=0 #F5BE4F 0,68 · r=2 #DA9A38 0,74 ← Gipfel In ALLEN drei Bildern liegt der Buntheitsgipfel NICHT in der Mitte, sondern in einem Ring darum; die Mitte ist heller UND blasser. Genau so verhält sich eine überstrahlende Lichtquelle. Der bisherige Punkt hatte diesen Kern nicht — er war Vollton plus Hof, und das ist die „zu wenig Nuancen"-Beobachtung. KORRIGIERT 01.08.2026, ABENDS. Jakob über die Fassung von heute Mittag: „Ich sehe jetzt schon, dass DAS WEISS ZU STARK IM KERN ist. ES SIEHT AUS WIE EIN PUNKT — also das Weiss muss sich auch verlaufen, zu dem Rest. Und vielleicht ist es auch zu stark weiss, weil das hier eigentlich einen GELB leuchtenden Punkt haben will." · „Und dieses Weiss in der Mitte hat es nur verschlechtert. Das musst du anders lösen." · „Auch in dem kleinen Bild, wo Tagesgeld steht, sieht man den weissen Punkt schon — das sieht unangenehm aus." Er hat mit der Beobachtung von heute Mittag recht behalten (die Mitte IST heller), aber die Umsetzung war an drei Stellen falsch, und alle drei sind mechanisch: 1. DER WERT WAR ZU WEISS. `#FFF4CE` ist rechnerisch 73 % Weiss, gemischt mit dem Bernstein. Der GEMESSENE Kern im freigegebenen Bild `13-aperture-light` ist `#FCEDA7`, und das sind 52 %. Der Kern steht jetzt auf der gemessenen Zahl statt auf einer gewählten — `color-mix(in srgb, #FFFFFF 52%, var(--licht))` ergibt `#FCE8AF` gegen gemessene `#FCEDA7`, also drei Einheiten von 255 daneben. Zweiter Gewinn: der Kern ist damit KEIN eigener Hexwert mehr. Jede Akzentfarbe bekommt ihren Kern aus ihrer eigenen Farbe, und die Liste `--gruen-kern` / `--warnrot-kern` fällt ersatzlos weg. Ein weisser Kern in einer grünen Lampe war genau die zweite Liste. 2. ER HATTE EINE KANTE. Der alte Verlauf hielt den Kern von 0 bis 13 % als FLÄCHE und sprang dann in einem Schritt auf eine 55-%-Mischung. Eine Fläche mit einem Sprung ist ein zweiter Punkt, kein Ausbrennen. Jetzt sieben Stopps ohne Plateau, und `closest-side` statt der Vorgabe `farthest-corner`: vorher lag der Hof-Anteil ab 71 % ausserhalb des Kreises und wurde weggeschnitten — der Punkt endete mitten im Verlauf, also mit einem Rand. 3. ER SKALIERTE NICHT MIT. In der Listenzeile ist der Punkt 8 px gross. Ein überstrahlter Kern ist aber die Eigenschaft einer AUFGELÖSTEN Lichtquelle; was kleiner ist als das, was das Auge trennt, ist ein heller Fleck und sonst nichts. `--punkt-kernstaerke` rechnet das aus der Grösse: bei 8 px bleiben 17 % Weiss (der Punkt ist dann einfach gelb, gruen oder rot), ab 32 px die gemessenen 52 %. */ --licht: #F8D058; /* die Farbe selbst, Buntheitsgipfel — 6,72:1 */ /* `--licht-hof` steht NICHT mehr hier, sondern unten im gemeinsamen Erklärungskopf: er wird seit dem 02.08.2026 aus `--licht` gerechnet und muss deshalb dort neu aufgelöst werden, wo eine Akzentfarbe gesetzt ist. Stünde er in `:root`, bekäme eine grüne Lampe wieder einen gelben Rand — genau der Fehler vom 01.08. Die Begründung steht bei den Akzentsätzen. */ /* --- DIE AKZENTSÄTZE ---------------------------------------------------- Jakob hat die Reihe vom 31.07. verworfen: „Das Grün, Gelb und Rot leuchten in diesen Quadraten. Das hat nicht funktioniert. Das Grün ist immer noch sehr stark gelblich und das Rot ist immer noch sehr stark gelblich. Du musst schon dann das Leuchten komplett in die Farbe ummünzen." · „Rot wird zu Lachs. Lachs ist nicht cool." · „Dieses minzige Grün, so will ich das nicht." DER KONSTRUKTIONSFEHLER lag nicht im Geschmack, sondern in der Nebenbedingung: die Reihe war in OKLCH bei KONSTANTER Helligkeit und Buntheit gerechnet, damit die Töne „fair vergleichbar" sind. Bei der Helligkeit eines freundlichen Bernsteins KANN Rot nur Lachs werden, und Grün wird zwangsläufig blass. Gleichbehandlung war die falsche Vorgabe: ein Warnrot IST dunkler und satter als ein Bernstein, das ist seine Natur und keine Verzerrung. Neue Nebenbedingung: jede Farbe so satt, wie ihre Aufgabe es verlangt. Was das bringt, in OKLCH-Buntheit C gerechnet: Grün alt #9CEC93 C = 0,143 → neu #3ED16A C = 0,189 (+32 %) Rot alt #FFAE9D C = 0,099 → neu #FF3B21 C = 0,234 (+136 %) Der alte Rot-Wert lag mit C = 0,099 unter dem heutigen Bernstein — er war rechnerisch weniger bunt als Gelb. Das ist „Lachs" in einer Zahl. JEDER SATZ HAT SEINEN EIGENEN HOF. Das ist der zweite Teil von Jakobs Satz („das Leuchten komplett in die Farbe ummünzen"): ein grüner Kern in einem bernsteinfarbenen Hof ist keine grüne Lampe, sondern eine gelbe Lampe mit grünem Fleck. Kontrast auf der Tiefe (#204080), nach WCAG gerechnet — Zahlen und Einordnung stehen vollständig in `exodus/APERTURE-TOKENS.md`: Grün Kern 9,33 · Licht 5,00 · Hof 2,59 Bernstein Kern 9,06 · Licht 6,72 · Hof 5,03 Warnrot Kern 8,43 · Licht 2,80 · Hof 1,61 DAS WARNROT LIEGT UNTER DER SCHWELLE, und das ist nicht wegzurechnen: Rot trägt nur 21 % zur Helligkeit bei, ein satter roter Ton ist auf diesem Blau zwangsläufig dunkel. Getragen wird die Sichtbarkeit vom weissglühenden Kern (8,43:1). Deshalb bekommt Rot zusätzlich ein ZWEITES, farbunabhängiges Merkmal — grösser und langsam pulsierend (`.ap-punkt--warnung`). Ein Nutzer mit Rot-Grün-Schwäche (rund 8 % der Männer) erkennt Rot dann an Grösse und Bewegung, nicht an der Farbe. NACHGEZOGEN 01.08.2026, ABENDS — zwei Sätze von Jakob: „DAS GRÜN IST MIR NOCH NICHT DUNKELGRÜN GENUG. Es sieht noch immer ein bisschen hellminzig aus." · „Wenn das mit dem Rot auf die konventionelle Art und Weise nicht passt, dann mach's halt anders. ES MUSS EINFACH EIN ROTER, LEUCHTENDER PUNKT SEIN, ja — und beim Grün genauso." GRÜN: `#3ED16A` → `#09AC40`. In OKLCH ist das L 0,761 → 0,650, also 15 % dunkler, bei C 0,189 → 0,191. „Minzig" ist nicht der Farbwinkel, sondern das Verhältnis Buntheit zu Helligkeit: es steigt von 0,249 auf 0,294, um 18 %. Ein Ton mit viel Helligkeit und wenig Farbe ist Mint, einer mit derselben Farbe bei weniger Helligkeit ist Grün. Der Farbwinkel bleibt bei 147 Grad und damit weg von 155–165 Grad, wo Grün tatsächlich Richtung Mint kippt. `#09AC40` liegt auf 1,5 % genau am Rand des sRGB-Raums — satter geht bei dieser Helligkeit nicht mehr. Der Hof folgt: `#12963C` → `#048824` (L 0,589 → 0,545, C 0,167 → 0,170). WEITER DUNKELN GEHT, ABER NICHT UNBEGRENZT: bei L = 0,60 fällt der Kontrast gegen die Tiefe unter 3:1, und das ist die Schwelle, die WCAG für grafische Elemente verlangt. `#09AC40` misst 3,32:1 und liegt damit knapp darüber. Wenn Jakob noch dunkler will, ist das die Grenze, an der es begründet werden muss. ROT: `#FF3B21` BLEIBT, und das ist ein Messergebnis, keine Bequemlichkeit. Bei seiner Helligkeit (L = 0,653) ist die maximal mögliche Buntheit im sRGB-Raum C = 0,234 — genau darauf steht der Wert bereits. Satter kann dieses Rot nur werden, indem es dunkler wird, und dunkler leuchtet es weniger. Was sich ändern MUSSTE, war nicht der Farbwert, sondern der weisse Kern darüber (siehe oben). Der Hof geht von `#C01A0E` auf `#C40B01`, also C 0,199 → 0,209 bei gleicher Helligkeit. KONTRAST, EHRLICH: auf der Tiefe misst das neue Grün 3,32:1 statt 5,00:1. Für Text wäre das zu wenig; der Punkt ist ein grafisches Element, und dort verlangt WCAG 3:1 — erfüllt. Das Warnrot bleibt bei 2,80:1 und damit unter jeder Schwelle. Jakob hat das ausdrücklich in Kauf genommen („dann mach's halt anders"). Die Zahl steht hier als HINWEIS, nicht als Sperre; getragen wird die Sichtbarkeit vom Kern und vom zweiten, farbunabhängigen Merkmal (`.ap-punkt--warnung`). Die Kerne `--gruen-kern` und `--warnrot-kern` sind ERSATZLOS WEG. Sie werden aus der jeweiligen Farbe gerechnet (siehe `--punkt-kern`), womit eine grüne Lampe zwangsläufig einen grünen Kern hat, statt dass jemand ihn danebenschreiben muss. */ /* AUCH DIE HÖFE SIND WEG — 02.08.2026. Jakob hat den Fehler an der Ampel-Probe gesehen: „Beim gelben Punkt hast du minimal drumherum eine ORANGENE Kante gemacht. Ist beim grünen Punkt minimal drumherum eine dunkelgrünere Kante? NUN, ICH SEH DIE NUR NICHT. Das gleiche Prinzip musst du dort auch anwenden, damit die vergleichbar aussehen." · „Dann muss er eigentlich DUNKELGRÜN als Kreis, und um den roten Punkt muss auch ein DUNKELROT als Kreis." Er hat recht, und es ist nachgerechnet. Die drei Paare Farbe→Hof standen von Hand nebeneinander und waren dadurch drei verschiedene Schritte (OKLCH, Helligkeit L und Buntheit C): #F8D058 → #F8A808 L ×0,908 C ×1,159 Farbwinkel 90,6 → 74,5 #09AC40 → #048824 L ×0,840 C ×0,892 Farbwinkel 147,1 → 145,0 #FF3B21 → #C40B01 L ×0,793 C ×0,892 Farbwinkel 31,1 → 29,7 Drei Farben, drei Schritte — das ist der Grund, warum die Ränder nicht vergleichbar aussahen. Am Punkt gemessen (1-px-Abtastung quer durch den 8-px-Punkt in der Listenzeile) sah man genau das: der gelbe Rand sprang von #F8D058 auf #F9C746, der grüne nur von #09AC40 auf #069C34 — ein Schritt, den man bei 8 px nicht mehr trennt. JETZT WIRD DER RAND GERECHNET, nicht gesetzt: `--licht-hof` steht weiter unten im gemeinsamen Erklärungskopf und entsteht aus `--licht` selbst. Die beiden Faktoren sind AN DEM EINEN GEMESSENEN PAAR geeicht — dem Bernstein, dessen Werte aus den freigegebenen Bildern stammen: L ×0,908 und C ×1,159. Damit hat jede Farbe denselben Schritt (Punkt zu Rand misst bei allen dreien 1,28–1,31:1 Helligkeitsverhältnis). DER FARBWINKEL BLEIBT, und das ist eine Entscheidung: der Bernstein dreht in der alten Liste um 16 Grad (Gelb → Orange), aber Jakob verlangt ausdrücklich „dunkelgrün" und „dunkelrot" — dieselbe Farbe, dunkler und satter. Eine mitgedrehte Kante hätte aus dem Grün ein Oliv gemacht. Der Bernstein-Rand wandert dadurch von #F8A808 (Orange) auf rund #E2B500 (tiefes Gold). Das ist der Preis, und er ist klein: der gemessene Wert war der HOF EINER LEUCHTENDEN LAMPE, und das Leuchten ist seit dem 02.08. nicht mehr der Standard (siehe DER FLACHE PUNKT unten). GRÜN MINIMAL DUNKLER — 02.08.2026, Jakob: „Ich glaub, das Grün kann noch ein bisschen dunkler oder kontrastreicher, minimal." · „Der Punkt ist zu minzig." `#09AC40` → `#00A83C`: OKLCH-Helligkeit 0,649 → 0,636, und die Buntheit steht mit C = 0,189 exakt auf dem sRGB-Rand dieser Helligkeit (vorher lag sie mit 0,1905 knapp INNERHALB, also 1,5 % unter dem Möglichen). Der Kontrast gegen die Tiefe fällt von 3,32:1 auf 3,16:1 und bleibt damit über den 3:1, die WCAG für grafische Elemente verlangt. Mehr geht nicht: bei L = 0,623 sind es 2,99:1. DIE MINZIGKEIT KAM ABER ÜBERWIEGEND WOANDERS HER, und das gehört dazu: der leuchtende Punkt mischte in seinen Kern 52 % Weiss — aus dem Grün wurde dabei rechnerisch `#89D7A3`, und das IST Mint. Mit dem flachen Punkt fällt dieser Kern ersatzlos weg. Die Farbe selbst war nur der kleinere Teil des Problems. */ --gruen: #00A83C; --warnrot: #FF3B21; --tinte: #1A1A1A; /* 12,9:1 auf Papier — gemessen */ --tinte-hell: #FFFFFF; /* 10,0:1 auf Tiefe — Schrift IM Ausschnitt */ /* ABWEICHUNG VOM TOKEN-BLATT, und zwar bewusst. APERTURE-TOKENS.md nennt für den Nebenrang `#6E6459` und dazu „4,9:1". Nachgerechnet sind es 4,28:1 — das liegt UNTER der Pflichtschwelle 4,5:1, jeder Nebentext wäre damit ein Kontrastfehler. `#665C52` ist derselbe warme Ton, eine Spur dunkler, und misst 4,83:1. Auch die übrigen Kontrastzahlen des Token-Blatts sind gerundet danebe(n): Tinte 12,9 statt 14,6 · Weiss auf Tiefe 10,0 statt 9,4 · Licht auf Papier 1,10 statt 1,40. Am Gesetz ändert das nichts — Gelb auf Papier ist sogar noch schlechter als dort behauptet. Das Token-Blatt gehört korrigiert. */ --tinte-leicht: #665C52; /* Der Schattenton. Kein Grau: Papier wirft einen WARMEN Schatten, ein neutraler Schatten lässt dieselbe Prägung sofort nach Kunststoff aussehen. */ --schatten-0: rgba(60, 45, 30, .07); /* neu 01.08. — der Saum des Wurfs */ --schatten-1: rgba(60, 45, 30, .13); --schatten-2: rgba(60, 45, 30, .20); --schatten-3: rgba(60, 45, 30, .34); /* --- DIE KANTE --------------------------------------------------------- NACHGEMESSEN 01.08.2026 an den freigegebenen Bildern (40-list-row-empty, 41-list-row-signal, 43-card-window), pixelweise über Canvas, Mittelwert der hellsten bzw. dunkelsten 0,5 % der Fläche: Lichtkante Bild #FDF7ED · #FDF8EB · #FDF5E5 → fast Weiss Kontaktlinie Bild #060F18 · #061222 · #081833 → KALT, blauschwarz Dagegen die bisherigen Werte: `--papier-hell` misst gegen das Papier 1,08:1, `--papier-dunkel` 1,17:1 — die Lichtkante ist also praktisch unsichtbar. Der gemessene Bildwert kommt auf 1,26:1, also den rund dreifachen Helligkeitsschritt. DAS ist der mechanische Grund für Jakobs „insgesamt noch ein bisschen dull, es poppt noch nicht" (01.08.) — nicht das Blau (siehe Notiz beim Ausschnitt). Warum zwei zusätzliche Variablen statt geänderter Materialwerte: `--papier-hell`/`--papier-dunkel` sind FLÄCHENtöne (die Wölbung) und dort richtig — eine fast weisse Fläche wäre kein Papier mehr. Was fehlte, ist der Ton der SCHNITTKANTE selbst, und der ist im Streiflicht immer heller als die Fläche. Deshalb hier eigene Kantenwerte. Der Kontaktschatten ist bewusst KALT: direkt unter einem aufliegenden Blatt sieht man kein Streulicht, sondern den blauen Schatten des Umgebungslichts. Warm bleibt nur der weite, weiche Schatten. */ --kante-licht: #FCF6EC; /* gemessen ~#FDF7ED */ --kante-licht-w: rgba(252, 246, 236, .72);/* dieselbe Kante, seitlich schwächer */ --kante-tief: rgba(6, 15, 26, .50); /* die Kontaktlinie, gemessen ~#060F18 */ --kante-tief-w: rgba(6, 15, 26, .22); /* DIE FASE UNTER EINER VERTIEFUNG — zwei Ausklangstufen, neu 02.08.2026 (P2 aus `design/exodus/tiefe/TIEFE.md`). Sie sind kein neuer Farbton, sondern `--kante-licht` in zwei fallenden Deckungen; sie stehen hier als eigene Namen, damit die Reichweite an EINER Stelle nachzulesen ist. Belegt an einer Spalte durch die Mitte von `bilder/orig-zeile.png` (Helligkeit von 255, Papier = 221): 233 → 238 → 228 → 224 → 222 → 221 über 6 px Also: harter heller Ansatz direkt an der Kante, Spitze +17, weicher Ausklang über 6 px. Wir hatten dafür exakt 1 px Vollton und danach nichts. Das ist dieselbe Regel wie oben beim Wurf, nur gespiegelt — scharfer Ansatz, leiser Ausklang. */ --kante-fase-1: rgba(252, 246, 236, .55); --kante-fase-2: rgba(252, 246, 236, .28); /* DIE GEGENKANTE — neu am 02.08.2026, und sie behebt einen echten Fehler. Auf der unteren rechten Seite eines erhabenen Bauteils lag bisher `--papier-dunkel` (#D8CCBC). Nachgemessen am Sprechknopf von `reise/09-erledigt.html` (waagerechter Schnitt durch die Mitte, Helligkeit von 255): … 47 px: 206 · 48: 204 · 49: 200 · 50: 198 · 51: 195 · 52: 192 · 53: 187 · 54: 205 · 55: 205 ← die „dunkle" Kante Die Kante war also HELLER als die Fläche unmittelbar daneben (205 gegen 187) und las sich damit als zweite helle Lippe. Ursache ist die Reihenfolge der Schattenlagen: die harte 2-px-Kante wird ÜBER die weiche Fase gemalt, und die Fase hatte die Fläche schon auf 187 abgedunkelt. Eine Kante mit zwei hellen Seiten ist keine Kante — das ist genau Jakobs Regel vom 02.08. von der anderen Seite gelesen. Der neue Wert ist gegen diese Messung gerechnet und nicht gewählt: er muss unter 187 liegen. `--papier-dunkel` zu 80 % mit dem Schattenton gemischt ergibt rund 173 und damit einen sichtbaren Absatz nach unten. Das FLÄCHENpaar `--papier-hell`/`--papier-dunkel` bleibt unangetastet; das hier ist ein KANTENton, wie `--kante-licht` auch. */ --kante-dunkel: color-mix(in srgb, var(--papier-dunkel) 80%, rgb(60, 45, 30)); /* --- Prägung als fertige Schattensätze --------------------------------- ERFAHRUNG AUS DEM ERSTEN DURCHGANG: Kanten allein reichen nicht. Mit nur einer Licht- und einer Schattenkante sieht die Fläche aus wie ein Rechteck mit Rahmen, nicht wie ein Stück Papier. Was fehlt, ist die WÖLBUNG — eine erhabene Fläche ist oben links minimal heller und unten rechts minimal dunkler als in der Mitte. Deshalb gehört zu jeder Prägung ein Flächenverlauf (`--wölbung-*`), nicht nur ein Schattensatz. VERSTÄRKT 01.08.2026 (Jakob: „die Kanten waren dicker … wie von dreidimensionalen Objekten", „es darf gerne etwas dreidimensionaler sein"). Drei Dinge sind neu, alle drei am Bild abgelesen: 1. Die Lichtkante ist jetzt `--kante-licht` (fast Weiss) statt `--papier-hell` und 2 px statt 1 px dick. 2. Dazu kommt eine weiche FASE: ein Innenschatten mit negativem Streuradius, der nur an der Kante sichtbar wird. Eine harte 2-px- Linie allein sieht aus wie ein Rahmen; erst die Fase daneben macht daraus eine abgerundete Materialkante. 3. Unter dem Bauteil liegt eine KALTE Kontaktlinie (`--kante-tief`). Sie ist im Bild der dunkelste Punkt überhaupt und trägt fast die ganze Räumlichkeit — ein Bauteil ohne sie schwebt nicht, es klebt. AUF DIE EINE SONNE GEZOGEN 01.08.2026 (siehe den Block ganz oben). Drei Änderungen, alle mechanisch und alle mit demselben Grund: 1. Licht- und Schattenkante liefen bisher als ZWEI Schatten (einer für oben, einer für links) mit unterschiedlicher Stärke — die Kante oben war 2 px in `--kante-licht`, die Kante links 1 px in der schwächeren Fassung. Am Bild sind beide gleich hell (obere Kante 249, linke Kante 246 von 255). Jetzt EIN Schatten mit gleichem x und y, der beide Seiten in einem Zug setzt: `inset 2px 2px 0` deckt oben UND links, `inset -2px -2px 0` deckt unten UND rechts. 2. Der Schlagschatten stand auf `0 Npx`, also ohne Seitwärtsversatz — das ist Jakobs „rundherum". Jetzt x = y, weil der Wurf am Bild 51 px nach rechts und 49 px nach unten reicht. 3. Die Kontaktlinie bleibt bei 1 px Weichzeichner (Kontaktverdeckung, siehe Ausnahme b oben) und bekommt trotzdem den Versatz mit. DOSIS ZURÜCKGENOMMEN 01.08.2026, ABENDS. Jakob: „Jetzt hast du diesen Schatteneffekt auch zu stark gemacht … bei dem Sprechknopf." Die Kurve im Block DIE DOSIS ganz oben ist an `35-speech-button-rest.webp` abgelesen; die alte Fassung lag bei 2–3 px etwa doppelt so dunkel und reichte 1,6-mal so weit. Was NICHT zurückgenommen wurde, und zwar ebenfalls nach der Messung: die Lichtkante (dort +32 von 255, also kräftig) und die harte Kontaktlinie (dort 52 % dunkler). Die Vorlage hat einen scharfen Ansatz und einen leisen Ausklang — nicht umgekehrt. P1 · DER WURF WIRD ZUSAMMENGEZOGEN, 02.08.2026. Nicht nach Gefühl, sondern nach der Messung in `design/exodus/tiefe/TIEFE.md`: an 79 baulichen Kanten der zehn Originalbilder ist der Übergang von 90 % auf 10 % des Hubs im Median 9,0 Produkt-px breit und NIE breiter als 11,2. Gemessen am eigenen Bau (`lippentest.py`): Musterbogen 21 px, Morgen-Fläche 26 px — rund das 2,4-fache. Reichweite = Versatz + Weichzeichner, gedeckelt bei 11 px: Auflage 3+5 → 2+4 und 5+10 → 4+6 (Reichweite 15 → 10) Träger 4+7 → 2+4 und 7+13 → 5+6 (Reichweite 20 → 11) Die Staffelung bleibt geometrisch (jede Lage doppelt so weich wie die vorige, Deckung fällt) und bleibt auf der 45-Grad-Diagonalen — Gesetz 5, an den Bildern gemessen mit 51 px rechts zu 49 px unten. WAS NICHT ANGEFASST WURDE: die Innenkanten. Dieselbe Messung hat ausdrücklich WIDERLEGT, dass uns Modellierung fehlt (Hub 73–87 gegen 45–80 der Vorlage, modellierte Fläche 17,7–30,9 % gegen 6,6–17,9 %). Wir haben schon mehr Schatten als die Vorlage — zu weit, nicht zu wenig. Nebenbei ist das der teuerste Teil der Darstellung: die Rechenlast eines Weichzeichners wächst quadratisch mit dem Radius. */ --praegung-erhaben: /* STUFE +1 · Auflage */ inset 1px 1px 0 var(--kante-licht), inset 4px 4px 6px -4px var(--kante-licht), inset -1px -1px 0 var(--kante-dunkel), inset -5px -5px 8px -5px var(--schatten-2), 1px 1px 0 var(--kante-tief-w), 1px 1px 2px var(--schatten-2), 2px 2px 4px var(--schatten-1), 4px 4px 6px var(--schatten-0); /* P1 · Reichweite 4+6 = 10 px */ /* Stärker erhaben — für die Hauptaktion und Karten, die wirklich aufliegen. */ --praegung-erhaben-hoch: /* STUFE +2 · Träger */ inset 2px 2px 0 var(--kante-licht), inset 7px 7px 10px -7px var(--kante-licht), inset -2px -2px 0 var(--kante-dunkel), inset -9px -9px 14px -9px var(--schatten-3), 1.5px 1.5px 0 var(--kante-tief), 1px 1px 2px var(--schatten-2), 2px 2px 4px var(--schatten-1), 5px 5px 6px var(--schatten-0); /* P1 · Reichweite 5+6 = 11 px */ /* Vertieft: exakt umgekehrt. Der Schatten liegt INNEN oben links (das Papier steht dort über), die Lichtkante INNEN unten rechts; nach aussen ein feiner heller Grat, weil die Kante des Lochs Licht fängt. AUCH HIER ZUSAMMENGEZOGEN 01.08.2026: aus `inset 0 3px 5px` plus `inset 3px 0 5px` (zwei Schatten mit ungleicher Stärke) wird EIN `inset 3px 3px 5px`. Der äussere helle Grat wandert von `0 1px 0` auf `1px 1px 0` — bei einem Loch fängt die Kante unten UND rechts das Licht, nicht nur unten. Am Bild nachgemessen, Streifen direkt neben dem Fenster von `43-card-window.webp`: oben 190 · links 196 (dunkel) unten 225 · rechts 225 (hell) Die beiden hellen Werte sind auf 0,1 von 255 gleich — die Diagonale. P2 · DIE FASE WIRD BREIT, 02.08.2026. Bis hierher stand aussen genau `1px 1px 0 var(--kante-licht)` — ein Vollton-Strich und danach sofort Papier. Die Vorlage hat dort 6 px mit Verlauf (Messung siehe `--kante-fase-1` oben). Das ist der zweite belegte Unterschied neben dem zu weiten Wurf, und es ist der, der die „Helligkeit an den richtigen Stellen" trägt: das Papier kippt unterhalb eines Schnitts ZUR Sonne hin und fängt Licht. Ein einzelner Strich kann das nicht, ein Ausklang schon. Reichweite 3+3 = 6 px — genau die gemessene Breite, und damit innerhalb der 11-px-Decke aus P1. */ --praegung-vertieft: /* STUFE -1 · Senke */ inset 3px 3px 5px var(--schatten-3), inset -1px -1px 0 var(--kante-licht), inset -5px -5px 7px -5px var(--kante-licht), 1px 1px 0 var(--kante-licht), 2px 2px 2px var(--kante-fase-1), 3px 3px 3px var(--kante-fase-2); --praegung-vertieft-tief: /* STUFE -2 · Loch im Papier */ inset 5px 5px 9px var(--schatten-3), inset -2px -2px 0 var(--kante-licht), inset -8px -8px 10px -8px var(--kante-licht), 1px 1px 0 var(--kante-licht), 2px 2px 2px var(--kante-fase-1), 3px 3px 3px var(--kante-fase-2), 2px 2px 3px var(--schatten-1); /* Die Wölbung. Licht von oben links heisst: oben links heller, unten rechts dunkler — bei Vertiefungen genau umgekehrt. ANGEZOGEN 01.08.2026 zusammen mit den Kanten: Wenn die Kante deutlich stärker wird, die Fläche aber gleich flach bleibt, sieht das Bauteil aus wie ein Aufkleber mit hellem Rand. Wölbung und Kante gehören zusammen. WINKEL KORRIGIERT 01.08.2026 von 148deg auf 135deg. 148 war geschätzt; 135 ist gerechnet: der Schlagschatten reicht am Bild 51 px nach rechts und 49 px nach unten, das ist die Diagonale, und die Diagonale „von oben links nach unten rechts" ist in CSS-Winkeln genau 135deg. Damit zeigen Wölbung, Kante und Schlagschatten in dieselbe Richtung — vorher lag die Wölbung 13 Grad daneben. */ --woelbung-erhaben: linear-gradient(135deg, color-mix(in srgb, var(--papier-hell) 92%, transparent) 0%, color-mix(in srgb, var(--papier-hell) 34%, transparent) 22%, color-mix(in srgb, var(--papier) 0%, transparent) 52%, color-mix(in srgb, var(--papier-dunkel) 46%, transparent) 82%, color-mix(in srgb, var(--papier-dunkel) 82%, transparent) 100%); --woelbung-vertieft: linear-gradient(135deg, color-mix(in srgb, var(--papier-dunkel) 96%, transparent) 0%, color-mix(in srgb, var(--papier-dunkel) 38%, transparent) 24%, color-mix(in srgb, var(--papier) 0%, transparent) 56%, color-mix(in srgb, var(--papier-hell) 48%, transparent) 84%, color-mix(in srgb, var(--papier-hell) 88%, transparent) 100%); /* --- Der Ausschnitt ----------------------------------------------------- NEU GEBAUT 01.08.2026. Jakobs Urteil über die alte Fassung war eindeutig und kam zweimal: „Dieses blaue Feld sieht aber noch ziemlich cheap aus. Das müssen wir überarbeiten. Das sieht wirklich schlecht aus." ZUERST GEPRÜFT, OB ES AM FARBWERT LIEGT — es liegt NICHT daran. Gemessen (Canvas, pixelweise) am Bauteil, um das es hier geht: 43-card-window.webp Blaufläche im Mittel #1E427E, häufigste Bins #184078 (4,8 %) und #204080 (4,5 %) Der Token `--tiefe: #204080` ist also praktisch exakt das Blau der freigegebenen Karte mit Fenster. Der dunklere Wert #0B397E stammt aus `25-logo-primary` — das ist die MARKENfläche, ein anderes Bauteil mit einer anderen Aufgabe, und kein Beleg gegen diesen Token. Der Farbwert bleibt deshalb unverändert (Weiss darauf: 9,97:1, gerechnet). WORAN ES STATTDESSEN LAG, drei Sachen, alle am Bild abgelesen: 1. GLANZFLECK. Der alte Grund hatte seine hellste Stelle bei 34 %/16 % und lief nach unten rechts ab — das liest das Auge als Spiegelung auf Kunststoff. Die freigegebenen Bilder haben KEINEN Glanz im Blau; sie sind matt und werden nur zum Rand hin dunkler. 2. KEIN SCHLAGSCHATTEN. In `05-paper-cut` ist das Auffälligste am Schnitt der harte dunkle Streifen direkt unter der oberen Papierkante — dort steht das Papier über und wirft in die Tiefe. Genau dieser Streifen macht aus einer Fläche ein Loch. 3. KEINE FASER. Das Blau im Bild hat dieselbe Papierfaser wie das Papier — es ist ja derselbe Karton, nur die Schicht darunter. Eine vollkommen glatte Fläche kann gar nichts anderes sein als Farbe. Alle drei zusammen sind „cheap". */ /* Der Schlagschatten der Schnittkante IN die Tiefe. Oben stark (dort steht die Kante am weitesten über), links schwächer — Licht von oben links. DIE STOPPS SIND GEDECKELT (`min(px, %)`), und das ist kein Feinschliff: Mit reinen Pixelwerten verschluckt derselbe Schatten ein 10-px-Signal komplett — der Punkt am Profilkreis wäre schwarz statt blau. Mit reinen Prozentwerten würde er dagegen an einer hohen Karte über die halbe Fläche laufen. `min()` nimmt je Bauteil den kleineren der beiden. RAMPE NEU GERECHNET 01.08.2026, ABENDS — sie war rund viermal zu lang. Am Fenster von `43-card-window.webp` (1155 × 264 px, Grundton 76 von 255) von der Schnittkante nach innen abgetastet und in Deckkraft zurückgerechnet (Schattenfarbe rgba(0,6,20) hat die Helligkeit 5): 0,9 px .66 · 1,7 px .52 · 2,6 px .48 · 3,4 px .34 · 4,3 px .28 5,2 px .20 · 6,0 px .14 · 6,9 px .11 · 8,6 px .07 · ~12 px 0 (Bildpixel × 0,287, weil die Karte im Bild 1249 px und im Produkt 358 px breit ist.) Die alte Rampe stand bei 7 px noch auf .34 und lief bis 32 px. Deshalb war der 8 px schmale blaue Ring der Sprechknopf-Mulde auf seiner ganzen Breite fast schwarz — Jakobs „richtig stark". Von links ist dieselbe Kurve gemessen (24·33·41·45·46·53·56·59·67 gegen 13·29·39·42·52·56·62·66·68 von oben), die 45-Grad-Sonne bestätigt sich also ein zweites Mal. Beide Rampen sind jetzt gleich lang, die obere nur eine Spur dunkler. */ --loch-schatten: linear-gradient(to bottom, rgba(0, 6, 20, .70) 0, rgba(0, 6, 20, .48) min(2.5px, 8%), rgba(0, 6, 20, .28) min(4.5px, 15%), rgba(0, 6, 20, .12) min(7px, 24%), rgba(0, 6, 20, 0) min(11px, 36%)), linear-gradient(to right, rgba(0, 6, 20, .62) 0, rgba(0, 6, 20, .44) min(2.5px, 8%), rgba(0, 6, 20, .26) min(4.5px, 15%), rgba(0, 6, 20, .11) min(7px, 24%), rgba(0, 6, 20, 0) min(11px, 36%)); /* ANGEGLICHEN 01.08.2026: Der linke Schatten war mit 0,46 gegen 0,78 nur halb so stark wie der obere — bei einer Sonne auf 45 Grad müssten beide fast gleich sein. Im Fenster von `43-card-window.webp` von der Kante nach innen abgetastet (Helligkeit von 255): von oben 9 · 23 · 32 · 34 · 43 · 47 · 53 … von links 20 · 28 · 32 · 39 · 39 · 46 · 44 … von unten 74 · 69 · 65 (kein Schatten, die Wand ist beleuchtet) von rechts 58 · 62 · 60 (dito) Oben ist eine Spur dunkler als links, aber nicht doppelt so dunkel. Deshalb 0,62 statt 0,46 und dieselbe Länge der Rampe wie oben. */ /* Der Grund: MATT. Vollton in der Mitte, zum Rand hin in den Kern hinein. Der Mittelpunkt sitzt leicht unterhalb der Mitte, weil der obere Teil ohnehin vom Schlagschatten verdunkelt wird. Kein Glanzfleck. */ --loch-grund: radial-gradient(128% 148% at 52% 62%, var(--tiefe) 0%, var(--tiefe) 46%, var(--tiefe-rand) 84%, var(--tiefe-kern) 100%); /* Die Faser IM Loch. Der Ausschnitt ist derselbe Karton, nur eine Schicht tiefer — er muss dieselbe Faser haben. ERSTER ANLAUF WAR FALSCH, und der Fehler ist lehrreich: Ich hatte die echte Papiertextur (`--papier-bild-fein`) mit `soft-light` eingerechnet. Am Screenshot war das Blau danach deutlich BLASSER statt reicher — genau das Gegenteil des Ziels. Der Grund ist rechenbar und hätte vorher auffallen müssen: Die Textur ist beige und hat eine mittlere Helligkeit von 216 von 255. `soft-light` hellt gegenüber allem auf, was heller als 50 % ist, also hier flächendeckend. Dasselbe gilt für `overlay` und `hard-light`. Eine helle Textur kann eine dunkle Fläche nicht texturieren, sie kann sie nur aufhellen. Jetzt eine Faser, die um Null herum liegt: gleich viel Licht wie Schatten, unregelmässig verteilt, damit kein Streifenmuster entsteht. Sie verschiebt die Farbe nicht und lässt die Fläche trotzdem eine Oberfläche sein. ACHTUNG, EINE LAGE: `--loch-korn`, `--loch-schatten` (2) und `--loch-grund` (1) ergeben zusammen GENAU VIER Hintergrundlagen. Die Listen für `background-size` und `-repeat` in §3 zählen mit. Wer hier eine Lage ergänzt, muss sie dort ergänzen. ZWEITE KORREKTUR, wieder am Screenshot: 93° sind fast senkrecht, und senkrechte 1-px-Linien fallen mit dem Pixelraster zusammen — daraus wurde sichtbarer Cord statt Faser. Dieselbe Lehre wie beim Papierkorn („der erste war zu laut — man sah Streifen statt Faser"). Jetzt schräg (24°), damit die Kantenglättung die Linien zu einem Sprenkel verwischt, und mit etwa halber Stärke. */ --loch-korn: repeating-linear-gradient(24deg, rgba(255, 255, 255, .022) 0 1px, rgba(0, 0, 0, .030) 1px 2px, transparent 2px 5px, rgba(0, 0, 0, .018) 5px 6px, transparent 6px 8px, rgba(255, 255, 255, .014) 8px 9px, transparent 9px 13px); /* Die Schnittwand. `--tiefe-kern` als scharfer 1-px-Ring ist die Wand selbst; darunter fängt die untere Innenwand Licht (sie zeigt nach oben links) und wird sichtbar heller — ohne diese eine helle Linie kippt das Loch optisch zurück in eine Platte. UMGEBAUT 01.08.2026 — hier standen zwei Verstösse gegen die eine Sonne: ein 1-px-Ring RUNDHERUM (`inset 0 0 0 1px`) und eine Vignette RUNDHERUM (`inset 0 0 16px -3px`). Beide leuchten bzw. verdunkeln auf allen vier Seiten gleich, und genau das liest das Auge als „ohne Lichtquelle". Jetzt ist die Wand geteilt: oben/links die im Schatten liegende Wand, unten/rechts die beleuchtete. Die Vignette ist ersetzt durch eine gerichtete Verschattung aus derselben Ecke. ZURÜCKGENOMMEN 01.08.2026, ABENDS. Die gerichtete Verschattung stand auf `6px 6px 12px -5px` bei .55 — sie verdoppelte damit die Rampe von `--loch-schatten`, die auf denselben ersten Millimetern liegt. Solange jene Rampe zu lang war, fiel es nicht auf; nachdem sie an `43-card-window.webp` neu gerechnet ist, ist die Verdopplung genau der Überschuss. Nachgerechnet gegen dieselbe Messung (Grundton 76, 3 px von der Kante: 42, also Gesamtdeckkraft .48): Rampe allein .44, mit der alten Verschattung .61, mit der neuen .50. Sichtbar wurde der Fehler am schmalsten Loch des Systems — dem 8 px breiten blauen Ring um den Sprechknopf, der dadurch auf seiner ganzen Breite fast schwarz war. */ /* DIESE WERTE SIND AM GROSSEN SCHNITT GEEICHT (43-card-window, 72-px-Mulde) und skalieren über EINEN Faktor: `--loch-mass`. Die drei kleinen Mitglieder des Materialsatzes (Zeilensignal 16 px, Profilsignal 10 px, Markenplatz 32 px) setzen unter §3 nur `--loch-mass: .35` — Herleitung und Messung dort im Block „DER RAND EINES LOCHS SKALIERT NICHT MIT". Bis zum 03.08.2026 standen die 0,35-Werte dort noch einmal als ausgeschriebene Zahlen (die zweite Liste), weil das Sonnen-Gate `tzuki/tests/test_aperture_sonne.py` `calc()` nicht lesen konnte. Das Gate rechnet einfache Faktoren jetzt selbst aus und prüft BEIDE Fassungen (1 und .35); wer hier nacheicht, eicht die kleinen Löcher automatisch mit. */ --loch-mass: 1; } /* WARUM DIESE ZWEI ERKLÄRUNGEN EINE EIGENE SELEKTORLISTE TRAGEN — dieselbe CSS-Feinheit wie beim `--punkt-glanz`-Block weiter unten: Ein `var()` INNERHALB einer eigenen Eigenschaft wird dort aufgelöst, wo diese Eigenschaft ERKLÄRT wird, nicht dort, wo sie benutzt wird. Stünden `--loch-innen`/`--loch-kante` nur in `:root`, würde `var(--loch-mass)` dort gegen den Wurzelwert 1 aufgelöst und das FERTIGE Ergebnis vererbt — die kleinen Signale bekämen den vollen Rand (am gerenderten DOM belegt, 03.08.2026: `getComputedStyle` zeigte 1px/5px statt 0,35px/1,75px). Deshalb stehen die Erklärungen EINMAL, aber auf `:root` UND auf jedem Bauteil mit eigenem Faktor. WER EINEM NEUEN BAUTEIL EINEN EIGENEN `--loch-mass` GIBT, MUSS ES IN DIESE LISTE AUFNEHMEN — sonst gilt sein Faktor still nicht. */ :root, .ap-zeile__signal, .ap-profil__signal, .ap-marke-platz { --loch-innen: inset calc(1px * var(--loch-mass)) calc(1px * var(--loch-mass)) 0 rgba(0, 4, 14, .70), inset calc(5px * var(--loch-mass)) calc(5px * var(--loch-mass)) calc(9px * var(--loch-mass)) calc(-5px * var(--loch-mass)) rgba(0, 4, 14, .28), inset calc(-2px * var(--loch-mass)) calc(-2px * var(--loch-mass)) 0 rgba(108, 142, 208, .50); /* Der Papiergrat rund um den Schnitt: unten der helle Grat (dort fängt die Schnittkante das Licht von oben links), oben ein weicher warmer Schatten auf dem Papier. VERSTÄRKT 01.08.: 2 px statt 1 px und in `--kante-licht` statt `--papier-hell` — im Bild ist dieser Grat der HELLSTE Punkt des ganzen Bauteils, bei uns war er 1,08:1 gegen das Papier und damit gar nicht da. ZUSAMMENGEZOGEN 01.08.2026: aus vier Einzelrichtungen mit ungleicher Stärke werden zwei Diagonalen. Der Grat war unten 2 px und rechts 1 px, der Schatten lief nur nach oben und gar nicht nach links. RICHTUNG DER DRITTEN LAGE KORRIGIERT 03.08.2026 (Backlog 48): sie war `-3px -3px 5px` — der einzige weiche AUSSENschatten der Bibliothek, und er zeigte nach oben links, also AUF die Sonne zu. Das Gate liess ihn durch, weil es nur die Diagonale prüfte (x und y gleiches Vorzeichen), nicht die Himmelsrichtung; seit dem 03.08. prüft es beides. Gedreht ist NUR die Richtung (jetzt von der Sonne weg, nach unten rechts) — Stärke (--schatten-2) und Weichzeichner (5 px) sind unverändert. Ob ein Loch überhaupt einen Aussenschatten tragen soll (die Ebenen-Tabelle im Kopf kennt für ein Loch keinen), ist eine Entscheidung über jede Karte des Baukastens und liegt bei Jakob — hier ist nur die physikalisch unmögliche Richtung behoben. */ --loch-kante: calc(2px * var(--loch-mass)) calc(2px * var(--loch-mass)) 0 var(--kante-licht), calc(-1px * var(--loch-mass)) calc(-1px * var(--loch-mass)) 0 var(--schatten-1), calc(3px * var(--loch-mass)) calc(3px * var(--loch-mass)) calc(5px * var(--loch-mass)) var(--schatten-2); } :root { /* --- Der Lichtpunkt ------------------------------------------------------ NEU GEBAUT 01.08.2026. Jakob: „Der Leuchteffekt der Linse, der muss ein bisschen mehr Nuancen haben. Hier sieht es so, es gibt einen inneren Leuchtpunkt und dann aussen drum herum einen schwächer werdenden. Das sieht noch ein bisschen zu cheap aus." Er beschreibt damit exakt den alten Aufbau: ZWEI Stufen (Vollton + ein Hof) und ein harter 1-px-Ring dazwischen. Am freigegebenen Bild sind es vier Zonen, und die Messung steht oben bei `--punkt-kern`: 1 KERN überstrahlt, fast weiss, die geringste Buntheit 2 GIPFEL der Buntheitsgipfel — hier ist die Farbe zu Hause 3 ABFALL Licht → Hof, die Farbe wird satter und dunkler 4 SAUM ein sehr weiter, sehr schwacher Schein in der Tiefe; er reicht am Bild bis etwa das Fünffache des sichtbaren Punktdurchmessers und hebt das Blau dort messbar an (13-aperture-light: von #1D396C aussen auf #243C6B in der Nähe des Punkts) Der Kern kommt als Flächenverlauf (`--punkt-verlauf`, sitzt IM Punkt), die Zonen 3 und 4 als sechs gestaffelte Schattenlagen statt zwei. SONNE:AUSNAHME (a) — eine Lichtquelle strahlt in alle Richtungen. Der Hof MUSS rund sein und hat deshalb bewusst keinen Versatz. Das ist kein Schatten, und das Gate überspringt diese beiden Eigenschaften. */ --punkt-groesse: 8px; /* Die drei zusammengesetzten Werte stehen NICHT hier, sondern gleich darunter in einem eigenen Block. Der Grund ist ein echter Fehler und steht dort. */ /* --- Papiertextur ------------------------------------------------------ EINHÄNGEPUNKT für das spätere Bild (Codex erzeugt es): :root { --papier-bild: url("assets/papier.webp"); } Mehr ist nicht zu tun. `initial` bedeutet für var() „nicht gesetzt", also greift die Ersatz-Textur darunter — sobald ein Bild da ist, ersetzt es sie vollständig, statt sich mit ihr zu überlagern. */ /* EINGEHÄNGT am 31.07.2026: die erzeugte Textur aus der Aperture-Runde. Gegengeprüft, bevor sie hier steht — 3×3 gekachelt und angesehen: keine sichtbare Naht. Die gemessene Kantendifferenz (5,9) klingt hoch, ist bei einer so feinen, kontrastarmen Faser aber optisch bedeutungslos. Das ist der Grund, warum hier ein BILD und keine Zahl entscheidet. Zum Abschalten: auf `initial` setzen, dann greift die CSS-Ersatztextur. */ /* ACHTUNG, EINE FALLE — gefunden am 01.08.2026, abends. Ein relativer `url()` in einer CUSTOM PROPERTY wird von Chromium gegen die Datei aufgelöst, die die Variable BENUTZT, nicht gegen die, die sie erklärt. Für Seiten neben dieser Datei stimmt der Pfad; für jede Datei in einem Unterordner (`licht/`, `palette/`, `reise/`) zeigt er ins Leere — `licht/assets/papier.webp` gibt es nicht. Die Wirkung ist tückisch, weil nichts kaputtgeht: `background-image` bleibt einfach leer, die Fläche wird glatt, und niemand sieht einen Fehler — man sieht nur schlechteres Papier. Gemeldet haben es zwei Agenten unabhängig voneinander als 404 in der Konsole. Deshalb steht der Pfad ab jetzt in einer NORMALEN Regel (`.ap-papier` weiter unten) und nicht mehr nur in einer Variablen: dort wird er gegen DIESE Datei aufgelöst und stimmt überall. Die Variablen bleiben als Schalter erhalten — wer die Textur abschalten will, setzt sie auf `initial`, dann greift die CSS-Ersatztextur. */ --papier-bild: url("assets/papier.webp"); --papier-bild-fein: url("assets/papier-fein.webp"); --papier-kachel: 380px; /* Kachelgröße auf 390-px-Flächen: knapp unter der Breite, damit die Wiederholung nie mit einer Bauteilkante zusammenfällt und ein Raster ergibt */ /* CSS-Ersatz: zwei grosse weiche Flecken (ungleichmässiges Streiflicht) und zwei sehr feine Streifenraster über Kreuz (die Faser). Bewusst schwach — eine sichtbare Textur wäre ein Muster, keine Oberfläche. ZWEITER ANLAUF: Der erste war zu laut — man sah Streifen statt Faser und einen hellen Fleck oben links statt Streiflicht. Eine Textur, die man als Muster erkennt, ist keine Oberfläche mehr. Jetzt: sehr schwache Faser in zwei Richtungen mit ungleichen Perioden (2 und 5 px, damit kein sichtbares Karo entsteht) und ein einziger, sehr weiter Lichtverlauf. */ --papier-korn: radial-gradient(130% 90% at 12% 0%, color-mix(in srgb, var(--papier-hell) 46%, transparent), transparent 66%), radial-gradient(90% 70% at 96% 100%, color-mix(in srgb, var(--papier-dunkel) 34%, transparent), transparent 70%), repeating-linear-gradient(92deg, color-mix(in srgb, var(--papier-dunkel) 11%, transparent) 0 1px, transparent 1px 5px), repeating-linear-gradient(2deg, color-mix(in srgb, var(--papier-hell) 13%, transparent) 0 1px, transparent 1px 2px); /* --- Typografie -------------------------------------------------------- */ --schrift: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } /* ========================================================================= DIE ZUSAMMENGESETZTEN LICHTWERTE — und warum sie NICHT in :root stehen ========================================================================= HIER LAG EIN ECHTER FEHLER, gefunden am 01.08.2026 am eigenen Screenshot: Ein Feld mit `.ap-licht-gruen` zeigte einen BERNSTEINFARBENEN Punkt. Die Farbproben daneben waren grün, der Punkt nicht. Die Ursache ist eine Feinheit von CSS, die man einmal wissen muss: Ein `var()` INNERHALB einer eigenen Eigenschaft wird dort aufgelöst, wo diese Eigenschaft ERKLÄRT wird — nicht dort, wo sie benutzt wird. Stand `--punkt-glanz` in `:root`, wurde `var(--licht)` darin gegen den Wurzelwert aufgelöst (Bernstein) und der fertige Bernstein-Hof dann nach unten vererbt. Ein Nachkomme, der `--licht` auf Grün stellt, kam zu spät. Genau DAS ist Jakobs Beanstandung vom 01.08. in ihrer technischen Form: „Du musst schon dann das Leuchten komplett in die Farbe ummünzen." Der Kern war umgefärbt, der Hof nicht — nicht aus Nachlässigkeit, sondern weil er gar nicht mehr umgefärbt werden KONNTE. Die Lösung ist der Selektorenkopf unten: dieselbe eine Erklärung gilt für die Wurzel UND für jeden Punkt. Am Punkt wird sie neu aufgelöst und nimmt dort das an, was seine Vorfahren gesetzt haben. Kein zweiter Textblock, also keine zweite Liste. ========================================================================= */ :root, .ap-licht-gruen, .ap-licht-warnung, .ap-punkt, .ap-lichtwerte, .ap-blende-svg { /* ERWEITERT 02.08.2026 um `.ap-licht-gruen` / `.ap-licht-warnung` und `.ap-blende-svg`. Der Grund ist derselbe wie unten und jetzt zwingend, weil auch `--licht-hof` gerechnet wird: Die Akzentklassen sind die Elemente, die `--licht` UMSTELLEN. Wird derselbe Erklärungssatz dort neu aufgelöst, kann kein Nachkomme mehr eine Farbe von der einen und einen Rand von der anderen Lampe bekommen — auch nicht der Punkt IM Vektor, der kein `.ap-punkt` ist und die Werte sonst aus der Wurzel geerbt hätte (`blende.svg` füllt ihn mit `var(--licht-hof, …)`). `--licht-hof` — DER RAND, GERECHNET STATT GESETZT (02.08.2026). Herleitung und die drei alten, auseinandergelaufenen Paare stehen oben bei den Akzentsätzen. Kurz: dieselbe Farbe, 9,2 % dunkler und 15,9 % satter, Farbwinkel unverändert — beide Faktoren am einzigen gemessenen Paar (#F8D058 → #F8A808) geeicht. Liegt das Ergebnis ausserhalb von sRGB, klemmt der Browser die Buntheit; das trifft Grün und Rot, die ohnehin am Rand liegen, und ist die ehrlichere Antwort als ein von Hand nachgebesserter Wert. */ --licht-hof: oklch(from var(--licht) calc(l * 0.908) calc(c * 1.159) h); /* `.ap-lichtwerte` ist der dritte Ort, an dem dieselbe eine Erklärung neu aufgelöst werden muss: eine Farbprobe, die den KERN zeigen soll, ist selbst kein Punkt. Ohne diesen Selektor zeigte die Belegseite drei bernsteinfarbene Kernproben neben einem grünen und einem roten Punkt — derselbe Fehler wie am 01.08. mittags, nur eine Ebene weiter aussen. Ein zweiter Textblock wäre wieder die zweite Liste. */ /* Wie stark der Kern ausbrennt, aus der GRÖSSE gerechnet. 0 bei 6 px und kleiner, 1 ab 32 px. Die Division zweier Längen ergibt in CSS eine reine Zahl; in Chromium nachgemessen (8 px → 0,0769 · 40 px → 1). */ --punkt-kernstaerke: clamp(0, calc((var(--punkt-groesse) - 6px) / 26px), 1); /* Der Kern — GERECHNET, nicht gesetzt. 52 % Weiss ist der am Bild `13-aperture-light` gemessene Wert (dort `#FCEDA7`, hier `#FCE8AF`); bei einem winzigen Punkt bleiben davon 17 %, und dann ist er einfach gelb, grün oder rot statt weiss. */ --punkt-kern: color-mix(in srgb, #FFFFFF calc(14% + 38% * var(--punkt-kernstaerke)), var(--licht)); /* SIEBEN STOPPS, KEIN PLATEAU, und `closest-side`. Die drei Gründe stehen oben bei `--licht`. Kurz: eine Fläche gleicher Farbe mit einem Sprung dahinter liest das Auge als zweiten Punkt; und mit der Vorgabe `farthest-corner` lag alles ab 71 % ausserhalb des Kreises, der Verlauf wurde also mitten im Abfall abgeschnitten und bekam dadurch einen Rand. */ --punkt-verlauf: radial-gradient(circle closest-side at 50% 50%, var(--punkt-kern) 0%, color-mix(in srgb, var(--punkt-kern) 76%, var(--licht)) 14%, color-mix(in srgb, var(--punkt-kern) 48%, var(--licht)) 27%, color-mix(in srgb, var(--punkt-kern) 22%, var(--licht)) 39%, var(--licht) 54%, color-mix(in srgb, var(--licht) 58%, var(--licht-hof)) 78%, var(--licht-hof) 100%); /* SONNE:AUSNAHME (a) — eine Lichtquelle strahlt rund. ERSTE LAGE GEÄNDERT 01.08. abends: sie war `0 0 1px var(--punkt-kern)` und legte damit einen fast weissen Ring AUSSEN um den ganzen Punkt. Bei 8 px Durchmesser ist 1 px ein Achtel — das war der zweite Grund, warum der Punkt in der Listenzeile weiss mit gelbem Rand aussah statt gelb. */ --punkt-glanz: /* SONNE:AUSNAHME (a) */ 0 0 1px var(--licht), 0 0 3px var(--licht), 0 0 7px color-mix(in srgb, var(--licht-hof) 85%, transparent), 0 0 14px color-mix(in srgb, var(--licht-hof) 55%, transparent), 0 0 26px color-mix(in srgb, var(--licht-hof) 28%, transparent), 0 0 44px color-mix(in srgb, var(--licht-hof) 13%, transparent); /* --- DER PUNKT, WIE ER JETZT AUSSIEHT: FLACH --------------------------- ENTSCHIEDEN AM 02.08.2026, von Jakob, an beiden Fassungen in Produktionsgrösse: „ICH BIN SCHOCKIERT. ICH HATTE RECHT. Das Leuchten sieht schlechter aus als einfach nur der gelbe Punkt. GELB, GRÜN UND ROT ALS PUNKT SIEHT SEHR VIEL FREUNDLICHER AUS und sehr viel weniger aufdringlich. Das passt zum Design besser insgesamt." Vorgeschlagen hatte er es am Abend zuvor: „Vielleicht nimmt man noch gar kein echtes Leuchten, sondern EINFACH NUR DEN GELBEN PUNKT. Der Rand des Punktes ist ganz, ganz leicht orange oder so was. SO CLIPART-MÄSSIG." Das ist keine abgeschwächte Fassung des Leuchtens, sondern eine andere Bauform: kein Hof, keine Überstrahlung, kein weisser Kern. Eine Fläche mit einem Rand, der eine Spur kippt — mehr nicht. DER RAND IST SCHMALER GEWORDEN (02.08.). Vorher begann er bei 64 % des Radius und war damit bei 8 px Durchmesser 1,44 px breit — über ein Drittel des Radius. Beim Bernstein, dessen Rand kräftig gegen die Tiefe absticht, wuchs der Punkt dadurch optisch; beim Grün und beim Rot, deren Ränder dunkel sind und mit dem Blau verschmelzen, schrumpfte er. Genau das hat Jakob gesehen: „Es kommt mir vor, als ob der grüne Punkt ein bisschen kleiner ist, und beim roten vielleicht auch." — obwohl alle drei nachgemessen 8,000 px sind. Jetzt beginnt der Rand bei 78 %, ist also 0,88 px breit und bleibt bei jeder Farbe das, was Jakob verlangt hat: „ganz, ganz leicht". */ --punkt-flach: radial-gradient(circle closest-side at 50% 50%, var(--licht) 0%, var(--licht) 78%, color-mix(in srgb, var(--licht) 45%, var(--licht-hof)) 90%, var(--licht-hof) 100%); /* Der gedämpfte Zustand fürs Atmen — dieselbe Staffelung, nur kürzer. */ --punkt-glanz-schwach: /* SONNE:AUSNAHME (a) */ 0 0 1px var(--licht), 0 0 3px color-mix(in srgb, var(--licht) 70%, transparent), 0 0 8px color-mix(in srgb, var(--licht-hof) 34%, transparent), 0 0 16px color-mix(in srgb, var(--licht-hof) 14%, transparent); } /* ========================================================================= 0 — Grundlagen ========================================================================= */ /* Browser-Vorgaben sind geratene Werte (1px/6px an