/* ========================================================================== CareJourney — design system Two typefaces, one accent, one structural device (the route). Tokens are declared once on :root and redefined per theme; components never reach inside a media query. ========================================================================== */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo.web.7eeb93043acb.woff2") format("woff2-variations"), url("../fonts/archivo.web.7eeb93043acb.woff2") format("woff2"); font-weight: 400 700; font-stretch: 88% 118%; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader.web.8203f9e90ab8.woff2") format("woff2-variations"), url("../fonts/newsreader.web.8203f9e90ab8.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; } /* DIE BUCHSCHRIFTEN FÜR ARABISCH UND TAMIL — Iris, 15. August: „B". Noto Naskh (die klassische arabische Buchschrift) und Noto Serif Tamil, beide SIL OFL, instanziert auf Gewicht 400 und auf ihre Schriftsysteme subgesettet (47 bzw. 21 KB). `unicode-range` sorgt dafür, dass kein Browser sie lädt, solange kein arabisches oder tamilisches Zeichen auf der Seite steht — alle anderen Seiten kostet das null Bytes. */ @font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/naskh-arabisch.7ded1b2da6ef.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Noto Serif Tamil"; src: url("../fonts/serif-tamil.b21c50edcf53.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0B80-0BFF; } /* --- Tokens ------------------------------------------------------------- */ :root { /* Navy-primary since 2026-07-31 (OQ-29, Iris in writing): warm ivory papers, deep navy structure, CARE gold accents. --forest remains, but only for living-system accents (Canon v0.2-A §62B): the success notice, the portrait gradient. Every value below was recomputed against web/tests/test_contrast.py before shipping. */ /* Tag = Gold mit der Grok-Farbtabelle. Iris, schriftlich 2026-08-04: „gold am Tag mit Grok Farbtabelle" — die Tabelle ist die aus ihrem Tag/Nacht-Prototyp (carejourneydaynight.html): Creme #f7f3eb, Gold #c9a227, Grün #1a4d3a, Text #1a3a2a. Die Tinten-Abstufungen sind aus dem Tabellen-Grün abgeleitet und gegen test_contrast.py nachgerechnet. Die tiefen Navy-Flächen bleiben Navy — OQ-29 gilt weiter; die Nacht ist Silber mit Diamantblau (Blöcke unten). */ --paper: #f7f3eb; /* Die sieben Stationsfarben — Fassung A der Körperkarte (Iris, 17. August: „A", nach KONZEPT_KOERPER.md §5). Nicht-Text-Farben: sie zeichnen (Marker), sie schreiben nicht. Jede gegen --paper gemessen, alle >= 3,2:1; das Gelbgold ist dafür um 6 % abgedunkelt (b8860b stand bei 2,94). Die Wurzel ist ERDROT, nicht Signalrot — Rot bleibt dem Notfall vorbehalten. */ --station-krone: #6b4f9e; --station-stirn: #3f51a5; --station-kehle: #2274a5; --station-herz: #2e7d5b; --station-sonnengeflecht: #ad7e0a; --station-sakral: #c05621; --station-wurzel: #8b3a2f; /* Der Ausklang des Kopfbilds — Iris, 7. August, zweite Runde: „Continue with the front most rock color until the section I told you! of course adjust the text so it can still be seen." Nicht mehr Nebelgrau, sondern die Farbe der vordersten Felsen, am BILDSCHIRM gemessen (Zeichnung mitsamt Schleier): Tag rgb(19 29 27), Nacht rgb(7 19 21). Der CARE-Abschnitt liegt damit in beiden Modi dunkel und trägt die on-deep-Textfarben — der Farbwechsel kommt erst nach ‚entbehrlich'. */ --ausklang: #101c29; --paper-raised: #fefdf6; --paper-sunk: #ede8da; --deep: #102a43; --deep-2: #0a1f33; --ink: #143656; --ink-2: #365470; /* TINTE AUF DEM KUNSTWERK — seit dem 13. August, als das Band im Tagkopf verschwand (Iris: „ich moechte die Kopfbilder wieder klar sehen.. wo sind die original farben, jezt ist ein weisser schleier drueber?!"). Warum nicht `--ink`: der Himmel der Zeichnung ist mitteldunkel (schlechtester Bildpunkt L 0,188 bei 1920 px, L 0,266 unter dem Lead). `--ink` (#1a3a2a, L 0,034) misst dort 2,83:1 und faellt durch; #14211b (L 0,013) misst 3,77 bis 5,00. Auf Papier misst dieselbe Tinte 14,6:1. Sie ist deshalb kein zweites Grundton-Gruen, sondern der eine Wert, der auf BEIDEN Gruenden traegt — Bild und Papier. */ --tinte-auf-bild: #111f2d; /* NEONLIMETTE — Iris, 13. August: „mehr accente duerfen in diesem neongruen gesezt werden", nach rouserlab.com. Ein Token, zwei Fassungen; die Nacht darf damit schreiben, der Tag nur zeichnen. Messung und Regel stehen unten beim Gebrauch (`--limette`). */ --limette: #b8f200; /* --ink-3 is the muted tone: footer labels, captions, meta, offer status. Every one of those is small text, so it needs 4.5:1 — not the 3:1 that large text gets. Measured 2026-07-30: the previous #6c7d74 gave only 3.82:1 on --paper and 3.54:1 on --paper-sunk, an AA failure the dark theme did not share because its value was tuned separately. #556170 clears 4.5:1 on paper, paper-sunk and paper-raised. Guarded by web/tests/test_contrast.py — do not lighten it for looks. Re-derived 2026-08-04 toward the Grok table's green ink, same floor. */ --ink-3: #4a5f73; --ink-on-deep: #e9eef5; --ink-2-on-deep: #a6b9ca; /* DIE PORTRÄTPLATTE — Iris, 18. August: „lass uns heller hintergrund Farbe bei nachtmode und dunkle hintergrund Farbe bei Tag einfügen … für besseren contrast". Die Platte läuft damit GEGEN das Thema, nicht mit ihm: auf hellem Papier steht sie dunkel, auf dunklem Grund hell. Ein leerer Sitz verschwindet dadurch nicht mehr in der Karte, sondern hebt sich ab. Gemessen: dunkle Platte gegen `--paper` 13,2:1, helle Platte gegen den Nachtgrund 15,1:1 — die Platte ist in beiden Fassungen deutlich sichtbar. Und das Monogramm darauf: Gold #c9a227 auf Navy 6,05:1, Tiefgold #7d6526 auf Sand 4,56:1. Beide über 4,5, also selbst als Text tragfähig, nicht nur als Zeichnung. */ --portraet-platte: #102a43; --portraet-platte-2: #0a1f33; --portraet-marke: #c9a227; /* DAS PERSÖNLICHE ZEICHEN — Iris, 18. August: „ev ein hint auf den Webseiten Profilen (Farbe, 🪶 etc)". Ein Farbton je Mensch, aus dem Tier und aus dem, was sie über die Person geschrieben hat; das Tier selbst bleibt intern (docs/TIERE_ZUORDNUNG_2026-08-18.md). Gemessen gegen `--paper`: Koralle 4,26:1, Erdbraun 5,68:1. Die Koralle liegt unter 4,5:1 und trägt deshalb NUR das Zeichen und keinen Fliesstext — geprüft in web/tests/test_contrast.py. */ --akzent-iris: #c1502e; --akzent-sandy: #7a5a34; --line: rgb(16 42 67 / 14%); --line-strong: rgb(16 42 67 / 26%); --line-on-deep: rgb(233 238 245 / 16%); --forest: #1a4d3a; --alpine: #102a43; /* Die Aare im Berner Band (Fussband): Care-Blau am Tag, das Nachtwasserblau in der Nacht. Nur Schmuck — kein Text steht darauf. */ --aare: #3f7fae; /* Gold by day, silver by night: dark themes override the three gold tokens to ice-silver (Iris, 2026-07-31 — her Blue Diamond identity, 'inverted colors organically'). Light keeps CARE gold untouched. */ --gold: #c9a227; /* Accessible gold for text on light grounds; the brand gold stays for marks. Must clear 4.5:1 on the *darkest* light ground, --paper-sunk, because `.eyebrow` appears inside `.band--sunk` sections (codex, contact). The previous #8a6410 passed on --paper (4.71:1) but only reached 4.37:1 on --paper-sunk. Measured 2026-07-30; guarded by web/tests/test_contrast.py. */ --gold-ink: #7d5c0f; --gold-on-deep: #ddbc6b; --zeichen-strich: #ddbc6b; /* DER RING UM DIE KOPFZEICHEN — Iris, 15. August: „Let's have a permanent gold circle line and when hovered over it turns rainbow in the day mode and in the night mode, let's have the line of the circles silver." Ein eigenes Token und nicht `--gold`, aus einem gerechneten Grund: das Markengold #c9a227 misst gegen Papier **2,19:1**. Ein Ring ist die sichtbare Grenze eines Bedienelements, und WCAG 2.2 SC 1.4.11 verlangt dafuer 3:1. Dieses Gold misst **3,32:1** — dieselbe Farbe eine Spur tiefer, damit die Anweisung und die Zusage der Seite beide stimmen. (Der bisherige Rand lag bei 14 % Deckung und damit unter 1,2:1; was hier geschieht, ist also keine Verschlechterung, sondern das Gegenteil.) */ --kreis-rand: #a87f15; --focus: #102a43; --shadow-card: 0 1px 2px rgb(27 39 51 / 5%), 0 8px 24px -16px rgb(27 39 51 / 22%); --shadow-lift: 0 2px 4px rgb(27 39 51 / 6%), 0 18px 40px -22px rgb(27 39 51 / 30%); /* Type scale — fluid, five steps, nothing between them. */ --t-hero: clamp(2.4rem, 1.3rem + 3.9vw, 4.4rem); --t-h2: clamp(1.85rem, 1.15rem + 2.5vw, 3rem); --t-h3: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem); --t-lead: clamp(1.1rem, 1.01rem + 0.45vw, 1.35rem); --t-body: 1.0625rem; --t-small: 0.9rem; --t-label: 0.72rem; --shell: 74rem; --gutter: clamp(1.25rem, 5vw, 3.25rem); --rail-x: 1.75rem; --rail-pad: 5.5rem; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 620ms; color-scheme: light dark; } /* Altgeräte ohne clamp() (Safari 13.0, iOS 12): feste Stufen statt Fluid. */ @supports not (font-size: clamp(1rem, 2vw, 2rem)) { :root { --t-hero: 3.4rem; --t-h2: 2.43rem; --t-h3: 1.28rem; --t-lead: 1.23rem; } } @media (prefers-color-scheme: dark) { :root { /* Umgekehrt zum Tag — siehe die Messung bei `--portraet-platte`. */ --portraet-platte: #ede8da; --portraet-platte-2: #f7f3eb; --portraet-marke: #7d6526; /* Nachts dürfen die Akzente leuchten: 8,03:1 und 10,75:1. */ --akzent-iris: #ff8a6b; --akzent-sandy: #d8c39a; --alpine: #8fb4d9; --aare: #35618c; --paper: #0a1420; --paper-raised: #101f2e; --paper-sunk: #060e17; --ausklang: #071315; --deep: #0f2947; --deep-2: #0a1e38; --ink: #e6edf4; --ink-2: #a9bbcb; --ink-3: #8296a9; --ink-on-deep: #e6edf4; --ink-2-on-deep: #a9bbcb; --line: rgb(230 237 244 / 14%); --line-strong: rgb(230 237 244 / 28%); --line-on-deep: rgb(230 237 244 / 16%); --forest: #4e9273; --gold: #c8d2dd; --gold-ink: #cdd7e1; --gold-on-deep: #d4dde7; --zeichen-strich: #565f6d; /* Silber in der Nacht (Iris, 15. August), 12,1:1 gegen den Nachtgrund. */ --kreis-rand: #c8d2dd; --focus: #9dc0dd; --shadow-card: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px -18px rgb(0 0 0 / 80%); --shadow-lift: 0 2px 6px rgb(0 0 0 / 45%), 0 20px 44px -22px rgb(0 0 0 / 85%); } } :root[data-theme="dark"] { /* Umgekehrt zum Tag — siehe die Messung bei `--portraet-platte`. */ --portraet-platte: #ede8da; --portraet-platte-2: #f7f3eb; --portraet-marke: #7d6526; /* Nachts dürfen die Akzente leuchten: 8,03:1 und 10,75:1. */ --akzent-iris: #ff8a6b; --akzent-sandy: #d8c39a; --alpine: #8fb4d9; --aare: #35618c; --paper: #0a1420; --ausklang: #071315; --paper-raised: #101f2e; --paper-sunk: #060e17; --deep: #0f2947; --deep-2: #0a1e38; --ink: #e6edf4; --ink-2: #a9bbcb; --ink-3: #8296a9; --ink-on-deep: #e6edf4; --ink-2-on-deep: #a9bbcb; /* Stationsfarben der Nacht: Krone, Stirn und Wurzel aufgehellt (6, 10, 12 %), bis jede >= 3,2:1 gegen das Nachtpapier steht; das Gelbgold darf nachts sein volles b8860b tragen (5,69:1). */ --station-krone: #745aa4; --station-stirn: #5262ae; --station-kehle: #2274a5; --station-herz: #2e7d5b; --station-sonnengeflecht: #b8860b; --station-sakral: #c05621; --station-wurzel: #995248; --line: rgb(230 237 244 / 14%); --line-strong: rgb(230 237 244 / 28%); --line-on-deep: rgb(230 237 244 / 16%); --forest: #4e9273; --gold: #c8d2dd; --gold-ink: #cdd7e1; --gold-on-deep: #d4dde7; --zeichen-strich: #565f6d; /* Silber in der Nacht (Iris, 15. August), 12,1:1 gegen den Nachtgrund. */ --kreis-rand: #c8d2dd; --focus: #9dc0dd; --shadow-card: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px -18px rgb(0 0 0 / 80%); --shadow-lift: 0 2px 6px rgb(0 0 0 / 45%), 0 20px 44px -22px rgb(0 0 0 / 85%); } :root[data-theme="light"] { /* DIE PORTRÄTPLATTE — Iris, 18. August: „lass uns heller hintergrund Farbe bei nachtmode und dunkle hintergrund Farbe bei Tag einfügen … für besseren contrast". Die Platte läuft damit GEGEN das Thema, nicht mit ihm: auf hellem Papier steht sie dunkel, auf dunklem Grund hell. Ein leerer Sitz verschwindet dadurch nicht mehr in der Karte, sondern hebt sich ab. Gemessen: dunkle Platte gegen `--paper` 13,2:1, helle Platte gegen den Nachtgrund 15,1:1 — die Platte ist in beiden Fassungen deutlich sichtbar. Und das Monogramm darauf: Gold #c9a227 auf Navy 6,05:1, Tiefgold #7d6526 auf Sand 4,56:1. Beide über 4,5, also selbst als Text tragfähig, nicht nur als Zeichnung. */ --portraet-platte: #102a43; --portraet-platte-2: #0a1f33; --portraet-marke: #c9a227; /* DAS PERSÖNLICHE ZEICHEN — Iris, 18. August: „ev ein hint auf den Webseiten Profilen (Farbe, 🪶 etc)". Ein Farbton je Mensch, aus dem Tier und aus dem, was sie über die Person geschrieben hat; das Tier selbst bleibt intern (docs/TIERE_ZUORDNUNG_2026-08-18.md). Gemessen gegen `--paper`: Koralle 4,26:1, Erdbraun 5,68:1. Die Koralle liegt unter 4,5:1 und trägt deshalb NUR das Zeichen und keinen Fliesstext — geprüft in web/tests/test_contrast.py. */ --akzent-iris: #c1502e; --akzent-sandy: #7a5a34; --paper: #f7f3eb; --station-krone: #6b4f9e; --station-stirn: #3f51a5; --station-kehle: #2274a5; --station-herz: #2e7d5b; --station-sonnengeflecht: #ad7e0a; --station-sakral: #c05621; --station-wurzel: #8b3a2f; --ausklang: #101c29; --paper-raised: #fefdf6; --paper-sunk: #ede8da; --deep: #102a43; --deep-2: #0a1f33; --ink: #143656; --ink-2: #365470; --ink-3: #4a5f73; --ink-on-deep: #e9eef5; --ink-2-on-deep: #a6b9ca; --line: rgb(16 42 67 / 14%); --line-strong: rgb(16 42 67 / 26%); --line-on-deep: rgb(233 238 245 / 16%); --forest: #1a4d3a; /* --alpine und --gold fehlten hier bis 2026-08-05, und das war ein echter Fehler, kein Schönheitsfleck: wer ein dunkles Betriebssystem hat und im Kopf auf hell schaltet, behielt das Nachtblau #8fb4d9 als --alpine. Auf dieser Fläche steht in genau diesem Zustand weisser Knopftext (`[data-theme="light"] .btn--primary { color: #f6f9fc }`) — rund 1,9:1 gegen verlangte 4,5:1. test_contrast.py rechnet die beiden erklärten Themen nach, nicht diese Kreuzung aus Systemeinstellung und Schalter. */ --alpine: #102a43; --aare: #3f7fae; --gold: #c9a227; --gold-ink: #7d5c0f; --gold-on-deep: #ddbc6b; --zeichen-strich: #ddbc6b; --kreis-rand: #a87f15; --focus: #102a43; --shadow-card: 0 1px 2px rgb(27 39 51 / 5%), 0 8px 24px -16px rgb(27 39 51 / 22%); --shadow-lift: 0 2px 4px rgb(27 39 51 / 6%), 0 18px 40px -22px rgb(27 39 51 / 30%); } /* --- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Die klebrige Kopfzeile darf nichts verdecken (WCAG 2.2, 2.4.11 Focus Not Obscured — der eine umsetzbare Fund aus der Prüfserie vom 7. August): Ankersprünge (#kontakt, #care, Sprunglink) und der Tastatur-Fokus scrollen sonst UNTER den Balken. 6.5rem = Kopfzeile plus Luft; gilt für jedes scrollIntoView, auch das des Browsers beim Tabben. */ scroll-padding-top: 6.5rem; scroll-padding-block-start: 6.5rem; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Newsreader", Georgia, "Times New Roman", serif; font-size: var(--t-body); font-weight: 400; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { max-width: 100%; } img { height: auto; } a { color: inherit; } /* NEONLIMETTE AM FOKUSRING — Iris, 13. August: „mehr accente duerfen in diesem neongruen gesezt werden" (nach rouserlab.com). Der Ring selbst bleibt `--focus` (Navy am Tag, hell in der Nacht): er ist der Indikator, und ein Indikator braucht 3:1 gegen seine Umgebung. #b8f200 (L 0,737) misst auf Papier (L 0,883) nur **1,16:1** und koennte diese Rolle am Tag nie tragen. Die Limette liegt deshalb ALS ZWEITE Spur darum herum — reine Zierde, die den Ring auffaellig macht, ohne dass die Erkennbarkeit an ihr haengt. Faellt der Schatten auf einem alten Geraet aus, ist der Ring unveraendert da (GERAETE §3). In der Nacht ist es umgekehrt herum stark: Limette auf Navy misst 11,4:1 — dort traegt dieselbe Farbe sogar Schrift (siehe Kopfband). */ :where(a, button, input, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; /* ~~border-radius: 1px~~ — entfernt am 16. August. Diese Zeile gab JEDEM fokussierten Element eine eigene Rundung und machte damit aus einer Kapsel im Augenblick des Fokus wieder ein Rechteck. Solange alle Knöpfe 2 px hatten, fiel der Unterschied nicht auf; seit Iris' „alle Tasten bitte schön abrunden" wäre es der auffälligste Sprung der ganzen Seite gewesen — und ausgerechnet beim Tastaturgebrauch. Ohne die Zeile folgt der Fokusring der Form des Elements, weil ein `outline` das von selbst tut. Der Ring selbst ist unverändert: dieselbe Stärke, derselbe Abstand, derselbe Schein. */ box-shadow: 0 0 0 6px rgb(184 242 0 / 45%); } .skip-link { position: absolute; /* Versteckt nach OBEN, nicht zur Seite. `inset-inline-start: -9999px` heisst im RTL-Dokument `right: -9999px` — und machte /ar/ um 9999 Pixel waagrecht scrollbar (im Browser gemessen). Überhang nach oben ist in keiner Schreibrichtung scrollbar. */ inset-inline-start: 0; transform: translateY(-250%); top: 0; z-index: 100; padding: 0.75rem 1.25rem; background: var(--deep); color: var(--ink-on-deep); font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-small); } .skip-link:focus { transform: none; inset-inline-start: 0.75rem; top: 0.75rem; } /* DIE STATIONSZEICHEN — Fassung A der Körperkarte (KONZEPT_KOERPER.md, Iris: „A. Dann B."). Sieben kleine Farbzeichen am linken Rand der Abschnitte, leise: 4 Punkte breit, gerundet, senkrecht mittig. Das Zeichen folgt dem INHALT, nicht der Seite — Kontakt trägt die Wurzel auch auf /kontakt/, das Team trägt Sakral auch auf /ueber-uns/. Reine Zier: content leer, für Vorleseprogramme unsichtbar. Die Farben stehen als Tokens oben, je Modus gemessen. Fassung B (getönte Flächen) folgt als eigener Umbau mit eigener Messrunde. */ .station--krone, .station--stirn, .station--kehle, .station--herz, .station--sonnengeflecht, .station--sakral, .station--wurzel { position: relative; } .station--krone::before, .station--stirn::before, .station--kehle::before, .station--herz::before, .station--sonnengeflecht::before, .station--sakral::before, .station--wurzel::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: clamp(0.4rem, 1.5vw, 1.5rem); width: 4px; height: 2.75rem; border-radius: 999px; pointer-events: none; } .station--krone::before { background: var(--station-krone); } .station--stirn::before { background: var(--station-stirn); } .station--kehle::before { background: var(--station-kehle); } .station--herz::before { background: var(--station-herz); } .station--sonnengeflecht::before { background: var(--station-sonnengeflecht); } .station--sakral::before { background: var(--station-sakral); } .station--wurzel::before { background: var(--station-wurzel); } /* FASSUNG B — ZURÜCKGENOMMEN AM 18. AUGUST, VON IRIS SELBST GESTOPPT. Sie sah die getönten Flächen live und schrieb: **„Der Chakra effekt war auf die Farbe des Regenbogen Textes und die Bilderauswahl gedacht. Bitte sofort ändern."** Das Attribut ist wieder weg — heute setzt `data-fassung="b"` niemand, und diese Regeln greifen nirgends. Sie bleiben als vermessene Probe stehen, damit die Rechnung nicht verlorengeht, falls die Frage je wiederkommt. Was darunter steht, ist der Stand vom selben Tag: „1+2" — fertig bauen UND kräftiger machen. Seit dem 17. August lag B als Probe daneben und war praktisch unsichtbar: die vier Hauche trugen C* 5–8 gegen ein Papier, das selbst C* 4,3 hat, und alle vier lagen im selben warmen Viertel. Vier Töne, die man nur im direkten Vergleich auseinander- hält, sind kein Regenbogen — sie sind ein Messfehler mit Absicht. **Was den ersten Wurf schwach machte, war die falsche Grösse.** Ich hatte auf Kontrast zum Papier optimiert, und der ist hier nach oben zugenagelt: ink-3 (#52605a) hält seine 5,0 nur bis rund 1,19:1 — mehr Dunkelheit gibt es nicht, egal welche Farbe. Sichtbarkeit einer Fläche kommt aber gar nicht von der Helligkeit, sondern von der **Buntheit**, und die kostet den Text nichts: der Kontrast hängt allein an der Luminanz. Also liegen jetzt alle fünf Flächen auf **derselben Luminanz** (Tag L* 91, Nacht L* 12) und tragen **dieselbe Buntheit** (C* 16, wo der Bildschirm sie hergibt) — die Buntheit rund verdoppelt, der Textkontrast unverändert gut. Gleiche Luminanz heisst auch: keine Station ist lauter als eine andere. Der Lauf geht von Indigo über Grün und Gold nach Orange und Erdrot, und jede Fläche hält jede Tinte über 5,2:1 (Tag) beziehungsweise 5,3:1 (Nacht) — nachgerechnet in `test_stationen.py`, nicht geschätzt. **Die Stirn hat bewusst keine Fläche.** Ihre Station ist das Kopfbild, und das ist ein Foto auf `--deep-2`; ein Papierton darunter wäre unsichtbar und würde nur den Bildrand verfärben. Sie erscheint stattdessen dort, wo sie eine Fläche hat: am Einstiegsband von /angehoerige/. Feste Hexwerte statt color-mix, damit der Test sie lesen und nachrechnen kann. */ :root[data-fassung="b"] .station--einstieg { background: #e4e3ff; } :root[data-fassung="b"] .station--herz { background: #caeddb; } :root[data-fassung="b"] .station--sonnengeflecht { background: #f6e3c7; } :root[data-fassung="b"] .station--sakral { background: #ffdfd1; } :root[data-fassung="b"] .station--wurzel { background: #ffded8; } @media (prefers-color-scheme: dark) { :root[data-fassung="b"]:not([data-theme="light"]) .station--einstieg { background: #1b1e34; } :root[data-fassung="b"]:not([data-theme="light"]) .station--herz { background: #072518; } :root[data-fassung="b"]:not([data-theme="light"]) .station--sonnengeflecht { background: #2a1e05; } :root[data-fassung="b"]:not([data-theme="light"]) .station--sakral { background: #311a0d; } :root[data-fassung="b"]:not([data-theme="light"]) .station--wurzel { background: #331814; } } :root[data-fassung="b"][data-theme="dark"] .station--einstieg { background: #1b1e34; } :root[data-fassung="b"][data-theme="dark"] .station--herz { background: #072518; } :root[data-fassung="b"][data-theme="dark"] .station--sonnengeflecht { background: #2a1e05; } :root[data-fassung="b"][data-theme="dark"] .station--sakral { background: #311a0d; } :root[data-fassung="b"][data-theme="dark"] .station--wurzel { background: #331814; } /* Offer status — „Verfügbar", „Im Pilotbetrieb", „In Planung", „Vision". Quiet by design: the label is there so nobody mistakes a planned service for an available one, not to decorate the card. Deliberately not colour-coded — colour alone would carry meaning, and a red/green scheme would read as a warning about the service rather than a statement about its stage. */ .offer-status { margin: 0 0 0.35rem; font-family: "Archivo", system-ui, sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .offer-status--available { color: var(--ink-2); } /* Accessibility statement — the „Geprüft" / „Noch offen" marker on each item. Same restraint as .offer-status, and not colour-coded for a stronger reason than taste: on a page about accessibility, colour alone carrying meaning would fail WCAG 1.4.1 in the act of claiming AA. The word carries it, and the two states also sit under their own headings, so the grouping survives monochrome, high-contrast mode and a screen reader alike. */ .a11y-status { margin: 0; font-family: "Archivo", system-ui, sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .a11y-status--geprueft { color: var(--ink-2); } /* Shown on every page while SITE_PUBLIC_INDEXING is off. noindex only keeps crawlers away; anyone holding the URL still sees the site, so the site says itself that it is a preview. */ .review-banner { margin: 0; /* Stufe 5 des Design-Audits (Iris, 15. August: „alle 6"): der Balken frisst die erste Sekunde — vor der Freigabe unvermeidlich, aber er darf leiser sein. Schmaler gesetzt und in Gold auf Navy statt Papierweiss; --gold-on-deep ist ein Token und wandert nachts von selbst auf den gemessenen Silberton. */ padding: 0.3rem 1rem; background: var(--deep); color: var(--gold-on-deep); font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-small); text-align: center; letter-spacing: 0.06em; text-transform: uppercase; } /* Neonviolett — aber **nur nachts**. Iris, 11. August: „for day mode keep vorschau banner color you had … that was only meant for the about me dark mode one." Tags bleibt der Balken in `--deep` und damit Teil der Gestaltung; nachts soll er auffallen. `#b026ff` mit weisser Schrift ist gemessen **4,53:1** und liegt knapp über der Schwelle für Fliesstext. Dunkler wäre sicherer und nicht mehr neon, heller fällt darunter. `test_contrast.py` rechnet feste Farben nicht nach — wer den Ton ändert, misst ihn von Hand. Drei Blöcke und nicht einer, weil es drei Zustände gibt: ausdrücklich dunkel gewählt, Gerät dunkel und nichts gewählt, und ausdrücklich hell gewählt. Eine Media Query allein kennt den Unterschied nicht. */ /* ~~Auf der Personenseite gibt es keinen Tag, also auch keinen Schalter.~~ **AUFGEHOBEN AM 17. AUGUST — Iris: «I will add the day back onto mine about me. Default should remain night for mine.»** Die alte Begründung stimmte, solange die Seite gar keinen Tag hatte; jetzt hat sie einen, und ein verstecktes Wahlrecht ist keins. Die Voreinstellung bleibt Nacht, und zwar ohne Skript: die Themenpalette gilt unbedingt und wird erst von einem ausdrücklichen `[data-theme="light"]` abgelöst. Wer nichts tut, sieht die Nacht — auch tagsüber, auch mit hellem System. */ /* NUR AUF DER PERSONENSEITE — Iris, 14. August, mit Foto: „im nach modus haben wir immer noch diesen balken, im Tagesmodes ist es schön." Und vorher schon: „das violet war für meinen about me section gedacht." Das Neonviolett vom 11. August war nie für die ganze Website bestimmt — es hing nur an der falschen Bedingung (am Modus statt an der Seite). Jetzt hängt es an der Seite: die Personenseite ist immer dunkel und behält ihren Balken; überall sonst trägt die Nacht denselben tiefen Ton wie der Tag. Kontrast dort: Papierschrift auf --deep, längst gemessen. */ :root:not([data-theme="light"]) body[data-thema="neon"] .review-banner { background: #b026ff; color: #fff; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Typography --------------------------------------------------------- */ .display, .h1, .h2, .h3, .eyebrow, .btn, .nav__link, .meta, .wordmark, .field__label, .stat__value { font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; } .h1, .h2 { margin: 0; font-weight: 600; font-variation-settings: "wdth" 106; letter-spacing: -0.018em; line-height: 1.04; text-wrap: balance; } .h1 { font-size: var(--t-hero); } .h2 { font-size: var(--t-h2); } .h3 { margin: 0; font-size: var(--t-h3); font-weight: 600; font-variation-settings: "wdth" 100; letter-spacing: -0.006em; line-height: 1.24; text-wrap: balance; } .eyebrow { margin: 0; font-size: var(--t-label); font-weight: 600; font-variation-settings: "wdth" 100; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); } .eyebrow--on-deep { color: var(--gold-on-deep); } .lead { margin: 0; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } /* Stufe 5 des Design-Audits: Überschriften brechen ausgewogen statt mit einem einzelnen Wort auf der letzten Zeile. `balance` kennt nicht jeder Browser — wer es nicht kennt, bricht wie bisher; darum kein Fallback nötig. Nur Überschriften: auf Fliesstext wäre balance falsch (und auf den Leads steht bereits `pretty`). */ h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; } .prose { max-width: 63ch; text-wrap: pretty; } .prose p { margin: 0; } .meta { font-size: var(--t-small); font-weight: 500; font-variation-settings: "wdth" 100; letter-spacing: 0.01em; color: var(--ink-3); } /* --- Layout ------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-left: auto; margin-right: auto; margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter); padding-inline: var(--gutter); } /* Die Taktung der Abschnitte — enger seit dem 9. August. Iris: die Startseite strukturell kürzen, Priorität hoch. Gemessen war sie 12 879 px, also **14,3 Bildschirme**, und davon sind **4 496 px (34,9 %) reiner Abstand**: 1 880 px Polster der Abschnitte, 2 616 px Lücken der Stapel und Gitter. Das ist die einzige Kürzung, die kein Wort kostet, und deshalb kommt sie zuerst — vor jeder inhaltlichen Entscheidung. Alle drei Werte sind um denselben Faktor (rund 0,7) verkleinert, nicht einzeln nach Gefühl. Das ist der Punkt: eine Taktung ist ein Verhältnis. Wer nur die grössten Polster kürzt, macht die Seite nicht enger, sondern ungleichmässig — und Ungleichmässigkeit liest sich als Fehler, während gleichmässige Enge sich als Absicht liest. Die untere Schranke der clamp() bleibt fast unberührt: auf dem Telefon war der Abstand nie das Problem, dort steht ohnehin alles untereinander. */ .band { padding-block: clamp(3rem, 6.5vw, 5.25rem); } /* clip, nicht hidden, und nicht Kosmetik: der Strahlenkranz der Akzentwörter (.akzent::before, 210 % Wortbreite, weich verlaufend) ragt bei schmalen Fenstern über die Kante und machte JEDE Seite bei 320 px waagrecht scrollbar — WCAG 1.4.10, im Browser gemessen: 43 bis 92 px je Seite. Beschnitten wird an der EINEN fensterbreiten Stelle statt an jeder Abschnittsklasse: nur Malerei an der echten Fensterkante fällt weg, im Inneren ändert sich nichts. `clip` statt `hidden`, weil es keinen Scrollkontext erzeugt und position:sticky in Ruhe lässt. Alte Browser ohne clip behalten den harmlosen Streifen — Kür darf stumm ausfallen. */ main { overflow-x: clip; } .band--tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); } .band--deep { background: var(--deep); color: var(--ink-on-deep); } .band--deep .lead { color: var(--ink-2-on-deep); } .band--deep .meta { color: var(--ink-2-on-deep); } .band--sunk { background: var(--paper-sunk); } .stack { display: flex; flex-direction: column; gap: var(--stack-gap, 1.5rem); } .stack--lg { --stack-gap: clamp(1.5rem, 2.8vw, 2.25rem); } .stack--sm { --stack-gap: 0.75rem; } /* Altgeräte: gap in Flex erst ab Safari 14.1 — Abstände über Ränder nachbilden. (inset als Näherungstest: gleiche Browser-Generation.) */ @supports not (inset: 0) { .stack > * + * { margin-top: 1.5rem; } .stack--lg > * + * { margin-top: 1.88rem; } .stack--sm > * + * { margin-top: 0.75rem; } .nav > * + * { margin-left: 1rem; } .header__rechts > * + * { margin-left: 0.6rem; } .header__actions > * + * { margin-left: 0.6rem; } .btn-row > * + * { margin-left: 0.75rem; } .hero__inner .cta-row > * + *, .hero__inner .btn-row > * + * { margin-top: 0.85rem; margin-left: 0; } .footer__legal > * + * { margin-left: 2rem; } } .section-head { display: flex; flex-direction: column; gap: 1rem; max-width: 54ch; /* Mittig — Iris, 13. August: „mehr Text Überschriften mittig (um etwas Platz zu sparen, wie beim Kopfbild)". Der Block zentriert sich in seiner Spalte, der Text in seinem Block. */ margin-inline: auto; text-align: center; align-items: center; } /* IN EINER ZWEISPALTIGEN STATION IST DIE MITTE EINE ANDERE — Iris, 16. August: „As you can see, the sun and his rays still don't look centered. As with other texblocks of the site." Gemessen auf der Startseite bei 1170 px, und der Befund ist eindeutig: Was CARE bedeutet · Angebot · Unsere Welten Mitte 585,0 = Seitenmitte **Grundsätze · Werkstatt** Mitte 347,9 = 237 daneben Beide Gruppen tun genau das, was `text-align: center` verspricht — nur auf zwei verschiedenen Achsen. Die zweite Gruppe steht in einer `.split`, also in der linken von zwei Spalten, und zentriert sich pflichtgemäss in dieser Spalte. Auf dem Bildschirm sieht man davon nichts als eine Überschrift, die neben der Mitte hängt. Der Ausschlag gibt, was DARUNTER steht: in der Station Grundsätze folgen die vier Sätze als linksbündige Spalte ab 140 px. Die Überschrift schwebte also mittig über linksbündigem Text, den sie ankündigt. Jetzt beginnt sie, wo er beginnt. Iris' Regel vom 13. August („mehr Text Überschriften mittig") bleibt damit unangetastet und behält ihren eigenen Grund: sie galt „um etwas Platz zu sparen, wie beim Kopfbild" — für die breiten Stationen, wo mittig wirklich Platz spart. In einer halben Spalte spart es nichts und kostet eine zweite Achse. */ .split > .section-head { margin-inline: 0; text-align: start; align-items: flex-start; } /* --- Das Kopfband ------------------------------------------------------- */ /* Iris, 9. August: „so wie beim Kopf darfst du gerne auch Bilder mit Text überziehen." Und, 10. August: die Startseite strukturell kürzen. Beides ist dieselbe Sache. Bisher stand ein Bildband ALLEIN zwischen zwei Abschnitten, und der Abschnitt darunter begann mit seinem eigenen Kopf — zwei Blöcke, wo einer genügt. Gemessen bei 1440 px: Band 507 px, Kopf 262 px, Polster 84 px; übereinander gelegt 463 px. `.kopfband` ohne Bild ist ein gewöhnliches `div` und ändert nichts. Erst `--bild` bringt ein Bild dazu — und erst ab 40rem wird daraus ein Stapel. **Von schmal nach breit aufgebaut, und das ist kein Stil, sondern eine Kontrastfrage.** Der erste Anlauf baute umgekehrt: stapeln als Grundform, auf dem Telefon zurücksetzen. Das Zurücksetzen musste dabei Farben angeben — und traf damit auch die Abschnitte auf `band--deep`, deren Text längst richtig eingestellt war. Ergebnis bei 390 px im Tagmodus: dunkle Schrift auf dunklem Grund, **1,17:1**, gemessen auf „Vier Etappen". Wer eine Farbe zurücknimmt, muss wissen, worauf. Wer sie gar nicht erst setzt, muss es nicht. Deshalb steht die helle Schrift jetzt DRINNEN in der Bedingung, in der sie gilt, und darunter gilt schlicht, was ohne dieses Bauteil gälte. */ .kopfband--bild picture { display: block; } /* Der Rahmen trägt seit dem 12. August zwei Dinge übereinander: das Standbild und die Aufnahme, die beim Aufschlag des Tropfens kurz läuft. `relative` ist nicht Zierde — es ist der Bezug, den das absolut gesetzte Video braucht, auch auf schmalen Schirmen, wo der Stapel unten noch nicht gilt. */ .kopfband__rahmen { position: relative; display: block; } .kopfband__video { position: absolute; /* Altgeräte: Langformen vor inset. */ top: 0; right: 0; bottom: 0; left: 0; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; /* Die Aufnahme ist hochkant (480 × 716), der Rahmen liegt quer. Der Ausschnitt sitzt deshalb tief: bei 62 % steht der Aufschlagpunkt in der Mitte des Rahmens, und die Ringe laufen waagrecht hinaus — genau das, was Iris „ripple effect" genannt hat. Mittig zugeschnitten wäre es der leere Himmel darüber. */ object-position: 50% 62%; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 700ms ease; } .kopfband__video[data-spielt] { opacity: 1; } /* Kein Verlauf für die, die keinen wollen — und dann läuft die Aufnahme ohnehin nicht: `tropfen.js` startet sie nur im Lebendig-Modus. */ @media (prefers-reduced-motion: reduce) { .kopfband__video { transition: none; } } .kopfband--bild img { display: block; inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper-sunk); border-radius: 2px; /* Die Ausblendung der freistehenden Bänder gilt hier nicht: dort weicht die Kante ins Papier, gestapelt trägt der Schleier sie. Zwei Verläufe übereinander ergäben eine graue Zone. */ -webkit-mask-image: none; mask-image: none; } /* Schmal: Bild oben, Kopf darunter. Bei 390 px ist das Band 244 px hoch und der Kopf 262 px — der Text würde das Bild vollständig verdecken. */ .kopfband--bild { display: grid; gap: 1.25rem; } @media (min-width: 40rem) { /* Bild oben, Textband darunter — EIN Beschnitt fasst beides zu einer Karte. Bis zum 15. August lagen beide gestapelt im selben Grid-Bereich und das Band deckte das halbe Foto; die Herleitung steht unten am Textband. */ .kopfband--bild { gap: 0; overflow: hidden; overflow: clip; border-radius: 2px; } .kopfband--bild img { border-radius: 0; } /* DER TEXT LIEGT NICHT MEHR AUF DEM BILD — Iris, 15. August: „Dieser Filter der mit der Schrift kommt ist schade, so sieht man die bilder gar nicht." Das ist die zweite Beanstandung derselben Stelle in drei Tagen, und zusammen zeigen sie, dass das Problem nie die Deckung war, sondern der Ort: am 13. störte der Schleier (88 % Papier), die Antwort war eine volle Flaeche — und die volle Flaeche verdeckt nun eben das halbe Foto. Jede Flaeche AUF dem Bild nimmt dem Bild etwas; die 81-%-Rechnung aus test_bildband.py beweist, dass es keine lesbare Flaeche unter 81 % gibt. Also verlaesst der Text das Bild: er steht als Band DARUNTER, auf Papier — genau wie auf schmalen Geraeten seit je. Das Foto ist zu 100 % es selbst, der Kontrast ist der von Text auf Papier (test_contrast.py rechnet ihn), und kein Bildpunkt entscheidet mehr mit. `gap: 0` und der gemeinsame Beschnitt halten Bild und Band als eine Karte zusammen. */ .kopfband--bild .section-head { position: relative; z-index: 1; max-inline-size: none; padding: clamp(1.1rem, 2.6vw, 2rem) clamp(1.25rem, 3vw, 2.5rem); background: var(--paper); justify-self: stretch; inline-size: 100%; } .kopfband--bild .section-head > * { max-inline-size: 54ch; margin-inline: auto; } .kopfband--bild .eyebrow { color: #8a5a12; } .kopfband--bild .h1, .kopfband--bild .h2 { color: var(--ink); } .kopfband--bild .lead { color: var(--ink-2); } :root[data-theme="dark"] .kopfband--bild .section-head { background: rgb(7 19 16 / 88%); } /* LIMETTE ALS SCHRIFT — und nur hier, weil nur hier gerechnet ist: #b8f200 (L 0,737) auf der tiefen Flaeche des Panels (rgb(7 19 16) bei 88 %, L 0,019) misst **11,4:1**. Am Tag stuende dieselbe Farbe auf Papier bei 1,16:1 — deshalb traegt sie dort nie Schrift. */ :root[data-theme="dark"] .kopfband--bild .eyebrow { color: var(--limette); } :root[data-theme="dark"] .kopfband--bild .h1, :root[data-theme="dark"] .kopfband--bild .h2 { color: #f4f8f3; } :root[data-theme="dark"] .kopfband--bild .lead { color: var(--ink-2-on-deep); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kopfband--bild .section-head { background: rgb(7 19 16 / 88%); } :root:not([data-theme="light"]) .kopfband--bild .eyebrow { color: var(--limette); } :root:not([data-theme="light"]) .kopfband--bild .h1, :root:not([data-theme="light"]) .kopfband--bild .h2 { color: #f4f8f3; } :root:not([data-theme="light"]) .kopfband--bild .lead { color: var(--ink-2-on-deep); } } /* Die weiche Kante ueber dem Band ist mit dem Stapel gegangen: der Text liegt seit dem 15. August unter dem Bild, es gibt keine Naht im Foto mehr, die zu glaetten waere. */ } /* --- Header ------------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 50; } /* SEIT DEM 17. AUGUST ZWEI FLÄCHEN — Iris: die Navigation zieht unter den Balken, ins Kopfbild. Der Grund (früher am ganzen .header) gehört seither dem Balken allein; die Navzeile darunter bringt keinen eigenen mit. */ .header__balken { /* Altgeräte: Vollwert vor color-mix. */ background: var(--paper); background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color 300ms var(--ease), background-color 300ms var(--ease); } .header.is-stuck .header__balken { border-bottom-color: var(--line); background: var(--paper); background: color-mix(in srgb, var(--paper) 94%, transparent); } /* DIE NAVZEILE — durchsichtig, damit auf Seiten mit Kopfbild das Bild durchscheint (Iris, 17. August: «die 3 Überschriften unterhalb des Balken, also im KOPFBILD»). Ohne Kopfbild steht sie auf dem Papier der Seite; beim Scrollen (is-stuck) holt sie sich den Navy-Grund des Balkens zurück, sonst stünden die Ziele durchsichtig über Fliesstext. */ .header__navzeile { padding-block: 0.3rem 0.45rem; } .header__navzeile .nav { justify-content: center; } .header.is-stuck .header__navzeile { background: var(--deep); } .header.is-stuck .header__navzeile .nav__link { color: var(--ink-on-deep); } .header.is-stuck .header__navzeile .nav__link:hover { color: #ffffff; } /* --- Der Kopf über dem Kopfbild ------------------------------------------ Iris, 6. August: „der obere Balken von den Kopfbildern ist eigentlich für das Menü gedacht." Das Kunstwerk trägt oben einen fast schwarzen Himmelsstreifen — bis heute sind wir ihm ausgewichen (Ausschnitt bei 88 % Höhe verankert, daher der Zoom-Eindruck). Jetzt wird er benutzt: auf der Startseite liegt der Kopf durchsichtig AUF dem Streifen, das Bild beginnt an der Oberkante, und der Ausschnitt darf oben ankern. Drei Absicherungen, jede mit Grund: 1. Nur mit `:root.hat-js` (setzt site.js als Erstes). Ohne Skript gibt es kein is-stuck — ein durchsichtiger Kopf bliebe beim Scrollen durchsichtig über Fliesstext. Ohne Skript gilt also das heutige Layout. 2. Nur oberhalb 46rem. Das Telefon hat seit dem 6. August seine eigene, abgenommene Hero-Aufteilung (Band unten) — die bleibt unangetastet. 3. Der Überlager kommt aus einem Body-Grid, nicht aus einer geratenen Kopfhöhe: Kopf und Inhalt teilen sich dieselbe Grid-Zelle, der Kopf schwebt obenauf. Eine negative Marge müsste die Kopfhöhe exakt kennen und läge bei jeder Schriftgrössen-Einstellung daneben. */ @media (min-width: 46.01rem) { :root.hat-js body.mit-kopfbild { display: grid; grid-template-columns: 100%; grid-template-rows: auto auto 1fr auto; } :root.hat-js body.mit-kopfbild > .skip-link, :root.hat-js body.mit-kopfbild > .review-banner { grid-row: 1; grid-column: 1; } :root.hat-js body.mit-kopfbild > .header { grid-row: 2; grid-column: 1; align-self: start; } :root.hat-js body.mit-kopfbild > main { grid-row: 2 / 4; grid-column: 1; } :root.hat-js body.mit-kopfbild > .footer { grid-row: 4; grid-column: 1; } /* ~~DIE KOPFZEILE ALS FORTSETZUNG DES KOPFBILDS~~ — hier standen bis zum 16. August drei Bloecke, die den Kopf ueber dem Kopfbild einfaerbten: einer fuer die Systemeinstellung Dunkel, einer fuer die Handwahl Dunkel, einer fuer die Handwahl Hell. Sie sind ersatzlos entfallen. Der Grund ist Iris' Entscheid vom selben Tag — „wir koennen auch den ganzen Balken einfaerben mit diesem dunkelblau". Ein Kopf, der IMMER `--deep` traegt, braucht keine Sonderfarben mehr fuer den Fall, dass er ueber einem Bild liegt: es gibt den Fall nicht mehr. Was damit ebenfalls verschwindet, ist eine ganze Fehlerklasse. Genau hier stand die abgestandene Konstante `rgb(25 47 110)`, am 6. August im damaligen Nachtbild gemessen und einen Tag spaeter ueberholt, als der Himmelsstreifen aus den Dateien geschnitten wurde. Drei Bloecke, die eine Flaeche beschreiben, die es nicht mehr gibt, koennen nicht stimmen bleiben. Ein Token kann nicht veralten. */ bis ganz nach oben ab — direkt unter dem Balken stand darum ein künstlich geschwärzter Himmel, und die Naht fiel auf. Die Maske blendet den Schleier über die ersten 8rem ein: oben zeigt das Bild seine echte Himmelsfarbe (die zur Balkenfarbe gehört, die Kante zwischen beiden ist im Original so gezeichnet), und dort, wo der Text beginnt (padding-block-start ≥ 9rem), ist der Schleier längst voll — die gemessene AA-Garantie bleibt unberührt. */ :root.hat-js body.mit-kopfbild .hero__scrim { mask-image: linear-gradient(to bottom, transparent, #000 8rem); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8rem); } /* DIE NAVIGATION AUF DEM KOPFBILD — Iris, 17. August: «die 3 Überschriften unterhalb des Balken, also im KOPFBILD». Drei Anläufe, zwei davon gemessen durchgefallen, damit der dritte nicht wie Geschmack aussieht: 1. erzwungen hell — am Tag hell auf hellem Tagbild; 2. Themen-Token (dunkel am Tag) — der Tag-Himmel des Kopfbilds ist aber ein MITTLERES Blaugrau (gemessen 95/133/153), auf dem weder dunkel (2,0:1) noch weiss (3,9:1) die 4,5 erreicht. Ein mittlerer Grund schlägt beide Schriftfarben; also bekommt die Zeile denselben Handgriff wie jeder Fototitel dieser Website: einen Schleier, der nach unten ins Bild ausläuft. Unter ihm ist der Grund definiert dunkel, die Schrift definiert hell — Tag wie Nacht, Foto wie Zeichnung. Gemessen darunter: 7,7:1 an der Textlinie des Tagbilds, dem hellsten Fall. */ :root.hat-js body.mit-kopfbild .header:not(.is-stuck) .header__navzeile { background: linear-gradient(to bottom, rgb(10 20 32 / 65%) 0%, rgb(10 20 32 / 45%) 70%, rgb(10 20 32 / 0%) 100%); } :root.hat-js body.mit-kopfbild .header:not(.is-stuck) .header__navzeile .nav__link { color: var(--ink-on-deep); } :root.hat-js body.mit-kopfbild .header:not(.is-stuck) .header__navzeile .nav__link:hover { color: #ffffff; } /* Die Personenseiten tragen seit dem 17. August dasselbe Kopfbild- Überlagern wie die Startseite (Klasse mit-kopfbild an ihrem body). Ihr Kopf braucht dann Luft für Balken UND Navzeile, sonst beginnt die Augenbraue unter der Navigation. Gemessen wird unten im Bild, nicht geraten — die drei Stufen folgen den Schriftgrössen mit. */ :root.hat-js body.mit-kopfbild .personkopf { padding-block-start: clamp(11rem, 16vw, 13rem); } /* Das Zeichen folgt in der Anfangsansicht dem Theme: Gold am Tag, Silber in der Nacht — Iris, 6. August: „let's keep the golden logo for the initial view", präzisiert am 7.: „Die Nacht Version sollte das Silberne Logo." Es braucht dafür KEINE eigene Regel mehr: die Theme-Regeln weiter oben tun genau das, und die Rund-Fassungen bringen beide ihre Navy-Scheibe mit — Gold wie Silber stehen auf dem dunklen Band sicher. (Bis zum 6. August erzwang hier eine Regel Silber, danach kurz eine Gold in beiden Themes; beide sind ersatzlos gestrichen.) */ /* Und das Bild selbst: UNTEN verankert, und der gezeichnete Streifen oben ist aus dem Ausschnitt beschnitten — er lebt jetzt als Farbe der Kopfzeile weiter (oben). Bei Kopfhöhe 52.1vw (= 695 von 790 Einheiten, das Bild ohne Streifen) schneidet `cover` exakt die 95 Streifen- einheiten ab und nichts sonst: die Berge stehen vollständig und in den gezeichneten Proportionen da — weiter herausgezoomt geht nicht, ohne das Bild zu verkleinern. Der Zoom entfällt; das Einschweben bleibt reine Beruhigung auf 1.0. */ :root.hat-js body.mit-kopfbild .hero__media img { object-position: 55% 100%; transform: none; animation: hero-settle-sanft 2400ms var(--ease) 120ms both; } :root.hat-js body.mit-kopfbild .hero { padding-block-start: clamp(9rem, 16vw, 12rem); /* Kein Zoom mehr (Iris, 6. August: „the mountains still look zoomed in", abends: „so we can zoom out more"): seit dem 7. August ist der Streifen PHYSISCH aus den Dateien beschnitten (make_kopf_sonne.py, viewBox ab y=100) — die Zeichnung ist jetzt 1334 × 690, und `cover` schneidet genau dann nichts ab, wenn der Kopf dieses Seitenverhältnis trägt: 100vw × 690 / 1334 = 51.72vw. Der alte 46rem-Boden ist raus (Iris, 7. August: „did you zoom in again on the mountains? pls dont"): er zwang den Kopf auf mittleren Fenstern über die Bildhöhe hinaus, und cover glich das mit seitlichem Beschnitt aus — dem gefühlten Zoom. Jetzt bestimmt das Bild die Höhe; nur wo der Text mehr Platz braucht, wächst der Kopf um genau diesen Text, keinen Pixel weiter. */ min-height: 51.72vw; } } @keyframes hero-settle-sanft { from { transform: scale(1.04); } to { transform: scale(1.0); } } /* --- Die Marke steht in der Mitte ---------------------------------------- Iris, 12. August: „ANOTHER THOUGHT I HAD WAS, WHY NOT SET IT UP IN THE MIDDLE, THAT MIGHT SOLVE THE HEADER MENU SPACE ISSUE." Drei Spalten statt einer Reihe: `1fr auto 1fr`. Die Marke sitzt in der mittleren, und weil beide Aussenspalten `1fr` sind, steht sie in der Mitte des **Fensters** — nicht in der Mitte dessen, was gerade übrig ist. Wächst die Navigation links, rückt die Marke nicht mit. Das ist der Punkt, an dem ihr Vorschlag mehr löst als er verspricht: die Wortmarke stand bisher links und schob mit `margin-inline-end: auto` alles andere nach rechts. Jede zusätzliche Sprache, jede längere Übersetzung drückte damit direkt auf die Umbruchschwelle. Im Raster ist die Marke aus diesem Kräftespiel heraus. Die Zeile darunter (`.wordmark`) stapelt sich dafür: Signet oben, Schrift darunter. Nebeneinander wäre die Marke 234 px breit und die Mitte hätte keinen Platz mehr. */ .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1rem; min-height: 4.25rem; /* DIE HÖHE DES MARKENNAMENS, EINMAL BENANNT — Iris, 16. August: „Have the middle line of the symbols to the left be in line with the middle of the botton and the map sign and the middle of the logo." Gemessen bei 1170 und 1440 px, und der Befund ist eng: Kreiskette (beide Zeilen) Mitte 89,7 «1. Gespräch» und Nummer Mitte 89,7 **das runde Signet** Mitte 77,7 Drei von vier lagen also schon auf einer Linie; **das Logo lag 12 px darüber**, und zwar aus einem Grund, den man erst sieht, wenn man ihn ausrechnet: die Wortmarke ist eine Spalte aus Zeichen UND Namen, und zentriert wird die ganze Spalte. Der Name unten drückt das Zeichen nach oben, um genau seine halbe Höhe. Die Zahl steht deshalb hier und nicht als 12 px im Nachbarn: sie ist die Namenszeile plus der Spaltenabstand, in `rem`, damit sie die drei Schriftgrössen-Stufen (100/125/150 %) mitmacht. Eine Pixelzahl hätte bei 125 % wieder danebengelegen — dieselbe Falle wie bei der senkrechten Mitte am selben Tag. */ /* 0.86 → 1.05 rem am 17. August: neben dem 6-rem-Zeichen (statt darunter) darf der Name grösser sprechen — der Platz, den Iris meinte («wir haben dort noch platz»), ist der der ausgezogenen Navigation. */ --marke-schrift: 1.05rem; /* --marke-name wird seit dem 17. August von niemandem mehr gerechnet (der Ausgleich an den Nachbarn ist mit dem gestapelten Namen gegangen); der Token bleibt definiert, damit ein künftiger Leser die Herleitung im Verlauf findet, statt sie neu zu erfinden. */ --marke-name: calc(var(--marke-schrift) * 1.35 + 0.1rem); } /* AUSGEGLICHEN WIRD ÜBER DIE NACHBARN, nicht über die Marke. Ein Versatz an der Wortmarke schöbe die Kopfzeile tiefer und machte sie höher — die 33 px, die Iris am 11. August erkämpft hat, gäbe man hier still zurück. Ein unterer Aussenabstand am Nachbarn dagegen verschiebt in einer zentrierten Zeile nur dessen Inhalt, und zwar um die halbe Marge; die Zeilenhöhe bleibt, wie sie ist (gemessen: Kette 79 px + 24 Marge = 103 in einer 104 px hohen Zeile). Die Aktionsleiste trägt dieselbe Marge, und mit ihr das Kartenzeichen — es steht in ihr, also wandert es mit, ohne eigene Regel. */ /* ~~Der Mittellinien-Ausgleich (untere Marge in Höhe der Namenszeile an Kette und Aktionsleiste)~~ — ersatzlos entfallen am 17. August. Er kompensierte den Namen UNTER dem Zeichen, der die Spalte um seine halbe Höhe nach oben drückte. Seit der Name NEBEN dem Zeichen steht (Iris: «neben das Logo rechts»), ist die Marke einzeilig und alle vier Mittellinien treffen sich ohne Rechnung. Ein Ausgleich für eine Zeile, die es nicht mehr gibt, wäre der neue 12-px-Fehler. */ .wordmark__name { line-height: 1.35; } /* Der Platzhalter, der das Zeichen in die Mitte rückt. Er erbt Schrift, Grad, Gewicht und Sperrung von `.wordmark` — dieselben wie beim sichtbaren Namen —, also ist er auf den Bruchteil gleich breit. `visibility: hidden` statt `display: none`: nur so behält er seinen Platz. Aus dem Vorleseprogramm ist er ohnehin heraus (beides zugleich: `aria-hidden` im Markup und `visibility: hidden` hier). */ .wordmark__spiegel { visibility: hidden; line-height: 1.35; } /* DIE KOPFZEILE DARF BREITER SEIN ALS DER FLIESSTEXT — Iris, 14. August, zu einem Bildschirmfoto von einem grossen Schirm: „These all seem pressed together on the big screen." Sie hatte recht, und die Ursache ist eine geteilte Schale. `.shell` deckelt bei `--shell` (74 rem = 1184 px), weil ein Lesetext ab etwa 80 Zeichen unlesbar wird — dieser Deckel ist für Prosa richtig und soll bleiben. Die Kopfzeile ist aber keine Prosa: sie ist eine Werkzeugleiste mit einem Zeichen in der Mitte. Auf 1900 px stand sie in einem 1184er Band mit je rund 360 px Leere daneben, und genau das liest sich als zusammengedrückt. Also nur hier ein zweiter Deckel. Das Raster bleibt `1fr auto 1fr`, das Signet bleibt damit **exakt auf der Mittellinie** — dieselbe, auf die heute die Abschnittsköpfe gebracht wurden. Was auseinandergeht, sind nur die beiden Ränder. ~~88 rem~~ → **80,5 rem, am 19. August**, und diesmal ist die Zahl hergeleitet statt gewählt. Iris, zu einem Foto ihres Fensters: „auch die oberen Kopfmenüzeichen müssen auf meinem Bildschirm nicht so nah beisammen sein." IHR FENSTER IST RUND 1385 px BREIT — zurückgerechnet aus dem Fussraster im Foto (Spaltenabstand 32 px, Rasterbreite = Schale 1184 − 2 × 52 Steg = 1080). Erkennbar war es daran, dass Kopf- und Fussschale im Bild **exakt gleich breit** stehen: dieser Block greift also nicht. Sie sass **23 px unter der Kante**, und das kostete: Inhalt 1080 − Wortmarke ~354 − 2 Rasterabstände = 694 davon die Hälfte (1fr auto 1fr, Signet mittig) = 347 je Seite zwölf Spuren mit 3,46 px Lücke = **24,7 px je Kreis** Das ist die gesetzliche Untergrenze: WCAG 2.2 §2.5.8 verlangt 24 px, und `/barrierefreiheit/` verspricht sie öffentlich. Ihre Zeichen standen mit 0,7 px Reserve darauf. WARUM GENAU 80,5 rem (1288 px) UND KEINE RUNDE ZAHL. Das ist die Breite, ab der die Formel überhaupt etwas ändert: darunter ist `100% − 2 × var(--gutter)` **kleiner** als 74 rem, die Regel würde die Kopfzeile also *verschmälern*. 74 rem + 2 × 52 px = 1288. Ab dort wächst sie stetig mit dem Fenster mit, statt bei 1408 zu springen. Auf ihrem Fenster: Inhalt 1080 → 1177, Aussenspalte 347 → 395, Kreis **24,7 → 29,8 px**. Die Kreise selbst behalten ihren Deckel von 2,25 rem — die Spuren sind `1fr` und der Kreis steht mittig darin, also wird jeder zusätzliche Punkt Breite **von selbst zu Luft zwischen den Zeichen**. Ein höherer Deckel (2,9 rem war gebaut und wurde wieder ausgebaut) frisst genau diese Luft: bei 2560 px stünden dann 5 px zwischen den Kreisen statt 16. Sie hat um Luft gebeten, nicht um grössere Kreise. */ @media (min-width: 80.5rem) { .header .shell { max-width: min(108rem, 100% - 2 * var(--gutter)); max-inline-size: min(108rem, 100% - 2 * var(--gutter)); } } /* `stretch` und nicht `start` — die eine Zeile, an der die ganze Rechnung bei `.header__einstellungen` hängt. Nur eine gefüllte Zelle hat eine Breite, die `auto-fit` ausmessen kann; mit `start` wäre die Kette wieder so breit wie ihr Inhalt, und alle zwölf stünden in einer Reihe, die über die Zelle hinausragt und die Marke schiebt. Die Kreise selbst bleiben links, dafür sorgt `justify-content` im Kasten. */ .header__inner > .header__einstellungen { grid-column: 1; grid-row: 1; justify-self: stretch; } .header__inner > .wordmark { grid-column: 2; grid-row: 1; justify-self: center; } .header__inner > .header__rechts { grid-column: 3; grid-row: 1; justify-self: end; } /* Rechts stehen Themen und Handlung in **einer** Zelle, nebeneinander: die Navigation, dann der Knopf als letztes Element der Zeile. Zwei getrennte Rasterspalten wären es nicht — dann stünde zwischen ihnen der freie Raum des Rasters, und die Zeile läse sich als zwei Blöcke statt als ein Weg. */ .header__rechts { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(0.6rem, 1.4vw, 1.1rem); } /* Rechts steht viel und links wenig — 618 px gegen 36. `1fr auto 1fr` hält die Marke trotzdem in der Fenstermitte, indem es beiden Aussenspalten dasselbe gibt; bei 1440 px sind das je 620, und die rechte Seite passte mit zwei Punkten Luft hinein. Das ist keine Reserve, das ist Zufall. `nowrap` und der engere Abstand holen 40 px, damit die Zeile nicht bei der nächsten Übersetzung umbricht. */ .header__rechts .header__actions { flex-wrap: nowrap; } .header__rechts .btn { white-space: nowrap; } /* ZWEI LINKS WENIGER OBEN, UND DAS IST RECHNUNG, NICHT GESCHMACK. Damit die Marke wirklich in der Fenstermitte steht, muss die linke Spalte so breit sein dürfen wie die rechte. Die rechte trägt Navigation und Knopf; gemessen mit fünf Links sind das 618 px, und eine mittige Marke bräuchte dann 2 × 618 + 121 = 1357 px Fensterbreite. Darunter rutscht sie nach links — bei 1440 px um 153 px, bei 1280 um 148. Mit drei Links sind es 434 px und die Grenze liegt bei 989. Die Marke steht dann von 1024 px aufwärts mittig, und darunter greift ohnehin die Telefonanordnung. Weg sind „Angebot" und „Ablauf" — beide führen zu Abschnitten der Startseite, die man beim Lesen ohnehin durchläuft. Dieselbe Abwägung wie am 7. August, als sie zwischen 800 und 1024 px zurücktraten; jetzt gilt sie überall. „Angehörige", „Über uns" und „Mitwirken" führen auf eigene Seiten und bleiben. */ .nav__link--optional { display: none; } .nav__link--optional.nav__link--mitwirken { display: inline-flex; } /* DIE ZWÖLF STEHEN IN EINEM RASTER, UND ZWAR AUF JEDER BREITE — Iris, 15. August: „house and languages are not equally spaced like the others", „make sure everything is centered according to the logo". Sie hat einen echten Fehler gesehen, und die Ursache war eine Naht im Aufbau: das Haus stand als eigenes Kind neben der Gruppe `.werkzeuge`, und die Gruppe brachte ihren eigenen Abstand mit. Der Abstand INNERHALB der Gruppe war 4–9 px, der zwischen Haus und Gruppe **null**. Gemessen bei 834 bis 1920 px: erste Lücke 0, alle anderen 4,1 bis 8,8. Zwei Abstände, die dasselbe meinen, laufen irgendwann auseinander. Es gibt deshalb ab jetzt nur noch einen: `.werkzeuge` löst sich per `display: contents` auf **jeder** Breite auf (bisher nur unter 50 rem), alle zwölf Zeichen liegen im selben Raster, und ein einziger `gap` regelt die Kette. Das Haus ist dadurch kein Sonderfall mehr, sondern das erste von zwölf gleichen Gliedern. Sechs Spalten und nicht zwölf: zwölf in einer Reihe brauchen rund 530 px, und solange die rechte Seite ihre Navigation trägt, ist damit die Mitte verloren (siehe die Rechnung bei 96 rem). Sechs und sechs teilen die Zwölf sauber — Iris' eigene Begründung vom selben Tag, „elf ist eine Primzahl" — und die Kette bleibt schmal genug, dass das Logo mittig stehen kann. */ /* ~~Sprossen~~ → **so viele, wie hinpassen.** Iris, 16. August: „I got a pretty big screen and I'd like to see all the circles in one line… if device screens get smaller or I make my window smaller, they should rearrange in order of space!" Sie hat zweimal dasselbe gemeldet, und beide Male habe ich an der falschen Stelle geschraubt: erst 96 rem, dann 72, dann 88 — drei geratene Schwellen für eine Frage, die gar keine Schwelle braucht. DIE URSACHE, und sie ist die ganze Erklärung: die Kette **bestimmte ihre Spaltenbreite selbst.** Sie stand mit `justify-self: start` in einer `1fr`-Zelle, war also so breit wie ihr Inhalt — zwölf Kreise machten die linke Spalte breiter als die rechte, und die Marke rutschte aus der Mitte. Genau davor hat jede der drei Schwellen geschützt. Füllt die Kette stattdessen ihre Zelle (`justify-self: stretch`), ist ihre Breite vom Raster gesetzt und nicht mehr von ihrem Inhalt. Dann **kann** sie die Marke gar nicht mehr verschieben, und die Frage „ab wann passen zwölf?" beantwortet der Browser selbst: repeat(auto-fit, ) So viele Spalten, wie in die Zelle gehen, neu gerechnet bei jeder Fensterbreite. Nachgerechnet gegen die alte Leiter: 1920 px Zelle 814 px braucht 528 → 12 in einer Reihe (vorher 12) 1512 px Zelle 655 braucht 528 → 12 (vorher 12) 1280 px Zelle 543 braucht 517 → 12 (vorher 6+6) 1152 px Zelle 527 braucht 508 → 12 (vorher 6+6) 1024 px Zelle 463 braucht 500 → 6+6 900 px Zelle 401 braucht 497 → 6+6 Iris bekommt die lange Reihe damit ab rund 1090 px statt ab 1408 — und die 1280er und 1366er Schirme, die ich ihr am selben Tag noch als „ginge nur um den Preis einer Marke ausser Mitte" verkauft habe, bekommen sie auch. Der Preis war nie nötig; er stammte aus der Bauweise, nicht aus dem Platz. Die drei Sprossen 4 und 3 unten und 12 oben sind damit ersatzlos weg. Was bleibt, ist eine einzige Regel, die überall gilt — und sie deckt auch Breiten ab, an die niemand gedacht hat. */ .header__einstellungen { display: grid; /* Ein Glied ist so breit wie `.theme-toggle`. Die Zahl steht hier als eigene Variable und nicht als Literal, weil die Kreise unter 40 rem eine Stufe schrumpfen — dort wird sie nachgeführt, an einer Stelle. */ --glied: 2.25rem; grid-template-columns: repeat(auto-fit, var(--glied)); justify-content: start; /* `align-items: center` ist kein Feinschliff, sondern eine gemessene Korrektur: `
` (die Sprachwahl) ist als einziges Element der Kette kein reiner Kreis und sass im Raster-Standard `stretch` 2 px höher als ihre elf Nachbarn. Zwei Pixel sieht niemand bewusst; eine Kette, in der ein Glied nicht auf der Linie liegt, sieht jeder. */ align-items: center; gap: clamp(0.25rem, 0.6vw, 0.6rem); } /* Aufgelöst, damit die zwölf im selben Raster liegen. Die Hülle bleibt im Markup stehen — sie trägt `id` und `data-werkzeuge`, an denen site.js und die Tastaturführung hängen; sie ist nur kein Kasten mehr. */ .werkzeuge { display: contents; } /* ZWÖLF IN EINER REIHE, AB DEM TABLET — Iris, 18. August: „es sollte sogar auf einem iPad in einer Reihe funktionieren." WARUM DIE ALTE LÖSUNG NICHT REICHTE. `auto-fit` mit fester Gliedbreite stellt zwölf nebeneinander, sobald zwölf **in voller Grösse** hineinpassen — und sonst gar nicht. Dazwischen gibt es nichts: entweder 36 Pixel je Kreis oder zwei Reihen. Gemessen brauchte die Kette dafür 1728 px Fensterbreite; darunter brach sie um, auch auf einem Bildschirm, der reichlich Platz gehabt hätte. UND DER PLATZ IST NICHT MONOTON. Bei 1180 px hat die Kette 474 px, bei 1366 nur 345 — weniger auf dem breiteren Schirm. Ursache ist der Schriftzug neben dem Logo (Iris, 17. August): ab 1280 px wächst die Mitte von 96 auf 358 px, und weil die Marke mittig bleiben muss, verlieren beide Aussenspalten je 131 px. Jede Lösung mit festen Haltepunkten müsste diesen Sprung von Hand nachbauen — genau so ist der falsche Kommentar entstanden, der bis heute „eine Reihe ab 1440" behauptete. DIE LÖSUNG MISST STATT ZU RATEN. Zwölf gleiche Spuren (`repeat(12, 1fr)`) liegen IMMER in einer Reihe; der Kreis füllt seine Spur und ist nach oben auf seine Normalgrösse begrenzt. Wird der Platz knapp, schrumpfen alle zwölf gemeinsam, statt dass drei umbrechen. DIE UNTERGRENZE IST KEINE GESCHMACKSFRAGE. `min-width: 24px` hält WCAG 2.2 §2.5.8 — dieselbe Zahl, die `/barrierefreiheit/` öffentlich verspricht. Unterhalb von 64 rem (1024 px) reicht der Platz dafür nicht: dort blieben rechnerisch 22 px je Kreis. Deshalb gilt die Reihe erst ab dem Tablet, und darunter bleibt der Umbruch — ein Ziel, das zu klein zum Treffen ist, ist schlechter als eines in der zweiten Zeile. */ @media (min-width: 64rem) { .header__einstellungen { grid-template-columns: repeat(12, minmax(0, 1fr)); /* Der Abstand ist der Hebel, nicht die Kreisgrösse. Zwischen 1280 und 1400 px nimmt der Schriftzug der Kette 131 px je Seite; dort entscheiden elf Lücken darüber, ob zwölf in eine Reihe gehen. Gemessen bei 1280: mit 4,5 px Lücke bleiben 24,6 px je Kreis und die Reihe bricht an der 24-px-Grenze um — mit 3,2 px sind es 25,8 und sie hält. */ gap: clamp(0.1rem, 0.25vw, 0.4rem); } .header__einstellungen > .theme-toggle, .header__einstellungen > .lang, .header__einstellungen > a, .header__einstellungen > button, .header__einstellungen > details { width: 100%; min-width: 24px; max-width: 2.25rem; justify-self: center; } /* Der Kreis bleibt ein Kreis: Höhe folgt der Breite, nicht dem alten festen Mass. Ohne `aspect-ratio` würde aus dem Kreis ein Oval, sobald die Spur schmaler wird als 2,25 rem. */ .header__einstellungen .theme-toggle { width: 100%; height: auto; aspect-ratio: 1; min-width: 24px; max-width: 2.25rem; } } /* Auf dem grossen Schirm stehen alle zwölf in EINER Reihe — Iris, 15. August: „when it is large have them space out evenly all of them with the logo always remaining in the middle." Ab 96 rem trägt die Navigation wieder ihre eigene Zelle rechts, die Schale ist auf 108 rem geöffnet, und beides zusammen reicht für die 530 px der langen Kette, ohne dass die Marke ihre Mitte verliert. Die Schwelle ist dieselbe wie die der Navigationszeile, und das ist kein Zufall: es ist dieselbe Rechnung. */ /* ~~96 rem~~ → **72 rem**, gemessen am 16. August. Iris: „und wenn möglich auf grossen bildschirm lieber wieder eine reihe der tools also 1 x 12." Die alte Schwelle war zu hoch gesetzt, und der Grund dafür war eine Rechnung, die inzwischen nicht mehr galt: 96 rem ist die Breite, ab der die Navigation ihre eigene Zelle NEBEN der Marke bekommt. Darunter steht sie längst in einer eigenen Zeile — dort hat die Kette also die ganze Breite für sich, und niemand hat es nachgerechnet. Nachgerechnet, bei der 74-rem-Schale (1184 px Inhalt): zwölf Kreise in einer Reihe 490 px Marke 99 px Aktionsleiste 283 px Für eine mittige Marke muss die rechte Aussenspalte so breit sein dürfen wie die linke, also 2 × 490 + 99 + 2 × 16 = **1111 px**. Die Schale gibt 1184. Es passt mit 73 px Luft, und zwar ab rund 1150 px Fensterbreite — also ab 72 rem. ~~72 rem~~ — die Rechnung oben war richtig und die Schwelle trotzdem falsch, gemessen eine Viertelstunde später. Sie hatte die **Schale** vergessen: unterhalb von 88 rem deckelt `.shell` bei 74 rem (1184 px), und der Inhalt misst dann nur 1080. Gemessen bei 1152 und 1280 px: verfügbar für beide Aussenspalten 948 px → 474 je Spalte die Kette braucht 527 px Die linke Spalte wächst dann über ihren Anteil hinaus, die rechte bekommt den Rest — 516 gegen 433 — und **die Marke rutscht 42 px aus der Mitte**. Genau das, was seit dem 15. August nicht mehr passieren darf. Also 88 rem, und das ist keine dritte geratene Zahl: es ist die Breite, ab der die Kopfzeile ihre eigene, weitere Schale bekommt (108 rem statt 74 — die Regel steht weiter oben, sie stammt von Iris' „These all seem pressed together on the big screen"). Ab dort misst der Inhalt 1232 px, beide Aussenspalten bekommen 550, und 550 ≥ 527. Gemessen bei 1440 und 1512 px: eine Reihe zu zwölf, Marke exakt mittig. Was das für Iris' Bildschirm heisst, ehrlich gesagt: 1440 und 1512 px bekommen die lange Reihe jetzt, 1280 und 1366 nicht. Dort ginge sie nur um den Preis einer Marke, die nicht mehr in der Mitte steht — und das ist der teurere Verlust. */ /* ~~Die 12er-Sprosse~~ — ersatzlos gestrichen am 16. August. `auto-fit` oben stellt zwölf in eine Reihe, sobald zwölf hineinpassen, und braucht dafür keine Breite genannt zu bekommen. */ .wordmark { /* NEBENEINANDER STATT ÜBEREINANDER — Iris, 17. August: «nehmen wir „Care Journey" mal neben das Logo rechts (wir haben dort noch platz)». Der Platz ist da, seit die Navigation in die eigene Zeile gezogen ist: die Mittelspalte trägt jetzt Zeichen UND Name in einer Reihe. Auf den RTL-Kernseiten dreht die Reihe von selbst — der Name steht dann links vom Zeichen, was dort «danach» heisst. UND DAS SIGNET BLEIBT DABEI IN DER FENSTERMITTE — Iris, wenige Minuten später: «the logo and über uns and the rest need to remain centered according to the logo.» Sie hat den Fehler gesehen, den der Umbau eingeführt hat: eine zentrierte Reihe legt ihre MITTE auf die Fenstermitte, und die Mitte einer Reihe aus Zeichen und Name liegt nicht im Zeichen. Gemessen bei 1200 px: Signet 533, ÜBER UNS 600 — 67 px auseinander, genau die halbe Breite von Name plus Abstand. `1fr auto 1fr` löst das ohne Zahl, dieselbe Mechanik wie eine Zeile tiefer bei der Navigation: das Zeichen steht in der Mittelspalte, der Name in der rechten, und die linke bleibt leer und **gleich breit wie die rechte** — per Definition, in jeder Sprache und bei jeder Namenslänge. Das Zeichen liegt damit exakt auf der Achse, auf der ÜBER UNS steht. Eine Pixelkorrektur hätte für Deutsch gestimmt und für Türkisch nicht. ~~`grid-template-columns: 1fr auto 1fr`~~ — erster Versuch, gemessen durchgefallen: die Marke ist `justify-self: center` in einer `auto`-Spalte, also **so breit wie ihr Inhalt**. Freier Raum ist null, `1fr` bekommt null, und das Zeichen stand weiter links — 1200 px: 481 statt 600; 1920 px: 841 statt 960, mit der Breite wachsend. WAS STATTDESSEN TRÄGT: ein **unsichtbarer Zwilling des Namens** vor dem Zeichen (`.wordmark__spiegel`). Er trägt denselben Text in derselben Schrift, ist damit auf den Bruchteil gleich breit, und `visibility: hidden` nimmt ihn aus dem Bild und aus dem Vorleseprogramm — nicht aus dem Layout. Links und rechts vom Zeichen steht dann dieselbe Breite, in jeder Sprache und bei jeder künftigen Umbenennung, ohne dass irgendwo eine Zahl steht. */ display: inline-flex; flex-direction: row; align-items: center; gap: 0.65rem; padding-block: 0.3rem; /* GESCHRIEBEN WIE DER NAME — Iris, 13. August abends: „CareJourney unter logo so geschrieben und in regenbogen effect". `text-transform: uppercase` ist deshalb weg; dafür etwas mehr Grad und weniger Sperrung, weil Gemischtschrift enger gesetzt wird als Versalien. */ font-size: var(--marke-schrift); font-weight: 600; font-variation-settings: "wdth" 112; letter-spacing: 0.04em; text-align: center; text-decoration: none; color: var(--ink); } /* Der Regenbogen auf dem Namen — dieselben fünf Stufen wie auf ihren Knöpfen und der Personenseite (11. August, „FOUND IT, LET USE THIS MOCK UP"), also kein neuer Effekt, sondern derselbe an der Stelle, die sie jetzt genannt hat. `@supports` ist kein Zierrat: `color: transparent` ohne `background-clip: text` ergäbe einen **unsichtbaren Markennamen**. Wo der Browser den Zuschnitt nicht kennt, greift der Block gar nicht und die Volltonfarbe von oben bleibt stehen — Kür darf stumm ausfallen (docs/GERAETE_KOMPATIBILITAET.md §2), die Marke nie. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { .wordmark__name { background-image: linear-gradient(100deg, #f2c66d, #ed8eac, #ab8cff, #7bb8ff, #82d9b4); background-size: 250% 250%; -webkit-background-clip: text; background-clip: text; color: transparent; } @media (prefers-reduced-motion: no-preference) { :root[data-motion="full"] .wordmark__name { animation: regenbogenWandern 12s ease-in-out infinite; } } } .wordmark__mark { /* KD-W-07b, Iris 2026-08-01: "the logo is tiny". It was 2.2rem — smaller than the cap height of the wordmark beside it, so the brand read as a speck. 3rem gave it presence. Iris 2026-08-02: grösser, und ein dunkelblauer Kreis dahinter. Der Grund ist sichtbar, sobald man es tut — die Lotusblüte ist eine feine Goldlinie, und feines Gold auf warmem Weiss verschwindet. Auf Navy steht sie. 4.25rem, weil der Kreis optisch mehr Fläche nimmt als das Zeichen allein: gleich gross wirkte kleiner als vorher. Der Kreis kommt hier aus dem CSS und liegt beim WebP hinter der Transparenz. Der JPEG-Zwilling trägt ihn eingebrannt — sonst sähen ältere Geräte ein weisses Quadrat im Kreis (KD-W-07). Iris 2026-08-06, dritte Runde: „no other navy circle after the golden boarder, the boarder is the outermost circle." Der Kreis kam bis dahin aus dem CSS und war grösser als der goldene Ring der Zeichnung — also stand nach dem Gold noch ein Navy-Rand. Jetzt trägt die Datei selbst ihre Scheibe (logo_carejourney_rund, Radius exakt bis zur Ring- aussenkante, gemessen in scripts/make_logo.py), und hier bleibt nur noch die Grösse. Kein background, kein border-radius — nach dem Ring kommt nichts. */ /* Vierte Runde, Iris 13. August: „DANN KÖNNEN WIR UNSER LOGO SELPST ETWAS GRÖSSER MACHEN" — der Tausch, der es bezahlt: Mond/Sonne sind nach links zu den Werkzeugen gezogen, rechts steht nur noch der Gesprächs-Knopf, und die gewonnene Ruhe rechts trägt die grössere Marke in der Mitte. 4.4 → 5 rem. */ /* Fünfte Runde, Iris 16. August: „Das logo darf grösser sein" — gesagt zu einem Bildschirmfoto des NEUEN Navy-Balkens. Und dort stimmt es doppelt: auf dem hellen Papier trug die Scheibe ihren eigenen Hell-Dunkel-Kontrast und wirkte deshalb grösser, als sie war. Auf dem dunklen Balken verschwindet dieser Kontrast — die Scheibe hat dieselbe Farbe wie der Grund, und übrig bleibt allein die Blüte. Ein Zeichen, das mit seinem Grund verschmilzt, muss grösser sein, um gleich stark zu wirken. 5 → 6 rem. */ width: 6rem; height: 6rem; object-fit: contain; } /* KD-W-11, von Iris am 5. August gefunden: im schmalen Fenster wurde aus dem Kreis eine hochkant stehende Ellipse. `flex: none` stand am Bild und lief dort ins Leere — das Flex-Kind ist das umschliessende , nicht das . Das behielt also flex-shrink: 1 und schrumpfte, sobald Wortmarke, Navigation und Knopf zusammen breiter wurden als die Zeile. Dann griff die Grundregel `img { max-width: 100% }` auf die geschrumpfte Breite: Breite unter 4.25rem, Höhe bei 4.25rem, und border-radius: 50% macht daraus keine kleinere Scheibe, sondern ein Oval. Keine der Prüfungen sah es: sie lesen Vorlage und Stylesheet als Text, und beide sagen hier die Wahrheit — das Bild *ist* quadratisch angelegt. Der Fehler entsteht erst im Layout, bei einer bestimmten Breite. */ .wordmark__bild { display: flex; flex: none; } /* Gold am Tag, Silber in der Nacht — und der Kreis dahinter bleibt in beiden Zuständen Navy. Das ist eine Korrektur des Entscheids vom 4. August, der nachts einen cremefarbenen Kreis vorsah: der galt einem Zeichen mit eingebranntem Hintergrund. Das neue Zeichen ist freigestellt und trägt seinen eigenen Ring, und feines Gold wie feines Silber verschwinden auf warmem Weiss — auf Navy stehen beide. Reihenfolge und Spezifität mit Absicht: die Media-Query gilt, solange niemand geschaltet hat; die :root[data-theme]-Regeln (0,2,1) schlagen sie (0,1,0), sobald jemand den Schalter im Kopf benutzt. */ .wordmark__bild--nacht { display: none; } @media (prefers-color-scheme: dark) { .wordmark__bild--tag { display: none; } .wordmark__bild--nacht { display: flex; } } :root[data-theme="light"] .wordmark__bild--tag { display: flex; } :root[data-theme="light"] .wordmark__bild--nacht { display: none; } :root[data-theme="dark"] .wordmark__bild--tag { display: none; } :root[data-theme="dark"] .wordmark__bild--nacht { display: flex; } /* Die Zeichenfamilie — vier Marken auf dem Codex-Abschnitt. Gleiche Kreis-Behandlung wie die Wortmarke, aus demselben Grund: feines Gold auf warmem Weiss verschwindet. Diese Basisregel steht VOR den dunklen Regeln darunter — bei gleicher Spezifität entscheidet die Reihenfolge, und genau daran ist die erste Fassung gescheitert: die Media-Query stand oben und verlor, der Kreis blieb nachts Navy auf Navy. */ .marke-kreis { width: 4.5rem; height: 4.5rem; object-fit: contain; background: var(--deep); border-radius: 50%; /* GOLDENER RING UM JEDE SCHEIBE — Iris, 20. August: „I want all of them to have their golden circle". Vier der Zeichnungen bringen einen eigenen Ring mit (Tiere, HNC, CARE, das Medaillon), acht nicht; gezeichnet wurde er deshalb hier, wo er für alle zwölf gleich ausfällt, statt in acht Bilddateien nachgetragen. `--zeichen-strich` ist ohnehin schon Gold am Tag und Silber in der Nacht, also folgt der Ring den Zeichen von selbst und kann nicht auseinanderlaufen. */ border: 1px solid var(--zeichen-strich); } /* Iris, 2026-08-04: „the color behind the logo, introvert it in night mode, same with the logo itself". In der dunklen Darstellung ist der Navy-Kreis unsichtbar — Navy auf Navy — und das Gold brennt auf dem dunklen Balken. Also kehrt sich das Verhältnis um: der Kreis wird warmes Elfenbein, das Gold liegt dunkel darauf — dasselbe Bild wie am Tag, nur gespiegelt, und leiser. Die JPEG-Zwillinge tragen weiterhin den Navy-Kreis eingebrannt; Geräte alt genug für den JPEG-Pfad behalten schlicht die Tag-Fassung. Beide Richtungen ausdrücklich, damit die manuelle Wahl die Systemeinstellung in jedem Fall schlägt. */ @media (prefers-color-scheme: dark) { .marke-kreis { background: #efe6d2; } } :root[data-theme="dark"] .marke-kreis { background: #efe6d2; } :root[data-theme="light"] .marke-kreis { background: var(--deep); } /* --- Naturgeister (nur /welten/) ---------------------------------------- Vier Schalter, ein Versprechen: aus, bis jemand sie weckt. Der wache Zustand trägt Gold — und aria-pressed ist die einzige Wahrheit, die der Stil abliest. */ .geister { margin-block-start: clamp(2rem, 5vw, 3rem); } .geister__titel { margin: 0.25rem 0 0.4rem; } .geister__hinweis { max-width: 46rem; color: var(--ink-2); margin-block-end: 1.1rem; } .geister__reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.9rem; max-width: 52rem; } .geist { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.85rem 1rem; text-align: start; font: inherit; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 0.75rem; cursor: pointer; } .geist:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; } .geist[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); } .geist__name { font-weight: 600; } .geist__name::after { /* Der Zustand auch als Wortzeichen, nicht nur als Rahmenfarbe: eine Farbdifferenz allein wäre für Farbenblinde unsichtbar (WCAG 1.4.1). */ content: " ·"; color: transparent; } .geist[aria-pressed="true"] .geist__name::after { content: " ●"; color: var(--gold-ink); font-size: 0.7em; } .geist__satz { font-size: 0.82rem; color: var(--ink-3); } .zeichen__reihe { /* Gleiche Spalten statt Flex — gemessen am 6. August (Iris: „bitte noch die Abstände prüfen"): unter Flex richteten sich die Spalten nach der Textbreite, und „Darüber hinaus" schob seine Spalte auf 125 px Abstand, während die drei anderen bei 120 standen. Vier gleiche Spalten nehmen dem Text diese Macht; die Kreise stehen jetzt im gleichen Takt. */ display: grid; /* NEUN SEIT DEM 20. AUGUST — Iris: «Lass uns 9 machen, und noch HNC hinzufügen». Drei mal drei, und das ist gerechnet, nicht gewählt: neun Felder zu 8 rem sind 1 152 px und passen nicht in eine Schale von 1 080 px. Neun teilt sich durch drei, sonst durch nichts Brauchbares — eine Reihe zu neun gäbe es nicht, 5 + 4 wäre schief. Und drei mal drei liest sich als Familienbild; eine Zeile aus neun läse sich als Werkzeugleiste. */ grid-template-columns: repeat(3, minmax(0, 9.5rem)); justify-content: start; gap: clamp(1.5rem, 4vw, 3rem); margin: 0; padding: 0; list-style: none; } /* SECHS STATT VIER — Iris, 20. August: «can we do 6?» Die Rechnung entscheidet über die Spaltenbreite, nicht der Geschmack: bei 9,5 rem je Spalte brauchen sechs Spalten 6 × 152 + 5 × 48 = **1 152 px** und sprengen damit die 1 080 px Inhaltsbreite der Schale. Mit 8 rem sind es 6 × 128 + 5 × 48 = **1 008 px** — es passt, mit Luft. Darunter zwei Stufen statt einer. Drei und drei ist die richtige Teilung für sechs (zwei Reihen zu dritt), nicht vier und zwei. Und auf dem Telefon bleibt es bei zwei — dieselbe Begründung wie bei der Kreiskette im Kopf: ein Ziel, das zu klein zum Treffen ist, hilft niemandem. */ /* Auf breiten Schirmen breitere Spuren. Mit 9,5 rem stand das Quadrat als 456-px-Häufchen links in einer 1 080-px-Schale — gemessen im Browser, nicht geahnt. 12 rem und mehr Abstand geben ihm 688 px: immer noch linksbündig wie der Text daneben, aber kein Häufchen mehr. */ @media (min-width: 64rem) { .zeichen__reihe { /* SECHS SPALTEN, ZWEI LISTEN — Iris, 20. August: «two rows of 6, the main one then the sub one». Gerechnet: 6 x 8 rem = 768 px plus fünf Lücken passt in die 1 080 px der Schale. */ grid-template-columns: repeat(6, minmax(0, 8rem)); gap: clamp(1.5rem, 3vw, 2.5rem); } } /* Die Unterreihe steht enger an der Hauptreihe als an allem anderen — sie gehört dazu, sie ist nur eine Ebene darunter. Kein Strich, keine zweite Überschrift: der Abstand sagt es. */ .zeichen__reihe--unter { margin-block-start: clamp(1rem, 2.5vw, 1.75rem); } /* Drei Spalten auf jeder Breite. Die Zeichen behalten ihre 4,5 rem; nur der Abstand geht zurück, damit drei Spalten auch auf 390 px nebeneinander stehen — 3 × 4,5 rem = 216 px Zeichen, der Rest ist Luft und Beschriftung. */ @media (max-width: 40rem) { .zeichen__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 0.6rem; } } /* Die zwei Türen am Schluss — Karte und Terminal. Sie sind die einzigen zwei Felder, die wirklich irgendwohin führen, und sie sind ABSICHTLICH keine Bilddateien: dieselben zwei Zeichnungen stehen als Inline-SVG schon in der Kopfzeile. Ihre Farbe kommt aus einem Token, also haben sie ihre Tag- und ihre Nachtfassung, ohne dass zwei Dateien auseinanderlaufen können. Gemessen: Gold #ddbc6b auf Navy = 8,0; Tinte #1b3148 auf Elfenbein = 10,7 — dieselbe Gegend wie die gerasterten Zeichen. */ .zeichen__strich { display: grid; place-items: center; color: var(--zeichen-strich); } .zeichen__strich svg { width: 55%; height: 55%; } .zeichen__tuer { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; } .zeichen__tuer:hover .zeichen__name, .zeichen__tuer:focus-visible .zeichen__name { text-decoration: underline; } .zeichen__feld { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; /* `100%` statt fester 9,5 rem: seit sechs Spalten ist die Spalte auf grossen Schirmen 8 rem schmal, und ein Feld, das breiter sein darf als seine Spalte, schiebt den Namen über die Kante. */ max-width: 100%; text-align: center; } .zeichen__name { font-size: 0.82rem; color: var(--ink-2); } /* --- Welten-Einstieg auf der Startseite --------------------------------- Die vier Richtungen als Text mit Richtungswort — bewusst bildlos, das gemessene Seitengewicht ist eine veröffentlichte Aussage. Die Bilder wohnen auf /welten/, wohin jede Karte führt. */ .richtungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } /* DAS BILD AUF DER LEISTUNGSKARTE — 18. August 2026. Iris nach dem ersten Blick auf die fertige Startseite: „Wir haben 1000 medien und fast nichts ist auf der Webseite." Gezählt über zwölf gedruckte Seiten: sieben Fotos, und die drei längsten Textstrecken ohne eines. Dieser Block war die längste. `aspect-ratio: 3/2` statt der quadratischen Quelle: die Bilder sind 1:1 und würden als Quadrat die Karte in zwei Hälften teilen — Bild oben, Text unten, gleich gross. Ein Streifen ordnet sich der Karte unter, statt mit ihr zu konkurrieren. `object-fit: cover` schneidet mittig; die Motive tragen ihren Inhalt in der Mitte, das ist geprüft. `loading="lazy"` steht im Markup: sechs Bilder, die erst geladen werden, wenn jemand so weit gescrollt hat. Das erste Bild der Seite bleibt das Kopfbild. */ /* Die Atempause vor den Zahlen. Flach (21:9), damit sie die Tafel ankündigt und ihr nicht die Aufmerksamkeit nimmt. */ .preise__bild { display: block; margin: 0 0 1rem; border-radius: 3px; overflow: hidden; } .preise__bild img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; } .grid__bild { display: block; margin: 0 0 0.9rem; border-radius: 3px; overflow: hidden; } .grid__bild img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .richtung { display: flex; flex-direction: column; gap: 0.4rem; height: 100%; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-raised); text-decoration: none; color: var(--ink); } .richtung:hover, .richtung:focus-visible { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); } /* Das Bild sitzt OBEN in der Karte und zieht sich über deren ganze Breite — die Karte hat Innenabstand, also holt es sich den mit negativen Rändern zurück. Ein Bild mit Luft ringsum sähe aus wie hineingelegt; eines, das die Kante berührt, gehört zur Karte. 16/9 statt der quadratischen Quelle: vier Karten nebeneinander, jede mit einem Quadrat, wären eine Bilderwand mit Bildunterschriften. Ein flacher Streifen bleibt Vorschau — und das ist die Karte auch. */ .richtung__bild { display: block; margin: -1.1rem -1.2rem 0.7rem; overflow: hidden; border-radius: 4px 4px 0 0; } .richtung__bild img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .richtung__pfeil { font-family: "Archivo", system-ui, sans-serif; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); } .richtung__name { font-family: "Archivo", system-ui, sans-serif; font-weight: 600; } .richtung__satz { font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; } /* Die heranwachsenden Welten — „etwas grauer", wie gewünscht, UND mit dem Wort „Vision": Grau allein wäre Farbe als einziges Signal (WCAG 1.4.1), und auf einem Graustufen-Display sähe „bald" aus wie „defekt". Unter Lebendig kommt beim Zeigen die Farbe zurück — ein Blick in die Zukunft, wörtlich. */ .knospen { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } .knospe { padding: 1.1rem 1.2rem; border: 1px dashed var(--line-strong); border-radius: 4px; filter: grayscale(0.5); opacity: 0.82; } :root[data-motion="full"] .knospe { transition: filter 400ms var(--ease), opacity 400ms var(--ease); } .knospe:hover { filter: grayscale(0); opacity: 1; } .knospe__name { margin: 0 0 0.25rem; font-family: "Archivo", system-ui, sans-serif; font-weight: 600; } .knospe__satz { margin: 0 0 0.5rem; font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; } /* Die Tierart unter dem Namen — Iris, 15. August: „Do we have the 7 animals introduced somewhere." Sie steht als eigene Zeile und nicht als Klammer hinter dem Namen: „Aaro (der Biber)" liest ein Vorleseprogramm als einen Namen mit Anhang, „Aaro / der Biber" als zwei Angaben. Der Karten-Rahmen ist derselbe wie bei den Knospen, weil es dieselbe Aussage ist — das wächst noch heran. */ .tier__art { margin: -0.15rem 0 0.5rem; font-size: var(--t-small); font-style: italic; color: var(--gold-ink); } .wordmark__sub { display: block; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.18em; color: var(--ink-3); } .nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); } .nav__link { position: relative; padding-block: 0.4rem; font-size: var(--t-small); font-weight: 500; font-variation-settings: "wdth" 100; /* IN GROSSBUCHSTABEN — Iris, 15. August: „let's do ANGEHOERIGE, ÜBER UNS und MITWIRKEN (in caps)". Versal braucht mehr Luft zwischen den Zeichen (0.08 statt 0.02em), sonst kleben die Grossbuchstaben. Das Markup behaelt die gemischte Schreibung — Vorleseprogramme lesen ANGEHÖRIGE sonst als Abkuerzung Buchstabe fuer Buchstabe vor. */ text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; color: var(--ink-2); transition: color 220ms var(--ease); } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } .header__actions { display: flex; align-items: center; gap: 0.6rem; } /* --- Die Nummer im Kopf --------------------------------------------------- Iris, 15. August: „muss jemand zuerst nach unten scrollen um die Nummer zu finden?" — musste man; jetzt steht sie neben dem Gespraechsknopf. Sie sieht aus wie ein Knopf zweiter Ordnung: gleiche Hoehe wie `.btn--sm`, aber nur eine Linie statt einer Flaeche. Die Handlung «schreiben» bleibt damit die auffaelligere, «anrufen» steht daneben und nicht darueber — wer telefonieren will, sucht ohnehin gezielt. Die Ziffern tragen `--ink` auf `--paper` (gemessen und gerechnet in test_contrast.py), nie Gold: Gold ist auf Papier Zierde, keine Schrift. Unter 60 rem bleibt nur der Hoerer stehen — eine Zeile mit sieben Zeichen, einem Knopf und zwoelf Ziffern gibt es auf einem Telefon nicht. */ .kopfruf { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.9rem; /* GOLDLINIE STATT GRAULINIE — und `--linie` gab es nie: der Token heisst `--line`, und ein unbekannter Token faellt auf `border-color: initial` zurueck. Im Bild gemessen am 15. August: die Nummer stand ohne sichtbaren Rand neben dem Metallknopf und gehoerte optisch nicht dazu. Jetzt traegt sie die Randfarbe des Metalls (Gold am Tag, Silber in der Nacht) — dieselbe Familie, eine Stufe leiser: Umriss statt Flaeche. */ border: 1px solid var(--gold); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 0.92rem; font-variant-numeric: tabular-nums; white-space: nowrap; transition: border-color 220ms var(--ease), color 220ms var(--ease); } .kopfruf svg { inline-size: 1.05rem; block-size: 1.05rem; flex: none; } .kopfruf:hover, .kopfruf:focus-visible { border-color: var(--focus); color: var(--deep); } @media (max-width: 59.99rem) { .kopfruf__nummer { display: none; } .kopfruf { padding: 0.42rem 0.5rem; } } /* --- Die Werkzeuggruppe --------------------------------------------------- Iris, 11. August: „Auch müssen wir die Kopfbalken reduzieren." Über 50 rem ist die Gruppe **nichts** — `display: contents` löst sie auf, und die sechs Zeichen stehen in der Aktionsleiste, als gäbe es sie nicht. Kein zweiter Kasten, keine zusätzliche Lücke, keine geänderte Reihenfolge. Erst darunter wird sie ein Panel. Und zwar ein **festes**, am Bildschirm ausgerichtetes, nicht am Knopf: dieselbe Lehre wie beim Sprachmenü, das am 5. August auf ihrem Telefon links aus dem Bild lief, weil es an einem Knopf hing, der ganz rechts sitzt. */ /* SEIT DEM 12. AUGUST AUF JEDER BREITE EIN PANEL, nicht mehr nur unter 50 rem. Iris: „ANOTHER THOUGHT I HAD WAS, WHY NOT SET IT UP IN THE MIDDLE, THAT MIGHT SOLVE THE HEADER MENU SPACE ISSUE." Ihre Idee war die Marke in die Mitte. Gemessen war die Mitte allein aber nicht die Lösung: bei 1440 px brauchten Wortzeichen (234), Navigation (434) und Aktionsleiste (439) zusammen 1155 px in einer Zeile, die 1120 breit ist — die Kopfzeile stand auch am grossen Schirm **zweizeilig**, 133 px hoch. Von den 439 px der Aktionsleiste sind 300 die sieben runden Werkzeugzeichen. Also beides: Marke in die Mitte, und die Werkzeuge verschwinden auch am Schirm hinter ihrem Knopf. Danach 234 + 434 + 210 = 878 px — eine Zeile, auf jeder Breite, und die Marke steht wirklich in der Mitte des Fensters statt am linken Rand. Das Panel ist **fest am Bildschirm** ausgerichtet, nicht am Knopf: dieselbe Lehre wie beim Sprachmenü, das am 5. August auf ihrem Telefon links aus dem Bild lief, weil es an einem Knopf hing, der ganz rechts sitzt. Und **unter** der Kopfzeile, nicht darüber — der erste Anlauf legte es über die Aktionsleiste und damit über genau den Knopf, der es wieder schliesst. `absolute` mit `top: 100%` braucht keine geratene Zahl: die Kopfzeile ist klebend und damit der Bezug. */ /* SEIT DEM 12. AUGUST, ZWEITE FASSUNG: am Schirm offen in einer Reihe, am Telefon hinter dem Knopf. Iris: „zuerst alle funktionen schön in einer reihe (aussert beim tel dropdown), in der Mitte das logo, dann der rest... alles auf einer reihe und brauche sowenig platz wie möglich damit wir das logo etwas grösser machen können." Heute Mittag waren sie auf **jeder** Breite hinter dem Knopf — das war der Preis dafür, die Marke in die Mitte zu bekommen. Der Preis ist bezahlt und zurückgegeben: die Wortmarke hat „HNC CARE" abgegeben (ihr Entscheid, „HNC lassen wir mal weg"), und das sind 34 px Höhe und eine schmalere Mittelspalte. Damit passen die sieben Zeichen wieder in die linke Spalte, und die Marke wird trotzdem grösser statt kleiner. */ /* ~~Die Gruppe war ein eigener Flex-Kasten mit eigenem Abstand.~~ Seit dem 15. August löst sie sich auf jeder Breite auf (`display: contents`, oben bei `.header__einstellungen`) — der doppelte Abstand war genau der Fehler, den Iris gesehen hat. */ /* ALLE KREISE OFFEN, AUF JEDER BREITE — Iris, 15. August: "Remember for the menu on the left I wanted to see all of them in circles not some subüberschrift drop down.. Make the spacing between the icons the same for all of them... when the screen is small we can squeeze them and when it is large have them space out evenly all of them with the logo always remaining in the middle." Damit sind zwei Klappen Geschichte: die Werkzeug-Klappe vom 11. August und das Welten-Tor vom Design-Audit. Die Reihe versteckt sich nicht mehr — sie **staucht** sich: der Abstand laeuft mit der Fensterbreite von fast nichts bis 0.55rem, und die Kreise selbst schrumpfen auf schmalen Schirmen eine Stufe (Regel bei .theme-toggle). Das Logo haelt die Mitte ueber das 1fr-auto-1fr-Raster der Kopfzeile, auf jeder Breite. */ /* [hidden] mit Klassenrang — die Rangfrage vom 14. August, einmal gelernt: die Browservorgabe verliert gegen jede Klassenregel. Der Werkzeug-Knopf, um den es damals ging, ist seit dem 15. August Geschichte (alle Kreise offen), aber tropfen.js und andere verstecken Leinwaende per hidden. */ .theme-toggle[hidden] { display: none; } .theme-toggle { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; /* Gold am Tag, Silber in der Nacht — Iris, 15. August. Der Ring ist ab jetzt dauerhaft da, nicht erst beim Zeigen: er sagt, dass hier etwas zu drücken ist, und das soll man sehen, ohne mit der Maus zu suchen. Auf dem Telefon gibt es kein „Zeigen"; ein Zustand, den nur die Maus erreicht, existiert für die Hälfte dieses Publikums nicht. */ border: 1px solid var(--kreis-rand); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; transition: border-color 220ms var(--ease), color 220ms var(--ease); } .theme-toggle:hover { color: var(--ink); } /* --- EINGESCHALTET SIEHT MAN AN DER UMKEHR ------------------------------ Iris, 16. August: „Bei den einstellungen wäre es gut die Farben zu introvertieren, sobald sie ausgewählt sind, damit man zb weiss dass man gerade die no motion an hat usw." Sie hat eine echte Lücke gefunden, und es ist die unangenehmste Sorte: der Zustand WAR da, nur nicht zu sehen. Ruhemodus und Vorlesen tragen seit jeher `aria-pressed`, ein Vorleseprogramm sagt also „gedrückt" an — **auf dem Bildschirm sah der eingeschaltete Knopf aus wie der ausgeschaltete.** Wer den Ruhemodus drückt, hatte keinen Anhaltspunkt, ob etwas passiert ist. Für ein Publikum, das ohnehin unsicher ist, ob es etwas falsch gemacht hat, ist das die falsche Erfahrung. Umgekehrt heisst hier wörtlich umgekehrt: aus Umriss wird Fläche, aus Tinte auf Papier wird Papier auf Tinte. Keine zweite Farbe, kein Häkchen, kein Punkt daneben — dieselben zwei Töne, vertauscht. Die Farbpaare sind die bereits gemessenen der tiefen Flächen: `--ink-on-deep` auf `--deep`, Rand `--gold-on-deep`. Beide wechseln mit der Nacht von selbst mit (dort Silber statt Gold), also gibt es keine neue Messung und keine dritte Fassung. **Farbe ist nicht das einzige Signal** (WCAG 1.4.1): der Rand wird zugleich kräftiger, und `aria-pressed` sagt es weiterhin an. Auf einem Graustufen-Bildschirm bleibt die Umkehr eine Umkehr — hell gegen dunkel trägt auch ohne Farbton. */ .theme-toggle[aria-pressed="true"], .theme-toggle[data-schrift-toggle][data-an] { background: var(--deep); border-color: var(--gold-on-deep); color: var(--ink-on-deep); } .theme-toggle[aria-pressed="true"]:hover, .theme-toggle[data-schrift-toggle][data-an]:hover { color: var(--ink-on-deep); border-color: var(--gold); } /* Die Stufenanzeige der Lupe steht IM Kreis und muss die Umkehr mitmachen, sonst bliebe „125 %" dunkel auf dunkel. */ .theme-toggle[data-schrift-toggle][data-an] .schrift-toggle__stand { color: var(--ink-on-deep); } /* DIE GOLDENE LINIE UNTER DEN ZEICHEN — Iris, 14. August, zum Foto der Navigation: „schön die highlight linien, können wir das beim haus, globus, lautsprecher, lupe, wind, es, cafe, flugzeug, tasche, pflanze, Sonne/Mond und Map auch annimieren bitte." Es ist wörtlich dieselbe Geste wie unter den Navigationswörtern: eine 1-px-Goldlinie, die von links aufzieht. Unter einem runden Zeichen sitzt sie knapp unter dem Kreis und ist etwas kürzer als er breit — eine Linie über die volle Kreisbreite sähe aus wie ein Unterstrich unter einem O. Ein Selektor deckt alle: jedes runde Zeichen im Kopf ist ein .theme-toggle, auch Sonne/Mond und die Karte. Kein data-motion-Tor: dieselbe Mikro-Geste wie bei den Wörtern, und wie dort läuft sie über transition, die prefers-reduced-motion unten ohnehin stilllegt. */ .theme-toggle { position: relative; } .theme-toggle::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -0.32rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); } .theme-toggle:hover::after, .theme-toggle:focus-visible::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .theme-toggle::after { transition: none; } } /* DAS ZEICHEN FÜLLT DEN KREIS FAST GANZ — Iris, 15. August: „the signs can fill out the circle almost to the edge (otherwise hard to read)." Sie beschreibt eine Ursache, nicht einen Geschmack. Bis hierher sass ein **16-px-Zeichen in einem 36-px-Kreis** — 44 Prozent, und die gezeichnete Figur darin noch einmal kleiner, weil jedes dieser Zeichen in seinem 24er-Feld Luft am Rand hat. Auf einem Telefon blieben von einem Café, einem Flugzeug und einer Pfote drei ähnlich grosse Flecken übrig. Jetzt 78 Prozent, auf jeder Stufe dieselbe Quote. Die Obergrenze ist gerechnet und nicht gefühlt: ein Zeichen ist quadratisch, der Kreis rund, also zählt die **Diagonale**. Das breiteste Zeichen (der Stern, 16,2 × 19 im 24er-Feld) misst bei 28 px Kästchengrösse 18,9 × 22,2 px und damit 29,2 px über Eck — der Kreis hat innen 34. Es passt, mit Luft, und keine Figur berührt den Ring. Der Strich wächst mit: 1,6 im 24er-Feld werden aus 1,3 px echte 1,9 px. Genau das ist der Teil, der „hard to read" behebt. */ .theme-toggle svg { width: 1.75rem; height: 1.75rem; } /* Auf schmalen Schirmen schrumpfen die Kreise eine Stufe — Iris' "squeeze them": alle bleiben da, keiner klappt weg. Die Quote von 78 % bleibt, damit ein Zeichen auf dem Telefon nicht plötzlich verloren im Kreis steht; die Trefferflaeche bleibt ueber den Abstand der Reihe erhalten. */ @media (max-width: 40rem) { .theme-toggle { width: 2rem; height: 2rem; } .theme-toggle svg { width: 1.55rem; height: 1.55rem; } /* Die Spurbreite der Kette wird mitgeführt. Bliebe sie bei 2.25rem, rechnete `auto-fit` mit Gliedern, die es nicht mehr gibt, und jede Reihe trüge eine Spalte weniger als hineinpasst — sichtbar als Loch am rechten Ende genau dort, wo der Platz am knappsten ist. */ .header__einstellungen { --glied: 2rem; } } /* DER REGENBOGEN-HOVER — Iris, 15. August: "when you can put that hover rainbow effect over all of them". Der Rand des Kreises wird beim Zeigen zum Regenbogen — dieselben fuenf Farben wie der Wander-Verlauf der Wortmarke, als Ring statt als Flaeche: Zierde, kein Traeger, die Zeichenfarbe und damit der Kontrast bleiben unveraendert. Der Trick sind zwei Hintergruende: innen Papier (padding-box), aussen der Verlauf (border-box), der Rand selbst wird durchsichtig. Altgeraete, die die Doppelform nicht kennen, behalten die Fokusfarbe der Zeile darueber — ein Ring bleibt ein Ring. */ .theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--focus); } .theme-toggle:hover, .theme-toggle:focus-visible { border-color: transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(120deg, #f2c66d, #ed8eac, #ab8cff, #7bb8ff, #82d9b4) border-box; } :root[data-theme="dark"] .theme-toggle:hover, :root[data-theme="dark"] .theme-toggle:focus-visible { background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(120deg, #f2c66d, #ed8eac, #ab8cff, #7bb8ff, #82d9b4) border-box; } /* Mond am Tag, Sonne in der Nacht (Iris, 9. August). Der Knopf zeigt, wohin er führt, nicht wo man steht — deshalb wechselt das Zeichen mit. Drei Regeln statt einer, weil es drei Zustände gibt und nicht zwei: keine Wahl getroffen (dann gilt die Systemeinstellung), ausdrücklich hell, ausdrücklich dunkel. Das `:not([data-theme="light"])` in der Media-Regel ist der Grund, dass die ausdrückliche Wahl die Systemeinstellung schlägt — ohne es gewänne die später notierte Regel, und wer am dunklen Abend auf hell stellt, sähe weiter die Sonne. */ .theme-toggle__sonne { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__mond { display: none; } :root:not([data-theme="light"]) .theme-toggle__sonne { display: block; } } :root[data-theme="dark"] .theme-toggle__mond { display: none; } :root[data-theme="dark"] .theme-toggle__sonne { display: block; } :root[data-theme="light"] .theme-toggle__mond { display: block; } :root[data-theme="light"] .theme-toggle__sonne { display: none; } /* Der Eventkarten-Pin — die Nadel, die zur Karte führt (Iris, 7. August). Er teilt Form und Grösse seiner Nachbarn und unterscheidet sich in genau zwei Dingen: er leuchtet auf, wenn man ihn berührt, und er sendet unter Lebendig ein langsames Signal. Gold am Tag, Silber in der Nacht kostet keine Sonderregel: `--gold` ist seit dem 5. August ein Wechsel-Token (#c9a227 hell, #c8d2dd dunkel). Eine Farbe, zwei Bedeutungen — dieselbe Mechanik wie beim Signet. */ .karte-pin, .flug-knopf, .cafe-knopf { text-decoration: none; } .karte-pin:hover, .karte-pin:focus-visible, .flug-knopf:hover, .flug-knopf:focus-visible, .cafe-knopf:hover, .cafe-knopf:focus-visible { /* Der Ring trägt das helle Marken-Gold (eine Umrandung ist Nicht-Text, 3:1, und diese ist zusätzlich Zier). Die Nadel selbst nimmt `--gold-ink`: sie ist die *bedeutungstragende* Grafik dieses Knopfes und fällt damit unter 1.4.11 — helles Gold auf Creme wären 2,11:1. `--gold-ink` ist derselbe Wechsel: tiefes Gold am Tag, Silber in der Nacht. `web/tests/test_contrast.py` hat den ersten Wurf gefangen. */ color: var(--gold-ink); border-color: var(--gold); } /* Der Kern geht an wie ein Lämpchen. `fill` statt Farbwechsel, damit die Nadel auch bei erzwungenen Farben (Windows-Kontrastmodus) ihre Form behält — dort wird `currentColor` vom System gesetzt, und die Füllung folgt mit. */ .karte-pin__kern { fill: transparent; transition: fill 220ms var(--ease); } .karte-pin:hover .karte-pin__kern, .karte-pin:focus-visible .karte-pin__kern { fill: currentColor; } /* Über dem Kopfbild färben drei Regeln alle Schalter um (der Balken liegt dort auf dem Bild statt auf Papier). Sie sind spezifischer als die zwei Zeilen oben, und ohne diese Wiederholung bliebe der Ring beim Zeigen grau — genau dort, wo die Besucherin zuerst hinschaut. Dieselben Selektoren, nur mit `:hover`/`:focus-visible`. */ :root.hat-js body.mit-kopfbild .header:not(.is-stuck) .karte-pin:hover, :root.hat-js body.mit-kopfbild .header:not(.is-stuck) .karte-pin:focus-visible, :root.hat-js[data-theme="dark"] body.mit-kopfbild .header:not(.is-stuck) .karte-pin:hover, :root.hat-js[data-theme="dark"] body.mit-kopfbild .header:not(.is-stuck) .karte-pin:focus-visible, :root.hat-js[data-theme="light"] body.mit-kopfbild .header:not(.is-stuck) .karte-pin:hover, :root.hat-js[data-theme="light"] body.mit-kopfbild .header:not(.is-stuck) .karte-pin:focus-visible { color: var(--gold-ink); border-color: var(--gold); } /* Das Leuchtsignal: ein Ring, der alle paar Sekunden nach aussen läuft. Reine Zier — deshalb hinter `data-motion="full"` und ausserhalb jeder Bedienlogik. Ohne JavaScript, im Ruhemodus und bei reduzierter Bewegung existiert die Animation gar nicht; der Pin bleibt vollständig benutzbar, nur still. */ .karte-pin { position: relative; } .karte-pin::after { content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; inset: -1px; border: 1px solid var(--gold); border-radius: inherit; opacity: 0; pointer-events: none; } :root[data-motion="full"] .karte-pin::after { animation: kartenSignal 5.5s var(--ease) infinite; } @keyframes kartenSignal { 0% { transform: scale(1); opacity: 0.55; } 55% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } } @media (prefers-reduced-motion: reduce) { :root[data-motion="full"] .karte-pin::after { animation: none; } } .nav__link { white-space: nowrap; } /* KD-W-06b, found by Iris on her iPhone 2026-08-01. The single-line header had a minimum content width of ~549px, and mobile browsers resolve that the quiet way: they widen the layout viewport to 549px and zoom the WHOLE page out — tiny logo, tiny text, everything subtly wrong, on every page at once. No element ever overflowed, so no test saw it; only a phone did. Worse, the phone media queries then evaluated against 549px and never applied — the page could not reach the styles written to save it. The fix is to stop insisting on one line: below 46rem the header wraps into two rows — brand and actions above, navigation beneath. The minimum width drops to the widest single item (~210px), the layout viewport stays at the device width, and every phone rule finally fires. */ /* 2026-08-02: von 46rem auf 50rem angehoben. Das Signet wuchs an diesem Tag von 3rem auf 4.25rem, und damit passte der Kopfbereich beim iPad im Hochformat (768px) nicht mehr in eine Zeile — gemessen 26px Überlauf. Wer ein Element vergrössert, verschiebt eine Schwelle; hier ist sie. */ /* Am Telefon fällt die Navigation in eine zweite Zeile — und zwar **unter** die Marke, mittig, statt links neben ihr. Das war schon vor dem Umbau so; neu ist nur, dass sie im Raster liegt und nicht per `flex-basis: 100%` umbricht. `.wordmark__sub` („HNC CARE") bleibt jetzt stehen. Sie verschwand hier, weil sie waagrecht neben dem Signet Platz kostete; gestapelt kostet sie eine halbe Zeile Höhe und ist die einzige Stelle, an der die Muttermarke auf dem Telefon überhaupt vorkommt. */ /* DIE NAVIGATION BEKOMMT IHRE EIGENE ZEILE, UND ZWAR BIS 96 rem HINAUF — Iris, 15. August: „make sure logo is in the middle on every side". **Sie hat damit einen Fehler gefunden, der grösser ist als das Logo.** Gemessen an diesem Abend, Breite für Breite: zwischen 834 und 1440 px stand die Marke nicht nur schief (bis **164 px** neben der Mitte) — die ganze rechte Seite lief über den Bildschirmrand hinaus, bei 834 px um **191 px**. Der Knopf «1. Gespräch» und die Telefonnummer standen dort ausserhalb des Fensters, auf jedem kleinen Laptop und jedem Tablet quer. Die Seite liess sich waagrecht schieben, um sie zu finden. Warum, als Rechnung, damit die Schwelle nicht geraten ist: Kette (12 Kreise) ~530 px Marke ~99 px rechts (Navigation + Knopf + Nummer) bis 649 px Für eine mittige Marke muss **beiden** Aussenspalten dasselbe zustehen, also 2 × 649 + 99 + 32 = **1429 px** reine Inhaltsbreite. Die Schale gibt die erst ab 88 rem frei (dort öffnet sie von 74 auf 108 rem). Unterhalb davon ist eine mittige Marke mit Navigation in derselben Zeile arithmetisch unmöglich — nicht schwierig, unmöglich. Also fällt die Navigation dort in eine eigene Zeile, wie am Telefon längst. Dann trägt die rechte Zelle nur noch Knopf und Nummer (~330 px), die linke sechs Kreise (~260 px), und die Marke steht in der Mitte. Der Preis ist eine Zeile Höhe auf dem Laptop; der Gegenwert ist, dass der wichtigste Knopf der Seite wieder auf dem Bildschirm steht. 96 rem und nicht 88: bei 1408 px ist die Schale zwar offen, aber der Abstand zum Rand frisst den Rest. Gemessen wird unten, nicht geschätzt. */ /* ~~Der 105-rem-Block~~ — die Schwelle ist am 17. August GEGENSTANDSLOS geworden, nicht falsch: Iris hat die Navigation auf JEDER Breite unter den Balken gezogen («unterhalb des Balken, also im KOPFBILD»). Die eigene Zeile ist damit nicht mehr der Rückfall der schmalen Fenster, sondern die Form selbst — der `display: contents`- Kniff, die Rasterplatzierung der Navigation und die 105/96-rem-Rechnung dazu sind ersatzlos entfallen. Was von der Rechnung weiterlebt, ist die Mittelachsen-Korrektur (unten, jetzt ohne Media-Query). */ /* ÜBER UNS AUF DIE ACHSE DER MARKE — Iris, 16. August: „Über uns zentriert mit dem Logo, ist das möglich?" Ja, überall dort, wo die Navigation ihre eigene Zeile hat — und das ist genau dieser Block. Gemessen vorher, und die Zahl ist auf jeder Breite dieselbe: 390 px … 576 px ±0,0 (seit heute früh) 834 px … 1512 px +8,7 8,7 px, immer gleich, weil es kein Zufall ist: „ANGEHÖRIGE" misst 110,6 px und „MITWIRKEN" 93,2. Eine mittig gesetzte Dreiergruppe legt ihre Mitte zwischen die Aussenkanten, nicht in die Mitte des Mittelstücks — und schiebt es damit um die halbe Differenz nach rechts. Das ist der ganze Fehler, und er wandert mit jeder Übersetzung mit. Drei Rasterspalten `1fr auto 1fr` beheben ihn ohne Zahl: die beiden Aussenspalten sind per Definition gleich breit, also steht das Mittelstück in der Mitte — auf Türkisch, Portugiesisch und in jeder Länge, die noch kommt. Die Nachbarn rücken an ihr Mittelstück heran (`end` und `start`), damit das Bild dasselbe bleibt wie bisher. Der Abstand wird NICHT gesetzt: `gap` steht in der Grundform von `.nav` als `clamp(1rem, 2.4vw, 2rem)` und gilt im Raster unverändert weiter. Eine eigene Zahl hier hiesse, den mitwachsenden Abstand auf einer Breite einzufrieren. `:has()` ist die Bedingung und zugleich das Netz: die Regel greift nur, wo wirklich drei Ziele stehen. Auf den dreizehn Sprach-Kernseiten trägt die Navigation einen einzigen Zurück-Link; der gehört mittig und nicht in eine linke Spalte. Ein Browser ohne `:has()` — Safari vor 15.4, und dieses Publikum hat alte Geräte — überspringt die Regel und behält die heutige mittige Reihe. Verloren geht dann eine Feinheit von 8,7 px, nicht eine Funktion. WO ES NICHT GEHT, und das ehrlich: ab 96 rem steht die Navigation nicht mehr in einer eigenen Zeile, sondern rechts neben der Aktionsleiste — dort ist sie 279 px von der Marke entfernt, und keine Ausrichtung innerhalb der Navigation ändert daran etwas. Dort mittig hiesse, ihr wieder eine eigene Zeile zu geben, also die Kopfzeile eine Zeile höher zu machen. Das ist eine Entscheidung und keine Korrektur. */ .header__navzeile .nav:has(> .nav__link--mitwirken) { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .header__navzeile .nav:has(> .nav__link--mitwirken) > :first-child { justify-self: end; } .header__navzeile .nav:has(> .nav__link--mitwirken) > :last-child { justify-self: start; } /* DIE KETTE BEGINNT AM LINKEN RAND — Iris' Regel vom 16. August: „rechter Rand der selbe abstand wie linker Rand aka erster kreis." Der erste Kreis definiert den Rand; die Zelle bleibt gefüllt (sonst könnte `auto-fit` nicht messen, siehe `.header__einstellungen`), angelegt wird der Inhalt. Bis zum 17. August stand das im 105-rem-Block; seit die Navigation auf jeder Breite in ihrer eigenen Zeile wohnt, gibt es die Breite, auf der etwas anderes gälte, nicht mehr. */ .header__einstellungen { justify-content: start; } /* ALLE ZWÖLF IN EINER GERADEN LINIE, SOBALD SIE HINEINPASSEN — Iris, 17. August: «on big screen just one straight line in the menu bar.» `auto-fit` bricht nach verfuegbarer Breite, und bis heute teilte sich die Kette ihre Zeile noch mit der Navigation — auf 1200 px wurden daraus 6 und 6. Seit die Navigation ein Stockwerk tiefer wohnt, ist der Platz frei; er wurde nur nicht genommen, weil `auto-fit` die ZELLE misst und die Zelle eine von drei gleich breiten ist. Die Rechnung fuer die Schwelle, damit sie nicht geraten ist: zwoelf Kreise 12 x 2.25rem = 27rem = 432 px elf Abstaende 11 x 0.6rem = 6.6rem = 106 px Kette gesamt 538 px Marke (Zeichen 6rem + Name + Abstand) 216 px Fuer eine mittige Marke brauchen BEIDE Aussenspalten die 538 — 2 x 538 + 216 = 1292 px reine Inhaltsbreite. Die Schale gibt die ab 88 rem frei (dort oeffnet sie von 74 auf 108 rem). ~~88 rem~~ -> **105 rem**, und die Korrektur ist gemessen, nicht gerechnet. Bei 88 rem passt die Kette zwar in EINE Zeile, aber sie sprengt dabei ihre Rasterspalte und schiebt die Marke aus der Mitte — genau der Fehler, den Iris im selben Atemzug benannt hat («centered according to the logo»). Der Versatz des Signets, Breite fuer Breite: 1408 px 119,8 px daneben 1440 px 105,9 1512 px 74,7 1600 px 36,5 1680 px 0,0 <- ab hier traegt die Zeile beides 1920 px 0,0 105 rem = 1680 px. Erst dort reichen beide Aussenspalten fuer die 538 px der langen Kette, ohne dass die Mitte wandert. Eine Linie, die das Logo aus der Achse druckt, waere Iris' zweite Ansage gegen ihre erste eingetauscht — beide gelten, also gilt die groessere Zahl. Darunter bleibt `auto-fit` und damit ihre Regel vom 15. August — „if device screens get smaller … they should rearrange in order of space". Zwoelf teilt sich durch sechs, vier, drei und zwei. */ @media (min-width: 105rem) { .header__einstellungen { grid-template-columns: repeat(12, var(--glied)); justify-content: space-between; } } /* Die Aktionsleiste endet am rechten Rand — Iris, derselbe Satz. Die Positionierung trägt seit dem 17. August wieder die Hülle `.header__rechts` selbst (Spalte 3, `justify-self: end`, Grundregel oben); der `display: contents`-Kniff ist mit dem 105-rem-Block gegangen. */ /* Die Wortmarke darf nie auf null schrumpfen. `min-content` ist die Untergrenze, unter die kein Nachbar sie drücken kann — genau der Fehler vom Morgen des 15. August, als Regel gebannt. */ .header__inner > .wordmark { min-inline-size: min-content; } @media (max-width: 50rem) { .header__inner { grid-template-columns: 1fr auto 1fr; row-gap: 0.15rem; padding-block: 0.5rem; } /* ZWOELF, ALS SECHS UND SECHS — Iris, 15. August: „12er Kette nicht mehr und nicht weniger!" Ihre Begruendung war Mathematik, und sie stimmt: **elf ist eine Primzahl** und bricht auf einem Telefon immer schief. Zwoelf teilt sich durch zwei, drei, vier und sechs. ~~Die Regel stand hier~~ und gilt seit dem Abend des 15. August für **jede** Breite (oben bei `.header__einstellungen`) — sechs und sechs ist nicht die Notlösung des Telefons, sondern die Form, in der die Kette das Logo in der Mitte lässt. Hier steht nur noch, was wirklich eine Telefonregel ist. */ /* Vier statt sechs Spalten, sobald die Kette neben der Aktionsleiste nicht mehr in eine Zeile passt. Gemessen: sechs Kreise sind 197 px, die Aktionsleiste 153, mit zwei Rasterabstaenden macht das 382 — unterhalb von 24.5 rem (392 px) reicht das nicht, und die Kette schoebe die Aktionsleiste ueber den Rand. Vier Spalten sind 130 px und passen bis hinunter zu 320. Zwoelf teilt sich durch beide. */ /* DREI SPALTEN ALS LETZTE SPROSSE — Iris, 16. August: „3x4 und 4x3 geht auch jeh nach grösse?" Ja, und die vierte Sprosse war die eine, die noch fehlte. Gemessen unterhalb von 320 px, wo bisher vier Spalten standen: 320 px Kette 127 + Aktion 153 + Signet 42 = 322 passt knapp 300 px dieselben 322 **9 px zu breit** 280 px dieselben 322 **42 px zu breit** Die Folge war beides zugleich: die Kopfzeile lief über den rechten Rand, UND das Signet rutschte aus der Mitte — bei 240 px um 34,6 px. Mit drei Spalten misst die Kette 94 statt 127, und die Rechnung geht bis rund 290 px auf. **Warum nicht schon bei 320 px:** dort passen vier Spalten, und vier Spalten sind drei Zeilen statt vier. Eine Zeile weniger ist auf dem engsten Gerät mehr wert als etwas mehr Luft — 320 px ist die Breite, auf der die Kopfzeile ohnehin schon 242 px hoch ist. Deshalb 19.9 rem und nicht 20: die Sprosse greift erst, wenn sie gebraucht wird. Zwölf teilt sich durch drei, vier, sechs und zwölf — die ganze Leiter geht ohne Rest auf, und das ist der Grund, aus dem Iris am 15. August auf zwölf bestanden hat („elf ist eine Primzahl"). Unterhalb von rund 290 px hilft auch das nicht mehr: dort ist die Aktionsleiste allein schon 153 px breit, und neben Signet und Kette bleibt kein Platz. Dann müsste ein Element weichen, und welches, ist eine Entscheidung und keine Rechnung. */ /* ~~Vier Spalten ab 24 rem, drei ab 19.9~~ — beide gestrichen. Es waren die richtigen Zahlen, von Hand gerechnet, und `auto-fit` rechnet sie bei jeder Breite neu und auch für die dazwischen. Iris' „3x4 und 4x3 geht auch jeh nach grösse?" ist damit nicht mehr eine Leiter mit vier Sprossen, sondern die Antwort auf jede Breite, die es gibt. */ /* ~~ELF KREISE PASSEN AUF EIN TELEFON NUR IN ZWEI ZEILEN~~ — gemessen am 15. August, nachdem die Klappe fiel. Der Befund gilt weiter, die Loesung ist jetzt das Raster darueber statt blosser Umbruch. Iris' Regel lautet „all of them in circles not some subüberschrift drop down… when the screen is small we can squeeze them". Ich hatte das als `flex-wrap: nowrap` gebaut und damit die Regel gegen die Physik gestellt: elf Kreise zu 2 rem sind mit Null Abstand **352 px**, ein iPhone hat 390 und ein kleines Android 320. Die Folge im Bild gemessen, auf ALLEN Telefonbreiten: die Kopfzeile verlangte 520 px, die Seite scrollte quer — **und die Wortmarke wurde auf 0 px gequetscht.** Das Logo war weg. Auf dem Hauptgerät dieses Publikums. Umbrechen IST das Stauchen: alle elf bleiben sichtbar, keiner versteckt sich hinter einem Knopf, das Logo behält seine Mitte. Es kostet eine halbe Zeile Höhe, und die ist der richtige Preis. */ /* DIE MARKE BEKOMMT AM TELEFON IHRE EIGENE ZEILE — und das ist die Korrektur eines echten Fehlers, nicht eine Geschmacksfrage. Gemessen am 15. August bei 320 und 390 px: `.wordmark` war **null Pixel breit**, die mittlere Rasterspalte ebenfalls `0px`. Das Logo war auf jedem Telefon schlicht unsichtbar. Die Regel `min-inline-size: min-content` (unten, sie bleibt) konnte das nicht verhindern: `1fr auto 1fr` gibt den Aussenspalten ihre Mindestbreite zuerst, und die war schon zu gross — die Kreise brauchen 197 px, die Aktionsspalte 153, macht mit Abstaenden 382 von 390. Drei Wege wurden gemessen, keiner rettete die Mitte: vier Kreisspalten (Logo 42 px bei 390, immer noch **0** bei 320), drei Spalten (0→20 px bei 320, Kopf waechst auf 184 px), engere Abstaende (holt 20 px, braucht 51). Die Rechnung geht nicht auf: drei Bloecke passen bei 320 px nicht in eine Zeile. Also die einzige ehrliche Loesung — die Marke steht allein, ueber Kreisen und Aktionen, ueber die ganze Breite zentriert. Damit gilt Iris' Regel vom 15. August („with the logo always remaining in the middle") auf dem Telefon zum ersten Mal buchstaeblich: **exakt in der Mitte**, nicht ungefaehr. Der Preis ist eine Zeile Hoehe; ein unsichtbares Logo waere kein Preis, sondern ein Verlust. Und der Preis wird nur dort bezahlt, wo er faellig ist. Gemessen, Breite fuer Breite: die Marke schrumpft ab 460 px nicht mehr (390 → 0 px, 414 → 10, 440 → 33, **460 → 42**, darueber voll). Die eigene Zeile gilt deshalb nur bis 28.75 rem; von da an steht wieder alles nebeneinander, wie es auf einem breiteren Schirm gehoert. */ /* Die Navigation steht seit dem 15. August auf **jeder** Breite unter der Marke, an der sie nicht danebenpasst — die Regeln dazu stehen jetzt weiter oben, im 96-rem-Block. Hier bleibt nur der engere Abstand, den die Telefonzeile braucht. */ /* Umbrechen statt abschneiden. Bei 320 px lief „MITWIRKEN" über den rechten Rand hinaus und war dort nicht nur unlesbar, sondern unerreichbar — `overflow-x: hidden` am Körper schneidet leise ab, statt zu scrollen. Drei Ziele in zwei Zeilen sind kein Schaden; ein abgeschnittenes drittes Ziel schon. */ .header__navzeile .nav { /* Zeilenabstand und Wortabstand getrennt: bricht die Zeile doch einmal, sollen die zwei Zeilen nicht auseinanderfallen. Ein `gap: 1rem` gilt in beide Richtungen und machte den Kopf bei 320 px um 30 px höher, ohne dass ein Mensch davon etwas hat. */ gap: 0.15rem 1rem; flex-wrap: wrap; justify-content: center; } /* Auf dem schmalsten Gerät passen die drei Ziele in EINE Zeile, wenn man ihnen 12 px abnimmt. Gemessen bei 320 px: die drei Wörter messen 286 px, zwei Abstände zu 1 rem machen 318 — die Schale gibt 304 frei. Mit 0.6 rem Abstand und einer Spur weniger Sperrung sind es 293. Die Sperrung von 0.08em stammt von Iris' Versalien-Entscheid und ist dort richtig; 0.05em sind immer noch mehr Luft, als Gemischtschrift bekäme. Sie fällt nur auf dem Gerät, auf dem die Alternative ein Umbruch wäre — und der Umbruch bleibt als Netz stehen, falls eine Übersetzung länger ausfällt als die deutsche. */ @media (max-width: 24rem) { .header__navzeile .nav { gap: 0.15rem 0.6rem; } .nav__link { letter-spacing: 0.05em; } } /* ~~28.75 rem~~ → **36 rem**, gemessen am Abend des 15. August. Die alte Schwelle beantwortete die Frage „ab wann ist die Marke sichtbar?" — und die war richtig beantwortet. Iris' Frage heute ist eine andere: „make sure logo is in the middle on every side." Sichtbar und mittig sind nicht dasselbe, und dazwischen liegt ein ganzes Band: bei 460 px Kette 216 px, halbe Zeile 176 → 40 px daneben bei 500 px Kette 216 px, halbe Zeile 194 → 22 px daneben bei 560 px Kette 216 px, halbe Zeile 206 → 10 px daneben ab 580 px Kette 216 px, halbe Zeile 217 → mittig Sechs Kreise sind in diesem Band breiter als die halbe Zeile, und damit schiebt die Kette die Marke nach rechts — nicht viel, aber sichtbar, und jedes Mal gleich. In einer eigenen Zeile ist die Marke dagegen exakt mittig, weil sie dann über alle drei Spalten geht. */ @media (max-width: 37.5rem) { .header__inner > .wordmark { grid-column: 1 / -1; grid-row: 1; justify-self: center; } .header__inner > .header__einstellungen { grid-row: 2; } /* ~~.nav { grid-row: 3 }~~ — die Navigation steht seit dem 17. August gar nicht mehr im Raster der Kopfzeile, sondern in der Navzeile darunter; eine Zeilenzuweisung hätte hier nichts mehr zu greifen. */ /* HIER FÄLLT DER AUSGLEICH WEG, und zwar zwingend: unter 36 rem steht die Marke in einer EIGENEN Zeile über Kette und Aktionsleiste. Es gibt dann keine gemeinsame Mittellinie mehr, auf die etwas auszurichten wäre — die Marge schöbe die zwei Gruppen nur in ihrer eigenen Zeile nach oben und risse darunter ein Loch. */ .header__inner > .header__einstellungen, .header__rechts { margin-block-end: 0; } /* Am Telefon steht die Marke in ihrer eigenen Zeile, und darunter teilen sich Kette und Aktionsleiste die Breite. Das Anlegen an die Marke aus dem 96-rem-Block hat hier nichts, woran es sich anlegen könnte — es zöge die Aktionsleiste nur nach links vom rechten Rand weg und risse ein Loch an der Kante. Also zurück auf `end`. */ .header__inner > .header__rechts { grid-row: 2; justify-self: end; } /* EINE MITTELLINIE, NICHT DREI — Iris, 16. August: „let's have the logo, the moon and the align with the star, the über uns". Sie hat dieselbe Sache zum zweiten Mal gesehen; am 15. August hiess sie „make sure everything is centered according to the logo". Damals wurde das Logo auf die Mitte gebracht, die zwei Reihen darunter aber nicht. Gemessen bei 390 px, und die drei Zahlen sind der ganze Befund: Logo 195,0 px ← die Bildmitte, exakt Mond und Stern 186,4 px ← 8,6 daneben ÜBER UNS 203,7 px ← 8,7 daneben Beide Abweichungen sind **Nebenwirkungen, keine Einstellungen** — niemand hat 186,4 gewählt. Der Mond steht dort, wo sechs Kreise mit festem Abstand zufällig enden; ÜBER UNS steht dort, weil „ANGEHÖRIGE" 110,6 px misst und „MITWIRKEN" 93,2 — eine mittig gesetzte Dreiergruppe schiebt ihr Mittelstück um die halbe Differenz nach rechts, also um genau 8,7 px. Zwei verschiedene Ursachen, ein Bild: drei Achsen dort, wo eine sein sollte. DIE KETTE: die linke Rasterspalte bekommt eine gerechnete Breite statt einer aus dem Inhalt gewachsenen. `calc(50% + 1rem)` reicht von der linken Kante bis zur Mitte **plus einen halben Kreis** — das Ende der Spalte fällt damit auf die rechte Kante des sechsten Kreises, sein Mittelpunkt auf 50 %. `space-between` verteilt den Rest auf die fünf Lücken. Warum in Prozent und in rem und nicht in Pixeln: die Schriftgrösse dieser Website ist verstellbar (100/125/150 %) und die Kreise messen 2 rem. Wächst die Schrift, wächst der halbe Kreis — und `1rem` wächst mit ihm. Die Mitte bleibt die Mitte, auf jeder Stufe. Eine Pixelzahl hätte nur bei 100 % gestimmt. Bezahlt wird es aus dem Rasterabstand, nicht aus der Aktionsleiste: die zwei Spaltenabstände zu 1 rem (28,8 px) entfallen, die Kette nimmt sich davon 8,6, und zwischen Kette und «1. Gespräch» bleiben 19,4 px Luft statt 28. Die Aktionsleiste behält ihre Breite und ihr rechtsbündiges Ende auf den Pixel. Unter 24 rem stehen vier Spalten statt sechs; die Rechnung gilt unverändert, weil sie die Spaltenzahl gar nicht kennt — die letzte Spalte trifft immer die Mitte. Nur ist der Mond dort das zweite Zeichen der zweiten Zeile und nicht das letzte; unter die Mitte kommt dann der Kosmos-Stern allein. Das ist keine Schlamperei, sondern Arithmetik: zwölf durch vier lässt dem Mond keine Wahl. */ .header__inner { grid-template-columns: calc(50% + 1rem) 0 1fr; column-gap: 0; } .header__inner > .header__einstellungen { justify-self: stretch; justify-content: space-between; } /* Der Zuschlag ist der halbe Kreis, und der Kreis hat zwei Grössen: 2 rem bis 40 rem, 1.8 rem bis 30 rem („squeeze them", Iris am 15. August). Mit dem festen `1rem` oben stand der Mond bei 390 px um **1,6 px** neben der Linie — unsichtbar, aber falsch, und es ist genau der Rest, den eine Rechnung hinterlässt, die eine Zahl rät statt sie zu nehmen. 0,9 rem ist die halbe kleine Grösse. */ @media (max-width: 30rem) { .header__inner { grid-template-columns: calc(50% + 0.9rem) 0 1fr; } } } /* Unter 24 rem zurück in die umbrechende Reihe. Gemessen bei 320 px: die drei Wörter messen 286 px und die Schale gibt 304 frei — im Dreierraster stünden sie mit ihren zwei Abständen bei 304,5 und damit eine Haaresbreite über dem Rand. Eine Achse, die 8,7 px gewinnt und dafür ein Wort abschneidet, ist kein Gewinn. Der Umbruch bleibt. */ /* UNTER 24 REM GILT DIE MITTELLINIE NICHT, UND ZWAR GEMESSEN. Zwei Gründe, die beide dort und nur dort auftreten: 1 · DIE KETTE PASST NICHT MEHR NEBEN DIE AKTIONSLEISTE. Bei 320 px gibt die Schale 304 px frei. Eine linke Spalte von `50% + 1rem` misst 166; für «1. Gespräch» und die Nummer bleiben 138, gebraucht werden 153. Gemessen ragte die Aktionsleiste damit bis 342 px — **22 px über den Rand**, und der Rand schneidet still ab. Eine Achse, die den Anrufknopf kostet, ist kein Gewinn; auf dieser Website ist sie das Gegenteil. 2 · UNTER 24 REM STEHEN VIER SPALTEN. Zwölf durch vier macht drei Zeilen, und der Mond ist dann das zweite Zeichen der zweiten Zeile. Er kann dort gar nicht auf der Mittellinie stehen, ganz gleich, wie die Spalte gerechnet wird. Es gäbe also nichts auszurichten und trotzdem den Preis aus Grund 1. Also zurück auf die alte Aufteilung. Iris' Telefon misst 390 px und bleibt oberhalb; darunter gilt wieder, was seit dem 15. August galt, und das Logo steht dort weiterhin exakt mittig — nur seine zwei Reihen nicht. */ @media (max-width: 24rem) { .header__inner { grid-template-columns: 1fr auto 1fr; column-gap: 1rem; } /* ~~`justify-self: start`~~ — die Zelle bleibt gefüllt, nur der Inhalt legt sich links an. Gemessen am 16. August, und es war der teuerste Rest der alten Bauweise: mit `start` schrumpfte die Kette auf ihren Inhalt, `auto-fit` fand eine Spurbreite von 32 px in einem 32 px breiten Kasten und stellte **zwölf Reihen zu einem Kreis** untereinander. Die Kopfzeile war damit unter 375 px 545 statt 211 px hoch — auf dem kleinsten Gerät der grösste Schaden. */ .header__einstellungen { justify-content: start; } } /* DIE NAVIGATION FÄLLT SPÄTER ZURÜCK ALS DIE KETTE, UND DAS IST KEIN VERSEHEN. Grund 1 oben gilt nur für die Kreisreihe — die Navigation steht in einer eigenen Zeile und teilt sich die Breite mit niemandem. Gemessen: die drei Wörter messen 286 px, zwei Abstände zu 1 rem machen 318. Bei 360 px sind 344 frei, bei 375 px 359 — beides reicht, bei 320 px (304 frei) nicht. Deshalb 21 rem und nicht 24: sonst verlöre das iPhone SE mit seinen 375 px die Achse für ÜBER UNS ohne jeden Grund. Es ist nach wie vor ein verbreitetes Gerät, und älteres Gerät heisst in diesem Publikum nicht seltenes Gerät. */ @media (max-width: 21rem) { .header__navzeile .nav:has(> .nav__link--mitwirken) { display: flex; flex-wrap: wrap; justify-content: center; } } /* Kein Umbruch mehr in der Aktionsleiste: im Raster wäre ein Umbruch dort eine **dritte** Zeile, und die Kopfzeile wuchs damit auf 138 px. Ohne Umbruch stehen die zwei runden Zeichen und der Knopf nebeneinander und die Zeile bleibt bei einer Höhe. Gemessen bei 390 px: 180 px Bedarf, 280 px vorhanden. */ .header__actions { flex-wrap: nowrap; gap: 0.4rem; } /* „1. Gespräch" darf nicht in zwei Zeilen brechen — der Knopf wird dann doppelt so hoch und zieht die ganze Kopfzeile mit. Gemessen: mit Umbruch 123 px, ohne 96 px. */ .header__actions .btn { white-space: nowrap; } /* Der Token statt der Schriftgrösse allein — Fund vom 16. August: hier stand nur `font-size`, und damit rechnete `--marke-name` oben mit der grossen Schrift weiter. Gemessen zwischen 576 und 800 px lagen die Kreise dadurch 2,6 px ÜBER dem Signet statt auf ihm — die Korrektur schoss über ihr Ziel hinaus. Eine Zahl an zwei Orten ist eine Zahl zu viel. */ .header__inner { --marke-schrift: 0.62rem; } .wordmark { letter-spacing: 0.1em; } .wordmark__mark { width: 3.85rem; height: 3.85rem; } .nav__link--optional { display: none; } } /* AM TELEFON TRÄGT DAS SIGNET DIE MARKE ALLEIN. Gestapelt kostet der Schriftzug „CAREJOURNEY / HNC CARE" 34 px Höhe, und die stehen auf einem 390-px-Schirm gegen die Aktionsleiste: gemessen mit Schriftzug 138 px Kopfzeile, ohne 96 px. Vorher waren es 115. Der Verlust ist kleiner, als er klingt — der Seitentitel im Reiter, das `aria-label` des Links und der Fuss sagen den Namen weiterhin. Und `alt` am Signet nennt ihn auch: ein Screenreader liest hier nichts weniger als vorher, es steht nur nicht mehr gemalt daneben. */ /* ~~34 rem~~ → **36 rem**, gemessen am 16. August. Iris: „Have all the symbols adjust depending on screen size so it always looks beautiful." Die alte Schwelle war für sich richtig und im Zusammenspiel falsch. Sie beantwortete die Frage „ab wann ist der Schriftzug zu teuer?"; die ANDERE Schwelle, ab der die Marke ihre eigene Zeile verliert, liegt bei 36 rem. Zwischen 34 und 36 rem galten damit beide teuren Zustände gleichzeitig: Schriftzug sichtbar UND Marke in eigener Zeile. Gemessen, Kopfhöhe über die Breite: 480 px 171 500 px 185 560 px **202** ← der Schriftzug kommt dazu 580 px 138 ← die Marke rückt neben die Kette Ein Höhenmaximum mitten im Band, und ausgerechnet dort, wo der Schirm schon breiter ist. Der Kopf wuchs, während das Fenster wuchs. Mit derselben Schwelle für beides fällt der Ausschlag weg: der Schriftzug erscheint in dem Augenblick, in dem die Marke ohnehin Platz bekommt. */ /* DER NAME ERSCHEINT ERST, WO ER DIE ACHSE NICHT KOSTET — die zweite Haelfte von Iris' Satz vom 17. August («centered according to the logo»), und sie ist eine Rechnung, keine Vorliebe. Gemessen, Spaltenbreiten im Kopf (Kette | Marke | Aktionen): 834 px 152,6 | 358,0 | 208,0 Logo 27,7 px daneben 1024 px 194,2 | 358,0 | 337,4 Logo 71,6 px daneben 1200 px 345,0 | 358,0 | 345,0 Logo mittig Bei 834 px braeuchte eine mittige Marke 2 x 208 + 358 = 774 px reine Inhaltsbreite; vorhanden sind 718. Es ist also nicht knapp, sondern unmoeglich — und die 358 px sind der Name. Ab 75 rem geht die Rechnung auf, und genau dort steht er. Darunter traegt das Signet die Marke allein: der Seitentitel im Reiter, das `alt` am Zeichen und die Visitenkarte im Fuss nennen den Namen weiterhin. Ein Vorleseprogramm hoert also nichts weniger — es steht nur nicht gemalt daneben, damit das Logo auf seiner Achse bleibt. */ @media (max-width: 74.99rem) { .wordmark > span { display: none; } } /* DER KARTENZEIGER TRITT AUF DEM TELEFON ZURUECK — und das ist die Kehrseite davon, dass er ueberhaupt wieder erscheint (Iris, 17. August: «I want the map back to the right of the erstgespraech/ phone botton»). Er stand immer im Markup; sichtbar wurde er erst, als der leere Vorgabewert der Adresse fiel. Gemessen, sofort danach: 320 px Zeile laeuft ueber den rechten Rand, Kopf 358 px hoch 375 px Zeile laeuft ueber 390 px Zeile laeuft ueber, Logo 17,7 px aus der Achse 480 px Zeile laeuft ueber 600 px passt Dieselbe Abwaegung wie beim Modus-Schalter unter 24 rem: was weichen muss, ist nie der Anrufknopf und nie das Logo. **Verloren geht die Karte damit nicht** — sie steht seit heute als Wort in der Visitenkarte im Fuss, auf jeder Seite und in jeder Breite. Ein Zeichen, das auf dem Hauptgeraet verschwindet, braucht einen zweiten Weg; ein Zeichen, das die Zeile sprengt, darf ihn nicht behalten. */ @media (max-width: 40rem) { .karte-pin { display: none; } } @media (max-width: 37.5rem) { .wordmark > span { display: none; } .wordmark__mark { width: 3.7rem; height: 3.7rem; } .werkzeuge { inset-inline: 0.75rem; width: auto; } } /* Zwischen Telefon und Laptop: die drei Nebenlinks treten zurück. Gemessen am 7. August im Abnahme-Durchgang: bei 834 px brauchte die Kopfzeile 978 px und lief um 144 px über — auf jeder Seite, in jeder Farbfassung. Der Fehler ist älter als der Karten-Pin (ohne ihn waren es 98 px); der Pin hat ihn nur sichtbarer gemacht. Die Umbruchregel darunter greift erst bei 50 rem, und zwischen 800 und 1024 px stand die Zeile ungeschützt da. Nicht die Umbruchschwelle angehoben, sondern die Last verkleinert: „Angebot", „Ablauf" und „Mitwirken" führen zu Abschnitten, die auf der Startseite ohnehin durchlaufen werden; „Für Angehörige" und „Über uns" bleiben. Das ist dieselbe Abwägung, die unterhalb von 50 rem längst getroffen ist — nur beginnt sie jetzt dort, wo sie messbar nötig wird, statt 224 px später. */ /* ~~@media (max-width: 64rem) { … display: none }~~ und das 105-rem- Gegenstück darunter — beide am 17. August ersatzlos entfallen. Sie waren ein Paar aus Verstecken und Wieder-Zeigen für «Mitwirken», und die Grundregeln oben (Zeile «.nav__link--optional { display: none }» + Mitwirken-Ausnahme) sagen seither auf jeder Breite dasselbe: die zwei Abschnittslinks bleiben draussen, die drei Seitenziele stehen. In der eigenen Navzeile kostet das dritte Wort keine Breite mehr — die Rechnung, die das Paar begründete, hat ihre Voraussetzung verloren. */ /* MITWIRKEN KOMMT AM TELEFON ZURUECK — Iris, 15. August: „let's do ANGEHOERIGE, ÜBER UNS und MITWIRKEN (in caps)". Sie hat drei Ziele genannt; auf dem Telefon standen bis heute nur zwei. Das Verstecken oben war richtig, solange die Navigation sich die rechte Zelle mit der Aktionsleiste teilte — dort kostete jedes Wort den Umbruch der ganzen Zeile. Unterhalb von 50 rem ist das seit heute nicht mehr so: die Navigation hat eine **eigene Zeile ueber die volle Breite**, und „Angebot" und „Ablauf" bleiben weiterhin draussen, weil sie zu Abschnitten derselben Seite fuehren. Damit ist Platz fuer genau das dritte Ziel, das sie genannt hat. Gemessen bei 320 px unten. */ /* Und ab dem 15. August gilt das bis 96 rem hinauf: von dort abwaerts hat die Navigation ihre eigene Zeile ueber die volle Breite (die Rechnung steht dort), und in einer eigenen Zeile kostet ein drittes Wort nichts mehr. Zwischen 800 und 1024 px standen bis heute nur zwei der drei Ziele, die Iris genannt hat — ohne Grund, seit die Zeile eigen ist. */ /* Phone widths: the header has to hold a wordmark, one link and the call to action on a single line without any of them wrapping. KD-W-06b, found by Iris on her iPhone 2026-08-01: the previous values summed to ~440px of content on a 390px screen, so the Erstgespräch button slid off the right edge — on the primary device of the primary audience. The numbers below are measured, not felt: at 390px everything fits with room; below 24rem the manual theme toggle yields its seat first (the automatic prefers-color-scheme detection still works — only the manual override steps back), because the Ruhemodus toggle and the call to action must never be the ones to go. */ /* EINE ZEILE STATT ZWEI — Iris, 12. August: „Then they should all fit on one line, yes?" Ihre zwei Kürzungen allein reichten nicht. Gemessen bei 390 px nach «1. Gespräch» und «Angehörige»: Wortmarke 164 + Aktionen 196 + Lücke 16 = 376 gegen 350 verfügbare — **26 px zu viel**; bei 360 px fehlten 56. Erst ab 430 px passte es. Diese Werte holen die fehlenden Punkte, ohne dass etwas verschwindet: Wortmarke etwas kleiner gesetzt und enger gesperrt (−17), Zeichen von 2 auf 1,8 rem (−6), Knopfpolster und Lücken enger (−13). Zusammen 36 px. Die runden Zeichen bleiben bei 28,8 px und damit über den 24 px, die WCAG 2.2 SC 2.5.8 als Mindestgrösse verlangt. */ @media (max-width: 30rem) { /* DER KOPF DARF AM RAND WEITER GEHEN ALS DER TEXT — gemessen am 15. August bei 320 und 390 px. Die Zeile aus Kreisen und Aktionsknopf brauchte 363 px, die Schale gab 351 frei: **zwölf Pixel zu wenig**, und weil `overflow-x: hidden` am Körper klemmt, verschwanden sie lautlos nach rechts — samt der Verschiebung der Marke aus der Mitte, die Iris gesehen hat. Der Steg von 20 px je Seite ist für Fliesstext gemacht: ein Absatz, der die Bildschirmkante berührt, liest sich schlecht. Eine Zeile aus runden Zeichen hat dieses Problem nicht — sie hat ihren Abstand im Zeichen selbst. Also nur hier ein schmalerer Steg, und nur bis 30 rem. */ .header .shell { padding-left: 0.5rem; padding-right: 0.5rem; padding-inline: 0.5rem; } .header__inner { column-gap: 0.4rem; min-height: 3.5rem; } .wordmark { gap: 0.05rem; font-size: 0.6rem; letter-spacing: 0.1em; } .wordmark__mark { /* Mit der fünften Runde vom 16. August mitgezogen (2.6 → 3.1 rem): auf dem Navy-Balken verschmilzt die Scheibe mit dem Grund, und gerade auf dem kleinsten Schirm bleibt sonst nur ein Fleck. */ width: 3.1rem; height: 3.1rem; } .nav { gap: 0.5rem; } .header__actions { gap: 0.25rem; } .theme-toggle { width: 1.8rem; height: 1.8rem; } /* Dieselbe Quote wie ueberall: 78 % von 1.8rem. */ .theme-toggle svg { width: 1.4rem; height: 1.4rem; } .btn--sm { padding: 0.45rem 0.45rem; font-size: 0.73rem; } } /* --- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.4rem; border: 1px solid transparent; /* RUND WIE DER ERSTE — Iris, 16. August: „alle Tasten bitte schön abrunden an den Seiten so wie beim ersten Button (erstegspräch/Tel)." Der Doppelknopf im Kopf trägt seit dem 15. August `999px`, alle übrigen trugen 2 px. Zwei Rundungen für dieselbe Sache sind eine zu viel — und die Kapselform ist die, die sie gewählt hat, als sie ihn zum ersten Mal gesehen hat. `999px` und nicht ein fester Wert: bei einer Kapsel soll der Radius immer die halbe Höhe sein, und die Höhe hängt an der Schriftgrösse (100/125/150 %). Eine Zahl, die grösser ist als jede mögliche halbe Höhe, ergibt genau das, ohne sie zu kennen. */ border-radius: 999px; font-size: var(--t-small); font-weight: 600; font-variation-settings: "wdth" 100; letter-spacing: 0.03em; text-decoration: none; cursor: pointer; transition: transform 260ms var(--ease), background-color 260ms var(--ease), border-color 260ms var(--ease), color 260ms var(--ease); } /* --- DER DOPPELKNOPF: schreiben und wählen als ein Schmuckstück -------- Iris, 15. August: „I miss the colorful botton vs the navy one we have now.. can we make the bottom somehow special (golden in day / silver shimmer in night mode)?" Sie hat damit zweimal recht. Erstens war das Navy kalt: der Regenbogen des Erstgespräch-Knopfes fiel beim Design-Audit am 15. August früh weg (Stufe 1, „ein Regenbogen als Fläche schlägt jede Überschrift"), und was blieb, war der schwerste, kühlste Fleck der Kopfzeile. Zweitens ist ihr Vorschlag **exakt die Hausregel vom 13. August** — Gold/Chrom ist das Tagmetall, Silber das Nachtmetall. Das Metall erfindet also nichts, es setzt Gesetztes an die richtige Stelle. GERECHNET, NICHT GESCHÄTZT. Der Verlauf wandert über vier Stufen, und die Schrift bleibt über allen lesbar — Navy (`--deep-2`) misst gegen die DUNKELSTE Stufe: Tag #c9a227 6,91:1 Nacht #c8d2dd 10,92:1 hellste #f0dca8 12,34:1 #f4f8fb 15,66:1 Es gibt damit keinen Punkt der Wanderung, an dem der Knopf unter 4,5:1 fällt — anders als beim Regenbogen, dessen kühles Ende genau das tat. DIE FORM: zwei Elemente, EINE Pille. Links der gefüllte Knopf (schreiben), rechts die Nummer im Umriss (wählen); die Innenkanten sind eckig, die Aussenkanten rund, dazwischen eine geteilte Haarlinie. Zwei Handlungen bleiben zwei Ziele — für Maus, Tastatur und Vorleseprogramm —, sehen aber aus wie ein Stück. */ .ruf-paar { display: inline-flex; align-items: stretch; } .ruf-paar .btn--metall { border-start-end-radius: 0; border-end-end-radius: 0; } .ruf-paar .kopfruf { border-start-start-radius: 0; border-end-start-radius: 0; /* Die zwei Ränder werden zu einem: ohne das Zurückziehen stünde in der Mitte eine doppelt so dicke Linie wie aussen. */ margin-inline-start: -1px; } .btn--metall { border-radius: 999px; border-color: transparent; color: var(--deep-2); background: #d8b444; background-image: linear-gradient(105deg, #c9a227, #e8c979, #f0dca8, #e8c979, #c9a227); background-size: 300% 100%; background-position: 0% 50%; /* Ein Hauch Tiefe, damit das Metall Metall ist und nicht Farbe: innen ein heller Kamm oben, aussen ein weicher Schatten. */ box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 6px 18px -10px rgb(122 90 20 / 55%); } .btn--metall:hover, .btn--metall:focus-visible { color: var(--deep-2); background-image: linear-gradient(105deg, #c9a227, #e8c979, #f0dca8, #e8c979, #c9a227); background-position: 100% 50%; transform: translateY(-1px); } /* Die Nacht tauscht das Metall, nicht die Bauart — Silber statt Gold, dieselben vier Stufen, dieselbe Schrift. */ :root[data-theme="dark"] .btn--metall, :root[data-theme="dark"] .btn--metall:hover, :root[data-theme="dark"] .btn--metall:focus-visible { color: #0a1e38; background: #d4dde7; background-image: linear-gradient(105deg, #c8d2dd, #e6edf4, #f4f8fb, #e6edf4, #c8d2dd); box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 6px 18px -10px rgb(8 20 34 / 70%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--metall, :root:not([data-theme="light"]) .btn--metall:hover, :root:not([data-theme="light"]) .btn--metall:focus-visible { color: #0a1e38; background: #d4dde7; background-image: linear-gradient(105deg, #c8d2dd, #e6edf4, #f4f8fb, #e6edf4, #c8d2dd); box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 6px 18px -10px rgb(8 20 34 / 70%); } } /* DER SCHIMMER — das Licht wandert über das Metall, wie über eine geschliffene Fläche. 9 Sekunden, weich hin und zurück: langsam genug, dass es Ruhe bleibt und nicht blinkt. Nur im Lebendig-Modus; Ruhemodus und `prefers-reduced-motion` halten ihn an, und dann steht ein ruhiges, lesbares Metall da — die Farben ändern sich nicht. */ @media (prefers-reduced-motion: no-preference) { :root[data-motion="full"] .btn--metall { animation: metallSchimmer 9s ease-in-out infinite; } } @keyframes metallSchimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .btn__arrow { transition: transform 320ms var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } .btn--primary { background: var(--alpine); border-color: var(--alpine); color: #f6f9fc; } .btn--primary:hover { background: var(--deep); border-color: var(--deep); transform: translateY(-1px); } :root[data-theme="dark"] .btn--primary, :root[data-theme="dark"] .btn--gold { color: #08130f; } /* Dark themes keep dark button text, so hover must lighten, not deepen — the old hover (background: var(--deep)) left dark text on a dark ground. */ :root[data-theme="dark"] .btn--primary:hover { background: #a5c4e2; border-color: #a5c4e2; } @media (prefers-color-scheme: dark) { .btn--primary, .btn--gold { color: #08130f; } .btn--primary:hover { background: #a5c4e2; border-color: #a5c4e2; } } :root[data-theme="light"] .btn--primary { color: #f6f9fc; } :root[data-theme="light"] .btn--gold { color: #17130a; } :root[data-theme="light"] .btn--primary:hover { background: var(--deep); border-color: var(--deep); } .btn--gold { background: var(--gold); border-color: var(--gold); color: #17130a; } .btn--gold:hover { background: #d8b25c; border-color: #d8b25c; transform: translateY(-1px); } .btn--quiet { background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn--quiet:hover { border-color: var(--ink-2); transform: translateY(-1px); } .btn--on-deep { background: transparent; border-color: var(--line-on-deep); color: var(--ink-on-deep); } .btn--on-deep:hover { border-color: var(--gold-on-deep); } .btn--sm { padding: 0.6rem 1rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } /* --- Hero --------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(90vh, 46rem); padding-block: clamp(4rem, 12vw, 8rem) clamp(3rem, 7vw, 5.5rem); background: var(--deep-2); color: #eef3ee; overflow: hidden; } .hero__media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -2; } /* Der Ausklang des Kopfbilds — Iris, 9. August: „in night mode, I like that the transition from the [hero] into the first care section is almost seamless … add as much on the bottom of the picture and close the gap … with the same color continuum and then have it fade out." Gemessen war der Sprung an der Unterkante klein und trotzdem sichtbar: ΔE 6,3 in CIE Lab — für sich genommen wenig. Was auffällt, ist nicht der Farbabstand, sondern die Form: eine schnurgerade Linie über 1280 px. Das Auge findet eine perfekte Horizontale auch dort, wo es zwei Farben nicht unterscheiden könnte. Deshalb kein neuer Farbwert, sondern das Ende der Kante: Das Bild läuft über die letzten Zentimeter in genau den Grund aus, der darunter beginnt. `var(--paper)` ist derselbe Token, den der nächste Abschnitt trägt — die beiden können also nicht auseinanderlaufen, und in der Nacht kippt er von selbst mit. `transparent` als erster Halt ist absichtlich und nicht faul: Verläufe werden mit vormultipliziertem Alpha gerechnet, der Verlauf geht also NICHT über Schwarz, sondern direkt von „Bild" nach „Grund". Ein `color-mix()` wäre lesbarer und würde auf den KD-W-07-Browsern still ausfallen; hier fällt nichts aus. */ .hero::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: clamp(6rem, 20vh, 13rem); z-index: -1; pointer-events: none; background: linear-gradient(to bottom, transparent 0%, var(--paper) 94%); } /* Der Nebelverlauf am Kopf-Fuss (6.–7. August) ist wieder ausgebaut — Iris, 7. August: „Since we have an Übergang in color now on the day and night versions, we no longer need the blur below the Kopfpicture, the others are ok to keep." Der Farbübergang leistet jetzt, was der Verlauf leisten sollte: der CARE-Abschnitt trägt den Ausklang als Boden, das Bild endet an einer ruhigen Kante darauf. Die übrigen Verläufe (Schleier, Telefon-Maske, Kopfzeilen-Blur) bleiben ausdrücklich. */ .band--ausklang { background: var(--ausklang); } /* Heller Text auf dem Felsgrund. Der Ausklang ist seit dem 9. August nicht mehr auf dem CARE-Abschnitt (Tagmodus beginnt hell); die Regeln bleiben stehen, damit ein späterer Abschnitt den Felsgrund ohne Nacharbeit tragen kann. Alle vier Paare sind auf var(--deep) validiert, und der Felsgrund ist dunkler als --deep — der Kontrast steigt also nur. */ .band--ausklang .eyebrow { color: var(--gold-on-deep); } .band--ausklang .framework__letter { color: var(--gold-on-deep); } .band--ausklang .framework__item { border-top-color: var(--line-on-deep); } .band--ausklang .framework__item p:last-child { color: var(--ink-2-on-deep); } .hero__media img { width: 100%; height: 100%; object-fit: cover; /* Anchored low: the Kopf artwork carries a band of near-black sky along its top edge, and a centred crop fills the header with exactly that band — the daylight version came out looking like the night one. Sitting the crop near the bottom keeps the mountains and the lit sky in frame. */ object-position: 55% 88%; transform: scale(1.06); animation: hero-settle 2400ms var(--ease) 120ms both; } @keyframes hero-settle { from { transform: scale(1.12); } to { transform: scale(1.02); } } .hero__scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; /* The falloff sits where the text column ends, not before it. Measured 2026-08-04 against the day/night Kopf: the earlier stops reached 18% opacity by 68% of the width, while the lead paragraph still runs to roughly 62% — over the artwork's pale ice-blue that measured 2.25:1, well under AA. The stops below hold ~62% opacity across the whole text column and only then open onto the mountains. */ background: linear-gradient(100deg, rgb(7 19 16 / 88%) 0%, rgb(7 19 16 / 78%) 40%, rgb(7 19 16 / 58%) 64%, rgb(7 19 16 / 16%) 84%, rgb(7 19 16 / 6%) 100%), linear-gradient(to top, rgb(7 19 16 / 78%) 0%, rgb(7 19 16 / 0%) 45%); } /* On a narrow screen the text column is the whole width, so a left-weighted gradient leaves the last two thirds of every line lying on bare artwork. Measured 2026-08-04 at 390 px: the lead paragraph came out at 1.55:1. A near-even veil is the only honest fix — at this width there is no "away from the text" for the picture to breathe into anyway. 78% is the figure the measurement asks for over the Kopf's palest snow (a ≥ 0.67), rounded up rather than down. */ @media (max-width: 60rem) { .hero__scrim { background: linear-gradient(100deg, rgb(7 19 16 / 88%) 0%, rgb(7 19 16 / 80%) 60%, rgb(7 19 16 / 78%) 100%), linear-gradient(to top, rgb(7 19 16 / 70%) 0%, rgb(7 19 16 / 0%) 60%); } } /* Der Sonnenaufgang wohnt seit dem 6. August abends IM Bild, nicht mehr hier. Iris: „the sun is not behind the mountain" — ein CSS-Lichtfleck über dem fertigen Bild beleuchtet den Fels, statt hinter ihm hervorzukommen; Verdeckung kann nur die Zeichnung selbst leisten. `scripts/make_kopf_sonne.py` setzt die Sonne in beide SVGs, zwischen Himmel und Berge — am Tag Gold, in der Nacht Rosé/Violett nach der Infomaniak-Referenz. Damit gilt sie auch auf dem Telefon, wo der frühere Fleck aus Kontrastgründen abgeschaltet war. */ /* ZWEITE RUNDE, 18. AUGUST — Iris: „Nicht hell genug." Runde eins hatte den Textschleier hinter der Überschrift (`.hero__inner::before`) von 56 auf 39 Prozent gebracht: Kopffläche 37,3 → 41,1 von 255. Ihr Urteil danach in drei Worten. Also an den zweiten Schleier, den Flächenschleier, und zwar NUR an seine zwei Nachtsätze — 78/68/50 auf **39/34/25**, der Fuss von 62 auf 31. **Gemessen wie am 7. August, mit einer Korrektur an der Methode.** Der Grund hinter der Schrift wird in einem 80-Pixel-Saum links und rechts des Textkastens auf gleicher Höhe genommen, hellster Punkt. Der erste Wurf nahm den Streifen bis zum Bildrand — dort ist der Schleier absichtlich fast offen (5–14 %), und die Zahl beschrieb den Bildrand statt den Grund hinter der Schrift. | Stärke | Kopffläche | Fliesstext | |---|---|---| | 1,00× (bisher) | 40,2/255 | 7,90:1 | | 0,65× | 48,1/255 | 7,24:1 | | **0,50× (jetzt)** | **51,5/255** | **6,33:1** | | 0,35× | 55,0/255 | 5,18:1 | **Warum 0,5× und nicht 0,35×.** Die Runde vom 7. August hielt den Nacht-Lead bei 4,88–7,45:1; 6,33 liegt mitten in diesem Band, 5,18 darunter. Über 4,5 wären beide — aber ein Band, das einmal gemessen wurde, verlässt man mit Grund und nicht aus Bequemlichkeit. **Die Überschrift ist NICHT mitgemessen, und das gehört gesagt.** Sie trägt Regenbogenschrift; Glyphen und Grund sind beide hell, und ihr Kasten ist so breit, dass der Saum daneben schon im offenen Teil des Verlaufs liegt. Zwei Messversuche lieferten Unsinn (1,3–2,2:1, während die Seite so seit Tagen ausgeliefert wird). Der Lead ist der Massstab, den dieses Haus seit dem 4. August benutzt, und er bleibt es hier. */ /* Aufgehellt, wo die Messung es erlaubt — Iris, 7. August: „Der Schleier ist mir etwas zu dunkel." Der Schleier ist eine gemessene Garantie, also wurde neu gemessen statt gedreht (2026-08-07, Pixelmessung hinter jeder Textfläche, schlechtester Punkt je Block, Chromium): am Tag bei 1100 px liegt der Lead auf fast weissem Schnee bei 4,82:1 — dort gibt es KEINEN Spielraum, die Grundwerte oben bleiben. Aber auf breiten Fenstern (Lead 5,27:1) und in der Nacht (Lead 5,26–7,45:1, das Bild ist selbst dunkel) gibt es welchen, und er wird hier ausgegeben. Jeder Satz ist nach der Änderung nachgemessen; die Ergebnisse stehen am Block. */ @media (min-width: 85rem) { .hero__scrim { background: linear-gradient(100deg, rgb(7 19 16 / 80%) 0%, rgb(7 19 16 / 73%) 40%, rgb(7 19 16 / 59%) 64%, rgb(7 19 16 / 15%) 84%, rgb(7 19 16 / 5%) 100%), linear-gradient(to top, rgb(7 19 16 / 66%) 0%, rgb(7 19 16 / 0%) 45%); } } @media (prefers-color-scheme: dark) and (min-width: 60.01rem) { .hero__scrim { background: linear-gradient(100deg, rgb(7 19 16 / 39%) 0%, rgb(7 19 16 / 34%) 40%, rgb(7 19 16 / 25%) 64%, rgb(7 19 16 / 7%) 84%, rgb(7 19 16 / 3%) 100%), linear-gradient(to top, rgb(7 19 16 / 31%) 0%, rgb(7 19 16 / 0%) 45%); } } @media (min-width: 60.01rem) { :root[data-theme="dark"] .hero__scrim { background: linear-gradient(100deg, rgb(7 19 16 / 39%) 0%, rgb(7 19 16 / 34%) 40%, rgb(7 19 16 / 25%) 64%, rgb(7 19 16 / 7%) 84%, rgb(7 19 16 / 3%) 100%), linear-gradient(to top, rgb(7 19 16 / 31%) 0%, rgb(7 19 16 / 0%) 45%); } :root[data-theme="light"] .hero__scrim { background: linear-gradient(100deg, rgb(7 19 16 / 88%) 0%, rgb(7 19 16 / 78%) 40%, rgb(7 19 16 / 58%) 64%, rgb(7 19 16 / 16%) 84%, rgb(7 19 16 / 6%) 100%), linear-gradient(to top, rgb(7 19 16 / 78%) 0%, rgb(7 19 16 / 0%) 45%); } } @media (min-width: 85rem) { :root[data-theme="light"] .hero__scrim { background: linear-gradient(100deg, rgb(7 19 16 / 80%) 0%, rgb(7 19 16 / 73%) 40%, rgb(7 19 16 / 59%) 64%, rgb(7 19 16 / 15%) 84%, rgb(7 19 16 / 5%) 100%), linear-gradient(to top, rgb(7 19 16 / 66%) 0%, rgb(7 19 16 / 0%) 45%); } } /* --- DER TAGESKOPF WIRD HELL --------------------------------------------- Iris, 12. August, zu beiden Fassungen — der gezeichneten und der fotografierten: „Beide immer noch zu dunkel für mich." Sie hat recht, und der Grund ist die Bauart, nicht der Wert. Der Schleier liegt über der **ganzen Fläche**, weil weisse Schrift irgendwo auf dem Bild lesbar sein muss. Am 7. August wurde er einmal aufgehellt, so weit die Messung es zuliess; am Tag bei 1100 px stand der Vorspann danach bei 4,82:1 — kein Spielraum mehr. Weiter aufhellen und weisse Schrift behalten sind an dieser Stelle dasselbe Wort für „unlesbar". Also die Bauart wechseln, nicht den Wert: **der Schleier liegt nur noch hinter dem Text.** Das ist kein neues Muster, sondern das dieser Website — `.kopfband--bild .section-head` trägt seit dem 5. August genau so eine deckende Fläche unter „Sechs Dinge, die wir Ihnen abnehmen", und Iris hat es dort gesehen und behalten. Hier liegt es waagrecht statt senkrecht: die Fläche reicht über die linke Fensterkante hinaus, hält 88 % über der ganzen Textspalte und läuft danach über 3 rem ins Bild aus. Der Rest des Bildes bleibt frei. Was übrig bleibt, ist ein leichter Fuss nach unten, damit die Kante in den nächsten Abschnitt übergeht — der Übergang, den Iris am 9. August ausdrücklich wollte. **Nur am Tag.** Nachts bleibt alles, wie es ist: dort ist das Bild selbst dunkel, die Messung hatte Reserve, und Iris hat die Nacht nie beanstandet. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero__scrim { background: none; } /* Tinte DIREKT AUF DEM KUNSTWERK — kein Band mehr dazwischen. Die Schlagzeile bekommt keine Farbe: das Metallsystem besitzt sie wieder (Chrom am Tag). Eine Volltonfarbe hier hat die Metallregel überstimmt und den Verlauf übermalt — genau das, was Iris am 13. August als „wo sind die chrome accente geblieben?" gesehen hat. */ :root:not([data-theme="dark"]) .hero { color: var(--tinte-auf-bild); } :root:not([data-theme="dark"]) .hero .lead { color: var(--tinte-auf-bild); } :root:not([data-theme="dark"]) .hero__eyebrow { color: var(--tinte-auf-bild); } :root:not([data-theme="dark"]) .hero__boundary { color: var(--tinte-auf-bild); } :root:not([data-theme="dark"]) .hero__pilot { color: var(--tinte-auf-bild); } /* Der Geisterknopf war für den tiefen Grund gebaut — auf Papier braucht er Tinte, sonst ist er ein weisser Fleck auf Weiss. */ :root:not([data-theme="dark"]) .hero .btn--on-deep { color: var(--ink); border-color: currentColor; } /* `z-index: 1` ist hier der ganze Trick, und er behebt einen Fehler, der ÄLTER ist als diese Änderung. `.hero::after` legt die unteren 20 vh des Kopfes ins Cremeweiss, damit der Übergang zum nächsten Abschnitt stimmt — und mitten in dieser Aufhellung steht der Grenzsatz „Wir sind kein medizinischer Dienst". Gemessen am Stand e51a1a0, also VOR dieser Änderung: 1,51:1 bei 768 px, 2,50:1 bei 1280, 1,80:1 bei 1920. Das ist der wichtigste Satz des Kopfes und er war unlesbar. Ohne eigenen Stapelkontext liegt die Fläche bei z-index -1 im Kontext des Kopfes und damit UNTER `.hero::after`. Mit `z-index: 1` auf dem Textblock entsteht ein eigener Kontext: die Fläche bleibt hinter dem Text und liegt trotzdem über der Aufhellung. */ :root:not([data-theme="dark"]) .hero__inner { position: relative; z-index: 1; } } :root[data-theme="light"] .hero__scrim { background: none; } :root[data-theme="light"] .hero { color: var(--tinte-auf-bild); } :root[data-theme="light"] .hero .lead { color: var(--tinte-auf-bild); } :root[data-theme="light"] .hero__eyebrow { color: var(--tinte-auf-bild); } :root[data-theme="light"] .hero__pilot { color: var(--tinte-auf-bild); } :root[data-theme="light"] .hero__boundary { color: var(--tinte-auf-bild); } :root[data-theme="light"] .hero .btn--on-deep { color: var(--ink); border-color: currentColor; } :root[data-theme="light"] .hero__inner { position: relative; z-index: 1; } /* --- DAS BAND IST AM TAG WEG — DAS KUNSTWERK STEHT NACKT ---------------- Iris, 13. August, nach dem dritten Anlauf: „ich moechte die Kopfbilder wieder klar sehen.. wo sind die original farben, jezt ist ein weisser schleier drueber?!" Drei Verschleierungen sind daran gescheitert, und alle drei aus demselben Grund: sie waren noetig, WEIL heller Text auf dem Bild stand. Erst der dunkle Vollschleier („zu dunkel"), dann der dunkle Kasten mit senkrechten Kanten („dieses schwarze Hintergrundfenster ueberall entfernen"), dann das Papierband mit 76–80 % — der „weisse Schleier", den sie jetzt benennt. DIE UMKEHRUNG LOEST ES OHNE JEDE FLAECHE. Das Tagbild ist hell (Schnee L 0,99, Berge L 0,67); dunkle Tinte darauf misst zweistellig, wo heller Text 1,06:1 mass. Gemessen am gerenderten Bild, Text unsichtbar geschaltet, schlechtester Bildpunkt je Zeile, ueber fuenf Breiten — gemessen am 13. August, abends: Zeile Schwelle Tag (390…1920) Nacht (390…1920) Eyebrow 3,0 gross 14,51 5,41 5,56 5,85 4,24 3,30 12,10 9,34 9,39 5,46 H1 3,0 gross 12,42 3,88 3,66 3,65 3,57 3,96 11,53 3,94 4,27 5,63 Akzent 3,0 gross 13,41 6,15 6,15 4,26 6,14 8,93 7,79 4,60 5,74 5,51 Lead 4,5 klein 14,65 6,26 6,26 6,25 6,25 10,89 13,56 4,94 7,41 9,24 Grenzsatz 4,5 klein 14,79 7,43 6,85 6,41 6,48 7,87 8,44 6,61 6,92 7,79 Alles ueber der Schwelle, an der jeweils schlechtesten Stelle jeder Zeile. Die 390er-Spalte ist am Tag so hoch, weil dort Papier hinter dem Text steht und die Zeichnung als Band darunter — unverschleiert. Was bleibt: die Nacht. Dort ist das Bild dunkel, heller Text ist richtig, und Iris hat die Nacht nie beanstandet — das leise Band unten bleibt unveraendert stehen. Dieser Rumpf traegt deshalb nur noch die Geometrie; die Farbe setzt allein die Nacht. */ .hero__inner::before { content: ""; position: absolute; display: none; /* Über den Text hinaus nach oben und unten, damit die weichen Enden des Verlaufs ausserhalb jeder Zeile liegen. */ top: -7rem; bottom: -4rem; inset-block: -7rem -4rem; /* VOLLE FENSTERBREITE — keine senkrechten Kanten, das war Iris' Befund vom Vormittag des 13. August und gilt fuer die Nacht weiter. */ left: auto; right: auto; inset-inline: auto; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none; } /* WAS AM TAG UEBRIG BLEIBT: EIN HAUCH, KEIN SCHLEIER. Von 80 % auf 20 % — und der Unterschied ist der ganze Punkt. Ohne jede Flaeche misst die Zeichnung unter dem Text 0,25 bis 0,99: der Himmel traegt dunkle Tinte muehelos. Was NICHT muehelos ist, sind die gezeichneten Kugeln und Punkte im Bild — kleine dunkle Flecken mit L 0,131 bis 0,17, die zufaellig unter der Schlagzeile liegen. Gegen L 0,131 sind rechnerisch hoechstens 3,62:1 moeglich (reines Schwarz); die Schlagzeile braucht 3,0. Das ist zu knapp, um es dem Zufall des Bildausschnitts zu ueberlassen. Ein Hauch von 20 % hebt genau diese Flecken ueber die Schwelle und laesst alles andere in seiner Farbe: aus L 0,131 wird L 0,20, aus dem Himmel L 0,27 wird L 0,32. Sichtbar ist das an den dunklen Punkten, nicht am Bild — die Berge, der Sonnenaufgang und das Blau bleiben, was sie sind. Volle Fensterbreite und beide Enden bei null: keine senkrechten Kanten (Iris' Befund vom Vormittag) und keine waagrechte Kante. */ :root[data-theme="light"] .hero__inner::before { display: block; background: linear-gradient(to bottom, rgb(247 243 235 / 0%) 0%, rgb(247 243 235 / 16%) 12%, rgb(247 243 235 / 20%) 34%, rgb(247 243 235 / 18%) 62%, rgb(247 243 235 / 14%) 88%, rgb(247 243 235 / 0%) 100%); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero__inner::before { display: block; background: linear-gradient(to bottom, rgb(247 243 235 / 0%) 0%, rgb(247 243 235 / 16%) 12%, rgb(247 243 235 / 20%) 34%, rgb(247 243 235 / 18%) 62%, rgb(247 243 235 / 14%) 88%, rgb(247 243 235 / 0%) 100%); } } /* AUCH IN DER NACHT — und dort war es nie aufgefallen, weil nie jemand nachgemessen hat. Dieselbe Messung im Nachtmodus, ohne jede Fläche: Eyebrow 8,79:1 OK H1 6,29:1 OK Lead 3,58:1 DURCHGEFALLEN Grenzsatz 5,71:1 OK Der Lead lief seit jeher unter der Schwelle, weil im Nachtbild an genau seiner Höhe ein heller Grünkeil liegt (L 0,157). Die Nacht braucht also auch ein Band — nur ein viel leiseres, weil das Bild ohnehin dunkel ist. Rechnerisch nötig: 0,15. Gesetzt: 0,30 im Leadbereich, weich nach beiden Seiten. Das Bild bleibt sichtbar. */ :root[data-theme="dark"] .hero__inner { position: relative; z-index: 1; } /* DER NACHTSCHLEIER, 18. AUGUST AUF 0,7× VERDÜNNT. Iris: „und bild ist ziemlich dunkel" — zum dritten Mal in elf Tagen, nach dem 7. („Der Schleier ist mir etwas zu dunkel") und dem 12. August („Beide immer noch zu dunkel für mich"). Beim ersten Mal wurden die Zusatzsätze aufgehellt, beim zweiten der Flächenschleier am TAG ganz entfernt; die Nacht blieb beide Male stehen. **Gemessen, bevor gedreht wurde.** Die Zeichnung ist nicht die Ursache: ihre Palette mit einer Gamma-Kurve anzuheben brachte 1,5 Punkte von 255 (`scripts/kopf_nacht_aufhellen.py`, verworfen). Der Schleier ist es. Von 56 auf 39 Prozent an der tiefsten Stelle hebt das Mittel der Kopffläche von 37,3 auf 41,1 von 255 und senkt den Anteil unter 20 Prozent Helligkeit von 92,5 auf 83,1 Prozent. **Warum nicht weiter.** Der Fliesstext hält dabei 10,0:1 und hätte Luft bis 4,5 — aber der zweite Schleier, der Flächenschleier über der Textspalte, trägt eigene Böden aus einer Pixelmessung vom 7. August (`test_kopf.py`, WIDE_MINIMUM). Der ist hier NICHT angefasst: ihn zu senken heisst neu messen, und das ist eine eigene Runde, keine Nebenwirkung dieser. Ein erster grober Versuch, der beide zugleich verdünnte, liess acht Tests fallen — genau dafür stehen sie da. */ :root[data-theme="dark"] .hero__inner::before { display: block; background: linear-gradient(to bottom, rgb(7 19 16 / 0%) 0%, rgb(7 19 16 / 17%) 8%, rgb(7 19 16 / 31%) 20%, rgb(7 19 16 / 38%) 38%, rgb(7 19 16 / 39%) 56%, rgb(7 19 16 / 35%) 88%, rgb(7 19 16 / 17%) 97%, rgb(7 19 16 / 0%) 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero__inner { position: relative; z-index: 1; } :root:not([data-theme="light"]) .hero__inner::before { display: block; background: linear-gradient(to bottom, rgb(7 19 16 / 0%) 0%, rgb(7 19 16 / 17%) 8%, rgb(7 19 16 / 31%) 20%, rgb(7 19 16 / 38%) 38%, rgb(7 19 16 / 39%) 56%, rgb(7 19 16 / 35%) 88%, rgb(7 19 16 / 17%) 97%, rgb(7 19 16 / 0%) 100%); } } /* DER SCHATTEN, DEN IRIS VORGESCHLAGEN HAT — als Zweites, nicht als Einziges. Er trägt die Messung nicht (siehe oben), aber er tut das, was ein Verlauf nicht kann: er sitzt genau am Buchstaben und wandert mit ihm, auch dort, wo unter einer Zeile zufällig ein heller Bildpunkt liegt, den kein waagrechtes Band je genau treffen wird. Deshalb darf das Band leiser sein, als es ohne ihn sein müsste. */ .hero__inner .h1, .hero__inner .lead, .hero__inner .hero__eyebrow, .hero__inner .hero__boundary { /* 1 px statt 3 px Weichzeichnung — Iris, 14. August: „Sie müssen den weg finden ist blurry." Sie hatte recht, und die Ursache ist Grösse. Ein 3-px-Schatten unter einer 14-px-Zeile trennt; unter einer Überschrift von über 60 px wird dieselbe Weichzeichnung zum Halo, und das Auge liest Halo als Unschärfe. Der Schatten bleibt -- er trennt die Schrift vom Himmel dahinter --, aber er wird hart: gleiche Deckkraft, ein Drittel der Streuung. */ text-shadow: 0 1px 1px rgb(7 19 16 / 62%); } /* Der Kopf auf dem Telefon — Iris, 5. August: „this does not look good on the phone … can we adjust the background for it (shrink, depending on size)?" Die Zeichnung ist 1334 × 790, also fast 1,7 : 1. Ein Telefonkopf ist ungefähr 0,6 : 1. `object-fit: cover` schneidet daraus einen senkrechten Streifen von rund einem Viertel der Breite — und in diesem Streifen liegt kein Berg, sondern Himmel. Dazu kam der Schleier mit 78 %, der nötig war, weil der Text sonst auf hellem Schnee lag. Zusammen ergab das eine fast leere dunkle Fläche mit ein paar Diagonalen: die Zeichnung war da und nicht zu sehen. Statt zu beschneiden wird sie jetzt **verkleinert**: `contain`, unten angesetzt. Das ganze Bild steht in voller Breite als Band am Fuss des Kopfes, der Text darüber auf ruhiger Fläche. Das verbessert den Kontrast, statt ihn zu kosten — der Text liegt nicht mehr auf Schnee, sondern auf --deep-2. Deshalb darf der Schleier hier von 78 % auf ein Verlaufsband über dem Bild zurückgehen. Ein zweiter Verlauf von oben deckt die Naht ab, an der die Zeichnung anfängt; ihre oberste Zeile ist rgb(54,81,106) und träfe sonst sichtbar auf #0a1f33. Kein `scale` mehr: eine vergrösserte Zeichnung in einem `contain`-Rahmen wird an den Rändern abgeschnitten, und genau das soll hier aufhören. */ /* Altgeräte ohne Bereichssyntax: dieselben Regeln klassisch. Pflegefassung ist der moderne Block darunter — wer dort ändert, ändert hier mit. */ @media (max-width: 46rem) { .hero { align-items: flex-start; min-height: auto; padding-block: clamp(2rem, 8vw, 3rem) 49vw; } .hero__media { top: auto; height: 51.72vw; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%); mask-image: linear-gradient(to bottom, transparent 0%, #000 26%); } .hero__media img { object-fit: cover; object-position: 50% 100%; transform: none; animation: none; } .hero__scrim { background: linear-gradient(to top, rgb(7 19 16 / 58%) 0%, rgb(7 19 16 / 8%) 30%, rgb(7 19 16 / 0%) 44%); } } @media (width <= 46rem) { .hero { align-items: flex-start; min-height: auto; padding-block: clamp(2rem, 8vw, 3rem) 49vw; } /* Der Bildkasten ist nicht mehr der ganze Kopf, sondern nur das Band unten — genau im Seitenverhältnis der Zeichnung (seit dem Beschnitt vom 7. August: 1334 : 690 = 51,7 % der Breite). Damit gibt es kein Letterboxing und `cover` schneidet nichts weg: der Kasten *hat* die Form des Bildes. Der Verlauf als Maske gehört an diesen Kasten und nicht an den Schleier. Nur hier ist ein Prozentwert verlässlich — am Kopf wäre er von dessen Höhe abhängig, und die wächst mit der Textmenge. Ein erster Anlauf legte den Verlauf über die oberen 42 % des Kopfes; die Zeichnung begann erst bei 72 %, und die Naht blieb als waagrechte Linie stehen. */ .hero__media { top: auto; height: 51.72vw; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%); mask-image: linear-gradient(to bottom, transparent 0%, #000 26%); } .hero__media img { object-fit: cover; object-position: 50% 100%; transform: none; animation: none; } .hero__scrim { background: linear-gradient(to top, rgb(7 19 16 / 58%) 0%, rgb(7 19 16 / 8%) 30%, rgb(7 19 16 / 0%) 44%); } } /* Auch die Lebendig-Schicht: ein atmendes `scale` würde das Band im `contain`-Rahmen an den Seiten anschneiden. */ @media (max-width: 46rem) { :root[data-motion="full"] .hero__media img { animation: none; } } /* DER TAGKOPF AUF DEM TELEFON STEHT AUF PAPIER, NICHT AUF NAVY. Iris, 13. August: „ich moechte die Kopfbilder wieder klar sehen." Auf dem Telefon liegt die Zeichnung als Band UNTER dem Text — der Text steht also gar nicht auf dem Bild, sondern auf dem Grund des Kopfes, und der war `var(--deep-2)`. Solange das Papierband darüberlag, sah man das nicht; ohne Band mass der Lead am Tag **1,27:1** (dunkle Tinte auf Navy). Zwei Wege standen offen: die Schrift am Tag hell machen (dann ist der erste Bildschirm wieder Nacht — verboten nach dem Register im Tresor, IRIS_ENTSCHEIDE §5: „kein dunkles Band vor dem ersten hellen") oder den Grund hell machen. Also der Grund. Gemessen unten in der Tabelle; das Bild bleibt dabei vollständig unverschleiert, weil kein Wort darauf steht. */ @media (max-width: 46rem) { :root[data-theme="light"] .hero { background: var(--paper); } } @media (max-width: 46rem) and (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero { background: var(--paper); } } /* MITTIG STATT LINKSBÜNDIG — Iris, 13. August: „Let's have this one centered not left bound. and the same goes for other major high quality background such as our Kopfzeilen in day and night." Der Block stand seit jeher links, angelehnt an die Textspalte darunter. Auf einem grossflächigen Bild ist das die schwächere Wahl: die Zeichnung eines Kopfbilds hat ihre Mitte in der Mitte, und ein Text, der links davon klebt, sieht aus, als sei er darübergelegt worden — nicht, als gehöre er dazu. `margin-inline: auto` zentriert den Kasten, `text-align: center` seinen Inhalt. Beides braucht es: nur der Kasten mittig liesse den Text darin weiter links anschlagen, nur der Text mittig liesse den Kasten links stehen und die Zeilen zappeln. `max-width` bleibt — mittig heisst nicht randlos. Eine Zeile über die ganze Fensterbreite ist unlesbar, und diese Website hat ein Publikum, das oft erschöpft liest. */ .hero__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 2.5vw, 1.75rem); /* BREITER SEIT DEM 13. ABEND — Iris: „könnten wir noch besser ausmitten auf grossen Bildschirmen … auch nur auf zwei statt vier Zeilen." 46 rem trugen den Lead auf vier Zeilen. Zwei Zeilen brauchen rund 78 Zeichen je Zeile, und das sind bei 21,6 px Schrift etwa 850 Punkte. 58 rem (928 px) geben ihm den Platz und lassen bei 1280 px Fenster noch Rand. **Achtundsiebzig Zeichen sind viel** — die bequeme Spanne endet bei 75. Für einen Fliesstext wäre das zu breit, und diese Website hat ein Publikum, das erschöpft liest. Für EINEN Satz im Kopf, der einmal gelesen wird und dann steht, ist es vertretbar. Der Fliesstext darunter bleibt bei seinen Massen. */ max-width: 58rem; /* MITTIG ZUM FENSTER, NICHT ZUR SPALTE. Gemessen bei 1920 px: der Kasten stand 636 px vom linken und 548 px vom rechten Rand — 88 px daneben, und zwar auf jeder Breite gleich. Die Ursache ist die Stationsrinne der Shell, die links Platz für die senkrechte Linie lässt. Im Fliesstext ist dieser Versatz richtig, weil dort alles daran ausgerichtet steht; im Kopf ist er falsch, weil dort ein Bild dahinterliegt, dessen Mitte die Fenstermitte ist. */ margin-inline: auto; text-align: center; } /* DIE ZWEI KNÖPFE UNTEREINANDER — Iris, 13. August: „Erstgespräch botton auch in der Mitte und so arbeiten wir auch in der Mitte darunter." Nebeneinander waren sie zusammen 415 px breit und bildeten damit eine waagrechte Zeile unter einem sonst senkrecht gestapelten, mittigen Block — das einzige Element, das eine andere Richtung hatte. Untereinander stehen beide auf derselben Mittelachse wie Zeile, Lead und Grenzsatz. Der erste Knopf führt, der zweite steht darunter und nimmt sich zurück; das ist auch inhaltlich die richtige Reihenfolge — «Erstgespräch» ist die Handlung, «So arbeiten wir» die Auskunft für alle, die noch nicht so weit sind. */ .hero__inner .cta-row, .hero__inner .btn-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; } /* KEINE VOLLTONFARBE MEHR AUF DER SCHLAGZEILE DES KOPFES — Iris, 13. August: „wo sind die chrome accente geblieben?" Hier stand `.hero .h1 { color: #f4f8f3; }`. Zwei Klassen schlagen eine: die Regel überstimmte `@supports { .h1 { color: transparent } }` des Metallsystems, und damit war der Verlauf im Kopf **übermalt** — im Tagmodus wie in der Nacht, seit die Regel existiert. Der Effekt war nicht verschwunden, er war nie sichtbar. Die Schlagzeile bekommt ihre Farbe deshalb wieder vom Metall: Chrom am Tag (dunkler Stahl, tragfähig auf Papier UND auf dem hellen Kunstwerk), Neon in der Nacht. Kein `!important`, sondern eine Regel weniger. Die Rückfallebene für Geräte ohne `background-clip: text` ist die Vererbung: `.h1` trägt selbst keine Farbe, also erbt die Schlagzeile die des Kopfes — am Tag `var(--ink-2)` auf hellem Grund, in der Nacht `#eef3ee` auf tiefem. Beide Wege bleiben lesbar, ohne dass eine Regel den Verlauf überstimmen kann (GERAETE §3). */ .hero .lead { /* WAR #cfdcd2 UND FIEL DURCH — gefunden beim Nachmessen vom 13. August, nicht durch eine Beschwerde. Im Nachtbild liegt auf Lead-Hoehe bei 1024 px ein heller Gruenkeil (L 0,142); #cfdcd2 (L 0,691) misst dort **3,86:1**, verlangt sind 4,5 (21,6 px, Gewicht 400 — knapp unter der Grossschrift-Schwelle von 24 px). #eef5f0 misst 4,94:1 und auf Navy 13,7:1. Der Fehler ist aelter als diese Aenderung; die frueher hier notierten 5,29:1 stammen von einer Messung bei nur einer Breite. */ color: #eef5f0; /* War 38ch und damit die Ursache der vier Zeilen — der Lead sass in einer eigenen, engeren Grenze mitten im breiteren Kasten. Jetzt nimmt er die Breite des Kastens; die Zeilenzahl entscheidet der Kasten, nicht eine zweite Zahl an anderer Stelle. */ max-width: 100%; margin-inline: auto; } /* DIE AUGENBRAUE IM KOPF IST GROSSE SCHRIFT — und das ist eine Messung, keine Typografie-Laune. Seit das Tagband weg ist, steht diese Zeile direkt auf dem Himmel der Zeichnung. Der ist mitteldunkel: schlechtester Bildpunkt L 0,188 bei 1920 px. Gegen L 0,188 ist **4,76:1 das rechnerische Maximum**, das irgendeine Farbe ueberhaupt erreichen kann (reines Schwarz), und die tiefste Tinte dieser Website kommt auf 3,77:1. Bei 11,5 px verlangt WCAG 4,5:1 — diese Zeile war also mit keiner Farbe zu retten, nur mit einer Flaeche darunter. Genau diese Flaeche will Iris nicht mehr. Der dritte Weg ist die Schwelle selbst: ab 18,66 px fett gilt „grosse Schrift", und dort sind 3,0:1 verlangt. 1,25 rem sind 20 px, Gewicht 700 — die Zeile faellt damit unter dieselbe Regel wie die Schlagzeile und misst 3,77:1 statt 3,77 gegen 4,5. Nebenbei ist sie auf einem Telefon ohnehin besser lesbar, und dieses Publikum liest oft erschoepft. Kein `!important`, keine Flaeche, kein Schleier — eine groessere Zeile. */ .hero__eyebrow { color: var(--gold-on-deep); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.12em; } .hero__boundary { display: flex; gap: 0.75rem; align-items: flex-start; max-width: 44ch; padding-top: 1.25rem; /* DIE DUENNE LIMETTENLINIE — Iris' „mehr accente ... in diesem neongruen" an der einen Stelle des Kopfes, an der eine Linie ohnehin steht. Reine Zierde: sie trennt, sie traegt nichts. Die Schrift darunter hat ihren eigenen gemessenen Wert (Tag 5,47:1, Nacht 6,61:1). */ border-top: 1px solid rgb(184 242 0 / 55%); font-size: var(--t-small); line-height: 1.5; color: #b9c9be; } .hero__boundary svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; color: var(--gold-on-deep); } /* Reveal choreography for the hero, run once on load. */ .reveal-line { display: block; animation: rise 900ms var(--ease) both; } .reveal-line:nth-child(1) { animation-delay: 120ms; } .reveal-line:nth-child(2) { animation-delay: 220ms; } .reveal-line:nth-child(3) { animation-delay: 320ms; } .hero__inner > * { animation: rise 900ms var(--ease) both; } .hero__inner > *:nth-child(1) { animation-delay: 60ms; } .hero__inner > *:nth-child(2) { animation-delay: 160ms; } .hero__inner > *:nth-child(3) { animation-delay: 300ms; } .hero__inner > *:nth-child(4) { animation-delay: 400ms; } .hero__inner > *:nth-child(5) { animation-delay: 500ms; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* --- The route: sections as stations on a marked trail ------------------ */ .station { position: relative; } .station__dot, .station__rule { display: none; } @media (min-width: 68rem) { /* BEIDSEITIG, seit dem 14. August — Iris: „Since now we have a centered banner with the logo, let's make sure everything uses that center line." Hier stand `padding-left: var(--rail-pad)`, einseitig. Gemessen bei 1280 px verschob das **jeden** Abschnittsinhalt um **44 px nach rechts** (die halbe Polsterbreite), während das Signet in der Kopfzeile auf 640 sass, der echten Mitte. Auf jeder Seite, bei jeder Überschrift, immer derselbe Betrag — die Handschrift eines festen Polsters, nicht eines Layoutfehlers. **Es ist derselbe Fehler, der am 13. August schon einmal gefunden wurde.** Damals traf er `.hero` und wurde dort entfernt (die Begründung steht darüber); die Stationen behielten ihr Polster mit dem Argument, sie seien „weiterhin linksbündig". Am selben Tag entschied Iris dann „Überschriften mittig" — und damit war das Argument abgelaufen, ohne dass jemand die Zeile nachzog. Ein Grund, der wegfällt, nimmt die Regel nicht von selbst mit. Die Schiene braucht das Polster ohnehin nicht: `.station__rule` und `.station__dot` sind `position: absolute` an `--rail-x`. Das Polster hielt nur den Inhalt von ihnen weg — und das tut es beidseitig genauso, nur ohne die Mitte zu verschieben. */ .station { padding-inline: var(--rail-pad); } /* HIER STAND `.hero { padding-inline-start: var(--rail-pad); }` — und genau diese eine Zeile war der Versatz, den Iris am 13. August gesehen hat: „könnten wir noch besser ausmitten auf grossen Bildschirmen." Gemessen bei 1920 px: der Kasten stand 540 px vom linken und 452 px vom rechten Rand. **88 px daneben, und auf jeder Breite exakt gleich** — das ist die Handschrift eines festen Polsters, nicht eines Layoutfehlers. `--rail-pad` ist 88 px, und die Section trug es nur links. WARUM ES DA WAR, UND WARUM ES JETZT WEG IST. Die Zeile stammt vom 6. August und erfüllte eine Bitte von Iris: „in the rest of the document, the text is all left bound… but on top of the kopf picture it starts further in." Damals stand der Kopftext linksbündig, und das Polster brachte ihn auf dieselbe Kante wie die Stationen darunter. Das war richtig — solange der Text links stand. Am 13. August hat sie das Gegenteil entschieden: „Let's have this one centered not left bound." Damit hat die Einrückung keine Kante mehr, an die sie ausrichtet. Ein Block, der auf ein Bild zentriert wird, gehört auf die Mitte des Bildes, und die Mitte des Bildes ist die Mitte des Fensters — das Bild ist absolut gesetzt und randlos. **Zwei Anweisungen derselben Person, die einander widersprechen, und die jüngere gewinnt.** Nicht weil sie jünger ist, sondern weil die ältere eine Begründung hatte, die mit der Ausrichtung stand und fiel. Die Stationen darunter behalten ihr Polster; sie sind weiterhin linksbündig. */ .station__rule { display: block; position: absolute; inset-inline-start: var(--rail-x); top: 0; bottom: 0; width: 1px; background: var(--line); overflow: hidden; } .station__rule::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(to bottom, var(--gold), color-mix(in srgb, var(--gold) 22%, transparent)); transform: scaleY(0); transform-origin: top; transition: transform 1400ms var(--ease); } .station.is-visible .station__rule::after { transform: scaleY(1); } .station__dot { display: grid; place-items: center; position: absolute; inset-inline-start: calc(var(--rail-x) - 0.5rem); top: clamp(4rem, 9vw, 7.5rem); width: 1rem; height: 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); transition: border-color 500ms var(--ease), background-color 500ms var(--ease); } .station__dot::after { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--gold); transform: scale(0); transition: transform 500ms var(--ease) 200ms; } .station.is-visible .station__dot { border-color: var(--gold); } .station.is-visible .station__dot::after { transform: scale(1); } .band--deep .station__rule { background: var(--line-on-deep); } .band--deep .station__dot { background: var(--deep); } } /* --- Grids -------------------------------------------------------------- */ /* Column counts are explicit rather than auto-fit: six cells divide evenly into 1, 2 and 3, so the framed grid never ends on a half-empty row. */ .grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; } @media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62rem) { .grid { grid-template-columns: repeat(3, 1fr); } } .grid__cell { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.5rem, 2.6vw, 2.1rem); background: var(--paper-raised); transition: background-color 320ms var(--ease), transform 320ms var(--ease); } .grid__cell:hover { background: color-mix(in srgb, var(--paper-raised) 88%, var(--gold) 12%); } .grid__cell p { margin: 0; color: var(--ink-2); font-size: var(--t-small); line-height: 1.58; } /* Nine cells: one, three or nine per row, never a part-empty row. */ .grid--nine { grid-template-columns: 1fr; } @media (min-width: 44rem) { .grid--nine { grid-template-columns: repeat(3, 1fr); } } /* EINE SPALTE IST KEINE KARTE — gemessen in der Nacht zum 16. August. * * Der Partnerteil auf /start/ war 4'214 Pixel hoch, fünf Bildschirme, 38 * Prozent der ganzen Seite. Die naheliegende Erklärung wäre „zu viel Text" * gewesen. Die Messung sagte etwas anderes: eine Zelle war 199 Pixel hoch, * davon 96 Pixel Überschrift und Absatz — **über die Hälfte war Polster.** * Bei 21 Zellen sind das rund 2'100 Pixel, in denen nichts steht. * * Der Grund ist kein Fehler, sondern eine Voraussetzung, die unter 44rem * nicht mehr gilt. Ein Innenpolster trennt eine Karte von ihrer Nachbarin * **daneben**. Fällt das Raster in eine Spalte, gibt es keine Nachbarin * daneben mehr; getrennt wird dann von der Haarlinie und der Überschrift, * und das Polster verlängert nur noch. * * Also: unter 44rem kein seitliches Polster (der Text bekommt die volle * Breite und bricht seltener um) und ein knapperes Polster oben und unten. * Die Haarlinien bleiben — sie sind die Trennung, die hier wirklich arbeitet. * Am Rand fallen sie weg, damit die Liste als Liste liest und nicht als * Tabelle mit einem Kasten darum. * * Kein Wort wurde dafür gestrichen. Was der Abschnitt sagt, ist Iris' * Entscheidung; wie hoch er dabei baut, ist meine. */ @media (max-width: 43.999rem) { .grid--nine { border-inline: 0; } .grid--nine > .grid__cell { padding-block: 0.85rem; padding-inline: 0; gap: 0.3rem; } /* Ohne Kastenfläche greift auch die Aufhellung beim Zeigen ins Leere — sie würde ein randloses Band einfärben statt einer Karte. */ .grid--nine > .grid__cell:hover { background: var(--paper-raised); } } /* --- The CARE framework ------------------------------------------------- */ .framework { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3rem); /* Altgeräte: Raster ohne min(). */ grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .framework__item { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 1rem; border-top: 1px solid var(--line); } .framework__letter { margin: 0 0 0.35rem; font-family: "Archivo", system-ui, sans-serif; font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 600; font-variation-settings: "wdth" 112; line-height: 0.9; letter-spacing: -0.02em; /* This is text, not a mark: a screen reader reads "C. Connect — Verbinden". Brand --gold is 2.11:1 on paper, failing even the 3:1 large-text threshold, so the letter uses the readable gold. At 38–54px the deeper bronze still reads as gold. */ color: var(--gold-ink); } .framework__item p:last-child { margin: 0; font-size: var(--t-small); line-height: 1.58; color: var(--ink-2); } /* --- Journey stages ----------------------------------------------------- */ .stages { display: grid; gap: 0; counter-reset: stage; } /* Enger seit dem 10. August. Gemessen: vier Etappen von zusammen 688 px, davon 320 px Polster — 46 %. Bei vier Zeilen mit je einer Trennlinie darüber braucht es nicht zweimal 40 px, damit die Trennung sichtbar ist; die Linie leistet das. Die Zahlenspalte bleibt unangetastet, weil sie den Rhythmus trägt. Gilt auf drei Seiten (Startseite, /angehoerige/, /start/). */ .stage { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding-block: clamp(1.25rem, 2.1vw, 1.75rem); border-top: 1px solid var(--line-on-deep); align-items: start; } .stage:last-child { border-bottom: 1px solid var(--line-on-deep); } .stage__step { font-family: "Archivo", system-ui, sans-serif; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; font-variation-settings: "wdth" 96; font-variant-numeric: tabular-nums; line-height: 1; color: var(--gold-on-deep); opacity: 0.85; } .stage__body { display: flex; flex-direction: column; gap: 0.5rem; } .stage__title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; } .stage__meta { font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2-on-deep); font-variant-numeric: tabular-nums; } .stage p { margin: 0; max-width: 58ch; color: var(--ink-2-on-deep); } @media (max-width: 34rem) { .stage { grid-template-columns: 1fr; gap: 0.75rem; } } /* --- Die Hilfen-Kacheln (/barrierefreiheit/) ---------------------------- */ /* Acht Kacheln aus dem Quellmaterial (Iris, 7. August: „What happened to these, pls integrate") — vier nutzbar, vier ehrlich als Vorhaben. Ohne Bilder gebaut: die Bilderzählung der Seite bleibt, was sie ist. */ .hilfen { display: grid; gap: clamp(1rem, 2vw, 1.5rem); /* Altgeräte: Raster ohne min(). */ grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .hilfe { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.25rem 1.25rem 1.4rem; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 2px; } .hilfe__name { margin: 0; font-size: 1.02rem; font-weight: 600; } .hilfe__satz { margin: 0; flex: 1; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); } .hilfe__schalter { align-self: flex-start; } .hilfe__schalter[aria-pressed="true"] { background: var(--alpine); border-color: var(--alpine); color: #f6f9fc; } .hilfe__verweis { color: var(--ink-2); } /* Die Vorhaben: gleiches Muster wie die heranwachsenden Welten — Grau PLUS das Wort, nie Grau allein (WCAG 1.4.1). */ .hilfe--geplant { background: var(--paper-sunk); } .hilfe__stand { margin: 0; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } /* --- Grosse Schrift und Hoher Kontrast ---------------------------------- */ /* Zwei Wahlen, die auf jeder Seite gelten (site.js setzt die Attribute beim Laden aus dem Browserspeicher). Grosse Schrift skaliert die Wurzel — alles, was in rem gemessen ist, wächst mit, also fast alles. Hoher Kontrast zieht die Tinten auf Schwarz bzw. Weiss und die Flächen auf Weiss bzw. Schwarz: jede Änderung ERHÖHT einen bestehenden, gemessenen Abstand, darum braucht sie keine neue Messung. */ :root[data-schrift="gross"] { font-size: 118%; } :root[data-kontrast="hoch"] { --paper: #fff; --paper-raised: #fff; --paper-sunk: #f2f2f2; --ink: #000; --ink-2: #111; --ink-3: #292929; --line: #555; --gold-ink: #684b06; } @media (prefers-color-scheme: dark) { :root[data-kontrast="hoch"]:not([data-theme="light"]) { --paper: #000; --paper-raised: #0a0a0a; --paper-sunk: #111; --ink: #fff; --ink-2: #f0f0f0; --ink-3: #d6d6d6; --line: #8a8a8a; --gold-ink: #ecd9a8; } } :root[data-kontrast="hoch"][data-theme="dark"] { --paper: #000; --paper-raised: #0a0a0a; --paper-sunk: #111; --ink: #fff; --ink-2: #f0f0f0; --ink-3: #d6d6d6; --line: #8a8a8a; --gold-ink: #ecd9a8; } /* --- Principles --------------------------------------------------------- */ .principles { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 5vw, 4rem); /* Altgeräte: Raster ohne min(). */ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); } .principle { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 1.25rem; border-top: 2px solid var(--gold); } .principle p { margin: 0; color: var(--ink-2); font-size: var(--t-small); line-height: 1.6; } /* --- Figure ------------------------------------------------------------- */ .figure { display: grid; gap: 0.75rem; margin: 0; } .figure img { display: block; width: 100%; border-radius: 2px; } .figure figcaption { font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-label); letter-spacing: 0.06em; color: var(--ink-3); } /* Auf dem dunklen Band der Zwilling — Mic, 12. August: „Dann sind Ansichten auf dem Handy heller Hintergrund mit grauer Schrift unlesbar." `--ink-3` ist das gedaempfte Grau des Papiers. Auf Navy gemessen, 390 px, `/` und `/kontakt/`: **2,22:1** bei 11,5 px gegen verlangte 4,5. **Die Regel steht hier und nicht bei den anderen `.band--deep`-Zeilen**, und das ist kein Ordnungsfehler, sondern der Grund, warum der erste Versuch nur nachts half. `.band--deep figcaption` und `.figure figcaption` haben **dieselbe Spezifitaet** (0,1,1) — bei Gleichstand entscheidet die Reihenfolge. Weiter oben notiert verlor die Regel am Tag und gewann nur nachts, weil `--ink-3` dort zufaellig hell ist. */ .band--deep figcaption { color: var(--ink-2-on-deep); } /* Das Bildband — Iris, 9. August: „so wie beim Kopf darfst du gerne auch Bilder mit Text überziehen. Momentan ist nur das Kopfbild überschrieben." Warum das die Startseite kürzt und nicht nur schmückt: Bild und Text stehen heute NACHEINANDER. Gemessen sind das 12 287 px auf vierzehn Bildschirmen, und sechs der neun Abschnitte tragen überhaupt kein Bild — 7 452 px reine Textstrecke ohne Anker. Übereinander gelegt verschwindet die Höhe der Bildunterschrift aus dem Fluss, und das Bild bekommt seine Aussage zurück, statt sie darunter zu tragen. Der Schleier ist keine Verzierung, sondern die Kontrastgarantie. Er muss nach oben auslaufen, damit das Bild oben ganz zu sehen ist, und unten so dicht sein, dass heller Text auf JEDEM Bild lesbar bleibt — auch auf einer Schneefläche. `test_contrast.py` kann das nicht rechnen, weil die Farbe nicht im Stylesheet steht, sondern erst im Browser entsteht; die Werte unten sind darum am gerenderten Bild gemessen und im Test als Untergrenze festgehalten, nicht als Geschmack. */ .figure--band { position: relative; isolation: isolate; gap: 0; } .figure--band img { border-radius: 2px; } /* Der weiche Verlauf steht ÜBER der Zeile, nicht hinter ihr. Der erste Anlauf legte einen Verlauf von 88 % bis 0 % hinter die Bildunterschrift. Gemessen am gerenderten Bild ergab das an der hellsten Stelle **2,63:1 und 3,12:1** — unter AA. Der Grund ist Arithmetik, nicht Geschmack: heller Text (#f4f8f3, L ≈ 0,90) braucht einen Grund mit L ≤ 0,161. Kommt ein heller Bildpunkt (L ≈ 0,8) durch, muss der Schleier mindestens **81 %** decken — der Verlauf war im oberen Drittel der Zeile aber bei 34 % und darunter. Ein Verlauf, der dort ausläuft, wo noch Text steht, ist deshalb der falsche Aufbau. Richtig ist die Trennung: die Zeile selbst bekommt eine gleichmässig dichte Fläche, und das weiche Auslaufen passiert in einem eigenen Streifen DARÜBER, wo kein Buchstabe mehr steht. Das Bild verliert dadurch nichts an Weichheit und die Garantie hängt nicht mehr davon ab, wo die Zeile gerade umbricht. */ .figure--band figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; margin: 0; padding: clamp(0.85rem, 2.2vw, 1.6rem) clamp(1rem, 3vw, 2.25rem); color: #f4f8f3; text-shadow: 0 1px 2px rgb(7 19 16 / 55%); background: rgb(7 19 16 / 88%); border-end-start-radius: 2px; border-end-end-radius: 2px; } /* Der Übergang vom Bild in die Zeile: 0 % bis 88 %, über eine Höhe, in der nichts geschrieben steht. Zeigt auf `figcaption` Bezug zu nehmen ist nicht möglich (CSS kennt kein Elternteil), darum sitzt der Streifen am Bild und endet genau dort, wo die Zeile beginnt — deren Höhe ist unbekannt, also überlappt er sie um ein Stück nach unten und wird von ihr überdeckt. */ .figure--band::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: clamp(5rem, 12vw, 9rem); z-index: 0; pointer-events: none; background: linear-gradient(to top, rgb(7 19 16 / 88%) 0%, rgb(7 19 16 / 0%) 100%); } /* Auf einem schmalen Gerät ist das Bild niedrig, und ein Schleier, der über drei Viertel der Höhe läuft, verdeckt es ganz. Dort steht die Zeile wieder darunter — dieselbe Entscheidung wie beim Kopfbild, aus demselben Grund. */ @media (max-width: 34rem) { .figure--band { gap: 0.75rem; } .figure--band figcaption { position: static; padding: 0; color: var(--ink-3); text-shadow: none; background: none; } /* **Nur hier war Mics Befund.** Am Schreibtisch liegt die Zeile AUF dem Bild und ist deshalb hell (#f4f8f3). Unter 34 rem trennen sich Bild und Text — und dann faellt die Zeile auf `--ink-3` zurueck, das gedaempfte Grau des Papiers. Steht das Band auf `--deep`, ist der Grund aber immer noch Navy: gemessen bei 390 px auf `/` und `/kontakt/` **2,22:1** bei 11,5 px. Genau „heller Hintergrund mit grauer Schrift", nur andersherum. Mic, 12. August: „Dann sind Ansichten auf dem Handy heller Hintergrund mit grauer Schrift unlesbar. Musst mal schauen." Geschaut, gemessen, behoben — 2,22 auf 7,04:1. */ .band--deep .figure--band figcaption { color: var(--ink-2-on-deep); } } .split { display: grid; gap: clamp(2rem, 5vw, 4rem); /* Altgeräte: Raster ohne min(). */ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: center; } /* --- Team --------------------------------------------------------------- */ .team { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); /* Altgeräte: Raster ohne min(). */ grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .member { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.5rem; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow-card); transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease); } .member:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); } .member__portrait { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 2px; background: linear-gradient(150deg, var(--portraet-platte), var(--portraet-platte-2)); color: var(--portraet-marke); overflow: hidden; } .member__portrait img { width: 100%; height: 100%; object-fit: cover; } /* DER ZOOM AUF DEM PORTRÄT — Iris, 17. August: «we can add a zoom in when someone hovers over our headshots.» Er liegt auf JEDEM `.member__portrait`-Bild (Teamkarten wie Personenseite, also auch auf jedem künftigen Kopf), und drei Grenzen sind Absicht: - `overflow: hidden` steht schon am Behälter — das Bild wächst im Rahmen, nie über ihn hinaus; Kreis bleibt Kreis, Karte bleibt Karte. - `@media (hover: hover)`: auf einem Touchscreen gibt es kein Darüberfahren, nur ein Antippen — dort bliebe das Bild nach dem ersten Tippen vergrössert stehen. Die Regel erreicht solche Geräte gar nicht erst. - `prefers-reduced-motion`: wer Bewegung reduziert hat, bekommt keine — dieselbe Linie wie bei jedem Übergang dieser Website. Der Lebendig-Schalter ist hier NICHT die Bedingung: er regelt die Kür-Animationen, die von selbst laufen; eine Antwort auf die eigene Handbewegung ist Rückmeldung, keine Kür. */ .member__portrait img { transition: transform 450ms var(--ease); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .member__portrait:hover img { transform: scale(1.06); } } .member__portrait svg { width: 44%; height: auto; opacity: 0.75; } .member__name { margin: 0; font-family: "Archivo", system-ui, sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.004em; } .member__index { margin: 0; font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--gold-ink); } .member__person { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-small); font-weight: 500; color: var(--ink-2); } /* DAS ZEICHEN NEBEN DEM NAMEN — Iris, 18. August: „ev ein hint auf den Webseiten Profilen (Farbe, 🪶 etc)". Drei Entscheidungen stecken darin, und alle drei sind Begrenzungen: - Es ist GEZEICHNET, kein Emoji. 🪶 rendert auf jedem Gerät anders, auf manchen gar nicht — und eine Vorlesestimme liest es als „Feder", mitten im Namen eines Menschen. Das SVG ist `aria-hidden` und stört keine. - Es steht nur bei Menschen, die der Namensnennung zugestimmt haben. Ein Zeichen ohne Namen ist kein Hinweis, sondern Dekoration. - Es trägt keinen Tiernamen und keine Beschriftung. Welches Tier zu wem gehört, bleibt intern (docs/TIERE_ZUORDNUNG_2026-08-18.md). `currentColor` im SVG holt sich den Ton aus `--mitglied-akzent`; ohne Akzent fällt es auf die Goldtinte zurück und sieht aus wie bisher. */ .member__zeichen { flex: none; width: 0.95em; height: 0.95em; color: var(--mitglied-akzent, var(--gold-ink)); } .member--founder { --mitglied-akzent: var(--akzent-iris); } .member--koordination { --mitglied-akzent: var(--akzent-sandy); } .member p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); } .member__tag { align-self: flex-start; margin-top: auto; padding: 0.25rem 0.55rem; border: 1px solid var(--line-strong); border-radius: 2px; font-family: "Archivo", system-ui, sans-serif; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; transition: border-color 260ms var(--ease), color 260ms var(--ease); } .member__tag--link:hover { border-color: var(--gold); color: var(--gold-ink); } /* --- Roles -------------------------------------------------------------- */ /* Eleven roles divide into no tidy grid, so rows are ruled and columns are separated by space. An odd count then ends the list cleanly. */ .roles { display: grid; gap: 0 clamp(1.5rem, 3.5vw, 3rem); /* Altgeräte: Raster ohne min(). */ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); border-bottom: 1px solid var(--line-on-deep); } .role { display: flex; gap: 1rem; padding: clamp(1.15rem, 2vw, 1.6rem) 0; border-top: 1px solid var(--line-on-deep); transition: opacity 320ms var(--ease); } .role:hover { opacity: 0.86; } /* The number is the organisation's own Kernfunktion index, not decoration: 01 is filled, so the open roles genuinely start at 02. */ .role__index { flex: none; width: 1.75rem; font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.5; letter-spacing: 0.02em; color: var(--gold-on-deep); opacity: 0.75; transition: opacity 320ms var(--ease); } .role:hover .role__index { opacity: 1; } .role__body { display: flex; flex-direction: column; gap: 0.35rem; } .role__title { margin: 0; font-family: "Archivo", system-ui, sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink-on-deep); } .role__body p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2-on-deep); } /* Der Bewerbungslink pro Rolle. Etwas Luft darüber, damit er als Handlung liest und nicht als dritte Zeile Beschreibung. */ .role__apply { margin-block-start: 0.35rem !important; } .role__apply a { color: var(--ink-on-deep); text-underline-offset: 0.2em; } /* --- Utilities ---------------------------------------------------------- Small, named jobs. They exist because the site's CSP is style-src 'self': no element may carry an inline style attribute. */ .u-flush { margin: 0; } .u-measure { max-width: 52ch; } .label-block { display: block; margin-bottom: 0.6rem; } /* --- Codex -------------------------------------------------------------- */ .codex__emblem { display: block; width: clamp(7.5rem, 14vw, 10.5rem); height: auto; margin-inline: auto; } .codex { display: grid; gap: 0 clamp(1.5rem, 3.5vw, 3rem); /* Altgeräte: Raster ohne min(). */ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: codex; border-bottom: 1px solid var(--line); } .codex__item { display: flex; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); } .codex__number { flex: none; width: 1.75rem; font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--gold-ink); } .codex__title { font-family: "Archivo", system-ui, sans-serif; font-size: 0.98rem; font-weight: 500; line-height: 1.35; color: var(--ink); text-wrap: pretty; } /* --- Contact / form ----------------------------------------------------- */ .contact { display: grid; gap: clamp(2rem, 5vw, 4rem); /* Altgeräte: Raster ohne min(). */ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: start; } .form { display: grid; gap: 1rem; } .field { display: grid; gap: 0.4rem; } .field__label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2); } .field__input, .field__textarea { width: 100%; padding: 0.75rem 0.85rem; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--paper-raised); color: var(--ink); font-family: inherit; font-size: var(--t-body); line-height: 1.5; transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease); } .field__input:focus, .field__textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); } /* Pointer focus only — the keyboard keeps its outline. Until 2026-07-30 this rule was `.field__input:focus { outline: none }`, which also stripped the outline from keyboard focus: `:where(...)` gives the global `:focus-visible` rule zero specificity, so this one won. That left the soft forest glow — an 18% tint — as the sole focus indicator on the contact form, short of the 3:1 that WCAG 1.4.11 asks of a state indicator. Found by `test_accessibility_page.py` while checking a claim the site now publishes. */ .field__input:focus:not(:focus-visible), .field__textarea:focus:not(:focus-visible) { outline: none; } .field__textarea { min-height: 8rem; resize: vertical; } .field__error { font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-small); color: #a3341f; } :root[data-theme="dark"] .field__error { color: #ef9d87; } @media (prefers-color-scheme: dark) { .field__error { color: #ef9d87; } } :root[data-theme="light"] .field__error { color: #a3341f; } .notice { display: flex; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px solid var(--line-strong); border-left: 2px solid var(--gold); border-radius: 2px; background: var(--paper-raised); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); } .notice svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--gold-ink); } .notice p { margin: 0; } .notice--success { border-left-color: var(--forest); color: var(--ink); } .emergency { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-top: 0.5rem; font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-small); font-variant-numeric: tabular-nums; } .emergency__item { display: inline-flex; align-items: baseline; gap: 0.45rem; color: var(--ink-2); } .emergency__num { font-weight: 700; font-size: 1.05rem; color: var(--ink); } .contact__aside { display: flex; flex-direction: column; gap: 1.25rem; } .contact__lines { display: grid; gap: 0.35rem; font-size: var(--t-small); } .contact__lines a { color: var(--ink); text-underline-offset: 3px; } /* --- Fussband: Bern–Belp ------------------------------------------------ */ /* Die gezeichnete Höhenlinie stand hier bis 2026-08-05. Iris: „it does not make sense to have mountains on the bottom … maybe the cows without mountains etc. … or maybe bern city." Der Kopf zeigt, was vor einem liegt; der Fuss zeigt, wo man steht. Es steht jetzt die gelieferte Silhouette dort — Weide, Kühe, Bäume, dahinter die Stadt: Region Bern–Belp in einer Zeile, ohne ein Wort. Eine Datei, zwei Modi. `band_bern_belp.svg` trägt nur Form, keine Farbe; sie dient als Maske, und die Farbe kommt aus --alpine — Navy am Tag, Silberblau in der Nacht, dem Schalter im Kopf folgend. Erzeugt von scripts/make_band.py, dort steht auch, warum keine zwei eingefärbten Dateien. Leiser gestellt wird über die **Farbe**, nicht über `opacity` — Iris, „maybe we make them slight less dominant", danach „we lost a lot of dimension". Beides stimmt, und beides zugleich geht nur so: Die Maske trägt zwei Tiefen als Alphastufen (vorne voll, hintere Kette 45 %). Eine Deckkraft auf dem Element multipliziert beide — aus 100/45 wird 50/22, und der Abstand zwischen vorn und hinten schrumpft mit. Eine gemischte Farbe bei voller Deckkraft lässt das Verhältnis stehen: leiser wird das Ganze, flacher wird es nicht. Nachts etwas leiser als tags, weil Helles auf Dunklem stärker vortritt. */ /* --- Die Aare als Linie ---------------------------------------------------- Iris, 16. August, zum gelieferten Bildstreifen: „Designed to sit at the bottom of the page like the progress line in the app screenshots." Vorbild ist die Leiste in aare.guru, die Iris selbst benutzt; die Idee steht seit dem 12. August in docs/KONZEPT_AARE.md §4. GEZEICHNET STATT EINGEBETTET, aus drei gemessenen Gründen: die Ortsnamen im gelieferten Bild waren in die Bildpunkte eingebrannt (nicht übersetzbar, nicht vorlesbar), das Band trug eine feste dunkle Farbe (auf warmem Papier ein Balken), und BELP fehlte — der Pilotort, der Nullpunkt dieses Projekts. AUF DEM TELEFON BLEIBEN ZWEI NAMEN. Bei 390 px Breite wäre der Streifen knapp 20 px hoch und jede Beschriftung unlesbar. Statt ihn scrollbar zu machen (ein Fussband, das man wischen muss, wischt niemand) fallen die Namen weg und die Punkte bleiben: der Fluss mit seinen Stationen, und die zwei, um die es geht. */ .aare { display: block; width: 100%; height: auto; margin-block: 0.25rem 0; } .aare__wasser { fill: var(--aare, #3f7fae); opacity: 0.55; } .aare__punkt { fill: var(--ink-3); } .aare__punkt--gold { fill: var(--gold); } .aare__punkt--ring { fill: var(--paper); } .aare__ring { fill: none; stroke: var(--gold); stroke-width: 2.5; } .aare__name { fill: var(--ink-3); font-size: 26px; /* viewBox-Einheiten — skaliert mit */ letter-spacing: 0.04em; } .aare__name--stark { fill: var(--ink-2); font-weight: 600; } @media (max-width: 48rem) { /* Nur Belp und Bern behalten ihren Namen. `--stark` trägt genau diese zwei; alle anderen verschwinden, ihre Punkte bleiben stehen. */ .aare__name:not(.aare__name--stark) { display: none; } .aare__name--stark { font-size: 40px; } } @media (max-width: 30rem) { /* Am Telefon sind auch Belp und Bern rechnerisch ~7,5 px hoch — echter Text, sichtbar unleserlich. role="img" + tragen die Bedeutung (aare_linie.html); unleserliche Schrift ist nur Rauschen. Die Punkte bleiben stehen. */ .aare__name--stark { display: none; } } /* --- Das Fussband ---------------------------------------------------------- Seit dem 16. August ein Bild statt sechs Maskenebenen. Iris hat Tag und Nacht derselben Landschaft geliefert; damit entfällt die Umfärbung, die es nur gab, weil vorher EIN Band zwei Modi bedienen musste. RANDLOS, wie das alte Band seit dem 7. August — Iris: „bring the foot picture down or the balken up, so it's a smooth transition." Deshalb keine Shell darum, sondern volle Fensterbreite. `line-height: 0` am Behälter: sonst steht unter dem Bild die Grundlinie einer leeren Textzeile, und zwischen Band und Boden klafft ein heller Streifen. Bei einem randlosen Element fällt genau das auf. KEIN `position: absolute` für die zweite Ebene, sondern beide im Textfluss und eine davon `display: none`. Übereinandergelegt lädt der Browser **beide**; so lädt er nur die, die auch erscheint — zusammen mit `loading="lazy"` am Bild. Bei 88 und 49 Kilobyte auf JEDER Seite ist das der Unterschied zwischen einem und zwei Bildern pro Aufruf. */ .fussband { width: 100%; line-height: 0; } .fussband__bild { display: block; } .fussband img { display: block; width: 100%; height: auto; } /* Tag und Nacht — dasselbe Muster wie bei der Wortmarke, aus demselben Grund: die Media-Query gilt, solange niemand geschaltet hat; die :root[data-theme]-Regeln (0,2,1) schlagen sie (0,1,0), sobald jemand den Schalter in der Kopfzeile benutzt. Reihenfolge und Spezifität mit Absicht — die Basisregel steht VOR den dunklen. */ .fussband__bild--nacht { display: none; } @media (prefers-color-scheme: dark) { .fussband__bild--tag { display: none; } .fussband__bild--nacht { display: block; } } :root[data-theme="light"] .fussband__bild--tag { display: block; } :root[data-theme="light"] .fussband__bild--nacht { display: none; } :root[data-theme="dark"] .fussband__bild--tag { display: none; } :root[data-theme="dark"] .fussband__bild--nacht { display: block; } /* --- Das Alpenband --------------------------------------------------------- AUSSER BETRIEB seit dem 16. August — das Markup dafür steht nicht mehr in partials/footer.html. Die Regeln bleiben, weil die Rückkehr eine Zeile sein soll und nicht eine Rekonstruktion. Vier Dichten aus einer Graustufenvorlage, jede als eigene Maske. Die Farbleiter läuft von hinten nach vorn: die hinterste Kette ist am blassesten, die vorderste am dunkelsten — dieselbe Staffelung, die eine echte Bergkette im Dunst zeigt. `color-mix` steht zweimal: zuerst der volle Wert für Browser ohne, dann die Mischung. Ohne Maskenunterstützung bleibt das ganze Band verborgen — ein Farbbalken quer über die Seite wäre schlimmer als kein Band. */ .band-alpen { display: none; position: relative; width: 100%; aspect-ratio: 2610 / 359; /* Iris, 11. August: „Bilder naeher zusammen." Die Ueberlappung war 14 %, dazwischen stand eine Stufe. Nach oben begrenzt ist der Wert nicht durch den Geschmack, sondern durch die Geometrie: eine negative Unterkante zieht das *folgende* Element hoch, sie macht das eigene nicht kuerzer. Das Alpenband bleibt also stehen, wo es steht, und ab einem gewissen Punkt ragt es unten aus dem Ortsband heraus — quer durch die Rechtszeile. Bei 26 % waren das rund 120 px. Gemessen bei 1440 px und 18 %: Alpen 644–842, Ortsband 590–838, Rechtszeile ab 838. Die Stufe ist zu, die Fusszeile ist frei, und die 4 px, die das Alpenband unten uebersteht, liegen hinter dem Grund des Ortsbands. Gemessen wird im **Ruhezustand**. `band-aufsteigen` laeuft 1400 ms mit translateY(14 %); wer frueher misst, misst die Animation. Genau daran bin ich einmal haengengeblieben und habe 31 px Ueberlappung gemeldet, die es nie gab. */ margin-block-end: -18%; color: var(--alpine); } .band-alpen__lage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: bottom center; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: bottom center; } .band-alpen__lage--1 { background-color: currentColor; background-color: color-mix(in srgb, var(--alpine) 54%, var(--paper)); mask-image: url("../img/band_alpen_1.1d330c78cc47.png"); -webkit-mask-image: url("../img/band_alpen_1.1d330c78cc47.png"); } .band-alpen__lage--2 { background-color: currentColor; background-color: color-mix(in srgb, var(--alpine) 43%, var(--paper)); mask-image: url("../img/band_alpen_2.37b8016907ff.png"); -webkit-mask-image: url("../img/band_alpen_2.37b8016907ff.png"); } .band-alpen__lage--3 { background-color: currentColor; background-color: color-mix(in srgb, var(--alpine) 33%, var(--paper)); mask-image: url("../img/band_alpen_3.c098f8537ef0.png"); -webkit-mask-image: url("../img/band_alpen_3.c098f8537ef0.png"); } .band-alpen__lage--4 { background-color: currentColor; background-color: color-mix(in srgb, var(--alpine) 24%, var(--paper)); mask-image: url("../img/band_alpen_4.8b684589586d.png"); -webkit-mask-image: url("../img/band_alpen_4.8b684589586d.png"); } @supports (mask-image: url("#a")) or (-webkit-mask-image: url("#a")) { .band-alpen { display: block; } } /* DIE TIEFENLEITER — 12. August, und sie ist der Grund, warum Iris die Kühe nicht sah. Damals stand das Alpenband auf 88 % — **derselbe Ton wie der Vordergrund des Ortsbandes**. Beide Bänder überlappen sich um 22 %, und in genau dieser Überlappung lagen die zwei Kühe. Eine dunkle Kuh vor einem gleich dunklen Matterhorn ist keine Kuh, sondern eine Ausbuchtung. Ihr Befund „die kühe die man nicht sieht" war also nicht die Maske, sondern die Farbe zweier Bänder, die je für sich richtig aussahen. Sieben Tiefen, eine Leiter, nah nach fern (seit dem 13. August mit dem Berner Band davor, Tag / Nacht): 88/48 Berner Band, Vordergrund — Wiese, Familie, Tiere, Lebensbaum 70/40 Berner Band, Stadt und mittlere Wiese 58/35 Berner Band, ferne Hügel 54/33 Alpen 1 — die vordere Kette, Alphütte, Steinbock 43/27 Alpen 2 33/22 Alpen 3 24/17 Alpen 4 — der hinterste Grat Die Regel gilt in beiden Modi mit **denselben** Verhältnissen, weil `color-mix(alpine N%, paper)` die Richtung selbst dreht: tags ist `--alpine` das Dunkle und weniger heisst heller; nachts ist es das Helle und weniger heisst dunkler. „Ferner" ist immer die kleinere Zahl. Nachts liegt die ganze Leiter tiefer, damit das Band leiser wird. */ @media (prefers-color-scheme: dark) { .band-alpen { color: color-mix(in srgb, var(--alpine) 33%, var(--paper)); } .band-alpen__lage--1 { background-color: color-mix(in srgb, var(--alpine) 33%, var(--paper)); } .band-alpen__lage--2 { background-color: color-mix(in srgb, var(--alpine) 27%, var(--paper)); } .band-alpen__lage--3 { background-color: color-mix(in srgb, var(--alpine) 22%, var(--paper)); } .band-alpen__lage--4 { background-color: color-mix(in srgb, var(--alpine) 17%, var(--paper)); } } :root[data-theme="dark"] .band-alpen { color: color-mix(in srgb, var(--alpine) 33%, var(--paper)); } :root[data-theme="dark"] .band-alpen__lage--1 { background-color: color-mix(in srgb, var(--alpine) 33%, var(--paper)); } :root[data-theme="dark"] .band-alpen__lage--2 { background-color: color-mix(in srgb, var(--alpine) 27%, var(--paper)); } :root[data-theme="dark"] .band-alpen__lage--3 { background-color: color-mix(in srgb, var(--alpine) 22%, var(--paper)); } :root[data-theme="dark"] .band-alpen__lage--4 { background-color: color-mix(in srgb, var(--alpine) 17%, var(--paper)); } :root[data-theme="light"] .band-alpen__lage--1 { background-color: color-mix(in srgb, var(--alpine) 54%, var(--paper)); } :root[data-theme="light"] .band-alpen__lage--2 { background-color: color-mix(in srgb, var(--alpine) 43%, var(--paper)); } :root[data-theme="light"] .band-alpen__lage--3 { background-color: color-mix(in srgb, var(--alpine) 33%, var(--paper)); } :root[data-theme="light"] .band-alpen__lage--4 { background-color: color-mix(in srgb, var(--alpine) 24%, var(--paper)); } /* DAS BERNER BAND — 13. August, Task #30: „Dichten, Fluss, Ecken, Lebensbaum, Tiere". Eine eigene Zeichnung als inline-SVG (web/templates/web/partials/band_bern.html, erzeugt von scripts/make_band_bern.py); sie ersetzt die vier band_ort-Masken aus AdobeStock_71615668. Iris' sechs COMPS vom 13. August waren der Motivauftrag — COMPS sind Wasserzeichen-Vorschauen und duerfen nach §9 nicht ausgeliefert werden, also wurde Bern selbst gezeichnet. Die Farben stehen HIER, nicht im SVG: jede Gruppe traegt eine .bb-*-Klasse, und die fill-/stroke-Attribute im SVG sind nur die Tag-Rueckfallwerte fuer Browser ohne Custom Properties (GERAETE_KOMPATIBILITAET §3 — die Kuer darf stumm ausfallen, dort bleibt das Band einfach in den Tagfarben). `fill: var(--alpine)` steht je einmal davor als Ersatz fuer Browser mit Variablen, aber ohne `color-mix`. Das Seitenverhaeltnis kommt aus dem Padding-Trick statt aus `aspect-ratio`: 450 / 2610 = 17.2414 %. So steht das Band auch auf Safari 12 und Android 5 in voller Hoehe. */ .band-bern { position: relative; width: 100%; margin-top: clamp(0.25rem, 0.5vw, 0.5rem); color: var(--alpine); } .band-bern::before { content: ""; display: block; padding-top: 17.2414%; } .band-bern svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } /* Die Tiefenleiter des Bandes, Tagwerte — siehe die Leiter beim Alpenband: front 88, mitte/stadt 70, fern 58; der Verlauf am unteren Rand endet auf 75, dem gemessenen Ton von .footer__boden, damit Wiese und Boden EINE Flaeche bleiben. */ .bb-fern { fill: var(--alpine); fill: color-mix(in srgb, var(--alpine) 58%, var(--paper)); } .bb-mitte { fill: var(--alpine); fill: color-mix(in srgb, var(--alpine) 70%, var(--paper)); } /* Die Stadt ist Strichzeichnung — duenne Linien wie in Iris' Vorlagen — und teilt den Ton der mittleren Tiefe, auf der sie steht. */ .bb-stadt { stroke: var(--alpine); stroke: color-mix(in srgb, var(--alpine) 70%, var(--paper)); } .bb-front, .bb-baum { fill: var(--alpine); fill: color-mix(in srgb, var(--alpine) 88%, var(--paper)); } .bb-voegel { stroke: var(--alpine); stroke: color-mix(in srgb, var(--alpine) 88%, var(--paper)); } .bb-grad-front { stop-color: var(--alpine); stop-color: color-mix(in srgb, var(--alpine) 88%, var(--paper)); } .bb-grad-boden { stop-color: var(--alpine); stop-color: color-mix(in srgb, var(--alpine) 75%, var(--paper)); } /* Die Aare — das eine Element des Bandes mit eigener Farbe: Care-Blau am Tag, das Nachtwasserblau in der Nacht (Wasser ist das Leitmotiv des Nachtmodus — Register §4). Token in den :root-Bloecken. */ .bb-fluss { fill: var(--aare); } /* Tag und Nacht: die Sonne gehoert dem Tag, Mond und Sternschnuppe der Nacht. --gold traegt beides — Gold am Tag, Silber in der Nacht („GOLD BLEIBT TAGESMODUS UND SILBER NACHTMODUS", 12. August). Die Nacht ist per Vorgabe verborgen: Browser ohne prefers-color-scheme zeigen den Tag, nie beides. */ .bb-tag { fill: var(--gold); } .bb-tag-strahlen { stroke: var(--gold); fill: none; } .bb-nacht { display: none; fill: var(--gold); } .bb-nacht-schweif { stroke: var(--gold); fill: none; } /* ZWEI BEWEGUNGEN, BEIDE LEISE — uebernommen vom alten Band (Iris, 12. August: „wenn moeglich sogar noch mit ein paar annimationen"). Die Voegel ziehen 1,1 % der Bandbreite in 54 Sekunden hin und zurueck; der Lebensbaum atmet 0,22 Grad um seinen Stammfuss (transform-box: fill-box legt den Drehpunkt an die Gruppe, nicht an die Zeichenflaeche). Beides nur unter data-motion="full" — das setzt site.js, und nur wenn der Ruhemodus aus ist UND prefers-reduced-motion nichts anderes sagt. */ @keyframes band-voegel-ziehen { from { transform: translate3d(-0.55%, 0.25%, 0); } to { transform: translate3d(0.55%, -0.25%, 0); } } @keyframes band-baum-atmen { from { transform: rotate(-0.22deg); } to { transform: rotate(0.22deg); } } :root[data-motion="full"] .bb-voegel { animation: band-voegel-ziehen 54s ease-in-out infinite alternate; will-change: transform; } /* Die Atmung liegt auf der inneren Gruppe .bb-atmen, nicht auf .bb-baum: eine CSS-Animation von `transform` ersetzt das transform-ATTRIBUT desselben Elements — auf der aeusseren Gruppe wuerde der Baum sein translate(1305 …) verlieren und am linken Rand stehen. Gemessen beim ersten Einbau am 13. August: der Baum war im Vorschaubild schlicht weg. */ :root[data-motion="full"] .bb-atmen { transform-box: fill-box; transform-origin: 50% 100%; animation: band-baum-atmen 13s ease-in-out infinite alternate; will-change: transform; } @media (prefers-reduced-motion: reduce) { :root[data-motion="full"] .bb-voegel, :root[data-motion="full"] .bb-atmen { animation: none; } } /* Nachts kehrt sich die Richtung um, und das ist keine Feinheit, sondern der Grund, warum hier drei Bloecke stehen statt einem. `color-mix(alpine N%, paper)`: tags ist `--alpine` das Dunkle und `--paper` die Creme, also heisst mehr Alpine dunkler. Nachts ist `--alpine` ein helles Schiefer und `--paper` fast schwarz — dort heisst mehr Alpine heller, und „ferner" ist die kleinere Zahl in beiden Faellen. Der Verlauf endet auch nachts auf 75 — dem Wert des Bodens, an dem die gemessene Lesbarkeit der Rechtszeile haengt. */ @media (prefers-color-scheme: dark) { .bb-fern { fill: color-mix(in srgb, var(--alpine) 35%, var(--paper)); } .bb-mitte { fill: color-mix(in srgb, var(--alpine) 40%, var(--paper)); } .bb-stadt { stroke: color-mix(in srgb, var(--alpine) 40%, var(--paper)); } .bb-front, .bb-baum { fill: color-mix(in srgb, var(--alpine) 48%, var(--paper)); } .bb-voegel { stroke: color-mix(in srgb, var(--alpine) 48%, var(--paper)); } .bb-grad-front { stop-color: color-mix(in srgb, var(--alpine) 48%, var(--paper)); } .bb-grad-boden { stop-color: color-mix(in srgb, var(--alpine) 75%, var(--paper)); } .bb-tag { display: none; } .bb-nacht { display: block; } } :root[data-theme="dark"] .bb-fern { fill: color-mix(in srgb, var(--alpine) 35%, var(--paper)); } :root[data-theme="dark"] .bb-mitte { fill: color-mix(in srgb, var(--alpine) 40%, var(--paper)); } :root[data-theme="dark"] .bb-stadt { stroke: color-mix(in srgb, var(--alpine) 40%, var(--paper)); } :root[data-theme="dark"] .bb-front, :root[data-theme="dark"] .bb-baum { fill: color-mix(in srgb, var(--alpine) 48%, var(--paper)); } :root[data-theme="dark"] .bb-voegel { stroke: color-mix(in srgb, var(--alpine) 48%, var(--paper)); } :root[data-theme="dark"] .bb-grad-front { stop-color: color-mix(in srgb, var(--alpine) 48%, var(--paper)); } :root[data-theme="dark"] .bb-grad-boden { stop-color: color-mix(in srgb, var(--alpine) 75%, var(--paper)); } :root[data-theme="dark"] .bb-tag { display: none; } :root[data-theme="dark"] .bb-nacht { display: block; } :root[data-theme="light"] .bb-fern { fill: color-mix(in srgb, var(--alpine) 58%, var(--paper)); } :root[data-theme="light"] .bb-mitte { fill: color-mix(in srgb, var(--alpine) 70%, var(--paper)); } :root[data-theme="light"] .bb-stadt { stroke: color-mix(in srgb, var(--alpine) 70%, var(--paper)); } :root[data-theme="light"] .bb-front, :root[data-theme="light"] .bb-baum { fill: color-mix(in srgb, var(--alpine) 88%, var(--paper)); } :root[data-theme="light"] .bb-voegel { stroke: color-mix(in srgb, var(--alpine) 88%, var(--paper)); } :root[data-theme="light"] .bb-grad-front { stop-color: color-mix(in srgb, var(--alpine) 88%, var(--paper)); } :root[data-theme="light"] .bb-grad-boden { stop-color: color-mix(in srgb, var(--alpine) 75%, var(--paper)); } :root[data-theme="light"] .bb-tag { display: block; } :root[data-theme="light"] .bb-nacht { display: none; } /* --- Footer ------------------------------------------------------------- */ .footer { /* Unten null — seit dem 7. August trägt der farbige Boden (.footer__boden) das Ende der Seite selbst. OBEN KLEINER seit dem 20. August: dort stand bis heute der Text, und Text braucht Anlauf. Jetzt steht dort die **Landschaft** (Iris: «Das Unterhalb der Aare»), und ein Bild braucht keinen — es ist selbst der Übergang. Ganz auf null geht es trotzdem nicht: ohne jeden Steg stösst der Himmel des Bandes hart an den letzten Abschnitt der Seite. */ padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--line); background: var(--paper-sunk); font-size: var(--t-small); color: var(--ink-2); } /* DER TEXTTEIL TRÄGT SEINEN ABSTAND SELBST — seit er unter der Aare steht. Vorher erbte er ihn vom Fuss (dessen oberer Steg); jetzt liegt zwischen ihm und der Aare-Linie nichts mehr, was Luft machen würde, und unter ihm beginnt der farbige Boden mit der Rechtszeile. Unten weniger als oben, und das ist Absicht: die Rechtszeile bringt ihren eigenen Abstand mit (`margin-top` an `.footer__legal`), zwei volle Abstände nacheinander läsen sich als Loch — dasselbe, das im Raster gerade beseitigt wurde. */ .footer__text { padding-block: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem); } /* FUENF SPALTEN, NICHT VIER — seit dem 15. August steht die Visitenkarte im Raster (Herleitung bei `.visitenkarte`). Die Mindestbreite ist deshalb gerechnet, und zwar am **Innenmass der Shell**: 1080 px, nicht an ihrer Aussenbreite von 1240. Bei fuenf Spalten zu 11 rem = 176 px und vier Luecken zu 2 rem = 128 px stehen 1008 px im Raum, also passen sie mit Luft. Zwei Versuche davor gingen daneben, beide mit demselben Fehler: 14 rem (der alte Wert) und 12 rem ergeben 1248 bzw. 1088 px und damit **vier** Spalten — die Karte fiel auf eine eigene Zeile und spannte ueber die ganze Breite. Genau so sah es aus, zweimal. Darunter greift `auto-fit` wie bisher und bricht auf drei, zwei, eine Spalte. */ .footer__grid { display: grid; gap: clamp(1.5rem, 3vw, 2rem); /* Altgeräte: Raster ohne min(). */ grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); } /* DIE NOTFALLNUMMERN MITTIG — Iris, 16. August: „let's center emergeny phones". Der einzige Block im Fuss, den man nicht liest, sondern sucht. Deshalb ist die Mitte hier richtig und zwei Zentimeter weiter unten falsch: die Grenzen-Erklärung daneben ist Fliesstext, und zentrierter Fliesstext fängt jede Zeile an einer anderen Kante an — genau die Suche, die dieses Publikum nicht leisten soll. Drei Zeilen aus drei Ziffern haben dieses Problem nicht. Sie sind eine Tafel. `list-style: none` mit `padding-inline-start: 0` gehört dazu und ist nicht Kosmetik: eine zentrierte Liste mit hängenden Punkten hat zwei Achsen, die Punkte links und den Text in der Mitte, und liest sich dann schief. Die Aufzählung bleibt im Markup eine `<ul>` — ein Vorleseprogramm sagt weiterhin „Liste, drei Einträge" an. */ .footer__notfall { text-align: center; } .footer__notfall ul { list-style: none; padding-inline-start: 0; margin-inline: auto; } /* DIE NUMMER FETT — Iris, 16. August: „Die Notnummern fett und/oder centrieren." Zentriert war sie seit dem Morgen; fett war die Nummer im Markup schon immer (`<strong>`), nur trug `<strong>` hier die Schriftschnitt-Vorgabe des Browsers gegen den Fliesstext daneben — bei dieser Schriftgrösse ein Unterschied, den man messen, aber nicht sehen kann. 700 gegen 400 ist der Unterschied, den man sieht. `font-variant-numeric: tabular-nums` gehört dazu und ist der eigentliche Punkt: 144, 112 und 143 stehen dann Ziffer über Ziffer statt in drei verschieden breiten Zeilen. Erst dadurch wird aus drei Aufzählungspunkten eine Tafel, auf der man die gesuchte Zeile findet, ohne sie zu lesen. Grösse und Farbe bleiben, wie sie waren. Fett ist kein Farbwert, also bleibt jede Kontrastmessung dieser Seite gültig — und die Nummer wird nicht grösser, weil daneben in derselben Zeile das Wort steht, das sagt, wen man da anruft. Wächst die Ziffer, wächst der Abstand zu ihm. */ .footer__notfall li { font-variant-numeric: tabular-nums; } .footer__notfall li strong { font-weight: 700; letter-spacing: 0.01em; } /* --- DIE VISITENKARTE --------------------------------------------------- Iris, 13. August: „A FINAL BUSINESS CARD AS THE THING ONE REMEMBERS MOST LAST." Das letzte Inhaltsstück vor der Landschaft: eine Karte, wie man sie in die Hand gedrückt bekommt. Navy mit Goldrand — die Farben ihrer gedruckten Karte (Quellmaterial vom 2. August) und die navy-primary-Richtung vom 31. Juli. Alle Textfarben sind die bereits GEMESSENEN Paare der tiefen Flächen: #f4f8f3, --gold-on-deep und --ink-2-on-deep auf --deep-2 tragen jede Prüfung dieser Website seit dem 30. Juli. Keine neue Farbe, keine neue Messung. Die Masse einer Visitenkarte sind kein Zufall: 85 × 55 mm ist das Verhältnis 1,55:1. Bei 24 rem Breite ergäbe das eine zu niedrige Karte für fünf Zeilen Inhalt — die Karte ist deshalb hochformatig gedacht, wie man sie überreicht bekommt: das Zeichen oben, die Wege unten. */ /* --- UMBAU 13. AUGUST, ABENDS ------------------------------------------- Iris: „das mit der Fusszeile kannst du besser." Drei Ursachen, nicht drei Geschmacksfragen: 1 · DIE KARTE WAR AM TAG EIN SCHWARZER KLOTZ. Navy auf Creme, mitten in der hellsten Fläche der Seite — das schwerste Element der ganzen Website stand im Fuss. Der Fehler war, die Farben der GEDRUCKTEN Karte wörtlich zu nehmen: Iris' Karte ist navy, weil Papier weiss ist und der Druck die Farbe trägt. Am Bildschirm ist das Papier schon da. Also trägt die Karte jetzt das, was eine überreichte Karte trägt — helles Papier, Goldlinie, navy Schrift — und kehrt sich erst in der Nacht um. Dieselbe Karte, nicht zwei; nur wer den Grund stellt, wechselt. 2 · DIE KARTE STAND AUF DEM LEBENSBAUM. Das Alpenband zieht sich mit negativem Rand hoch, und die Karte hatte darunter keinen Raum reserviert — der Baum auf dem Nullpunkt (Register §3), das einzige Motiv, das nie verdeckt werden darf, verschwand zur Hälfte hinter ihr. `margin-bottom` ist die Reservierung. 3 · Die Farbpaare bleiben die gemessenen: auf Papier `--ink` und `--ink-2`, auf `--deep-2` weiterhin `#f4f8f3` und `--ink-2-on-deep`. Gold trägt in keiner Fassung Text — es ist Rand und Prägestrich, sonst nichts. Der Name steht am Tag in `--deep-2` auf `--paper`, dem Paar der Überschriften dieser Website. Die Masse einer Visitenkarte sind kein Zufall: 85 × 55 mm ist 1,55:1. Bei 24 rem Breite ergäbe das eine zu niedrige Karte für fünf Zeilen — sie ist deshalb hochformatig gedacht, wie man sie überreicht bekommt. */ /* --- UMBAU 15. AUGUST: DIE KARTE WIRD DIE FUENFTE SPALTE ----------------- Iris: „if we cant fix the footer we can work on annimating attached", dazu elf weitere Entwuerfe. Der Satz klingt nach Aufgeben, und genau deshalb war er der nuetzlichste des Tages: er sagt, dass die Fusszeile noch immer nicht stimmt. Im Bild gemessen war auch klar, warum — **die Karte stand mittig unter den vier Spalten**, allein auf einer Zeile, mit rund 500 Punkten Leere links und rechts. In JEDEM ihrer sieben Fussband-Entwuerfe sitzt sie dagegen **rechts als fuenfte Spalte**. Also genau das: die Karte zieht ins Raster. Damit verschwindet die Leerzeile, der Fuss wird um ihre ganze Hoehe kuerzer, und die vier Textspalten stehen mit ihr auf einer Linie. Der eigene Aussenrand faellt weg (das Raster setzt die Abstaende), die Breitenbegrenzung auch — eine Rasterspalte ist so breit wie ihre Schwestern. Die doppelte Goldgravur wird EINE Linie. Zwei Raender plus Schlagschatten waren als einzelnes Stueck auf einer leeren Zeile stimmig; in einer Reihe mit vier randlosen Spalten ist es das schwerste Element und zieht das Auge von den Notfallnummern weg. Eine Linie genuegt, um „Karte" zu sagen. Die Farbpaare bleiben die gemessenen. */ .visitenkarte { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1rem, 2vw, 1.4rem); text-align: center; background: var(--paper); color: var(--ink); border: 1px solid rgb(178 142 58 / 55%); border-radius: 6px; } /* Nachts kehrt sie sich um: dann ist der Grund dunkel, und die Karte darf die Farben der gedruckten sein. Erst die Systemvorgabe, dann die ausdrückliche Wahl — dieselbe Reihenfolge wie überall in dieser Datei. */ @media (prefers-color-scheme: dark) { .visitenkarte { background: var(--deep-2); color: #f4f8f3; border-color: rgb(221 188 107 / 55%); } } :root[data-theme="dark"] .visitenkarte { background: var(--deep-2); color: #f4f8f3; border-color: rgb(221 188 107 / 55%); } :root[data-theme="light"] .visitenkarte { background: var(--paper); color: var(--ink); border-color: rgb(178 142 58 / 55%); } /* DIE KARTE LIEGT AB 48 rem — Iris, 19. August: „Karte legen + entdoppeln". Sie stand als fünfte Spalte im Raster und war mit 415 px dreimal so hoch wie ihre vier Nachbarn (89 / 119 / 100 / 136). Weil die höchste Zelle die Zeilenhöhe setzt, standen darunter **283 px Leere** — das, was Iris im Foto gesehen hat. Jetzt ist sie kein Rasterkind mehr, sondern liegt darunter: Zeichen links, Angaben rechts. Gerechnet: Zeichen 72 · Marke 21 · Claim 21 · Wege zwei Zeilen ~56 · Innenabstand 2 × 22 = **~160 statt 415 px**. `margin-inline-start: auto` hält sie am rechten Rand, wo sie seit dem 15. August steht — eine Karte, die man zuletzt sieht, wandert nicht in die Mitte, nur weil sie sich hinlegt. `max-width` deckelt sie auf Kartenmass; ohne Deckel würde sie über die ganze Schale gezogen, und genau so ist sie hier zweimal gescheitert (Herleitung bei `.footer__grid`). Der Aussenabstand ist derselbe wie der Rasterabstand darüber, damit sie als nächste Zeile liest und nicht als angehängtes Stück. */ .visitenkarte { margin-top: clamp(1.5rem, 3vw, 2rem); } .visitenkarte__zeichen img { width: 4.5rem; height: 4.5rem; object-fit: contain; } .visitenkarte__marke { margin: 0.35rem 0 0; font-family: Archivo, system-ui, sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; } .visitenkarte__claim { margin: 0; max-width: 30ch; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); } /* Die Goldlinie zwischen Versprechen und Mensch — schmal, mittig, wie der Prägestrich auf der Karte. */ .visitenkarte__person { margin: 0.85rem 0 0; padding-top: 0.85rem; position: relative; } .visitenkarte__person::before { content: ""; position: absolute; top: 0; left: 50%; width: 3.5rem; margin-left: -1.75rem; border-top: 1px solid rgb(178 142 58 / 50%); } /* Der Name traegt am Tag Navy auf Papier — das Paar der Ueberschriften dieser Website, laengst gemessen. Gold auf Creme waere die naheliegende Uebertragung der gedruckten Karte und faellt genau deshalb aus: es misst unter 3:1 und der Name ist ein Link, kein Schmuck. */ .visitenkarte__person a { color: var(--deep-2); font-weight: 600; text-decoration: none; } .visitenkarte__person a:hover, .visitenkarte__person a:focus-visible { text-decoration: underline; } .visitenkarte__wege { margin: 0.35rem 0 0; padding: 0; list-style: none; font-size: var(--t-small); line-height: 1.7; } .visitenkarte__wege a { color: inherit; text-decoration: none; } .visitenkarte__wege a:hover, .visitenkarte__wege a:focus-visible { text-decoration: underline; } @media (min-width: 48rem) { .visitenkarte { flex-direction: row; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem); text-align: left; max-width: 42rem; margin-inline-start: auto; } /* ÜBER DIE GANZE BREITE, ab dort wo drei Spalten darüber stehen — Iris, 20. August: «schönes Layout». Mit 42 rem am rechten Rand blieb links davon ein leeres Rechteck von gemessen rund 580 × 250 px: drei kurze Spalten oben, eine Karte unten rechts, dazwischen nichts. Über die volle Breite gezogen ist die Karte ein **Briefkopf** — Zeichen und Marke links, die Wege rechts — und das Loch existiert nicht mehr, statt nur kleiner zu sein. ~~Eine vollbreite Karte ist hier zweimal gescheitert~~ — das stimmt und meint etwas anderes: dort wurde eine STEHENDE Karte (Zeichen oben, Text zentriert, 400 px hoch) auf die ganze Breite gedehnt. Eine liegende von 90 px Höhe ist kein gedehntes Hochformat, sondern eine andere Form. */ .footer__text .visitenkarte { max-width: none; margin-inline: 0; } /* Die zweite Spalte der liegenden Karte. Beide Werte sind gemessene Korrekturen, keine Vorsichtsmassnahmen: `flex: 1` — ohne Wachstum blieb die Spalte **237 px breit in einer 672 px breiten Karte**, weil ihr breitestes Kind der Claim mit seinen 30ch ist. Die Wege standen dann fünf Zeilen hoch untereinander und die Karte war 297 statt 160 px hoch: die Höhe, die eben abgebaut wurde, kam durch die Hintertür zurück. `min-width: 0` — ein Flex-Kind hat als Grundmass seinen Inhalt und würde die längste Adresse sonst über die Karte hinausschieben, statt sie umbrechen zu lassen. */ .visitenkarte__inhalt { flex: 1; min-width: 0; } /* Der Claim darf in der liegenden Karte breiter laufen. Die 30ch sind für die STEHENDE Karte gerechnet (eine Rasterspalte von 190 px); quer gelesen sind sie eine künstliche Fessel, die die ganze Spalte schmal hält. 46ch bleibt unter der Lesegrenze von ~80 Zeichen. */ .visitenkarte__claim { max-width: 46ch; } /* Die Wege stehen nebeneinander statt untereinander — fünf Zeilen wären wieder die Höhe, die eben abgebaut wurde. Der Zeilenabstand von 0,2 rem bleibt klein, der Spaltenabstand trägt die Trennung. Die Trefferflächen bleiben unangetastet: `padding-block: 0.3rem` an den Links steht weiter oben und gilt hier genauso. */ /* `.footer .visitenkarte__wege` und nicht `.visitenkarte__wege` allein: weiter unten steht `.footer ul { display: grid }` — Spezifität (0,1,1) gegen (0,1,0). Der erste Wurf hier verlor still gegen diese Zeile, und die Wege standen weiter fünfzeilig untereinander. Eine Medienabfrage erhöht die Spezifität nicht; nur der Selektor tut es. */ .footer .visitenkarte__wege { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; } /* Marke, Versprechen und Wege stehen im Briefkopf NEBENEINANDER auf einer Grundlinie; die Wege werden mit `auto` an den rechten Rand geschoben. `baseline` und nicht `center`: die drei sind verschieden gross, und was man als Zeile liest, sind ihre Schriftfüsse, nicht ihre Mitten. */ .footer__text .visitenkarte__inhalt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: clamp(1rem, 2.5vw, 2rem); row-gap: 0.35rem; } .footer__text .visitenkarte__inhalt > .visitenkarte__marke, .footer__text .visitenkarte__inhalt > .visitenkarte__claim { margin-top: 0; } /* ~~`margin-inline-start: auto`~~ — der erste Wurf schob die Wege an den rechten Rand. Solange alles in eine Zeile passt, sieht das gut aus; sobald es umbricht — und bei fünf Wegen bricht es —, steht die zweite Zeile rechtsbündig unter einer linksbündigen ersten, und die Karte hat zwei Anfangskanten. Ohne die Regel beginnt die zweite Zeile unter der Marke, wo das Auge sie sucht. */ .footer__text .visitenkarte__wege { flex-basis: 100%; } } /* Nachts kehren die drei Schriftfarben mit dem Grund um — dieselben Werte, die die Karte bis heute den ganzen Tag ueber trug. */ @media (prefers-color-scheme: dark) { .visitenkarte__claim { color: var(--ink-2-on-deep); } .visitenkarte__person::before { border-top-color: rgb(221 188 107 / 45%); } .visitenkarte__person a { color: var(--gold-on-deep); } } :root[data-theme="dark"] .visitenkarte__claim { color: var(--ink-2-on-deep); } :root[data-theme="dark"] .visitenkarte__person::before { border-top-color: rgb(221 188 107 / 45%); } :root[data-theme="dark"] .visitenkarte__person a { color: var(--gold-on-deep); } :root[data-theme="light"] .visitenkarte__claim { color: var(--ink-2); } :root[data-theme="light"] .visitenkarte__person::before { border-top-color: rgb(178 142 58 / 50%); } :root[data-theme="light"] .visitenkarte__person a { color: var(--deep-2); } .footer h2 { margin: 0 0 0.6rem; font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; } .footer a { text-underline-offset: 3px; } /* --- Zielgroesse im Fuss ------------------------------------------------ ~~Ein echter WCAG-Verstoss.~~ — **KORRIGIERT AM SELBEN ABEND, und der Fehler war meiner.** Ich hatte bei 320 px acht Ziele unter 24 px gemessen und das als Verstoss gegen WCAG 2.2 §2.5.8 gemeldet. **Die Zahl stimmte, das Urteil nicht.** §2.5.8 kennt vier Ausnahmen, und zwei davon greifen hier: * **Abstand** — ein kleines Ziel genuegt, wenn ein Kreis von 24 px Durchmesser um seine Mitte kein anderes Ziel schneidet. * **Inline** — ein Link mitten in einem Satz ist ausgenommen. Nachgerechnet mit der Ausnahme (siehe `scripts/check_mobile.py`, das sie seit heute kennt): **kein einziger dieser acht Links war ein Verstoss.** Die Rechtszeile hat genug Luft, die Adressen im Fliesstext sind inline. DIE REGEL BLEIBT TROTZDEM STEHEN, und zwar aus einem anderen Grund als dem, aus dem sie entstand: konform heisst nicht bequem. Eine Telefonnummer, die man mit zittriger Hand trifft, ist auf dieser Website kein Detail — sie ist der Weg nach draussen. 24 px erreichen sie jetzt aus eigener Kraft, statt sich auf den Abstand zu ihren Nachbarn zu verlassen. Was hier stand, war gemessen und trotzdem falsch. Eine Zahl ohne die Regel, zu der sie gehoert, ist eine Behauptung. hallo@carejourney.ch 126 x 15 +41 78 622 39 66 107 x 15 Eventkarte 64 x 15 Barrierefreiheit 82 x 13 Impressum 59 x 13 Datenschutz 66 x 13 Die gemessenen Hoehen — als Ausgangslage, nicht als Anklage. `padding-block` statt `min-height`: an einem Inline-Element wirkt eine Mindesthoehe nicht, ein Innenabstand schon. `display: inline-block`, damit der Abstand die Trefferflaeche wirklich vergroessert. Gefunden hat es `scripts/check_mobile_city.py` auf der Reisedomain, die diesen Fuss seit heute mitbenutzt. Ein geteilter Bestandteil wird von beiden Seiten geprueft — das ist der Nebenertrag des Teilens, und er ist hier groesser als die Ersparnis. */ .footer ul a, .visitenkarte__wege a, .footer__legal a { display: inline-block; padding-block: 0.3rem; } .footer__legal { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; font-size: 0.82rem; color: var(--ink-3); } /* Der Boden unter dem Rasen — Iris, 7. August: „Bei den Füssen auch die Farbe weiterziehen und eine Farbe für den Text wählen, so dass man ihn wieder sehen kann." Der Text darauf in Papierfarbe, gemessen: **6,24:1**. Erst der volle Wert für Browser ohne color-mix, dann die Mischung. DIES IST DIE TAGFASSUNG. Die Nacht steht weiter unten und geht seit dem 16. August einen eigenen Weg — Begründung dort. ~~Dieselbe Mischung wie das Band selbst, damit Rasen und Grund EINE Fläche werden (die Bandfarbe steht drei Regeln weiter oben — wer sie ändert, ändert beide).~~ **Diese Kopplung ist seit dem 16. August tot**, und das ist der Grund, aus dem der Fuss nachts kippte, ohne dass jemand ihn anfasste: an jenem Tag wurde das gezeichnete Band durch ein BILD ersetzt (`fussband_standard_*`, scripts/make_fussband.py). Die Regeln „drei weiter oben" (`.bb-*`) zeichnen das alte Band, das kein Template mehr rendert. Boden und Band waren ab da zwei Flächen, die niemand mehr gegeneinander gemessen hat. Wer das gezeichnete Band zurückholt — laut Übergabe „eine Zeile" —, misst beide neu gegeneinander, statt sich auf diesen Satz zu verlassen. ~~Nacht dunkles Papier auf Silberslate ≈ 7:1 — die Paarung kehrt sich mit dem Theme von selbst um.~~ Sie kehrte sich um, und genau darin lag der Fehler; die Zahl stimmte nie (12. August: 3,99:1, dann 5,29:1). */ .footer__boden { /* TAG: CREME — Iris, 17. August, OQ-76 entschieden: «je nach Modus am Tag hell (Creme), für die Nacht Navy, aber beide sollen zu den Kopf- und Fussbildern passen.» Die Slate-Mischung vom 7. August ist damit abgelöst; paper-sunk ist die Creme, die die Seite schon als vertiefte Fläche kennt. Tinten gemessen: ink 10,2:1, ink-2 6,5:1, ink-3 5,4:1 — die 5,0-Schwelle hält. Die Nacht bleibt --deep (16. August, unverändert). */ background: var(--paper-sunk); color: var(--ink); } /* ~~NACHTS AUCH 75 % — Mic, 12. August: „Dann sind Ansichten auf dem Handy heller Hintergrund mit grauer Schrift unlesbar."~~ ~~Er hat recht, und es ist genau eine Stelle: der Fussboden im Nachtmodus. Gemessen bei 390 px, auf jeder Seite: dunkles Papier (#0a1420) auf Silberslate (rgb 92/119/147) = **3,99:1** gegen verlangte 4,5. 62 auf 75 Prozent hebt ihn auf **5,29:1**.~~ ÜBERHOLT AM 16. AUGUST, und die Begründung bleibt stehen, weil sie zeigt, wie der Fehler entstand. Mics Befund war richtig, seine Abhilfe war richtig gerechnet — und beide arbeiteten INNERHALB einer Umkehrung, die niemand entschieden hatte. Die 5,29:1 stimmten; die Fläche, an der sie gemessen wurden, gehörte dort nicht hin. DER BEFUND, gemessen am 16. August bei 1440 px auf der Startseite: | | Boden | grau | zum Seitengrund | Text | Kontrast | |---|---|---|---|---|---| | Tag | rgb(74,92,109) | 89 | **−154** | Creme | 6,24:1 | | Nacht | rgb(110,140,171) | 136 | **+117** | dunkel | 5,29:1 | Der Boden kehrt sich mit dem Theme nicht nur um, er kippt auf die falsche Seite: am Tag liegt er 154 Graustufen UNTER dem Seitengrund, nachts 117 darüber. Die Seite endet im Nachtmodus im hellsten Streifen, den sie hat — und das Hellste auf einer Seite ist da, wo das Auge zuletzt hängen bleibt. Dort steht das Kleingedruckte. DIE URSACHE ist ein Token, nicht eine Zahl. `--alpine` ist eine TINTE und dreht darum mit dem Theme (Tag #102a43, nachts #8fb4d9) — richtig für Striche auf dem jeweiligen Grund, falsch als FLÄCHE, denn eine Fläche, die mitdreht, wird nachts hell. Kein Prozentwert repariert das: 75 % einer umgekehrten Farbe ist wieder umgekehrt. WAS STATTDESSEN GILT — und es ist keine neue Farbe. Nachts trägt der Boden `--deep` mit `--ink-on-deep`: dasselbe gemessene Paar (30. Juli), das seit dem 16. August der Kopfbalken trägt. Damit steht dieselbe tiefe Fläche oben und unten, in beiden Fassungen dunkel, und die Seite ist gerahmt statt am Ende aufgehellt. Nacht neu: #0f2947, grau 38, **+19** zum Seitengrund, Text #e6edf4 → **12,45:1** (vorher 5,29). Die schwächste Zeile im Fuss, der Bildhinweis mit `opacity: .85`, kommt auf 9,41:1 (Tag 5,03:1). Bei hohem Kontrast in der Nacht: 12,45:1 statt bisher 5,62:1. Nachts hebt sich der Boden also nach OBEN vom Grund ab statt nach unten. Das ist kein Bruch mit dem Tag, sondern dieselbe Absicht in einem dunklen Raum: ein Nachtgrund liegt schon fast auf Schwarz, unter ihn führt kein Weg. DER TAG BLEIBT UNANGETASTET. Er ist gemessen, er ist seit dem 7. August so gewollt, und der Befund vom 16. August nennt ausdrücklich zwei NACHTfehler. Ob Tag und Nacht beide auf `--deep` gehen sollen — ein Vorschlag, keine Ausführung —, gehört Iris und steht als **OQ-76** in docs/OPEN_QUESTIONS.md. Bewacht von web/tests/test_fuss_nacht.py. */ @media (prefers-color-scheme: dark) { .footer__boden { background: var(--deep); color: var(--ink-on-deep); } } :root[data-theme="dark"] .footer__boden { background: var(--deep); color: var(--ink-on-deep); } /* Erzwungener Tag: dieselbe Creme wie oben. */ :root[data-theme="light"] .footer__boden { background: var(--paper-sunk); color: var(--ink); } .footer__boden .footer__legal { margin-top: 0; padding-block: 1.1rem clamp(0.75rem, 1.5vw, 1.25rem); border-top: 0; color: inherit; } .footer__boden .footer__legal a { color: inherit; } /* Der Bildhinweis ist ein Satz, keine Marke — Iris, 13. August: „das mit der Fusszeile kannst du besser." Er stand als fuenftes Element in derselben `space-between`-Reihe wie die drei Rechtslinks und die Copyright-Zeile. Fuenf ungleich lange Stuecke in einer verteilten Reihe ergibt bei jeder Fensterbreite einen anderen Umbruch, und beim letzten wurde aus dem Satz eine Zeile, die sich quer unter die Links legte. Er bekommt eine eigene Zeile ueber die volle Breite: `flex-basis: 100%` bricht ihn heraus, ohne die Reihenfolge im Markup zu aendern — Vorleseprogramme lesen weiter, was da steht. Etwas kleiner und mit Abstand nach oben, weil er das ist, was er ist: eine Fussnote unter der Fussnote. */ .footer__boden .footer__legal > span:last-child { flex-basis: 100%; margin-top: 0.35rem; font-size: 0.76rem; line-height: 1.55; opacity: 0.85; } /* --- Scroll reveal ------------------------------------------------------ */ /* The hidden pre-reveal state is opt-IN, gated on scripting actually being available. It used to be unconditional — `.reveal { opacity: 0 }` with the only way back being `.is-visible`, which site.js adds. That made eleven elements on the home page, and thirty-six across the templates, invisible whenever JavaScript did not run: blocked by a CSP mistake on a new host, a failed request, an extension, a corporate proxy. site.js's own header promises "with JavaScript off the page is complete, readable and navigable"; it was not, and only visitors with prefers-reduced-motion were spared, because that block happens to restore opacity. `scripting: enabled` is false without JS, and unsupported in older browsers — where the whole block is skipped and content simply stays visible. Both failure modes land on "readable", which is the only acceptable default for this audience. */ @media (scripting: enabled) { .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } } .reveal--d1 { transition-delay: 80ms; } .reveal--d2 { transition-delay: 160ms; } .reveal--d3 { transition-delay: 240ms; } /* --- View switching (single-page build) --------------------------------- */ .view { display: none; } .view.is-active { display: block; animation: view-in 520ms var(--ease) both; } @keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* --- Motion preferences ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } .reveal { opacity: 1; transform: none; } .hero__media img { transform: scale(1.02); } .station.is-visible .station__rule::after, .station__rule::after { transform: scaleY(1); } } /* --- Ambient motion — the Lebendig layer -------------------------------- Founder-requested 2026-07-30: "a bit more animation and fun", behind a visible toggle, trivially removable. Every rule here is scoped under :root[data-motion="full"], which ONLY site.js sets, and only when the Ruhemodus toggle is rendered (SITE_AMBIENT_MOTION on) and the person has not chosen quiet. So: no JS -> dormant; setting off -> dormant; toggle pressed -> dormant; prefers-reduced-motion -> dormant by default AND the global reduce block below caps any residue at 1ms. Deleting this section removes the layer with no other change. Design rule carried over from CLAUDE.md §6: nothing here carries meaning. The page is complete when all of it is off. */ /* Die Lichtpartikel fallen — Iris, 6. August: „ich glaube es wäre besser wenn die Lichtpartikel von oben nach unten fallen, so sieht das eher aus wie fallender Schnee." Vorher stiegen sie wie Samenflug in der Abendsonne; jetzt sinken sie wie Schnee, mit leichtem Seitenpendeln. Alles andere bleibt: verwischt, leise, sechs verschiedene Tempi, damit sich das Muster nie sichtbar wiederholt. */ .drift { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow: hidden; pointer-events: none; } .drift span { position: absolute; top: -3rem; display: none; width: 0.55rem; height: 0.55rem; border-radius: 999px; /* Schnee, nicht Gold — und in zwei Stärken (Iris, 7. August: „very light snow falling … For the night version we can do regular snow falling"). Die Flocken sind silbrig-weiss; am Tag fällt nur jede zweite, halb so deutlich, in der Nacht fallen alle sechs voll. Beide Werte kommen aus zwei Tokens, die das Theme setzt — die Handwahl schlägt die Systemeinstellung in beiden Richtungen. */ background: radial-gradient(circle at 35% 35%, #f6f9fc, rgb(206 220 236 / 60%) 60%, transparent 75%); opacity: 0; } :root[data-motion="full"] .drift span { display: block; animation: drift-fall 18s linear infinite; filter: blur(1px) opacity(var(--flocken-staerke, 0.5)); } :root[data-motion="full"] .drift span:nth-child(even) { display: var(--flocken-alle, none); } @media (prefers-color-scheme: dark) { :root { --flocken-staerke: 1; --flocken-alle: block; } } :root[data-theme="dark"] { --flocken-staerke: 1; --flocken-alle: block; } :root[data-theme="light"] { --flocken-staerke: 0.5; --flocken-alle: none; } /* Das Himmelsglitzern der Nacht — „and the sky glitter". Acht Punkte im oberen Bilddrittel, jeder mit eigenem Takt, nur nachts und nur unter Lebendig. Reine Dekoration, aria-hidden im Markup. */ .glitzer { position: absolute; top: 0; right: 0; bottom: 55%; left: 0; inset: 0 0 55% 0; overflow: hidden; pointer-events: none; } .glitzer span { position: absolute; display: none; width: 0.2rem; height: 0.2rem; border-radius: 999px; background: #eaf2fb; box-shadow: 0 0 6px 1px rgb(214 231 250 / 75%); opacity: 0.1; } @media (prefers-color-scheme: dark) { :root[data-motion="full"] .glitzer span { display: block; } } :root[data-theme="dark"][data-motion="full"] .glitzer span { display: block; } :root[data-theme="light"][data-motion="full"] .glitzer span { display: none; } :root[data-motion="full"] .glitzer span { animation: glitzern 4.6s ease-in-out infinite; } :root[data-motion="full"] .glitzer span:nth-child(1) { left: 9%; top: 28%; animation-duration: 5.2s; animation-delay: -1s; } :root[data-motion="full"] .glitzer span:nth-child(2) { left: 21%; top: 12%; animation-duration: 3.9s; animation-delay: -2.4s; } :root[data-motion="full"] .glitzer span:nth-child(3) { left: 38%; top: 34%; animation-duration: 6.1s; animation-delay: -0.6s; } :root[data-motion="full"] .glitzer span:nth-child(4) { left: 52%; top: 9%; animation-duration: 4.4s; animation-delay: -3.1s; } :root[data-motion="full"] .glitzer span:nth-child(5) { left: 66%; top: 24%; animation-duration: 5.7s; animation-delay: -1.8s; } :root[data-motion="full"] .glitzer span:nth-child(6) { left: 78%; top: 15%; animation-duration: 4.1s; animation-delay: -0.2s; } :root[data-motion="full"] .glitzer span:nth-child(7) { left: 88%; top: 33%; animation-duration: 6.4s; animation-delay: -2.9s; } :root[data-motion="full"] .glitzer span:nth-child(8) { left: 95%; top: 20%; animation-duration: 3.6s; animation-delay: -1.4s; } @keyframes glitzern { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.85; } } :root[data-motion="full"] .drift span:nth-child(1) { left: 12%; animation-duration: 21s; animation-delay: -3s; } :root[data-motion="full"] .drift span:nth-child(2) { left: 26%; width: 0.4rem; height: 0.4rem; animation-duration: 17s; animation-delay: -11s; } :root[data-motion="full"] .drift span:nth-child(3) { left: 47%; animation-duration: 25s; animation-delay: -7s; } :root[data-motion="full"] .drift span:nth-child(4) { left: 63%; width: 0.7rem; height: 0.7rem; filter: blur(2px); animation-duration: 19s; animation-delay: -15s; } :root[data-motion="full"] .drift span:nth-child(5) { left: 78%; animation-duration: 23s; animation-delay: -1s; } :root[data-motion="full"] .drift span:nth-child(6) { left: 90%; width: 0.45rem; height: 0.45rem; animation-duration: 16s; animation-delay: -9s; } @keyframes drift-fall { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 8% { opacity: 0.5; } 50% { transform: translate3d(1.4rem, 55vh, 0); opacity: 0.35; } 92% { opacity: 0.15; } 100% { transform: translate3d(-0.6rem, 105vh, 0); opacity: 0; } } /* The hero photograph breathes: a very slow drift-and-settle, 48s per pass, never enough to feel like movement — only enough to feel alive. */ :root[data-motion="full"] .hero__media img { animation: hero-breathe 48s var(--ease) infinite alternate; } @keyframes hero-breathe { from { transform: scale(1) translateY(0); } to { transform: scale(1.045) translateY(-0.6%); } } /* Station dots bloom once when their section arrives — a soft gold ring that grows and fades, like a drop landing. One iteration, then still. */ :root[data-motion="full"] .station.is-visible .station__dot { animation: dot-bloom 1100ms var(--ease) 200ms both; } @keyframes dot-bloom { 0% { box-shadow: 0 0 0 0 rgb(201 162 68 / 45%); } 60% { box-shadow: 0 0 0 0.7rem rgb(201 162 68 / 12%); } 100% { box-shadow: 0 0 0 1rem rgb(201 162 68 / 0%); } } /* Das Fussband steigt beim Ankommen einmal leise auf. Nur transform, keine Deckkraft: die trägt hier den Farbwert und ist je nach Modus verschieden — eine Animation darauf müsste den Zielwert kennen und ginge beim nächsten Umfärben schief. Die Höhenlinie davor zeichnete sich über stroke-dashoffset; eine Fläche kann das nicht, und eine Silhouette, die sich aufbaut, wäre ohnehin unruhiger als das, was hier gewollt ist. */ :root[data-motion="full"] .band-bern.is-visible { animation: band-aufsteigen 1400ms var(--ease) 120ms both; } @keyframes band-aufsteigen { from { transform: translateY(14%); } to { transform: translateY(0); } } /* DAS ZEICHEN UNTER DEM ZEIGER — dritte Fassung, 14. August. Erst drehte es sich (30°). Iris: „Instead on turning right when hovering over logo make it pop out" — und später, nachdem das Reveal-Video als Quelle ausschied (Storyboard, englische Titel, das ALTE Logo am Ende): „nur kurze video loop vom hände öffnen oder die strahlen oder im nachmodus der glizer." Einen Hände-öffnen-Loop gibt es im Bestand nicht; also ihre zwei anderen Nennungen, ohne Video und damit ohne Gewicht: TAGS DIE STRAHLEN — ein warmer Lichtkranz, der hinter dem Zeichen aufgeht und weich pulsiert. Kein Drehen: Licht dreht sich nicht. NACHTS DER GLITZER — kleine Funken, die um das Zeichen aufblinken, zeitversetzt, wie die Sterne im Fussband. Dazu das Pop-out, das sie zuerst wollte: das Zeichen kommt dem Zeiger leicht entgegen. Alles unter [data-motion="full"], Fokus gleichberechtigt (Tastatur sieht dasselbe), und im Ruhemodus passiert schlicht nichts. */ .wordmark { position: relative; } :root[data-motion="full"] .wordmark:hover .wordmark__mark, :root[data-motion="full"] .wordmark:focus-visible .wordmark__mark { transform: scale(1.12); } :root[data-motion="full"] .wordmark__mark { transition: transform 420ms var(--ease); } /* Der Lichtkranz (Tag): ein radialer Goldschein hinter dem Zeichen. */ .wordmark::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgb(201 162 39 / 45%) 0%, rgb(201 162 39 / 22%) 38%, transparent 68%); opacity: 0; pointer-events: none; z-index: -1; } :root[data-motion="full"] .wordmark:hover::before, :root[data-motion="full"] .wordmark:focus-visible::before { animation: zeichen-strahlen 1.9s ease-in-out infinite; } @keyframes zeichen-strahlen { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.06); } } /* Der Glitzer (Nacht): sechs Funken aus Verlaufs-Punkten, zeitversetzt. */ :root[data-theme="dark"] .wordmark::before { background: radial-gradient(circle 3px at 18% 26%, rgb(230 237 244 / 95%) 0 40%, transparent 60%), radial-gradient(circle 2px at 78% 18%, rgb(230 237 244 / 90%) 0 40%, transparent 60%), radial-gradient(circle 2.5px at 88% 62%, rgb(212 221 231 / 90%) 0 40%, transparent 60%), radial-gradient(circle 2px at 30% 84%, rgb(230 237 244 / 85%) 0 40%, transparent 60%), radial-gradient(circle 3px at 8% 66%, rgb(212 221 231 / 85%) 0 40%, transparent 60%), radial-gradient(circle 2px at 62% 90%, rgb(230 237 244 / 90%) 0 40%, transparent 60%), radial-gradient(circle, rgb(143 180 217 / 20%) 0%, transparent 62%); } :root[data-theme="dark"][data-motion="full"] .wordmark:hover::before, :root[data-theme="dark"][data-motion="full"] .wordmark:focus-visible::before { animation: zeichen-glitzer 1.4s ease-in-out infinite; } @keyframes zeichen-glitzer { 0%, 100% { opacity: 0.35; } 40% { opacity: 1; } 70% { opacity: 0.6; } } @media (prefers-reduced-motion: reduce) { .wordmark::before { animation: none !important; opacity: 0 !important; } .wordmark__mark { transition: none; } } /* --- Die Grok-Schicht ---------------------------------------------------- Iris, 2026-08-04: „Bitta alle Grok animationen einbauen." Übernommen ist alles aus den Prototypen, was ohne fremde Bibliothek auskommt (GSAP vom CDN scheitert am CSP — default-src 'self', und dabei bleibt es) und den §6-Satz übersteht: keine Bewegung um der Bewegung willen. Alles hier liegt unter [data-motion="full"], also hinter dem Lebendig-Schalter und automatisch still bei prefers-reduced-motion. Bewusst NICHT übernommen, damit es niemand still nachträgt: — Ambient-Sound: erst mit sichtbaren Reglern (nie Autoplay, WCAG 1.4.2); — Living Cursor: ein eigener Zeiger ist für motorisch oder visuell eingeschränkte Menschen eine Hürde, kein Schmuck; — Pin-Scrub-Sektionen: gekaperter Scroll desorientiert genau die Leserinnen, für die diese Website da ist. */ /* Lesefortschritt — die dünne Linie oben, aus dem Scrollstory-Prototyp. Reines CSS über die Scroll-Timeline; Browser ohne sie zeigen schlicht keine Linie, deshalb kein Fallback-Skript. */ @supports (animation-timeline: scroll()) { :root[data-motion="full"] body::before { content: ""; position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 60; background: linear-gradient(90deg, var(--gold), var(--forest)); transform-origin: 0 50%; transform: scaleX(0); animation: lesefortschritt linear both; animation-timeline: scroll(root); } } @keyframes lesefortschritt { to { transform: scaleX(1); } } /* Parallaxe im Kopf — der Pin-Scrub-Gedanke, auf sein harmloses Mass gebracht: das Bild wandert beim Scrollen um ein Zehntel mit, der Text bleibt, Tiefe entsteht. Auf dem Container, nicht auf dem Bild — das img trägt schon hero-breathe, und zwei Transform-Animationen auf demselben Element löschen einander aus. */ @supports (animation-timeline: view()) { :root[data-motion="full"] .hero__media { animation: kopf-parallaxe linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; } } @keyframes kopf-parallaxe { to { transform: translateY(10%); } } /* Hover-Tiefe auf den Karten — aus den Quietmode-Prototypen. Karten heben sich der Hand entgegen; Fokus bekommt dasselbe, Tastatur ist kein Nebeneingang. */ :root[data-motion="full"] .grid__cell, :root[data-motion="full"] .framework__item, :root[data-motion="full"] .principle { transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); } :root[data-motion="full"] .grid__cell:hover, :root[data-motion="full"] .grid__cell:focus-within, :root[data-motion="full"] .framework__item:hover, :root[data-motion="full"] .principle:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } /* Die Zeichen antworten auf die Hand — Morphing-Emblem-Prototyp, reduziert auf ein Atmen unter dem Zeiger statt einer Verwandlung. */ :root[data-motion="full"] .zeichen__feld:hover .marke-kreis, :root[data-motion="full"] .zeichen__feld:focus-within .marke-kreis { transform: scale(1.06); } :root[data-motion="full"] .marke-kreis { transition: transform 360ms var(--ease); } /* Tag-und-Nacht-Überblendung — aus dem Day/Night-Prototyp: der Wechsel der Darstellung gleitet, statt zu springen. Nur unter Lebendig; wer Ruhe gewählt hat, bekommt den sofortigen Wechsel. */ :root[data-motion="full"] body, :root[data-motion="full"] .header, :root[data-motion="full"] .band { transition: background-color 600ms var(--ease), color 600ms var(--ease); } /* Bildband-Reveal — Scroll-Story-Prototyp: die Bildbänder öffnen sich beim Hereinscrollen aus einer leichten Maske. Scroll-Timeline mit @supports; ohne Unterstützung steht das Bild einfach da. */ @supports (animation-timeline: view()) { :root[data-motion="full"] .bildband img { animation: bildband-auf linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; } } @keyframes bildband-auf { from { clip-path: inset(8% 4% 8% 4% round 2px); transform: scale(1.04); } to { clip-path: inset(0 0 0 0 round 0); transform: scale(1); } } /* Kinoartiger Einstieg — die Hero-Zeilen treten gestaffelt auf, einmal beim Laden. Kurz und einmalig; danach ist Ruhe. */ :root[data-motion="full"] .hero__inner > * { animation: auftritt 700ms var(--ease) both; } :root[data-motion="full"] .hero__inner > :nth-child(2) { animation-delay: 120ms; } :root[data-motion="full"] .hero__inner > :nth-child(3) { animation-delay: 240ms; } :root[data-motion="full"] .hero__inner > :nth-child(4) { animation-delay: 360ms; } :root[data-motion="full"] .hero__inner > :nth-child(5) { animation-delay: 480ms; } @keyframes auftritt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Goldschimmer über dem Haupt-Knopf unter der Hand — ein Lichtstreif, kein Blinken. Läuft genau einmal pro Hover. */ :root[data-motion="full"] .btn--gold { position: relative; overflow: hidden; } :root[data-motion="full"] .btn--gold::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 35%) 50%, transparent 70%); transform: translateX(-110%); } :root[data-motion="full"] .btn--gold:hover::after, :root[data-motion="full"] .btn--gold:focus-visible::after { animation: schimmer 900ms var(--ease) 1; } @keyframes schimmer { to { transform: translateX(110%); } } /* --- Footer: announced languages --------------------------------------- Iris asked that the site show other languages are coming (2026-08-01). The planned ones are deliberately not links: offering a language the site cannot serve is an availability claim, and the visitor who clicks it would land on German or a 404. Status is carried by the word, never by colour alone — the same rule the offer labels follow. Written with logical properties throughout so the block survives dir="rtl" unchanged, which the Arabic entry will need. */ /* Das Sprachmenü im Header — Iris, 2026-08-04: Dropdown im Header, nicht im Footer. Natives <details>, darum funktioniert es ohne JavaScript und mit jeder Tastatur; site.js hängt nur das Schliessen bei Klick daneben an. Die Reihe im Panel ist senkrecht — ein Menü liest sich als Liste, nicht als Zeile. */ .lang { position: relative; /* `display: grid` ist hier keine Layoutwahl, sondern die Reparatur einer gemessenen Schieflage: `<summary>` ist `inline-grid`, sass also in einer Zeilenbox, und die brachte dem `<details>` **3 px Unterlänge** mit. In der Zwölferkette (15. August) war die Sprachwahl damit das einzige Glied, das nicht auf der Linie sass — 2 px zu hoch, auf jeder Telefonbreite. Ein Rasterkasten hat keine Zeilenbox und damit keine Unterlänge; der Kreis ist wieder genau so hoch wie seine elf Nachbarn. */ display: grid; } .lang__knopf { list-style: none; cursor: pointer; } .lang__knopf::-webkit-details-marker { display: none; } .lang[open] .lang__knopf { color: var(--ink); border-color: var(--line-strong); } .lang__panel { position: absolute; /* AM LINKEN RAND DES KNOPFES, seit dem 14. August — Iris, mit Foto: „Sprachen laden zu linksbündig!" Abgeschnitten sichtbar war „RACHEN", „eutsch", „ançais". Es ist derselbe Fehler wie am 5. August auf dem Telefon, nur von der anderen Seite ausgelöst: damals sass der Knopf zu weit rechts, heute sitzt er zu weit links — die Kopfzeile wurde am selben Tag auf grossen Schirmen breiter, und die Werkzeugreihe rückte mit an den Rand. Ein Menü, das an der RECHTEN Kante seines Knopfes hängt (`inset-inline-end`), wächst nach links, so weit sein Inhalt verlangt — und links war kein Platz mehr. Der Knopf steht in der linken Werkzeugreihe, also wächst das Menü jetzt nach RECHTS, in die Seite hinein. Dort ist per Konstruktion Platz. Die Telefon-Regel weiter unten (fixed, beidseitig angeschlagen) bleibt unverändert — sie kennt das Problem gar nicht. */ left: 0; inset-inline-start: 0; right: auto; inset-inline-end: auto; top: calc(100% + 0.5rem); inset-block-start: calc(100% + 0.5rem); z-index: 40; min-width: 15rem; max-height: min(26rem, 70vh); overflow-y: auto; padding: 1rem 1.1rem; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-lift); } /* Auf dem Telefon lief das Menü links aus dem Bildschirm — von Iris am 5. August fotografiert: sichtbar blieben nur die Statuswörter rechts („AKTUELL", „EN PRÉPARATION"), die Sprachnamen selbst standen ausserhalb. Die Ursache ist die Verankerung. `inset-inline-end: 0` hängt das Menü an die **rechte Kante des Knopfes**, und von dort wächst es nach links, so weit sein Inhalt es verlangt. Am Schreibtisch ist links Platz; auf einem 390-px-Gerät sitzt der Knopf zu weit rechts, und die Breite geht über den Rand hinaus. Kein Umbruch rettet das, weil `min-width` und die Sprachnamen die Breite bestimmen. Hier wird das Menü deshalb nicht mehr am Knopf ausgerichtet, sondern am **Bildschirm**: `position: fixed` mit gleichem Abstand links und rechts. Es kann per Konstruktion nicht mehr hinausragen — unabhängig davon, wie lang der längste Sprachname ist oder wie weit rechts der Knopf steht. `fixed` und nicht `absolute`: der Kopf ist klebend, und ein absolut gesetztes Menü würde beim Scrollen unter ihm hervorwandern. */ @media (max-width: 34rem) { .lang__panel { position: fixed; inset-inline: 0.75rem; inset-block-start: 4.25rem; min-width: 0; max-height: min(30rem, 68vh); } } .lang__titel { margin: 0 0 0.6rem; } .lang__hinweis { margin: 0.75rem 0 0; padding-block-start: 0.75rem; border-block-start: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); } .langs { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; list-style: none; } .langs__item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; } .langs__item [aria-current="true"] { font-weight: 600; color: var(--ink); } .langs__status { font-family: "Archivo", system-ui, sans-serif; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } /* --- Script readiness: RTL and Asian scripts ---------------------------- Groundwork only. No language is served yet; this is here so that the day one is, the layout does not have to be rebuilt — and so the announcement in the footer is not a bluff. Two families of problem, and they are not the same problem: 1. RIGHT-TO-LEFT (Arabic). Handled by writing the whole stylesheet with logical properties — inset-inline-start, margin-inline-end, border-block — which mirror automatically under dir="rtl". Done 2026-08-01; the only remaining physical pair is a symmetric left:0/right:0 and is safe. 2. ASIAN SCRIPTS, which split further: - CJK (中文 · 日本語 · 한국어): no spaces between words, so Latin word wrapping does not apply; glyphs are full-width, so a `ch`-based measure produces lines roughly twice as long as intended; and the site's two webfonts contain no CJK glyphs at all, so text would fall back mid-paragraph to whatever the system offers. - Indic and South-East Asian (தமிழ் · ไทย): tall stacked marks need more line-height than a Latin design allows, or diacritics collide. - Vietnamese: Latin letters, but doubled diacritics — same line-height problem without the script change. Tamil is worth naming: the Sri Lankan Tamil community is one of the larger established communities in Switzerland and is ageing now — exactly this service's audience. */ :lang(zh), :lang(ja), :lang(ko) { /* System CJK faces, in the order each platform actually ships them. The brand faces stay first so Latin inside CJK text keeps its identity. */ font-family: "Archivo", system-ui, "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "PingFang SC", "Hiragino Sans", "Malgun Gothic", "Microsoft YaHei", sans-serif; /* Do not break a line in the middle of a word-like run, and keep the stricter rules about which characters may start or end a line. */ line-break: strict; word-break: normal; } :lang(zh) .prose, :lang(ja) .prose, :lang(ko) .prose, :lang(zh) .u-measure, :lang(ja) .u-measure, :lang(ko) .u-measure { /* `ch` is the width of "0". A CJK glyph is about twice that, so 63ch reads as ~126 characters — far past comfortable. `em` tracks the real glyph. */ max-width: 34em; } :lang(zh), :lang(ja), :lang(ko), :lang(ta), :lang(th), :lang(vi) { /* Stacked marks and full-width glyphs both need more room than the Latin rhythm gives them. */ line-height: 1.85; } /* Corrected 2026-08-01, same day it was written. The first version set `word-break: keep-all` here. That is wrong for both, in opposite ways: - Thai genuinely has no spaces, so the browser breaks lines using a Thai dictionary. `keep-all` tells it not to — and a Thai paragraph then becomes one unbreakable run that overflows its container. The correct instruction is to leave the browser alone. - Tamil uses ordinary spaces, so normal word breaking already works. What Tamil needs is vertical room for its stacked marks, which the line-height rule above already gives it. Both are left at browser defaults on purpose. The lesson is worth keeping: `keep-all` is a Korean/CJK tool, not a generic „don't split my script". */ :lang(zh) .eyebrow, :lang(ja) .eyebrow, :lang(ko) .eyebrow, :lang(zh) .langs__status, :lang(ja) .langs__status, :lang(ko) .langs__status { /* The eyebrow pattern is uppercase + wide tracking. CJK has no case, and letter-spacing on CJK reads as broken spacing rather than emphasis. */ text-transform: none; letter-spacing: 0.02em; } /* --- Vertical writing: why it is NOT here ------------------------------ Iris asked (2026-08-01) whether Asian languages need layout work the way Arabic does, „since they might read from top to bottom". The history is right. Chinese, Japanese and Korean were all written vertically — columns running top to bottom, columns advancing right to left. In CSS that is `writing-mode: vertical-rl`. On the web it is not what people expect. Korean is horizontal almost without exception; Chinese web layout is horizontal; Japanese is horizontal for anything functional — sites, forms, administration — while vertical survives in print: novels, manga, newspapers, formal letters. A Japanese visitor arriving at a care service would expect a horizontal page, and a vertical one would be harder to use, not more respectful. So no vertical rules ship. What matters instead is already above: font fallback, line breaking, an em-based measure and line height. The part worth knowing: **if vertical were ever wanted, the work is already largely done.** Logical properties are defined against the writing mode, not merely against direction — `margin-inline-start` follows the text in `vertical-rl` exactly as it does in `rtl`. The stylesheet was converted to logical properties for Arabic; that same conversion is what would make vertical Japanese possible without a rewrite. One change of `writing-mode`, scoped to `:lang(ja)`, and the layout follows. (Traditional Mongolian is the one script that is vertical-only on the web, `vertical-lr`. Not relevant to this audience, noted so the claim above is not overstated.) */ /* --------------------------------------------------------------------------- Die vier Richtungen — /welten Bildgetragen, nicht textgetragen: Wer nicht liest, kommt über die Bilder durch. Darum je Richtung ein grosses Leitbild über zwei Spalten und zwei Zeilen, danach elf kleinere. Ein gleichmässiges Raster hätte kein Gesicht. Kein `aspect-ratio` auf den Feldern selbst, sondern auf dem Bild: so reserviert der Browser den Platz, bevor das Bild da ist, und die Seite springt beim Nachladen nicht — bei achtundvierzig verzögert geladenen Bildern der Unterschied zwischen ruhig und unbrauchbar. --------------------------------------------------------------------------- */ .welten__kopf { padding-block: 3.5rem 2rem; max-width: 42rem; } .welten__titel { margin-block-end: 0.6rem; } .welten__hinweis { margin-block-start: 1.1rem; color: var(--ink-2); font-size: 0.95rem; } .welt { padding-block: 2.25rem; } .welt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem 1rem; margin-block-end: 1.1rem; padding-block-end: 0.7rem; border-block-end: 1px solid var(--line); } .welt__pfeil { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin: 0; } .welt__name { margin: 0; } .welt__satz { margin: 0; color: var(--ink-2); flex-basis: 100%; max-width: 34rem; } .welt__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; } .welt__feld { margin: 0; } .welt__feld--gross { grid-column: span 2; grid-row: span 2; } .welt__feld img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; border-radius: 2px; background: var(--paper-sunk); } .welt__feld--gross img { aspect-ratio: 1 / 1; } .welten__fuss { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-block: 2.5rem 4rem; } @media (max-width: 60rem) { .welt__raster { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 40rem) { .welt__raster { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; } /* Auf dem Telefon füllt das Leitbild die Breite — zwei von zwei Spalten wäre dasselbe wie ein normales Feld und der Rhythmus ginge verloren. */ .welt__feld--gross { grid-column: span 2; grid-row: span 1; } .welt__feld--gross img { aspect-ratio: 16 / 10; } } /* Die kleinen Marken unter jedem Raster. Sie sind Beiwerk, kein Inhalt: deshalb rund, klein und ohne Anspruch auf Aufmerksamkeit. Bei 72 Pixeln liefert selbst ein 240-Pixel-Bild noch mehr als die dreifache Pixeldichte. */ .welt__marken { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .welt__marken li { margin: 0; } .welt__marken img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 50%; background: var(--paper-sunk); } @media (max-width: 40rem) { .welt__marken { gap: 0.4rem; } .welt__marken img { width: 56px; height: 56px; } } /* Die stille Videoschleife einer Richtung. Hochformat, deshalb schmal und zentriert — sie soll ein Fenster sein, kein Banner. Der Rahmen entspricht den Bildfeldern des Rasters, damit sie als Teil der Welt liest. */ .welt__video { margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; max-width: min(22rem, 78vw); } .welt__video video { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: var(--shadow-card); } /* Querformat bekommt mehr Breite. Ein Panorama in einem Hochformat-Fenster wäre ein Streifen von 350 mal 200 Pixeln — das Motiv (Bergkette über dem Nebelmeer, Wurzelgang mit Laterne) lebt von der Weite, also darf der Rahmen weiter werden. Es bleibt ein Fenster, nur ein liegendes. */ .welt__video--quer { max-width: min(34rem, 92vw); } /* Die Hymne als kleines Album — Iris, 6. August: „Can we make a CD effect like on the website?" (Referenz: eine Hülle, aus der die Scheibe ragt). Hülle und Scheibe sind gerechnet — die Hülle trägt das vorhandene Logo, die Scheibe ist Verlaufs-Silber mit Loch — also kein neues Bild und keine Lizenzfrage; §9 bleibt unberührt. Die Drehung läuft nur, solange eine Fassung wirklich spielt (site.js setzt cd--spielt), und nur unter Lebendig. Im Ruhemodus und ohne JavaScript steht die Scheibe still, und das ist kein Verlust: auch eine stehende CD ist eine CD. */ .hymne { margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 36rem; } .hymne__spieler { width: 100%; } .hymne__fassung { margin: 1.4rem 0 0.4rem; } .hymne__aufruf { margin: 1.6rem 0 0; font-size: var(--t-small); line-height: 1.55; } .cd { --cd-mass: min(12rem, 52vw); position: relative; width: calc(var(--cd-mass) * 1.42); margin: 0 auto 1.8rem; } .cd__huelle { position: relative; z-index: 1; display: block; width: var(--cd-mass); aspect-ratio: 1; /* Das Logo als Hintergrund, nicht als <img>: die CD ist Schmuck, und die Bilderzählung auf /barrierefreiheit/ zählt Inhalte. */ /* Iris, 11. August: „WE NEED THE HNC LOGO ON THE CD COVER … Pls choose correct Human Nature Codex Logo." Es ist der runde Siegel mit dem Vogel — die drei anderen Kandidaten im Archiv sagen alle „HNC CARE", also die Tochter. Der Text unter der Scheibe nennt das Haus: „Die Hymne gehört zum Human Nature Codex." **Und die Umkehr, ebenfalls ihre Ansage:** „Im Nachtmodus die Farben umdrehen, also Vanille Hülle und Silber Logo." Tags Navy mit Gold, nachts Vanille mit Zinn. Der Rest der Website macht es umgekehrt — hier ist das Absicht: eine CD-Hülle ist ein Gegenstand im Raum, kein Seitengrund, und ein heller Gegenstand vor dunklem Zimmer ist genau das, was ein Album auf einem Regal tut. */ /* Altgeräte: JPEG-Zwilling zuerst, WebP über image-set(). */ background: url("../img/logo_hnc.f5f5e2f22764.jpg") center 42% / 62% no-repeat, linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 100%); background: image-set(url("../img/logo_hnc.d6a4bbbe4f16.webp") type("image/webp"), url("../img/logo_hnc.f5f5e2f22764.jpg") type("image/jpeg")) center 42% / 62% no-repeat, linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 100%); border-radius: 2px; /* Tiefe aus der Demo im anderen Chat übernommen: ein dünnes Kantenlicht innen und ein zweiter, weicherer Wurf machen die Hülle zum Gegenstand vor der Scheibe statt zur Fläche neben ihr. */ box-shadow: var(--shadow-card), 0 10px 24px -10px rgb(0 0 0 / 35%), inset 0 0 0 1px rgb(255 255 255 / 9%); } /* Die Fassung auf der Hülle — Iris: „for the English and for the German version". Ein echtes Album löst das nicht mit zwei Bildern, sondern mit einer Zeile auf demselben Cover: gleiche Marke, andere Ausgabe. Genau so hier — das Zeichen bleibt, die Zeile wechselt, sobald eine Fassung läuft. Ohne Skript und im Ruhezustand steht dort der Name der ersten Fassung; sie ist dann keine Zustandsanzeige, sondern eine Beschriftung. */ /* Die Fassungswahl. Sie steht über den Abspielern und ist ohne Skript versteckt — dann tragen die Abspieler selbst die Wahl, so wie bisher. */ .hymne__wahl { margin-block: 1.25rem 0.5rem; } .hymne__wahl-titel { margin: 0 0 0.5rem; font-family: Archivo, system-ui, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .hymne__wahl-reihe { display: flex; flex-wrap: wrap; gap: 0.45rem; } .hymne__wahl-reihe button { padding: 0.45rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 0.88rem; cursor: pointer; } .hymne__wahl-reihe button[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--ink-on-deep); } .hymne__wahl-reihe button:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; } .cd__kante { position: absolute; z-index: 2; inset-inline-start: 0; inset-block-end: 0; inline-size: var(--cd-mass); padding: 0.55rem 0.7rem; color: var(--gold-on-deep); font-family: Archivo, system-ui, sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Die Umkehr im Nachtmodus: Vanille statt Navy, Zinn statt Gold. Das Silber ist bewusst **kein Chrom**. Ein helles Silber auf Vanille wäre fast unsichtbar — die Zeichnung ist auf 42–62 % Helligkeit gestaucht, mit einem Hauch Blau. Gemessen liegt sie damit bei 4,6:1 gegen die Hülle; die Zeichnung ist Schmuck und braucht die 4,5 nicht, aber unter 3 wäre sie ein Fleck statt eines Zeichens. */ :root[data-theme="dark"] .cd__huelle, :root:not([data-theme="light"]) .cd__huelle:where(.nacht-nach-geraet) { /* Altgeräte (Safari vor Big Sur / iOS vor 14): JPEG zuerst, image-set wählt. */ background: url("../img/logo_hnc_silber.ec8a80331c7f.jpg") center 42% / 62% no-repeat, linear-gradient(135deg, #f4efe4 0%, #e3dacb 100%); background: image-set(url("../img/logo_hnc_silber.37525057389e.webp") type("image/webp"), url("../img/logo_hnc_silber.ec8a80331c7f.jpg") type("image/jpeg")) center 42% / 62% no-repeat, linear-gradient(135deg, #f4efe4 0%, #e3dacb 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cd__huelle { background: url("../img/logo_hnc_silber.ec8a80331c7f.jpg") center 42% / 62% no-repeat, linear-gradient(135deg, #f4efe4 0%, #e3dacb 100%); background: image-set(url("../img/logo_hnc_silber.37525057389e.webp") type("image/webp"), url("../img/logo_hnc_silber.ec8a80331c7f.jpg") type("image/jpeg")) center 42% / 62% no-repeat, linear-gradient(135deg, #f4efe4 0%, #e3dacb 100%); } } /* Die Ausgabezeile kehrt mit um: auf Vanille braucht sie eine dunkle Tinte, sonst verschwindet sie mit dem Silber. */ :root[data-theme="dark"] .cd__kante { color: #4a4133; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cd__kante { color: #4a4133; } } .cd__scheibe { position: absolute; /* Kleiner als die Hülle, wie eine echte CD in einem echten Cover — Iris, 6. August: „The CD looked slightly too big for its case." 86 % statt 94 %, und der obere Versatz zentriert die kleinere Scheibe wieder auf der Hüllenmitte. */ top: 7%; left: calc(var(--cd-mass) * 0.46); width: calc(var(--cd-mass) * 0.86); aspect-ratio: 1; border-radius: 50%; /* Drei Lagen, von oben: das Loch (Papierfarbe, damit es in beiden Modi wirklich ein Loch ist), die Ringe um Loch und Aussenkante, darunter das Silber als Kegelverlauf — die ungleichen Sektoren sind Absicht, erst sie machen die Drehung sichtbar. */ background: radial-gradient(circle, var(--paper) 0 6.5%, rgb(255 255 255 / 55%) 7% 8.5%, transparent 9.5%), radial-gradient(circle, transparent 0 11.5%, rgb(16 42 67 / 30%) 12% 13%, transparent 14% 94.5%, rgb(16 42 67 / 45%) 95.5% 100%), /* Iris, 11. August: „CD bitte grau lassen" — und dann: „aber die Balken bitte Navy blau im ersten Bild." Beides zusammen ergibt genau das hier: die **hellen** Sektoren bleiben Silber, die **dunklen** werden Navy. Die Scheibe liest sich weiter als Silberscheibe, aber die Sektoren, die die Drehung sichtbar machen, stehen jetzt auch auf elfenbeinfarbenem Papier. Nur am Tag. Nachts liegt die Scheibe auf Dunkel, dort waeren navy Balken Loecher statt Zeichnung — der Nachtblock weiter unten setzt den durchgehend silbernen Verlauf zurueck. */ conic-gradient(from 40deg, #2c4a6b, #e2e9f2 11%, #24405e 23%, #d4dde7 36%, #1f3a56 49%, #eef2f7 61%, #29456a 74%, #dbe3ec 86%, #2c4a6b 100%); /* Dicke aus der Demo: ein dunkler Saum um die Kante, dann erst der weiche Wurf — so liest sich die Scheibe als Ding, nicht als Kreis. */ /* Die Kante traegt, was die Farbe nicht traegt. Iris, 11. August: „CD bitte grau lassen" — nachdem eine Navy-Fassung gemessen worden war, weil helles Silber auf elfenbeinfarbenem Papier bei **1,17:1** lag. Sie bleibt silbern; sichtbar wird sie jetzt ueber den Rand statt ueber den Ton: ein voller Saum in Navy statt eines 35-Prozent-Hauchs, dazu ein zweiter, weiterer Schatten. Auf dunklem Grund braucht es das nicht — dort steht das Silber ohnehin bei 15:1. */ box-shadow: 0 0 0 1.5px rgb(16 42 67 / 85%), 0 1px 0 1.5px rgb(16 42 67 / 25%), 0 3px 14px rgb(0 0 0 / 30%); /* `translate` statt `transform`: die Drehung belegt transform, und die beiden dürfen einander nicht überschreiben. Safari 13 kennt die Eigenschaft nicht und lässt schlicht das Herausgleiten weg (KD-W-07 — verschmerzbar, die Scheibe ragt auch so heraus). */ transition: translate 700ms var(--ease); } :root[data-theme="dark"] .cd__scheibe, :root:not([data-theme="light"]) .cd__scheibe:where(.nacht-nach-geraet) { background: radial-gradient(circle, var(--paper) 0 6.5%, rgb(255 255 255 / 55%) 7% 8.5%, transparent 9.5%), radial-gradient(circle, transparent 0 11.5%, rgb(16 42 67 / 30%) 12% 13%, transparent 14% 94.5%, rgb(16 42 67 / 45%) 95.5% 100%), conic-gradient(from 40deg, #aeb9c6, #e2e9f2 11%, #9aa8b8 23%, #d4dde7 36%, #93a3b5 49%, #eef2f7 61%, #a6b3c3 74%, #dbe3ec 86%, #aeb9c6 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cd__scheibe { background: radial-gradient(circle, var(--paper) 0 6.5%, rgb(255 255 255 / 55%) 7% 8.5%, transparent 9.5%), radial-gradient(circle, transparent 0 11.5%, rgb(16 42 67 / 30%) 12% 13%, transparent 14% 94.5%, rgb(16 42 67 / 45%) 95.5% 100%), conic-gradient(from 40deg, #aeb9c6, #e2e9f2 11%, #9aa8b8 23%, #d4dde7 36%, #93a3b5 49%, #eef2f7 61%, #a6b3c3 74%, #dbe3ec 86%, #aeb9c6 100%); } } :root[data-theme="dark"] .cd__scheibe { box-shadow: 0 0 0 1px rgb(16 42 67 / 35%), 0 2px 12px rgb(0 0 0 / 28%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cd__scheibe { box-shadow: 0 0 0 1px rgb(16 42 67 / 35%), 0 2px 12px rgb(0 0 0 / 28%); } } /* Der Eintritt, ebenfalls aus der Demo: die Scheibe beginnt hinter der Hülle und gleitet in die Ruhelage, sobald das Album ins Bild kommt — das Reveal-System liefert den Moment (is-visible), die Transition oben den Weg. Nur unter Lebendig und nur mit Skript; im Ruhemodus und ohne JavaScript steht die CD von Anfang an fertig da. Was die Demo sonst noch hat und hier fehlt, fehlt mit Absicht: der Ruhewinkel von −18° wäre auf einer Scheibe ohne Aufdruck unsichtbar, und ihre Bilddateien stammen aus einem kommerziellen Theme-Demo — §9 lässt sie nicht aufs Schiff. */ @media (scripting: enabled) { :root[data-motion="full"] .cd:not(.is-visible) .cd__scheibe { translate: calc(var(--cd-mass) * -0.34) 0; } } :root[data-motion="full"] .cd--spielt .cd__scheibe { animation: cd-drehen 3.6s linear infinite; translate: calc(var(--cd-mass) * 0.07) 0; } @keyframes cd-drehen { to { transform: rotate(1turn); } } /* Bildband zwischen zwei Abschnitten. Volle Breite bis zum Rand des Textes, nicht bis zum Rand des Fensters: die Seite behält ihre ruhige Spalte, und das Bild bleibt ein Absatz, keine Bühne. */ .bildband { margin: 0; padding: 0; /* Der Reveal beginnt bei `scale(1.04)` — vier Prozent, die auf einem 390-px-Telefon acht Pixel über den rechten Rand ragen und die ganze Seite waagrecht scrollen liessen. Gemessen im Abnahme-Durchgang am 7. August, auf jeder Seite mit Bildband, in jeder Breite. Geschnitten wird am Rahmen, nicht an der Animation: `clip` statt `hidden`, damit kein Scroll-Kontext entsteht (`hidden` würde `position: sticky` in dieser Spalte stillegen und die Sprungmarken verschieben). Der Rückfall für ältere Browser steht darunter. */ overflow: hidden; overflow: clip; } .bildband img { display: block; width: 100%; max-width: var(--shell); height: auto; margin-inline: auto; aspect-ratio: 21 / 9; object-fit: cover; background: var(--paper-sunk); /* Weiche Kanten statt Schnittkanten. Iris, 5. August: „die meisten Bilder wirken abgehackt … können wir eine Ausblenden-Gradient-Transparent-Sache machen bei den Bildern, die abgeschnitten sind?" Jedes dieser Bänder ist ein Ausschnitt aus einem grösseren Bild — oben und unten endet es nicht, es hört auf. Zwei harte waagrechte Linien pro Band, bei fünfzehn Bändern dreissig Kanten. Das ist es, was hart wirkt. Behoben mit einer Maske, nicht mit einem Verlauf darüber. Der Unterschied zählt: ein aufgelegter Verlauf müsste die Papierfarbe kennen und in beiden Modi mitwechseln — hier scheint das Papier selbst durch, welches auch immer es gerade ist. Eine Regel für Tag und Nacht. 6 % oben und unten, nicht mehr: es soll auslaufen, nicht verschwinden. Seitlich bleibt es scharf — dort steht die Bildkante bündig zum Text und ist eine gewollte Linie, keine zufällige. */ -webkit-mask-image: var(--bild-ausblendung); mask-image: var(--bild-ausblendung); } /* --- Bewegte Bänder tragen dieselbe weiche Kante ------------------------- Iris, 13. August: alle zwölf Videos in die Seite. Wo ein Bildband jetzt ein Video zeigt, gilt dieselbe Rechnung wie beim Standbild vom 5. August: ein Ausschnitt hört oben und unten nicht auf, er wird abgeschnitten — und zwei harte Waagrechte pro Band sind genau das „Abgehackte". Also dieselbe Maske und dieselbe Breitenbegrenzung wie bei `.bildband img`; sonst spannt der Rahmen über das ganze Fenster, während das Standbild darunter bei `--shell` endet. */ .bildband .kopfband__rahmen { max-width: var(--shell); margin-inline: auto; } .bildband .kopfband__video { -webkit-mask-image: var(--bild-ausblendung); mask-image: var(--bild-ausblendung); } /* Der Tropfen ist hochkant und sitzt tief im Rahmen; die elf Landschaften sind querformatig und wollen ihre Mitte. Ein Modifikator statt einer Ausnahme, damit ein künftiges Hochformat den Weg zurück hat. */ .kopfband__video--mitte { object-position: 50% 50%; } :root { --bild-ausblendung: linear-gradient( to bottom, transparent 0%, #000 6%, #000 94%, transparent 100% ); } /* Auf schmalen Geräten sind die Bänder höher und näher am Text; dort darf der Übergang etwas länger sein, sonst wirkt er wie ein Fehler statt wie ein Auslaufen. */ @media (max-width: 40rem) { :root { --bild-ausblendung: linear-gradient( to bottom, transparent 0%, #000 9%, #000 91%, transparent 100% ); } } @media (max-width: 40rem) { .bildband img { aspect-ratio: 16 / 10; } } /* --- Sehr schmale Geräte ------------------------------------------------- Iris 2026-08-02: „meine mutter hat zum beispiel noch ein flipphone". Gemessen bei 240px, der üblichen Breite eines Tastentelefons: 25px Überlauf an `.codex__title`. Die Ursache ist kein Layoutfehler, sondern Deutsch — „Verantwortungsbewusstsein" ist ein Wort und passt nicht. Ohne Trennerlaubnis schiebt ein einziges solches Wort die ganze Seite seitwärts, und dann scrollt alles waagrecht, auch der Text daneben. Deshalb greift hier keine neue Anordnung, sondern nur die Erlaubnis zu trennen. `hyphens: auto` braucht die Sprachauszeichnung, die das Dokument ohnehin trägt; `overflow-wrap: break-word` ist der Rückfall für Browser ohne Trennmuster — genau die, die auf so einem Gerät laufen. */ @media (max-width: 22rem) { body { hyphens: auto; overflow-wrap: break-word; } .display, .h1, .h2, .h3, .codex__title, .lead { hyphens: auto; overflow-wrap: break-word; word-break: normal; } /* Tabellenartige Raster fallen bei dieser Breite auf eine Spalte, sonst bleibt für den Inhalt nichts übrig. */ .welt__raster { grid-template-columns: 1fr; } .welt__feld--gross { grid-column: span 1; } } /* --- CARE Univers --------------------------------------------------------- Garten, Spiele, Weg. Aus dem Paket vom 5. August, hier auf die Marken- token dieser Website gesetzt statt auf das mitgelieferte Stylesheet: das war ein eigenes Gestaltungssystem in Waldgrün und hätte neben dem Rest wie ein fremdes Fenster gewirkt — abgesehen davon, dass es rund 20 KB gewogen hätte, die die Startseite nicht hat. Nichts hier setzt eine Farbe fest; alles läuft über die Token, also stimmt Tag und Nacht von selbst. */ .cu { padding-block: clamp(3rem, 7vw, 5rem); background: var(--paper-sunk); } .cu__lead { max-width: 46rem; color: var(--ink-2); } .cu__raster { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); /* Altgeräte: Raster ohne min(), 16rem statt 22, damit nichts überläuft. */ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); margin-block-start: clamp(1.5rem, 4vw, 2.5rem); /* Iris, 7. August: „The section on the right is totally empty." Der Grund war die Voreinstellung `stretch`: die Spiele-Karte wuchs auf die Höhe der Garten-Karte mit ihren sechs Einträgen und stand darunter fast leer da. Jede Karte trägt jetzt ihre eigene Höhe. Das ist die kleine Hälfte der Antwort — die grosse (mehr Inhalt in der rechten Spalte) bleibt Ihre Entscheidung. */ align-items: start; } .cu__karte { padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: 4px; background: var(--paper-raised); } /* Der Weg braucht die ganze Zeile: seine Schritte sind Fliesstext, und Fliesstext in einer Drittelspalte bricht nach vier Wörtern um. */ .cu__karte--weit { grid-column: 1 / -1; } /* Rang ist Bedeutung, Grösse ist Gestaltung — und am 10. August sind die beiden auseinandergefallen. Der Abschnitt zog auf eine eigene Seite, sein Titel wurde damit zur <h1>, und alles darunter musste eine Stufe hoch: sonst springt der Vorlesebaum von 1 auf 3. Optisch soll sich dabei nichts ändern. Hingen die Grössen weiter an <h3>/<h4>, wanderten sie beim Umzug mit — deshalb hängen sie jetzt an einer Klasse und sind ausdrücklich festgeschrieben. Werte gemessen an der Fassung vor dem Umzug: 19,89 px = 1,17 em und 17 px = 1 em bei einem Kartenschriftgrad von 17 px. Gefunden hat den Sprung `scripts/a11y_baum.py`. */ .cu__karte-titel { font-size: 1.17em; } .cu__klein-titel { font-size: 1em; } .cu__karte-titel { margin-block: 0 0.5rem; } .cu__karte > p { color: var(--ink-2); } /* --- Garten --- */ .cu__garten { display: flex; align-items: center; gap: 1rem; margin-block: 1.25rem; padding: 0.75rem 1rem; border-radius: 4px; background: var(--paper-sunk); } .cu__zaehler { margin: 0; text-align: center; } .cu__zahl { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--alpine); } .cu__zaehler-text { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); } /* Das Beet trägt zwei sehr verschiedene Dinge: den Satz „noch nichts hier" und, sobald etwas gewachsen ist, eine Reihe Pflanzen. Der Satz will Lesegrösse, die Pflanzen wollen Grösse. Beides über eine Schriftgrösse zu regeln ging schief — der leere Satz stand in 1,35 rem da wie eine Überschrift. Also: der Kasten bleibt normal, nur die Pflanzen werden gross. */ .cu__beet { margin: 0; color: var(--ink-3); } .cu__pflanze { font-size: 1.5rem; line-height: 1.3; margin-inline-end: 0.15rem; } /* Sechs Aktivitäten — nebeneinander, sobald Platz da ist. Gemessen am 10. August: Diese Liste war **1 155 px** hoch, sechs Einträge à 187 px in einer einzigen 528-px-Spalte, und damit der grösste Einzelblock der ganzen Startseite (der Abschnitt insgesamt 2 239 px, also 19 % der Seite bei 282 Wörtern). Es ist eine Liste kurzer Karten, keine Erzählung — sie hat nie eine Spalte gebraucht. `auto-fit` mit einer Untergrenze von 13rem gibt in der halben Breite zwei Spalten, in der vollen drei, und auf dem Telefon eine. Nichts verschwindet, nichts wird kleiner. Das behebt nebenbei Iris' Befund vom 7. August — *„The section on the right is totally empty."* Die Ursache war nicht die rechte Karte, sondern die linke: sie war dreimal so hoch wie ihr Inhalt es verlangt. */ .cu__liste { display: grid; gap: 0.75rem; /* Altgeräte: Raster ohne min(). */ grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); align-items: start; margin: 0; padding: 0; list-style: none; } .cu__aktivitaet { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 4px; } .cu__aktivitaet .cu__klein-titel { margin-block: 0.15rem 0.3rem; } .cu__aktivitaet p { margin: 0; color: var(--ink-2); } .cu__art { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); } .cu__erledigt { margin-block-start: 0.7rem; } /* Abgeschlossen heisst hier nicht ausgegraut. Wer eine Sache geschafft hat, soll sie noch lesen können — das Häkchen genügt als Zeichen. */ .cu__aktivitaet.is-erledigt { border-color: var(--line-strong); } .cu__aktivitaet.is-erledigt .cu__erledigt { opacity: 1; color: var(--ink-3); cursor: default; } .cu__zuruecksetzen { margin-block-start: 1rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--ink-3); text-decoration: underline; cursor: pointer; } /* --- Spiele --- */ .cu__spielwahl { display: grid; gap: 0.9rem; margin-block: 1.25rem; padding: 0; list-style: none; } .cu__spiel-text { margin-block: 0.35rem 0; font-size: 0.9rem; color: var(--ink-3); } .cu__buehne:not(:empty) { margin-block-start: 1.25rem; padding: 1rem; border-radius: 4px; background: var(--paper-sunk); } .cu__stand { margin-block-start: 0.75rem; font-size: 0.85rem; color: var(--ink-3); } .cu__brett { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } /* Die Karten zeigen ihr Zeichen erst, wenn sie offen sind. `color: transparent` statt leerem Text: der Inhalt bleibt im Baum, also kann die Beschriftung für Vorleseprogramme unabhängig gesetzt werden — und beim Umdrehen springt nichts im Layout. */ .cu__memory { aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper-raised); font-size: 1.5rem; color: transparent; cursor: pointer; transition: color 160ms var(--ease), background-color 160ms var(--ease); } .cu__memory.is-offen, .cu__memory.is-paar { color: inherit; } .cu__memory.is-paar { background: var(--paper-sunk); border-color: var(--gold); cursor: default; } .cu__hain, .cu__wasser { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .cu__atem-titel { margin: 0; font-size: 1.15rem; font-weight: 600; } /* Die Kugel folgt dem Atem. Die Dauern stehen im Skript und hier — sie müssen zusammenpassen, sonst läuft das Bild dem Wort davon: 4 s ein, 6 s aus. Wer eine ändert, ändert beide. */ .cu__kugel { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--alpine); opacity: 0.25; transition: transform 4s ease-in-out, opacity 4s ease-in-out; } .cu__kugel.is-ein { transform: scale(1.6); opacity: 0.55; } .cu__kugel.is-aus { transform: scale(1); opacity: 0.25; transition-duration: 6s; } .cu__regler { width: min(100%, 22rem); } .cu__abschluss { text-align: center; } .cu__abschluss-titel { margin-block: 0 0.25rem; font-size: 1.1rem; font-weight: 600; } /* --- Der Weg --- */ .cu__balken { height: 4px; margin-block: 1.25rem 1.5rem; border-radius: 2px; background: var(--line); } .cu__balken span { display: block; width: var(--anteil, 0%); height: 100%; border-radius: 2px; background: var(--alpine); transition: width 320ms var(--ease); } .cu__schritte { display: grid; gap: 1rem; margin: 0; padding-inline-start: 1.25rem; } .cu__schritt .cu__klein-titel { margin-block: 0 0.25rem; } .cu__schritt p { margin: 0; color: var(--ink-2); } /* Ohne JavaScript stehen alle Schritte untereinander und sind vollständig lesbar. Erst `is-gefuehrt` — vom Skript gesetzt — macht daraus einen Schritt nach dem anderen. Die Reihenfolge ist Absicht: die Seite ist ohne Skript nicht kaputt, sondern nur weniger geführt. */ .cu__karte.is-gefuehrt .cu__schritt { display: none; } .cu__karte.is-gefuehrt .cu__schritt.is-aktiv { display: block; } .cu__karte.is-gefuehrt .cu__schritte { min-height: 6rem; } .cu__weg-knoepfe { display: flex; gap: 0.75rem; margin-block-start: 1.25rem; } .cu__weg-fertig { margin-block-start: 1.25rem; padding: 1rem 1.25rem; border-inline-start: 3px solid var(--gold); background: var(--paper-sunk); } .cu__weg-fertig .cu__klein-titel { margin-block: 0 0.35rem; } .cu__weg-fertig p { margin: 0; color: var(--ink-2); } .cu__hinweis { margin-block-start: clamp(1.5rem, 3vw, 2rem); font-size: 0.85rem; color: var(--ink-3); } /* Bewegungsarmut hat immer Vorrang — auch über dem Atemhain, dessen ganze Wirkung an einer Bewegung hängt. Die Kugel steht dann still und die Worte führen allein; das ist weniger schön und bleibt benutzbar. */ @media (prefers-reduced-motion: reduce) { .cu__kugel, .cu__memory, .cu__balken span { transition-duration: 1ms; } .cu__kugel.is-ein { transform: none; } } /* ============================== Kosmos =================================== /welten/kosmos/ — die erste begehbare Welt der Richtung „Oben" (Freigabe: Iris, 8. August 2026). Die Seite ist in beiden Schemata bewusst dunkel: ihr Gegenstand ist der Nachthimmel, und ein Periodensystem vor Cremeweiss wäre ein Poster — genau das, was die Seite nicht sein will. Alle Paare hier sind mit >= 7:1 gerechnet (Text #dbe4f0 bzw. #8fa0b8 auf #070b14/#0d1322; Kennzeichen-Text #081018 auf den vier Stufenfarben). Rasterpositionen sind Klassen (k-r* / k-s*), nie style-Attribute (CSP). */ /* Die Kosmos-Seite ist in beiden Schemata dunkel — das helle Fokus-Token (#102a43) waere auf ihr unsichtbar. Audit 2026-08-09, kritischer Befund. */ .seite-kosmos { --focus: #9dc0dd; } .seite-kosmos main{background:#070b14} .kosmos{color:#dbe4f0} .kosmos .h1,.kosmos .h2,.kosmos .h3{color:#dbe4f0} .kosmos .h2{color:#d7b45a} .kosmos .eyebrow{color:#8fa0b8} .kosmos .lead{color:#dbe4f0} .kosmos__kopf{padding-top:3rem} .kosmos__einordnung{color:#8fa0b8;max-width:46rem;margin:.6rem 0} .kosmos__fussnote{color:#8fa0b8;font-size:.85rem;margin-top:1.2rem} .kosmos__legende{list-style:none;padding:0;margin:1rem 0 0;display:flex; flex-wrap:wrap;gap:.5rem 1.2rem;color:#8fa0b8;font-size:.9rem} .kosmos__kontinuum{margin-top:1.4rem;font-size:.9rem;line-height:2} .kosmos__schritt{background:#0d1322;border:1px solid #22304a; border-radius:999px;padding:.15rem .7rem;white-space:nowrap} .kosmos__pfeil{color:#8fa0b8} .kbadge{display:inline-block;font-size:.62rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;line-height:1.7; padding:0 .55em;border-radius:2px;color:#081018;vertical-align:.12em} .kbadge--gesichert{background:#69c98f} .kbadge--hypothese{background:#e2b45c} .kbadge--philosophie{background:#9d8fe8} .kbadge--metapher{background:#e58fb2} .kosmos__karten{display:grid;gap:.9rem;margin-top:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))} .kkarte{background:#0d1322;border:1px solid #22304a;border-radius:8px; padding:1rem 1.1rem} .kkarte p{margin:.45rem 0 0;font-size:.93rem} .kosmos__tafelrahmen{overflow-x:auto;padding-bottom:.6rem; scrollbar-gutter:stable} .kosmos__tafel{display:grid;grid-template-columns:repeat(18,minmax(3.1rem,1fr)); gap:3px;min-width:62rem;margin-top:1rem} .kel{position:relative;border:1px solid #22304a;border-radius:4px; background:#0d1322;color:#dbe4f0;padding:.28rem .3rem .34rem; text-align:left;cursor:pointer;font:inherit;min-height:3.4rem} .kel small{display:block;font-size:.58rem;color:#8fa0b8;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .kel b{font-size:1.02rem;font-weight:normal} .kel__z{position:absolute;top:.18rem;right:.3rem;font-size:.55rem; color:#8fa0b8} .kel:hover{border-color:#d7b45a} /* outline transparent statt none: im Forced-Colors-Modus fallen Box-Shadows weg, eine transparente Outline wird dort sichtbar — sonst haben die Elementknoepfe keinen Fokusring. */ .kel:focus-visible{border-color:#d7b45a;box-shadow:0 0 0 2px #d7b45a;outline:2px solid transparent;outline-offset:1px} .kel--aktiv{border-color:#d7b45a;background:#152036} .kel--synthetisch{border-style:dashed} .kel--hypothetisch{border-style:dotted;color:#8fa0b8;background:transparent} .kel--luecke::after{content:'✦';position:absolute;left:.3rem;bottom:.15rem; font-size:.6rem;color:#d7b45a} .kosmos__panel{position:sticky;bottom:0;margin-top:1.2rem;background:#0d1322; border:1px solid #22304a;border-radius:8px 8px 0 0;padding:1rem 1.2rem; min-height:5.5rem} .kosmos__panel .h3{color:#d7b45a;margin:0 0 .2rem} .kosmos__panel p{margin:.3rem 0 0;font-size:.93rem} .kosmos__schluss{padding-bottom:3rem} .kosmos a{color:#7fb4e8} @media (prefers-reduced-motion: no-preference){ .kel--hypothetisch{animation:kosmos-schimmer 4s ease-in-out infinite} @keyframes kosmos-schimmer{0%,100%{opacity:.55}50%{opacity:1}} } .k-r1{grid-row:1}.k-r2{grid-row:2}.k-r3{grid-row:3}.k-r4{grid-row:4} .k-r5{grid-row:5}.k-r6{grid-row:6}.k-r7{grid-row:7}.k-r8{grid-row:8} .k-r9{grid-row:9}.k-r10{grid-row:10} .k-s1{grid-column:1}.k-s2{grid-column:2}.k-s3{grid-column:3} .k-s4{grid-column:4}.k-s5{grid-column:5}.k-s6{grid-column:6} .k-s7{grid-column:7}.k-s8{grid-column:8}.k-s9{grid-column:9} .k-s10{grid-column:10}.k-s11{grid-column:11}.k-s12{grid-column:12} .k-s13{grid-column:13}.k-s14{grid-column:14}.k-s15{grid-column:15} .k-s16{grid-column:16}.k-s17{grid-column:17}.k-s18{grid-column:18} /* Die stille Schleife über der Elementtafel auf /welten/kosmos/. Sie zeigt die Form des Periodensystems als leere leuchtende Felder — die Zeichen stehen darunter in echtem Text. Breiter als die Welten-Fenster, weil sie dieselbe Geometrie zeigt wie die Tafel, die ihr folgt. */ .kosmos__film { margin: clamp(1.2rem, 3vw, 2rem) auto; max-width: min(44rem, 96vw); } .kosmos__film video { display: block; width: 100%; height: auto; border-radius: 2px; } /* Der Kompass auf /welten/ — Iris, 9. August: der Lebensbaum ist der Nullpunkt, die vier Richtungen entspringen ihm. Am Schreibtisch ein Kreuz: Oben über dem Baum, Unten darunter, Links und Rechts daneben. Auf dem Telefon bleibt die Ordnung der Himmelsrichtungen als Reihenfolge erhalten: Oben, dann der Baum zwischen Links und Rechts, dann Unten. */ .kompass { display: grid; grid-template-columns: 1fr minmax(16rem, 44rem) 1fr; grid-template-areas: ". oben ." "links mitte rechts" ". unten ."; gap: clamp(0.8rem, 2vw, 1.6rem); align-items: center; justify-items: center; margin-top: clamp(2rem, 4vw, 3.5rem); } .kompass__arm--oben { grid-area: oben; } .kompass__arm--unten { grid-area: unten; } .kompass__arm--links { grid-area: links; justify-self: end; text-align: right; } .kompass__arm--rechts { grid-area: rechts; justify-self: start; text-align: left; } .kompass__mitte { grid-area: mitte; width: 100%; } /* SUPER GROSS — Iris, 14. August, nachdem der Baum einen Tag lang oben im Kopfbild lief: „super gross in der mitte alles andere machen wir go." Das Video sass bisher in seiner Pixelbreite (704) klein in der Zelle; jetzt füllt es sie und darf bis 56 rem wachsen. Die Mitte ist der Nullpunkt, auf dem der Baum inhaltlich steht — ein Ort, ein Baum, gross, statt zwei Orte halb. */ .kompass__mitte video, .kompass__mitte img { width: 100%; max-width: 56rem; height: auto; margin-inline: auto; display: block; } /* Baum und Tafel teilen sich dieselbe Zelle: die Tafel legt sich darüber, der Baum bleibt darunter sichtbar. Der Nullpunkt verschwindet nie. */ .kompass__mitte { z-index: 1; } .kompass__arm { display: inline-block; padding: 0.55rem 0.9rem; border-radius: 2px; text-decoration: none; color: inherit; line-height: 1.35; } .kompass__arm b { display: block; letter-spacing: 0.04em; } .kompass__arm span { font-size: var(--t-small); opacity: 0.82; } .kompass__arm:hover b, .kompass__arm:focus-visible b { color: var(--gold-ink); } .kompass__pfeil { display: block; font-size: 1.1rem; color: var(--gold-ink); } .kompass__baum { margin: 0; } .kompass__baum video { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: var(--shadow-lift); } .kompass__name { margin-top: 0.6rem; text-align: center; font-size: var(--t-small); } .kompass__name b { letter-spacing: 0.04em; } @media (max-width: 40rem) { .kompass { grid-template-columns: 1fr 1fr; grid-template-areas: "oben oben" "mitte mitte" "links rechts" "unten unten"; } .kompass__arm--links { justify-self: start; text-align: left; } .kompass__arm--rechts { justify-self: end; text-align: right; } } /* Drucken. Ohne diesen Block liefert die Seite leere Absaetze: .reveal startet unsichtbar und wird beim Druck nie durch is-visible aufgehoben (Audit 2026-08-09, kritischer Befund). Die dunklen Baender wuerden zudem Toner verbrennen, ohne Information zu tragen. */ @media print { .reveal { opacity: 1 !important; transform: none !important; } .band--deep, .band--ausklang { background: none !important; color: #000 !important; } video, .kompass__baum { display: none !important; } /* Gedruckt hat ein Standortanzeiger keinen Sinn — auf Papier scrollt niemand. Die Regel steht IM vorhandenen Druckblock und nicht in einem zweiten: `web/tests/test_kopf.py` liest den letzten `@media print` der Datei als DEN Druckblock, und ein angehaengter zweiter hat am 15. August drei Drucktests umgeworfen. Ein Regelblock je Medium. */ .standort { display: none !important; } } /* Einfache Sprache: der ES-Knopf im Kopf und die Seite selbst. Iris, 9. August. Der Knopf traegt Buchstaben statt Piktogramm — ein unmissverstaendliches Zeichen fuer Einfache Sprache existiert nicht. */ /* „ES" waechst mit den Zeichen — Iris, 15. August: „the signs can fill out the circle almost to the edge". Zwei Buchstaben sind ein Zeichen wie jedes andere in dieser Kette; blieben sie klein, waere ausgerechnet der Knopf fuer Einfache Sprache der schwerst lesbare. Die Sperrung faellt dabei weg: bei dieser Groesse traegt sie nichts mehr und kostet Breite. */ /* Ohne Unterstrich: „ES" ist ein Link, und der Browser unterstreicht Links. In einer Reihe aus zwoelf Kreisen war das bisher ein feiner Strich unter genau einem Zeichen — bei 0,72 rem kaum sichtbar, bei 1 rem ein Fehler. Der Kreis ist hier die Auszeichnung, wie bei den elf anderen. */ .es-knopf { text-decoration: none; } .es-knopf span { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; } @media (max-width: 40rem) { .es-knopf span { font-size: 0.9rem; } } @media (max-width: 30rem) { .es-knopf span { font-size: 0.82rem; } } .es-seite p { max-width: 54ch; } .es-seite section { margin-block-start: 2rem; } /* MITTIG, seit dem 14. August — Iris: „können wir ausmitten." Die Sätze behalten ihre 54 Zeichen (kurze Zeilen SIND diese Seite), aber der Block steht jetzt auf der Mittellinie, auf der auch das Signet sitzt. Die Überschriften mittig wie überall; der Fliesstext bleibt linksbündig im mittigen Block — zentrierter Mehrzeilentext ist schwerer zu lesen, und Lesbarkeit ist hier nicht Stil, sondern der Zweck der Seite. */ .es-seite { max-width: 62ch; margin-inline: auto; } .es-seite > h1, .es-seite .section-head { text-align: center; } .es-seite p.lead { margin-inline: auto; } .es-seite section h2 { text-align: center; } .es-seite section p, .es-seite__hinweis { margin-inline: auto; } .es-seite__hinweis { color: var(--ink-2); margin-block-start: 2.5rem; } /* --- Der Regentropfen ---------------------------------------------------- Eine Leinwand über dem Inhalt, die nichts verdeckt und nichts abfängt: `pointer-events: none` und keine Hintergrundfarbe. Genau das war der erste Befund am gelieferten Paket — dort lag im Nachtmodus eine deckend schwarze Fläche über der ganzen Website (§5c). Hier ist keine. `z-index: 30` liegt unter der klebenden Kopfzeile (50) und über dem Fliesstext. Der Tropfen zieht also vor dem Text vorbei und verschwindet sauber hinter der Navigation, statt über ihr zu schweben. Sichtbar ist das Element nur, wenn `tropfen.js` es freigibt — ohne JavaScript bleibt `hidden` stehen, und dann ist hier nichts. */ .tropfen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 30; inline-size: 100%; block-size: 100%; pointer-events: none; } /* Der Tagmodus kehrt die Farben um — Iris, 11. August: „ihn so dann auf Tag und Nachtmodus einfügen." Die Aufnahme ist ein leuchtender Tropfen vor Schwarz. Auf Creme ist ein leuchtender Tropfen nichts: gemessen an derselben Stelle war er auf Papier praktisch unsichtbar. Umgekehrt wird er zu dem, was ein Wassertropfen auf hellem Grund tatsächlich ist — eine Glaslinse mit dunklen Kanten. Der Regenbogen bleibt und kippt in seine Gegenfarbe. `invert()` lässt den Alphakanal in Ruhe und fasst nur die Farbwerte an; die freigestellten Ränder bleiben deshalb Ränder und werden nicht zu einem Saum. Das Attribut setzt `tropfen.js`, weil eine Medienabfrage die dritte Möglichkeit nicht kennt: «noch nichts gewählt» ist weder hell noch dunkel, und die Wahl steht in localStorage, nicht im System. */ /* **Und etwas Wasserfarbe dazu** — Iris, 11. August: „Wir können auf Creme auch etwas bläuchlich wie Wasser tropfen Farben." Nach der Umkehr liegt die Mitte des Regenbogens im Violett-Rosa; das ist richtig hübsch, aber es sieht nach Seifenblase aus, nicht nach Wasser. `hue-rotate` dreht die ganze Skala um 28 Grad Richtung Blau, `saturate(0.88)` nimmt der Umkehrung die Grellheit, `brightness(0.96)` holt die hellen Kanten von der Creme weg. Die Reihenfolge zählt: erst umkehren, dann drehen — umgekehrt drehte man die Farben der Aufnahme und bekäme nach der Umkehr wieder etwas anderes. */ .tropfen[data-tropfen-modus="tag"] { filter: invert(1) hue-rotate(28deg) saturate(0.88) brightness(0.96); } /* Die Giesser-Buehne (/start/): reserviert das Seitenverhaeltnis der Aufnahme, damit beim Wachsen nichts springt. Die Erde ist im Bildblatt — die Buehne selbst ist Papier; ohne JavaScript (und im Ruhemodus) bleibt sie eine ruhige Leerflaeche und behauptet nichts. */ .giesser-buehne { inline-size: 100%; max-inline-size: 40rem; margin-inline: auto; aspect-ratio: 1280 / 720; } /* Doppelter Boden zum Schalter im Skript: Ruhemodus und die Systemeinstellung kappen die Leinwand auch dann, wenn JavaScript ausfiele, während sie sichtbar ist. */ :root[data-motion="calm"] .tropfen { display: none; } @media (prefers-reduced-motion: reduce) { .tropfen { display: none; } } /* --- Personenseite (/ueber-uns/iris/) ------------------------------------- Die gelieferte Vorlage brachte ein vollständiges eigenes Farbsystem mit (--gold #f2c66d auf #080b14, Glasflächen, Farbverläufe). Übernommen ist davon die Anordnung, nicht die Palette: alle Farben unten sind Token dieser Website, damit `web/tests/test_contrast.py` auch für diese Seite rechnet. Eine zweite Palette wäre eine zweite Wahrheit — und die, die niemand nachmisst. */ .person__grid { display: grid; grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; } .person__karte { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 2px; background: var(--paper-raised); } .person__portrait { display: grid; place-items: center; aspect-ratio: 1; inline-size: 7.5rem; margin-block-end: 1.25rem; border-radius: 50%; } /* Fläche, Farbe und Monogramm kommen von `.member__portrait` — dieselbe dekorative SVG-Marke wie auf den Teamkarten, und damit dieselbe Ausnahme, die `test_contrast.py` für Marken-Gold kennt. Hier steht nur, was anders ist: rund statt 4:3, und feste Breite. */ .person__portrait svg { inline-size: 52%; block-size: auto; opacity: 0.75; } /* Seit dem 11. August steht dort ein Foto statt des Monogramms. `object-fit` erbt `.member__portrait img` nicht mit der runden Form — der Ausschnitt ist bereits quadratisch geschnitten, aber die Regel steht hier, damit ein späterer, anders beschnittener Ersatz nicht verzerrt. */ .person__portrait picture, .person__portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* Ring, Pille, Akzentwort — die drei Details aus Iris' Vorlage, 11. August: „layout still my fav". Alle drei nehmen `--gold-ink` beziehungsweise `--gold-on-deep` und wandern damit von selbst durch die vier Fassungen. */ .person__portrait { border: 3px solid var(--paper-raised); box-shadow: 0 0 0 2px var(--gold-ink); } .person__ab { display: inline-block; margin: 0 0 0.6rem; padding: 0.3rem 0.75rem; border: 1px solid var(--gold-ink); border-radius: 999px; color: var(--gold-ink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* Das eine farbige Wort im Titel. Es steht auf dem Kopfband, also auf `--gold-on-deep` und nicht auf `--gold-ink`: der Grund ist dort das Bild unter dem Schleier, nicht das Papier. Gemessen wird am gerenderten Bild. */ /* Das Akzentwort — Iris, 11. August: „Regenbogen Schriften von about me auf die ganze Seite übernehmen." Die Farbe hängt an einem eigenen Token, nicht direkt an `--gold-ink`. Grund, gemessen: der Titel der Startseite steht auf dem dunklen Kopfbild, und dort lag das Tagesgold bei **2,22:1** — durchgefallen. Auf Papier ist dasselbe Gold richtig, auf einem dunklen Grund ist es das falsche. Also entscheidet der Ort, nicht die Regel: jeder Bereich, der auf Dunkel sitzt, setzt `--akzent-farbe` selbst um. */ :root { --akzent-farbe: var(--gold-ink); } .hero, .personkopf, .kopfband--bild { --akzent-farbe: var(--gold-on-deep); } /* Die Volltonfarbe fuer Geraete ohne `background-clip: text` — und am Tag gilt seit dem 13. August ein anderer Grund. `--gold-ink` (#7d5c0f) misst auf dem Kunstwerk 1,8:1, `--gold-on-deep` (#ddbc6b) auf dem jetzt vollen Papier des Kopfband-Panels 1,9:1. Beide waren fuer Gruende gerechnet, die es an diesen Stellen nicht mehr gibt. #3d1f0c misst 3,83:1 auf dem Bild und 13,3:1 auf Papier (GERAETE §3: die Rueckfallebene muss tragen). */ :root[data-theme="light"] .hero, :root[data-theme="light"] .kopfband--bild { --akzent-farbe: #3d1f0c; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero, :root:not([data-theme="dark"]) .kopfband--bild { --akzent-farbe: #3d1f0c; } } .personkopf__akzent, .akzent { color: var(--akzent-farbe); } .personkopf__akzent { color: var(--gold-on-deep); } /* --- Sonnenaufgang am Tag, Diamant in der Nacht ------------------------- Iris, 12. August: „im Tagesmodus eher golden summer sonnen strahlen sunrise und im Nachtmodus eher silber diamont sunset (like the colors in our raindrop)." Zwei Verläufe, und beide sind **gegen den Grund unter dem Wort gemessen**, nicht nach Gefühl gewählt. Ein Verlauf hat keine Farbe, die man nachschlagen könnte — nur Bildpunkte, die man zählen kann. Geprüft wurde jede Zwischenstufe in Schritten von 5 %: Tag auf --paper #f7f3eb schlechtester Punkt 4,96:1 (#a8501a) Nacht auf --paper #0a1420 schlechtester Punkt 10,07:1 (#9fc3e6) **Warum der Tagverlauf dunkel ist, obwohl „golden" hell klingt.** Helles Gold auf warmem Weiss verschwindet — das ist auf dieser Website schon einmal gemessen worden, beim Signet im Kopf, und es gilt für Schrift genauso. `#f2c66d`, ihr eigener erster Goldton, steht auf Creme bei **1,46:1**: praktisch unlesbar. Der Verlauf hier nimmt denselben Sonnenaufgang, aber eine Stunde früher — tiefes Bernstein, Rost, Terrakotta, Altrosa, Morgenblau. Dieselbe Erzählung, lesbar. **Der Nachtverlauf sind die Farben des Tropfens.** `#cfe3f5` und `#b4d6f0` stehen so in `tropfen.js`; dazu ein warmer Anfang für den Sonnenuntergang und ein kühles Ende. Silber, Diamant, und am Rand die letzte Wärme des Tages. `@supports` ist kein Zierrat: `color: transparent` ohne `background-clip: text` ergibt **unsichtbaren Text**. Wo der Browser den Zuschnitt nicht kennt, greift der Block gar nicht erst und die Volltonfarbe von oben bleibt stehen. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { .akzent { /* ~~Fünf Literalstopps~~ → die Rolle. Iris, 16. August: „Schlagwörter (1-2) in all of" — das Schlagwort trägt denselben Regenbogen wie die grosse Überschrift, warm am Tag, kalt in der Nacht, Bronze im Ruhemodus. Eine Rampe an einer Stelle gesetzt statt an vier. */ background-image: var(--schriftakzent); /* 100 %, NICHT 250 % — Iris, 14. August: „What happened to the colorful wordings, that is missing everywhere." Sie waren nie weg, man sah sie nur nicht. Bei 250 % zeigt ein zwei Wörter kurzer Span nur seinen ersten Halt; gemessen lag die Farbspannweite über alle Glyphen von „nicht allein" bei **R 2, G 3, B 4** — das ist kein Verlauf, das ist eine Volltonfarbe, und zwar zufällig fast dieselbe Bronze wie die Metallschrift der Überschrift ringsum. Das Akzentwort war also da und unsichtbar zugleich. Bei 100 % passt die ganze Strecke von Bronze über Pflaume nach Blau in das Wort, und es hebt sich wieder ab. */ background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } /* Der Schalter im Kopf entscheidet zuerst, die Systemeinstellung hat das letzte Wort. Der erste Anlauf hatte nur den Schalter — und lief damit auch bei „Bewegung reduzieren" weiter. Aufgefallen ist es beim Messen: der Verlauf wanderte zwischen den zwei Aufnahmen und meldete 1,33:1, wo 4,96 stehen. Ein bewegter Verlauf verfälscht jede Kontrastmessung, und eine Bewegung ohne Bremse ist ein Fehler für sich. */ /* ZWEI SONNENAUFGÄNGE, WEIL ES ZWEI GRÜNDE GIBT. Der erste Anlauf hatte nur den dunklen Verlauf, gerechnet gegen die Cremefarbe. Gemessen im Browser stand er dann bei **1,33:1** — weil die Überschriften, an denen er hängt, gar nicht auf Creme stehen, sondern auf dem tiefen Panel (`rgba(7 19 16 / 88%)`), das seit dem 12. August hinter den Abschnittsköpfen liegt. Dunkles Bernstein auf fast schwarzem Grün ist kein Verlauf, sondern ein Loch. Eine Farbe ist nur gegen den Grund richtig, gegen den sie gemessen wurde. Also zwei Rampen, dieselbe Erzählung: auf Creme #8a5a12 → #2f5d8a schlechtester Punkt 4,96:1 auf Tiefe #f7d79a → #a9c8f0 schlechtester Punkt 9,44:1 Die helle Rampe ist der Sonnenaufgang eine Stunde später: Morgengold, Apricot, Altrosa, Flieder, Himmelblau. */ /* Die dunklen Gründe dieser Website, gemessen statt geraten: der Held (`rgb(10 31 51)`) und das Panel hinter jedem Abschnittskopf über einem Kopfbild (`.kopfband .section-head`, `rgba(7 19 16 / 88%)`). Dazu die tiefen Bänder. */ .band--deep .akzent, .hero .akzent, .kopfband .akzent, [class*="--on-deep"] .akzent { /* Auf tiefem Grund braucht das Schlagwort HELLE Stopps, und zwar in beiden Modi — die Nacht bringt sie ohnehin mit, der Tag nicht. Deshalb eine zweite Rolle statt einer zweiten Themenabfrage. */ background-image: var(--schriftakzent-tief); } /* AM TAG IST DER KOPF KEIN TIEFER GRUND MEHR — 13. August, abends. Die helle Rampe oben (#f7d79a …) ist fuer Navy gerechnet, 9,44:1. Seit das Band im Tagkopf weg ist, steht „nicht allein" auf dem Kunstwerk und am Telefon auf Papier; gemessen kam die helle Rampe dort auf **1,0 bis 2,25:1** — der Akzent war die schwaechste Stelle des ganzen Kopfes, und ausgerechnet er traegt Iris' wichtigstes Wortpaar. Dieselbe Erzaehlung, ganz nach unten gezogen: Bernstein, Kupfer, Pflaume, Tiefblau — vier dunkle Toene statt vier heller. Jeder Stopp einzeln gegen den schlechtesten Bildpunkt unter der Schlagzeile (L 0,218 nach dem Hauch) und gegen Papier gerechnet: #3d1f0c 3,83:1 / 13,3:1 #3a1428 4,09:1 / 14,2:1 #2f2205 3,96:1 / 13,8:1 #14243c 3,98:1 / 13,9:1 Grosse Schrift verlangt 3,0 — alle vier tragen, auf beiden Gruenden. Der Akzent unterscheidet sich damit am Tag nicht mehr durch Helligkeit, sondern durch Farbe; das ist auf einem hellen Bild ohnehin die ehrlichere Auszeichnung. */ :root[data-theme="light"] .hero .akzent, :root[data-theme="light"] .kopfband--bild .akzent { background-image: linear-gradient(100deg, #3d1f0c, #2f2205, #3a1428, #14243c); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero .akzent, :root:not([data-theme="dark"]) .kopfband--bild .akzent { background-image: linear-gradient(100deg, #3d1f0c, #2f2205, #3a1428, #14243c); } } @media (prefers-reduced-motion: no-preference) { :root[data-motion="full"] .akzent { animation: verlaufWandern 14s ease infinite; } } } /* --- CHROM, NEON UND BRONZE --------------------------------------------- Iris, 12. August, in fünf Nachrichten kurz nacheinander: „auch alle kleineren wichtige schriftzüge sollen den regenbogeneffect in night und day mode erhalten" „zumindest alle überschriften" „auf tag goldener und auf nacht silbener" „bei bewegungslos eher auf bronze" „In General, we can use chrome effect for day and neon for night" FÜNF VERFEINERUNGEN, EIN SYSTEM. Jede einzelne hätte man fest verdrahten können; zusammengenommen sagen sie etwas anderes — dass das **Material** der Schrift vom Zustand abhängt und nicht ein für alle Mal feststeht. Deshalb stehen die drei Verläufe als Token und nicht in den Regeln: eine sechste Verfeinerung ändert dann eine Zeile und nicht dreissig. DREI ZUSTÄNDE, und der dritte ist ihr eigener Einfall: heller Grund, Bewegung erlaubt Chrom dunkler Grund oder Nacht Neon Ruhemodus oder reduzierte Bewegung Bronze Bronze bei Bewegungslosigkeit ist genau richtig gedacht: ein Verlauf, der nicht wandern darf, will kein wanderndes Material sein. Chrom ohne Bewegung ist ein grauer Fleck, Neon ohne Bewegung ist Behauptung; Bronze ist ruhig, weil Bronze ruhig ist. ALLES GEMESSEN, JEDE 5-%-STUFE, gegen jeden Grund, auf dem die Schrift vorkommt. Kleine Schrift verlangt 4,5:1 — und «kleine wichtige Schriftzüge» sind genau das, deshalb gilt hier nirgends die mildere Grossschrift-Schwelle von 3:1: Chrom auf Creme #f7f3eb schlechtester 4,57:1 bei 40 % (#62717c) Neon auf Nacht #0a1420 schlechtester 7,58:1 bei 45 % (#c98cf9) Neon auf Band #102a43 schlechtester 5,99:1 bei 45 % Bronze hell #f7f3eb schlechtester 5,28:1 bei 50 % Bronze dunkel #102a43 schlechtester 6,64:1 WARUM CHROM DUNKEL IST, obwohl Chrom hell glänzt. Dasselbe wie beim Gold heute Nachmittag: eine helle Legierung auf warmem Weiss verschwindet. Chrom lebt ohnehin nicht von der Helligkeit, sondern von der **Kante** zwischen hell und dunkel — hier ist es poliertes Metall von der dunklen Seite gesehen. Anthrazit, Stahl, ein warmer Reflex, wieder Stahl. WARUM CHROM AUF DUNKLEN BÄNDERN NICHT GILT: gemessen 1,20:1. Auf dunklem Grund ist die dunkle Seite des Chroms unsichtbar. Dort steht Neon, in beiden Modi — dieselbe Regel, die diese Website für `--gold-on-deep` schon immer hatte. */ :root { /* #6b7a86 war der hellste Stopp (L 0,188) und misst auf Papier nur **3,93:1** — genug fuer eine Ueberschrift (3,0), zu wenig fuer die Augenbraue daneben, die mit 11,5 px kleine Schrift ist und 4,5 braucht. Gemessen am 13. August, als das Metall die Koepfe wieder erreichte. Die drei hellsten Stopps sind deshalb je eine Stufe abgesenkt (#6b7a86 → #5a6874, #7a6a4a → #6c5e3f, #55636f → #4e5b66): schlechtester Stopp jetzt **4,68:1 auf `--paper-sunk`** (dem dunkelsten hellen Grund, auf dem eine Augenbraue steht), 5,17:1 auf Papier und 5,34:1 auf dem Schnee des Kunstwerks. Die Kante zwischen hell und dunkel, von der Chrom lebt, bleibt — sie faengt nur eine Stufe tiefer an. */ --schrift-chrom: linear-gradient(100deg, #33414c, #54646f, #2b3742, #5a6874, #3d4b56, #6c5e3f, #2f3d48, #4e5b66, #33414c); --schrift-neon: linear-gradient(100deg, #eaf4ff, #7ef9e0, #5ad1ff, #c08cff, #ff8ad4, #ffd98a, #a8f5c8, #eaf4ff); /* CHROM, DUNKLE SEITE — fuer Schrift, die am Tag DIREKT auf dem Kunstwerk steht, seit das Band dort weg ist (13. August). Das normale Chrom hat helle Stopps (#6b7a86, L 0,188). Auf Papier ist das richtig; auf dem mitteldunklen Himmel der Zeichnung (L 0,188 bis 0,266) verschwindet genau dieser Stopp — gemessen 1,0:1. Also dieselbe Erzaehlung, nur ganz von der dunklen Seite: poliertes Metall im Schatten. Jeder Stopp einzeln gegen den schlechtesten Bildpunkt (L 0,188) gerechnet, Schwelle 3,0 fuer die grosse Schlagzeile: #0e1a20 4,01:1 #1f2d36 3,20:1 #14211b 3,77:1 #1b2a33 3,34:1 Auf dem hellen Schnee derselben Zeichnung (L 0,872) misst der hellste Stopp 12,4:1. Der Verlauf traegt also ueber das ganze Bild. */ --schrift-chrom-tief: linear-gradient(100deg, #0e1a20, #1f2d36, #14211b, #1b2a33, #0e1a20); /* SILBER — Iris, 13. August: „auf day mode auch neon aber golden in night mode eher silber". Neon ist ein herrlicher Verlauf auf FLACHEM tiefem Grund (gemessen 5,99 bis 7,58:1 auf #102a43). Auf dem Nachtbild ist der Grund aber nicht flach: die Zeichnung traegt helle Gruenkeile mit L bis 0,194, und Neons mittlere Stopps (#c08cff, L 0,36) messen dort **1,7:1**. Das war schon vor dieser Aenderung so — sichtbar wurde es erst, als das Metall die Schlagzeile ueberhaupt wieder erreichte. Silber ist Neon ohne die mittleren Toene: jeder Stopp heller als L 0,75, damit auch der hellste Bildpunkt der Nacht noch 3,3:1 traegt (grosse Schrift, Schwelle 3,0). Auf Navy misst derselbe Verlauf 11,7:1. Deshalb: Silber auf dem Bild, Neon auf den tiefen Baendern. */ --schrift-silber: linear-gradient(100deg, #ffffff, #dfe9f5, #f2f7f4, #d7e3ee, #eaf4ff, #ffffff); /* --- DIE LEGIERUNGEN NACH IRIS' ORDNUNG, 16. August ------------------- Wörtlich: „Gold ist für Tag, Silber für die Nacht, Bronze für Bewegungsfreiheit, dann rainbow for big Überschriften, and Schlagwörter (1-2) in all of. Then suaccents mit den chrome effect. Am Tag mehr gelb-pink (warm) und Nacht Modus mehr pink-green (kalt, neon, green)." Damit ist die Zuteilung keine Geschmacksfrage mehr, sondern eine Tabelle: grosse Überschrift · Schlagwort Regenbogen warm / kalt übrige Überschriften Gold / Silber Unter-Akzente Chrom Ruhemodus, überall Bronze JEDER STOPP IST GEMESSEN, gegen jeden Grund, auf dem er vorkommt, und zwar gegen die strenge Schwelle 4,5:1 — nicht gegen die mildere 3,0 für grosse Schrift. Grund: dieselben Verläufe tragen auch `.h3`, und ein Verlauf, der nur als Schlagzeile trägt, wandert früher oder später an eine kleinere Stelle. GOLD MUSSTE ZWEIMAL DUNKLER. Der erste Wurf (#a07d1c als hellster Stopp) misst auf `--paper-sunk` nur **3,15:1**. Das ist derselbe Befund wie am 13. August, als Gold schon einmal an dieser Stelle scheiterte: eine helle Legierung auf warmem Weiss verschwindet. Der hellste Stopp, der trägt, ist **#8a611c mit 4,51:1** — gerechnet, nicht geraten, indem bei festem Farbton die Helligkeit gesenkt wurde, bis die Schwelle fiel. Gold bleibt Gold; es ist nur Gold im Schatten. */ --schrift-gold: linear-gradient(100deg, #4e390d, #6f5014, #8a611c, #6f5014, #4e390d); /* Warm: gelb über orange und rot nach magenta. Fünf Farbtöne, jeder einzeln auf seine hellste tragfähige Fassung gerechnet — schlechtester Stopp 4,51:1 auf `--paper-sunk`. */ --schrift-regenbogen-warm: linear-gradient(100deg, #7d6413, #965a1e, #b04535, #b83762, #b5338a); /* Kalt: pink über violett und mint nach Limette — Iris' 🍋‍🟩. Auf dunklem Grund darf es leuchten; schlechtester Stopp 4,94:1, und zwar auf dem hellsten Grund, den die Nacht kennt (der Himmel des Bergbandes). */ --schrift-regenbogen-kalt: linear-gradient(100deg, #ff8ad4, #d78cff, #7ef9e0, #b6f56a, #eaf4ff); /* Warm, aber von der hellen Seite — für Schlagwörter, die AM TAG auf einem tiefen Grund stehen (der Held, das Panel hinter jedem Abschnittskopf über einem Kopfbild, die tiefen Bänder). Dieselbe Erzählung wie die dunkle warme Rampe, eine Stunde später am Morgen: Gold, Apricot, Altrosa, Rosé. Gemessen 5,63:1 im schlechtesten Fall, und das ist der Himmel des Bergbandes. */ --schrift-regenbogen-warm-tief: linear-gradient(100deg, #f7d79a, #f6c08a, #f2a0a6, #efa0cf, #f9dcb0); /* DIAMANT — die Nachtfassung des Schlagworts auf dem KUNSTWERK, und der einzige Grund, aus dem sie neben dem kalten Regenbogen weiterbesteht. Iris' Ordnung vom 16. August gilt überall, wo der Grund gleichmässig ist. Das Kopfbild ist das nicht: es trägt nachts helle Grünkeile bis L 0,194, und dort messen die MITTLEREN Stopps eines Regenbogens 1,7:1 — gemessen am 13. August für Neon, und für das Violett des kalten Regenbogens (#d78cff) gilt dieselbe Rechnung. Diamant ist der Regenbogen ohne seine mittleren Töne: jeder Stopp heller als L 0,75. Dasselbe am Tag mit Gold: auf dem mittelhellen Himmel der Zeichnung misst der hellste Goldstopp **1,51:1**. Ein Bild, dessen Helligkeit über die Fläche wandert, verträgt kein Metall, das von seiner Farbe lebt — nur eines, das von der Kante zwischen hell und dunkel lebt. Deshalb steht dort weiterhin Chrom und hier Diamant. */ --schrift-diamant: linear-gradient(100deg, #f0e6d2, #dbe8f7, #b4d6f0, #cfe3f5, #9fc3e6); --schrift-bronze-hell: linear-gradient(100deg, #7a4a12, #8c5a1e, #6d4415); --schrift-bronze-dunkel: linear-gradient(100deg, #d9b88a, #e8cfa8, #cfa877); } /* Die Auswahl: welcher Verlauf gilt hier gerade. Eine Eigenschaft, an einer Stelle gesetzt — die Regeln unten fragen nur noch danach. */ /* ~~Chrom als Tagmetall~~ → **Gold**, nach Iris' Ordnung vom 16. August. Chrom bleibt und wechselt die Aufgabe: es ist ab jetzt das Metall der Unter-Akzente („suaccents mit den chrome effect"), also der Augenbrauen und Beschriftungen — die Stelle, an der es ohnehin am besten misst (4,68:1 auf `--paper-sunk`, der schlechteste helle Grund). `--schriftakzent` ist neu und trägt die zweite Zuweisung ihrer Ordnung: den Regenbogen für die grosse Überschrift und für das Schlagwort. Zwei Eigenschaften statt einer, weil es ab jetzt zwei Rollen sind — und beide werden an genau einer Stelle gesetzt, die Regeln weiter unten fragen nur noch danach. */ :root { --schriftmetall: var(--schrift-gold); --schriftakzent: var(--schrift-regenbogen-warm); --schriftakzent-tief: var(--schrift-regenbogen-warm-tief); --schriftunterakzent: var(--schrift-chrom); } /* BRONZE FÜR BEWEGUNGSFREIHEIT — Iris' Wort, und es war schon so gebaut. Im Ruhemodus tragen ALLE DREI Rollen Bronze: ein Verlauf, der nicht wandern darf, will kein wanderndes Material sein, und drei stehende Verläufe nebeneinander wären drei Flecken statt einer Ordnung. */ :root[data-motion="calm"] { --schriftmetall: var(--schrift-bronze-hell); --schriftakzent: var(--schrift-bronze-hell); --schriftakzent-tief: var(--schrift-bronze-dunkel); --schriftunterakzent: var(--schrift-bronze-hell); } .band--deep, .hero, .kopfband, [class*="--on-deep"], .band--ausklang { --schriftmetall: var(--schrift-neon); } /* AM TAG IST DER KOPF KEIN TIEFER GRUND MEHR — Iris, 13. August: „ich moechte die Kopfbilder wieder klar sehen". Seit das Band weg ist, steht die Schlagzeile auf dem hellen Kunstwerk (Schnee L 0,93) und auf hellem Papier, nicht auf Navy. Neon waere dort unlesbar, Chrom ist dafuer gebaut: schlechtester Verlaufsstopp #6b7a86 auf L 0,93 misst **4,12:1**, und die Schlagzeile ist grosse Schrift (Schwelle 3,0). Auf Papier (L 0,883) misst derselbe Stopp 3,93:1 — auch dort ueber der Schwelle. Chrom ist damit Iris' Tagmetall, so wie sie es benannt hat. */ Im Ruhemodus gilt hier dasselbe wie ueberall: Bronze statt Chrom, denn ein Verlauf, der nicht wandern darf, will kein wanderndes Material sein (#7a4a12 auf Schnee L 0,93 misst 7,4:1). Deshalb steht `:not([data-motion="calm"])` in der Bedingung — sonst gewaenne diese spaetere Regel gegen die Ruhemodus-Regel weiter unten. */ :root[data-theme="light"]:not([data-motion="calm"]) .hero { --schriftmetall: var(--schrift-chrom-tief); } /* Der Abschnittskopf auf dem Foto steht seit heute auf VOLLEM Papier (siehe `.kopfband--bild .section-head`) — dort traegt das gewoehnliche Chrom, schlechtester Stopp 3,93:1 auf Papier, und es glaenzt heller als die dunkle Seite, die das Kunstwerk verlangt. */ :root[data-theme="light"]:not([data-motion="calm"]) .kopfband--bild { --schriftmetall: var(--schrift-chrom); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-motion="calm"]) .hero { --schriftmetall: var(--schrift-chrom-tief); } :root:not([data-theme="dark"]):not([data-motion="calm"]) .kopfband--bild { --schriftmetall: var(--schrift-chrom); } } @media (prefers-reduced-motion: reduce) { :root:not([data-theme="dark"]) .hero, :root:not([data-theme="dark"]) .kopfband--bild { --schriftmetall: var(--schrift-bronze-hell); } } /* Und die Nacht auf dem Bild: Silber statt Neon, Begruendung am Token. */ :root[data-theme="dark"]:not([data-motion="calm"]) .hero, :root[data-theme="dark"]:not([data-motion="calm"]) .kopfband--bild { --schriftmetall: var(--schrift-silber); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-motion="calm"]) .hero, :root:not([data-theme="light"]):not([data-motion="calm"]) .kopfband--bild { --schriftmetall: var(--schrift-silber); } } :root[data-motion="calm"] .band--deep, :root[data-motion="calm"] .hero, :root[data-motion="calm"] .kopfband, :root[data-motion="calm"] [class*="--on-deep"], :root[data-motion="calm"] .band--ausklang { --schriftmetall: var(--schrift-bronze-dunkel); } @media (prefers-reduced-motion: reduce) { :root { --schriftmetall: var(--schrift-bronze-hell); --schriftakzent: var(--schrift-bronze-hell); --schriftakzent-tief: var(--schrift-bronze-dunkel); --schriftunterakzent: var(--schrift-bronze-hell); } .band--deep, .hero, .kopfband, [class*="--on-deep"], .band--ausklang { --schriftmetall: var(--schrift-bronze-dunkel); --schriftakzent: var(--schrift-bronze-dunkel); --schriftunterakzent: var(--schrift-bronze-dunkel); } } /* Nacht: Neon überall, Bronze im Ruhemodus. Beide Wege — ausdrücklich gewählt und vom Gerät geerbt —, sonst bekäme genau die Hälfte der Leute den Effekt nicht, die ihn nie einschalten musste. */ /* ~~Neon~~ → **Silber** als Nachtmetall, Regenbogen kalt als Akzent. Neon bleibt als Token in der Datei: es ist der Verlauf der tiefen Bänder und wird dort weiter gebraucht. */ :root[data-theme="dark"] { --schriftmetall: var(--schrift-silber); --schriftakzent: var(--schrift-regenbogen-kalt); --schriftakzent-tief: var(--schrift-regenbogen-kalt); --schriftunterakzent: var(--schrift-silber); } :root[data-theme="dark"][data-motion="calm"], :root[data-theme="dark"][data-motion="calm"] .band--deep { /* Alle drei Rollen, nicht nur das Metall — im ersten Wurf trug die Augenbraue nachts im Ruhemodus weiterhin Silber, gemessen im Browser. Ein stehender Verlauf neben zwei stehenden anderen ist kein Effekt mehr, sondern ein Fleck; „Bronze für Bewegungsfreiheit" heisst Bronze für alles, was sonst wandern würde. */ --schriftmetall: var(--schrift-bronze-dunkel); --schriftakzent: var(--schrift-bronze-dunkel); --schriftakzent-tief: var(--schrift-bronze-dunkel); --schriftunterakzent: var(--schrift-bronze-dunkel); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --schriftmetall: var(--schrift-silber); --schriftakzent: var(--schrift-regenbogen-kalt); --schriftakzent-tief: var(--schrift-regenbogen-kalt); --schriftunterakzent: var(--schrift-silber); } :root:not([data-theme="light"])[data-motion="calm"] { --schriftmetall: var(--schrift-bronze-dunkel); --schriftakzent: var(--schrift-bronze-dunkel); --schriftakzent-tief: var(--schrift-bronze-dunkel); --schriftunterakzent: var(--schrift-bronze-dunkel); } } /* Und angewendet. `@supports` ist kein Zierrat: `color: transparent` ohne `background-clip: text` ergibt **unsichtbaren Text** — hier wäre das jede Überschrift der Website. Wo der Browser den Zuschnitt nicht kennt, greift der Block gar nicht erst und die Volltonfarbe bleibt stehen. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { .h1, .h2, .h3, .eyebrow, .label-block { background-image: var(--schriftmetall); background-size: 250% 250%; -webkit-background-clip: text; background-clip: text; color: transparent; } /* DREI ROLLEN, IRIS' ORDNUNG VOM 16. AUGUST. Die Regel oben bleibt der Grundfall; die zwei darunter sind die Ausnahmen, und sie stehen NACH ihr, weil bei gleicher Spezifität die spätere Regel gewinnt. `.h1` ist die „big Überschrift" — eine je Seite, das ist hier eine harte Regel (genau ein `<h1>` pro Seite, von den Prüfern erzwungen). Der Regenbogen bleibt damit von selbst der Ausnahmefall, den sie beschreibt, und wird nicht zur Tapete. `background-size: 100%` und nicht 250% beim Schlagwort — das ist am 14. August schon einmal gemessen worden: bei 250 % zeigt ein zwei Wörter kurzer Span nur seinen ersten Halt, die Farbspannweite lag über alle Glyphen bei R 2, G 3, B 4. Das ist kein Verlauf, das ist eine Volltonfarbe. Iris' „(1-2)" ist also nicht nur eine Mengenangabe, sondern der Grund für diese Zeile. */ .h1 { background-image: var(--schriftakzent); } .eyebrow, .label-block { background-image: var(--schriftunterakzent); } /* Nur wenn Bewegung erlaubt ist — dieselbe doppelte Anbindung wie überall auf dieser Website: erst der Knopf im Kopf, den ein Mensch gedrückt hat, dann die Systemeinstellung. */ :root[data-motion="full"] .h1, :root[data-motion="full"] .h2, :root[data-motion="full"] .h3, :root[data-motion="full"] .eyebrow, :root[data-motion="full"] .label-block { animation: verlaufWandern 16s ease infinite; } } /* Der Regenbogen — Iris, 11. August: „Can we do this one in regards to rainbow night mode pls?" Nur in **Neon bei Nacht**. Nicht überall: ein Verlauf ist ein Effekt, und ein Effekt auf jeder Fassung ist keiner mehr. Die Höhle behält ihre eine Limette, der Morgen sein Beerenrosa, das Haus sein Messing. `@supports` ist hier kein Zierrat. `color: transparent` ohne `background-clip: text` ergibt **unsichtbaren Text** — der Titel hiesse dann „Der Mensch CareJourney". Wo der Browser den Zuschnitt nicht kennt, greift der Block gar nicht erst und die Volltonfarbe von oben bleibt. Alle vier Stufen sind gegen den Grund unter dem Wort gemessen, nicht gegen ein Token: schwächste 8,29:1. Ein Verlauf hat keine Farbe, die man nachschlagen könnte — nur Pixel, die man zählen kann. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { /* DER REGENBOGEN BLEIBT, WO ER IST — auf der Personenseite. Iris am 12. August: „hinter hast du in regenbogenfarben effekt, das gefällt mir sehr gut". Was sie lobt, nimmt man ihr nicht weg; die Bitte um Silber und Diamant galt „auf der ganzen Webseite", und das ist alles andere. */ :root[data-theme="dark"] body[data-seite="person"] .akzent, :root[data-theme="dark"] body[data-seite="person"] .personkopf__akzent { /* Iris' eigene fünf Stufen aus `irisabout.html` (11. August, „FOUND IT, LET USE THIS MOCK UP"): Gold, Rosé, Violett, Blau, Grün — mit ihrem `background-size: 250%`, das dem Verlauf den Weg gibt, den die Bewegung abfährt. Nicht meine Limette-Variante von vorhin. */ background-image: linear-gradient( 100deg, #f2c66d, #ed8eac, #ab8cff, #7bb8ff, #82d9b4 ); background-size: 250% 250%; -webkit-background-clip: text; background-clip: text; color: transparent; } /* Die Bewegung, 12 Sekunden, wie in der Vorlage. Zweifach angebunden: an den Lebendig-Modus dieser Website **und** an `prefers-reduced-motion`. Ihre Vorlage kannte nur das Zweite; hier entscheidet zuerst der Knopf im Kopf, den ein Mensch selbst gedrückt hat. Steht er auf Ruhe, steht auch der Verlauf — er bleibt sichtbar, nur unbewegt. */ /* Silber und Diamant für alles ausserhalb der Personenseite. */ :root[data-theme="dark"] body:not([data-seite="person"]) .akzent { /* ~~Diamant überall~~ → der kalte Regenbogen, Iris' Ordnung vom 16. August. Diamant bleibt für das Kunstwerk, siehe unten. */ background-image: var(--schriftakzent); } /* Auf dem Kopfbild bleibt Diamant, und zwar gemessen: der kalte Regenbogen trägt sein Violett (#d78cff) in der Mitte, und genau dieser Ton misst auf den hellen Grünkeilen der Nachtzeichnung 1,7:1. */ :root[data-theme="dark"] .hero, :root[data-theme="dark"] .kopfband--bild { --schriftakzent-tief: var(--schrift-diamant); } :root[data-motion="full"][data-theme="dark"] .akzent, :root[data-motion="full"][data-theme="dark"] body[data-seite="person"] .personkopf__akzent { animation: verlaufWandern 12s ease infinite; } } /* Und derselbe Regenbogen für das Gerät, das ohne ausdrückliche Wahl auf dunkel steht. Ohne diesen Block bekäme es die Volltonfarbe — der Effekt wäre genau für die Leute weg, die den Nachtmodus gar nie einschalten mussten. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-seite="person"] .akzent, :root:not([data-theme="light"]) body[data-seite="person"] .personkopf__akzent { background-image: linear-gradient( 100deg, #f2c66d, #ed8eac, #ab8cff, #7bb8ff, #82d9b4 ); background-size: 250% 250%; -webkit-background-clip: text; background-clip: text; color: transparent; } /* Silber und Diamant überall sonst — dieselbe Trennung wie beim ausdrücklich gewählten Nachtmodus eine Regel weiter oben. */ :root:not([data-theme="light"]) body:not([data-seite="person"]) .akzent { background-image: linear-gradient(100deg, #f0e6d2, #dbe8f7, #b4d6f0, #cfe3f5, #9fc3e6); background-size: 250% 250%; -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-motion="full"]:not([data-theme="light"]) .akzent, :root[data-motion="full"]:not([data-theme="light"]) body[data-seite="person"] .personkopf__akzent { animation: verlaufWandern 12s ease infinite; } } } @keyframes verlaufWandern { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .personkopf__akzent, .akzent { animation: none; } } /* --- STRAHLEN AM TAG, GLITZER IN DER NACHT ------------------------------ Iris, 13. August: „with subject coloring, slight rays for day and glitter for night." Die Farbe des Akzents stand schon (Sonnenaufgang am Tag, Diamant in der Nacht); dazu kommt jetzt das Licht darum herum. Zwei Schichten, beide reine Dekoration, beide für assistive Technik unsichtbar — Pseudoelemente stehen in keinem Barrierefreiheitsbaum. WARUM DIE STRAHLEN DAS WORT NICHT BERÜHREN. Am Tag steht dunkle Schrift auf Creme, und jede Aufhellung unter den Buchstaben senkt den Kontrast an genau der Stelle, an der er gemessen wurde (schlechtester Punkt des Tagverlaufs: 4,96:1 — vier Hundertstel über der Schwelle). Deshalb trägt die Strahlenschicht eine Maske, die in der Mitte **durchsichtig** ist: sie zeichnet nur den Ring ausserhalb der Schrift. Der gemessene Wert bleibt damit der gemessene Wert; kein Bildpunkt der Buchstaben ändert sich. Nachts ist es umgekehrt und darum ungefährlich: heller Akzent auf tiefem Grund, und Glitzer ist zusätzliches Licht. Ein heller Punkt neben heller Schrift nimmt ihr nichts. Deshalb darf der Glitzer über die ganze Fläche. BEIDES NUR IM LEBENDIG-MODUS. Dieselbe doppelte Anbindung wie überall: erst der Knopf, den ein Mensch gedrückt hat, dann die Einstellung, die sein Gerät mitbringt. Im Ruhemodus steht der Akzent in Bronze und ganz ohne Licht — ein Verlauf, der nicht wandern darf, will auch nicht funkeln. */ .akzent { position: relative; } /* ZWEI STRAHLENKRÄNZE, EINER ZU VIEL — Iris, 18. August: „Die Sonne im Kopf hat immer noch ein Fehler aka 2 Strahlenkränze." Sie hatte recht, und der Grund ist Geschichte: Am 13. August bekam das Akzentwort einen Strahlenkranz („slight rays for day"), **weil die Sonne im Kopfbild damals keine hatte** — das steht als Befund in `scripts/make_kopf_sonne.py`: „die Sonne im Bild hatte gar keine Strahlen. Was aussah wie ihre Strahlen, war der Kegelverlauf um das Akzentwort." Danach bekam die gemalte Sonne ihre echten Strahlen. Der CSS-Kranz blieb stehen — und seither zeichnen zwei Systeme Licht, aus **zwei verschiedenen Mitten**: die Sonne sitzt hinter „allein", der Kranz auf „finden.". Im Screenshot sind es zwei Sternchen nebeneinander. Behoben, wo das Problem ist und nur dort: im Kopfbereich zeichnet die Sonne, überall sonst bleibt der Kranz. Auf einer Leistungsseite gibt es keine gemalte Sonne — dort ist er das einzige Licht und nimmt niemandem etwas weg. Der Nachtglitzer (`::after`) bleibt überall: er ist kein zweiter Kranz, sondern Funkeln, und hat keine Mitte, die konkurrieren könnte. */ .hero .akzent::before { content: none; } .akzent::before, .akzent::after { content: ""; position: absolute; pointer-events: none; opacity: 0; } /* Die Strahlen: ein Kegelverlauf mit schmalen Speichen, elliptisch maskiert. Die Maske ist bis 58 % der Achse leer — dort stehen die Buchstaben. */ .akzent::before { /* AUSGEMITTET — Iris, 13. August: „sonnenstrahlen sind nicht ausgemittet". Der erste Bau war ein breites Rechteck (Wortbreite plus Rand), das sich mitsamt seiner elliptischen Maske drehte — bei jeder Vierteldrehung kippte die Geometrie sichtbar aus der Mitte. Ein Quadrat, in der Wortmitte verankert, mit KREISrunder Maske, ist unter Drehung deckungsgleich mit sich selbst: es KANN nicht mehr eiern. Ohne aspect-ratio (Safari < 15) bleibt die Höhe null und die Strahlen fehlen ganz — Kür darf stumm ausfallen (GERAETE_KOMPATIBILITAET §2). */ top: 50%; left: 50%; right: auto; bottom: auto; width: 210%; aspect-ratio: 1; transform: translate(-50%, -50%); /* WEICHE KANTEN, NICHT HARTE. Der erste Anlauf hatte `0deg 1.6deg` — Speichen mit senkrechtem Abbruch — und im Bild sah das aus wie Kratzer auf dem Kopfbild, nicht wie Licht. Ein Strahl hat keinen Rand. Drei Haltepunkte je Speiche (aus, hell, aus) geben ihm den Verlauf, den er braucht, und `blur` nimmt den Rest der Härte. */ background: repeating-conic-gradient(from 8deg at 50% 50%, rgb(246 214 154 / 0%) 0deg, rgb(246 214 154 / 26%) 1.3deg, rgb(246 214 154 / 0%) 2.9deg, rgb(246 214 154 / 0%) 13deg); filter: blur(1.1px); -webkit-mask-image: radial-gradient(circle at 50% 50%, rgb(0 0 0 / 0%) 0 32%, rgb(0 0 0 / 62%) 48%, rgb(0 0 0 / 0%) 68%); mask-image: radial-gradient(circle at 50% 50%, rgb(0 0 0 / 0%) 0 32%, rgb(0 0 0 / 62%) 48%, rgb(0 0 0 / 0%) 68%); } /* Der Glitzer: neun Punkte, aus den Farben des Regentropfens. Keine `<span>`-Kette wie im Kopfbild — der Akzent ist ein Wort in einem Satz und verträgt keine Kinder im Markup, sonst müsste jede Überschrift der Website umgebaut werden. Neun Punktverläufe in einer Eigenschaft tun dasselbe. */ .akzent::after { top: -0.7em; right: -1em; bottom: -0.7em; left: -1em; inset: -0.7em -1em; /* JEDER PUNKT HAT EINEN HOF. Der erste Anlauf setzte nackte Punkte von einem Bildpunkt Radius, und im Nachtbild war davon fast nichts zu sehen — Staub, kein Glitzer. Was einen Lichtpunkt zum Funkeln macht, ist nicht der Kern, sondern der Schein darum: zweiter Haltepunkt bei 22 %, der bis 3,4 px ausläuft. Dieselbe Bauart wie die Punkte im Kopfbild, die dort `box-shadow: 0 0 6px` tragen — nur dass hier neun Punkte in einer Eigenschaft stehen statt in neun Elementen. */ background-image: radial-gradient(circle at 7% 26%, #eaf2fb 0 1.2px, rgb(234 242 251 / 22%) 1.2px 3px, transparent 3.4px), radial-gradient(circle at 19% 74%, #cfe3f5 0 1.2px, rgb(207 227 245 / 22%) 1.2px 3px, transparent 3.4px), radial-gradient(circle at 31% 14%, #eaf2fb 0 1px, rgb(234 242 251 / 20%) 1px 2.6px, transparent 3px), radial-gradient(circle at 44% 88%, #b4d6f0 0 1.2px, rgb(180 214 240 / 22%) 1.2px 3px, transparent 3.4px), radial-gradient(circle at 56% 22%, #eaf2fb 0 1px, rgb(234 242 251 / 20%) 1px 2.6px, transparent 3px), radial-gradient(circle at 68% 70%, #cfe3f5 0 1.2px, rgb(207 227 245 / 22%) 1.2px 3px, transparent 3.4px), radial-gradient(circle at 79% 18%, #b4d6f0 0 1px, rgb(180 214 240 / 20%) 1px 2.6px, transparent 3px), radial-gradient(circle at 90% 80%, #eaf2fb 0 1.2px, rgb(234 242 251 / 22%) 1.2px 3px, transparent 3.4px), radial-gradient(circle at 97% 40%, #cfe3f5 0 1px, rgb(207 227 245 / 20%) 1px 2.6px, transparent 3px); } @media (prefers-reduced-motion: no-preference) { /* Tag — ausdrücklich gewählt, und geerbt, wenn niemand gewählt hat. */ :root[data-theme="light"][data-motion="full"] .akzent::before { opacity: 1; animation: strahlenDrehen 74s linear infinite; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-motion="full"] .akzent::before { opacity: 1; animation: strahlenDrehen 74s linear infinite; } } /* Nacht — dieselben zwei Wege. */ :root[data-theme="dark"][data-motion="full"] .akzent::after { animation: akzentGlitzern 6.5s ease-in-out infinite; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-motion="full"] .akzent::after { animation: akzentGlitzern 6.5s ease-in-out infinite; } } } /* Sehr langsam und sehr wenig — „slight rays". Eine volle Umdrehung dauert über eine Minute; wer hinschaut, sieht Licht, nicht Bewegung. */ @keyframes strahlenDrehen { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes akzentGlitzern { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.9; } } .person__rolle { margin: 0.35rem 0 0; color: var(--ink-2); } .person__klein-titel { margin: 0 0 0.75rem; font-family: Archivo, system-ui, sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .person__karte .person__klein-titel { margin-block-start: 1.5rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); } .person__liste { margin: 0; padding-inline-start: 1.1rem; color: var(--ink-2); } .person__liste li + li { margin-block-start: 0.5rem; } /* `.prose p` setzt hier absichtlich `margin: 0` — die Abstände kommen sonst von `.stack`. Diese Seite reiht Absätze aber innerhalb eines Blocks, also braucht sie ihren eigenen Abstand. Ohne ihn laufen zwei Lebensläufe zu einem Absatz zusammen, und genau so sah der erste Aufbau aus. */ .person__text p + p { margin-block-start: 1rem; } /* Die Zwischenüberschrift steht auf derselben Höhe wie der Beginn der Karte nebenan — deshalb kein oberer Abstand. Ihre Grösse hängt an der Klasse `.h2`, ihr Rang am Element: Rang ist Bedeutung, Grösse ist Gestaltung, und die beiden dürfen sich nicht gegenseitig bestimmen. */ .person__text-titel { margin-block: 0 1.25rem; max-inline-size: 18ch; line-height: 1.06; } /* Das Zitat ist im Entwurf ein linker Goldbalken. Der bleibt — er ist das einzige Gestaltungselement der Vorlage, das ohne ihre Palette auskommt. */ .person__zitat { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border: 0; /* `--gold-ink` statt `--gold`: der Balken soll die Fassung mitmachen. Im Morgen stand sonst ein Messingstrich neben lauter Beerenrosa. */ border-inline-start: 2px solid var(--gold-ink); background: var(--paper-sunk); font-family: Newsreader, Georgia, serif; font-size: 1.1rem; } .person__zitat p { margin: 0; } .person__zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.85rem; margin: 0; } .person__zahl { padding: 1.15rem; border: 1px solid var(--line); border-radius: 2px; } .person__zahl dt { font-family: Archivo, system-ui, sans-serif; font-size: 1.6rem; font-weight: 600; line-height: 1; } .person__zahl dd { margin: 0.35rem 0 0; color: var(--ink-2); font-size: 0.92rem; } .person__unten { display: grid; grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 4vw, 3.5rem); padding-block-start: clamp(1.75rem, 4vw, 3rem); border-block-start: 1px solid var(--line); } .person__kontaktliste { margin: 1rem 0 0; } .person__kontaktliste > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.85rem; margin-block-end: 0.85rem; } .person__kontaktliste dt { color: var(--ink-3); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding-block-start: 0.2rem; } .person__kontaktliste dd { margin: 0; } .person__profilliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; } .person__profilliste a { display: block; padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: 2px; text-decoration: none; } .person__profilliste a:hover { border-color: var(--line-strong); background: var(--paper-sunk); } .person__netz { display: block; margin-block-end: 0.2rem; color: var(--gold-ink); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* Die Profilzeile trägt seit dem 11. August ein Zeichen vor dem Namen — ein Kürzel aus dem JSON, kein Markenlogo (die Begründung steht in der Vorlage). Das Rasterband hält Zeichen, Netz und Handle in einer Flucht, auch wenn die Lupe die Schrift auf 150 % zieht: die Spalte `auto` wächst mit. */ .person__profilliste a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; align-items: center; padding: 0.8rem 1rem; } .person__mark { grid-row: 1 / 3; display: grid; place-items: center; inline-size: 2.4em; block-size: 2.4em; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-ink); font-family: Archivo, system-ui, sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: lowercase; } .person__profilliste a:hover .person__mark { border-color: var(--gold-ink); } .person__netz { grid-column: 2; } .person__handle { display: block; grid-column: 2; font-weight: 600; } /* --- Die Stationen ------------------------------------------------------- Iris, 11. August: „also attache updated CV and social media links." Eine Zeitleiste, keine Tabelle: die Linie ist der Rand der Station selbst, der Punkt sitzt darauf. Damit gibt es kein zusätzliches Element, das bei 150 % Schriftgrösse an der falschen Stelle klebt — die Linie wächst mit dem Text, weil sie sein Rand ist. Alle Farben sind Token. Der Punkt nimmt `--gold-ink` und nicht `--gold`: die vier Fassungen setzen nur das Erste um, und ein goldener Punkt in der Höhle wäre der einzige Fleck, der die Welt nicht mitmacht. */ .person__vita-block { padding-block-start: clamp(1.75rem, 4vw, 3rem); border-block-start: 1px solid var(--line); } .person__vita-kopf { display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 4vw, 3rem); align-items: start; justify-content: space-between; } .person__vita-kopf .meta { margin: 0; max-inline-size: 44ch; } .person__cv { display: flex; flex-direction: column; align-items: start; gap: 0.5rem; margin: 0; } .person__cv-knopf::after { content: " ↓"; } .vita { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; } .vita__station { position: relative; padding-inline-start: clamp(1.25rem, 3vw, 2rem); padding-block-end: clamp(1.5rem, 3vw, 2.25rem); border-inline-start: 1px solid var(--line); } /* Die Linie endet mit der letzten Station, statt ins Leere weiterzulaufen. */ .vita__station:last-child { border-inline-start-color: transparent; padding-block-end: 0; } .vita__punkt { position: absolute; inset-inline-start: -0.3rem; inset-block-start: 0.3rem; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--gold-ink); } .vita__zeit { margin: 0 0 0.35rem; color: var(--gold-ink); font-family: Archivo, system-ui, sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .vita__rolle { margin: 0; font-family: Archivo, system-ui, sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.35; } .vita__ort { margin: 0.2rem 0 0; color: var(--ink-3); font-size: 0.92rem; } .vita__text { margin: 0.6rem 0 0; color: var(--ink-2); max-inline-size: 62ch; } /* Ab dieser Breite steht die Zeitangabe neben der Station statt darüber. Darunter bleibt sie oben — zwei Spalten auf einem Telefon ergäben eine Spalte mit zwei Wörtern und eine mit Silbentrennung. */ @media (min-width: 52rem) { .vita__station { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 2rem); } .vita__zeit { grid-column: 1; grid-row: 1 / span 3; margin-block-start: 0.15rem; } .vita__rolle, .vita__ort, .vita__text { grid-column: 2; } } @media (max-width: 60rem) { .person__grid, .person__unten { grid-template-columns: 1fr; } } /* Verweis von der Teamkarte auf die Personenseite. Unterstrichen, weil er in einer Karte steht, in der sonst nichts anklickbar ist — ein Verweis, den nur die Farbe kennzeichnet, ist auf einer Seite für müde Augen keiner. */ .member__seite { display: inline-block; margin-block-start: 0.75rem; font-weight: 600; } /* --- Der Navigator: der Kompass wird begehbar ----------------------------- Iris, 11. August: „From 0 point down up or up down, left forest entry and right the Travel ocean flight transport section" — und der Befund davor: „ich sehe diese Navigation noch gar nicht … nur hoch und runter scrollen". Der Bauplan steht in web/static/web/js/navigator.js. Hier steht nur, wie es aussieht, und die eine Regel, die alles trägt: **der Nullpunkt bewegt sich nicht.** Die Tafel kommt aus ihrer Himmelsrichtung herein, der Baum bleibt in der Mitte. Wer sich verlaufen hat, sieht immer noch den Baum. */ /* Die Tafel liegt **in der Mitte**, nicht über dem ganzen Kreuz. Der erste Aufbau spannte sie über die volle Breite — dann verdeckte die offene Richtung die drei anderen Arme, und man musste erst zum Nullpunkt zurück, um weiterzugehen. Ein Navigator, aus dem man nur rückwärts herauskommt, ist keiner. Im Browser sofort gesehen, im Test nicht: eine Vorlage weiss nicht, was sie verdeckt. */ .kompass__tafel { grid-area: mitte; /* Volle Breite der Mittelspalte: sonst bestimmt der Inhalt die Breite, die Seitenspalten geben nach, und die Mitte wandert bei jedem Wechsel ein Stück. Der Nullpunkt darf nicht wackeln — das ist seine ganze Aufgabe. */ inline-size: 100%; z-index: 2; display: grid; gap: 0.9rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 2px; background: var(--paper-raised); box-shadow: 0 1.5rem 3rem rgb(16 42 67 / 12%); opacity: 0; transition: opacity 320ms ease, translate 420ms cubic-bezier(0.2, 0.7, 0.3, 1); } /* Jede Tafel wartet dort, wo ihre Richtung liegt, und fährt zur Mitte. */ .kompass__tafel--oben { translate: 0 -2.5rem; } .kompass__tafel--unten { translate: 0 2.5rem; } .kompass__tafel--links { translate: -2.5rem 0; } .kompass__tafel--rechts { translate: 2.5rem 0; } /* `display: grid` oben schlägt das `hidden`-Attribut — dessen Voreinstellung ist nur `display: none` und verliert gegen jede eigene Regel. Ohne diese Zeile liegen alle vier Tafeln unsichtbar über dem Kompass und fangen die Klicks ab: die Arme sind dann nicht mehr erreichbar. Im Test fiel das nicht auf — im Browser sofort. */ .kompass__tafel[hidden] { display: none; } .kompass__tafel[data-sichtbar] { opacity: 1; translate: 0 0; } .kompass__tafel-pfeil { margin: 0; font-size: 1.4rem; line-height: 1; color: var(--gold-ink); } .kompass__tafel-titel { margin: 0; font-family: Newsreader, Georgia, serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 400; } .kompass__tafel-titel:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; } .kompass__tafel-satz { margin: 0; color: var(--ink-2); } .kompass__tafel-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .kompass__tafel-bilder img { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px; } .kompass__tafel-weiter { margin: 0; font-weight: 600; } /* DIE GALERIE EINER WELT — vierzehn Bilder, nicht drei. `auto-fill` mit einer Mindestbreite statt einer festen Spaltenzahl: die Galerie soll auf dem Telefon zwei und auf dem grossen Schirm fünf Bilder nebeneinander zeigen, ohne dass für jede Breite eine Regel geschrieben wird. `min(100%, 11rem)` ist dabei kein Zierrat, sondern die Bremse gegen den Fehler, den die Fusszeile am 15. August vorgeführt hat: ohne `min()` verlangt eine Spalte 11 rem auch dann, wenn der Schirm nur 9 hat, und die Seite läuft quer. Quadrate, weil die vierzehn Motive aus vier Formaten stammen; ein gemeinsamer Zuschnitt macht aus einer Sammlung eine Fläche. */ .weltbilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.7rem; margin-block-start: 1.2rem; } .weltbilder__stueck { margin: 0; } .weltbilder img { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; border-radius: 3px; } /* EIN MOTIV IST RUND — `oben-14` ist ein Kreisausschnitt auf weissem Grund, gefunden beim ersten Blick auf die fertige Galerie und danach nachgemessen (alle vier Ecken 254,254,254). Im Nachtmodus stand es als weisses Quadrat im Raster: ein Loch, kein Bild. Zwei Auswege waren offen. Es aus der Galerie werfen hiesse, ein gutes Motiv wegen seines Rahmens zu verlieren. Also der andere: den Kreis ANNEHMEN. Ohne Radius sitzt der weisse Rand als Fläche im Bild; mit `border-radius: 50%` wird derselbe Rand unsichtbar, weil er genau dort weggeschnitten ist, wo er beginnt. Aus dem Fehler wird die Form. Das Datenfeld dafür steht in `welten.json` beim Bild und nicht als Dateiname in dieser Datei — sonst müsste beim nächsten Austausch jemand das CSS mitpflegen, und genau das vergisst man. */ .weltbilder__stueck--rund img { border-radius: 50%; background: transparent; } /* Der Rückweg. Er steht immer im Markup, aber nur dann sichtbar, wenn man tatsächlich weg vom Nullpunkt ist — ein Knopf „zurück", der schon am Ziel steht, ist eine Frage ohne Anlass. */ .kompass__zurueck { display: none; margin-block-start: 0.75rem; padding: 0.5rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: var(--t-small); font-weight: 600; cursor: pointer; } .kompass__mitte[data-zurueck] .kompass__zurueck { display: inline-block; } .kompass__zurueck:hover { background: var(--paper-sunk); } .kompass__zurueck:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; } /* Solange eine Tafel offen ist, tritt der Baum zurück statt zu verschwinden: er bleibt sichtbar, damit der Nullpunkt Nullpunkt bleibt. */ .kompass[data-offen] .kompass__baum { opacity: 0.25; } .kompass__baum { transition: opacity 320ms ease; } /* Der aktive Arm bekommt die Marke, nicht nur die Farbe — Farbe allein wäre das einzige Unterscheidungsmerkmal (WCAG 1.4.1). */ .kompass__arm[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 0.3em; } .kompass__arm[role="button"] { cursor: pointer; } :root[data-motion="calm"] .kompass__tafel, :root[data-motion="calm"] .kompass__baum { transition: none; } @media (prefers-reduced-motion: reduce) { .kompass__tafel, .kompass__baum { transition: none; } .kompass__tafel--oben, .kompass__tafel--unten, .kompass__tafel--links, .kompass__tafel--rechts { translate: none; } } /* Auf schmalen Geräten hat ein Kreuz keinen Platz: die Tafel legt sich in den Fluss statt über die Mitte. */ @media (max-width: 46rem) { .kompass__tafel { position: static; translate: none; margin-block-start: 1rem; } } /* --- Kopfband der Personenseite ------------------------------------------ Iris, 11. August, zu den drei Mustern: „yes, implement! love it!" Der Berg über dem Namen. Gebaut nach demselben Muster wie das Kopfbild der Startseite und mit derselben Vorsicht: **der Schleier ist kein Schmuck, er ist die Lesbarkeit.** Am 30. Juli lag weisser Fliesstext auf einem hellen Kopfbild bei 1,55:1 — auf dem Bildschirm sah es passabel aus, und es war es nicht. Deshalb liegt hier eine dunkle Fläche zwischen Bild und Schrift, die unten fast deckend wird. */ .personkopf { position: relative; display: flex; align-items: flex-end; min-block-size: min(58vh, 30rem); margin-block-end: clamp(2rem, 5vw, 3.5rem); padding-block: clamp(3rem, 8vw, 6rem) clamp(1.75rem, 4vw, 3rem); overflow: hidden; background: var(--deep-2); } .personkopf__bild { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 0; } .personkopf__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; /* Der Gipfel liegt im oberen Drittel des Bildes; ohne diese Zeile schneidet der Ausschnitt ihn ab und übrig bleibt Geröll. */ object-position: 50% 35%; } /* Der Schleier ist zweimal verstärkt worden, beide Male nach einer Messung am gerenderten Bild, nie nach Augenschein: 11. August früh — Lead 3,63:1 und Augenbraue 2,70:1 waren durchgefallen; 11. August spät — bei 1280 px lag die Augenbraue über dem Firnfeld des Gipfels noch bei 4,17:1. Verlangt sind 4,5, und die Augenbraue ist mit 12,5 px kein „grosser Text", für den 3,0 genügen würde. Jetzt: 5,25 bis 11,90 über sieben Kombinationen aus Fassung und Breite. */ .personkopf__schleier { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgb(10 31 51 / 50%) 0%, rgb(10 31 51 / 88%) 45%, rgb(10 31 51 / 97%) 100% ); } .personkopf__text { position: relative; z-index: 2; inline-size: 100%; } .personkopf__titel { color: var(--ink-on-deep); max-inline-size: 16ch; } .personkopf__lead { color: var(--ink-2-on-deep); max-inline-size: 46ch; } /* Im Nachtmodus ist der Grund ohnehin dunkel — der Schleier darf leiser sein, sonst verschwindet der Berg ganz. */ :root[data-theme="dark"] .personkopf__schleier { background: linear-gradient( 180deg, rgb(6 11 23 / 45%) 0%, rgb(6 11 23 / 80%) 45%, rgb(6 11 23 / 96%) 100% ); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .personkopf__schleier { background: linear-gradient( 180deg, rgb(6 11 23 / 45%) 0%, rgb(6 11 23 / 80%) 45%, rgb(6 11 23 / 96%) 100% ); } } /* --- Die Lupe ------------------------------------------------------------- Drei Stufen der Wurzel-Schriftgrösse. Sie wirken, weil dieses Stylesheet durchgehend in `rem` und `clamp()` rechnet: der Text wächst, das Raster bleibt. Ein Browser-Zoom täte mehr — er vergrössert auch die Bilder und schiebt die Seite in die Waagrechte. Hier wächst nur, was gelesen wird. */ :root[data-schrift="125"] { font-size: 125%; } :root[data-schrift="150"] { font-size: 150%; } .schrift-toggle { position: relative; } /* Die Stufe steht als kleine Zahl am Knopf, damit sichtbar ist, dass etwas eingeschaltet **bleibt** — sonst wirkt die Seite beim nächsten Besuch einfach anders, ohne dass jemand weiss, warum. */ .schrift-toggle__stand { position: absolute; inset-block-end: -0.15em; inset-inline-end: -0.15em; font-size: 0.62em; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--gold-ink); } /* --- Die Kopfzeile bei grosser Schrift ------------------------------------ Gefunden am 11. August im Durchgang durch die acht Zustände: bei 150 % Schriftgrösse lief das Wortzeichen „CAREJOURNEY · HNC CARE" in die Navigation hinein — zwei Wörter übereinander, in der Zeile, die auf jeder Seite ganz oben steht. Es ist die Verschärfung von KD-W-11 (das Signet wird bei knapper Kopfzeile zur Ellipse). Die Lupe von heute Nacht hat aus „knapp" ein „überlappend" gemacht: `.header__inner` war ein `flex` ohne Umbruch, also schoben sich die Kinder ineinander, statt untereinander zu gehen. Die Behebung ist eine Zeile plus zwei Folgen davon: • `flex-wrap: wrap` — reicht der Platz nicht, geht die Navigation in die zweite Zeile. Untereinander ist immer lesbar, übereinander nie. • `margin-inline-end: auto` am Wortzeichen muss weg, sobald umbrochen wird — sonst drückt es die Navigation über die volle Breite nach rechts an den Rand. • Die Schaltergruppe darf ebenfalls umbrechen, sonst wandert bei 150 % die Lupe aus dem Bild. Geprüft wird das nicht an einer Breite, sondern an der Kombination aus Breite und Schriftstufe — genau die, die im Durchgang aufgefallen ist. */ /* Der Befund vom 11. August — bei 150 % Schriftgrösse lief „CAREJOURNEY · HNC CARE" in die Navigation hinein — ist mit dem Raster vom 12. August gegenstandslos geworden, und zwar an der Wurzel: die drei Teile liegen in drei Spalten und können sich nicht mehr überlagern, egal wie gross die Schrift wird. Die Aktionsleiste darf trotzdem umbrechen, damit bei 150 % nichts aus dem Bild wandert. */ /* Nur oberhalb von 50 rem — darunter steht die Gegenregel im Telefonblock, und die stünde sonst vor dieser hier und verlöre. Bei gleicher Spezifität entscheidet die Reihenfolge, nicht die Media-Query; genau daran ist der erste Anlauf gescheitert (die Aktionsleiste brach am Telefon weiter um und die Kopfzeile blieb 138 px hoch). */ @media (min-width: 50.01rem) { .header__actions { flex-wrap: wrap; justify-content: flex-end; } } :root[data-schrift="150"] .nav { column-gap: 1rem; } /* --- Tag und Nacht auf der Personenseite --------------------------------- Iris, 11. August: „NUR NIGHT AND DAY MODE." Vorher standen hier vier wählbare Fassungen — Haus, Neon, Höhle, Morgen — mit einem eigenen Wähler und einem eigenen Speichereintrag. Zwei davon waren im Kern dasselbe, und der Wähler war ein dritter Schalter neben Mond und Bewegung, für eine Frage, die der Mond schon beantwortet. Jetzt: **Tag** ist der Morgen (Rosé, Weiss, warmes Orange), **Nacht** ist das Neon (Tiefschwarz, Limette, Regenbogen). Kein Wähler, kein `data-welt`, kein `cj-welt` im Speicher — der Mondknopf schaltet beides. Der Nachtblock steht zweimal, wie überall in dieser Datei: einmal für die ausdrückliche Wahl (`:root[data-theme="dark"]`) und einmal für das Gerät, das ohne Wahl auf dunkel steht. `:not([data-theme="light"])` verhindert dabei den Fall, der sonst niemandem auffällt: Gerät dunkel, Mensch hat ausdrücklich hell gewählt. Alle Werte sind gemessen, nicht geschätzt — die Zahlen stehen bei den Rollen, für die sie gelten. */ /* DIE THEMEN DER PERSONENSEITEN — Iris, 17. August: «Each employee can choose their theme.» Bis dahin hing die Palette an `data-seite="person"` und galt damit für jede Person gleich. Sie hängt jetzt an `data-thema`, das aus der Inhaltsdatei der Person kommt (`web/content/<sprache>/<person>.json`, Feld `thema`). Eine neue Person wählt ein bestehendes Thema oder bekommt ein eigenes — und ein eigenes heisst: ein Block hier, gemessen wie diese beiden. **Voreinstellung Nacht, ohne eine Zeile Skript.** Der Themenblock gilt unbedingt; erst ein ausdrückliches `[data-theme="light"]` löst ihn ab. Damit startet die Seite dunkel, gleichgültig was das System sagt, und es gibt kein Aufblitzen beim Laden. Wer den Tag will, drückt den Schalter — und bekommt ihn (Block weiter unten). Gemessen gegen den jeweiligen Grund, alle Werte in `web/tests/test_person_farben.py` nachgerechnet. */ body[data-thema="neon"] { --paper: #000000; --paper-raised: #0b0b12; --paper-sunk: #060609; --ausklang: #000000; --ink: #f2f2f6; --ink-2: #c8c8d4; --ink-3: #9aa0ae; --gold-ink: #c77dff; --line: rgb(176 38 255 / 30%); --line-strong: rgb(176 38 255 / 55%); --deep: #000000; --deep-2: #000000; --ink-on-deep: #f2f2f6; --ink-2-on-deep: #c8c8d4; --gold-on-deep: #c77dff; --akzent-farbe: #c77dff; --line-on-deep: rgb(176 38 255 / 30%); background: var(--paper); color: var(--ink); } /* Das zweite Thema: Regenbogen. Iris über Sandys Wunsch, 17. August: «default night and rainbow themed, so almost exactly as mine except that mine is more neon oriented.» Also dieselbe Bauart, eine Stufe leiser: der Grund ist ein sehr dunkles Violettschwarz statt reinem Schwarz, die Linien tragen kein Neon, und der Akzent ist das hellere Flieder (#e0aaff, 10,6:1 gegen den Grund) statt des lauten #b026ff. **Warum der Grund hier NICHT reines Schwarz sein muss:** #b026ff misst auf #000000 gerade 4,57:1 und fällt auf jedem angehobenen Schwarz darunter — das ist der Grund, warum das Neon-Thema auf null steht. Dieses Thema benutzt die laute Farbe gar nicht, also darf der Grund atmen. Der Unterschied ist gemessen, nicht erfunden. */ body[data-thema="regenbogen"] { --paper: #0d0b14; --paper-raised: #15121e; --paper-sunk: #08070d; --ausklang: #0d0b14; --ink: #f2f2f6; --ink-2: #c8c8d4; --ink-3: #9aa0ae; --gold-ink: #e0aaff; --line: rgb(224 170 255 / 26%); --line-strong: rgb(224 170 255 / 48%); --deep: #0d0b14; --deep-2: #08070d; --ink-on-deep: #f2f2f6; --ink-2-on-deep: #c8c8d4; --gold-on-deep: #e0aaff; --akzent-farbe: #e0aaff; --line-on-deep: rgb(224 170 255 / 26%); background: var(--paper); color: var(--ink); } /* DER TAG, ZURÜCKGEHOLT. Iris, 17. August: «I will add the day back onto mine about me.» Im Tag gilt wieder das Papier der Website — dieselbe Creme, dieselben gemessenen Tinten wie überall. Was bleibt, ist die Akzentfarbe der Person: sie ist das Persönliche an der Seite, das Papier ist es nicht. Nur die Zuweisung wird zurückgenommen; die Struktur darunter (Kopfband, Porträt, Pille) bleibt unberührt. */ :root[data-theme="light"] body[data-thema] { --paper: #f7f3eb; --paper-raised: #fefdf6; --paper-sunk: #ede8da; --ausklang: #101c29; --ink: #143656; --ink-2: #365470; --ink-3: #4a5f73; --gold-ink: #8a6a1f; --line: rgb(16 46 67 / 16%); --line-strong: rgb(16 46 67 / 32%); --deep: #102a43; --deep-2: #0a1f33; --ink-on-deep: #e9eef5; --ink-2-on-deep: #a6b9ca; --gold-on-deep: #d9b871; --line-on-deep: rgb(233 238 245 / 22%); background: var(--paper); color: var(--ink); } :root[data-theme="light"] body[data-thema="neon"] { --akzent-farbe: #7b2fb5; } :root[data-theme="light"] body[data-thema="regenbogen"] { --akzent-farbe: #7b2fb5; } /* --- Das Kopfband --------------------------------------------------------- Tag: `AdobeStock_313580487`, der Stellisee — die Spiegelung ist das halbe Motiv, also sitzt der Ausschnitt bei 52 % und nicht bei 35 %. Nacht: `AdobeStock_361569669`, die Spitze bei 78 % der Breite. Auf einem Telefon zeigt `cover` nur rund ein Drittel; bei 50 % bliebe der Berg draussen und das Firnfeld übrig. 70 % hält die Spitze im Bild — der Mond ist der Preis, und das ist der richtige Tausch. Der Schleier ist tags pflaumendunkel statt navy: ein blauer Schleier über rosarotem Fels ergibt Grau, und Grau ist die eine Farbe, die dieser Modus nicht haben soll. */ body[data-seite="person"] .personkopf { background: #3a1222; } body[data-seite="person"] .personkopf__bild img { object-position: 50% 52%; } body[data-seite="person"] .personkopf__schleier { background: linear-gradient( 180deg, rgb(58 18 34 / 42%) 0%, rgb(58 18 34 / 80%) 45%, rgb(58 18 34 / 96%) 100% ); } :root[data-theme="dark"] body[data-seite="person"] .personkopf__bild img { object-position: 70% 45%; } :root[data-theme="dark"] body[data-seite="person"] .personkopf { background: #1f1840; } :root[data-theme="dark"] body[data-seite="person"] .personkopf__schleier { background: linear-gradient( 180deg, rgb(0 0 0 / 18%) 0%, rgb(0 0 0 / 52%) 45%, rgb(0 0 0 / 82%) 100% ); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-seite="person"] .personkopf__bild img { object-position: 70% 45%; } :root:not([data-theme="light"]) body[data-seite="person"] .personkopf { background: #1f1840; } :root:not([data-theme="light"]) body[data-seite="person"] .personkopf__schleier { background: linear-gradient( 180deg, rgb(0 0 0 / 18%) 0%, rgb(0 0 0 / 52%) 45%, rgb(0 0 0 / 82%) 100% ); } } /* In allen drei Fassungen trägt der Seitengrund die gewählte Farbe — sonst schwebt eine dunkle Karte auf hellem Papier oder umgekehrt. */ /* --- DER EINSTIEGSBLOCK EINER LANDESEITE, MITTIG ------------------------- Iris, 13. August: „Let's have this one centered not left bound. and the same goes for other major high quality background such as our Kopfzeilen in day and night." Zitiert hat sie den Block von /angehoerige/ — und der ist **kein** `.hero`, sondern ein `.section-head` in einer `.station`. Die Hero-Regel eine Ebene weiter oben hätte ihn nie erwischt; erst das Nachsehen im Bild hat das gezeigt. Deshalb hier eigens. `.station__einstieg` ist eine eigene Marke am Abschnitt und nicht `.section-head` allgemein: die Zwischenüberschriften weiter unten auf derselben Seite bleiben linksbündig. Ein Text, der über eine ganze Seite hinweg mittig steht, liest sich schlechter, nicht feierlicher — die Mitte ist ein Auftakt, keine Grundhaltung. */ .station--einstieg .section-head, .band--einstieg .section-head { text-align: center; margin-inline: auto; } .station--einstieg .section-head > *, .band--einstieg .section-head > * { margin-inline: auto; } /* Die Knopfreihe und der Grenzsatz mittig, sonst fallen genau sie aus der Mitte — beide sind eigene Elemente unterhalb des Kopfes. */ .station--einstieg .cta-row, .band--einstieg .cta-row { justify-content: center; flex-wrap: wrap; } .station--einstieg .lead, .band--einstieg .lead { margin-inline: auto; } /* --- DRUCK, ZWEITER TEIL: DIE METALLSCHRIFT ------------------------------ Gefunden von Iris am 13. August, mit zwei Druck-PDFs der Live-Seite: im Ausdruck fehlen Woerter. "Sechs Dinge, die wir Ihnen [abnehmen]" — das letzte Wort ist schlicht nicht da, und die erste Seite ist leer. DIE URSACHE IST DER METALL-EFFEKT SELBST. Chrom, Neon und die Akzentverlaeufe arbeiten mit `background-clip: text` und `color: transparent`: die Schrift ist durchsichtig, und was man liest, ist der Verlauf dahinter. Browser drucken Hintergruende standardmaessig NICHT — uebrig bleibt durchsichtiger Text auf nichts. Genau die Woerter, die auf dem Bildschirm am schoensten sind, verschwinden auf Papier. Und der Kopf: dunkles Bild, helle Schrift. Das Bild druckt nicht, die helle Schrift steht auf weissem Papier — Seite 1 ist leer. Fuer dieses Publikum ist Drucken kein Randfall: wer eine Seite fuer die Schwester oder den Hausarzt ausdruckt, tut genau das, wofuer die Seite da ist. Dieser Block steht am DATEIENDE mit Absicht: die Metallregeln kommen weiter oben, und bei gleicher Spezifitaet gewinnt die spaetere Regel. `!important` nur dort, wo Token-Regeln mit hoeherer Spezifitaet (`:root[data-theme="dark"] ...`) sonst gewinnen wuerden — derselbe Stil wie im ersten Druckblock vom 9. August. */ @media print { html, body { background: #fff !important; color: #14211b !important; } /* `position: sticky` druckt als Überlagerung: die Kopfleiste lag auf der ersten Zeile der Schlagzeile. Auf Papier klebt nichts — und Werkzeuge schalten auf Papier auch nichts: Sprache, Ruhemodus, Tag/Nacht, Lupe, Vorlesen sind Bildschirm-Handlungen. Gedruckt bleibt, was trägt: Marke und Wege. */ .header { position: static !important; background: #fff !important; } .header__einstellungen, .header__actions { display: none !important; } /* DER EIGENTLICHE TÄTER DER LEEREN ERSTEN ZEILE — gefunden erst im dritten Anlauf, nachdem statisch und ausgeblendet nicht reichten: auf der Startseite teilen sich Kopfzeile und Inhalt EIN BODY-GRID mit derselben Zelle (Zeile 670 — der Kopf schwebt durchsichtig auf dem Kopfbild). Im Druck heisst dieselbe Zelle: die Kopfzeile liegt AUF der Schlagzeile, und «Sie müssen den Weg» verschwand darunter. Papier hat keine schwebenden Schichten — der Body fliesst wieder. */ :root.hat-js body.mit-kopfbild { display: block !important; } .h1, .h2, .h3, .eyebrow, .label-block, .band--deep .akzent, .hero .akzent, .kopfband .akzent, [class*="--on-deep"] .akzent, .akzent, .personkopf__akzent { background-image: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #14211b !important; animation: none !important; text-shadow: none !important; } /* Der Akzent bleibt auch auf Papier ein Akzent — als Vollton, gemessen 4,96:1 auf Weiss waere zu knapp gerechnet; #8a5a12 traegt 6,4:1. */ .akzent, .personkopf__akzent { color: #8a5a12 !important; } .akzent::before, .akzent::after { display: none !important; } /* Der Kopf druckt als Text auf Papier, nicht als leere dunkle Buehne. */ .hero__media, .hero__scrim, .hero__inner::before { display: none !important; } .hero { background: none !important; min-height: 0 !important; padding-block: 1.5rem !important; } .hero .h1 { color: #14211b !important; } .hero .lead, .hero__boundary, .hero__pilot { color: #33413a !important; text-shadow: none !important; } .hero__eyebrow { color: #7a5a1a !important; } /* Kopfbaender der Unterseiten: dieselbe Lage, dieselbe Loesung. Der Verlauf ueber dem Band ist seit dem 15. August ganz weg (Text unter dem Bild), im Druck ist nichts mehr zu neutralisieren. */ .kopfband--bild .section-head { background: none !important; } .kopfband--bild .h1, .kopfband--bild .h2 { color: #14211b !important; } .kopfband--bild .lead { color: #33413a !important; } .figure--band figcaption { background: none !important; color: #14211b !important; text-shadow: none !important; } } /* --- Der Regenbogen-Knopf ------------------------------------------------ Iris, 13. August: „Erstgespräch botton darf mehr auffallen mit Regenbogen effect". Dieselben fünf Stufen wie ihr Personenseiten-Regenbogen vom 11. August ([]; Gold, Rosé, Violett, Blau, Grün) — kein neuer Effekt, derselbe an neuer Stelle. Tiefe Tinte darauf: die hellste Stufe (#f2c66d) trägt Navy mit rund 7:1, die dunkelste (#7bb8ff) ebenfalls über 4,5:1. Bewegt nur im Lebendig-Modus UND ohne Systembremse — der Verlauf steht sonst still, bleibt aber Regenbogen. */ .btn--regenbogen { background: #f2c66d; background-image: linear-gradient(100deg, #f2c66d, #ed8eac, #ab8cff, #7bb8ff, #82d9b4); background-size: 250% 250%; color: var(--deep-2); border-color: transparent; } .btn--regenbogen:hover, .btn--regenbogen:focus-visible { color: var(--deep-2); /* DER VERLAUF BLEIBT — Iris, 14. August, mit zwei Fotos: „Das highlight bitte besser anwenden." Was sie sah, war kein schlechter Schimmer, sondern ein VERSCHWUNDENER Regenbogen: der Knopf traegt auch `btn--gold`, und dessen Hover setzt `background` als KURZFORM — die loescht `background-image`, und uebrig blieb flaches Senfgold mit Limettenring. Die Zeile hier setzt den Verlauf im Hover ausdruecklich neu; die Kurzform kann ihn damit nicht mehr fressen. */ background-image: linear-gradient(100deg, #f2c66d, #ed8eac, #ab8cff, #7bb8ff, #82d9b4); filter: saturate(1.12) brightness(1.04); transform: translateY(-1px); /* Der Limettenschimmer vom 13. August, eine Stufe leiser: als duenne Linie plus weichem Schein statt als 3-px-Ring — der Ring las sich als Warnrahmen, nicht als Licht. Zierde, kein Traeger: die Lesbarkeit kommt weiter aus der eigenen Flaeche (hellste Stufe #f2c66d traegt Navy mit rund 7:1). Ohne box-shadow fehlt nichts. */ box-shadow: 0 0 0 1px rgb(184 242 0 / 45%), 0 6px 22px -6px rgb(184 242 0 / 45%); } @media (prefers-reduced-motion: no-preference) { :root[data-motion="full"] .btn--regenbogen { animation: regenbogenWandern 12s ease-in-out infinite; } } @keyframes regenbogenWandern { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ── DIE TAFEL VON BERN-BELP ─────────────────────────────────────────────── Stufe 0, 14. August. Sie ahmt bewusst keine Flughafentafel nach — keine schwarze Flaeche, keine Klappanzeige, keine Versalien in Monospace. Das waere Kostuem, und auf einer Seite fuer pflegende Angehoerige ein falscher Ton. Was sie uebernimmt, ist nur die Ordnung. Farben kommen ausschliesslich aus den Marken-Token, damit `test_contrast.py` sie mitrechnet: wer ein Token aendert, erfaehrt dort sofort, was es hier kostet. */ .tafel { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 2.6vw, 1.9rem); background: var(--paper-2); } .tafel__tag { margin-block-end: 0.7rem; } /* Das Datum traegt weniger Gewicht als das Wort „Heute" — es beantwortet eine Frage, die niemand gestellt hat, muss aber dastehen, damit die Tafel ueberpruefbar ist. */ .tafel__datum { font-weight: 400; color: var(--ink-2); } .tafel__liste { list-style: none; margin: 0; padding: 0; } .tafel__zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.75rem; padding-block: 0.55rem; border-block-start: 1px solid var(--line); } .tafel__zeile:first-child { border-block-start: 0; } .tafel__ziel { font-size: 1.15rem; font-weight: 600; } .tafel__land, .tafel__firma { color: var(--ink-2); font-size: 0.94rem; } .tafel__firma { margin-inline-start: auto; } /* Der leere Tag bekommt dasselbe Gewicht wie eine volle Liste. Von November bis April ist er der Normalfall; ihn kleiner oder grauer zu setzen hiesse, die Wirklichkeit als Stoerung zu behandeln. */ .tafel__leer { margin: 0; padding-block: 0.55rem; font-size: 1.05rem; } .tafel__naechster { margin-block: 0.9rem 0; padding-block-start: 0.9rem; border-block-start: 1px solid var(--line); color: var(--ink-2); } .tafel__naechster b { color: var(--ink); } /* Die Live-Tafel steht ueber dem Saisonflugplan und traegt eine Zeitspalte — der einzige sichtbare Unterschied zwischen den beiden. Sie erscheint nur mit frischem Stand; alles Weitere entscheidet die Vorlage. */ .tafel--live .tafel__zeile { gap: 0.9rem; } .tafel__zeit { font-variant-numeric: tabular-nums; font-weight: 600; min-inline-size: 3.2rem; } /* Annulliert ist das einzige Wort, das die Tafel als Zustand zeigt — es muss auffallen, ohne zu schreien. GERECHNET, UND DIE ERSTE WAHL FIEL DURCH. Ein Rot (#9a2a2a) traegt auf Papier 6,93:1, auf dem Nachtgrund aber nur **2,42:1** — unter jeder Schwelle, und ausgerechnet auf der Zeile, die jemand lesen muss, der einen Flug erreichen will. Ein Token gab es dafuer auch nicht (`--alarm` war erfunden). Also zwei gerechnete Farben, je Modus eine, aus der bestehenden Palette. */ .tafel__annulliert { margin-inline-start: auto; color: #8f2323; font-weight: 600; } :root[data-theme="dark"] .tafel__annulliert { color: #ff9d9d; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tafel__annulliert { color: #ff9d9d; } } /* Die Tafel-Suche: ein Feld ueber der Saisontabelle, nicht breiter als eine Lesespalte — ein fensterbreites Suchfeld saehe nach Suchmaschine aus und ist hier nur ein Filter. [hidden] gewinnt gegen das display der .field-Klasse, sonst stuende das Feld auch ohne JavaScript da und taete nichts. */ .tafel__suche { max-inline-size: 26rem; } .tafel__suche[hidden] { display: none; } .tafel__keine { margin: 0; color: var(--ink-2); } .tafel__keine[hidden] { display: none; } /* Die Saisontabelle laeuft auf schmalen Geraeten in ihrem eigenen Kasten, damit der Seitenrumpf nie quer scrollt. */ .tafel__rollen { overflow-x: auto; } .tafel__tabelle { inline-size: 100%; border-collapse: collapse; } .tafel__tabelle th, .tafel__tabelle td { text-align: start; padding: 0.55rem 0.9rem 0.55rem 0; border-block-end: 1px solid var(--line); vertical-align: baseline; } .tafel__tabelle thead th { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .tafel__tabelle tbody th { font-weight: 600; } /* Ein Ziel ohne belegten Wochentag sagt das ausdruecklich. Eine leere Zelle waere die bequemere Loesung und die unehrlichere: sie liest sich wie „faellt aus" statt wie „wissen wir nicht". */ .tafel__offen { color: var(--ink-2); font-style: italic; } .tafel__hinweis { color: var(--ink-2); } .tafel__quelle { color: var(--ink-2); font-size: 0.88rem; } :root[data-theme="dark"] .tafel { background: rgb(255 255 255 / 4%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tafel { background: rgb(255 255 255 / 4%); } } /* --- Arabisch und Tamil: die Buchschrift trägt die ganze Seite --------- Iris' „B" vom 15. August gilt für Titel wie Fliesstext: eine Kernseite, die zwischen Naskh und einer lateinischen Grotesk springt, wäre keine Buchseite. Die Selektoren stehen bewusst am Dateiende — bei gleicher Spezifität gewinnt die spätere Regel, dieselbe Rangordnung wie beim Werkzeuge-Knopf. `unicode-range` oben schützt die lateinischen Anteile: für sie hat die Naskh schlicht keine Zeichen geladen, sie fallen auf Newsreader/Georgia zurück. */ [lang="ar"], [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] p, [lang="ar"] li, [lang="ar"] a, [lang="ar"] strong, [lang="ar"] .h1, [lang="ar"] .h2, [lang="ar"] .h3, [lang="ar"] .eyebrow, [lang="ar"] .lead, [lang="ar"] .label-block, [lang="ar"] .btn { font-family: "Noto Naskh Arabic", "Newsreader", Georgia, serif; } [lang="ta"], [lang="ta"] h1, [lang="ta"] h2, [lang="ta"] h3, [lang="ta"] p, [lang="ta"] li, [lang="ta"] a, [lang="ta"] strong, [lang="ta"] .h1, [lang="ta"] .h2, [lang="ta"] .h3, [lang="ta"] .eyebrow, [lang="ta"] .lead, [lang="ta"] .label-block, [lang="ta"] .btn { font-family: "Noto Serif Tamil", "Newsreader", Georgia, serif; } /* Naskh läuft optisch kleiner als Newsreader — eine Stufe Ausgleich, damit die arabische Seite nicht kleingedruckt wirkt. */ [lang="ar"] { font-size: 1.06em; line-height: 1.85; } /* DIE PREISTAFEL — Iris, 15. August, schriftlich: „ja, 150". Eine Liste, keine Tabelle: vier Positionen sind zu wenig für ein Raster mit Kopfzeile, und eine Tabelle zwingt auf dem Telefon zum Querlesen. Jede Zeile trägt Name, Preis und einen Satz — und der Preis steht in der Mitte, wo der Blick beim Überfliegen ohnehin hinfällt. `minmax(min(100%, 13rem), 1fr)` mit `auto-fit`: auf dem Telefon eine Spalte, auf dem grossen Schirm zwei oder vier. Das `min()` ist dieselbe Bremse wie überall — ohne es verlangt eine Spalte 13 rem auch dort, wo der Schirm nur 9 hat, und die Seite läuft quer. */ .preise { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin-block: 1.4rem 0; padding: 0; list-style: none; } .preise__zeile { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); } .preise__name { margin: 0; font-weight: 600; letter-spacing: 0.02em; } /* Der Preis ist die Zeile, wegen der jemand hinschaut — also bekommt er Grad und Farbe, nicht bloss Fettdruck. `--gold-ink` und nicht `--gold`: das reine Gold misst auf hellem Papier rund 2,4:1 und wäre ein AA-Verstoss auf einer Seite, die AA behauptet. `--gold-ink` ist der dafür angelegte Ton. */ .preise__preis { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--gold-ink); } .preise__satz { margin: 0; font-size: 0.92rem; color: var(--ink-2); } /* --- Der mitlaufende Kompass ------------------------------------------- Iris, 15. August: „the compass is the size of the logo and it tells you exactly where you are on the page, in space, rootwork, in the woods, usw" LOGOGROSS, und das ist eine Zahl aus dieser Website und keine gewählte: die Wortmarke misst 3.2rem im Zeichen (`.wordmark__mark` unter 50rem), am grossen Schirm 3.2rem ebenso. Der Kompass ist genauso gross. Das ist kein Zufall, sondern die Aussage: er ist das zweite feste Zeichen dieser Seite — die Marke sagt, wo man ist, dieser sagt, wo man gerade steht. UNTEN RECHTS, weil dort nichts anderes steht: die Kopfzeile ist oben, der Kontaktknopf ebenfalls, das Aare-Band ganz unten. Rechts unten ist auf dem Telefon zugleich die Ecke, die der Daumen erreicht. ER SITZT `fixed` UND NICHT `sticky`, und der Unterschied ist gemessen: `sticky` braucht einen Vorfahren, der nicht `overflow: clip` trägt — und `.bildband` trägt es, seit dem 7. August und aus gutem Grund. Ein sticky Kompass wäre in dieser Seite an drei Stellen unsichtbar geworden. */ .standort { position: fixed; inset-block-end: clamp(1rem, 3vw, 2rem); inset-inline-end: clamp(1rem, 3vw, 2rem); z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-template-areas: ". oben ." "links ring rechts" ". unten ."; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 999px; /* Papier unter dem Zeichen, damit er über jedem Bild lesbar bleibt: die Weltenseite läuft über Fotografien, und ein Zeichen ohne Grund verschwindet dort zuverlässig. */ background: var(--paper); border: 1px solid var(--kreis-rand); box-shadow: var(--shadow-card); } .standort[hidden] { display: none; } .standort__ring { grid-area: ring; } /* Der Nullpunkt in der Mitte: ein Punkt, kein Zeichen. Er ist gefüllt, solange man am Lebensbaum steht, und hohl, sobald man unterwegs ist. */ .standort__ring { width: 0.4rem; height: 0.4rem; border-radius: 999px; border: 1px solid var(--kreis-rand); background: transparent; transition: background-color 220ms var(--ease); } .standort[data-hier="mitte"] .standort__ring { background: var(--gold-ink); } .standort__punkt--oben { grid-area: oben; } .standort__punkt--unten { grid-area: unten; } .standort__punkt--links { grid-area: links; } .standort__punkt--rechts { grid-area: rechts; } .standort__punkt { display: grid; place-items: center; width: 1rem; height: 1rem; text-decoration: none; color: var(--ink-3); transition: color 220ms var(--ease), transform 220ms var(--ease); } /* Die vier Pfeile stehen im Stylesheet und nicht im Markup: sie sind in jeder der sieben Sprachen dieselben, und im Markup wären es vier Zeilen Sonderfall in einer Schleife. `content` ist hier unbedenklich, weil der Pfeil Zierde ist — die Auskunft trägt der Text in `.visually-hidden`, den ein Vorleseprogramm liest. */ .standort__punkt::before { font-size: 0.85rem; line-height: 1; } .standort__punkt--oben::before { content: "\2191"; } .standort__punkt--rechts::before { content: "\2192"; } .standort__punkt--unten::before { content: "\2193"; } .standort__punkt--links::before { content: "\2190"; } /* WO MAN GERADE IST — der ganze Zweck des Dings. Die aktuelle Richtung wird dunkler UND grösser: Farbe allein wäre WCAG 1.4.1 (Farbe als einziges Signal), und auf einem Graustufen-Bildschirm bliebe nichts übrig. `aria-current` sagt es zusätzlich in Worten an. */ .standort__punkt[aria-current="true"] { color: var(--gold-ink); transform: scale(1.35); } .standort__punkt:hover, .standort__punkt:focus-visible { color: var(--ink); } /* Der Name der Richtung steht nur für Vorleseprogramme da. Sichtbar wäre er eine Beschriftung, die den Kompass viermal so breit machte — und die Richtung steht ohnehin gross im Abschnitt daneben. */ .standort__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .standort__punkt, .standort__ring { transition: none; } } /* Im Ruhemodus wächst der Punkt nicht, er wird nur dunkler — dieselbe Auskunft, ohne Bewegung. Der Kontrast trägt sie allein. */ :root[data-motion="calm"] .standort__punkt[aria-current="true"] { transform: none; text-decoration: underline; text-underline-offset: 0.2rem; } /* Auf sehr schmalen Geräten weicht er dem Daumen aus: etwas kleiner und näher an die Ecke, damit er die Bildunterschriften nicht überdeckt. */ @media (max-width: 30rem) { .standort { width: 2.8rem; height: 2.8rem; inset-block-end: 0.75rem; inset-inline-end: 0.75rem; } .standort__punkt::before { font-size: 0.75rem; } } /* --- Die Wegweiser auf /start/ ----------------------------------------- Vier Karten gleich unter dem Kopf: drei Wege und „noch unsicher". Der Grund steht in der Vorlage und ist gemessen — die Seite ist 13 Bildschirme lang, und die Antwort für Unentschlossene lag bei Bildschirm 11,4. `auto-fit` mit einer Mindestbreite: vier nebeneinander auf dem Schirm, zwei auf dem Tablet, eine unter dem Daumen. Kein Umbruchpunkt von Hand — die Karten entscheiden selbst, wann sie nicht mehr nebeneinander passen. */ .wegweiser { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; margin-block-start: clamp(1.5rem, 3vw, 2.5rem); } .wegweiser__karte { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem; border: 1px solid var(--kreis-rand); border-radius: 4px; text-decoration: none; color: inherit; transition: border-color 220ms var(--ease), transform 220ms var(--ease); } .wegweiser__karte:hover, .wegweiser__karte:focus-visible { border-color: var(--line-strong); transform: translateY(-2px); } /* Ohne Bewegung dieselbe Auskunft: der Rand traegt sie allein. */ @media (prefers-reduced-motion: reduce) { .wegweiser__karte { transition: none; } .wegweiser__karte:hover, .wegweiser__karte:focus-visible { transform: none; } } :root[data-motion="calm"] .wegweiser__karte:hover, :root[data-motion="calm"] .wegweiser__karte:focus-visible { transform: none; } .wegweiser__nummer { font-size: var(--t-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); } .wegweiser__titel { font-family: "Archivo", system-ui, sans-serif; font-weight: 600; line-height: 1.3; } /* Die vierte Karte ist keine der drei — gestrichelt, wie die Knospen, damit sie als Ausweg lesbar ist und nicht als vierter gleichwertiger Weg. */ .wegweiser__karte--unsicher { border-style: dashed; } /* --- DIE KLAPPE UNTER «MITWIRKEN» --------------------------------------- Iris, 16. August: „Ich dachte an die Partner bei der Klappe, an die sponsoren, spändenden, die Angehörigen aka Mitarbeiter und alle restlichen (unter anderem auch Mitarbeiter)." Gebaut wie die Sprachwahl links: ein natives `<details>`. Es klappt ohne JavaScript auf, ist mit der Tastatur bedienbar, und der CSP ist es egal. Deshalb erbt es auch deren gemessene Eigenheit — `display: grid` statt der Zeilenbox, die ein `<summary>` sonst mitbringt und die dem Element 3 px Unterlänge verpasst. In einer Navigationszeile, deren drei Wörter auf einer Grundlinie liegen sollen, sieht man das sofort. */ .klappe { position: relative; display: grid; } .klappe__knopf { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; } .klappe__knopf::-webkit-details-marker { display: none; } /* Der Pfeil dreht sich beim Öffnen — die einzige Bewegung hier, und sie sagt etwas: geschlossen zeigt er nach unten (da kommt etwas), offen nach oben (das war es). Unter `prefers-reduced-motion` springt er, statt zu drehen; er verschwindet nicht, denn er ist Information und nicht Zierde. */ .klappe__pfeil { width: 0.85em; height: 0.85em; flex: none; transition: transform 200ms var(--ease); } .klappe[open] .klappe__pfeil { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .klappe__pfeil { transition: none; } } /* Das Feld hängt an der RECHTEN Kante seines Knopfes und wächst nach links. Das ist die Spiegelung der Regel bei der Sprachwahl, und aus demselben Grund: «Mitwirken» ist das letzte Glied der Navigation und steht damit rechts. Ein Feld, das von dort nach rechts wüchse, liefe aus dem Fenster — genau der Fehler, den Iris am 14. August auf der anderen Seite gesehen hat („Sprachen laden zu linksbündig!"). */ /* GESCHLOSSEN IST GESCHLOSSEN — Fund vom 16. August beim Durchmessen aller Breiten von 320 bis 2560 px. Ein zugeklapptes `<details>` versteckt seinen Inhalt, aber es entfernt ihn nicht: Chrome legt `content-visibility: hidden` darüber, und das erzeugt einen **Umgrenzungsblock**. Ein `position: fixed` darin bezieht sich dann nicht mehr auf das Fenster, sondern auf das `<details>` selbst — das Feld hing also mit 37 px Breite am Knopf, obwohl `left` und `right` sauber auf den Rand zeigten. Gemessen bei 340 bis 440 px: das unsichtbare Feld ragte über den rechten Rand und machte die Seite waagrecht scrollbar. Ein Kasten, den niemand sieht, verschiebt die ganze Seite — die unangenehmste Sorte, weil man im Bild nichts findet, wonach man suchen könnte. `display: none` im geschlossenen Zustand nimmt ihm den Kasten. Es ändert nichts an der Bedienung: der Inhalt war ohnehin verborgen. Dieselbe Regel gilt für die Sprachwahl, aus demselben Grund. */ .klappe:not([open]) .klappe__panel, .lang:not([open]) .lang__panel { display: none; } .klappe__panel { position: absolute; right: 0; inset-inline-end: 0; left: auto; inset-inline-start: auto; top: calc(100% + 0.5rem); inset-block-start: calc(100% + 0.5rem); z-index: 40; min-width: 17rem; padding: 1rem 1.1rem; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-lift); text-align: start; } .klappe__titel { margin: 0 0 0.6rem; } .klappe__liste { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; list-style: none; } .klappe__liste a { display: block; color: var(--ink-2); text-decoration: none; line-height: 1.35; } .klappe__liste a:hover, .klappe__liste a:focus-visible { color: var(--ink); text-decoration: underline; } .klappe__liste [aria-current="page"] { font-weight: 600; color: var(--ink); } /* AM TELEFON SCHLÄGT DAS FELD BEIDSEITIG AN, statt an seinem Knopf zu hängen. Bei 390 px ist die Navigation 363 px breit; ein 17 rem breites Feld an der rechten Kante des letzten Wortes stünde zur Hälfte im Nichts. Dieselbe Lösung wie bei der Sprachwahl, aus derselben Messung. */ @media (max-width: 37.5rem) { .klappe__panel { position: fixed; left: var(--gutter); inset-inline-start: var(--gutter); right: var(--gutter); inset-inline-end: var(--gutter); min-width: 0; } } /* --- DER KOPFBALKEN IN NAVY ---------------------------------------------- Iris, 16. August, in zwei Sätzen: „Das logo würde mehr zum Ausdruck kommen, wenn der Hintergrund die selbe Farbe wie der Vorschau bänner bekommen würde" — und gleich darauf: „wir können auch den ganzen Balken einfärben mit diesem dunkelblau." Dazu: „und eine passende Farbe im Nachtmodus." BEIDES ZUSAMMEN, WEIL EINES ALLEIN NICHT GEHT. Ein Navy-Balken mit der cremefarbenen Scheibe hätte einen hellen Fleck in der Mitte; eine Navy-Scheibe auf hellem Balken einen dunklen Punkt. Zusammen wird aus Vorschau-Streifen, Kopfzeile und Signet EINE Fläche — und was darauf leuchtet, sind die goldenen Ringe, der Knopf und die Blüte. DIE PASSENDE NACHTFARBE IST DIESELBE ZEILE. `--deep` ist ein Wechsel-Token: am Tag #102a43, nachts #0f2947. Nachts liegt der Balken damit eine Spur HELLER als das Papier (#0a1420) statt dunkler — er hebt sich ab, statt zu verschwinden, und niemand muss eine zweite Farbe pflegen. Dasselbe gilt für die Schrift (`--ink-on-deep`) und die Ringe (`--gold-on-deep`, nachts Silber): alle drei Paare sind seit dem 30. Juli gemessen, also kommt keine neue Messung dazu. WAS ES KOSTET, ehrlich benannt: auf der Startseite lag die Kopfzeile bisher halbdurchsichtig ÜBER dem Kopfbild und liess es durchscheinen. Sie wird jetzt deckend. Der Gewinn ist, dass Vorschau-Streifen und Kopf nicht mehr zwei verschiedene Blautöne übereinander sind — der Fehler, den Iris am selben Tag als „Da stimmt was nicht mit den Farben" gemeldet hat, kann so gar nicht mehr entstehen. */ /* Seit dem 17. August gilt die Liste dem BALKEN, nicht mehr dem ganzen .header: die Navigation wohnt in der Navzeile darunter, und die soll das Kopfbild zeigen, nicht Navy. */ .header__balken, .header.is-stuck .header__balken, :root.hat-js body.mit-kopfbild .header__balken, :root.hat-js body.mit-kopfbild .header:not(.is-stuck) .header__balken, :root.hat-js[data-theme="dark"] body.mit-kopfbild .header:not(.is-stuck) .header__balken, :root.hat-js[data-theme="light"] body.mit-kopfbild .header:not(.is-stuck) .header__balken { background: var(--deep); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; } /* `.wordmark__name` steht bewusst NICHT in dieser Liste: der Name trägt seit dem 13. August Iris' Regenbogen („CareJourney unter logo so geschrieben und in regenbogen effect"), und der lebt von `color: transparent` mit `background-clip: text`. Eine Farbe hier überschriebe ihn und machte aus dem Namen wieder ein Schild. */ /* `.nav__link` steht seit dem 17. August NICHT mehr in dieser Liste: die Navigation liegt nicht mehr auf dem Navy-Balken, sondern in der Navzeile darunter — auf Papier (Grundfarbe --ink-2), auf dem Kopfbild (hell, im 46-rem-Überlagerblock) oder auf Navy beim Scrollen (is-stuck, oben). */ .header .wordmark, .header .theme-toggle, :root.hat-js body.mit-kopfbild .header:not(.is-stuck) .wordmark, :root.hat-js body.mit-kopfbild .header:not(.is-stuck) .theme-toggle { color: var(--ink-on-deep); } .header .theme-toggle, .header .kopfruf, :root.hat-js body.mit-kopfbild .header:not(.is-stuck) .theme-toggle { border-color: var(--gold-on-deep); } .header .kopfruf { color: var(--ink-on-deep); } /* Beim Zeigen wird heller statt dunkler — auf einer dunklen Fläche ist „mehr Tinte" kein Signal mehr, „mehr Licht" schon. */ .header .theme-toggle:hover, .header .kopfruf:hover { color: #ffffff; } /* Der eingeschaltete Zustand kehrt sich auf dem Balken ANDERSHERUM um: dort ist die Fläche schon dunkel, also wird der gedrückte Knopf hell. Die Umkehr bleibt eine Umkehr — nur ist der Ausgangspunkt ein anderer. Gemessen: --ink-on-deep als Fläche gegen --deep als Schrift ist dasselbe Paar, nur getauscht, und damit derselbe Kontrast. */ .header .theme-toggle[aria-pressed="true"], .header .theme-toggle[data-schrift-toggle][data-an] { background: var(--ink-on-deep); border-color: var(--ink-on-deep); color: var(--deep); } .header .theme-toggle[aria-pressed="true"]:hover, .header .theme-toggle[data-schrift-toggle][data-an]:hover { color: var(--deep); border-color: #ffffff; background: #ffffff; } .header .theme-toggle[data-schrift-toggle][data-an] .schrift-toggle__stand { color: var(--deep); } /* Die Klappe unter «Mitwirken» hängt am dunklen Balken und öffnet auf Papier — der Wechsel ist gewollt: das Feld gehört zur Seite, nicht zum Balken. Nur seine Oberkante braucht eine Linie, sonst schwebt helles Papier ohne Kante aus dunklem Grund. */ .header .klappe__panel { border-color: var(--gold-on-deep); } /* --- DAS BAND DER BERGWELT ---------------------------------------------- Iris, 16. August: „Bergwelt." Erzeugt von scripts/make_bergwelt.py aus vier Aquarellebenen, umgefärbt auf die Farben dieser Website. ES IST FLACHER ALS SEINE DATEI. Das Bild misst 1600 × 558 (1 : 2,87); angezeigt wird es mit `aspect-ratio: 1 / 0.22` und `object-fit: cover`, also rund 1 : 4,5. Der Grund ist nicht Geschmack: der Gipfel steht in der unteren Hälfte, und `object-position: bottom` behält ihn — was wegfällt, ist leerer Himmel über der Sonne. Auf einem Telefon wäre ein 558-px-Bild ein halber Schirm Landschaft vor dem Namen der Welt, und wer auf `/welten/` scrollt, sucht die Welt und nicht die Aussicht. Die Höhe ist an die Breite gekoppelt und nicht gesetzt, damit auf einem schmalen Gerät nichts stehen bleibt, was auf einem breiten passt. `line-height: 0` steht hier aus demselben Grund wie beim Fussband: ein `<img>` ist eine Zeilenschachtel und schleppt sonst die Unterlänge seiner Zeile als Streifen unter sich her. */ .weltband { width: 100%; line-height: 0; /* Der Abschnittsabstand darunter kommt von `.welt__kopf`; hier oben trennt eine feine Linie das Band vom vorherigen Abschnitt, damit es nicht wie ein Kopfbild der ganzen Seite wirkt. */ border-block-start: 1px solid var(--line); } .weltband__bild { display: block; } .weltband img { display: block; width: 100%; height: auto; /* KEIN `object-fit` MEHR, und das ist der Punkt: das Bild wird in genau diesem Verhältnis gebaut (`BANDHOEHE` in scripts/make_bergwelt.py). Vorher stand hier `aspect-ratio: 1 / 0.22` mit `cover` über einem 1 : 2,87 hohen Bild — gemessen bei 1280 px wurden damit 37 % der Bildhöhe nie angezeigt, und weil oben beschnitten wird, fiel die obere Hälfte der Sonne weg. Beschneiden im Browser heisst: die Zeichnung kennt ihren eigenen Ausschnitt nicht. */ } /* Tag und Nacht — dasselbe Muster und dieselbe Reihenfolge wie beim Fussband: die Basisregel VOR den dunklen, die Media-Query (0,1,0) gilt, solange niemand geschaltet hat, `:root[data-theme]` (0,2,1) schlägt sie danach. */ .weltband__bild--nacht { display: none; } @media (prefers-color-scheme: dark) { .weltband__bild--tag { display: none; } .weltband__bild--nacht { display: block; } } :root[data-theme="light"] .weltband__bild--tag { display: block; } :root[data-theme="light"] .weltband__bild--nacht { display: none; } :root[data-theme="dark"] .weltband__bild--tag { display: none; } :root[data-theme="dark"] .weltband__bild--nacht { display: block; } /* --- DER PILOTHINWEIS IM KOPF ------------------------------------------- Iris, 16. August: „a word or two in the beginning that this will be a pilot project starting in September till the end of the year at least." Er sitzt zwischen den Knöpfen und der Grenzenzeile und trägt deren Maße — dieselbe Breite (44ch), dieselbe kleine Schrift. Was ihn unterscheidet, ist die Auszeichnung: die Grenzenzeile hat ein Schild und eine Limettenlinie, dieser Satz hat nichts als sich selbst. Das ist Absicht. Ein Hinweis, der sich schmückt, liest sich als Werbung; dieser soll sich als Auskunft lesen. `--ink-2-on-deep` und nicht heller: der Satz steht auf dem Kopfbild, und dort gilt dieselbe Rechnung wie für alles andere. Er ist die kleinste Schrift des Kopfes und bekommt deshalb den Ton, der auf tiefem Grund gemessen 6,6:1 trägt — dieselbe Farbe wie die Grenzenzeile darunter, weil beide dasselbe tun: einordnen, nicht anpreisen. */ /* DIE PILOTZEILE HATTE ALS EINZIGE IM KOPF KEINE TAGFASSUNG — behoben am 18. August. Sie trug `#b9c9be` fest verdrahtet, in beiden Modi dieselbe Farbe, während `.hero .lead`, `.hero__eyebrow` und `.hero__boundary` längst auf `--tinte-auf-bild` umschalten. Ein vergessener Selektor in drei Listen. **Gemessen, bevor es auffiel:** am Tag 1,71:1 gegen den hellsten Grund in ihrem Saum, nachts 3,60:1. Die Anforderung für Text dieser Grösse (14,4 px) ist 4,5:1. Die Seite veröffentlicht auf `/barrierefreiheit/` eine WCAG-2.2-AA-Zusage; diese eine Zeile hielt sie nicht. Jetzt trägt sie dieselbe Tinte wie der Fliesstext daneben — hell in der Nacht, dunkel am Tag. Kleiner darf sie bleiben, leiser nicht: leise macht die Grösse, nicht ein ausgebleichter Ton. */ .hero__pilot { max-width: 44ch; margin: 0; padding-top: 1.1rem; font-size: var(--t-small); line-height: 1.5; color: var(--ink-on-deep); } /* Die Grenzenzeile schliesst direkt an, ohne zweiten Abstand — sonst stünden zwei kleine Sätze als zwei Blöcke da statt als ein Hinweisfeld. */ .hero__pilot + .hero__boundary { padding-top: 0.9rem; } /* --- Iris' eigene Seite ist schwarz ------------------------------------- Iris, 16. August 2026: „uff, what happened here, let's go for black background maybe some accents of neon purple with the lime green". WAS HIER VORHER STAND, waren zwei Fassungen: Tag als Morgenrosé mit einem pinken Balken (#c2456b), Nacht als Violett (#1f1840) mit Limette. Beides vom 11. August, beides auf ihre Ansage hin gebaut — und beides ist jetzt weg, nicht ergänzt. Eine dritte Palette neben zwei alten wäre die Sorte Datei, in der am Ende niemand mehr weiss, welche gilt. ES GIBT KEINE ZWEI FASSUNGEN MEHR. Die Personenseite ist eine Person, kein Tageslauf; der Modusschalter ist auf ihr ohnehin verborgen (weiter oben, „ein Knopf, der nichts bewirkt"). Die beiden Nachtblöcke sind deshalb gelöscht statt umgefärbt — sonst stünde nachts wieder etwas anderes da als das, worum Iris gebeten hat. DER GRUND IST REINES SCHWARZ, und das ist eine Messung, keine Vorliebe. Das Neonlila #b026ff misst auf #000000 **4,57:1** und trägt damit Fliesstext. Auf einem nur leicht angehobenen Schwarz — schon #0a0a0f — fällt es auf 4,30:1 und fällt durch. Ein „weicheres" Schwarz, der übliche Reflex, hätte genau die Farbe unbrauchbar gemacht, um die es geht. ZWEI LILA, NICHT EINES. #b026ff bleibt für Ringe, Rahmen und Linien — Nicht-Text, für das 3:1 gilt, und dort ist es das satteste. Geschrieben wird mit #c77dff (7,8:1 auf Schwarz, 7,3:1 auf der erhöhten Fläche). DIE LIMETTE IST DIE DES HAUSES: `--limette` #b8f200 gibt es seit dem 13. August. Sie ist der zweite Akzent und bleibt an einer Stelle — zwei Neonfarben, die beide gleich laut sind, heben sich auf. Nachgerechnet von `web/tests/test_person_farben.py`, damit der alte Einwand gegen eine zweite Palette („die, die niemand nachmisst") nicht überstimmt, sondern erledigt ist. */ body[data-seite="person"] .person__portrait { border-color: #000000; box-shadow: 0 0 0 2px #b026ff; } /* Die Limette ist der zweite Akzent und bleibt an einer Stelle: der Pille über dem Namen. Zwei Neonfarben, die beide gleich laut sind, heben sich auf; eine laut und eine leise ergibt eine Hierarchie. */ body[data-seite="person"] .person__ab { border-color: var(--limette); color: var(--limette); } /* Die Verläufe der Überschriften nehmen die Nachtfassung: die warme Regenbogenfassung ist auf Papier gerechnet und verschwindet auf Schwarz. **NUR NOCH IN DER NACHT — Fund vom 17. August, im Browser gesehen.** Die Zuweisung galt unbedingt, und beim Zurückholen des Tages (Iris: «I will add the day back onto mine about me») stand die Überschrift «Derselbe Beruf, andere Räume» plötzlich in Silber und kaltem Regenbogen auf Creme — beides für Schwarz gerechnet, beides auf hellem Papier fast unsichtbar. Der Satz im Kommentar oben stimmte also in beide Richtungen; er war nur einseitig angewandt. Im Tag gelten wieder die warmen Verläufe der Website, die gegen Creme gemessen sind. */ :root:not([data-theme="light"]) body[data-thema] { --schriftmetall: var(--schrift-silber); --schriftakzent: var(--schrift-regenbogen-kalt); --schriftakzent-tief: var(--schrift-regenbogen-kalt); --schriftunterakzent: var(--schrift-chrom); } /* --- Der Mond mit der echten Phase --------------------------------------- Iris, 17. August 2026: „Es wäre super cool wenn der Mond sich auf dem Footer nach den echten Mondphasen richten könnte live." Was hier liegt, ist ein SCHATTEN, kein Mond. Die gemalte Vollmondscheibe im Band bleibt stehen; darüber legt sich ein Stück Himmelsfarbe in der Form des unbeleuchteten Teils. Der Schatten liegt vollständig auf der Scheibe — seine Aussenkante ist ihre Kante —, und deshalb gibt es keine Naht zum Himmel, die man bei einem aufgesetzten Deckkreis sofort sähe. DIE ZAHLEN SIND IM BILD GEMESSEN, nicht gesetzt: Schwerpunkt und Radius der grössten runden hellen Form, umgerechnet auf Prozent der Bandbreite. Sie stehen doppelt — hier und in `MOND_JE_BAND` in web/context_processors.py. Das ist bewusst: die Vorlage braucht zu wissen, DASS es einen Mond gibt (sonst zeichnet sie keinen), das Stylesheet, WO er liegt. Ein Wert im Markup wäre ein Inline-Stil, und die CSP ist `style-src 'self'`. Die beiden Bänder haben ihren Mond an ganz verschiedenen Stellen: 75,18 % / 57,25 % bei 3,75 % Durchmesser gegen 79,72 % / 19,56 % bei 6,00 %. Ein gemeinsamer Wert wäre für beide falsch. */ .fussband { position: relative; } .fussband__mond { position: absolute; display: none; /* Die Farbe des Himmels an genau dieser Stelle, im Band gemessen. Nicht `--paper`: der Himmel des Bandes ist nicht der Grund der Seite, und ein Schatten in Seitenfarbe wäre ein Loch. */ overflow: visible; pointer-events: none; } /* Der Mond selbst: warmes Elfenbein, nicht Weiss. Reines Weiss ist auf diesem Blau der einzige Punkt ohne Farbe und zieht das Auge stärker an als alles andere im Bild — auch stärker als der Baum. Iris' eigene Vorlage hat einen warmen Mond. */ .fussband__mond .mond__licht { fill: #f2e8d2; } .fussband__mond .mond__schein { fill: #cbb98e; opacity: 0.55; } /* Sichtbar nach denselben Regeln wie das Nachtbild — dieselbe Reihenfolge, dieselbe Spezifität, damit der Mond nie ohne sein Bild erscheint. */ @media (prefers-color-scheme: dark) { .fussband__mond { display: block; } } :root[data-theme="light"] .fussband__mond { display: none; } :root[data-theme="dark"] .fussband__mond { display: block; } /* DIE ZAHLEN, und wie sie zustande kommen. Die gemalte Scheibe hat im Baum-Band den Radius 30 bei 1600 Punkten Breite; der Schatten deckt sie mit etwas Zugabe (36), und die viewBox trägt 20 % Rand für die weiche Kante. Kastenbreite ist also 2 × 36 × 1,2 = 86,4 Punkte = 5,40 %. Weil das Band 3 : 1 steht, ist dieselbe Strecke in Prozent der HÖHE dreimal so gross: 16,20 %. Die linke obere Ecke ist die gemessene Mitte minus der halben Kastenkante. DIE WEICHE KANTE IST DIE BEDINGUNG, nicht die Kür. Die gemalte Scheibe hat einen Schein, der weit über ihren Rand hinausreicht — gemessen: die Scheibe endet bei Radius 30, der Schein läuft bis 107 aus. Eine harte Schattenkante mitten in diesem Schein sieht aus wie eine Sonnenfinsternis: ein dunkler Kreis mit einem leuchtenden Ring darum. Genau so sah der erste Versuch aus. Die Farbe ist der Himmel an genau dieser Stelle, im Bild gemessen — nicht `--paper`: der Himmel des Bandes ist nicht der Grund der Seite, und ein Schatten in Seitenfarbe wäre ein Loch. */ .fussband__mond--baum { left: 72.18%; top: 48.25%; inline-size: 6.00%; block-size: 18.00%; } .fussband__mond--angehoerige { left: 74.92%; top: 5.16%; inline-size: 9.60%; block-size: 28.80%; } /* --- Der Himmelskalender im Fuss ----------------------------------------- Iris, 17. August 2026: „basically a sun and moon calendar a date and weather map as footer would be perfect." Datum, Sonnenzeiten über Bern, Mondphase. Alles drei gerechnet, nichts geholt — die Wetterkarte aus derselben Nachricht fehlt und wird fehlen, solange sie nicht entschieden ist. ES IST DIE EINZIGE STELLE DIESER WEBSITE, DIE SICH STÜNDLICH ÄNDERT, und sie steht deshalb ganz unten und leise. `--ink-3` ist der gemessene leise Ton (4,5 : 1 auf allen drei Papieren, `test_contrast.py`); grösser oder kräftiger würde eine Zierzeile über den Notrufnummern stehen, und die Reihenfolge der Aufmerksamkeit ist auf dieser Seite kein Geschmack. */ .footer__himmel { margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; font-family: "Archivo", system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-3); } /* Auf dunklem Grund trägt `--ink-3` nicht — dort gilt der eigene Ton für dunkle Flächen. Seit dem Creme-Tag (17. August) ist der Boden aber nur noch NACHTS dunkel: am Tag gilt ink-2 auf Creme (6,5:1), nachts und auf den immer-tiefen Füssen der on-deep-Ton. */ .footer--deep .footer__himmel { color: var(--ink-2-on-deep); } .footer__legal + .footer__himmel { color: var(--ink-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer__legal + .footer__himmel { color: var(--ink-2-on-deep); } } :root[data-theme="dark"] .footer__legal + .footer__himmel { color: var(--ink-2-on-deep); } /* --- Der echte Sternhimmel ------------------------------------------------ web/sterne.py rechnet, die Vorlage setzt Kreise, hier steht nur noch, wie sie aussehen. Dieselben Sichtbarkeitsregeln wie beim Mond — die Sterne erscheinen nie ohne ihr Nachtbild. Die Farbe ist kuehler als der Mond (der ist Elfenbein #f2e8d2): Sternlicht neben Mondlicht wirkt am Himmel blaesser, und zwei identische Toene laesen sich als dieselbe Lichtquelle. Kein reines Weiss — das waere der einzige Punkt ohne Farbe im Bild und zoege das Auge staerker an als der Baum. */ .fussband__sterne { position: absolute; inset: 0; display: none; pointer-events: none; } .fussband__sterne circle { fill: #dfe7f2; } @media (prefers-color-scheme: dark) { .fussband__sterne { display: block; } } :root[data-theme="light"] .fussband__sterne { display: none; } :root[data-theme="dark"] .fussband__sterne { display: block; } /* DIE STERNSCHNUPPEN HATTEN KEINE EINZIGE REGEL — behoben am 18. August. Iris: „let's fix the footer." Ihre BAHNEN waren gestaltet (`.sternschnuppe`, zwei Zykluszeiten, die sich nicht teilen), ihr BEHÄLTER nie. Ein `<svg viewBox="0 0 1600 533">` ohne Regel steht im Fluss und nimmt sich die volle Breite — bei 1200 px sind das **400 px leerer Block** direkt unter dem Fussbild, in beiden Modi, auf jeder Seite. Zwei Folgen, und die zweite ist die, die man sieht: 1. Das Fussband war **doppelt so hoch wie sein Bild** (gemessen 800 zu 400 bei 1200 px). Ein Drittel davon war Loch. 2. **Der Mond stand unter dem Horizont.** Seine Lage ist in Prozent des Bandes angegeben (57,25 % für den Baum) — gerechnet für ein Band in Bildhöhe. In einem doppelt so hohen Band landet dieselbe Prozentzahl unterhalb der Landschaft, im Nichts. Nicht der Mond war falsch gesetzt, sondern das Band zu hoch. Dieselbe Bauart wie die Sterne darüber: absolut, nur nachts, kein Mausziel. */ .fussband__schnuppen { position: absolute; inset: 0; display: none; pointer-events: none; } @media (prefers-color-scheme: dark) { .fussband__schnuppen { display: block; } } :root[data-theme="light"] .fussband__schnuppen { display: none; } :root[data-theme="dark"] .fussband__schnuppen { display: block; } /* --- Die echte Sonne ------------------------------------------------------ Gegenstueck zu Mond und Sternen: sichtbar am TAG, verborgen in der Nacht. Warmes Licht mit weichem Schein; die Scheibe selbst nicht rein weiss, aus demselben Grund wie beim Mond. Heute zeichnet sie kein Band (`sonne: False` in MOND_JE_BAND) — der Block wartet auf die sonnenlose Zeichnung aus Runde 5. */ .fussband__sonne { position: absolute; inset: 0; display: block; pointer-events: none; } .fussband__sonne circle { fill: #f6e9c4; } @media (prefers-color-scheme: dark) { .fussband__sonne { display: none; } } :root[data-theme="light"] .fussband__sonne { display: block; } :root[data-theme="dark"] .fussband__sonne { display: none; } /* --- DIE HIMMELSRICHTUNGEN UNTER DEM BAND -------------------------------- Iris, 17. August: «I meant north south, east, west in our footer for eg it is Osten to Westen which might be confusing without a compass.» Vier Marken statt einer Rose, und die vier sind die, die im Bild wirklich vorkommen: das Band blickt nach Südsüdosten, sein Fenster reicht von Azimut 77,5° bis 237,5° (`web/sterne.py`). Norden liegt hinter der Betrachterin — ein N wäre eine Marke ohne Ort. Die Prozente sind dieselbe Projektion, mit der die Sterne gesetzt werden: (Azimut − 77,5) / 160. Sie stehen deshalb wirklich unter dem Stern, der dort steht, und wandern nicht auseinander, wenn das Band seine Breite ändert. `translateX(-50%)` setzt die MITTE der Marke auf die Zahl, nicht ihre linke Kante — sonst läge das breitere „SW" um seine halbe Breite daneben, und zwar in jeder Sprache anders. */ .himmelsrose { position: relative; block-size: 1.35rem; margin-block-start: -0.15rem; } .himmelsrose__marken { position: relative; margin: 0; padding: 0; list-style: none; block-size: 100%; } .himmelsrose__marke { position: absolute; inset-block-start: 0; transform: translateX(-50%); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; /* ~~`--ink-2-on-deep`~~ → **`--ink-2`**, nach der Messung und nicht nach dem Augenschein. Die Marken stehen UNTER dem Band, auf dem Grund der Seite — und der ist im Tagmodus cremefarben, nicht dunkel. Gemessen mit der Tinte für dunkle Flächen: nachts 9,91:1, tagsüber **1,65:1**, also praktisch unsichtbar. `--ink-2` wechselt mit dem Thema und ist in beiden Fassungen die Tinte des Grundes, auf dem sie liegt. */ color: var(--ink-2); } .himmelsrose__marke--o { inset-inline-start: 7.81%; } .himmelsrose__marke--so { inset-inline-start: 35.94%; } .himmelsrose__marke--s { inset-inline-start: 64.06%; } .himmelsrose__marke--sw { inset-inline-start: 92.19%; } /* DIE HALBE DREHUNG, DIE NICHT MITGESPIEGELT HAT. Gefunden in der visuellen Runde vor der Freischaltung, am 18. August: auf `/ar/` schob das Telefon bei 320 px **vier Pixel waagrecht** — auf keiner anderen Seite und in keiner anderen Sprache. Die Ursache ist eine halbe Modernisierung. Die Position steht in logischen Eigenschaften (`inset-inline-start`), und die kennen die Schreibrichtung: auf Arabisch messen sie von rechts. Die Zentrierung daneben ist aber physisch — `translateX(-50%)` zieht **immer** nach links, gleichgültig wie der Text läuft. In RTL zieht sie die Marke damit von der Mitte weg statt in sie hinein, und die äusserste steht über den Rand hinaus. Ein Beispiel dafür, dass „logische Eigenschaften verwenden" nur hilft, wenn man sie ganz verwendet. Eine physische Zeile in einer logischen Umgebung ist unauffälliger als gar keine Umstellung — sie fällt erst in der einen Sprache auf, die man zuletzt anschaut. */ [dir="rtl"] .himmelsrose__marke { transform: translateX(50%); } /* --- DIE ZWEI ABSCHLIESSENDEN TANNEN ------------------------------------- Iris, 17. August: «Mache noch eine abschliessende Tanne links und rechts des Fussbandes damit es schön abgeschlossen werden kann.» Sie wachsen aus der Unterkante, wie die gezeichneten Bäume daneben, und stehen ganz aussen. Höhe in Prozent der Bandhöhe statt in Pixeln: die drei Bänder sind 267 und 533 Einheiten hoch und laufen über jede Fensterbreite — eine Pixelhöhe wäre auf genau einem Band richtig. ~~42 %~~ → **26 %**, Iris nach dem ersten Versuch: «Smaller.» Und sie hatte recht auf eine Weise, die sich messen lässt: die gemalten Randtannen des Baum-Bandes reichen von der Unterkante bis rund y=390 von 533, das sind 27 % der Bildhöhe. Mit 42 % überragte die neue Gruppe die gemalten um die Hälfte und las sich deshalb als Fläche vor dem Bild statt als Baum darin. `pointer-events: none`, weil unter dem Band die Visitenkarte und die Aare-Linie liegen — ein Schmuckbaum darf keinen Klick abfangen. */ .fussband__tanne { position: absolute; inset-block-end: 0; block-size: 26%; inline-size: auto; pointer-events: none; /* Die Silhouettenfarbe der Tagbänder, im Bildfuss abgelesen. */ fill: rgb(3 17 30); } .fussband__tanne--links { inset-inline-start: 0; } /* Gespiegelt statt kopiert: zwei identische Ränder lesen sich als Wiederholung, zwei gespiegelte als Rahmen. `transform` und nicht eine zweite Zeichnung — dieselbe Datei, dieselbe Zeile Pflege. */ .fussband__tanne--rechts { inset-inline-end: 0; transform: scaleX(-1); } /* Nachts ist die Silhouette eine andere Schwärze — ebenfalls abgelesen, nicht geschätzt: rgb(5 10 17) gegen rgb(3 17 30) am Tag. Der Unterschied ist klein und genau deshalb wichtig: eine Tanne, die den Tagwert behält, sitzt nachts als hellerer Fleck auf dem Band. Dieselbe Dreifach-Bedingung wie überall — Systemvorgabe, Handwahl Dunkel, Handwahl Hell schlägt beide. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fussband__tanne { fill: rgb(5 10 17); } } :root[data-theme="dark"] .fussband__tanne { fill: rgb(5 10 17); } :root[data-theme="light"] .fussband__tanne { fill: rgb(3 17 30); } /* Der Strich unter dem Band und über dem Buchstaben — Iris, 17. August: «Maybe a compass would be nicer than a line?» Keine runde Rose (sie zeigt 360°, das Band 160° — siehe die Begründung im Fuss-Baustein), sondern das, was einen Kompass eigentlich ausmacht: eine Skala. Der Strich sitzt auf dem Azimut, der Buchstabe darunter. Vier schwebende Buchstaben werden damit zu einer Randskala. Die Marke wird dafür zur Spalte: Strich oben, Wort unten, beide auf derselben Mittelachse — `translateX(-50%)` an der Marke gilt weiter für beide. */ .himmelsrose { block-size: 1.75rem; } .himmelsrose__marke { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .himmelsrose__strich { inline-size: 1px; block-size: 0.42rem; background: currentColor; opacity: 0.7; } /* --- DAS KOPFBAND DER SEITEN --------------------------------------------- Iris, 17. August: «Every Site except map and maybe .city should have a Kopf/Fussbild night and day», Ordnung nach dem Chakra-Weg. Es liegt als erstes Kind in `<main>` und ist damit AUSSERHALB der Schale: das Band geht über die volle Fensterbreite, wie das Fussband unten. Beide zusammen rahmen die Seite, und der Rahmen ist auf beiden Seiten gleich breit — das war die Bedingung, unter der es überhaupt Sinn ergibt. Die Höhe ist an die Breite gekoppelt (`aspect-ratio`) und nach oben gedeckelt. Der Grund ist derselbe wie beim Bergwelt-Band: auf einem Telefon wäre ein 600-px-Bild ein halber Schirm Landschaft vor der Überschrift, und wer eine Datenschutzseite öffnet, sucht den Text. */ .seitenkopf { position: relative; overflow: hidden; /* `inline-size: 100%` ist NICHT überflüssig, sondern die Zeile, ohne die das Band falsch ist. Gemessen ohne sie: 640 px breit statt 1200. Grund: `aspect-ratio` zusammen mit `max-block-size` darf die Box in BEIDE Richtungen schrumpfen — der Browser nimmt die gedeckelte Höhe (240 px) und rechnet daraus die Breite (240 x 1600/600 = 640). Mit einer gesetzten Breite gewinnt die Breite, die Höhe folgt, und der Deckel schneidet über `overflow` ab, statt zu verkleinern. */ inline-size: 100%; aspect-ratio: 1600 / 600; max-block-size: 15rem; /* Die Farbe des Grundes, bis das Bild da ist — nie ein weisses Loch. */ background: var(--deep-2); } .seitenkopf__bild, .seitenkopf__bild picture { display: block; block-size: 100%; } .seitenkopf__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; /* 42 % und nicht 50: in diesen Motiven steht das Motiv im oberen Drittel (Gipfel, Fenster, Lichtkegel). Bei 50 % schneidet der Deckel genau davon ab. Gemessen an allen zehn Bändern. */ object-position: 50% 42%; } /* Der Übergang ins Papier. Ohne ihn endet das Bild an einer harten Kante mitten auf der Seite — beim Fussband löst das die Landschaft selbst, hier gibt es nichts, was sie lösen könnte. Der Verlauf läuft in die Papierfarbe der jeweiligen Fassung, deshalb ein Token und keine Zahl. */ .seitenkopf__schleier { position: absolute; inset: auto 0 0 0; block-size: 45%; background: linear-gradient(to bottom, rgb(0 0 0 / 0%), var(--paper) 96%); pointer-events: none; } /* Am Telefon flacher: 15rem sind dort mehr als ein Drittel des Schirms. */ @media (max-width: 37.5rem) { .seitenkopf { max-block-size: 8.5rem; } } /* Wer Bewegung reduziert hat, bekommt trotzdem das Band — es bewegt sich nicht. Diese Zeile steht hier, damit niemand beim nächsten Umbau auf die Idee kommt, es unter [data-motion] zu hängen: ein stehendes Bild ist keine Bewegung. */ /* ========================================================================== DIE BEWEGUNG DES FUSSBANDES — Groks Partitur, 17. August 2026 ========================================================================== Iris hat die Frage nach der Bewegung an Grok gegeben (die Originalvideos sind seine) und die Antwort zurückgebracht: eine Partitur in vier Schichten — Ankunft, Atem, Ereignis, Antwort. Umgesetzt ist sie hier, mit zwei Abweichungen, die beide technisch und nicht geschmacklich sind. **ABWEICHUNG 1 — die Staffelung kommt aus `:nth-child()`, nicht aus einer Variablen.** Grok schlug `animation-delay: calc(var(--stern-index) * 90ms)` vor, gesetzt vom Skript. Das wäre auf dieser Website **still gescheitert**: die CSP ist `style-src 'self'`, und `element.style.setProperty()` schreibt ein `style`-Attribut — der Browser verwirft es wortlos, die Sterne erschienen alle gleichzeitig, und niemand hätte einen Fehler gesehen. Die Ordnung entsteht deshalb dort, wo die Liste entsteht: `web/sterne.py` sortiert die Sterne seit heute **radial von der Bandmitte nach aussen**, und `:nth-child()` ist damit die Welle, die Grok beschrieben hat — ohne eine Zeile JavaScript. **ABWEICHUNG 2 — die Sternschnuppe hat keinen Zeitgeber.** Grok schlug `setInterval` mit unregelmässiger Pause vor. Eine Animation mit sehr langer Dauer und einem winzigen sichtbaren Fenster leistet dasselbe, kostet keinen Timer, überlebt einen Tabwechsel und friert mit `animation-play-state` ein, sobald das Band aus dem Bild ist. Was das Skript tut, ist genau eines: **Klassen setzen.** `is-erwacht` einmal beim Eintritt, `is-sichtbar` solange das Band im Bild ist. Kein Wert, keine Messung, kein Stil. ========================================================================== */ /* Die Kurven aus der Partitur, einmal benannt. */ :root { --ease-ankunft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-setzen: cubic-bezier(0.33, 1, 0.68, 1); } /* --- 1. ANKUNFT ---------------------------------------------------------- Nur mit Skript: ohne `hat-js` gibt es kein `is-erwacht`, und ein Himmel, der auf eine Klasse wartet, die nie kommt, wäre ein leeres Band. Ohne Skript steht alles sofort da — Regel 7 der Vorgaben. */ @media (prefers-reduced-motion: no-preference) { :root.hat-js .fussband__sterne circle, :root.hat-js .fussband__mond, :root.hat-js .fussband__sonne { opacity: 0; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle { animation: stern-auf 900ms var(--ease-ankunft) both; } /* Die Welle: 13 Sterne, radial sortiert, 90 ms Abstand — Groks Zahl. Dreizehn Regeln statt einer Rechnung, und das ist der Preis der CSP. Er ist es wert: die Welle ist damit auch dann richtig, wenn das Skript gar nicht lädt und `is-erwacht` von Hand gesetzt wird. */ :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(1) { animation-delay: 0ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(2) { animation-delay: 90ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(3) { animation-delay: 180ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(4) { animation-delay: 270ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(5) { animation-delay: 360ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(6) { animation-delay: 450ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(7) { animation-delay: 540ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(8) { animation-delay: 630ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(9) { animation-delay: 720ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(10) { animation-delay: 810ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(11) { animation-delay: 900ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(12) { animation-delay: 990ms; } :root.hat-js .fussband.is-erwacht .fussband__sterne circle:nth-child(n+13) { animation-delay: 1080ms; } /* «Das Licht, das am längsten braucht, ist das, das bleibt.» Der Mond kommt 450 ms nach dem letzten Stern — Groks Zahl, hier als Summe: 1080 ms letzter Stern + 900 ms Dauer − 500 ms Überlappung. */ :root.hat-js .fussband.is-erwacht .fussband__mond { animation: gestirn-auf 700ms var(--ease-ankunft) 1480ms both; } /* Die Sonne steht am Tag an derselben Stelle im Ablauf wie der Mond nachts — nur eine von beiden ist je sichtbar. */ :root.hat-js .fussband.is-erwacht .fussband__sonne { animation: gestirn-auf 700ms var(--ease-ankunft) 1480ms both; } /* «Der Rand der Welt kommt zur Ruhe, bevor der Blick in die Mitte geht.» Die Tannen starten 5 % zu tief; links 120 ms früher als rechts. */ :root.hat-js .fussband.is-erwacht .fussband__tanne { animation: tanne-setzen 1900ms var(--ease-setzen) both; } :root.hat-js .fussband.is-erwacht .fussband__tanne--rechts { animation-delay: 120ms; } } @keyframes stern-auf { from { opacity: 0; } to { opacity: 1; } } @keyframes gestirn-auf { from { opacity: 0; } to { opacity: 1; } } /* Die rechte Tanne ist gespiegelt (`scaleX(-1)`) — ihre Bewegung muss die Spiegelung mitführen, sonst springt sie beim Start der Animation zurück. Deshalb zwei Bildfolgen und nicht eine mit `translateY` allein. */ @keyframes tanne-setzen { from { transform: translateY(5%); } to { transform: translateY(0); } } .fussband__tanne--rechts { transform: scaleX(-1); } @media (prefers-reduced-motion: no-preference) { :root.hat-js .fussband.is-erwacht .fussband__tanne--rechts { animation-name: tanne-setzen-gespiegelt; } } @keyframes tanne-setzen-gespiegelt { from { transform: scaleX(-1) translateY(5%); } to { transform: scaleX(-1) translateY(0); } } /* --- 2. ATEM ------------------------------------------------------------- Dauerzustand, und deshalb an BEIDEN Schaltern: der Systemvorgabe und dem Lebendig-Schalter dieser Website. Alles hier läuft über `opacity` und `transform` — beides auf dem Compositor, kein Neuzeichnen. */ @media (prefers-reduced-motion: no-preference) { :root[data-motion="full"] .fussband.is-erwacht .mond__schein { animation: mond-atem 12s ease-in-out 2.4s infinite; } /* «Der Himmel ist lebendig, aber er drängt sich nicht auf.» Drei von dreizehn Sternen flimmern, mit verschiedenen Dauern und Verzögerungen, damit sich das Muster nicht schliesst. Grok: nie alle. */ :root[data-motion="full"] .fussband.is-erwacht .fussband__sterne circle:nth-child(4) { animation: stern-auf 900ms var(--ease-ankunft) 270ms both, stern-flimmern 5.5s ease-in-out 3.1s infinite; } :root[data-motion="full"] .fussband.is-erwacht .fussband__sterne circle:nth-child(7) { animation: stern-auf 900ms var(--ease-ankunft) 540ms both, stern-flimmern 6.8s ease-in-out 5.4s infinite; } :root[data-motion="full"] .fussband.is-erwacht .fussband__sterne circle:nth-child(10) { animation: stern-auf 900ms var(--ease-ankunft) 810ms both, stern-flimmern 4.7s ease-in-out 7.9s infinite; } /* «Auch die Ränder atmen.» ±0,6°, Drehpunkt am Stammfuss, die zwei Tannen gegenphasig (die rechte über eine negative Verzögerung, damit sie nicht erst nach 10 s einsetzt). */ :root[data-motion="full"] .fussband.is-erwacht .fussband__tanne { transform-origin: 50% 100%; animation: tanne-setzen 1900ms var(--ease-setzen) both, tanne-wind 21s ease-in-out 1.9s infinite; } :root[data-motion="full"] .fussband.is-erwacht .fussband__tanne--rechts { animation-name: tanne-setzen-gespiegelt, tanne-wind-gespiegelt; animation-delay: 120ms, -8.6s; } } @keyframes mond-atem { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.68; } } @keyframes stern-flimmern { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } } @keyframes tanne-wind { 0%, 100% { transform: rotate(-0.6deg) scaleY(0.992); } 50% { transform: rotate(0.6deg) scaleY(1.008); } } @keyframes tanne-wind-gespiegelt { 0%, 100% { transform: scaleX(-1) rotate(-0.6deg) scaleY(0.992); } 50% { transform: scaleX(-1) rotate(0.6deg) scaleY(1.008); } } /* --- 3. EREIGNIS --------------------------------------------------------- «Etwas fällt und ist gleich wieder vorbei.» Eine Sternschnuppe alle 5 Minuten 30, sichtbar 1,25 s — das sind 0,38 % der Zyklusdauer, und genau deshalb braucht es keinen Zeitgeber: eine 330-s-Animation mit einem winzigen sichtbaren Fenster kostet nichts, überlebt einen Tabwechsel und friert mit dem Rest ein, sobald das Band aus dem Bild ist. Die zweite Schnuppe läuft mit anderer Dauer (413 s) — zwei Zyklen, die sich nicht teilen, ergeben ein Muster, das sich erst nach Stunden wiederholt. Billiger als Zufall und ehrlicher als „random". */ .sternschnuppe { opacity: 0; } @media (prefers-reduced-motion: no-preference) { :root[data-motion="full"] .fussband.is-erwacht .sternschnuppe--a { animation: schnuppe 330s linear 40s infinite; } :root[data-motion="full"] .fussband.is-erwacht .sternschnuppe--b { animation: schnuppe 413s linear 190s infinite; } } @keyframes schnuppe { 0%, 99.61% { opacity: 0; transform: translate(0, 0); } 99.65% { opacity: 0.9; transform: translate(0, 0); } 99.86% { opacity: 0.55; } 100% { opacity: 0; transform: translate(-190px, 150px); } } /* --- 4. ANTWORT ---------------------------------------------------------- «Der Himmel merkt, dass jemand hinschaut — und bleibt trotzdem still.» Ein fester, kleiner Betrag, Rückweg 1,2 s. `:focus-within` steht daneben, weil unter dem Band Links liegen: wer sich mit der Tastatur dorthin bewegt, soll dieselbe Antwort bekommen wie die Maus. NICHT unter `data-motion`: eine Antwort auf die eigene Bewegung ist Rückmeldung, keine Kür — dieselbe Linie wie beim Porträt-Zoom. */ .fussband__sterne, .fussband__mond { transition: filter 1200ms var(--ease-ankunft); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .fussband:hover .fussband__sterne, .fussband:hover .fussband__mond, .fussband:focus-within .fussband__sterne, .fussband:focus-within .fussband__mond { filter: brightness(1.18); } } /* --- Nichts läuft, wenn niemand hinsieht --------------------------------- Das Band steht im Fuss: auf einer langen Seite ist es die meiste Zeit ausserhalb des Bildes. `animation-play-state` über eine Klasse ist der billigste Weg, und er ist vollständig — auch die 330-s-Schnuppe hält an, statt im Hintergrund weiterzuzählen. */ /* `!important` — und das ist der eine Ort auf dieser Website, an dem es richtig ist. Ohne es greift die Regel NICHT, gemessen am 17. August im Browser: `pausiert: 0` von 19 laufenden Bildfolgen. Der Grund ist Spezifität, kein Tippfehler — die einschaltenden Regeln stehen unter `:root[data-motion="full"] .fussband.is-erwacht …`, und dagegen kommt ein schlichtes `.fussband:not(.is-sichtbar)` nicht an. **Ein Ausschalter, der jeden Einschalter schlagen muss, ist genau der Fall, für den es `!important` gibt.** Die Alternative wäre, jede Einschaltregel um eine Ausnahme zu erweitern — elf Stellen, an denen künftig eine vergessen werden kann, statt einer, die alle deckt. */ .fussband:not(.is-sichtbar) .fussband__sterne circle, .fussband:not(.is-sichtbar) .fussband__mond, .fussband:not(.is-sichtbar) .mond__schein, .fussband:not(.is-sichtbar) .fussband__sonne, .fussband:not(.is-sichtbar) .fussband__tanne, .fussband:not(.is-sichtbar) .sternschnuppe { animation-play-state: paused !important; }