/* ERZEUGT aus tools/theme/*.src.css mit tools/theme/build.php – nicht von Hand bearbeiten. */ /* ---------- Umschalter Hell/Dunkel (im Header neben DE/EN) ---------- Nur sichtbar, wenn JavaScript läuft (theme.js setzt data-theme). Ohne JavaScript gilt das System-Schema des Geräts, der Umschalter erscheint dann nicht. */ .theme-toggle { display: none; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: inherit; } :root[data-theme] .theme-toggle { display: inline-grid; } .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; } .theme-toggle:hover { color: var(--lime-deep); } .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__sun { display: block; } :root[data-theme="dark"] .theme-toggle__moon { display: none; } /* S1: dieselbe 40px-Fläche im Header, Auswahlmenü ohne Einfluss auf das Seitenlayout. */ .theme-toggle-wrap { display: none; position: relative; flex: none; } :root[data-theme] .theme-toggle-wrap { display: inline-flex; } .theme-toggle__studio { display: none; } :root[data-theme="studio"] .theme-toggle__moon { display: none; } :root[data-theme="studio"] .theme-toggle__studio { display: block; } .theme-toggle-menu { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: 168px; padding: 6px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink); box-shadow: 0 8px 24px rgba(20, 22, 25, .35); } .theme-toggle-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; font-family: var(--f-sans); font-stretch: 100%; font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: normal; text-transform: none; } .theme-toggle-menu button[aria-checked="true"]::after { content: "✓"; } .theme-toggle-menu button:hover { box-shadow: inset 0 0 0 1px var(--line); } .theme-toggle-menu button:focus-visible { outline-offset: -2px; } /* ===== Dunkel-Modus: gewählt bzw. per JavaScript aus dem System-Schema ===== */ /* ========================================================================== Dunkel-Modus – Quelle (D2-Ergänzung „Globaler Hell-/Dunkel-Modus“) Orientierung: verbindliche dunkle Cinematic-Vorlage. Dunkle Flächen, weiße Typografie, Lime-Akzente. Keine neuen Farben: nur Werte aus site.css (Anthrazit #141619/#1a1d21, Off-White #f0eee9, Lime). Jede Regel beginnt mit dem Platzhalter „:dark“. tools/theme/build.php erzeugt daraus public/assets/css/theme.css mit zwei Varianten: :root[data-theme="dark"] – mit JavaScript (Auswahl oder System-Schema) @media (prefers-color-scheme: dark) :root:not([data-theme]) – ohne JavaScript: System-Schema des Geräts Im Hell-Modus greift keine dieser Regeln: Der Hell-Modus ist unverändert site.css. ========================================================================== */ /* ---------- Design-Tokens Dunkel ---------- Die hellen Bereiche (Header, Hero, Voice Explorer, Über mich) erhalten dunkle Werte für dieselben Tokens, die site.css dort verwendet. Bereits dunkle Bänder (Kacheln, Projekte, Kennzahlen, Kontakt) bleiben unverändert. */ :root[data-theme="dark"] { color-scheme: dark; --d-surface: #141619; /* Header/Hero, wie dunkle Bänder */ --d-surface-2: #1a1d21; /* Voice Explorer, Über mich – zweite Ebene, wie Kontakt */ --d-text: #f0eee9; /* Off-White */ --d-text-muted: rgba(240, 238, 233, .68); --d-text-soft: rgba(240, 238, 233, .82); --d-line: rgba(240, 238, 233, .16); --d-line-strong: rgba(240, 238, 233, .75); --d-wave-idle: rgba(240, 238, 233, .3); --d-chip: rgba(240, 238, 233, .04); } :root[data-theme="dark"] :is(.site-header, .hero, .gw-panel, .d4-refs) { --ink: var(--d-text); --paper: var(--d-surface); --haze: var(--d-surface); --stone: var(--d-text-muted); --line: var(--d-line); --wave-idle: var(--d-wave-idle); } :root[data-theme="dark"] :is(.band--paper, .about) { --ink: var(--d-text); --paper: var(--d-surface-2); --stone: var(--d-text-muted); --line: var(--d-line); --wave-idle: var(--d-wave-idle); } :root[data-theme="dark"] :is(.site-header, .hero, .about) { color: var(--ink); } /* ---------- Ausnahmen: Elemente, die in site.css feste Hell-Werte tragen ---------- */ :root[data-theme="dark"] .hero__side, :root[data-theme="dark"] .hero__scroll { color: var(--d-text); } /* stehen auf dem Foto */ :root[data-theme="dark"] .reel { background: rgba(20,22,25,.35); border-color: var(--d-line); --reel-played: var(--lime); --reel-idle: var(--d-wave-idle); } /* V2-04 A: Showreel-Player */ :root[data-theme="dark"] .reel__btn { background: var(--d-text); } :root[data-theme="dark"] .reel__btn [data-reel-icon] svg { fill: var(--d-surface); } :root[data-theme="dark"] .chip:not([aria-pressed="true"]) { background: var(--d-chip); } :root[data-theme="dark"] .player__btn { background: transparent; box-shadow: inset 0 0 0 1px var(--d-line-strong); } :root[data-theme="dark"] .player__btn[disabled] { background: transparent; box-shadow: inset 0 0 0 1px var(--d-line); } :root[data-theme="dark"] .badge { background: var(--lime); color: var(--d-surface); } :root[data-theme="dark"] .track[aria-current="true"] .track__icon { background: var(--lime); border-color: var(--lime); color: var(--d-surface); } :root[data-theme="dark"] .about__text { color: var(--d-text-soft); } :root[data-theme="dark"] .about__roles { color: var(--d-text-soft); } :root[data-theme="dark"] .signature { border-color: var(--d-line-strong); } /* D4: Referenzen – im Dunkel-Modus das helle Logo, sonst der Name (nie automatisch umgefärbt) */ :root[data-theme="dark"] .d4-ref.has-light .d4-ref__logo--light { display: none; } :root[data-theme="dark"] .d4-ref.has-light .d4-ref__name { display: block; } :root[data-theme="dark"] .d4-ref.has-dark .d4-ref__logo--dark { display: block; } :root[data-theme="dark"] .d4-ref.has-dark .d4-ref__name { display: none; } :root[data-theme="dark"] .d4-refs .sec-sub { color: var(--d-text-muted); } /* Genre-Welten (D2): geöffnete Welt wie Hero auf Anthrazit, Kennung in Lime (Vorlage) */ :root[data-theme="dark"] .gw-panel { --gw-label: var(--lime); --gw-lede: var(--d-text-soft); --gw-meta: var(--stone); } /* Mobiles Menü bleibt eine dunkle Fläche mit heller Schrift (wie im Hell-Modus) */ @media (max-width: 1080px) { :root[data-theme="dark"] .nav__links.is-open { background: var(--d-surface); color: var(--d-text); } :root[data-theme="dark"].menu-open .site-header { color: var(--d-text); } } /* F1 – contact closes the page on a distinctly darker surface. */ :root[data-theme="dark"] .contact { background: #0b0d10; color: #f0eee9; --ink: #0b0d10; --paper: #f0eee9; --paper-dim: #bebcb6; --line-dark: rgba(240,238,233,.18); } /* ===== Studio: nur bei ausdrücklicher Auswahl, keine System-Automatik ===== */ /* ========================================================================== Dunkel-Modus – Quelle (D2-Ergänzung „Globaler Hell-/Dunkel-Modus“) Orientierung: verbindliche dunkle Cinematic-Vorlage. Dunkle Flächen, weiße Typografie, Lime-Akzente. Keine neuen Farben: nur Werte aus site.css (Anthrazit #141619/#1a1d21, Off-White #f0eee9, Lime). Jede Regel beginnt mit dem Platzhalter „:dark“. tools/theme/build.php erzeugt daraus public/assets/css/theme.css mit zwei Varianten: :root[data-theme="studio"] – mit JavaScript (Auswahl oder System-Schema) @media (prefers-color-scheme: dark) :root:not([data-theme]) – ohne JavaScript: System-Schema des Geräts Im Hell-Modus greift keine dieser Regeln: Der Hell-Modus ist unverändert site.css. ========================================================================== */ /* ---------- Design-Tokens Dunkel ---------- Die hellen Bereiche (Header, Hero, Voice Explorer, Über mich) erhalten dunkle Werte für dieselben Tokens, die site.css dort verwendet. Bereits dunkle Bänder (Kacheln, Projekte, Kennzahlen, Kontakt) bleiben unverändert. */ :root[data-theme="studio"] { color-scheme: dark; --d-surface: #141619; /* Header/Hero, wie dunkle Bänder */ --d-surface-2: #1a1d21; /* Voice Explorer, Über mich – zweite Ebene, wie Kontakt */ --d-text: #f0eee9; /* Off-White */ --d-text-muted: rgba(240, 238, 233, .68); --d-text-soft: rgba(240, 238, 233, .82); --d-line: rgba(240, 238, 233, .16); --d-line-strong: rgba(240, 238, 233, .75); --d-wave-idle: rgba(240, 238, 233, .3); --d-chip: rgba(240, 238, 233, .04); } :root[data-theme="studio"] :is(.site-header, .hero, .gw-panel, .d4-refs) { --ink: var(--d-text); --paper: var(--d-surface); --haze: var(--d-surface); --stone: var(--d-text-muted); --line: var(--d-line); --wave-idle: var(--d-wave-idle); } :root[data-theme="studio"] :is(.band--paper, .about) { --ink: var(--d-text); --paper: var(--d-surface-2); --stone: var(--d-text-muted); --line: var(--d-line); --wave-idle: var(--d-wave-idle); } :root[data-theme="studio"] :is(.site-header, .hero, .about) { color: var(--ink); } /* ---------- Ausnahmen: Elemente, die in site.css feste Hell-Werte tragen ---------- */ :root[data-theme="studio"] .hero__side, :root[data-theme="studio"] .hero__scroll { color: var(--d-text); } /* stehen auf dem Foto */ :root[data-theme="studio"] .reel { background: rgba(20,22,25,.35); border-color: var(--d-line); --reel-played: var(--lime); --reel-idle: var(--d-wave-idle); } /* V2-04 A: Showreel-Player */ :root[data-theme="studio"] .reel__btn { background: var(--d-text); } :root[data-theme="studio"] .reel__btn [data-reel-icon] svg { fill: var(--d-surface); } :root[data-theme="studio"] .chip:not([aria-pressed="true"]) { background: var(--d-chip); } :root[data-theme="studio"] .player__btn { background: transparent; box-shadow: inset 0 0 0 1px var(--d-line-strong); } :root[data-theme="studio"] .player__btn[disabled] { background: transparent; box-shadow: inset 0 0 0 1px var(--d-line); } :root[data-theme="studio"] .badge { background: var(--lime); color: var(--d-surface); } :root[data-theme="studio"] .track[aria-current="true"] .track__icon { background: var(--lime); border-color: var(--lime); color: var(--d-surface); } :root[data-theme="studio"] .about__text { color: var(--d-text-soft); } :root[data-theme="studio"] .about__roles { color: var(--d-text-soft); } :root[data-theme="studio"] .signature { border-color: var(--d-line-strong); } /* D4: Referenzen – im Dunkel-Modus das helle Logo, sonst der Name (nie automatisch umgefärbt) */ :root[data-theme="studio"] .d4-ref.has-light .d4-ref__logo--light { display: none; } :root[data-theme="studio"] .d4-ref.has-light .d4-ref__name { display: block; } :root[data-theme="studio"] .d4-ref.has-dark .d4-ref__logo--dark { display: block; } :root[data-theme="studio"] .d4-ref.has-dark .d4-ref__name { display: none; } :root[data-theme="studio"] .d4-refs .sec-sub { color: var(--d-text-muted); } /* Genre-Welten (D2): geöffnete Welt wie Hero auf Anthrazit, Kennung in Lime (Vorlage) */ :root[data-theme="studio"] .gw-panel { --gw-label: var(--lime); --gw-lede: var(--d-text-soft); --gw-meta: var(--stone); } /* Mobiles Menü bleibt eine dunkle Fläche mit heller Schrift (wie im Hell-Modus) */ @media (max-width: 1080px) { :root[data-theme="studio"] .nav__links.is-open { background: var(--d-surface); color: var(--d-text); } :root[data-theme="studio"].menu-open .site-header { color: var(--d-text); } } /* F1 – contact closes the page on a distinctly darker surface. */ :root[data-theme="studio"] .contact { background: #0b0d10; color: #f0eee9; --ink: #0b0d10; --paper: #f0eee9; --paper-dim: #bebcb6; --line-dark: rgba(240,238,233,.18); } /* S1 Studio – nur Farben und Flächen, bestehende Typografie/Layouts bleiben erhalten. Die bewährten Dunkel-Regeln werden vom Build separat für Studio erzeugt; diese Tokens ersetzen ihre Farben. Keine System-Variante: Studio wird ausschließlich ausdrücklich gewählt. */ :root[data-theme="studio"] { color-scheme: dark; --ink: #252522; --ink-2: #30312d; --paper: #e8e5dd; --haze: #252522; --stone: #b5b2a9; --lime: #b59a70; --lime-deep: #b59a70; --line: rgba(232, 229, 221, .18); --line-dark: rgba(232, 229, 221, .18); --paper-dim: #b5b2a9; --wave-idle: #77766d; --d-surface: #252522; --d-surface-2: #30312d; --d-text: #e8e5dd; --d-text-muted: #b5b2a9; --d-text-soft: #cfccc3; --d-line: rgba(232, 229, 221, .18); --d-line-strong: #b5b2a9; --d-wave-idle: #77766d; --d-chip: rgba(232, 229, 221, .03); } :root[data-theme="studio"] body { background: #252522; } :root[data-theme="studio"] .reel { background: rgba(37, 37, 34, .65); --reel-played: #b59a70; --reel-idle: #77766d; } :root[data-theme="studio"] .reel__btn { background: #b59a70; } :root[data-theme="studio"] .reel__btn [data-reel-icon] svg { fill: #252522; } :root[data-theme="studio"] .chip[aria-pressed="true"] { background: rgba(181, 154, 112, .10); border-color: #b59a70; color: #e8e5dd; } :root[data-theme="studio"] .xp { --xp-row-hover: rgba(232, 229, 221, .035); --xp-row-active: rgba(232, 229, 221, .075); --xp-screen: #1d1e1b; --xp-screen-ink: #e8e5dd; --xp-screen-dim: #b5b2a9; } :root[data-theme="studio"] .xp-pbtn:not(.xp-pbtn--mini) { background: rgba(232, 229, 221, .035); } :root[data-theme="studio"] .xp-stage__go:hover { background: #c7ad86; } :root[data-theme="studio"] .xp-stage__msg { border-left-color: #b59a70; background: rgba(29, 30, 27, .94); } :root[data-theme="studio"] .gw-video__box { background: #252522; color: #e8e5dd; } :root[data-theme="studio"] .gw-video::backdrop { background: rgba(23, 24, 21, .88); } :root[data-theme="studio"] .gw-video__load:hover { background: #c7ad86; } /* Echte Bilder und Logos werden nicht umgefärbt; ihre bisherigen Dunkel-Varianten bleiben zuständig. */ :root[data-theme="studio"] .facts__bg { background: #252522; } :root[data-theme="studio"] .facts__bg::after { background: transparent; } :root[data-theme="studio"] .ph-tag--light { color: #252522; } :root[data-theme="studio"] .theme-toggle-menu { background: #30312d; color: #e8e5dd; } @media (max-width: 1080px) { :root[data-theme="studio"].menu-open .site-header .brand__role { color: #b5b2a9; } } /* Der Explorer verwendet für die Wellenform und Freigabe eigene feste Farben. */ :root[data-theme="studio"] .xp-stage__wave { --xp-played: #b59a70; --xp-idle: #77766d; --xp-hover: #e8e5dd; } :root[data-theme="studio"] .xp-vload { background: #b59a70; color: #252522; } :root[data-theme="studio"] .xp-remember input { accent-color: #b59a70; } :root[data-theme="studio"] .xp-stage__mp4:focus-visible { outline-color: #b59a70; } /* F1 – warm near-black contact surface, distinct from the preceding sections. */ :root[data-theme="studio"] .contact { background: #171815; color: #e8e5dd; --ink: #171815; --paper: #e8e5dd; --paper-dim: #b5b2a9; --line-dark: rgba(232,229,221,.18); } /* ===== Dunkel-Modus ohne JavaScript: System-Schema des Geräts ===== */ @media (prefers-color-scheme: dark) { /* ========================================================================== Dunkel-Modus – Quelle (D2-Ergänzung „Globaler Hell-/Dunkel-Modus“) Orientierung: verbindliche dunkle Cinematic-Vorlage. Dunkle Flächen, weiße Typografie, Lime-Akzente. Keine neuen Farben: nur Werte aus site.css (Anthrazit #141619/#1a1d21, Off-White #f0eee9, Lime). Jede Regel beginnt mit dem Platzhalter „:dark“. tools/theme/build.php erzeugt daraus public/assets/css/theme.css mit zwei Varianten: :root[data-theme="dark"] – mit JavaScript (Auswahl oder System-Schema) @media (prefers-color-scheme: dark) :root:not([data-theme]) – ohne JavaScript: System-Schema des Geräts Im Hell-Modus greift keine dieser Regeln: Der Hell-Modus ist unverändert site.css. ========================================================================== */ /* ---------- Design-Tokens Dunkel ---------- Die hellen Bereiche (Header, Hero, Voice Explorer, Über mich) erhalten dunkle Werte für dieselben Tokens, die site.css dort verwendet. Bereits dunkle Bänder (Kacheln, Projekte, Kennzahlen, Kontakt) bleiben unverändert. */ :root:not([data-theme]) { color-scheme: dark; --d-surface: #141619; /* Header/Hero, wie dunkle Bänder */ --d-surface-2: #1a1d21; /* Voice Explorer, Über mich – zweite Ebene, wie Kontakt */ --d-text: #f0eee9; /* Off-White */ --d-text-muted: rgba(240, 238, 233, .68); --d-text-soft: rgba(240, 238, 233, .82); --d-line: rgba(240, 238, 233, .16); --d-line-strong: rgba(240, 238, 233, .75); --d-wave-idle: rgba(240, 238, 233, .3); --d-chip: rgba(240, 238, 233, .04); } :root:not([data-theme]) :is(.site-header, .hero, .gw-panel, .d4-refs) { --ink: var(--d-text); --paper: var(--d-surface); --haze: var(--d-surface); --stone: var(--d-text-muted); --line: var(--d-line); --wave-idle: var(--d-wave-idle); } :root:not([data-theme]) :is(.band--paper, .about) { --ink: var(--d-text); --paper: var(--d-surface-2); --stone: var(--d-text-muted); --line: var(--d-line); --wave-idle: var(--d-wave-idle); } :root:not([data-theme]) :is(.site-header, .hero, .about) { color: var(--ink); } /* ---------- Ausnahmen: Elemente, die in site.css feste Hell-Werte tragen ---------- */ :root:not([data-theme]) .hero__side, :root:not([data-theme]) .hero__scroll { color: var(--d-text); } /* stehen auf dem Foto */ :root:not([data-theme]) .reel { background: rgba(20,22,25,.35); border-color: var(--d-line); --reel-played: var(--lime); --reel-idle: var(--d-wave-idle); } /* V2-04 A: Showreel-Player */ :root:not([data-theme]) .reel__btn { background: var(--d-text); } :root:not([data-theme]) .reel__btn [data-reel-icon] svg { fill: var(--d-surface); } :root:not([data-theme]) .chip:not([aria-pressed="true"]) { background: var(--d-chip); } :root:not([data-theme]) .player__btn { background: transparent; box-shadow: inset 0 0 0 1px var(--d-line-strong); } :root:not([data-theme]) .player__btn[disabled] { background: transparent; box-shadow: inset 0 0 0 1px var(--d-line); } :root:not([data-theme]) .badge { background: var(--lime); color: var(--d-surface); } :root:not([data-theme]) .track[aria-current="true"] .track__icon { background: var(--lime); border-color: var(--lime); color: var(--d-surface); } :root:not([data-theme]) .about__text { color: var(--d-text-soft); } :root:not([data-theme]) .about__roles { color: var(--d-text-soft); } :root:not([data-theme]) .signature { border-color: var(--d-line-strong); } /* D4: Referenzen – im Dunkel-Modus das helle Logo, sonst der Name (nie automatisch umgefärbt) */ :root:not([data-theme]) .d4-ref.has-light .d4-ref__logo--light { display: none; } :root:not([data-theme]) .d4-ref.has-light .d4-ref__name { display: block; } :root:not([data-theme]) .d4-ref.has-dark .d4-ref__logo--dark { display: block; } :root:not([data-theme]) .d4-ref.has-dark .d4-ref__name { display: none; } :root:not([data-theme]) .d4-refs .sec-sub { color: var(--d-text-muted); } /* Genre-Welten (D2): geöffnete Welt wie Hero auf Anthrazit, Kennung in Lime (Vorlage) */ :root:not([data-theme]) .gw-panel { --gw-label: var(--lime); --gw-lede: var(--d-text-soft); --gw-meta: var(--stone); } /* Mobiles Menü bleibt eine dunkle Fläche mit heller Schrift (wie im Hell-Modus) */ @media (max-width: 1080px) { :root:not([data-theme]) .nav__links.is-open { background: var(--d-surface); color: var(--d-text); } :root:not([data-theme]).menu-open .site-header { color: var(--d-text); } } /* F1 – contact closes the page on a distinctly darker surface. */ :root:not([data-theme]) .contact { background: #0b0d10; color: #f0eee9; --ink: #0b0d10; --paper: #f0eee9; --paper-dim: #bebcb6; --line-dark: rgba(240,238,233,.18); } }