/* === Lorath Webseite — Theme-Definitionen === * * Gesteuert über data-theme="..." auf . * Fantasy (Default) ist in :root (style.css) definiert. * Schriftarten über data-font="..." auf . * * Themes sind identisch mit der App + webseiten-spezifische Variablen. * Cookie ff_theme wird von der App gesetzt und wirkt hier automatisch. */ /* ─── Light — Pergament & Tinte ────────────────────────────────────────────── */ [data-theme="light"] { --ff-bg-primary: #faf8f5; --ff-bg-secondary: #f0ece6; --ff-bg-tertiary: #e8e2d8; --ff-bg-primary-rgb: 250, 248, 245; --ff-bg-secondary-rgb: 240, 236, 230; --ff-bg-tertiary-rgb: 232, 226, 216; --ff-text-primary: #2c2416; --ff-text-secondary: #5a4a3a; --ff-text-muted: #8a7a6a; --ff-accent: #a0334d; --ff-accent-hover: #8a2840; --ff-accent-rgb: 160, 51, 77; --ff-gold: #8b6d45; --ff-gold-light: #a08058; --ff-gold-rgb: 139, 109, 69; --ff-border-color: #d0c8b8; --ff-success: #2e8b3e; --ff-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --ff-white-rgb: 255, 255, 255; --ff-black-rgb: 0, 0, 0; --ff-hero-overlay-start: rgba(250, 248, 245, 0.3); --ff-hero-overlay-mid: rgba(250, 248, 245, 0.5); --ff-hero-overlay-end: rgba(240, 236, 230, 0.92); --ff-promo-gradient: linear-gradient(135deg, #a0334d 0%, #8a2840 50%, #8b6d45 100%); } /* ─── Dark — Reines Schwarz ────────────────────────────────────────────────── */ [data-theme="dark"] { --ff-bg-primary: #050508; --ff-bg-secondary: #0a0a10; --ff-bg-tertiary: #12121a; --ff-bg-primary-rgb: 5, 5, 8; --ff-bg-secondary-rgb: 10, 10, 16; --ff-bg-tertiary-rgb: 18, 18, 26; --ff-text-primary: #f0f0f0; --ff-text-secondary: #b0b0b0; --ff-text-muted: #707070; --ff-accent: #ff3a55; --ff-accent-hover: #e82a45; --ff-accent-rgb: 255, 58, 85; --ff-gold: #c0c0c8; --ff-gold-light: #d8d8e0; --ff-gold-rgb: 192, 192, 200; --ff-border-color: #1a1a28; --ff-success: #4ade80; --ff-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); --ff-hero-overlay-start: rgba(5, 5, 8, 0.4); --ff-hero-overlay-mid: rgba(5, 5, 8, 0.6); --ff-hero-overlay-end: rgba(5, 5, 8, 0.95); --ff-promo-gradient: linear-gradient(135deg, #ff3a55 0%, #cc2840 50%, #c0c0c8 100%); } /* ─── Pink — Rosa & Magenta ────────────────────────────────────────────────── */ [data-theme="pink"] { --ff-bg-primary: #1a0a14; --ff-bg-secondary: #2a1020; --ff-bg-tertiary: #351530; --ff-bg-primary-rgb: 26, 10, 20; --ff-bg-secondary-rgb: 42, 16, 32; --ff-bg-tertiary-rgb: 53, 21, 48; --ff-text-primary: #f5e0ea; --ff-text-secondary: #d4a0b8; --ff-text-muted: #a07088; --ff-accent: #ff4d8a; --ff-accent-hover: #e8407a; --ff-accent-rgb: 255, 77, 138; --ff-gold: #e8a0b0; --ff-gold-light: #f0b8c8; --ff-gold-rgb: 232, 160, 176; --ff-border-color: #4a2040; --ff-success: #4ade80; --ff-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); --ff-hero-overlay-start: rgba(26, 10, 20, 0.5); --ff-hero-overlay-mid: rgba(26, 10, 20, 0.7); --ff-hero-overlay-end: rgba(26, 10, 20, 0.95); --ff-promo-gradient: linear-gradient(135deg, #ff4d8a 0%, #d03870 50%, #e8a0b0 100%); } /* ─── Purple — Mystisch & Magisch ──────────────────────────────────────────── */ [data-theme="purple"] { --ff-bg-primary: #0d0816; --ff-bg-secondary: #1a1030; --ff-bg-tertiary: #251845; --ff-bg-primary-rgb: 13, 8, 22; --ff-bg-secondary-rgb: 26, 16, 48; --ff-bg-tertiary-rgb: 37, 24, 69; --ff-text-primary: #e8ddf5; --ff-text-secondary: #baa8d4; --ff-text-muted: #8a78a0; --ff-accent: #9b59d0; --ff-accent-hover: #8a48c0; --ff-accent-rgb: 155, 89, 208; --ff-gold: #d4a8e0; --ff-gold-light: #e0bef0; --ff-gold-rgb: 212, 168, 224; --ff-border-color: #3a2858; --ff-success: #4ade80; --ff-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); --ff-hero-overlay-start: rgba(13, 8, 22, 0.5); --ff-hero-overlay-mid: rgba(13, 8, 22, 0.7); --ff-hero-overlay-end: rgba(13, 8, 22, 0.95); --ff-promo-gradient: linear-gradient(135deg, #9b59d0 0%, #7838a8 50%, #d4a8e0 100%); } /* ─── Blue — Ozean & Frost ─────────────────────────────────────────────────── */ [data-theme="blue"] { --ff-bg-primary: #060d18; --ff-bg-secondary: #0c1828; --ff-bg-tertiary: #122540; --ff-bg-primary-rgb: 6, 13, 24; --ff-bg-secondary-rgb: 12, 24, 40; --ff-bg-tertiary-rgb: 18, 37, 64; --ff-text-primary: #e0eaf5; --ff-text-secondary: #90b0d0; --ff-text-muted: #608098; --ff-accent: #2d9cdb; --ff-accent-hover: #2088c8; --ff-accent-rgb: 45, 156, 219; --ff-gold: #90c0e0; --ff-gold-light: #a8d0ee; --ff-gold-rgb: 144, 192, 224; --ff-border-color: #1a3050; --ff-success: #4ade80; --ff-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); --ff-hero-overlay-start: rgba(6, 13, 24, 0.5); --ff-hero-overlay-mid: rgba(6, 13, 24, 0.7); --ff-hero-overlay-end: rgba(6, 13, 24, 0.95); --ff-promo-gradient: linear-gradient(135deg, #2d9cdb 0%, #1878b0 50%, #90c0e0 100%); } /* ─── Green — Wald & Natur ─────────────────────────────────────────────────── */ [data-theme="green"] { --ff-bg-primary: #081208; --ff-bg-secondary: #0f1e0f; --ff-bg-tertiary: #182818; --ff-bg-primary-rgb: 8, 18, 8; --ff-bg-secondary-rgb: 15, 30, 15; --ff-bg-tertiary-rgb: 24, 40, 24; --ff-text-primary: #e0f0e0; --ff-text-secondary: #90c090; --ff-text-muted: #609060; --ff-accent: #27ae60; --ff-accent-hover: #1e9a50; --ff-accent-rgb: 39, 174, 96; --ff-gold: #b8a060; --ff-gold-light: #c8b070; --ff-gold-rgb: 184, 160, 96; --ff-border-color: #2a3a2a; --ff-success: #4ade80; --ff-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); --ff-hero-overlay-start: rgba(8, 18, 8, 0.5); --ff-hero-overlay-mid: rgba(8, 18, 8, 0.7); --ff-hero-overlay-end: rgba(8, 18, 8, 0.95); --ff-promo-gradient: linear-gradient(135deg, #27ae60 0%, #188840 50%, #b8a060 100%); } /* ═══════════════════════════════════════════════════════════════════════════════ SCHRIFTARTEN — Gesteuert über data-font="..." auf ═══════════════════════════════════════════════════════════════════════════════ */ /* Default (kein Selektor) — Segoe UI / Georgia, bereits in :root */ [data-font="modern"] { --ff-font-body: 'Inter', -apple-system, sans-serif; --ff-font-heading: 'Inter', -apple-system, sans-serif; } [data-font="serif"] { --ff-font-body: 'Merriweather', Georgia, serif; --ff-font-heading: 'Merriweather', Georgia, serif; } [data-font="medieval"] { --ff-font-body: 'Crimson Text', Georgia, serif; --ff-font-heading: 'MedievalSharp', cursive; } [data-font="futuristic"] { --ff-font-body: 'Inter', -apple-system, sans-serif; --ff-font-heading: 'Orbitron', sans-serif; } [data-font="mono"] { --ff-font-body: 'Fira Code', 'Consolas', monospace; --ff-font-heading: 'Fira Code', 'Consolas', monospace; }