/* Hilfe-Fenster (31.08.2026). * * Eine Datei fuer fuenf Seiten in zwei voellig verschiedenen Bildwelten: die * Startseite im dunklen "Nachtfest", die Organisator-Seiten im hellen * Apple-nahen Stil mit eigenem Dunkelmodus. Statt zwei Bausteine zu pflegen, * die auseinanderlaufen, liest dieser hier die Farben der Seite, auf der er * gerade haengt - ueber genau sieben Variablen. * * Voreinstellung sind die Marken der Organisator-Seiten (--surface, --ink, * --muted, --line, --accent), weil vier der fuenf Seiten so gebaut sind und * ihr Dunkelmodus damit von selbst mitkommt. Die Startseite setzt am * data-kx-skin="nacht" und bekommt darueber ihre eigenen Toene. Die * Zuordnung haengt an einem Attribut statt an der Ladereihenfolge der * Stylesheets: sonst entscheidet die Reihenfolge zweier -Zeilen * darueber, ob ein Fenster lesbar ist. * * Schriftgroessen ausschliesslich ueber eigene Stufen (--kx-fs-*), siehe * DESIGN.md "The Ramp-Has-No-Exceptions Rule". Eigener Namensraum, weil vier * der fuenf Gastseiten gar keine Leiter haben - eine fremde ueberschreiben * waere schlimmer als eine eigene mitbringen. */ .kx-auf, .kx-dialog { --kx-grund: var(--surface, #FFFFFF); --kx-text: var(--ink, #1D1D1F); --kx-gedaempft: var(--muted, #6E6E73); --kx-linie: var(--line, #E6E6E6); --kx-akzent: var(--accent, #0071E3); --kx-auf-akzent: #FFFFFF; --kx-knopf: var(--kx-akzent); --kx-schatten: 0 24px 64px rgba(0, 0, 0, .22); --kx-radius: 14px; --kx-fs-klein: .8rem; --kx-fs-kompakt: .9rem; --kx-fs-basis: 1rem; --kx-fs-titel: 1.15rem; } /* Startseite: dieselbe Palette wie index.html, dort als Marken vorhanden. * Kein Schatten - DESIGN.md verbietet Haarlinie UND Schatten auf derselben * Flaeche, und im Nachtgrund traegt die Haarlinie die Form deutlich besser. */ [data-kx-skin="nacht"] .kx-auf, [data-kx-skin="nacht"] .kx-dialog { --kx-grund: var(--karte); --kx-text: var(--creme); --kx-gedaempft: var(--gedaempft); --kx-linie: var(--linie); --kx-akzent: var(--messing); --kx-auf-akzent: var(--auf-messing); --kx-knopf: linear-gradient(135deg, var(--messing-hell), var(--messing)); --kx-schatten: none; --kx-radius: 16px; } /* ---------- Der Knopf in der Funktionsleiste ---------- */ /* Pillenform und Haarlinie wie die Nachbarn (Sprache, Design, Speichern) - * ein Element, das sich in einer Werkzeugleiste anders verhaelt als seine * Nachbarn, liest sich als Fremdkoerper, nicht als Angebot. */ .kx-auf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 11px; min-height: 0; width: auto; margin: 0; border: 1px solid var(--kx-linie); border-radius: 999px; background: none; color: var(--kx-gedaempft); font: inherit; font-size: var(--kx-fs-klein); line-height: 1; cursor: pointer; transition: color .2s ease, border-color .2s ease; } .kx-auf svg { width: 16px; height: 16px; display: block; } .kx-auf:hover { color: var(--kx-akzent); border-color: var(--kx-akzent); } .kx-auf:focus-visible { outline: 2px solid var(--kx-akzent); outline-offset: 2px; } /* Rueckfall fuer Seiten ohne Funktionsleiste: unten rechts, ausserhalb des * Leseflusses. Nur dann - eine schwebende Blase zusaetzlich zum Knopf in der * Leiste waere zweimal dasselbe Angebot auf einem Bildschirm. */ .kx-auf.kx-schwebend { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; padding: 0; border-radius: 50%; background: var(--kx-grund); color: var(--kx-akzent); box-shadow: var(--shadow, none); } /* ---------- Das Fenster ---------- */ /* statt eigener Overlay-Bastelei: Fokusfalle, Escape, Rueckgabe des * Fokus an den ausloesenden Knopf und die Sperre der Seite dahinter bringt * der Browser mit. Nachgebaut waere das viel Code, der genau die Faelle * verfehlt, in denen es zaehlt (Tastatur, Bildschirmleser). */ .kx-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--kx-linie); border-radius: var(--kx-radius); background: var(--kx-grund); color: var(--kx-text); box-shadow: var(--kx-schatten); font-size: var(--kx-fs-basis); } .kx-dialog::backdrop { background: rgba(0, 0, 0, .55); } .kx-innen { padding: 22px 22px 20px; } .kx-kopf { display: flex; align-items: start; justify-content: space-between; gap: 12px; } .kx-dialog h2 { margin: 0; font-size: var(--kx-fs-titel); line-height: 1.25; color: var(--kx-text); font-family: inherit; font-weight: 600; } [data-kx-skin="nacht"] .kx-dialog h2 { font-family: 'Gloock', Georgia, serif; font-weight: 400; } .kx-dialog p { margin: 8px 0 0; color: var(--kx-gedaempft); font-size: var(--kx-fs-kompakt); line-height: 1.5; } .kx-zu { flex-shrink: 0; width: 30px; height: 30px; padding: 0; margin: -4px -4px 0 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--kx-gedaempft); cursor: pointer; line-height: 0; } .kx-zu:hover { color: var(--kx-text); } .kx-zu:focus-visible { outline: 2px solid var(--kx-akzent); outline-offset: 2px; } /* Bewusst ueber .kx-dialog vorangestellt, also mit hoeherer Spezifitaet als * noetig: Vier der fuenf Gastseiten formatieren