/* ════════════════════════════════════════════════════════════ PALETTEN — nachschulung.at Design-Varianten Ein gemeinsames Token-Set für alle sechs Varianten. Umschalten über data-palette am ; Default ist waldgruen. Warum diese Token-Namen: Jede Palette muss BEIDE Gründe können — die hellen Varianten (D, F, G, I) stehen auf --p-paper, die dunklen (E, H) auf --p-ink. Deshalb gibt es zu Gedämpft und Linie je eine Fassung für hellen und dunklen Grund. --p-acc mitteldunkler Akzent: funktioniert als Fläche MIT heller Schrift UND als Textfarbe auf hellem Grund. --p-spark helles Signal: nur als Fläche mit dunkler Schrift. Auf hellem Grund als Textfarbe unbrauchbar. ════════════════════════════════════════════════════════════ */ :root, :root[data-palette="waldgruen"]{ --p-name:"Creme & Waldgrün"; --p-paper:#f2efe6; --p-paper-2:#e8e4d7; --p-ink:#0d1410; --p-ink-2:#151c17; --p-acc:#2f6136; --p-on-acc:#f2efe6; --p-deep:#1d3d22; --p-on-deep:#f2efe6; --p-spark:#f5c518; --p-on-spark:#0d1410; --p-muted-l:#5c655a; --p-muted-d:rgba(242,239,230,.64); --p-line-l:rgba(13,20,16,.15); --p-line-d:rgba(242,239,230,.16); --p-warn-l:#b9651c; --p-warn-d:#f0b46a; --p-soft-d:#9fd5a8; } :root[data-palette="kobalt"]{ --p-name:"Papier & Kobalt"; --p-paper:#f4f3ef; --p-paper-2:#e8e7e1; --p-ink:#0b1018; --p-ink-2:#141b26; --p-acc:#1d4ed8; --p-on-acc:#f4f3ef; --p-deep:#10214f; --p-on-deep:#f4f3ef; --p-spark:#ffca3a; --p-on-spark:#0b1018; --p-muted-l:#5a6270; --p-muted-d:rgba(244,243,239,.64); --p-line-l:rgba(11,16,24,.15); --p-line-d:rgba(244,243,239,.16); --p-warn-l:#a8540b; --p-warn-d:#fbbf24; --p-soft-d:#a8c6ff; } :root[data-palette="zinnober"]{ --p-name:"Beton & Zinnober"; --p-paper:#f1f0ed; --p-paper-2:#e3e2de; --p-ink:#131211; --p-ink-2:#1e1d1b; --p-acc:#b53914; --p-on-acc:#f1f0ed; --p-deep:#4d1a0b; --p-on-deep:#f1f0ed; --p-spark:#ffb703; --p-on-spark:#131211; --p-muted-l:#615f5a; --p-muted-d:rgba(241,240,237,.64); --p-line-l:rgba(19,18,17,.16); --p-line-d:rgba(241,240,237,.16); --p-warn-l:#8a5a00; --p-warn-d:#ffd166; --p-soft-d:#ffb59b; } :root[data-palette="nacht-eis"]{ --p-name:"Nacht & Eis"; --p-paper:#edf1f4; --p-paper-2:#dfe5ea; --p-ink:#060c11; --p-ink-2:#0f1821; --p-acc:#0d6480; --p-on-acc:#edf1f4; --p-deep:#093646; --p-on-deep:#edf1f4; --p-spark:#7fe3ff; --p-on-spark:#060c11; --p-muted-l:#54626e; --p-muted-d:rgba(237,241,244,.66); --p-line-l:rgba(6,12,17,.15); --p-line-d:rgba(237,241,244,.17); --p-warn-l:#9a5410; --p-warn-d:#ffc07a; --p-soft-d:#9adcf0; } :root[data-palette="terracotta"]{ --p-name:"Leinen & Terracotta"; --p-paper:#f6f1e9; --p-paper-2:#eae2d5; --p-ink:#1f1a14; --p-ink-2:#2b231c; --p-acc:#9c4a26; --p-on-acc:#f6f1e9; --p-deep:#472115; --p-on-deep:#f6f1e9; --p-spark:#edc76b; --p-on-spark:#1f1a14; --p-muted-l:#6a6057; --p-muted-d:rgba(246,241,233,.66); --p-line-l:rgba(31,26,20,.16); --p-line-d:rgba(246,241,233,.17); --p-warn-l:#87581c; --p-warn-d:#f0c98a; --p-soft-d:#f2b892; } :root[data-palette="asphalt"]{ --p-name:"Asphalt & Signal"; --p-paper:#f4f2ec; --p-paper-2:#e6e4dc; --p-ink:#0b0d0c; --p-ink-2:#1f2421; --p-acc:#31393a; --p-on-acc:#f4f2ec; --p-deep:#16191a; --p-on-deep:#f4f2ec; --p-spark:#f5c518; --p-on-spark:#0b0d0c; --p-muted-l:#5f6462; --p-muted-d:rgba(244,242,236,.64); --p-line-l:rgba(11,13,12,.16); --p-line-d:rgba(244,242,236,.15); --p-warn-l:#8c5a12; --p-warn-d:#ff9f43; --p-soft-d:#e8e2c8; } /* ── Umschalter ─────────────────────────────────────────────── Sitzt unten links, klein, und verschwindet beim Drucken. Nur für die Abstimmung — fliegt raus, wenn eine Palette steht. */ .palbar{ position:fixed;left:0;bottom:0;z-index:9000; display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; padding:.5rem .7rem; font:600 11px/1 ui-sans-serif,system-ui,sans-serif; background:rgba(20,20,20,.86);color:#fff; backdrop-filter:blur(10px); border-top-right-radius:10px; max-width:100vw; } .palbar > b{ font-weight:700;letter-spacing:.1em;text-transform:uppercase; opacity:.55;margin-right:.15rem;font-size:10px; } .palbar button{ font:inherit;cursor:pointer;color:#fff; background:transparent;border:1px solid rgba(255,255,255,.28); border-radius:99px;padding:.4em .7em;display:inline-flex;align-items:center;gap:.4em; transition:background .15s,border-color .15s; } .palbar button:hover{background:rgba(255,255,255,.14)} .palbar button[aria-pressed="true"]{background:#fff;color:#111;border-color:#fff} .palbar i{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(255,255,255,.35)} .palbar a{color:rgba(255,255,255,.6);text-decoration:none;margin-left:.2rem} .palbar a:hover{color:#fff;text-decoration:underline} @media print{.palbar{display:none}}