/* Buchregal – Regal-Themes.
   Ein Regal kann einen eigenen Look haben: er gilt im Kiosk dieses Regals und in der App,
   solange das Regal gewählt ist. Aktiviert über <html data-shelf-theme="…">; die Schlüssel
   müssen zu THEMES in app/shelves.py und app.js passen. „bibliothek" ist der Standard-Look
   aus style.css bzw. kiosk.html und braucht hier keinen Block.
   Wird nach style.css geladen, damit die Blöcke :root und [data-theme="light"] überstimmen. */

:root {
  /* Display-Schrift und Kiosk-Hintergrund je Theme – auch für die Vorschau-Kacheln in den Einstellungen */
  --fd-bibliothek: Cinzel, Georgia, serif;
  --fd-mystik: 'Cinzel Decorative', Cinzel, Georgia, serif;
  --fd-blutig: 'Special Elite', 'Courier New', monospace;
  --fd-dark: 'Playfair Display', Georgia, serif;
  --fd-sterne: Orbitron, Rajdhani, sans-serif;
  --fd-sommer: Fraunces, Georgia, serif;
  --fd-halloween: Creepster, Georgia, serif;
  --fd-weihnachten: 'Mountains of Christmas', Georgia, serif;

  --stars-silver:
    radial-gradient(3px 3px at 8% 14%, rgba(214, 222, 255, 0.95) 50%, transparent 52%),
    radial-gradient(2px 2px at 22% 38%, rgba(214, 222, 255, 0.7) 50%, transparent 52%),
    radial-gradient(3.5px 3.5px at 31% 9%, rgba(214, 222, 255, 0.95) 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 47% 20%, rgba(214, 222, 255, 0.6) 50%, transparent 52%),
    radial-gradient(2px 2px at 61% 6%, rgba(214, 222, 255, 0.8) 50%, transparent 52%),
    radial-gradient(3px 3px at 74% 16%, rgba(214, 222, 255, 0.9) 50%, transparent 52%),
    radial-gradient(2px 2px at 88% 30%, rgba(214, 222, 255, 0.7) 50%, transparent 52%),
    radial-gradient(3px 3px at 93% 10%, rgba(214, 222, 255, 0.85) 50%, transparent 52%),
    radial-gradient(2px 2px at 15% 70%, rgba(214, 222, 255, 0.5) 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 84% 78%, rgba(214, 222, 255, 0.6) 50%, transparent 52%),
    radial-gradient(2px 2px at 55% 88%, rgba(214, 222, 255, 0.45) 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 38% 62%, rgba(214, 222, 255, 0.5) 50%, transparent 52%);
  --stars-cyan:
    radial-gradient(2.5px 2.5px at 10% 20%, rgba(162, 236, 245, 0.9) 50%, transparent 52%),
    radial-gradient(2px 2px at 26% 8%, rgba(226, 236, 243, 0.7) 50%, transparent 52%),
    radial-gradient(3px 3px at 41% 26%, rgba(162, 236, 245, 0.85) 50%, transparent 52%),
    radial-gradient(2px 2px at 57% 12%, rgba(226, 236, 243, 0.6) 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 69% 34%, rgba(162, 236, 245, 0.7) 50%, transparent 52%),
    radial-gradient(2px 2px at 83% 9%, rgba(226, 236, 243, 0.8) 50%, transparent 52%),
    radial-gradient(3px 3px at 92% 24%, rgba(162, 236, 245, 0.9) 50%, transparent 52%),
    radial-gradient(2px 2px at 18% 84%, rgba(226, 236, 243, 0.5) 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 76% 80%, rgba(162, 236, 245, 0.55) 50%, transparent 52%),
    radial-gradient(2px 2px at 50% 94%, rgba(226, 236, 243, 0.45) 50%, transparent 52%);

  --kbg-bibliothek: radial-gradient(ellipse 70% 80% at 50% 45%, #33261A 0%, #1D140E 70%, #150E09 100%);
  --kbg-mystik:
    var(--stars-silver),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(122, 134, 196, 0.28), transparent 70%),
    radial-gradient(ellipse 70% 80% at 50% 45%, #2B2458 0%, #181437 70%, #0D0B20 100%);
  --kbg-blutig:
    radial-gradient(ellipse 60% 45% at 50% 108%, rgba(192, 38, 46, 0.38), transparent 70%),
    radial-gradient(ellipse 70% 80% at 50% 40%, #2C1517 0%, #150B0D 70%, #090405 100%);
  --kbg-dark:
    linear-gradient(160deg, rgba(242, 184, 202, 0.07), transparent 45%),
    radial-gradient(ellipse 70% 80% at 50% 45%, #3A1428 0%, #200A17 70%, #11050C 100%);
  --kbg-sterne:
    var(--stars-cyan),
    radial-gradient(ellipse 45% 35% at 72% 28%, rgba(95, 201, 216, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 22% 78%, rgba(90, 60, 170, 0.26), transparent 70%),
    radial-gradient(ellipse 70% 80% at 50% 45%, #10233A 0%, #081426 70%, #030913 100%);
  --kbg-sommer:
    radial-gradient(ellipse 55% 45% at 50% -8%, #FFE2A0 0%, rgba(255, 226, 160, 0) 70%),
    radial-gradient(ellipse 70% 80% at 50% 45%, #FFF8E6 0%, #FBEFD4 70%, #F3E2BE 100%);
  --snow:
    radial-gradient(5px 5px at 6% 12%, rgba(255, 255, 255, 0.9) 50%, transparent 52%),
    radial-gradient(3.5px 3.5px at 17% 34%, rgba(255, 255, 255, 0.65) 50%, transparent 52%),
    radial-gradient(6px 6px at 27% 7%, rgba(255, 255, 255, 0.85) 50%, transparent 52%),
    radial-gradient(4px 4px at 36% 48%, rgba(255, 255, 255, 0.45) 50%, transparent 52%),
    radial-gradient(3px 3px at 44% 18%, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
    radial-gradient(5px 5px at 58% 9%, rgba(255, 255, 255, 0.9) 50%, transparent 52%),
    radial-gradient(3.5px 3.5px at 66% 40%, rgba(255, 255, 255, 0.5) 50%, transparent 52%),
    radial-gradient(6px 6px at 77% 20%, rgba(255, 255, 255, 0.8) 50%, transparent 52%),
    radial-gradient(4px 4px at 88% 6%, rgba(255, 255, 255, 0.75) 50%, transparent 52%),
    radial-gradient(3px 3px at 94% 36%, rgba(255, 255, 255, 0.55) 50%, transparent 52%),
    radial-gradient(4.5px 4.5px at 12% 72%, rgba(255, 255, 255, 0.5) 50%, transparent 52%),
    radial-gradient(3px 3px at 30% 88%, rgba(255, 255, 255, 0.4) 50%, transparent 52%),
    radial-gradient(5px 5px at 72% 76%, rgba(255, 255, 255, 0.45) 50%, transparent 52%),
    radial-gradient(3.5px 3.5px at 90% 86%, rgba(255, 255, 255, 0.5) 50%, transparent 52%);
  --kbg-halloween:
    radial-gradient(ellipse 6% 9.5% at 82% 18%, #FFD9A8 0%, #FFC98A 70%, transparent 72%),
    radial-gradient(ellipse 20% 30% at 82% 18%, rgba(255, 177, 92, 0.35), transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 108%, rgba(62, 138, 58, 0.25), transparent 70%),
    radial-gradient(ellipse 70% 80% at 50% 45%, #2B1535 0%, #170B1F 70%, #0B050F 100%);
  --kbg-weihnachten:
    var(--snow),
    radial-gradient(ellipse 60% 40% at 50% 108%, rgba(243, 210, 124, 0.28), transparent 70%),
    radial-gradient(ellipse 70% 80% at 50% 45%, #1B4634 0%, #0F2B20 70%, #071711 100%);
}

/* ---------- Mystik: Mondlicht und Sternenstaub (Fantasy) ---------- */
[data-shelf-theme="mystik"] {
  --font-display: var(--fd-mystik);
  --bg0: #2B2458; --bg1: #181437; --bg2: #0D0B20;
  --app-bg: var(--stars-silver), radial-gradient(ellipse 120% 55% at 50% 0%, var(--bg0) 0%, var(--bg1) 60%, var(--bg2) 100%);
  --text: #E8E6F4; --muted: #A29DC6; --faint: #8D88B5;
  --gold: #A7B4E6; --gold-bright: #D6DEFF; --gold-dark: #7A86C4; --gold-rgb: 167, 180, 230;
  --oxblood: #5A3C9E; --oxblood-deep: #42297A;
  --border: #3E3870; --border-soft: #585190;
  --wordmark: #D6DEFF; --icon: #A7B4E6; --accent-label: #A7B4E6; --count: #D6DEFF;
  --chip-active-bg: #A7B4E6; --chip-active-fg: #181437; --chip-fg: #C3C6E8;
  --parch: #ECEAF7; --parch-deep: #D9D5EE; --parch-border: #B9B3DB;
  --parch-ink: #241D45; --parch-muted: #6B6494; --parch-field: #F8F7FD;
  --track-bg: #2A2550; --track-border: #3E3870;
  --wood-hi: #45407A; --wood-lo: #2C285A; --wood-edge: #6C66B0;
  --nav-hi: #1E1A40; --nav-lo: #120F2A; --nav-active: #D6DEFF; --nav-idle: #8D88B5;
  --surface-btn: rgba(0, 0, 0, 0.3);
  --field-bg: #120F2A; --field-border: #3E3870;
  --shadow-book: rgba(0, 0, 0, 0.55);
  --modal-bg: #221D48;
  --danger: #D9606B;
  --focus: #D6DEFF;
  --leather-title: #DCE1F4; --on-gold: #181437;
  --world-veil-top: rgba(24, 20, 55, 0.45); --world-veil-mid: rgba(24, 20, 55, 0.68); --world-veil-bottom: rgba(13, 11, 32, 0.94);
  --k-bg: var(--kbg-mystik); --k-ink: #EEEDFA; --k-title: #D6DEFF;
}

/* ---------- Blutig: Tinte, Blut und Schreibmaschine (Krimi & Thriller) ---------- */
[data-shelf-theme="blutig"] {
  --font-display: var(--fd-blutig); --font-quote: var(--fd-blutig); --quote-style: normal;
  --bg0: #2C1517; --bg1: #150B0D; --bg2: #090405;
  --app-bg: radial-gradient(ellipse 70% 40% at 50% 105%, rgba(192, 38, 46, 0.22), transparent 70%), radial-gradient(ellipse 120% 55% at 50% 0%, var(--bg0) 0%, var(--bg1) 60%, var(--bg2) 100%);
  --text: #ECE4DE; --muted: #9E918C; --faint: #857974;
  --gold: #C0262E; --gold-bright: #E6555B; --gold-dark: #8A161C; --gold-rgb: 192, 38, 46;
  --oxblood: #4A4A52; --oxblood-deep: #34343B;
  --border: #3E2A2C; --border-soft: #5A4245;
  --wordmark: #E6555B; --icon: #C0262E; --accent-label: #C0262E; --count: #E6555B;
  --chip-active-bg: #C0262E; --chip-active-fg: #FFF3F0; --chip-fg: #CFC3BE;
  --parch: #E9E3DC; --parch-deep: #D8D0C8; --parch-border: #B8ADA6;
  --parch-ink: #1E1517; --parch-muted: #6F6260; --parch-field: #F6F2EE;
  --track-bg: #2A1C1E; --track-border: #3E2A2C;
  --wood-hi: #3C3537; --wood-lo: #241F21; --wood-edge: #5C5254;
  --nav-hi: #1B1012; --nav-lo: #0E0708; --nav-active: #E6555B; --nav-idle: #857974;
  --surface-btn: rgba(0, 0, 0, 0.35);
  --field-bg: #120A0B; --field-border: #3E2A2C;
  --shadow-book: rgba(0, 0, 0, 0.65);
  --modal-bg: #221517;
  --danger: #E6555B;
  --focus: #E6555B;
  --leather-title: #E8DAD2; --on-gold: #FFF3F0;
  --world-veil-top: rgba(21, 11, 13, 0.45); --world-veil-mid: rgba(21, 11, 13, 0.68); --world-veil-bottom: rgba(9, 4, 5, 0.94);
  --k-bg: var(--kbg-blutig); --k-ink: #F0E8E2; --k-title: #E6555B;
}

/* ---------- Dark: Samt, Rosen und Dornen (Dark Romance) ---------- */
[data-shelf-theme="dark"] {
  --font-display: var(--fd-dark); --font-quote: var(--fd-dark);
  --bg0: #3A1428; --bg1: #200A17; --bg2: #11050C;
  --app-bg: linear-gradient(160deg, rgba(242, 184, 202, 0.06), transparent 45%), radial-gradient(ellipse 120% 55% at 50% 0%, var(--bg0) 0%, var(--bg1) 60%, var(--bg2) 100%);
  --text: #F2E6EB; --muted: #A98F9B; --faint: #8F7784;
  --gold: #CF8AA3; --gold-bright: #F2B8CA; --gold-dark: #9C5C78; --gold-rgb: 207, 138, 163;
  --oxblood: #6B1538; --oxblood-deep: #4E0E29;
  --border: #4A2538; --border-soft: #663850;
  --wordmark: #F2B8CA; --icon: #CF8AA3; --accent-label: #CF8AA3; --count: #F2B8CA;
  --chip-active-bg: #CF8AA3; --chip-active-fg: #200A17; --chip-fg: #DBC3CE;
  --parch: #F4E6EB; --parch-deep: #E6D0D9; --parch-border: #C6A6B4;
  --parch-ink: #2E1521; --parch-muted: #7E5D6C; --parch-field: #FCF5F8;
  --track-bg: #2E1424; --track-border: #4A2538;
  --wood-hi: #4E2138; --wood-lo: #301322; --wood-edge: #74395A;
  --nav-hi: #26101C; --nav-lo: #150810; --nav-active: #F2B8CA; --nav-idle: #8F7784;
  --surface-btn: rgba(0, 0, 0, 0.3);
  --field-bg: #150810; --field-border: #4A2538;
  --shadow-book: rgba(0, 0, 0, 0.6);
  --modal-bg: #2B1120;
  --danger: #E0697C;
  --focus: #F2B8CA;
  --leather-title: #F0D6DF; --on-gold: #200A17;
  --world-veil-top: rgba(32, 10, 23, 0.45); --world-veil-mid: rgba(32, 10, 23, 0.68); --world-veil-bottom: rgba(17, 5, 12, 0.94);
  --k-bg: var(--kbg-dark); --k-ink: #F6E4EB; --k-title: #F2B8CA;
}

/* ---------- Sternenmeer: Neon, Nebel und Orbit (Sci-Fi & Dystopie) ---------- */
[data-shelf-theme="sterne"] {
  --font-display: var(--fd-sterne); --font-body: Rajdhani, 'Segoe UI', sans-serif;
  --font-quote: Rajdhani, 'Segoe UI', sans-serif; --quote-style: normal;
  --bg0: #10233A; --bg1: #081426; --bg2: #030913;
  --app-bg: var(--stars-cyan), radial-gradient(ellipse 50% 30% at 80% 0%, rgba(95, 201, 216, 0.14), transparent 70%), radial-gradient(ellipse 120% 55% at 50% 0%, var(--bg0) 0%, var(--bg1) 60%, var(--bg2) 100%);
  --text: #E2ECF3; --muted: #8EA6B6; --faint: #748C9C;
  --gold: #5FC9D8; --gold-bright: #A2ECF5; --gold-dark: #2F8F9D; --gold-rgb: 95, 201, 216;
  --oxblood: #1C5566; --oxblood-deep: #123C48;
  --border: #1F3A50; --border-soft: #2E5068;
  --wordmark: #A2ECF5; --icon: #5FC9D8; --accent-label: #5FC9D8; --count: #A2ECF5;
  --chip-active-bg: #5FC9D8; --chip-active-fg: #081426; --chip-fg: #B9D0DC;
  --parch: #E4EEF3; --parch-deep: #CDDEE7; --parch-border: #A3BECB;
  --parch-ink: #11212C; --parch-muted: #597380; --parch-field: #F4F9FB;
  --track-bg: #122538; --track-border: #1F3A50;
  --wood-hi: #2B4258; --wood-lo: #192A3B; --wood-edge: #456A86;
  --nav-hi: #0D1C2E; --nav-lo: #06101D; --nav-active: #A2ECF5; --nav-idle: #748C9C;
  --surface-btn: rgba(0, 0, 0, 0.3);
  --field-bg: #06101D; --field-border: #1F3A50;
  --shadow-book: rgba(0, 0, 0, 0.6);
  --modal-bg: #0F2235;
  --danger: #E36A6A;
  --focus: #A2ECF5;
  --leather-title: #DCE8F0; --on-gold: #081426;
  --world-veil-top: rgba(8, 20, 38, 0.45); --world-veil-mid: rgba(8, 20, 38, 0.68); --world-veil-bottom: rgba(3, 9, 19, 0.94);
  --k-bg: var(--kbg-sterne); --k-ink: #E8F2F8; --k-title: #A2ECF5;
}

/* ---------- Sommerwiese: Honig, Salbei und Sonne (Feel-Good & Romance) – helle Grundstimmung ---------- */
[data-shelf-theme="sommer"] {
  --font-display: var(--fd-sommer); --font-quote: var(--fd-sommer);
  --bg0: #FFF8E6; --bg1: #FBEFD4; --bg2: #F3E2BE;
  --app-bg: radial-gradient(ellipse 55% 30% at 50% -6%, #FFE2A0 0%, rgba(255, 226, 160, 0) 70%), radial-gradient(ellipse 120% 55% at 50% 0%, var(--bg0) 0%, var(--bg1) 60%, var(--bg2) 100%);
  --text: #3A3127; --muted: #6F6150; --faint: #8C7D68;
  --gold: #B8741F; --gold-bright: #D99A3A; --gold-dark: #8E5713; --gold-rgb: 184, 116, 31;
  --oxblood: #4D7A58; --oxblood-deep: #3A5E43;
  --border: #E0CFA8; --border-soft: #CDB88E;
  --wordmark: #4D7A58; --icon: #B8741F; --accent-label: #8E5713; --count: #4D7A58;
  --chip-active-bg: #4D7A58; --chip-active-fg: #F7F3E6; --chip-fg: #6B5B40;
  --parch: #FFFBF0; --parch-deep: #F3E8CF; --parch-border: #D8C8A3;
  --parch-ink: #2F2A24; --parch-muted: #7A6E5C; --parch-field: #FFFDF7;
  --track-bg: #EEDFBE; --track-border: #DCCAA1;
  --wood-hi: #E3B778; --wood-lo: #BE9057; --wood-edge: #F0CF95;
  --nav-hi: #FBF2DD; --nav-lo: #F3E6C8; --nav-active: #4D7A58; --nav-idle: #8C7D68;
  --surface-btn: rgba(255, 255, 255, 0.6);
  --field-bg: #FFFDF7; --field-border: #D8C8A3;
  --shadow-book: rgba(120, 80, 30, 0.3);
  --modal-bg: #FBF4E3;
  --danger: #B5473A;
  --focus: #4D7A58;
  --leather-title: #E6CB84; --on-gold: #2A1E0E;
  --world-veil-top: rgba(251, 239, 212, 0.55); --world-veil-mid: rgba(251, 239, 212, 0.74); --world-veil-bottom: rgba(243, 226, 190, 0.95);
  --k-bg: var(--kbg-sommer); --k-ink: #3A3127; --k-title: #8E5713; --k-shadow: none;
}

/* ---------- Halloween: Kürbis, Fledermaus und Vollmond ---------- */
[data-shelf-theme="halloween"] {
  --font-display: var(--fd-halloween); --font-quote: 'IM Fell English', Georgia, serif;
  --bg0: #2B1535; --bg1: #170B1F; --bg2: #0B050F;
  --app-bg: radial-gradient(circle 20px at 88% 54px, #FFD9A8 0%, #FFC98A 70%, transparent 72%), radial-gradient(circle 70px at 88% 54px, rgba(255, 177, 92, 0.3), transparent 70%), radial-gradient(ellipse 70% 25% at 50% 105%, rgba(62, 138, 58, 0.22), transparent 70%), radial-gradient(ellipse 120% 55% at 50% 0%, var(--bg0) 0%, var(--bg1) 60%, var(--bg2) 100%);
  --text: #F1E7DA; --muted: #AC9A8E; --faint: #8F7F75;
  --gold: #F28C28; --gold-bright: #FFB15C; --gold-dark: #B85E12; --gold-rgb: 242, 140, 40;
  --oxblood: #2F7A2C; --oxblood-deep: #225B20;
  --border: #3B2545; --border-soft: #56375F;
  --wordmark: #FFB15C; --icon: #F28C28; --accent-label: #F28C28; --count: #FFB15C;
  --chip-active-bg: #F28C28; --chip-active-fg: #170B1F; --chip-fg: #D9C6B5;
  --parch: #F2E6D6; --parch-deep: #E3D2BA; --parch-border: #C4AE93;
  --parch-ink: #241728; --parch-muted: #76635C; --parch-field: #FBF5EC;
  --track-bg: #2B1A30; --track-border: #3B2545;
  --wood-hi: #3A2A2F; --wood-lo: #221519; --wood-edge: #5A4048;
  --nav-hi: #1F1126; --nav-lo: #110816; --nav-active: #FFB15C; --nav-idle: #8F7F75;
  --surface-btn: rgba(0, 0, 0, 0.35);
  --field-bg: #110816; --field-border: #3B2545;
  --shadow-book: rgba(0, 0, 0, 0.65);
  --modal-bg: #241530;
  --danger: #E65A4F;
  --focus: #FFB15C;
  --leather-title: #F3DCC0; --on-gold: #170B1F;
  --world-veil-top: rgba(23, 11, 31, 0.45); --world-veil-mid: rgba(23, 11, 31, 0.68); --world-veil-bottom: rgba(11, 5, 15, 0.94);
  --k-bg: var(--kbg-halloween); --k-ink: #F3E8D8; --k-title: #FFB15C;
}

/* ---------- Weihnachten: Tanne, Gold und Schneegestöber ---------- */
[data-shelf-theme="weihnachten"] {
  --font-display: var(--fd-weihnachten);
  --bg0: #1B4634; --bg1: #0F2B20; --bg2: #071711;
  --app-bg: var(--snow), radial-gradient(ellipse 60% 30% at 50% 105%, rgba(243, 210, 124, 0.22), transparent 70%), radial-gradient(ellipse 120% 55% at 50% 0%, var(--bg0) 0%, var(--bg1) 60%, var(--bg2) 100%);
  --text: #F2EBDD; --muted: #A9B8A8; --faint: #8DA08F;
  --gold: #D9A84E; --gold-bright: #F3D27C; --gold-dark: #A87A2A; --gold-rgb: 217, 168, 78;
  --oxblood: #A3272D; --oxblood-deep: #7D1B20;
  --border: #2C5A47; --border-soft: #3F7A60;
  --wordmark: #F3D27C; --icon: #D9A84E; --accent-label: #D9A84E; --count: #F3D27C;
  --chip-active-bg: #A3272D; --chip-active-fg: #FFF4E8; --chip-fg: #CFDACB;
  --parch: #F8F2E6; --parch-deep: #EADFCB; --parch-border: #CDBA9C;
  --parch-ink: #26201A; --parch-muted: #6F6454; --parch-field: #FFFBF4;
  --track-bg: #163A2C; --track-border: #2C5A47;
  --wood-hi: #5A3A26; --wood-lo: #3A2316; --wood-edge: #8A6A42;
  --nav-hi: #123526; --nav-lo: #0A2018; --nav-active: #F3D27C; --nav-idle: #8DA08F;
  --surface-btn: rgba(0, 0, 0, 0.3);
  --field-bg: #0A2018; --field-border: #2C5A47;
  --shadow-book: rgba(0, 0, 0, 0.55);
  --modal-bg: #163A2C;
  --danger: #E0605F;
  --focus: #F3D27C;
  --leather-title: #F3DFA8; --on-gold: #1A1408;
  --world-veil-top: rgba(15, 43, 32, 0.45); --world-veil-mid: rgba(15, 43, 32, 0.68); --world-veil-bottom: rgba(7, 23, 17, 0.94);
  --k-bg: var(--kbg-weihnachten); --k-ink: #F6EFE0; --k-title: #F3D27C;
}

/* ---------- Deko-Ebene (deco.js): liegt hinter dem Inhalt, lässt Klicks durch ---------- */
#deco { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#deco:empty { display: none; }

/* Halloween: Kürbisköpfe in den unteren Ecken, Kerzenlicht flackert unregelmäßig */
.deco-pumpkin { position: absolute; bottom: 4vh; left: 3vw; width: clamp(80px, 11vw, 170px); transform: rotate(-5deg); }
.deco-pumpkin.right { left: auto; right: 3vw; bottom: 5vh; width: clamp(64px, 8.5vw, 130px); transform: rotate(6deg); }
.deco-pumpkin svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.deco-glow {
  position: absolute; left: 50%; top: 55%; width: 170%; height: 150%; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 177, 92, 0.4), transparent);
}
.jack-face { fill: #FFD98A; filter: drop-shadow(0 0 5px rgba(255, 190, 90, 0.95)); }
.deco-pumpkin .deco-glow, .deco-pumpkin .jack-face { animation: flicker 2.1s infinite; }
.deco-pumpkin.right .deco-glow, .deco-pumpkin.right .jack-face { animation-duration: 2.7s; animation-delay: -0.9s; }
@keyframes flicker {
  0%, 100% { opacity: 1; } 8% { opacity: 0.82; } 16% { opacity: 1; } 30% { opacity: 0.64; } 42% { opacity: 0.94; }
  55% { opacity: 0.78; } 68% { opacity: 1; } 80% { opacity: 0.68; } 90% { opacity: 0.9; }
}
.deco-web { position: absolute; left: 0; top: 0; width: clamp(80px, 11vw, 150px); color: rgba(241, 231, 218, 0.3); }
.deco-web svg { display: block; width: 100%; height: auto; }
/* Fledermäuse: fliegen quer über den Schirm und schlagen dabei mit den Flügeln */
.deco-bat {
  position: absolute; left: 0; top: 0; width: 34px; color: #090309;
  filter: drop-shadow(0 0 2px rgba(255, 177, 92, 0.3));
  animation: bat-fly 18s linear infinite;
}
.deco-bat.reverse { animation-direction: reverse; }
.deco-bat svg { display: block; width: 100%; height: auto; fill: currentColor; }
.deco-bat.reverse svg { transform: scaleX(-1); }
.deco-bat .wing { transform-box: fill-box; animation: flap 0.5s ease-in-out infinite; }
.deco-bat .wing-l { transform-origin: 100% 50%; }
.deco-bat .wing-r { transform-origin: 0% 50%; }
@keyframes flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.3); } }
@keyframes bat-fly {
  0% { transform: translate(-12vw, 22vh); } 25% { transform: translate(20vw, 10vh); } 50% { transform: translate(50vw, 26vh); }
  75% { transform: translate(80vw, 8vh); } 100% { transform: translate(112vw, 20vh); }
}

/* Weihnachten: Girlande am oberen Rand, Lichter blinken, Kugeln schwingen, Schnee rieselt */
.deco-garland { position: absolute; left: -10px; right: -10px; top: -6px; display: flex; }
.deco-garland .swag { flex: 1 0 auto; width: 120px; height: 60px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4)); }
.bulb { animation: twinkle 2.2s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px currentColor); }
.bulb:nth-of-type(2) { animation-delay: -0.8s; }
.bulb:nth-of-type(3) { animation-delay: -1.5s; }
@keyframes twinkle { from { opacity: 0.45; } to { opacity: 1; } }
.bauble { transform-box: fill-box; transform-origin: 50% 0; animation: swing 3.8s ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.deco-snowdrift {
  position: absolute; left: -10%; right: -10%; bottom: -8vh; height: 18vh;
  background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(255, 255, 255, 0.16), transparent 70%);
}
.deco-flake { position: absolute; top: -8px; animation: snow-fall linear infinite; }
.deco-flake span { display: block; border-radius: 50%; background: #fff; animation: snow-sway ease-in-out infinite alternate; }
@keyframes snow-fall { from { transform: translateY(-4vh); } to { transform: translateY(104vh); } }
@keyframes snow-sway { from { transform: translateX(-14px); } to { transform: translateX(14px); } }

@media (prefers-reduced-motion: reduce) {
  #deco * { animation: none !important; }
  .deco-flake, .deco-bat { display: none; }
}