/* ── CREWPLANNER · NYX Lightwork CI (Konzept 1d „Crew Pass") ─────────────────── Navy/Paper, ruhig und technisch. Schrift Geist (Wortmarke, Titel, Zahlen) + JetBrains Mono (Labels, Eyebrows, Meta). GOLD #f7c948 lebt AUSSCHLIESSLICH im Logo — plus als bewusste Ausnahme im „HEUTE"-Strich der Tourtabelle (Rot ist mit „abgesagt" belegt). Nirgends sonst als UI-Akzent. Hell = „Auf Paper" (Standard :root). Dunkel = „Auf Navy". Der Betrachter schaltet über data-theme am (Schlüssel cp_mode, Muster wie CallBoard). Diese Datei ist die EINE Quelle der Design-Tokens für alle vier Oberflächen (login/index/admin/view). styles.css und die Inline-Styles konsumieren nur noch var(--…). Kompatibilitäts-Aliase unten decken die alten Token-Namen ab. */ @font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/geist-400.woff2') format('woff2');} @font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/geist-500.woff2') format('woff2');} @font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/geist-600.woff2') format('woff2');} @font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/geist-700.woff2') format('woff2');} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/jetbrains-mono-400.woff2') format('woff2');} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/jetbrains-mono-500.woff2') format('woff2');} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/jetbrains-mono-600.woff2') format('woff2');} :root{ --sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --gold:#f7c948; /* NUR Logo + HEUTE-Strich */ /* Hell = „Sage" — gedämpftes Salbeigrün-Grau (v0.28.1). Ersetzt das warme Creme #F1EFE9, das mit den (warmen) prep-Zeilen einen braunen Eindruck ergab; Panels heben sich jetzt vom getönten Grund ab (nicht mehr „alles weiß"). */ --bg:#E7ECE4; --panel:#FCFDFB; --panel2:#FFFFFF; --rule:#D5DCCD; --rule-2:#C7D0BD; --ink:#10172A; --ink-2:#3B4A40; --muted:#5C6A5E; --accent:#10172A; --accent-b:#10172A; --on-accent:#FFFFFF; --accent-wash:rgba(16,23,42,.06); --accent-wash-2:rgba(16,23,42,.10); --ink-wash:rgba(16,23,42,.035); /* Status (bedeutungstragend, Hell-Variante auf Kontrast justiert) */ --show:#2E8B57; --reise:#3B6FB0; --prep:#A96C34; --off:#6A6F78; --warn:#C1453B; --pencilled:#7A5FB3; /* vorgemerkt - eigener Ton, kollidiert nicht mit show/reise/prep/warn/gold */ --show-wash:rgba(46,139,87,.08); --show-wash-2:rgba(46,139,87,.30); --warn-wash:rgba(193,69,59,.08); --warn-wash-2:rgba(193,69,59,.30); --pencilled-wash:rgba(122,95,179,.08); --pencilled-wash-2:rgba(122,95,179,.30); /* Zeilen-Tönung (Hell entschärft/kühler → prep wirkt nicht „braun" auf dem Grund) */ --row-show-bg:rgba(46,139,87,.055); --row-show-hover:rgba(46,139,87,.10); --row-reise-bg:rgba(59,111,176,.05); --row-reise-hover:rgba(59,111,176,.09); --row-prep-bg:rgba(169,108,52,.05); --row-prep-hover:rgba(169,108,52,.09); } /* OS-Vorgabe, solange der Nutzer nicht explizit gewählt hat */ @media (prefers-color-scheme:dark){ :root:where(:not([data-theme="light"])){ --bg:#10172A; --panel:#1B2438; --panel2:#202A40; --rule:#26314A; --rule-2:#33415C; --ink:#F1EFE9; --ink-2:#C3CAD8; --muted:#9AA3B5; --accent:#FFFFFF; --accent-b:#FFFFFF; --on-accent:#10172A; --accent-wash:rgba(255,255,255,.07); --accent-wash-2:rgba(255,255,255,.11); --ink-wash:rgba(255,255,255,.03); --show:#5fcc8a; --reise:#6aa7e8; --prep:#e89a4a; --off:#6a6f78; --warn:#F2795A; --pencilled:#A98DE0; --show-wash:rgba(95,204,138,.08); --show-wash-2:rgba(95,204,138,.32); --warn-wash:rgba(242,121,90,.08); --warn-wash-2:rgba(242,121,90,.32); --pencilled-wash:rgba(169,141,224,.10); --pencilled-wash-2:rgba(169,141,224,.34); --row-show-bg:rgba(95,204,138,.035); --row-show-hover:rgba(95,204,138,.07); --row-reise-bg:rgba(106,167,232,.03); --row-reise-hover:rgba(106,167,232,.06); --row-prep-bg:rgba(232,154,74,.03); --row-prep-hover:rgba(232,154,74,.06); } } /* Der Umschalter muss die OS-Wahl in BEIDE Richtungen schlagen. */ :root[data-theme="dark"]{ --bg:#10172A; --panel:#1B2438; --panel2:#202A40; --rule:#26314A; --rule-2:#33415C; --ink:#F1EFE9; --ink-2:#C3CAD8; --muted:#9AA3B5; --accent:#FFFFFF; --accent-b:#FFFFFF; --on-accent:#10172A; --accent-wash:rgba(255,255,255,.07); --accent-wash-2:rgba(255,255,255,.11); --ink-wash:rgba(255,255,255,.03); --show:#5fcc8a; --reise:#6aa7e8; --prep:#e89a4a; --off:#6a6f78; --warn:#F2795A; --pencilled:#A98DE0; --show-wash:rgba(95,204,138,.08); --show-wash-2:rgba(95,204,138,.32); --warn-wash:rgba(242,121,90,.08); --warn-wash-2:rgba(242,121,90,.32); --pencilled-wash:rgba(169,141,224,.10); --pencilled-wash-2:rgba(169,141,224,.34); --row-show-bg:rgba(95,204,138,.035); --row-show-hover:rgba(95,204,138,.07); --row-reise-bg:rgba(106,167,232,.03); --row-reise-hover:rgba(106,167,232,.06); --row-prep-bg:rgba(232,154,74,.03); --row-prep-hover:rgba(232,154,74,.06); } :root[data-theme="light"]{ --bg:#E7ECE4; --panel:#FCFDFB; --panel2:#FFFFFF; --rule:#D5DCCD; --rule-2:#C7D0BD; --ink:#10172A; --ink-2:#3B4A40; --muted:#5C6A5E; --accent:#10172A; --accent-b:#10172A; --on-accent:#FFFFFF; --accent-wash:rgba(16,23,42,.06); --accent-wash-2:rgba(16,23,42,.10); --ink-wash:rgba(16,23,42,.035); --show:#2E8B57; --reise:#3B6FB0; --prep:#A96C34; --off:#6A6F78; --warn:#C1453B; --pencilled:#7A5FB3; --show-wash:rgba(46,139,87,.08); --show-wash-2:rgba(46,139,87,.30); --warn-wash:rgba(193,69,59,.08); --warn-wash-2:rgba(193,69,59,.30); --pencilled-wash:rgba(122,95,179,.08); --pencilled-wash-2:rgba(122,95,179,.30); --row-show-bg:rgba(46,139,87,.055); --row-show-hover:rgba(46,139,87,.10); --row-reise-bg:rgba(59,111,176,.05); --row-reise-hover:rgba(59,111,176,.09); --row-prep-bg:rgba(169,108,52,.05); --row-prep-hover:rgba(169,108,52,.09); } /* ── Kompatibilitäts-Aliase (alte Token-Namen der bestehenden CSS) ────────────── Diese referenzieren die scope-abhängigen Tokens oben → lösen pro Theme auf. */ :root{ --rule-soft:var(--rule); --muted-dim:var(--muted); --display:var(--sans); /* h1/Stats liefen auf Archivo → jetzt Geist */ } /* ── Umschalt-Knopf (☀/☾), einheitlich auf allen Seiten ─────────────────────── */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;flex-shrink:0; background:var(--panel2);color:var(--ink-2); border:1px solid var(--rule-2);border-radius:8px; font-size:15px;line-height:1;cursor:pointer; transition:border-color .2s,color .2s,background .2s; } .theme-toggle:hover{border-color:var(--accent);color:var(--ink);} .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* ── Logo-Marke „Crew Pass" ───────────────────────────────────────────────────── Outlines erben currentColor (invertiert je Theme), Kopf-Kreis fest gold. */ .cp-mark{display:block;flex-shrink:0;color:var(--ink);} /* ── Rechts-Footer (Impressum · Datenschutz) ──────────────────────────────────── Steht hier und nicht in styles.css, weil theme.css die einzige Datei ist, die ALLE vier Oberflächen einbinden (admin.html und login.html laden styles.css nicht). Einmal gepflegt statt viermal kopiert. ⚠️ Das Markup dazu ist bewusst statisches HTML in jeder Seite, NICHT per JavaScript eingespielt: § 5 DDG verlangt „ständig verfügbar", und in diesem Projekt sind Seiten schon mehrfach an einem fehlgeschlagenen Modul-Import hängengeblieben. Ein Impressum, das bei einem JS-Fehler verschwindet, ist keins. tests/legal.test.mjs hält dagegen. */ .legal-footer{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px; padding:18px 24px;margin-top:auto; border-top:1px solid var(--rule-2); background:var(--panel); font-family:var(--sans);font-size:.7rem;line-height:1.6;color:var(--muted); } .legal-footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;} .legal-footer a:hover{color:var(--ink);border-bottom-color:var(--rule-2);} .legal-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;} .legal-footer .sep{opacity:.5;} /* ── Rechtstexte (impressum.html, datenschutz.html) ───────────────────────────── Lesbarkeit vor Gestaltung: eine Spalte, ruhige Zeilenlänge, keine Effekte. */ .legal-page{background:var(--bg);color:var(--ink);font-family:var(--sans); min-height:100vh;display:flex;flex-direction:column;} .legal-head{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:18px 24px;border-bottom:1px solid var(--rule-2);background:var(--panel); } .legal-head .back{ font-size:.7rem;color:var(--muted);text-decoration:none; border:1px solid var(--rule-2);border-radius:8px;padding:7px 12px; } .legal-head .back:hover{color:var(--ink);border-color:var(--accent);} .legal-head h1{font-size:1.05rem;font-weight:600;letter-spacing:.02em;margin:0;} .legal-main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:40px 24px 64px;} .legal-main h2{ font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:40px 0 12px; } .legal-main h2:first-of-type{margin-top:0;} .legal-main h3{font-size:.85rem;font-weight:600;color:var(--ink);margin:22px 0 8px;} .legal-main p,.legal-main li{font-size:.82rem;line-height:1.85;color:var(--ink-2);} .legal-main p{margin:0 0 12px;} .legal-main ul{margin:0 0 14px;padding-left:20px;} .legal-main li{margin-bottom:6px;} .legal-main a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;} .legal-main strong{color:var(--ink);font-weight:600;} .legal-main dl{margin:0 0 16px;} .legal-main dt{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin-top:14px;} .legal-main dd{font-size:.82rem;line-height:1.85;color:var(--ink-2);margin:2px 0 0;} .legal-note{ border-left:3px solid var(--rule-2);background:var(--panel); padding:14px 18px;margin:16px 0;border-radius:0 6px 6px 0; } .legal-note p:last-child{margin-bottom:0;} .legal-stand{font-size:.68rem;color:var(--muted);margin-top:40px; padding-top:16px;border-top:1px solid var(--rule-2);} @media (max-width:600px){ .legal-main{padding:28px 18px 48px;} .legal-head{padding:14px 18px;} }