/* Erzeugt von tools/build-css.sh — nicht von Hand ändern. */ @layer tokens, base, elements, widgets, slices, layouts, templates; /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Der Tokensatz — Maße aus dem Goldenen Schnitt, Farben in OKLCH. Alles Weitere leitet sich hieraus ab. Kein Paket setzt eine eigene Zahl an, wo ein Token sie schon trägt: eine Größe, die nur an einer Stelle steht, ist eine Größe, die beim nächsten Durchgang nicht mitwandert. */ @layer tokens { :root { /* **Dunkel, und zwar immer.** `dark light` hieß: der Browser darf nach der Systemeinstellung wählen — und auf einem hellen Windows wählte er hell, worauf jede dunkle Fläche fast weiß wurde und der Text darauf unlesbar (gemeldet am 3. September 2026). Ein helles Theme ist vorgedacht, nicht beschlossen: die hellen Werte in `light-dark()` bleiben stehen, damit sie eines Tages ohne Suche zu finden sind, aber ausgeliefert wird die dunkle Fassung. Ein Wort hier dreht das um ({T0026S12}). */ color-scheme: dark; /* Maßleiter — der Schritt ist √φ = 1.272, zwei Schritte sind φ. Schrift nimmt jeden Punkt, Abstand jeden zweiten. */ /* Die Basis wächst mit der Breite: 14 px am Telefon, 15 ab tablet, 17 ab screen. Gemessen am Fließtext des Entwurfs in allen drei Fassungen — er skaliert die Schrift, statt sie überall gleich zu setzen, und ohne das wirkt die Seite am Telefon um ein Fünftel zu groß. Die Leiter selbst bleibt: 17 durch √φ sind 13,4; mal √φ sind 21,6; mal φ sind 27,5 — der Entwurf trifft 13, 22 und 28. Die Stufen darunter stehen bei den Haltepunkten. */ --scale-base: 0.875rem; /* Zwei Größen folgen der Leiter nicht und stehen deshalb je Breite: Die Bühne — 23, 30, 44 px. Sie ist der Spielname und soll die Leiste füllen, was bei 430 px anders aussieht als bei 1440. Die Seitenüberschrift — 19, 22, 28 px. Ihr Verhältnis zur Basis wächst mit der Breite (1,36 · 1,47 · 1,65 statt konstant φ), und das ist keine Nachlässigkeit des Entwurfs: eine Überschrift, die am Telefon dasselbe Vielfache trüge wie am Schreibtisch, nähme dort die halbe Höhe des Sichtfelds. Wo wenig Platz ist, rückt sie näher an den Text. */ --text-stage: 1.4375rem; --text-head: 1.1875rem; /* Beschriftungen in Versalien — Kartentitel, Kennzahlen-Label. 10, 11, 12 px: sie wachsen langsamer als die Basis, weil Versalien bei gleicher Größe breiter bauen und in einer engen Karte sonst umbrechen. */ --text-label: 0.625rem; --text-micro: calc(var(--scale-base) / 1.618); /* 10,5 → Beschriftungen */ --text-small: calc(var(--scale-base) / 1.272); /* 13,4 → Etiketten, Kartentitel */ --text: var(--scale-base); /* 17 → Fließtext */ --text-large: calc(var(--scale-base) * 1.272); /* 21,6 → Kennzahlen */ --text-title: calc(var(--scale-base) * 2.058); /* 35 → die Bühne */ --space-hair: calc(var(--scale-base) * 0.146); --space-tight: calc(var(--scale-base) * 0.236); --space-snug: calc(var(--scale-base) * 0.382); --space-close: calc(var(--scale-base) * 0.618); --space: var(--scale-base); --space-open: calc(var(--scale-base) * 1.618); /* Die Höhe jedes Bedienelements — Feld, Knopf, und was noch kommt. Sie stand vorher im seed_form-Widget, das Feld und Knopf in einer Rasterzeile streckte. Beim Herauslösen in Elemente ging sie verloren: auf der Startseite streckte sich der Knopf über Beschriftung **und** Feld, auf der Gegenstandsseite schrumpfte er auf seinen Inhalt. Zwei Seiten, zwei Höhen, eine Sache. Die Startseite ist das Vorbild, und diese Zahl ist von dort gemessen: 0.9375rem Innenabstand oben und unten plus 0.8125rem Schrift. */ --control-height: 2.6875rem; /* Die Hoehe des klebenden Kopfes ({T0097}). Gemessen an der laufenden Seite: 68 Punkte — zwei mal 1rem Innenabstand, 30 Punkte Marke, 5 Punkte Fortschrittsbalken, 1 Punkt Rand. Sie steht hier, weil etwas, das unter dem Kopf schwebt, sie wissen muss und sie nicht erfragen kann: `position: fixed` bezieht sich auf das Fenster, und CSS kann keine gemessene Hoehe in eine Eigenschaft schreiben. **Wer den Kopf aendert, aendert diese Zahl.** Das ist der Preis dafuer; die Alternative waere Skript, das eine Hoehe ausliest und zurueckschreibt — mehr Beweglichkeit fuer mehr Teile. */ --kopf-hoehe: 4.25rem; --space-wide: calc(var(--scale-base) * 2.618); /* Das Blatt — die Masse jedes Popovers, das aufgeht ({T0084}). Sie standen im item_sheet-Widget, gemessen vom Owner am 1. September 2026. Als die Karte ihr eigenes Blatt bekam, schrieb ich dieselben sechs Zahlen ein zweites Mal ab, und damit gab es zwei Wahrheiten ueber eine Sache: wer die Breite aendert, aendert sie an einer Stelle und sieht am naechsten Tag, dass die andere stehen blieb. Genau der Fall, den {K0054} beschreibt — nur dass die Huelle kein Markup ist, das man in ein Element heben koennte, sondern Mass. Und Mass wohnt hier — wie `--control-height` darueber. Wer ein Blatt baut, schreibt diese Tokens und keine Zahlen. */ --sheet-inline-size: min(400px, calc(100vw - 2rem)); --sheet-max-block-size: min(900px, calc(100vh - 2rem)); /* **Die Kante von allem, was auf der Seite aufliegt** — Blaetter und Baender. Der Name sagt »Blatt«, weil dort die erste war; gemeint ist jedes Element, das ueber dem Inhalt schwebt und sich deshalb von ihm abgrenzen muss ({T0097}). Wer eines baut, schreibt diesen Token und keine Zahl. Bis zum 12. September 2026 stand er an zwei Stellen nicht: das Favoritenblatt der Karte trug seine 3px ausgeschrieben, und das Hinweisband einen einzigen — und ein Band mit einer Haarlinie neben einem Blatt mit drei Punkten sieht nach zwei Hausordnungen aus. */ --sheet-edge: 3px; --sheet-shadow: 0 24px 64px oklch(0% 0 0 / 0.55); --sheet-scrim: oklch(0% 0 0 / 0.6); /* Der Guertel zum Hosentraeger: im Top-Layer braucht ein Popover keinen z-index, aber beim Schliessen faellt es heraus, und dann entscheidet er doch (Owner, 1. September 2026). */ --sheet-layer: 9999; /* Ausgabebreite. Ein einziger Deckel: die Spur des Slices begrenzt sich selbst per min\(\), deshalb braucht die Breite keine vier Stufen — es wächst die Rinne, nicht der Deckel. */ /* Der Entwurf laesst dem Inhalt bei 1440 px rund 40 px Rand, nutzt also fast die volle Breite. 84rem trifft das und deckelt zugleich, was auf einem sehr breiten Schirm sonst ins Uferlose liefe — der Fliesstext bleibt ohnehin bei 66ch \(siehe prose\). */ --measure: 90rem; --gutter: 2.5rem; /* Raster der Pixelschrift. Ihre Glyphen sind acht Schriftpixel breit; damit eine Kante auf ein ganzes Gerätepixel fällt, muß Größe durch acht mal Geräteauflösung ganzzahlig sein — bei Auflösung 1 und 3 ein Vielfaches von 8, bei 2 eines von 4 \({K0044}\). Die Leiter bleibt dieselbe; gerundet wird an der Verwendungsstelle mit round\(\). */ --pixel-grid: 8px; /* Fläche und Schrift sind zwei Skalen, nicht eine. Der Entwurf setzt die Flächen dicht beieinander — 12 bis 21 Prozent, fünf Stufen auf neun Punkten — und die Schrift weit darüber. Eine gemeinsame Skala müßte beides bedienen und träfe keines von beidem. Die Werte für dunkel sind aus dem Entwurf gemessen, die für hell daran gespiegelt. light-dark() nimmt den ersten Wert im hellen Schema. */ --hue-surface: 260; --c-surface: 0.010; --surface-0: light-dark(oklch(99% var(--c-surface) var(--hue-surface)), oklch(12% var(--c-surface) var(--hue-surface))); --surface-1: light-dark(oklch(97% var(--c-surface) var(--hue-surface)), oklch(15% var(--c-surface) var(--hue-surface))); --surface-2: light-dark(oklch(94% var(--c-surface) var(--hue-surface)), oklch(17% var(--c-surface) var(--hue-surface))); --surface-3: light-dark(oklch(91% var(--c-surface) var(--hue-surface)), oklch(18% var(--c-surface) var(--hue-surface))); --surface-4: light-dark(oklch(86% var(--c-surface) var(--hue-surface)), oklch(21% var(--c-surface) var(--hue-surface))); /* Schrift: drei Stufen, aus dem Entwurf gemessen. 65 trägt den Text, 58 das Beiwerk, 55 das Leiseste — im hellen Schema gespiegelt. */ /* Drei Stufen, alle aus dem Export gemessen. Die hellste trägt einen anderen Farbton — 90 statt 260 —, weil eine Überschrift auf dunklem Grund warm wirken soll und nicht blau. Es waren vier. Die leiseste, --ink-faint, lag im Dunkelmodus auf 48 Prozent und ergab auf --surface-0 nur 3,02 zu 1 — unter AA, an allen fünf Stellen, an denen sie stand. Gemessen braucht es dort 58 Prozent, und das ist exakt --ink-quiet: unterhalb dieser Stufe gibt es auf diesem Grund keine Textfarbe mehr, die die Grenze hält. Eine Stufe, die nirgends regelkonform verwendbar ist, ist keine Stufe. */ --ink-bright: light-dark(oklch(20% 0.005 90), oklch(95% 0.005 90)); --ink: light-dark(oklch(28% 0.008 var(--hue-surface)), oklch(70% 0.008 var(--hue-surface))); /* Die leise Stufe stand auf 58 Prozent und hielt AA nur auf --surface-0 — auf den erhöhten Flächen fiel sie auf 4,43 und 4,36, gemessen an neun Stellen. Der Grund ist dort heller, also muß die Schrift es auch sein. 61 Prozent trägt auf allen dreien mit Reserve; 60 hätte gereicht, läge aber bei 4,74 wieder dicht an der Kante. */ --ink-quiet: light-dark(oklch(42% 0.008 var(--hue-surface)), oklch(61% 0.008 var(--hue-surface))); --ground: var(--surface-0); --ground-up: var(--surface-2); /* **Drei Rollenfarben, und es waren immer drei** (Owner, 12. September 2026: »es gibt folgende Grünwerte und das von Anbeginn … es gab niemals ein weiteres Grün oder ähnliches«). | Primary Green | oklch(76% 0.17 130) | was führt, was auslöst | | Secondary Gold | oklch(80% 0.13 85) | was mehr zeigt | | Tertiary Orange| oklch(68% 0.18 35) | die Marke, sparsam | Hier stand bis dahin ein viertes Token, `--action` mit `oklch(72% 0.20 145)`, und daneben ein `--on-action`, das nie jemand benutzt hat. Der Satz, der beide begründete — »Verweis führt weg, Aktion löst aus« — beschrieb eine Teilung, die es nie gab: der Aktionsknopf trug von jeher `--link`, und `--action` stand an zwanzig Stellen fast nur in Fokusringen. Zwei Grüntöne, einen Bildpunkt auseinander in der Bedeutung und deutlich im Auge ({K0233}, {T0096}). **Das gilt für die Rollen der Oberfläche, nicht für Daten.** Die Biomfarben der Karte und die Rangleiter Weiß-Grün-Blau-Magenta folgen dem Spiel und bleiben, wo sie sind. */ --brand: oklch(68% 0.18 35); --link: oklch(76% 0.17 130); /* Goldgelb, die dritte Rolle neben den beiden Grüntönen: sie sagt weder »führt weg« noch »löst aus«, sondern »zeigt mehr«. Der Chevron am Kartenknopf trägt sie \(Owner, 1. September 2026\). */ --gold: oklch(80% 0.13 85); /* Rot, die vierte Rolle: »nimmt weg«. Der Knopf im Blatt des Ziels fuehrt damit aus dem Bauplan zurueck auf die Itemseite \(Owner, 8. September 2026, {T0073S13}\). Gemessen auf --surface-4 mit dunkler Schrift: 6,1 zu 1. */ --danger: oklch(66% 0.19 28); /* Die Rangleiter der Qualität: weiß, grün, blau, magenta — die Folge, die World of Warcraft und Elder Scrolls Online jedem Spieler beigebracht haben, vom Owner gewählt \({T0023S4}, 02-valheim.md\). Sie sagt, **wie gut** ein Stück ist; die Biomfarben sagen, **wann** im Spiel. Zwei Systeme, zwei Fragen — und deshalb kein Biomton hier. Grün und Magenta sind aus dem Entwurf gemessen: rgb\(0,255,28\) und rgb\(255,0,252\). Das Blau des Entwurfs, rgb\(11,97,172\), hält auf surface-4 nur 2,8 zu 1 — unter AA auch für große Schrift. Es steht deshalb auf 65 Prozent Helligkeit im selben Farbton: 5,5 zu 1, und immer noch das Blau der Leiter. Die Abweichung ist gemessen und benannt \(AW22\). Weiß ist die helle Tinte, die der Name ohnehin trägt. */ --rank-1: var(--ink-bright); --rank-2: oklch(86.7% 0.291 143); --rank-3: oklch(65% 0.14 252); --rank-4: oklch(70% 0.321 329); /* Das Zeilenraster. Eine dunkle Zeile auf drei, bei 14 Prozent — im Mittel 4,7 Prozent Abdunklung. **Wo ein Bild eine Rasterung bekommt, kommt sie von hier.** Nicht nachgeschrieben, nicht nach Augenmaß angepaßt: die Werte sind eng, und danebenliegen sieht nicht nach »etwas anders« aus, sondern nach einem anderen Effekt. Die Biomleiste stand auf einer Zeile von zwei bei 28 Prozent — dreimal so dunkel, und weil Zeile und Lücke auf einem doppelt auflösenden Schirm ineinanderlaufen, war vom Raster nichts mehr zu sehen. Nur ein dunkles Bild \({K0097}\). `linear-gradient` mit `background-size` und nicht `repeating-linear-gradient`: eine Kachel, die der Browser nicht selbst ausrechnet, läßt nicht alle paar Zeilen eine ausfallen. Als Hintergrundschicht einzusetzen, nicht als Auflage in einem Pseudoelement — die Schicht liegt im selben `background` wie das Bild und kann von ihm nicht abweichen. */ --interlace: linear-gradient(180deg, oklch(0% 0 0 / 0.14) 0 1px, transparent 1px 3px); --interlace-size: 100% 3px; } /* Die Leiter hat fünf Stufen — base · phone 16.25rem · tablet 35rem · screen 60rem · widescreen 78.75rem. Die Rinne wächst an zweien davon; an den übrigen steht bewußt nichts, weil dort nichts zu ändern ist. Nur Deltas, nur min-width. */ /* Am Telefon ist die Rinne schmaler, sonst bleibt vom Inhalt nichts. Ab tablet steht sie auf den 40 px des Entwurfs und wächst nicht weiter — was darüber hinaus Platz ist, nimmt der Deckel measure. Nur Deltas, nur min-width: jede Stufe nennt, was sich ändert, und nichts sonst. */ :root { --gutter: var(--space); } @media (min-width: 35rem) { :root { --gutter: 2.5rem; --scale-base: 0.9375rem; --text-stage: 1.875rem; --text-head: 1.375rem; --text-label: 0.6875rem; } } @media (min-width: 60rem) { :root { --scale-base: 1.0625rem; --text-stage: 2.75rem; --text-head: 1.75rem; --text-label: 0.75rem; } } @media (resolution >= 2x) { :root { --pixel-grid: 4px; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Das Fundament — Kastenmodell, Grundschrift, und die Spuren jedes Slices. */ @layer base { *, *::before, *::after { box-sizing: border-box; } :where(body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd) { margin: 0; } :where(ul[role="list"], ol[role="list"]) { padding: 0; list-style: none; } html { font-size: 100%; -webkit-text-size-adjust: none; } body { font-family: "Oxanium", "Oxanium Fallback", system-ui, sans-serif; font-size: var(--text); line-height: 1.5; color: var(--ink); background: var(--ground); } :where(img, picture, svg) { display: block; max-inline-size: 100%; } :where(input, button, select, textarea) { font: inherit; color: inherit; } /* Ein Slice ist eine Zeile über die volle Breite \({K0031}\). Die Begrenzung trägt die benannte Spur, nicht ein Wrapper: Kinder landen in `content`, und was randlos laufen soll, sagt `grid-column: full`. Ausdrücklich keine Breitenangabe — der Slice ist Kind des einspaltigen Rasters und füllt dessen Spur. `width: 100vw` schlösse die Bildlaufleiste ein und ergäbe am Schreibtisch rund 15 px waagerechten Überlauf, der am Telefon nicht auftritt und deshalb spät auffällt. */ [data-slice] { display: grid; /* Der Rand wird gerechnet und steht als Variable bereit. Das ist der Unterschied, der zählt: ein Band, das innen teilen will, ersetzt nur die content-Spur und erbt denselben Rand. Als minmax\(gutter, 1fr\) würde die Rinne mit jeder inneren fr-Spur um den Platz streiten, und jedes Band käme auf einen anderen Rand — gemessen 40, 63, 77 und 110 px an vier Bändern derselben Seite \({K0057}\). */ --rand: max(var(--gutter), (100% - var(--measure)) / 2); grid-template-columns: [full-start] var(--rand) [content-start] minmax(0, 1fr) [content-end] var(--rand) [full-end]; } [data-slice] > * { grid-column: content; } } /* Solange ein Blatt im Top-Layer steht, bewegt sich die Seite darunter nicht. Ein Popover sperrt das Rollen **nicht** von selbst — anders als ein im modalen Zustand. `:has()` erledigt es ohne Skript, und die Regel gilt für jedes Popover, nicht nur für dieses eine \(Owner, 1. September 2026\). `scrollbar-gutter: stable` steht daneben, damit das Verschwinden des Rollbalkens die Seite nicht um seine Breite verspringen läßt. */ /* **Der Platz des Rollbalkens ist immer reserviert, nicht erst wenn er weg ist.** Genau hier stand `scrollbar-gutter: stable` zuerst — in der Regel darunter, also erst gültig, sobald das Blatt offen war. Da ist es zu spät: der Balken verschwindet im selben Moment, in dem die Reservierung greift, und die Seite springt um seine Breite. Sie muß vorher schon dastehen. */ :root { scrollbar-gutter: stable; } /* Solange ein Blatt im Top-Layer steht, bewegt sich die Seite darunter nicht. Ein Popover sperrt das Rollen **nicht** von selbst — anders als ein im modalen Zustand. Beide Elemente, weil je nach Browser das eine oder das andere rollt. */ :root:has([popover]:popover-open), :root:has([popover]:popover-open) body { overflow: hidden; } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Das Theme für Valheim — die vier Dinge, die je Spiel wechseln. Struktur ist allgemein, Farben sind spezifisch. Ein zweites Spiel legt eine Datei daneben und ändert nichts sonst; das ist die ganze Themefähigkeit ({K0029}). Was hier steht, ist die Palette — Icons, Karte und Biomfarben kommen aus den Spieldaten und nicht aus dem Stylesheet. */ @layer tokens { [data-theme="valheim"] { /* Die Bühnenleiste — Kupfer, wie das erste Erz, das man im Spiel schmilzt. Acht Bänder mit harten Kanten, symmetrisch um die Mitte: aus dem Entwurf gemessen, nicht nachempfunden. Der Farbton wandert von 38 an den Rändern auf 55 in der Mitte, was dem Metall den Schimmer gibt — ein Verlauf auf einem einzigen Ton sähe nach Farbfläche aus, nicht nach Licht. */ /* Die Zeilenraster liegen über dem Verlauf: ein Pixel Schwarz auf 28 Prozent, zwei Pixel Lücke. Das ist der Bildschirm, den die Schrift meint — ohne sie ist die Leiste eine Farbfläche mit Streifen, mit ihnen ist sie ein Monitor. Aus dem Entwurf gemessen. Als zweite Hintergrundebene statt als absolut gesetztes Pseudo-Element: spart einen Knoten und kann nicht verrutschen. Ein einfacher Verlauf mit fester Kachelgröße, nicht repeating: ein fortlaufender Verlauf spannt sich über die ganze Fläche und rundet seine Perioden gegen das Gerätepixelraster — dabei fällt jede paar Zeilen eine aus. Mit `background-size: 100% 3px` ist die Kachel exakt drei Pixel hoch und wiederholt sich sauber. */ --stage-scan: linear-gradient(180deg, oklch(0% 0 0 / 0.28) 0 1px, transparent 1px 3px); /* Der Scheitel stand auf 74 Prozent und war die hellste Stelle der Leiste — genau dort, wo der Titel steht. Gemessen ergab das 2,19 zu 1 gegen die Titelfarbe, nötig sind 3,0 für große Schrift. Die Reihe fiel erst ab 64 Prozent über die Grenze; 62 gibt Reserve, damit eine spätere Schriftgröße sie nicht sofort wieder reißt. Die Leiste wird dadurch etwas satter und weniger grell. Das ist eine Abweichung vom Entwurf, sie steht hier, und sie ist gemessen — so verlangt es AW22. Der Entwurf erfüllt an dieser Stelle kein AA. */ --stage-bar: linear-gradient(180deg, oklch(30% 0.09 40) 0 14%, oklch(45% 0.14 42) 0 28%, oklch(58% 0.18 45) 0 42%, oklch(62% 0.17 55) 0 50%, oklch(58% 0.18 45) 0 58%, oklch(45% 0.14 42) 0 72%, oklch(28% 0.08 38) 0 86%, oklch(16% 0.05 35) 0 100%); --stage-ink: oklch(97% 0.02 40); /* Die zehn Biome. Die Reihenfolge ist die des Spielfortschritts, nicht die des Alphabets — wer sie liest, liest den Weg. */ --biome-meadows: oklch(74% 0.14 130); --biome-forest: oklch(52% 0.10 150); --biome-swamp: oklch(44% 0.07 95); --biome-mountain: oklch(88% 0.03 230); --biome-plains: oklch(80% 0.13 85); --biome-mistlands: oklch(46% 0.05 280); --biome-ashlands: oklch(58% 0.19 35); --biome-deepnorth: oklch(84% 0.05 210); --biome-ocean: oklch(56% 0.10 235); --biome-edge: oklch(38% 0.02 260); } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Die Beta-Marke — ein Workbench-Gadget in Rot. */ @layer elements.beta_badge { @scope ([data-type="beta-badge"]) { /* Die drei Rot stehen hier und nicht in tokens.css. Der Satz darueber hiess einmal »waechst daraus eine zweite Stelle, wandern sie hoch«, und mit dem Statusfenster \({T0097}\) gab es die zweite Stelle — der Umzug ins `:root` war trotzdem falsch. **AW10 und {K0004} verbieten Ableitungen im `:root`**: ein gerechneter Ton steht an jedem Kontext, der die Grundfarbe setzt, damit er mitgeht, wenn sie sich aendert. Das Statusfenster rechnet dieselbe Zeile selbst. Dieselbe Rechnung an zwei Stellen ist der Preis, und er ist kleiner als ein Wert, der einfriert. Gewaehlt nach dem Amiga: die Flaeche ist das Rot der Palette abgedunkelt, die Lichtkante liegt darueber, die Schattenkante darunter. Weiss auf dem Grund misst 6,66 zu 1 und traegt damit auch die kleinste Stufe. */ :scope { /* **Aus der Palette gerechnet, nicht danebengeschrieben** ({T0096}, AW10). Hier standen drei eigene Rotwerte, und der Satz darueber nannte sie »das satte Rot der Palette« — sie waren es nicht: `--danger` steht bei 66 % Helligkeit, hier stand 50, und der Farbton wich um ein Grad ab. Kein Gestaltungswille, ein Abschreibfehler. Die Flaeche ist dunkler als `--danger`, und das bleibt so: sie traegt weisse Schrift, und dafuer braucht sie den Abstand. Die beiden Kanten rechnen symmetrisch aus ihr — dreizehn Punkte heller oben, dreizehn dunkler unten. */ --badge-face: oklch(from var(--danger) 0.50 c h); --badge-light: oklch(from var(--badge-face) calc(l + 0.13) c h); --badge-shadow: oklch(from var(--badge-face) calc(l - 0.13) c h); display: inline-block; padding: 0.375rem 0.5rem 0.3125rem; background: var(--badge-face); color: oklch(100% 0 0); /* Der Kasten der Workbench: aussen eine schwarze Linie, innen die beiden Kanten. Beides ohne Radius — eine gerundete Ecke gibt es auf einem Geraet mit 320 mal 256 Punkten nicht. */ border: 1px solid oklch(0% 0 0); box-shadow: inset 2px 2px 0 0 var(--badge-light), inset -2px -2px 0 0 var(--badge-shadow); font-family: "Press Start 2P", monospace; font-weight: 400; font-size: 0.5rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; /* Die Grundlinie der Pixelschrift sitzt tief; ohne die Korrektur haengt die Marke unter der Wortmarke statt neben ihr. */ translate: 0 -0.0625rem; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Ein Knopf — die Pixelkante aus dem Entwurf. */ @layer elements.button { @scope ([data-type="button"]) { :scope { display: grid; place-items: center; block-size: var(--control-height); padding-inline: 0.625rem; background: var(--link); border: 0; color: oklch(20% 0.05 130); font-family: "Press Start 2P", monospace; font-size: 0.8125rem; line-height: 1; text-transform: uppercase; cursor: pointer; /* Die Kante ist der ganze Knopf: zwei Innenschatten, hell oben links und dunkel unten rechts, zwei Pixel breit. Das ist die Form, die ein Knopf in einem Spiel dieser Zeit hatte — kein Rahmen, keine Rundung, keine Anfrage. Aus dem Entwurf gemessen, Werte unverändert. */ box-shadow: inset 2px 2px 0 oklch(88% 0.12 130), inset -2px -2px 0 oklch(52% 0.14 130); } /* **Gesperrt: dieselbe Form, nur ohne Farbe und ohne Kante.** Ein Knopf, der noch nicht kann, verschwindet nicht und wandert nicht — er steht da, wo er stehen wird, und sagt nur, daß er noch nicht bereit ist. Sonst springt die Zeile darunter in dem Moment, in dem man hinsieht. Die Pixelkante fällt weg, weil sie »drück mich« sagt; die Fläche wird die des Blattes, die Schrift verliert ihren Kontrast. `cursor` bleibt nicht auf `pointer`, denn nichts geschieht (Owner, 11. September 2026: der Knopf wird erst grün, wenn das Bild fertig ist). */ :scope:disabled { background: var(--surface-1, oklch(32% 0.01 260)); color: var(--ink-muted, oklch(62% 0.01 260)); box-shadow: none; cursor: default; } /* Gold statt Grün: dieselbe Gestalt, andere Rolle. Die Kanten folgen dem Ton, sonst säße eine grüne Fassung um eine goldene Fläche. */ :scope[data-tone="gold"] { background: var(--gold); color: oklch(24% 0.06 85); box-shadow: inset 2px 2px 0 oklch(90% 0.09 85), inset -2px -2px 0 oklch(58% 0.11 85); } :scope[data-tone="gold"]:where(:hover, :focus-visible) { background: oklch(from var(--gold) calc(l + 0.05) c h); } /* Rot: der Knopf nimmt etwas weg ({T0073S13}) - im Blatt des Ziels der Weg aus dem Bauplan zurueck auf die Itemseite. Dieselbe Gestalt, die Kanten folgen dem Ton. */ :scope[data-tone="red"] { background: var(--danger); color: oklch(18% 0.05 28); box-shadow: inset 2px 2px 0 oklch(82% 0.14 28), inset -2px -2px 0 oklch(46% 0.17 28); } :scope[data-tone="red"]:where(:hover, :focus-visible) { background: oklch(from var(--danger) calc(l + 0.05) c h); } /* Als Verweis: die Textauszeichnung des Browsers weg, die Gestalt des Knopfs bleibt. */ a:scope { text-decoration: none; } /* Der Knopf traegt die Aktionsfarbe, der Verweis die Verweisfarbe — die beiden Gruentoene und ihre Rollen stehen in {K0032}. */ :scope:where(:hover, :focus-visible) { background: oklch(from var(--link) calc(l + 0.05) c h); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Ein Schalter in Mischpultform — Gleiter in der Spur, Knopf darauf. */ @layer elements.checkbox { @scope ([data-type="checkbox"]) { :scope { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); cursor: pointer; user-select: none; } /* Selbst gezeichnet und nicht `accent-color`. Vorher stand hier das Gegenteil, mit gutem Grund: der Browser zeichnet ein Kästchen in seiner eigenen Form und kennt jeden Zustand. Diese Form gibt es aber nicht als Kästchen — ein Schieber, dessen Knopf über die Spur hinausragt, wie am Mischpult. Wer eine Gestalt will, die es nicht gibt, muß sie zeichnen. Was dabei erhalten bleibt: es ist weiterhin ein ``. Tastatur, Vorleser und Formularübertragung merken nichts davon, daß es anders aussieht. */ input { appearance: none; margin: 0; position: relative; inline-size: 2.25rem; /* Die Spur ist schmal — der Knopf darüber ist die Sache. */ block-size: 0.5rem; background: oklch(18% 0.008 260); cursor: pointer; /* Die Spur liegt vertieft: dunkel oben links, hell unten rechts. Dieselbe Richtung wie beim Eingabefeld, und aus demselben Grund — das Licht fällt für alles aus derselben Ecke. */ box-shadow: inset 1.5px 1.5px 0 oklch(9% 0.008 260), inset -1.5px -1.5px 0 oklch(30% 0.010 260); } /* Der Knopf: höher als die Spur, damit er darauf sitzt statt darin. Aus steht er links und ist dunkles Metall, an steht er rechts und trägt die Aktionsfarbe — dieselbe wie der Suchknopf, weil beides dasselbe sagt: hier ist etwas scharf. */ input::before { content: ""; position: absolute; inset-block: -0.3125rem; inset-inline-start: 0; inline-size: 1.125rem; background: oklch(32% 0.010 260); box-shadow: inset 2px 2px 0 oklch(46% 0.012 260), inset -2px -2px 0 oklch(16% 0.008 260); transition: inset-inline-start 90ms steps(3), background 90ms; } input:checked::before { inset-inline-start: calc(100% - 1.125rem); background: var(--link); box-shadow: inset 2px 2px 0 oklch(88% 0.12 130), inset -2px -2px 0 oklch(52% 0.14 130); } /* Kein weiches Gleiten: `steps(3)` rastet in drei Stufen, wie ein Schieber, der über Rasterpunkte läuft. Wer reduzierte Bewegung meldet, bekommt gar keine. */ @media (prefers-reduced-motion: reduce) { input::before { transition: none; } } input:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: 4px; } /* Gold statt Grün, wo zwei Reihen nebeneinander verschiedene Dinge schalten ({T0093}): auf der Karte die Ebenen in Grün, die Biome in Gold. Nur der Knopf wechselt die Farbe — Form, Weg und Rastung bleiben, weil es dieselbe Bedienform ist und nicht eine zweite. Die Glanzlichter werden aus der Grundfarbe gerechnet und nicht danebengeschrieben ({K0004}), mit denselben Abständen wie beim Grün: zwölf Punkte heller oben links, vierundzwanzig dunkler unten rechts. Ein Ton, der zweimal dasteht, weicht beim dritten Mal ab. */ :scope[data-tone="gold"] input:checked::before { background: var(--gold); box-shadow: inset 2px 2px 0 oklch(from var(--gold) calc(l + 0.12) c h), inset -2px -2px 0 oklch(from var(--gold) calc(l - 0.24) c h); } /* Der angeschaltete Zustand färbt auch die Beschriftung: wer über die Reihe blickt, sieht ohne Vergleich, was an ist. */ input:checked ~ span { color: var(--ink-bright); } /* Ein Schalter, der nichts bewirkt, nimmt auch keinen Zeiger an. Wie er dabei aussieht, entscheidet die Seite, die ihn deaktiviert — hier steht nur, daß er ruht. Der Vorleser sagt es ohnehin. */ :scope:has(input:disabled) { cursor: default; } input:disabled { cursor: default; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Kurze Etiketten — ohne Rahmen, die Farbe traegt die Aussage. */ @layer elements.chip { @scope ([data-type="chip"]) { :scope { font-family: ui-monospace, monospace; font-size: var(--text-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--link); /* Kein Rahmen und keine Flaeche. Ein Etikett, das schon durch Schrift, Farbe und Versalien aus dem Text heraussticht, braucht keinen zweiten Traeger — der Rahmen kostet Platz und traegt nichts. */ } /* Gold statt Gruen, wie am Knopf und am Schalter ({K0032}, {T0093}). Auf der Karte trennt es die Reglergruppe, die nach dem Ort fragt, von der, die nach der Art fragt: die Beschriftung traegt denselben Ton wie die Schalter darunter. Nur die Farbe wechselt — Schrift, Sperrung und Versalien bleiben, weil es dasselbe Etikett ist. */ :scope[data-tone="gold"] { color: var(--gold); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Ein Knopf in der Ecke einer Karte — flach, duenner grauer Rahmen. */ @layer elements.corner_button { @scope ([data-type="corner-button"]) { /* So groß wie das Zeichen der Marke in der Kopfzeile: 1,875 rem. Der Owner hat das als Mass genannt, damit die Symbole erkennbar bleiben — darunter wird ein Chevron zum Strich. */ :scope { display: grid; place-items: center; inline-size: 1.875rem; aspect-ratio: 1; padding: 0; background: none; /* Flach, mit dünnem grauem Rahmen. Keine Fläche und keine Farbe am Knopf selbst: zwei farbige Kacheln nebeneinander in der Ecke einer Karte, die schon eine Biomfarbe trägt, wären eine Farbe zuviel. Der Rahmen sagt »hier ist etwas zu drücken«, das Zeichen sagt was. */ border: 1px solid oklch(from var(--ink-quiet) l c h / 0.45); color: var(--ink-quiet); font-size: 1.0625rem; line-height: 1; cursor: pointer; } /* Die Farbe trägt das Zeichen, nicht der Knopf. */ :scope[data-tone="action"] { color: var(--link); } :scope[data-tone="gold"] { color: var(--gold); } /* Beim Zeigen tritt der Rahmen an die Farbe des Zeichens heran — die einzige Bewegung, die keine ist: nichts springt, nichts wächst. */ :scope:where(:hover, :focus-visible) { border-color: currentColor; background: oklch(from currentColor l c h / 0.12); } :scope:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; } /* Der Chevron zeigt nach rechts, solange zu ist, und dreht beim Öffnen nach unten — der übliche Aufklappzeiger. Die Drehung sitzt am Zeichen und nicht am Knopf, damit der Rahmen stehen bleibt. */ :scope[data-part="toggle"] span { display: block; transition: rotate 120ms ease; } @media (prefers-reduced-motion: reduce) { :scope[data-part="toggle"] span { transition: none; } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Der Spendenknopf — weiss, gerundet, die Tasse davor. */ @layer elements.donate_button { @scope ([data-type="donate-button"]) { :scope { /* Das Mass kommt vom Kontext, die Form rechnet der Knopf daraus: Rundung, Innenabstand und Tasse wachsen mit der Hoehe. Ohne Vorgabe ist er so hoch wie jedes Bedienelement; der Fussstreifen der Karte gibt ihm eine niedrigere. */ --hoehe: var(--spende-hoehe, var(--control-height)); /* Symbol neben Text: die eine Reihe, fuer die Flex erlaubt ist. */ display: inline-flex; align-items: center; gap: calc(var(--hoehe) * 0.22); block-size: var(--hoehe); padding-inline: calc(var(--hoehe) * 0.3) calc(var(--hoehe) * 0.42); /* Weiss und das Dunkel von Ko-fi, 32 32 32 in RGB — gemessen 16 zu 1. */ background: oklch(100% 0 0); color: oklch(24.4% 0 0); border-radius: calc(var(--hoehe) * 0.3); font-size: var(--spende-schrift, var(--text-small)); font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; } img { block-size: calc(var(--hoehe) * 0.52); inline-size: auto; } /* Beim Zeigen tritt die Flaeche einen Hauch zurueck und die Tasse wackelt, wie auf Ko-fi selbst. Die Flaeche springt, die Tasse bewegt sich nur ueber transform ({K0036}). */ :scope:where(:hover, :focus-visible) { background: oklch(93% 0 0); } :scope:where(:hover, :focus-visible) img { animation: tasse-wackeln 600ms ease-in-out; } /* Der Fokusring liest das eine Gruen wie jeder andere ({K0234}). */ :scope:focus-visible { outline: 2px solid var(--link); outline-offset: var(--space-tight); } @media (prefers-reduced-motion: reduce) { :scope:where(:hover, :focus-visible) img { animation: none; } } } /* `@keyframes` kennt keinen Scope und steht darum daneben, mit einem Namen, der sagt, wem er gehoert. */ @keyframes tasse-wackeln { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Die Griffleiste am unteren Rand einer Karte. */ @layer elements.drawer_handle { @scope ([data-type="drawer-handle"]) { /* Die Griffleiste am unteren Rand — sechzehn Pixel, abgedunkelt, und sie liegt tiefer als die Karte. »Tiefer« ist hier keine Farbe, sondern eine Kante: der Schatten sitzt oben und innen, wie bei allem Eingelassenen in diesem Entwurf. Das Licht fällt für Feld, Spur und Leiste aus derselben Ecke, und wer die Richtung tauscht, macht aus der Vertiefung eine Erhebung. Über die ganze Breite und nicht als Knopf in der Ecke: ein Streifen ist ein größeres Ziel, und seine Lage sagt, wohin die Karte aufgeht. */ :scope { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; place-items: center; /* Die Höhe kommt von dem, was den Griff trägt — die Karte rechnet mit ihr, wenn sie ihren Inhalt mittig setzt. Der Rückfall steht daneben, damit das Element auch allein steht: ein Bauteil, das ohne seinen Aufrufer zusammenfällt, ist keines. */ block-size: var(--griff, 16px); padding: 0; border: 0; background: oklch(0% 0 0 / 0.30); box-shadow: inset 0 2px 0 oklch(0% 0 0 / 0.38), inset 0 -1px 0 oklch(100% 0 0 / 0.05); cursor: pointer; } /* Das Chevron gezeichnet, nicht gesetzt: ein Winkel aus zwei Kanten an einem gedrehten Quadrat. Ein Schriftzeichen ginge auch, aber »breit gezogen« hiesse dann, eine Glyphe zu verzerren — und eine verzerrte Glyphe sieht aus wie ein Fehler, während eine gezeichnete Linie einfach breit ist. `transform` und nicht die Einzeleigenschaften `rotate`/`scale`: dort liegt die Reihenfolge fest, und `scale` käme nach der Drehung, würde also die Diagonale strecken statt die Breite. Hier steht `scaleX` zuerst und wirkt damit von aussen. */ :scope::before { content: ""; inline-size: 5px; block-size: 5px; /* Hellgrün, nicht grau (Owner, 1. September 2026). Auf der abgedunkelten Leiste ist es das einzige Farbige, und damit findet das Auge den Griff, ohne daß er eine Fläche braucht. Die Primaerfarbe — es gibt nur eine ({T0096}). */ border-inline-end: 2px solid var(--link); border-block-end: 2px solid var(--link); transform: translateY(-2px) scaleX(2.4) rotate(45deg); } /* Beim Zeigen wird es heller statt anders: eine zweite Farbe hiesse, der Griff täte etwas anderes. */ :scope:where(:hover, :focus-visible)::before { border-color: oklch(from var(--link) calc(l + 0.08) c h); } :scope:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: -2px; } @media (prefers-reduced-motion: no-preference) { :scope::before { transition: transform 140ms ease; } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Ein Eingabefeld — eingelassen, mit Beschriftung darueber. */ @layer elements.field { @scope ([data-type="field"]) { :scope { display: grid; gap: 0.4375rem; min-inline-size: 0; } /* Der chip traegt sonst die Verweisfarbe — hier ist er eine Feldbeschriftung und keine Aussage, also gedaempft und 10 px. Aus dem Entwurf gemessen. */ [data-type="chip"] { font-size: 0.625rem; letter-spacing: 0.12em; color: var(--ink); } input { min-inline-size: 0; /* Die Höhe kommt aus dem Token und nicht aus dem Innenabstand: so ist sie dieselbe wie beim Knopf, auch wenn eine Schrift anders fällt. Der Innenabstand richtet nur noch waagerecht aus. */ block-size: var(--control-height); padding: 0 0.75rem; background: var(--surface-0); border: 0; color: oklch(90% 0.005 90); font-family: ui-monospace, monospace; font-size: 0.8125rem; letter-spacing: 0.04em; /* Die Kante liegt umgekehrt zum Knopf: dunkel oben links, hell unten rechts. Das ist kein Zierat, sondern die Aussage — ein Knopf steht hervor, ein Feld ist eingelassen, und das Licht fällt für beide aus derselben Richtung. Wer die Reihenfolge tauscht, macht aus dem Feld einen Knopf, den niemand drücken kann. Aus dem Entwurf gemessen. */ box-shadow: inset 1.5px 1.5px 0 oklch(9% 0.008 var(--hue-surface)), inset -1.5px -1.5px 0 oklch(32% 0.014 var(--hue-surface)); } /* min-inline-size: 0 am Feld ist kein Zierat: ein Eingabefeld bringt eine voreingestellte Mindestbreite mit, die eine 1fr-Spur ueberstimmt und die Zeile am Telefon aus dem Raster schiebt. */ input::placeholder { color: var(--ink-quiet); } /* Der Fokusring liegt innen, damit er die Kante nicht überdeckt: das Feld behält seine Vertiefung und bekommt eine Fassung. In der Farbe des Knopfs daneben, nicht in der Aktionsfarbe: Feld und Knopf sind ein Paar, und ein Feld, das im Fokus ein anderes Grün trägt als der Knopf, der es absendet, sieht aus wie zwei Bauteile (Owner, 2. September 2026). Dasselbe Token wie `button`, damit es exakt dasselbe Grün ist und bleibt. */ input:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: -2px; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Item-Icons aus dem Spiel. */ @layer elements.game_icon { @scope ([data-type="game-icon"]) { :scope { inline-size: var(--space-wide); block-size: auto; /* Die Vorlagen sind Pixelgrafik. Ohne diese Zeile interpoliert der Browser beim Hochskalieren und macht aus harten Kanten Matsch — dasselbe Problem wie bei der Pixelschrift, nur ohne Rundung als Ausweg \({K0044}\). */ image-rendering: pixelated; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Die Schriften — selbst ausgeliefert, mit Metrik-Rückfall. Kein Element im Dokumentkopf wird dargestellt, deshalb steht hier kein Scope: was dieses Paket an CSS beiträgt, sind die Schriftdeklarationen selbst. */ @layer tokens { @font-face { font-family: "Oxanium"; src: url("/fonts/oxanium.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Press Start 2P"; src: url("/fonts/press-start-2p.woff2") format("woff2"); font-weight: 400; font-display: swap; } /* Der Metrik-Rückfall: er nimmt dem Schriftwechsel den Sprung, ohne den Text zu verstecken ({K0039}). Die Werte sind an Oxanium gemessen — Aufstrich 790, Abstrich 210, Zeilenabstand 250 von 1000 Einheiten. */ @font-face { font-family: "Oxanium Fallback"; src: local("Helvetica Neue"), local("Arial"); ascent-override: 79%; descent-override: 21%; line-gap-override: 25%; size-adjust: 99%; } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Ueberschriften — Pixelschrift, auf ihr Raster gerundet. */ @layer elements.heading { @scope ([data-type="heading"]) { :scope { font-family: "Press Start 2P", monospace; font-weight: 400; color: var(--ink-bright); text-wrap: pretty; /* Die Pixelschrift hat keine Unterlaenge im Metriksinn, deshalb steht die Zeilenhoehe hier immer ausgeschrieben \({K0044}\). 1.4 laesst zwischen zwei Zeilen genau eine halbe Zeichenhoehe. */ line-height: 1.55; } /* KEINE Rundung auf das Pixelraster. Sie war hier gedacht und ist hier falsch: der Entwurf gibt 28, 22 und 13 px vor, und round\(\) verschiebt jeden dieser Werte auf das nächste Vielfache — aus 27,5 würden 24, aus 13 würden 16. Wo der Entwurf eine Größe setzt, gilt sie; die Rundung bleibt dem vorbehalten, was wir selbst wählen ({K0059}). Die Leiter trifft die Werte ohnehin fast genau: 27,5 gegen 28, 21,6 gegen 22, 13,4 gegen 13. */ :scope:is(h1) { font-size: var(--text-head); } :scope:is(h2) { font-size: var(--text-head); } :scope:is(h3) { font-size: var(--text-large); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Ein Knopf, der nur ein Zeichen traegt. */ @layer elements.icon_button { @scope ([data-type="icon-button"]) { :scope { display: grid; place-items: center; inline-size: var(--space-open); aspect-ratio: 1; background: none; border: 0; color: var(--ink-quiet); font-size: var(--text-large); line-height: 1; cursor: pointer; } /* Keine Fläche, kein Rahmen: die Farbe ist die ganze Rückmeldung. Ein Knopf ohne Fläche, der beim Zeigen eine bekäme, spränge — und die Aktionsfarbe sagt dasselbe, ohne das Layout anzufassen. */ :scope:where(:hover, :focus-visible) { color: var(--link); } /* **Das × im Kopf eines Blattes** ({T0084}, Owner am 11. September 2026: »der schliessen button im popover für download und für share entspricht nicht dem was im item popover zu sehen ist«). Es ist doppelt so groß wie ein gewöhnliches Zeichen, weil es als einziges Bedienelement in einer Kopfzeile steht, die sonst nur Text trägt — und weil ein Blatt sich schließen lassen muß, bevor man sucht, wo. Golden beim Zeigen und nicht grün: Grün ist die Handlungsfarbe, und Schließen ist keine Handlung, sondern ihr Ende. Die Farbe des Blattrahmens sagt statt dessen »dieses Blatt«. Die Maße standen im Gegenstandsblatt und nirgends sonst, weshalb die Kartenblätter ein kleineres × trugen. Hier stehen sie einmal, und jedes Blatt bekommt dasselbe; **wo** es sitzt, entscheidet weiter das Blatt. */ :scope[data-rolle="schliessen"] { inline-size: calc(var(--space-open) * 2); font-size: calc(var(--text-large) * 2); } :scope[data-rolle="schliessen"]:where(:hover, :focus-visible) { color: var(--gold); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Verweise — eine Stelle, an der Farbe, Fokus und Zustand festliegen. */ @layer elements.link { @scope ([data-type="link"]) { :scope { color: var(--link); text-decoration: none; } /* Der Fokusring steht hier und nur hier. Das ist der eigentliche Gewinn des Elements: eine Stelle statt vier, und keine Chance, dass eine davon vergessen wird. :focus-visible statt :focus, damit er bei der Maus nicht erscheint — wer klickt, sieht wohin er geklickt hat. */ :scope:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: var(--space-tight); } :scope:where(:hover) { text-decoration: underline; text-underline-offset: var(--space-tight); } /* Die aktuelle Seite wird aus dem Zustand gelesen, nicht aus einer Klasse: aria-current sagt es dem Screenreader ohnehin, und ein zweiter Traeger derselben Aussage koennte von ihr abweichen \({K0005}\). */ :scope[aria-current] { text-decoration: underline; text-underline-offset: var(--space-tight); } /* Das Chevron rueckt beim Ueberfahren nach, nicht der ganze Verweis: eine Bewegung ueber transform, die den Aufbau nicht anfasst \({K0036}\). */ > span { display: inline-block; margin-inline-start: 0.35em; transition: transform 120ms ease-out; } :scope:where(:hover, :focus-visible) > span { transform: translateX(0.15em); } @media (prefers-reduced-motion: reduce) { > span { transition: none; } :scope:where(:hover, :focus-visible) > span { transform: none; } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Das Zeichen der Marke — Flaeche plus Maske, beide Farben aus dem Theme. */ @layer elements.logo_picture { @scope ([data-type="logo-picture"]) { :scope { display: grid; place-items: center; inline-size: 1.875rem; aspect-ratio: 1; background: var(--brand); /* Dieselbe Kante wie der Startknopf, nur schmaler: anderthalb Pixel. Sie macht aus dem Feld ein Objekt statt einer Farbfläche. Aus dem Entwurf gemessen. */ box-shadow: inset 1.5px 1.5px 0 oklch(from var(--brand) calc(l + 0.14) c h), inset -1.5px -1.5px 0 oklch(from var(--brand) calc(l - 0.16) c h); } /* Das Signet als Maske auf einer Flaeche in der Grundfarbe. Kein zusaetzlicher Knoten, und ein Themewechsel aendert zwei Variablen. */ /* 62 Prozent. Der Wert war nie das Problem — die Ansicht des Zeichens war es: sie lag auf dem Vorschub statt auf der Tinte, und die letzten 125 Einheiten davon sind der Abstand zum nächsten Buchstaben. Das Zeichen saß dadurch links im Feld, und Vergrößern verdeckte den Fehler, statt ihn zu beheben. Seit die Ansicht auf der Tinte liegt, sitzt es mittig, und 62 Prozent lassen ihm wieder Luft. */ :scope::before { content: ""; inline-size: 62%; aspect-ratio: 1; background: var(--ground); mask-image: url("/brand/signet.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Die Wortmarke. */ @layer elements.logo_text { @scope ([data-type="logo-text"]) { :scope { font-family: "Press Start 2P", monospace; font-weight: 400; font-size: 0.875rem; line-height: 1; letter-spacing: 0.04em; color: var(--ink); } /* b und i tragen hier keine Betonung, sondern Auszeichnung ohne Stimme — genau wofuer die beiden Elemente seit HTML5 gedacht sind. Die Kursive wird zurueckgenommen, weil die Pixelschrift keine hat und der Browser sie sonst schraeg stellt. */ > i { font-style: normal; color: var(--brand); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Kennzahl ueber Beschriftung. */ @layer elements.metric { @scope ([data-type="metric"]) { :scope { display: grid; gap: var(--space-tight); } /* Der Wert steht im Markup vor der Beschriftung, weil er die Aussage ist — die Beschriftung erklaert ihn. Im Raster stehen sie in derselben Reihenfolge; es gibt keinen Grund, sie visuell zu tauschen. */ > dd { margin: 0; font-family: ui-monospace, monospace; font-size: var(--text-large); color: var(--link); } > dt { font-family: ui-monospace, monospace; /* 12 px liegt zwischen zwei Stufen der Leiter — 10,5 und 13,4. Der Entwurf setzt es so, und AW22 gibt ihm recht: eine Beschriftung unter einer Zahl braucht Gewicht, ohne mit ihr zu konkurrieren. */ font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-quiet); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Das Bild folgt seiner Spur und hält sein Seitenverhältnis. */ @layer elements.picture { @scope ([data-type="picture"]) { :scope { display: block; max-inline-size: 100%; block-size: auto; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Eine Pille — Optionsfeld mit Rangfarbe, das goldene Dreieck über der gewählten. */ @layer elements.pill { @scope ([data-type="pill"]) { :scope { /* Der Rang als Farbe. Weiß ist der Ruhewert und zugleich der erste Rang — deshalb kann die Farbe nicht auch aktiv gegen inaktiv sagen: das täte sie zweimal. Aktiv sagt die Form. */ --pill: var(--rank-1); position: relative; display: inline-grid; /* Platz für das Dreieck über der Pille, im eigenen Kasten und nicht als negativer Versatz (AW5). */ padding-block-start: var(--space-snug); cursor: pointer; } :scope[data-rank="2"] { --pill: var(--rank-2); } :scope[data-rank="3"] { --pill: var(--rank-3); } :scope[data-rank="4"] { --pill: var(--rank-4); } /* Das Optionsfeld bleibt ein Optionsfeld — Tastatur, Vorleser und Gruppe merken nichts —, liegt aber unsichtbar über der ganzen Pille, damit jeder Treffer zählt. */ input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } /* Die Pille selbst: eine Umrandung in der Rangfarbe, die Ziffer darin. Aus dem Entwurf gemessen — umrandet, nicht gefüllt, mit leicht gebrochener Ecke; die anderthalb Pixel sind die Kante von Marke und Feld ({K0062}). */ span { display: grid; place-items: center; min-inline-size: 2.4em; block-size: 1.6em; padding-inline: 0.4em; border: 1.5px solid var(--pill); border-radius: 0.2em; color: var(--pill); font-family: ui-monospace, monospace; font-size: var(--text-micro); line-height: 1; font-variant-numeric: tabular-nums; } /* Das goldene Dreieck über der gewählten Pille, mittig, mit der Spitze nach unten (Owner, 2. September 2026). Gold heißt im Blatt »gehört hierher« — Ecke, Rahmen, Orte —, und die gewählte Stufe gehört dazu. Zwei Kanten ohne Fläche ergeben die Form; ein SVG wäre eine Datei für drei Striche. */ :scope::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; margin-inline: auto; inline-size: 0; block-size: 0; border-inline: 0.3em solid transparent; border-block-start: 0.35em solid var(--gold); opacity: 0; } :scope:has(:checked)::before { opacity: 1; } /* Der Fokusring in der Aktionsfarbe, außen um die Pille — vom Dreieck darüber durch Form, Ort und Farbe unterschieden. */ input:where(:focus-visible) ~ span { outline: 2px solid var(--link); outline-offset: 2px; } /* Beim Zeigen ein Hauch der eigenen Farbe auf der Fläche: sagt »diese ist gemeint«, ohne den Rang zu ändern. */ :scope:hover span { background: color-mix(in oklab, var(--pill) 12%, transparent); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Der Fortschrittsbalken — Rahmen, Fuellung, Groesse. */ @layer elements.progress { @scope ([data-type="progress"]) { /* Hundert mal fuenfzehn Pixel: ein Prozent je Pixel, wie der Owner es festgelegt hat. Das ist der eine Ort, an dem eine Pixelzahl richtig ist — sie ist die Aussage, nicht das Mass. */ :scope { inline-size: 100px; block-size: 15px; appearance: none; border: 1px solid oklch(72% 0.13 85); background: oklch(20% 0.02 260 / 0.8); } /* Zwei Schreibweisen fuer dieselbe Sache: WebKit und Firefox nennen die Fuellung verschieden, und ein Selektor, den ein Browser nicht kennt, wirft in manchen Fassungen die ganze Regel weg. */ :scope::-webkit-progress-bar { background: oklch(20% 0.02 260 / 0.8); } :scope::-webkit-progress-value { background: var(--gold, oklch(80% 0.15 85)); transition: inline-size 0.2s linear; } :scope::-moz-progress-bar { background: var(--gold, oklch(80% 0.15 85)); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Fliesstext. */ @layer elements.prose { @scope ([data-type="prose"]) { :scope { font-size: var(--text); line-height: 1.6; color: var(--ink); /* In ch, nicht in rem: die Zeilenlaenge ist eine Frage der Zeichen je Zeile und nicht der Breite in Pixeln. 66 ist der obere Rand dessen, was sich noch bequem liest. */ max-inline-size: 58ch; text-wrap: pretty; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Ein quadratischer Knopf mit Flaeche fuer ein Bild oder ein Zeichen ({T0106}). */ @layer elements.quick_button { @scope ([data-type="quick-button"]) { /* **Er sieht aus wie `button`, nur quadratisch und ohne Wort** (Owner, 14. September 2026: »der goldene button sieht exakt genauso aus wie der zufall-button im geoeffneten, nur eben mit dem wuerfel darauf«). Also dieselbe Pixelkante: zwei Innenschatten, hell oben links und dunkel unten rechts, zwei Pixel breit, die Werte aus button.css unveraendert. Die Groesse sagt der Aufrufer ueber `--quick-size`; der Ruhewert ist die Hoehe eines Knopfs, damit er neben einem stehen koennte. Im Streifen des Panels ist er so breit wie der Streifen abzueglich Rand. */ :scope { display: grid; place-items: center; inline-size: var(--quick-size, var(--control-height)); /* Quadratisch, solange der Aufrufer keine Hoehe gibt; im Streifen des Panels teilen sich zwei Knoepfe die Hoehe (Owner, 14. September 2026: »vertikal im grid mit gap, aber beide den platz nutzend«), dort setzt der Aufrufer --quick-block. */ block-size: var(--quick-block, var(--quick-size, var(--control-height))); padding: 0; border: 0; text-decoration: none; line-height: 1; cursor: pointer; /* Der stille Ton: dunkles Grau, auf dem die Kante sichtbar bleibt (Owner: »mit einem dunklen grau, das die erhabenheit gut sichtbar macht«). Die Kanten folgen dem Ton wie bei jedem Knopf: hell aus der Flaeche heraus, dunkel in sie hinein. */ background: oklch(34% 0.012 260); color: var(--gold); box-shadow: inset 2px 2px 0 oklch(52% 0.012 260), inset -2px -2px 0 oklch(20% 0.012 260); } :scope:where(:hover, :focus-visible) { background: oklch(39% 0.012 260); } /* Gold: Flaeche, Schrift und Kanten wie am Zufallsknopf (button.css, Ton gold) - Werte unveraendert, damit beide dieselbe Fassung tragen. */ :scope[data-tone="gold"] { background: var(--gold); color: oklch(24% 0.06 85); box-shadow: inset 2px 2px 0 oklch(90% 0.09 85), inset -2px -2px 0 oklch(58% 0.11 85); } :scope[data-tone="gold"]:where(:hover, :focus-visible) { background: oklch(from var(--gold) calc(l + 0.05) c h); } :scope:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; } /* Das Bild laesst rundum Flaeche stehen, sonst sieht der Knopf aus wie ein Bild mit Rand. Sieben Zehntel sind aus dem Entwurf des Owners gemessen: rund 56 auf 80. */ :scope > [data-type="picture"] { inline-size: 70%; block-size: 70%; object-fit: contain; } /* Der goldene Stern des Favoritenknopfs: leer, solange nichts gemerkt ist, gefuellt danach - derselbe Zustand wie am Stern der Titelzeile, gesetzt vom Skript ueber data-gemerkt. Die Groesse folgt dem Knopf, nicht der Schrift der Seite. */ :scope > span { font-size: calc(var(--quick-size, var(--control-height)) * 0.55); } /* Der Wuerfelpfeil ist schwarz auf Gold (Owner: »einen schwarzen reroll pfeil«) - dieselbe dunkle Schrift wie das Wort ZUFALL. */ :scope[data-tone="gold"] > span { color: oklch(24% 0.06 85); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Ein Bildstreifen als Hintergrund einer Leiste. */ @layer elements.strip { @scope ([data-type="strip"]) { :scope { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; /* Gedämpft, weil darüber Text steht: das Bild ist Stimmung und nicht Inhalt. */ opacity: 0.55; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Der Bedienstreifen — Anordnung, Flaeche und die Schrift darauf. */ @layer widgets.control_bar { @scope ([data-type="control-bar"]) { /* `flex-wrap` statt eines Haltepunkts — wird es eng, rutschen die Regler unter die Suche. Die Zeilenrinne ist größer als die Spaltenrinne, damit die beiden dann als zwei Sachen lesbar bleiben statt als eine gedrängte. Dieselbe Bauart wie ein Raster mit `auto-fill`: kein Media Query, der eine Breite rät, die flex ohnehin kennt. `space-between` und kein `margin-inline-start: auto` an den Reglern. Beide schieben sie nach rechts, solange die Zeile geteilt ist — aber nach dem Umbruch stehen sie allein, und dann setzt `auto` sie an den rechten Rand, wo nichts mehr ist, womit sie bündig wären. */ :scope { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 2rem; padding: 1rem 1.25rem; /* Der Streifen ist ein Container: die Regler antworten auf seine Breite, nicht auf das Fenster (how-we-build.md). */ container-type: inline-size; /* Zehn Prozent Deckkraft: der Streifen hebt sich ab, ohne eine eigene Fläche zu werden. Er bleibt ein aufgehellter Ausschnitt des Seitengrunds, und die Seite behält ihr Dunkel. Symmetrisch in beiden Modi — im Hellen dieselben zehn Prozent in Schwarz. Die Aussage ist »etwas näher am Betrachter«, und die gilt in beide Richtungen. */ background: light-dark(oklch(0% 0 0 / 0.1), oklch(100% 0 0 / 0.1)); /* Die Pixelkante einer erhöhten Fläche: hell oben links, dunkel unten rechts, wie Gebietsblock und Karte. */ box-shadow: inset 2px 2px 0 oklch(33% 0.014 var(--hue-surface)), inset -2px -2px 0 oklch(12% 0.010 var(--hue-surface)); /* Die drei Ink-Stufen eine Stufe kräftiger, in beide Richtungen. Der Streifen liegt im Dunkelmodus bei rund 26 Prozent Helligkeit und damit über --surface-4; die Leiter in tokens.css ist bis --surface-2 geprüft. --ink-quiet stünde dort bei 3,5 zu 1 und fiele durch. Auf einer aufgehellten Fläche muß die Schrift es auch sein. Am Container gesetzt und nicht in den Elementen überschrieben: field, button und checkbox lesen weiter dieselben Tokens, die sie immer lesen — die sagen hier etwas anderes. Ein Element, das morgen dazukommt, ist ohne Zutun richtig. Die Begründung steht in manual/web/03-tokens.md. */ --ink: light-dark(oklch(24% 0.008 var(--hue-surface)), oklch(82% 0.008 var(--hue-surface))); --ink-quiet: light-dark(oklch(36% 0.008 var(--hue-surface)), oklch(72% 0.008 var(--hue-surface))); --ink-bright: light-dark(oklch(16% 0.005 90), oklch(95% 0.005 90)); } /* Die Suche wächst nicht in den Freiraum: ein Feld von neunhundert Pixeln neben sechs Reglern sieht nicht nach zwei Bedienungen aus, sondern nach einer verunglückten. Sie nimmt 26 rem und gibt davon ab, wenn es eng wird. */ [data-type="search-form"] { flex: 0 1 26rem; } /* Die Regler, mobile first: ein Raster mit zwei exakt gleich breiten Spalten und 8 px Lücke, über die ganze Breite des Streifens, damit die sechs Schalter untereinander fluchten (Owner, 2. September 2026). `minmax(0, 1fr)` und nicht `1fr`: eine Spalte darf nicht breiter werden, weil ihr Wort länger ist — sonst stünden die Schalter der rechten Spalte nicht mehr auf einer Linie. Die Reglerreihe sitzt auf Höhe des Feldes, nicht auf Höhe seiner Beschriftung: der Streifen richtet an der Unterkante aus, und ohne die Mindesthöhe stünden die Regler am Boden des Etiketts. */ /* Die Zeile unter den Reglern ({T0052}) nimmt eine eigene Zeile des Streifens — sonst stünde sie neben ihnen, sobald der Streifen in einer Reihe läuft. Was sie sagt, gehört der Seite. */ [data-part="options-note"] { flex: 1 1 100%; /* Mittig unter den Reglern und sechzehn Punkte darunter (Owner, 7. September 2026): sie gehört zu ihnen, steht aber nicht in ihrer Reihe. */ margin: 16px 0 0; text-align: center; } /* Der Behaelter der Gruppen traegt ihren Abstand ({T0093}, Owner, 11. September 2026). **Ein Raster mit `gap` und keine Abstaende an den Gruppen selbst**: ein `margin` am zweiten Formular gaelte auch dort, wo gar kein erstes steht, und muesste dann wieder weggeregelt werden. Der `gap` gilt nur zwischen zweien — gibt es nur eine, gibt es nichts zu trennen. Er steht hier und nicht am Streifen, weil der Streifen auf der Kartenseite `display: block` traegt: dort gibt es keine Suche, neben die etwas zu legen waere, und ein Block kennt kein `gap`. Genau deshalb stapelten sich die beiden Gruppen dort ohne jeden Abstand, obwohl am Streifen eine Zeilenrinne stand. `--space-open` ist die Stufe ueber der Grundstufe, Faktor 1.618: 22,6 bis 27,5 Punkte je nach Breite. Sie muss deutlich groesser sein als der Abstand **innerhalb** einer Gruppe — sonst gehoert das Etikett optisch zur Reihe darueber statt zu seiner eigenen. */ [data-part="gruppen"] { display: grid; gap: var(--space-open); flex: 1 1 100%; } /* Das Formular traegt nichts mehr als seine Semantik; die Breite kommt vom Raster darueber, die Anordnung vom
darin. */ [data-part="gruppe"] { /* Ein
bringt Rahmen, Innenabstand und eine Mindestbreite aus dem Browser mit, und alle drei stehen dem Raster im Weg. `min-inline-size: 0` ist der unbekannteste davon: ohne ihn nimmt ein fieldset `min-content` als Untergrenze und laesst sich in einem Flex- oder Grid-Kind nicht schmaler rechnen, als sein laengstes Wort ist. */ border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 0.5rem; min-block-size: var(--control-height); } /* Der Bereichsmarker (Owner, 11. September 2026): das Etikett in der Schrift jedes anderen — Monospace, Versalien, gesperrt — und darunter die Linie ueber die volle Breite. **Die Linie nimmt `currentcolor`.** Damit steht sie nie in einer anderen Farbe als ihr Etikett, ohne dass der Ton zweimal geschrieben waere ({K0004}); wer die Gruppe umfaerbt, faerbt beide. Die Abstaende kommen aus der Leiter und nicht als Zahl: `tight` haelt Etikett und Linie als ein Zeichen zusammen, `close` setzt den Abstand zu den Schaltern. `close` traegt den Faktor 0.618 und ist damit die Stufe des Goldenen Schnitts selbst — sie liegt je nach Breite bei 8,7, 9,3 und 10,5 Punkten, auf der schmalen also fast genau auf den genannten acht. */ [data-part="gruppe"] > legend { inline-size: 100%; padding-block-end: var(--space-tight); margin-block-end: var(--space-close); border-block-end: 1px solid currentcolor; } /* Ab 35 rem Streifenbreite — die Tablet-Stufe der Leiter, hier als Container-Abfrage — wieder die Reihe, die umbricht, wenn es eng wird; die Zeilenrinne bleibt bei 8 px. */ @container (min-width: 35rem) { [data-part="gruppen"] { flex: 0 1 auto; } [data-part="gruppe"] { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; } /* Stehen zwei Gruppen da, nimmt der Behaelter die volle Breite ({T0093}) — sonst rutschte er neben die Suche und die beiden waeren zusammen so schmal wie eine. Ohne obere Reihe aendert sich nichts: `:has` greift dann nicht. */ :scope:has([data-reihe="lead"]) [data-part="gruppen"] { flex: 1 1 100%; } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Der Rechtsvermerk — leise, aber lesbar. */ @layer widgets.footer_legal { @scope ([data-type="footer-legal"]) { :scope { display: grid; gap: var(--space-tight); justify-items: center; text-align: center; /* 80 Zeichen — die Breite, bei der eine Zeile noch in einem Blick erfaßt wird. In ch gemessen und nicht in rem: die Grenze ist eine Zahl von Zeichen, keine Länge, und sie bleibt richtig, wenn jemand die Schrift größer stellt. */ max-inline-size: 80ch; margin-inline: auto; /* Abstand nach oben: der Vermerk gehört zum Fuß, steht aber nicht auf einer Ebene mit Name und Spieleliste. */ margin-block-start: var(--space-open); } /* Kleiner als der Fliesstext, aber nicht kleiner als das, was noch bequem zu lesen ist. Ein Rechtsvermerk, den niemand entziffern kann, erfuellt seinen Zweck nicht — er soll leise sein, nicht versteckt. */ :scope :where([data-type="prose"], small) { font-size: var(--text-small); color: var(--ink-quiet); max-inline-size: none; } > p { margin: 0; } /* Die Pflichtverweise stehen ueber dem Vermerk und nebeneinander: sie sind zwei Ziele und keine Liste, und ein ul mit zwei Eintraegen ist eine Aufzaehlung, die keine ist \(AW2\). Der Abstand trennt sie von den Saetzen darueber, ohne eine Linie zu ziehen. */ [data-part="links"] { display: flex; gap: var(--space-open); justify-content: center; flex-wrap: wrap; margin-block-start: var(--space-tight); } /* Ziffern gleicher Breite, damit die Jahreszahl nicht flimmert. **Keine Versalien mehr.** Sie standen hier, solange die Zeile eine Signatur war — Vioxide // Vivian Voss // Anno MMXXVI. Der Owner hat am 9. September 2026 die Schreibweise selbst gesetzt \({T0077}\), und die Darstellung schreibt sie nicht um: ein Rechtsvermerk zeigt, was dort steht. Die Marken tragen ihre Versalien im Text \(VGA.RUN, VIOXIDE SARL\), der Name des Menschen daneben nicht. Nebenbei liest ein Vorleseprogramm durchgehende Versalien oft als Abkürzung. */ small { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* Die Trägerzeile steht unter dem Vermerk und leiser als er: sie nennt die Gesellschaft, das Vollständige steht im Impressum. Eine Stufe kleiner reicht dafür — darunter beginnt das, was niemand mehr liest, und ein Vermerk, den niemand entziffert, erfüllt seinen Zweck nicht. */ [data-part="carrier"] small { font-size: 0.8125rem; letter-spacing: 0.01em; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Die Buehnenleiste — Streifen ueber die volle Breite, Titel darauf. */ @layer widgets.header_banner { @scope ([data-type="header-banner"]) { :scope { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--space-close); padding-block: 2.125rem 1.875rem; padding-inline: max(var(--gutter), (100% - var(--measure)) / 2); border-block-end: 1px solid oklch(30% 0.014 260); color: var(--stage-ink); /* Die Streifen entstehen aus einem wiederholten Verlauf, nicht aus einem Bild: keine Anfrage, keine Datei, und die Farben kommen aus dem Theme. Ein zweites Spiel aendert drei Variablen und bekommt seine eigene Leiste. Der Verlauf steht im Theme und nicht hier: er ist das, was je Spiel wechselt. Die Leiste selbst bleibt dieselbe Form. */ background: var(--stage-scan), var(--stage-bar); background-size: 100% 3px, auto; background-repeat: repeat, no-repeat; } /* Der Titel steht auf den Streifen und braucht Halt gegen sie. Ein Schatten in der tiefsten Farbe der Leiste selbst, nicht in Schwarz: er sitzt damit in derselben Familie und wirkt als Kante, nicht als Schmutz. */ /* 44 px — die größte Schrift der Seite und die einzige, die nicht auf der Leiter liegt. Sie ist die Bühne selbst: der Spielname, und er soll die Leiste füllen, nicht in ihr stehen. Aus dem Entwurf gemessen. Der Schatten ist hart und versetzt, drei Pixel nach rechts unten — kein weicher Schein. So warfen Bildschirme dieser Zeit ihre Schrift, und es ist derselbe Grund, aus dem die Leiste ein Zeilenraster trägt. */ [data-type="heading"] { font-size: var(--text-stage); line-height: 1.2; color: oklch(99% 0.01 90); text-shadow: 3px 3px 0 oklch(22% 0.06 34); } /* Die Datumszeile: 13 px, weit gesperrt, in der hellen Bühnenfarbe. Der chip bringt seine eigene Größe mit und wird hier überschrieben, weil er auf der Leiste steht und nicht im Text. */ [data-type="chip"] { font-size: 0.8125rem; letter-spacing: 0.12em; color: oklch(97% 0.02 70); padding-block-end: 0.5rem; } /* Die Erweiterung, unter dem Namen. Kleiner und zurückgesetzt: sie sagt, welcher Inhalt gilt, und das ist eine Auskunft und keine Ansage. Der Schriftschnitt bleibt derselbe wie beim Titel — es ist dieselbe Sache, nur eine Ebene tiefer. Kein eigener Rasterplatz: die Zeile steht im Fluß unter dem Titel und ist bedingt. Ein Spiel ohne Erweiterung zeigt sie nicht, und die Leiste darf davon nicht springen. */ [data-type="edition"] { margin: 0; font-size: var(--text-head); line-height: 1.1; letter-spacing: 0.02em; color: oklch(88% 0.06 70); } /* Ab tablet steht die Notiz neben dem Titel statt darunter. Nur der Unterschied, und nur nach oben — die Basis ist die schmale Form. */ /* Ab tablet zwei Spalten: links Titel und Erweiterung untereinander, rechts die Notiz. Die Erweiterung gehört unter den Namen und nicht daneben — sie sagt, welcher Inhalt gilt, und das liest man als Fortsetzung des Titels, nicht als zweite Angabe am anderen Ende. Benannte Bereiche statt Zählen: mit drei Kindern und zwei Spalten landet sonst das dritte an einer Stelle, die niemand gewählt hat — genau das ist hier passiert. */ @media (min-width: 35rem) { :scope { grid-template-columns: 1fr auto; grid-template-areas: "titel notiz" "edition notiz"; align-items: end; } [data-type="heading"] { grid-area: titel; } [data-type="edition"] { grid-area: edition; } [data-type="chip"] { grid-area: notiz; } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Zeichen und Wortmarke nebeneinander. */ @layer widgets.header_logo { @scope ([data-type="header-logo"]) { :scope { display: grid; grid-auto-flow: column; align-items: center; gap: 0.75rem; text-decoration: none; /* Der Verweis fuellt seine Zelle nicht aus — er ist so breit wie sein Inhalt. Ohne das griffe die Streckung des Kopfrasters durch und die anklickbare Flaeche reichte bis zur Navigation. */ justify-self: start; } :scope:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: var(--space-tight); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Die Navigation — Schalter am Telefon, offene Liste ab screen. */ @layer widgets.header_menu { @scope ([data-type="header-menu"]) { /* Das nav reicht seine beiden Kinder an das Kopfraster durch, statt sie einzuschliessen. Sonst muessten Schalter und Liste sich einen Bereich teilen, und der Schalter stuende am Telefon dort, wo ab screen die Liste beginnt — also in der Mitte statt aussen. */ :scope { display: contents; } /* Der Knopf ist seit dem Element icon_button kein nacktes