/* ═══════════════════════════════════════════════════════════════════════════ FORMWERK — Wertetafel. Das Design-System. NUR Werte, keine Regeln. Zweite Fassung. Was sich gegenüber der ersten geändert hat und warum: 1 · FLÜSSIG STATT SPRUNGHAFT. Vorher sprangen Größen und Abstände an drei Haltepunkten. Dazwischen stimmten die Verhältnisse nicht mehr — bei 1000 px war die Seite anders proportioniert als bei 1400. Jetzt wächst alles über `clamp()` mit dem Fenster, in festen Grenzen. Denselben Weg gehen die großen Automobil-Systeme (Porsche PDS: „fluid typography scales within a predefined min–max, aligned with the fluid spacers"). 2 · EIN RASTER, ZWÖLF SPALTEN. Vorher hatte jedes Bauteil sein eigenes Verhältnis: 5fr/6fr hier, 7fr/5fr dort. Das liest sich als Zufall. Jetzt liegt alles auf denselben zwölf Spalten mit derselben Rinne — und was ausbricht, bricht sichtbar aus. 3 · MEHR KONTRAST IN DER SCHRIFT. Der Abstand zwischen Display und Lesetext war zu klein. Eine Seite, die vierstellige Beträge verkauft, braucht einen Auftritt: Display bis 148 px, Satz bei 19. Faktor acht statt fünf. 4 · ABSTUFUNG STATT GLEICHTAKT. Alle Abschnitte hatten denselben Abstand. Jetzt gibt es drei Gewichte: enge Abschnitte, normale, und die, die eine Pause brauchen. Farbe: schwarz und weiß. Kein Buntton, in keinem Modus. Die einzige Farbe der Seite kommt aus den Bildern. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Schrift, aus dem eigenen Verzeichnis ─────────────────────────────────── Kein fremder Host: eine eingebundene Fremdschrift überträgt die IP-Adresse des Lesers an einen Dritten, bevor er irgendetwas einwilligen konnte. */ @font-face { font-family: "Archivo"; src: url("../schrift/archivo-var-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../schrift/inter-var-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @layer wertetafel { :root { color-scheme: light dark; /* ══ SCHRIFT ═══════════════════════════════════════════════════════════ */ --schrift-kopf: "Archivo", "Helvetica Neue", Arial, sans-serif; --schrift-text: "Inter", "Helvetica Neue", Arial, sans-serif; /* ── Gewichte ────────────────────────────────────────────────────────── Je größer, desto LEICHTER. Das ist der optische Ausgleich, an dem sich feine von grober Typografie unterscheidet: eine Versalzeile in 104 px trägt bei Halbfett so viel Masse, dass sie plump wird — bei 480 wirkt dieselbe Zeile präzise. Umgekehrt braucht eine Beschriftung in 11 px Halbfett, um überhaupt Kontur zu haben. Archivo ist variabel von 100 bis 900, deshalb sind Zwischenwerte hier keine Näherung, sondern echte Schnitte. */ --gewicht-normal: 400; --gewicht-mittel: 500; --gewicht-kopf: 600; --gewicht-display: 470; /* h1 */ --gewicht-titel: 510; /* h2 */ --gewicht-unter: 560; /* h3, Preis, Wortzeichen */ --breite-marke: 125%; --breite-kopf: 114%; /* ── Größen, flüssig zwischen 360 px und 1600 px Fensterbreite ───────── Sieben Stufen, und jede hat GENAU EINE Aufgabe. Das ist der Punkt, an dem eine Seite einheitlich wird: nicht dadurch, dass alles gleich groß ist, sondern dadurch, dass jede Größe für eine Sorte Inhalt steht. label alle Versal-Beschriftungen: Kapitelmarke, Etikett, Navigation, Formularbeschriftung, Zeitangabe, Fußtitel, Zähler klein Kleingedrucktes, Bildunterschrift, Listenpunkt, Knopf text Fließtext vorspann Vorspann und Frage 3 h3, Preis, Wortzeichen, Standzahl 2 h2 1 h1 Die Grade sind gegenüber der ersten Fassung durchgehend kleiner. Das Display ist von 148 auf 104 px zurückgenommen und der Satz von 19 auf 17 — der ABSTAND zwischen beiden bleibt damit groß, aber die Seite hört auf zu schreien. Was zu groß ist, macht das Navigieren anstrengend, und das ist teuer bezahlte Aufmerksamkeit. Die Laufweite ist der Punkt, an dem Versalsatz kippt: große Versalien brauchen WENIGER Laufweite, nicht mehr. Die Seitenabstände einer Grotesk sind für den Satz aus Groß- UND Kleinbuchstaben gezeichnet; stehen nur Versalien da, klaffen sie auseinander. Deshalb läuft die größte Stufe am engsten und wird nach unten hin weiter — bis zur Beschriftung, die als einzige gesperrt steht, weil sie klein ist. Versalien haben keine Unterlängen. Deshalb trägt das Display einen Zeilenabstand unter 1,0, ohne zu kollidieren — daher seine Wucht. */ --g-label: clamp(10px, 0.16vw + 9.4px, 12px); --g-klein: clamp(13px, 0.08vw + 12.7px, 14px); --g-text: clamp(15px, 0.16vw + 14.4px, 17px); --g-vorspann: clamp(17px, 0.4vw + 15.6px, 22px); --g-3: clamp(20px, 0.65vw + 17.7px, 28px); --g-2: clamp(28px, 1.94vw + 21.0px, 52px); --g-1: clamp(40px, 5.16vw + 21.4px, 104px); --zh-label: 1.5; --sp-label: 0.11em; /* Versalien mitten im Fließtext (Inter) brauchen etwas Luft, sonst kleben sie. Archivo hat für seine Größen eine eigene Leiter. */ --sp-versal: 0.03em; --zh-klein: 1.6; --sp-klein: 0.004em; --zh-text: 1.62; --sp-text: 0em; --zh-vorspann: 1.45; --sp-vorspann: -0.006em; --zh-3: 1.16; --sp-3: -0.012em; --zh-2: 1.0; --sp-2: -0.022em; --zh-1: 0.9; --sp-1: -0.034em; /* h4 bis h6 sitzen auf der Stufe von h3 — keine siebte Stufe. */ --g-4: var(--g-3); --zh-4: var(--zh-3); --sp-4: var(--sp-3); --sp-marke: 0.002em; /* Zeilenbreite: 45–90 Zeichen, Ziel um 66 — der Bereich, den die Lesbarkeitsleitfäden übereinstimmend nennen. */ --zeilenbreite: 58ch; --zeilenbreite-eng: 46ch; /* ══ RASTER ════════════════════════════════════════════════════════════ Zwölf Spalten, eine Rinne, ein Seitenrand. Alles liegt darauf. Ein Bauteil mit eigenem Verhältnis ist eines, das aus der Ordnung fällt. */ --spalten: 12; --rinne: clamp(16px, 1.29vw + 11.4px, 32px); --seitenrand: clamp(20px, 3.55vw + 7.2px, 64px); --seitenbreite: 1320px; /* ══ MASS ══════════════════════════════════════════════════════════════ Acht Stufen, alle flüssig. Die unteren fünf ordnen INNERHALB eines Blocks, die oberen drei trennen Blöcke und Abschnitte. Zwischen zwei Stufen liegt mindestens Faktor 1,4 — darunter ist die Wahl nicht mehr entscheidbar, und dann wählt man zufällig. Die oberste Stufe war 280 px und ist jetzt 132. Der Grund steht in einem Screenshot: ein Abschnitt mit drei Zeilen Text war 988 px hoch, davon 700 px Polsterung. Das ist kein Weißraum, das ist ein Loch — und ein Loch liest sich nicht als Ruhe, sondern als Versehen. DER RHYTHMUS IST EINER, NICHT DREI. Jeder Abschnitt bekommt oben und unten denselben Abstand (2xl), innerhalb der Bahn steht die Stufe darunter (xl). Damit ist der Abstand zwischen zwei Abschnitten etwa das Zweieinhalbfache des Abstands zwischen zwei Blöcken — hörbar, aber nicht laut. Drei verschiedene Abschnittsgewichte waren der Grund, warum nichts einheitlich wirkte. */ --raum-3xs: clamp(4px, 0.16vw + 3.4px, 6px); --raum-2xs: clamp(8px, 0.32vw + 6.8px, 12px); --raum-xs: clamp(12px, 0.48vw + 10.3px, 18px); --raum-s: clamp(20px, 0.97vw + 16.5px, 32px); --raum-m: clamp(32px, 1.61vw + 26.2px, 52px); --raum-l: clamp(48px, 3.23vw + 36.4px, 88px); --raum-xl: clamp(64px, 4.52vw + 47.7px, 120px); --raum-2xl: clamp(80px, 4.19vw + 64.9px, 132px); /* Nur für den Abstand zwischen zwei Abschnitten. Er muss deutlich größer sein als der größte Abstand INNERHALB eines — sonst liest sich die Seite als eine lange Spalte statt als Folge von Kapiteln. */ --raum-3xl: clamp(104px, 6.13vw + 81.9px, 180px); /* ── Bedienbares ────────────────────────────────────────────────────── 24 px ist die motorische Schwelle aus WCAG 2.2 — keine Gestaltungswahl. Alles darüber ist eine. */ --zielgroesse: 24px; /* Die Fläche, auf die ein Finger zielen muss. 24 px ist das Mindestmaß der Norm, 44 das, was ein Daumen tatsächlich trifft. Die Schrift bleibt davon unberührt — es wächst die Fläche, nicht der Text. */ --tippflaeche: 44px; /* 58 px waren zu viel für eine Beschriftung von 11 px. Ein Knopf, der viermal so hoch ist wie seine Schrift, liest sich als Fläche, nicht als Bedienelement. 44–50 hält die Tippfläche über dem Mindestmaß und lässt ihn trotzdem leicht wirken. */ --knopf-hoehe: clamp(44px, 0.48vw + 42.3px, 50px); --kopf-hoehe: clamp(64px, 1.29vw + 59.4px, 80px); --zeichen: 1.05em; --zeichen-klein: 0.72em; --zeichen-versatz: 0.42em; /* Das Sinnbild über einer Zusage. Fest in Pixeln, nicht in em: es steht über der Überschrift und soll bei allen vier gleich groß sein, egal wie lang der Titel darunter ist. */ --zeichen-gross: 26px; --deckkraft-gesperrt: 0.28; --balken-hoehe: 2px; --punkt-groesse: 7px; /* ── Form ───────────────────────────────────────────────────────────── Flächen rechtwinklig, Bedienbares als Kapsel. Dazwischen nichts. */ --r-flaeche: 0; --r-knopf: 999px; --r-bild: 0; /* ── Tiefe: Haarlinien, ein Weg und nur einer ───────────────────────── Kein Schatten. Nicht als Verzicht, sondern weil eine schwarzweiße Seite ihre Ordnung aus Kanten und Luft zieht — ein weicher Schatten wäre der einzige weiche Rand weit und breit. */ --linien-staerke: 1px; --flaeche-linie: var(--linien-staerke) solid var(--linie); --flaeche-schatten: none; --feld-linie: var(--linien-staerke) solid var(--linie-feld); /* ══ FARBE — nur unbunt ════════════════════════════════════════════════ Zwei Textfarben, nicht drei. Eine dritte Graustufe nimmt niemand als Stufe wahr; sie sieht nur nach verwaschenem Schwarz aus. --linie trennt und umrandet, rein zeichnerisch --linie-fein das Raster selbst: sichtbar, wenn man hinsieht --linie-feld dieselbe Aufgabe an Bedienbarem, dort mit Kontrast */ --bg: #ffffff; --flaeche: #f5f5f5; --flaeche-tief: #ececec; --linie: #dcdcdc; --linie-fein: #ededed; --linie-kraeftig: #b4b4b4; --linie-feld: #6f6f6f; --ink: #0a0a0a; --ink-2: #6e6e6e; --akzent: #0a0a0a; --akzent-tief: #2e2e2e; --auf-akzent: #ffffff; --akzent-leise: #f0f0f0; --akzent-leise-tief: #e0e0e0; --auf-akzent-leise: #0a0a0a; --fokus: #0a0a0a; --fokus-kontur: #ffffff; --auf-bild: #ffffff; /* ══ BEWEGUNG ══════════════════════════════════════════════════════════ Der Hub ist bewusst klein. Ein Element, das eine weite Strecke zurücklegt, sieht aus, als sei es hereingeworfen worden. Zwanzig Pixel liest man als Ankommen — und das ist der Unterschied zwischen einer Seite, die teuer wirkt, und einer, die sich anstrengt. */ --mo-kurz: 180ms; --mo-mittel: 420ms; --mo-lang: 900ms; --mo-kurve: cubic-bezier(0.22, 1, 0.36, 1); --mo-kurve-weich: cubic-bezier(0.65, 0, 0.35, 1); --mo-hub: clamp(16px, 0.48vw + 14.3px, 22px); --mo-takt: 70ms; --mo-pfeil: 0.3em; --bild-ruhe: 1.045; --bild-hover: 1.075; /* Wie weit ein Geschwister zurücktritt, wenn nebenan eines überfahren wird. 0,4 war eine Ansage; bei 0,6 liest man die anderen noch — und genau das soll man, sonst ist es kein Fokus, sondern ein Ausblenden. */ --ruhe-gedaempft: 0.6; --parallaxe: 1.4%; /* ══ UNTERSCHRIFT ══════════════════════════════════════════════════════ Zwei Größen: einmal als Unterzeichnung eines Absatzes, einmal als kleines Siegel neben einer Zusage. */ --zug-hoehe: clamp(56px, 6.4vw, 92px); --zug-hoehe-klein: clamp(34px, 3.6vw, 48px); --zug-quelle: url("../medien/unterschrift.svg"); --zug-verhaeltnis: 1.743; } /* ══ Dunkler Modus ═══════════════════════════════════════════════════════ Eigens gesetzt, nicht abgeleitet. Eine Linie über Deckkraft zu rechnen ist der Fall, der im Dunkeln verschwindet oder grell wird. Der Grund ist kein reines Schwarz: unter heller Schrift erzeugt reines Schwarz einen Lichthof. Die Schrift ist entsprechend kein reines Weiß. */ @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --bg: #0b0b0b; --flaeche: #161616; --flaeche-tief: #1f1f1f; --linie: #2b2b2b; --linie-fein: #1c1c1c; --linie-kraeftig: #575757; --linie-feld: #8f8f8f; --ink: #f4f4f4; --ink-2: #969696; --akzent: #f4f4f4; --akzent-tief: #cfcfcf; --auf-akzent: #0b0b0b; --akzent-leise: #1f1f1f; --akzent-leise-tief: #2c2c2c; --auf-akzent-leise: #f4f4f4; --fokus: #f4f4f4; --fokus-kontur: #0b0b0b; } } :root[data-thema="dunkel"] { --bg: #0b0b0b; --flaeche: #161616; --flaeche-tief: #1f1f1f; --linie: #2b2b2b; --linie-fein: #1c1c1c; --linie-kraeftig: #575757; --linie-feld: #8f8f8f; --ink: #f4f4f4; --ink-2: #969696; --akzent: #f4f4f4; --akzent-tief: #cfcfcf; --auf-akzent: #0b0b0b; --akzent-leise: #1f1f1f; --akzent-leise-tief: #2c2c2c; --auf-akzent-leise: #f4f4f4; --fokus: #f4f4f4; --fokus-kontur: #0b0b0b; } }