/* ============================================================ LESEHILFEN für die Einblicke-Artikel (1) Lesemodus – heller Lesegrund (2) Textgröße – drei Stufen ------------------------------------------------------------ Entscheidung 14.08.2026 (Zwei-Zonen-System): Artikel gehören zur Zone A „Bühne" und starten deshalb DUNKEL. Der Lesemodus ist die einzige Ausnahme und ausdrücklich opt-in. Die Einblicke-Übersicht bleibt immer dunkel, ohne Umschalter. ── Warum Creme und nicht das Werkstatt-Blau ────────────────── Der helle Grund ist NICHT `#F4F7FC`. Das ist die Farbe der Produkt-Landings und Werkzeuge — Zone B, „hier wird gearbeitet". Ein Artikel wird gelesen, nicht bedient. Er nimmt deshalb die Palette von Reboot School: `#F5F1E8`, das Papier des Buches. Von Franz am 26.08.2026 festgelegt. Die Werte stammen 1:1 aus `html.light` in `src/reboot-school/index.html`, damit Buch und Artikel als ein Lesekosmos auftreten: Grund #F5F1E8 · Karten #FFFDF7 · Text #22303C / #54626F Teal #17795A (Fließtext) · #0F5E45 (auf getönten Flächen) ── Warum nur `main`, nicht die ganze Seite ─────────────────── Kopf- und Fußzeile bleiben Navy — dasselbe Muster wie auf den Produkt-Landings (Marken-Band oben, heller Lesegrund darunter). Ein `html.light body { … }` hätte die weiße Navigationsschrift auf dem dunklen Header schwarz gefärbt. Speicher: `cmlLight` — derselbe Schlüssel wie Reboot School und die Produkt-Landings, damit die Wahl seitenübergreifend hält. Bewusst KEIN zweiter Mechanismus. ============================================================ */ /* ── 1. Farb-Token für den Lesegrund ───────────────────────── */ html.light main#main-content { --bg-darkest: #EFE9DC; --bg-dark: #F5F1E8; /* Reboot-School-Creme */ --bg-mid: #FBF8F2; --text-primary: #22303C; /* 11,97:1 auf Creme */ --text-secondary: #54626F; /* 5,56:1 */ --text-muted: #5A6672; /* 5,21:1 */ --teal: #17795A; /* 4,75:1 auf Creme */ /* Die Artikel schreiben durchgängig `var(--brand-teal, #3DD9A4)`. Das Token war nie definiert, es griff also immer der helle Rückfallwert — auf hellem Grund 1,68:1. Hier bekommt es endlich einen Wert, und damit sind Links, Marker, Zitatkanten und Kategorie-Labels in einem Zug erledigt. */ --brand-teal: #17795A; --teal-light: #17795A; --teal-dark: #0F5E45; --teal-bg: rgba(29, 138, 103, 0.08); --teal-border: rgba(29, 138, 103, 0.32); --teal-glow: none; --card-bg: #FFFDF7; /* „paper" aus der Reboot-Palette */ --card-bg-solid: #FFFDF7; --card-border: rgba(14, 27, 44, 0.14); --card-border-top: rgba(14, 27, 44, 0.22); --card-border-hover: rgba(29, 138, 103, 0.42); --card-shadow: 0 1px 2px rgba(14, 27, 44, 0.05), 0 10px 28px rgba(14, 27, 44, 0.06); --glow-teal: none; --glow-blue: none; background: #F5F1E8; color: var(--text-primary); } /* Der Grund unter `main` scheint sonst dunkel durch, sobald der Artikel kürzer ist als das Fenster. */ html.light body { background: #F5F1E8; } /* styles.css legt zwei Leuchtflächen auf `body::before` und `body::after` (Teal unten rechts, Blau oben links, dazu ein warmer Schimmer). Auf dem hellen Lesegrund bleiben sie als schmutzige Schleier stehen. Diese Datei wird nur von den Artikeln geladen, die Regel trifft also nichts anderes. */ html.light body::before, html.light body::after { display: none; } html.light .site-footer { background: var(--bg-darkest, #080E1A); } /* ── 2. Flächen, die im Dunkel-Entwurf fest auf Weiß-Transparenz gesetzt sind. Auf hellem Grund wären sie unsichtbar. ───── */ html.light main#main-content .ki-output, html.light main#main-content .ansatz-card, html.light main#main-content .zielgruppe, html.light main#main-content .unterrichtseinheit, html.light main#main-content .diskussionsfragen, html.light main#main-content .transparenz, html.light main#main-content .learning-box, html.light main#main-content .leitlinie-card, html.light main#main-content .newsletter-cta { background: #FFFDF7; border-color: rgba(14, 27, 44, 0.14); box-shadow: 0 1px 2px rgba(14, 27, 44, 0.05); } /* ── 3. Inseln, die dunkel BLEIBEN ───────────────────────────── Kurs-Teaser und Workshop-CTA bringen ihren eigenen dunklen Verlauf samt Lichtkante und Shimmer mit — sie sind die Akzentflächen des Artikels, dasselbe Prinzip wie `.panel-navy` auf den Landings. Sie hell zu machen hätte ihre violetten bzw. tealen Beschriftungen auf 2,3:1 gedrückt. Statt sie umzufärben bleiben sie, wie sie sind — die Token darin müssen dafür auf die Dunkelwerte zurück, sonst erben sie die dunkle Leseschrift und verschwinden. */ html.light main#main-content .kurs-teaser-box, html.light main#main-content .workshop-cta-box { --text-primary: #FFFFFF; --text-secondary: #A8BAD0; --text-muted: #8B9BB4; --teal: #3DD9A4; --brand-teal: #3DD9A4; --teal-bg: rgba(61, 217, 164, 0.10); --teal-border: rgba(61, 217, 164, 0.25); --card-border: rgba(255, 255, 255, 0.11); color: var(--text-primary); /* Die Verläufe der beiden Kästen sind leicht durchsichtig (0,92–0,96). Ohne eigene Grundfarbe scheint der helle Lesegrund durch, der Kasten wird heller und die Hilfstexte fallen von 5,57:1 auf 4,40:1. Mit dem Seiten-Navy als Unterlage sehen sie in beiden Modi gleich aus. */ background-color: #0D1829; box-shadow: 0 10px 30px rgba(14, 27, 44, 0.16); } /* Die Diagramme sind für dunklen Grund gezeichnet: weiße und hellblaue Beschriftung, helle Teal-Punkte. Auf Creme wären sie unlesbar. Sie bleiben deshalb dunkel — wie ein Bild, das seinen eigenen Grund mitbringt. */ html.light main#main-content .viz svg { --text-primary: #FFFFFF; --text-secondary: #A8BAD0; background: #0D1829; border: 1px solid rgba(14, 27, 44, 0.14); border-radius: 10px; } /* ── 4. Feste Leuchtfarben aus dem Dunkel-Entwurf ────────────── Die drei Leitlinien-Labels und die Kategorie-Pillen tragen Werte, die auf Creme unter 4,5:1 bleiben. Die Akzentbalken (::before) behalten die hellen Farben — auf ihnen steht keine Schrift. */ html.light main#main-content .leitlinie-card.teal .leitlinie-label { color: #17795A; } html.light main#main-content .leitlinie-card.blue .leitlinie-label { color: #1A6395; } html.light main#main-content .leitlinie-card.purple .leitlinie-label { color: #7A32B8; } /* Auf der teal getönten Pille reicht #17795A nur für 4,33:1. #0F5E45 (das `--teal-d` von Reboot School) kommt auf 6,27:1. */ html.light main#main-content .tag-pill, html.light main#main-content .artikel-meta .tag, html.light main#main-content .artikel-header .tag, html.light main#main-content .article-meta .tag { color: #0F5E45; } /* Die violette Kategorie-Pille stand als Inline-Style in ko-konstruktives-lesen.html und war so von keinem Stylesheet erreichbar. Sie ist jetzt eine Klasse — hier beide Modi. */ .tag-pill-violett { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.30); color: #A78BFA; } html.light main#main-content .tag-pill-violett { background: rgba(139, 92, 246, 0.10); border-color: rgba(109, 40, 217, 0.30); color: #6D28D9; /* 5,61:1 auf der eingefärbten Pille */ } /* ── 5. Linien und Bilder ─────────────────────────────────────── */ html.light main#main-content hr, html.light main#main-content .artikel-footer-nav, html.light main#main-content .artikel-footer-nav-inner { border-color: rgba(14, 27, 44, 0.16); } /* Bilder wirken auf hellem Grund härter als auf dunklem. */ html.light main#main-content .artikel-prose img, html.light main#main-content .artikel-body img { box-shadow: 0 1px 2px rgba(14, 27, 44, 0.06), 0 10px 28px rgba(14, 27, 44, 0.10); } /* ── 6. Die Bedienleiste ─────────────────────────────────────── Alle Bedienelemente stehen bewusst in **px**. Sonst würde der Textgrößen-Schalter sich selbst mitvergrößern und die Kopfzeile bei „Sehr groß" umbrechen. */ .lesehilfen { display: flex; align-items: center; gap: 10px; flex: none; } /* Textgröße: drei Stufen, das A wächst mit der Stufe mit, damit die Wirkung schon vor dem Tippen sichtbar ist. */ .textgroesse { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border-radius: 9999px; border: 1px solid var(--card-border, rgba(255, 255, 255, 0.11)); } .textgroesse button { font-family: inherit; font-weight: 700; line-height: 1; min-width: 28px; height: 26px; padding: 0 6px; border: none; border-radius: 9999px; background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .textgroesse button:nth-child(1) { font-size: 11px; } .textgroesse button:nth-child(2) { font-size: 13px; } .textgroesse button:nth-child(3) { font-size: 16px; } .textgroesse button:hover { color: var(--teal); } .textgroesse button[aria-pressed="true"] { background: var(--teal-bg); color: var(--teal); } html.light .textgroesse button[aria-pressed="true"], html.light .textgroesse button:hover { color: #0F5E45; } .textgroesse button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .lesemodus-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4, 16px); flex-wrap: wrap; margin-bottom: 2rem; } /* Der Zurück-Link bringt seinen eigenen Abstand mit; in der Zeile säße der Knopf sonst schief. */ .lesemodus-zeile > a { margin-bottom: 0 !important; } .lesemodus-btn { display: inline-flex; align-items: center; gap: 0.45em; flex: none; font-family: inherit; /*