innerhalb einer dunklen Seite erbt sonst die dunklen Werte von :root und bliebe dunkel. ⚠ Seit PO 2026-07-30 gilt: OHNE Wahl ist HELL der Default — der Media-Query-Satz greift nur noch unter [data-theme="system"] (explizite Wahl · Profil · Embed-F22), nie mehr von selbst. =========================================================================== */ @layer tokens, basis, komponenten, seite; @layer tokens { :root { /* --- Schrift ------------------------------------------------------- */ --schrift-text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --schrift-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --gewicht-normal: 400; --gewicht-mittel: 500; --gewicht-halb: 600; --gewicht-fett: 700; --gewicht-schwer: 800; /* Grosszügige Grade — Zielgruppe schliesst ältere Nutzer ein (§4.6). Fliesstext 17 px, kleinster Wert 13 px nur für Versalien-Etiketten. */ --txt-etikett: 0.8125rem; --txt-klein: 0.9375rem; --txt-text: 1.0625rem; --txt-gross: 1.1875rem; --txt-t4: 1.375rem; --txt-t3: clamp(1.5rem, 1.2rem + 1vw, 1.75rem); --txt-t2: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); --txt-t1: clamp(2.125rem, 1.4rem + 3vw, 3.25rem); --zeile-eng: 1.15; --zeile-titel: 1.2; --zeile-text: 1.65; --sperrung-etikett: 0.09em; --sperrung-titel: -0.02em; /* --- Raum ---------------------------------------------------------- */ --raum-1: 0.25rem; --raum-2: 0.5rem; --raum-3: 0.75rem; --raum-4: 1rem; --raum-5: 1.5rem; --raum-6: 2rem; --raum-7: 3rem; --raum-8: 4rem; /* Maximalbreite des zentrierten Inhalts. Grössere Viewports bedeuten nur mehr Rand — nichts bricht um (Abnahme bei 1280/768/360). */ --behaelter-max: 1280px; --behaelter-rand: var(--raum-5); --lese-max: 68ch; /* --- Form ---------------------------------------------------------- */ --radius-s: 6px; --radius-m: 10px; --radius-l: 14px; --radius-voll: 999px; --linie-breit: 1px; --tastfeld: 2.75rem; /* 44 px Mindest-Klickfläche (§7) */ --leiste-hoehe: 4.5rem; --cue-hoehe: 3rem; /* E7: 0 — die Platz-Reservierung übernimmt die dynamische body.leiste-an- Mechanik (op-player.js); der frühere Alt-Block-Override ist damit die EINE Wahrheit geworden (eine dauerhafte Reservierung stünde auf jeder Seite ohne Wiedergabe als 120px Leerraum — basis.css:65 liest weiter). */ --leiste-platz: 0px; /* --- Bewegung ------------------------------------------------------ */ --dauer-schnell: 120ms; --dauer-normal: 200ms; --kurve: cubic-bezier(0.2, 0, 0.2, 1); /* --- Schatten (in DUNKEL bewusst schwächer) ------------------------ */ --schatten-1: 0 1px 2px rgb(26 24 19 / 0.06); --schatten-2: 0 4px 16px rgb(26 24 19 / 0.09); --schatten-leiste: 0 -2px 14px rgb(26 24 19 / 0.10); /* ================================================================= FARBEN · HELL (Default) Kontrastwerte siehe BEGLEITDOKUMENT.md, Abschnitt «Token-Tabelle». ================================================================= */ --flaeche: #faf9f4; /* Seite */ --flaeche-2: #ffffff; /* Karte, Panel */ --flaeche-3: #f0eee4; /* Feld, stiller Knopf */ --flaeche-4: #e4e7d4; /* markiger Chip */ --flaeche-tief: #111814; /* Untertitel-Bühne + Cue-Pille: in BEIDEN Themes dieselbe Warm-Schwarz-Fläche */ --auf-tief: #eef0e6; /* Bildflächen ohne Cover: Oliv → Braun, aus den Logo-Farben abgeleitet. Je Theme leicht anders gestimmt, damit der Verlauf im hellen Umfeld nicht als Loch wirkt. Schrift darauf ist immer --auf-tief. */ --verlauf-bild: linear-gradient(140deg, #3f4830, #5f6d3f 55%, #6d5b56); --verlauf-buehne: linear-gradient(140deg, #333c26, #4d5834 58%, #6d5b56); --text: #1a1813; /* 16,8:1 auf --flaeche */ --text-2: #4a453a; /* 9,0:1 */ --text-3: #5f5a4c; /* 6,5:1 — kleinster Textton, noch AA */ --linie: #d8d4c6; --linie-stark: #8a8471; --marke: #5c6b3c; /* 5,5:1 als Text, 5,8:1 mit weisser Schrift */ --marke-auf: #ffffff; /* Schrift auf --marke */ --marke-still: #4a5630; /* Hover/Aktiv der markigen Fläche */ /* Warmer Zweitton, aus dem Braun der Bildverläufe abgeleitet. NUR für Sinnbilder, die Zuwendung tragen (Anliegen, Gebet) — nie für Formate, Zustände oder Bedienelemente. Der Kontrast liegt bewusst nah an --marke (5,56:1 gegen 5,50:1), damit kein Symbol schwerer wirkt. */ --akzent-warm: #845c40; /* 5,6:1 auf --flaeche, 5,9:1 auf --flaeche-2 */ --fokus: #1a1813; --fokus-halo: #abbb36; /* Logo-Varianten: die Wortmarke braucht auf dunklem Grund eine helle Fassung (§3). Umschaltung rein über Tokens — kein Theme-Selektor in der Komponenten-Schicht. */ --logo-hell: block; --logo-dunkel: none; /* ── OP-ERGÄNZUNGS-TOKEN (E7): aus dem Alt-Block PROMOTET — Nutzer im komponenten-OP-Block (Marker-System marker-ring/-haken, meldung--fehler, knopf--gefahr, konto-karte--gefahr, predigten.css-hidden-Marken, :target-/Admin-Nav-Offset). ⚠ KORREKTUR 2026-08-02 (Farbinsel Schritt 2): hier stand «BEWUSST theme-unabhängig: in allen vier Farbsätzen wertgleich». Für die FARBEN dieser Gruppe war das falsch, und es hat die Admin-Insel am Leben gehalten: `--fehler` ist ein auf HELLEM Grund gerechnetes Dunkelrot (im Dunkel-Satz 2,8:1 als Text), `--fehler-tint` dort eine fast weisse Fläche, `--marker-track` eine DUNKLE Transparenz auf dunklem Grund. Der Adminbereich hat sich alle drei mit eigenen Werten geradegebogen — genau das WAR die Insel. Sie kippen jetzt mit dem Theme; `--kopf-hoehe` und die beiden Marker-Verweise bleiben wertgleich. ⚠ t7 (messung-theme.mjs) vergleicht hell==hell und dunkel==dunkel, NIE hell==dunkel — die vier Blöcke bleiben also paarweise synchron. ── */ --fehler: #A03D2E; --fehler-tint: #F6E7E3; --fehler-auf: #ffffff; /* Schrift auf --fehler — Muster von --marke-auf */ --marker-track: rgba(26, 24, 19, .14); --marker-lauf: var(--marke); --marker-fertig: var(--marke-still); --kopf-hoehe: 73px; color-scheme: light; } /* >>> DUNKEL-SATZ · Variante A: System-Einstellung ------------------- ⚠ Guard seit PO 2026-07-30 («Standardfarbe beim ersten Aufruf = weiss»): dieser Satz greift NUR noch bei EXPLIZITER System-Wahl — data-theme="system" kommt vom Boot-Skript (localStorage), vom SSR (Profil, Migration 074) oder vom Embed-Skelett (F22: Embeds folgen REIN dem System). OHNE Attribut gilt der :root-Hell-Satz — der frühere Guard :root:not([data-theme="hell"]) machte prefers zum Default für alle Erstbesucher. */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --flaeche: #12130f; --flaeche-2: #1b1d17; --flaeche-3: #23261e; --flaeche-4: #333a22; --flaeche-tief: #111814; --auf-tief: #eef0e6; --verlauf-bild: linear-gradient(140deg, #2f3524, #454e30 55%, #54453f); --verlauf-buehne: linear-gradient(140deg, #242a1b, #3f4830 58%, #54453f); --text: #f0efe8; /* 16,2:1 auf --flaeche */ --text-2: #c6c7b8; /* 10,7:1 */ --text-3: #a5a798; /* 7,5:1 */ --linie: #33362b; --linie-stark: #7a806a; --marke: #abbb36; /* 8,8:1 als Text; 8,8:1 mit --marke-auf */ --marke-auf: #12130f; --marke-still: #c3d44a; --akzent-warm: #c4a08c; /* 7,8:1 auf --flaeche, 7,1:1 auf --flaeche-2 */ --fokus: #f0efe8; --fokus-halo: #abbb36; --schatten-1: 0 1px 2px rgb(0 0 0 / 0.35); --schatten-2: 0 4px 16px rgb(0 0 0 / 0.45); --schatten-leiste: 0 -2px 14px rgb(0 0 0 / 0.55); --logo-hell: none; --logo-dunkel: block; /* OP-ERGÄNZUNGS-TOKEN (E7) — ⚠ die Fehler-Familie und --marker-track sind seit der Farbinsel-Auflösung (2026-08-02) DUNKEL-Werte und NICHT mehr wertgleich zum :root-Satz; t7 hält sie mit dem Zwillingsblock [data-theme="dunkel"] synchron. */ --fehler: #f0a292; /* 9,1:1 als Text auf --flaeche (Hell-Wert lag bei 2,8:1) */ --fehler-tint: #3c2620; --fehler-auf: #12130f; /* dunkle Schrift auf dem hellen Rot — wie --marke-auf */ --marker-track: rgba(240, 239, 232, .18); --marker-lauf: var(--marke); --marker-fertig: var(--marke-still); --kopf-hoehe: 73px; color-scheme: dark; } } /* >>> DUNKEL-SATZ · Variante B: explizite Scope-Marke ---------------- */ [data-theme="dunkel"] { --flaeche: #12130f; --flaeche-2: #1b1d17; --flaeche-3: #23261e; --flaeche-4: #333a22; --flaeche-tief: #111814; --auf-tief: #eef0e6; --verlauf-bild: linear-gradient(140deg, #2f3524, #454e30 55%, #54453f); --verlauf-buehne: linear-gradient(140deg, #242a1b, #3f4830 58%, #54453f); --text: #f0efe8; --text-2: #c6c7b8; --text-3: #a5a798; --linie: #33362b; --linie-stark: #7a806a; --marke: #abbb36; --marke-auf: #12130f; --marke-still: #c3d44a; --akzent-warm: #c4a08c; --fokus: #f0efe8; --fokus-halo: #abbb36; --schatten-1: 0 1px 2px rgb(0 0 0 / 0.35); --schatten-2: 0 4px 16px rgb(0 0 0 / 0.45); --schatten-leiste: 0 -2px 14px rgb(0 0 0 / 0.55); --logo-hell: none; --logo-dunkel: block; /* OP-ERGÄNZUNGS-TOKEN (E7) — ⚠ Zwilling des Media-Dunkel-Satzes: die Fehler-Familie und --marker-track sind DUNKEL-Werte (Farbinsel Schritt 2, 2026-08-02), nicht mehr wertgleich zum :root-Satz. Beide Dunkel-Blöcke immer gemeinsam ändern (t7). */ --fehler: #f0a292; --fehler-tint: #3c2620; --fehler-auf: #12130f; --marker-track: rgba(240, 239, 232, .18); --marker-lauf: var(--marke); --marker-fertig: var(--marke-still); --kopf-hoehe: 73px; color-scheme: dark; } /* >>> HELL-SATZ · explizite Scope-Marke ---------------------------------- Vollständiges Override-Set, symmetrisch zu [data-theme="dunkel"]. Nötig, weil die Wurzel-Guards nur greifen, wenn die Marke auf dem WURZELelement sitzt: ein verschachteltes

in dunkler Umgebung erbt sonst die dunklen Werte von :root und bleibt dunkel. Damit ist «hell» genauso portabel wie «dunkel» — für helle Inseln in dunkler Umgebung (Vorschaukacheln, eingebettete Bereiche). */ [data-theme="hell"] { --flaeche: #faf9f4; --flaeche-2: #ffffff; --flaeche-3: #f0eee4; --flaeche-4: #e4e7d4; --flaeche-tief: #111814; --auf-tief: #eef0e6; --verlauf-bild: linear-gradient(140deg, #3f4830, #5f6d3f 55%, #6d5b56); --verlauf-buehne: linear-gradient(140deg, #333c26, #4d5834 58%, #6d5b56); --text: #1a1813; --text-2: #4a453a; --text-3: #5f5a4c; --linie: #d8d4c6; --linie-stark: #8a8471; --marke: #5c6b3c; --marke-auf: #ffffff; --marke-still: #4a5630; --akzent-warm: #845c40; --fokus: #1a1813; --fokus-halo: #abbb36; --logo-hell: block; --logo-dunkel: none; --schatten-1: 0 1px 2px rgb(26 24 19 / 0.06); --schatten-2: 0 4px 16px rgb(26 24 19 / 0.09); --schatten-leiste: 0 -2px 14px rgb(26 24 19 / 0.10); /* OP-ERGÄNZUNGS-TOKEN (E7) — Zwilling des :root-Satzes (t7-Wächter) */ --fehler: #A03D2E; --fehler-tint: #F6E7E3; --fehler-auf: #ffffff; --marker-track: rgba(26, 24, 19, .14); --marker-lauf: var(--marke); --marker-fertig: var(--marke-still); --kopf-hoehe: 73px; color-scheme: light; } /* Schmale Geräte: 16 px Rand statt 24 — bei 360 px zählt jeder Pixel für die Textspalte. Als Token, damit alle Behälter mitgehen. */ @media (max-width: 34rem) { :root { --behaelter-rand: var(--raum-4); } } /* ========================================================================= ADMIN — ⚑ DIE FARBINSEL IST AUFGELÖST (Schritt 2 von 2, PO-Entscheid 2026-08-01, umgesetzt 2026-08-02). HIER STEHT ABSICHTLICH KEIN TOKEN MEHR. Historie in einem Satz: der Adminbereich trug seit V1/A7 eine EIGENE, kühl- anthrazitfarbene Palette mit eigenem Vokabular (--gruen, --karte, --feld, --text-mittel, --link …). Das waren zuletzt 62, nach Schritt 1 noch 27 Tokens — eine dritte Farbwelt neben Hell und Dunkel. Ihr Preis war nicht die Farbe, sondern die DOPPELDEUTIGKEIT: derselbe Name bedeutete hier etwas anderes als dort (`--fehler` war öffentlich ein Dunkelrot und im Admin ein heller Lachston). Genau daran sind am 2026-08-01 zwei Bugs entstanden. Jetzt gilt: der Admin läuft auf dem ÖFFENTLICHEN Dunkel-Satz. layout.php setzt dafür `data-theme="dunkel"` am (F21: Admin bleibt fest dunkel); `.admin-modus` am ist seither eine reine STRUKTUR-Marke für die Layout-Regeln in komponenten.css — kein Farb-Träger mehr. ⚠ WER DEN ADMIN FARBLICH ÄNDERN WILL, ÄNDERT DEN DUNKEL-SATZ OBEN — und ändert damit auch das öffentliche Dunkel-Theme. Ein neuer Token hier würde die Insel wiedereröffnen und braucht einen PO-Entscheid. ⚠ Damit ist «Admin folgt dem Theme» nur noch EINE Zeile: das feste data-theme in layout.php (~404) wegzulassen. Bewusst noch nicht getan — die Kontext-Trennung dunkel/hell war dreimal PO-Entscheid (V1-A7 · R18 · F21). Was beim Auflösen mitgezogen werden MUSSTE (sonst wäre der Admin kaputt): · --gruen → --marke: die Fläche kippt von dunkel-oliv auf helles Lime, also kippt die Schrift darauf von #fff auf --marke-auf. Jede solche Stelle wurde einzeln nachgezogen (komponenten.css + seiten/admin-*.css). · --fehler/--fehler-tint/--marker-track: standen im öffentlichen Dunkel-Satz als HELL-Werte und wurden dort korrigiert (s. oben). · NEU --fehler-auf, damit «Schrift auf Rot» nicht wieder je Theme von Hand geraten wird — dasselbe Muster wie --marke-auf. ========================================================================= */ }