/* ══════════════════════════════════════════════════════════════════════════ Die Gravur: der Kontrast steckt in der Schrift, nicht unter ihr Gehoert zu templates/onboarding/landing.html. ══════════════════════════════════════════════════════════════════════════ **Diese Seite hat keine Flaeche.** Kein Schleier, kein Kasten, kein Band. Adrians Einwand gegen den Vorgaenger: *"Das Dunkle hinter allen Layern wie im Hero gefaellt mir eh nicht."* Das Partikelfeld laeuft bis an die Buchstaben heran. Den Kontrast traegt die Schrift selbst: ein harter dunkler Hof von zwei bis vier Bildpunkten direkt am Glyphenrand, darueber ein weicher Hauch, der **die Form des Satzes hat und nicht die eines Rechtecks**. Wo WCAG "der Hintergrund hinter dem Text" sagt, ist dieser Hof der Hintergrund - und der ist ueberall gleich dunkel, egal was der Kamm darunter tut. ── Warum 23 Lagen und nicht vier ──────────────────────────────────────── **Zweimal falsch geraten, dann gemessen** (Werte vom Entwurf, auf dem hellsten Kamm): vier Schatten plus weicher Hauch 1,4 - 2,4:1 sieht aus, traegt nicht achtzehn enge Lagen 3,1 - 3,6:1 in der echten Seite 23 Lagen, Radien 4/8/15/26/46 5,5 - 18:1 haelt ueberall **Der mittlere Wert ist der lehrreiche.** Dieselben achtzehn Lagen massen in einer Probe mit engem Zeilenabstand noch 5,4 bis 8,0:1, in der luftigen Seite nur 3,1 bis 3,6:1. Ein Hof lebt davon, dass die Hoefe der Nachbarzeilen mithelfen: je luftiger der Satz, desto schwaecher wird er. **Wer hier Lagen wegnimmt, misst nach.** Nicht schaetzen - der Fehler sieht naemlich gut aus. Ein Hof, der nicht traegt, sieht aus wie einer, der traegt. ── Der Preis, und er ist eine Bedingung ───────────────────────────────── Das traegt nur GROSSE, KRAEFTIGE Schrift. **Unter 19 px frisst der Hof die Punzen** - die Innenraeume von a, e, o laufen zu und das Wort wird zum Fleck. Diese Seite kann deshalb keine langen Absaetze haben; sie besteht aus Plakatzeilen. Weniger Text ist hier keine Haltung, sondern eine Bedingung. Deshalb gibt es zwei Staerken: `.gr` die volle Gravur, 25 Lagen. Fuer alles ab 21 px. `.gr.fein` 19 Lagen ohne die zwei weichesten. Fuer 17 bis 20 px, wo der weite Hauch die Punzen zulaufen liesse. ── Und was ist mit dem hellen Modus ───────────────────────────────────── Dort laeuft keine Leinwand, sondern ein ruhiger Verlauf (hintergrund.css) - es gibt keinen Kamm, gegen den ein Hof noetig waere. Ein dunkler Hof um dunkle Schrift auf hellem Grund waere ausserdem genau falsch herum. Die Gravur ist deshalb **im hellen Modus ganz aus**; den Kontrast traegt dort der Verlauf, wie bisher. ══════════════════════════════════════════════════════════════════════════ */ :root { /* Der Ton der Gravur ist --color-bg-base, ausgeschrieben. Als eigener Wert und nicht als Verweis: eine Zahl, die in einer Messung steht, soll man hier wiederfinden. */ --gr-ton: #050506; } /* Die volle Gravur. Die Lagen stehen ausgeschrieben und nicht als Schleife - `text-shadow` kennt keine Wiederholung, und jede Lage addiert Deckkraft. Acht enge Lagen bei 4px bilden die harte Kante, sechs bei 8px und fuenf bei 15px die Bahn, vier bei 26px und zwei bei 46px den weichen Hauch. */ .gr { text-shadow: 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 15px var(--gr-ton), 0 0 15px var(--gr-ton), 0 0 15px var(--gr-ton), 0 0 15px var(--gr-ton), 0 0 15px var(--gr-ton), 0 0 26px rgba(5, 5, 6, .9), 0 0 26px rgba(5, 5, 6, .9), 0 0 26px rgba(5, 5, 6, .9), 0 0 26px rgba(5, 5, 6, .9), 0 0 46px rgba(5, 5, 6, .75), 0 0 46px rgba(5, 5, 6, .75); } /* Die feine Gravur: dieselben Lagen ohne die zwei weichesten. Der 46er Hauch ist es, der bei kleiner Schrift die Punzen zulaufen laesst. */ .gr.fein { text-shadow: 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 4px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 8px var(--gr-ton), 0 0 15px var(--gr-ton), 0 0 15px var(--gr-ton), 0 0 15px var(--gr-ton), 0 0 15px var(--gr-ton), 0 0 15px var(--gr-ton), 0 0 26px rgba(5, 5, 6, .9), 0 0 26px rgba(5, 5, 6, .9), 0 0 26px rgba(5, 5, 6, .9), 0 0 26px rgba(5, 5, 6, .9); } /* ── Die dritte Staerke: fuer kleine, duenne, gesperrte Schrift ────────── **Warum es sie gibt.** Gemessen ueber 501 Textstuecke an drei Wellenlagen: die Augenbraue (13 px) und die Ziffer (15 px) waren mit 5,33:1 die schwaechsten der ganzen Seite - unter dem, was der alte Schleier hielt (6,36:1). Der Grund ist die Strichstaerke und nicht die Zahl der Lagen: **ein Strich von ein bis zwei Bildpunkten nimmt vom Hof weniger mit als ein dicker.** Ein weiter Hauch hilft dort nicht, er verduennt sich zu schnell. Was hilft, sind mehr Lagen NAH am Strich. Deshalb liegt hier der Schwerpunkt auf 2 und 3 Punkten Radius statt auf 8 und 15. Gefahrlos ist das nur bei Schrift ohne Punzen - beide Stellen sind Grossbuchstaben bzw. Ziffern mit weiter Sperrung. Bei einer Kleinbuchstaben- Zeile in dieser Groesse waere es ein Fleck. */ .gr.stark { text-shadow: 0 0 2px var(--gr-ton), 0 0 2px var(--gr-ton), 0 0 2px var(--gr-ton), 0 0 2px var(--gr-ton), 0 0 2px var(--gr-ton), 0 0 2px var(--gr-ton), 0 0 3px var(--gr-ton), 0 0 3px var(--gr-ton), 0 0 3px var(--gr-ton), 0 0 3px var(--gr-ton), 0 0 3px var(--gr-ton), 0 0 3px var(--gr-ton), 0 0 5px var(--gr-ton), 0 0 5px var(--gr-ton), 0 0 5px var(--gr-ton), 0 0 5px var(--gr-ton), 0 0 5px var(--gr-ton), 0 0 9px var(--gr-ton), 0 0 9px var(--gr-ton), 0 0 9px var(--gr-ton), 0 0 9px var(--gr-ton), 0 0 16px rgba(5, 5, 6, .92), 0 0 16px rgba(5, 5, 6, .92), 0 0 16px rgba(5, 5, 6, .92), 0 0 30px rgba(5, 5, 6, .8), 0 0 30px rgba(5, 5, 6, .8); } /* ── Alles mit Kante bekommt denselben Hof ────────────────────────────── Ein Knopf haelt seine 3:1 (WCAG 1.4.11) auf dem Kamm nicht aus eigener Kraft - das ist am 2026-08-21 schon einmal gemessen worden, damals mit 2,94:1 und schwankend. Der Hof ist fuer Flaechen, was die Gravur fuer Schrift ist: er liegt in der Form des Gegenstands und nicht als Rechteck darum. */ .hof { box-shadow: 0 0 0 4px var(--gr-ton), 0 0 0 11px rgba(5, 5, 6, .88), 0 0 26px 12px rgba(5, 5, 6, .8), 0 0 64px 30px rgba(5, 5, 6, .5); } /* Der Hauptknopf traegt seinen eigenen Glanz und braucht den weiten Hauch deshalb schwaecher - sonst frisst der Hof das Leuchten, das ihn ausmacht. */ .btn-aurora.hof { box-shadow: 0 0 0 4px var(--gr-ton), 0 0 0 11px rgba(5, 5, 6, .88), 0 0 22px 10px rgba(5, 5, 6, .75), 0 0 52px 22px rgba(5, 5, 6, .45); } /* ── Auf einer Flaeche ist die Gravur aus ──────────────────────────────── **Die Gravur ist die Antwort auf das Partikelfeld. Wo kein Feld ist, ist sie eine Rechnung ohne Gegenleistung.** Die drei Flaechen der Seite (startseite-inhalt.css) sind deckendes `--color-bg-card`. Der Grund dahinter ist bekannt und ruhig, die Farbtoene darauf sind in tailwind-input.css gegen genau diesen Ton gemessen. Ein Hof in `--gr-ton` (#050506) auf #0c0d0f ist sieben Stufen von 255 entfernt und damit unsichtbar - **aber nicht umsonst.** ── Was er wirklich kostet, gemessen ───────────────────────────────────── Kopfloses Chrome, 1440x900, die Seite mit 14 Punkten je Bild durchgefahren, 666 Bilder je Durchgang, drei Grunddurchgaenge. Gezaehlt werden Bilder ueber 50 ms - bei einem Grundtakt von 25 ms ist das ein verschluckter Rahmen, den man sieht: Gravur wie ausgeliefert (25 Lagen) 14, 15, 17 Bilder ueber 50 ms Gravur ganz aus 5, 5, 4 nur 14 Lagen (4px und 8px) 4 ohne die zwei weitesten Lagen 6 **Der Rest ist der erste Bildschirm** - die vier bis fuenf Bilder, die auch ohne Gravur uebrigbleiben, liegen alle im Aufmacher und sind Anlaufkosten. Zwischen Freiheit und Schluss bleibt ohne Gravur kein einziges Bild ueber 50 ms stehen. **Die Lagenzahl ist der Hebel, nicht der Textschatten an sich.** Wer hier Lagen wegnimmt, misst trotzdem den Kontrast nach (siehe oben) - diese Messung sagt, was es kostet, und nicht, ob man es darf. ── Warum die Klasse im Markup bleibt ──────────────────────────────────── Abgeschaltet wird von der FLAECHE aus und nicht durch Weglassen der Klasse. Nimmt jemand die Tafel wieder heraus, faellt diese Regel mit ihr weg und der Text steht sofort wieder geschuetzt auf dem Feld. Andersherum haette man einen nackten Text auf dem Kamm und keine Meldung darueber. `test_startseite_preise.py` prueft ausserdem, dass die Klassen dastehen. */ .c-karte .gr, .c-karte .gr.fein, .c-karte .gr.stark, .c-tafel .gr, .c-tafel .gr.fein, .c-tafel .gr.stark, .c-stufe .gr, .c-stufe .gr.fein, .c-stufe .gr.stark { text-shadow: none; } /* ── Heller Modus: Gravur aus ──────────────────────────────────────────── Kein Kamm, kein Hof noetig - und ein dunkler Hof um dunkle Schrift auf hellem Grund waere genau falsch herum. */ :root[data-theme="hell"] .gr, :root[data-theme="hell"] .gr.fein, :root[data-theme="hell"] .gr.stark { text-shadow: none; } :root[data-theme="hell"] .hof, :root[data-theme="hell"] .btn-aurora.hof { box-shadow: none; }