/* Botanical Prestige – Design Tokens
   Theme-System: Tag/Nacht · Jahreszeiten · Besonderes/Luxus */

:root {
  /* Shared structural tokens */
  --font-display: "Cormorant Garamond", "Fraunces", Georgia, serif;
  --font-ui: "Outfit", "Manrope", "Segoe UI", sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.75rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;

  --radius-sm: 0.7rem;
  --radius-md: 1rem;
  --radius-lg: 1.35rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  --border-soft: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  --border-strong: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);

  --shadow-card: 0 28px 70px rgba(0, 0, 0, 0.48);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--highlight) 55%, transparent);

  --motion-fast: 160ms;
  --motion-med: 280ms;
  --motion-slow: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);

  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 980px;
  --bp-xl: 1280px;

  --z-atm: 0;
  --z-content: 2;
  --z-header: 20;
  --z-preview: 40;

  /* Default = Midnight Garden */
  --bg: #040b08;
  --bg-elevated: #0a1611;
  --surface: rgba(10, 22, 17, 0.72);
  --card: rgba(14, 28, 22, 0.78);
  --card-solid: #101f19;
  --text: #f3f7f4;
  --muted: #9eb0a6;
  --primary: #55d66b;
  --highlight: #c7f36b;
  --gold: #e8c56a;
  --accent: #6ee087;
  --danger: #ff6b6b;
  --glow: rgba(85, 214, 107, 0.28);
  --glow-gold: rgba(232, 197, 106, 0.18);
  --overlay: linear-gradient(115deg, rgba(4, 11, 8, 0.88) 0%, rgba(4, 11, 8, 0.62) 42%, rgba(4, 11, 8, 0.78) 100%);
  --btn-grad: linear-gradient(135deg, #d4f56d 0%, #55d66b 48%, #2f9e4a 100%);
  --atmosphere-image: url("/assets/images/bg-midnight-garden.jpg");
  --brand-ring: color-mix(in srgb, var(--gold) 70%, white 10%);
  --neu-field: #0e1914;
  --neu-inset-dark: #040a07;
  --neu-inset-light: #1e3328;
  --neu-raise-dark: #08110d;
  --neu-raise-light: #20362c;

  /* Cinema atmosphere (theme-specific overrides) */
  --cinema-filter: saturate(1.08) contrast(1.06) brightness(0.92);
  --cinema-grade:
    radial-gradient(1100px 620px at 18% 12%, var(--glow), transparent 58%),
    radial-gradient(900px 560px at 86% 18%, var(--glow-gold), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 32%, transparent 62%, rgba(0, 0, 0, 0.55));
  --cinema-vignette: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.55) 100%);
  --bokeh-color: color-mix(in srgb, var(--gold) 55%, white);
  --bokeh-opacity: 0.22;
  --foliage-color: color-mix(in srgb, var(--primary) 70%, var(--gold) 20%);
  --pollen-color: color-mix(in srgb, var(--highlight) 70%, white);
}

html[data-theme="midnight"] {
  --bg: #030a07;
  --bg-elevated: #0a1510;
  --surface: rgba(8, 20, 15, 0.74);
  --card: rgba(12, 26, 20, 0.82);
  --card-solid: #0e1c16;
  --text: #eef5f0;
  --muted: #8fa89a;
  --primary: #4fd463;
  --highlight: #c8f26a;
  --gold: #e2c06a;
  --accent: #6adb82;
  --glow: rgba(79, 212, 99, 0.32);
  --glow-gold: rgba(226, 192, 106, 0.14);
  --overlay:
    linear-gradient(125deg, rgba(2, 8, 6, 0.94) 0%, rgba(4, 14, 10, 0.55) 38%, rgba(2, 8, 6, 0.88) 100%),
    radial-gradient(900px 500px at 70% 20%, rgba(79, 212, 99, 0.12), transparent 60%);
  --btn-grad: linear-gradient(145deg, #d8f87a 0%, #4fd463 46%, #1f7a38 100%);
  --atmosphere-image: url("/assets/images/bg-midnight-garden.jpg");
  --brand-ring: color-mix(in srgb, var(--gold) 65%, #c8f26a 20%);
  --neu-field: #0c1712;
  --neu-inset-dark: #030805;
  --neu-inset-light: #1a2e24;
  --neu-raise-dark: #06100c;
  --neu-raise-light: #1e3228;
  --cinema-filter: saturate(1.12) contrast(1.1) brightness(0.82);
  --cinema-grade:
    radial-gradient(900px 520px at 12% 8%, rgba(79, 212, 99, 0.22), transparent 55%),
    radial-gradient(700px 480px at 88% 14%, rgba(226, 192, 106, 0.1), transparent 58%),
    linear-gradient(185deg, rgba(0, 0, 0, 0.55), transparent 28%, transparent 58%, rgba(0, 0, 0, 0.7));
  --cinema-vignette: radial-gradient(ellipse at 50% 40%, transparent 28%, rgba(0, 0, 0, 0.72) 100%);
  --bokeh-color: color-mix(in srgb, #4fd463 35%, #e2c06a 40%);
  --bokeh-opacity: 0.16;
  --foliage-color: color-mix(in srgb, #4fd463 55%, #0a2014 30%);
  --pollen-color: color-mix(in srgb, #c8f26a 55%, white);
  color-scheme: dark;
}

html[data-theme="greenhouse"] {
  --bg: #0c1610;
  --bg-elevated: #15231a;
  --surface: rgba(22, 36, 26, 0.72);
  --card: rgba(28, 44, 32, 0.8);
  --card-solid: #18281e;
  --text: #f6f3e8;
  --muted: #aebcac;
  --primary: #74c96e;
  --highlight: #e8f0a8;
  --gold: #f0c56d;
  --accent: #9ed66e;
  --glow: rgba(240, 197, 109, 0.26);
  --glow-gold: rgba(240, 197, 109, 0.32);
  --overlay:
    linear-gradient(118deg, rgba(14, 24, 16, 0.78) 0%, rgba(36, 42, 22, 0.35) 42%, rgba(12, 20, 14, 0.82) 100%),
    radial-gradient(800px 480px at 78% 30%, rgba(240, 197, 109, 0.18), transparent 62%);
  --btn-grad: linear-gradient(140deg, #f2d878 0%, #8ed85a 40%, #3fa64d 100%);
  --atmosphere-image: url("/assets/images/bg-golden-greenhouse.jpg");
  --brand-ring: color-mix(in srgb, var(--gold) 80%, white 8%);
  --neu-field: #16241c;
  --neu-inset-dark: #0a1210;
  --neu-inset-light: #2a3e32;
  --neu-raise-dark: #101a15;
  --neu-raise-light: #2c4134;
  --cinema-filter: saturate(1.18) contrast(1.05) brightness(0.94) hue-rotate(-4deg);
  --cinema-grade:
    radial-gradient(1000px 580px at 80% 18%, rgba(240, 197, 109, 0.28), transparent 55%),
    radial-gradient(700px 420px at 18% 70%, rgba(116, 201, 110, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(20, 28, 12, 0.35), transparent 40%, rgba(8, 14, 10, 0.5));
  --cinema-vignette: radial-gradient(ellipse at 55% 35%, transparent 40%, rgba(8, 14, 10, 0.58) 100%);
  --bokeh-color: color-mix(in srgb, #f0c56d 70%, white);
  --bokeh-opacity: 0.32;
  --foliage-color: color-mix(in srgb, #74c96e 50%, #f0c56d 35%);
  --pollen-color: color-mix(in srgb, #f0c56d 80%, white);
  color-scheme: dark;
}

/* —— Tag & Nacht —— */

/* Abenddämmerung: letzte Sonne im Laub, Kupfer am Horizont */
html[data-theme="dusk"] {
  --bg: #140e0b;
  --bg-elevated: #1f1611;
  --surface: rgba(32, 22, 16, 0.76);
  --card: rgba(38, 26, 18, 0.84);
  --card-solid: #241810;
  --text: #f4ebe0;
  --muted: #b09a88;
  --primary: #c9894e;
  --highlight: #efc8a0;
  --gold: #d9a66a;
  --accent: #8f9f6e;
  --danger: #e07060;
  --glow: rgba(201, 137, 78, 0.34);
  --glow-gold: rgba(217, 166, 106, 0.26);
  --overlay:
    linear-gradient(155deg, rgba(18, 10, 8, 0.92) 0%, rgba(56, 28, 14, 0.42) 36%, rgba(22, 28, 16, 0.55) 62%, rgba(12, 10, 8, 0.9) 100%),
    radial-gradient(700px 420px at 18% 78%, rgba(201, 137, 78, 0.35), transparent 55%);
  --btn-grad: linear-gradient(145deg, #efc8a0 0%, #c9894e 42%, #7a8f5a 100%);
  --atmosphere-image:
    radial-gradient(ellipse 80% 55% at 15% 85%, rgba(220, 120, 50, 0.35), transparent 55%),
    radial-gradient(ellipse 60% 40% at 70% 20%, rgba(90, 110, 70, 0.18), transparent 50%),
    linear-gradient(168deg, rgba(26, 16, 12, 0.55) 0%, rgba(58, 34, 20, 0.25) 38%, rgba(18, 14, 10, 0.5) 100%),
    url("/assets/images/bg-dusk.jpg");
  --brand-ring: color-mix(in srgb, #d9a66a 75%, #efc8a0);
  --shadow-card: 0 28px 64px rgba(8, 4, 2, 0.55);
  --neu-field: #201610;
  --neu-inset-dark: #0c0806;
  --neu-inset-light: #38281c;
  --neu-raise-dark: #140e0a;
  --neu-raise-light: #3a2a1e;
  --cinema-filter: saturate(1.2) contrast(1.12) brightness(0.88) sepia(0.12);
  --cinema-grade:
    radial-gradient(900px 520px at 12% 88%, rgba(220, 110, 40, 0.4), transparent 50%),
    radial-gradient(600px 400px at 85% 12%, rgba(180, 140, 80, 0.12), transparent 55%),
    linear-gradient(200deg, rgba(0, 0, 0, 0.45), transparent 35%, rgba(20, 8, 4, 0.55));
  --cinema-vignette: radial-gradient(ellipse at 40% 55%, transparent 30%, rgba(8, 4, 2, 0.72) 100%);
  --bokeh-color: color-mix(in srgb, #efc8a0 65%, #ff8844);
  --bokeh-opacity: 0.28;
  --foliage-color: color-mix(in srgb, #8f9f6e 45%, #c9894e 40%);
  --pollen-color: color-mix(in srgb, #efc8a0 75%, #ffaa66);
  color-scheme: dark;
}

/* Morgenlicht: kühler Himmel + erstes warmes Licht */
html[data-theme="dawn"] {
  --bg: #e8f0ea;
  --bg-elevated: #f4f8f4;
  --surface: rgba(255, 255, 255, 0.7);
  --card: rgba(255, 255, 255, 0.86);
  --card-solid: #ffffff;
  --text: #1a2c22;
  --muted: #5a6e62;
  --primary: #3a7a4e;
  --highlight: #2a6340;
  --gold: #b8924a;
  --accent: #5a9470;
  --danger: #c25050;
  --glow: rgba(58, 122, 78, 0.14);
  --glow-gold: rgba(240, 180, 120, 0.22);
  --overlay:
    linear-gradient(165deg, rgba(255, 236, 210, 0.55) 0%, rgba(232, 240, 234, 0.35) 28%, rgba(210, 228, 232, 0.45) 100%),
    radial-gradient(900px 500px at 85% 8%, rgba(255, 200, 140, 0.35), transparent 55%);
  --btn-grad: linear-gradient(145deg, #f0d8a0 0%, #6aa878 45%, #3a7a4e 100%);
  --atmosphere-image:
    radial-gradient(ellipse 70% 50% at 90% 5%, rgba(255, 210, 160, 0.45), transparent 50%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(160, 200, 190, 0.25), transparent 55%),
    linear-gradient(175deg, rgba(248, 239, 228, 0.45) 0%, rgba(228, 238, 232, 0.25) 40%, rgba(210, 226, 224, 0.35) 100%),
    url("/assets/images/bg-dawn.jpg");
  --brand-ring: color-mix(in srgb, #b8924a 60%, #3a7a4e 25%);
  --shadow-card: 0 22px 50px rgba(40, 70, 55, 0.1);
  --border-soft: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  --neu-field: #dde8e0;
  --neu-inset-dark: #b8c8bc;
  --neu-inset-light: #ffffff;
  --neu-raise-dark: #c8d6cc;
  --neu-raise-light: #ffffff;
  --cinema-filter: saturate(1.05) contrast(1.02) brightness(1.08);
  --cinema-grade:
    radial-gradient(1000px 560px at 92% 0%, rgba(255, 190, 130, 0.45), transparent 50%),
    radial-gradient(700px 400px at 8% 100%, rgba(140, 190, 185, 0.25), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 40%, rgba(180, 200, 195, 0.2));
  --cinema-vignette: radial-gradient(ellipse at 50% 40%, transparent 48%, rgba(120, 140, 135, 0.28) 100%);
  --bokeh-color: color-mix(in srgb, #ffd0a0 70%, white);
  --bokeh-opacity: 0.35;
  --foliage-color: color-mix(in srgb, #3a7a4e 55%, #b8924a 20%);
  --pollen-color: color-mix(in srgb, #ffc090 60%, white);
  color-scheme: light;
}

/* Tageslicht: klarer Mittagsgarten, hoher Kontrast, wenig Glanz */
html[data-theme="daylight"] {
  --bg: #f2f6f1;
  --bg-elevated: #ffffff;
  --surface: rgba(255, 255, 255, 0.82);
  --card: rgba(255, 255, 255, 0.94);
  --card-solid: #ffffff;
  --text: #14281c;
  --muted: #55685c;
  --primary: #28663a;
  --highlight: #1a5230;
  --gold: #9a7e2e;
  --accent: #3f7f4e;
  --danger: #c04444;
  --glow: rgba(40, 102, 58, 0.12);
  --glow-gold: rgba(154, 126, 46, 0.1);
  --overlay:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(242, 246, 241, 0.2) 40%, rgba(220, 232, 218, 0.4) 100%);
  --btn-grad: linear-gradient(145deg, #c4d86a 0%, #3f7f4e 48%, #28663a 100%);
  --atmosphere-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(160deg, rgba(248, 250, 246, 0.35) 0%, rgba(230, 239, 226, 0.2) 45%, rgba(208, 224, 200, 0.3) 100%),
    url("/assets/images/bg-daylight.jpg");
  --brand-ring: color-mix(in srgb, #28663a 50%, #9a7e2e 30%);
  --shadow-card: 0 16px 36px rgba(20, 50, 32, 0.09);
  --neu-field: #e4ece2;
  --neu-inset-dark: #c2d0c2;
  --neu-inset-light: #ffffff;
  --neu-raise-dark: #d0dcd0;
  --neu-raise-light: #ffffff;
  --cinema-filter: saturate(1.02) contrast(1.04) brightness(1.12);
  --cinema-grade:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 255, 255, 0.7), transparent 50%),
    linear-gradient(180deg, transparent 50%, rgba(180, 200, 170, 0.18));
  --cinema-vignette: radial-gradient(ellipse at center, transparent 55%, rgba(140, 160, 145, 0.18) 100%);
  --bokeh-color: color-mix(in srgb, #9a7e2e 40%, white);
  --bokeh-opacity: 0.08;
  --foliage-color: color-mix(in srgb, #28663a 70%, #9a7e2e 15%);
  --pollen-color: color-mix(in srgb, #28663a 30%, white);
  color-scheme: light;
}

/* —— Jahreszeiten —— */

/* Frühling: frisches Blattwerk, Apfelblüte (staubig-rosa, nicht candy) */
html[data-theme="spring"] {
  --bg: #0c1a12;
  --bg-elevated: #14261c;
  --surface: rgba(20, 38, 28, 0.74);
  --card: rgba(24, 44, 34, 0.82);
  --card-solid: #163024;
  --text: #f2f8f3;
  --muted: #9cb8a8;
  --primary: #6fcf86;
  --highlight: #b6ecc4;
  --gold: #e0bc78;
  --accent: #d4a8b0;
  --glow: rgba(111, 207, 134, 0.3);
  --glow-gold: rgba(212, 168, 176, 0.2);
  --overlay:
    linear-gradient(130deg, rgba(10, 22, 16, 0.9) 0%, rgba(28, 52, 36, 0.4) 40%, rgba(40, 28, 32, 0.35) 70%, rgba(10, 20, 14, 0.88) 100%),
    radial-gradient(600px 400px at 75% 25%, rgba(212, 168, 176, 0.22), transparent 55%);
  --btn-grad: linear-gradient(145deg, #d4a8b0 0%, #6fcf86 42%, #348a50 100%);
  --atmosphere-image:
    radial-gradient(ellipse 45% 40% at 78% 22%, rgba(220, 170, 180, 0.28), transparent 60%),
    radial-gradient(ellipse 55% 45% at 20% 70%, rgba(90, 180, 110, 0.18), transparent 55%),
    linear-gradient(158deg, rgba(12, 26, 18, 0.55) 0%, rgba(26, 52, 36, 0.3) 45%, rgba(18, 30, 22, 0.55) 100%),
    url("/assets/images/bg-spring.jpg");
  --brand-ring: color-mix(in srgb, #6fcf86 45%, #d4a8b0 40%);
  --neu-field: #14261c;
  --neu-inset-dark: #08140e;
  --neu-inset-light: #284034;
  --neu-raise-dark: #0e1c14;
  --neu-raise-light: #2a4236;
  --cinema-filter: saturate(1.15) contrast(1.06) brightness(0.9) hue-rotate(8deg);
  --cinema-grade:
    radial-gradient(700px 480px at 80% 18%, rgba(220, 170, 180, 0.28), transparent 52%),
    radial-gradient(800px 500px at 15% 75%, rgba(111, 207, 134, 0.22), transparent 55%),
    linear-gradient(185deg, rgba(0, 0, 0, 0.4), transparent 35%, rgba(8, 16, 12, 0.55));
  --cinema-vignette: radial-gradient(ellipse at 50% 42%, transparent 32%, rgba(6, 14, 10, 0.68) 100%);
  --bokeh-color: color-mix(in srgb, #d4a8b0 50%, #b6ecc4);
  --bokeh-opacity: 0.26;
  --foliage-color: color-mix(in srgb, #6fcf86 60%, #d4a8b0 25%);
  --pollen-color: color-mix(in srgb, #d4a8b0 55%, white);
  color-scheme: dark;
}

/* Sommer: hartes Licht, sattes Chlorophyll, Sonnenflecken */
html[data-theme="summer"] {
  --bg: #0e1c12;
  --bg-elevated: #17301e;
  --surface: rgba(22, 44, 30, 0.7);
  --card: rgba(26, 50, 34, 0.8);
  --card-solid: #1a3224;
  --text: #f5faf2;
  --muted: #9cbc9c;
  --primary: #52b854;
  --highlight: #e0f25c;
  --gold: #f0cc55;
  --accent: #6ec85e;
  --glow: rgba(224, 242, 92, 0.22);
  --glow-gold: rgba(240, 204, 85, 0.3);
  --overlay:
    linear-gradient(125deg, rgba(12, 24, 14, 0.75) 0%, rgba(50, 70, 28, 0.28) 45%, rgba(14, 26, 16, 0.8) 100%),
    radial-gradient(500px 360px at 70% 15%, rgba(255, 230, 120, 0.28), transparent 50%);
  --btn-grad: linear-gradient(145deg, #f0cc55 0%, #52b854 48%, #2a8a38 100%);
  --atmosphere-image:
    radial-gradient(ellipse 40% 35% at 72% 12%, rgba(255, 240, 140, 0.35), transparent 55%),
    linear-gradient(150deg, rgba(14, 28, 18, 0.4), rgba(40, 70, 30, 0.2)),
    url("/assets/images/bg-summer.jpg");
  --brand-ring: color-mix(in srgb, #f0cc55 70%, #e0f25c);
  --neu-field: #17301e;
  --neu-inset-dark: #0a1810;
  --neu-inset-light: #2e4e38;
  --neu-raise-dark: #102018;
  --neu-raise-light: #32543c;
  --cinema-filter: saturate(1.28) contrast(1.1) brightness(1.02);
  --cinema-grade:
    radial-gradient(600px 400px at 75% 10%, rgba(255, 235, 120, 0.45), transparent 48%),
    radial-gradient(900px 500px at 20% 80%, rgba(82, 184, 84, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 200, 0.08), transparent 30%, rgba(8, 16, 10, 0.4));
  --cinema-vignette: radial-gradient(ellipse at 55% 30%, transparent 38%, rgba(8, 16, 10, 0.55) 100%);
  --bokeh-color: color-mix(in srgb, #f0cc55 80%, white);
  --bokeh-opacity: 0.38;
  --foliage-color: color-mix(in srgb, #52b854 55%, #f0cc55 30%);
  --pollen-color: color-mix(in srgb, #f0cc55 85%, white);
  color-scheme: dark;
}

/* Herbst: getrocknetes Laub, Bernstein, Moos am Boden */
html[data-theme="autumn"] {
  --bg: #16100c;
  --bg-elevated: #221810;
  --surface: rgba(36, 24, 16, 0.76);
  --card: rgba(42, 28, 18, 0.84);
  --card-solid: #281c12;
  --text: #f5ebe0;
  --muted: #b09880;
  --primary: #c06e32;
  --highlight: #e4b060;
  --gold: #d4a858;
  --accent: #8a6a3e;
  --glow: rgba(192, 110, 50, 0.3);
  --glow-gold: rgba(228, 176, 96, 0.24);
  --overlay:
    linear-gradient(140deg, rgba(20, 12, 8, 0.92) 0%, rgba(70, 36, 16, 0.45) 40%, rgba(36, 40, 20, 0.4) 68%, rgba(14, 10, 8, 0.9) 100%);
  --btn-grad: linear-gradient(145deg, #e4b060 0%, #c06e32 50%, #6a4020 100%);
  --atmosphere-image:
    radial-gradient(ellipse 55% 40% at 30% 60%, rgba(180, 80, 30, 0.28), transparent 55%),
    radial-gradient(ellipse 40% 35% at 80% 25%, rgba(200, 150, 60, 0.15), transparent 50%),
    linear-gradient(162deg, rgba(22, 16, 12, 0.55) 0%, rgba(58, 32, 16, 0.28) 45%, rgba(18, 14, 10, 0.55) 100%),
    url("/assets/images/bg-autumn.jpg");
  --brand-ring: color-mix(in srgb, #d4a858 70%, #c06e32);
  --shadow-card: 0 28px 64px rgba(10, 4, 0, 0.55);
  --neu-field: #221810;
  --neu-inset-dark: #0e0a06;
  --neu-inset-light: #3a2a1a;
  --neu-raise-dark: #140e0a;
  --neu-raise-light: #3c2c1c;
  --cinema-filter: saturate(1.15) contrast(1.14) brightness(0.86) sepia(0.22);
  --cinema-grade:
    radial-gradient(800px 480px at 25% 55%, rgba(192, 90, 30, 0.35), transparent 52%),
    radial-gradient(500px 360px at 85% 20%, rgba(212, 168, 88, 0.18), transparent 50%),
    linear-gradient(195deg, rgba(0, 0, 0, 0.5), transparent 32%, rgba(16, 8, 4, 0.6));
  --cinema-vignette: radial-gradient(ellipse at 45% 50%, transparent 28%, rgba(8, 4, 0, 0.75) 100%);
  --bokeh-color: color-mix(in srgb, #e4b060 60%, #c06e32);
  --bokeh-opacity: 0.24;
  --foliage-color: color-mix(in srgb, #c06e32 55%, #8a6a3e 30%);
  --pollen-color: color-mix(in srgb, #e4b060 70%, #ffcc88);
  color-scheme: dark;
}

/* Winter: Raureif, Wacholder, kaltes Silberlicht */
html[data-theme="winter"] {
  --bg: #090e14;
  --bg-elevated: #101820;
  --surface: rgba(16, 24, 32, 0.76);
  --card: rgba(18, 28, 36, 0.84);
  --card-solid: #121c26;
  --text: #e8f0f4;
  --muted: #7e94a0;
  --primary: #6e92a0;
  --highlight: #c8d8e0;
  --gold: #b8ae90;
  --accent: #5a7e88;
  --glow: rgba(110, 146, 160, 0.28);
  --glow-gold: rgba(200, 216, 224, 0.14);
  --overlay:
    linear-gradient(160deg, rgba(8, 12, 18, 0.94) 0%, rgba(28, 40, 48, 0.45) 45%, rgba(10, 14, 18, 0.9) 100%),
    radial-gradient(700px 400px at 50% 0%, rgba(200, 220, 230, 0.12), transparent 50%);
  --btn-grad: linear-gradient(145deg, #c8d8e0 0%, #6e92a0 50%, #3a5a68 100%);
  --atmosphere-image:
    radial-gradient(ellipse 80% 40% at 50% -5%, rgba(210, 225, 235, 0.28), transparent 55%),
    linear-gradient(170deg, rgba(10, 16, 24, 0.55) 0%, rgba(21, 32, 40, 0.3) 45%, rgba(12, 18, 24, 0.55) 100%),
    url("/assets/images/bg-winter.jpg");
  --brand-ring: color-mix(in srgb, #c8d8e0 55%, #6e92a0);
  --shadow-card: 0 28px 64px rgba(0, 4, 10, 0.6);
  --neu-field: #121a22;
  --neu-inset-dark: #060a0e;
  --neu-inset-light: #22303a;
  --neu-raise-dark: #0c1218;
  --neu-raise-light: #24323c;
  --cinema-filter: saturate(0.75) contrast(1.12) brightness(0.9) hue-rotate(8deg);
  --cinema-grade:
    radial-gradient(1000px 400px at 50% -5%, rgba(220, 235, 245, 0.22), transparent 50%),
    radial-gradient(600px 400px at 20% 80%, rgba(60, 100, 90, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 30%, rgba(4, 8, 12, 0.65));
  --cinema-vignette: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(2, 6, 10, 0.78) 100%);
  --bokeh-color: color-mix(in srgb, #c8d8e0 80%, white);
  --bokeh-opacity: 0.3;
  --foliage-color: color-mix(in srgb, #5a7e88 50%, #b8ae90 25%);
  --pollen-color: color-mix(in srgb, #c8d8e0 90%, white);
  color-scheme: dark;
}

/* —— Besonderes & Luxus —— */

/* Goldblatt: schwarzer Samt, Champagner, Präzision */
html[data-theme="goldleaf"] {
  --bg: #080706;
  --bg-elevated: #12100e;
  --surface: rgba(18, 16, 14, 0.82);
  --card: rgba(22, 20, 16, 0.88);
  --card-solid: #141210;
  --text: #f3e6c8;
  --muted: #9e9078;
  --primary: #d4b06a;
  --highlight: #f2e0b0;
  --gold: #e8c878;
  --accent: #b89450;
  --glow: rgba(212, 176, 106, 0.32);
  --glow-gold: rgba(242, 224, 176, 0.28);
  --overlay:
    linear-gradient(135deg, rgba(6, 5, 4, 0.96) 0%, rgba(28, 22, 12, 0.5) 42%, rgba(6, 5, 4, 0.94) 100%),
    radial-gradient(500px 400px at 70% 30%, rgba(212, 176, 106, 0.14), transparent 55%);
  --btn-grad: linear-gradient(145deg, #f2e0b0 0%, #d4b06a 45%, #7a5a28 100%);
  --atmosphere-image:
    radial-gradient(ellipse 50% 45% at 65% 35%, rgba(180, 140, 70, 0.18), transparent 60%),
    linear-gradient(155deg, rgba(8, 7, 6, 0.55) 0%, rgba(22, 18, 12, 0.3) 40%, rgba(12, 10, 8, 0.55) 100%),
    url("/assets/images/bg-goldleaf.jpg");
  --brand-ring: color-mix(in srgb, #e8c878 85%, white 10%);
  --shadow-card: 0 32px 72px rgba(0, 0, 0, 0.7);
  --neu-field: #12100e;
  --neu-inset-dark: #040302;
  --neu-inset-light: #28241c;
  --neu-raise-dark: #0a0806;
  --neu-raise-light: #2a261e;
  --cinema-filter: saturate(0.95) contrast(1.18) brightness(0.78);
  --cinema-grade:
    radial-gradient(600px 450px at 68% 28%, rgba(212, 176, 106, 0.25), transparent 50%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 35%, rgba(0, 0, 0, 0.75));
  --cinema-vignette: radial-gradient(ellipse at 50% 40%, transparent 22%, rgba(0, 0, 0, 0.82) 100%);
  --bokeh-color: color-mix(in srgb, #f2e0b0 75%, white);
  --bokeh-opacity: 0.2;
  --foliage-color: color-mix(in srgb, #d4b06a 70%, #080706 20%);
  --pollen-color: color-mix(in srgb, #f2e0b0 80%, white);
  color-scheme: dark;
}

/* Smaragdvelvet: Flaschengrün, plüschig, dezentes Metall */
html[data-theme="velvet"] {
  --bg: #04110c;
  --bg-elevated: #0a1e16;
  --surface: rgba(8, 28, 20, 0.78);
  --card: rgba(10, 34, 24, 0.86);
  --card-solid: #0c241a;
  --text: #e6f4ec;
  --muted: #7ea898;
  --primary: #1a6a4a;
  --highlight: #5ecf98;
  --gold: #c4a46a;
  --accent: #248a5e;
  --glow: rgba(26, 106, 74, 0.4);
  --glow-gold: rgba(196, 164, 106, 0.16);
  --overlay:
    linear-gradient(125deg, rgba(2, 12, 8, 0.94) 0%, rgba(10, 40, 28, 0.5) 45%, rgba(2, 10, 8, 0.92) 100%),
    radial-gradient(600px 450px at 40% 40%, rgba(26, 106, 74, 0.25), transparent 55%);
  --btn-grad: linear-gradient(145deg, #c4a46a 0%, #248a5e 42%, #1a6a4a 100%);
  --atmosphere-image:
    radial-gradient(ellipse 55% 50% at 40% 45%, rgba(20, 90, 60, 0.3), transparent 60%),
    linear-gradient(160deg, rgba(4, 17, 12, 0.5) 0%, rgba(12, 40, 28, 0.28) 40%, rgba(6, 24, 16, 0.55) 100%),
    url("/assets/images/bg-velvet.jpg");
  --brand-ring: color-mix(in srgb, #5ecf98 40%, #c4a46a 40%);
  --shadow-card: 0 30px 70px rgba(0, 8, 4, 0.65);
  --neu-field: #0a1e16;
  --neu-inset-dark: #020c08;
  --neu-inset-light: #18382a;
  --neu-raise-dark: #061410;
  --neu-raise-light: #1a3c2c;
  --cinema-filter: saturate(1.05) contrast(1.14) brightness(0.8);
  --cinema-grade:
    radial-gradient(700px 500px at 38% 42%, rgba(26, 106, 74, 0.35), transparent 52%),
    radial-gradient(400px 300px at 80% 15%, rgba(196, 164, 106, 0.1), transparent 50%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 30%, rgba(0, 8, 4, 0.7));
  --cinema-vignette: radial-gradient(ellipse at 45% 45%, transparent 25%, rgba(0, 6, 4, 0.8) 100%);
  --bokeh-color: color-mix(in srgb, #5ecf98 45%, #c4a46a 30%);
  --bokeh-opacity: 0.14;
  --foliage-color: color-mix(in srgb, #1a6a4a 65%, #5ecf98 20%);
  --pollen-color: color-mix(in srgb, #5ecf98 40%, white);
  color-scheme: dark;
}

/* Nebelmorgen: desaturiert, weich, Distanz */
html[data-theme="mist"] {
  --bg: #141a17;
  --bg-elevated: #1c2420;
  --surface: rgba(28, 36, 32, 0.68);
  --card: rgba(34, 42, 38, 0.78);
  --card-solid: #202824;
  --text: #e4eae4;
  --muted: #8a968c;
  --primary: #849488;
  --highlight: #c4cec4;
  --gold: #a8a080;
  --accent: #748478;
  --glow: rgba(132, 148, 136, 0.2);
  --glow-gold: rgba(168, 160, 128, 0.12);
  --overlay:
    linear-gradient(160deg, rgba(20, 26, 22, 0.85) 0%, rgba(40, 48, 44, 0.45) 50%, rgba(20, 26, 22, 0.88) 100%);
  --btn-grad: linear-gradient(145deg, #c4cec4 0%, #849488 50%, #4a5a50 100%);
  --atmosphere-image:
    radial-gradient(ellipse 90% 60% at 50% 40%, rgba(160, 170, 160, 0.15), transparent 65%),
    linear-gradient(165deg, rgba(20, 26, 22, 0.5) 0%, rgba(42, 50, 46, 0.28) 45%, rgba(28, 36, 32, 0.5) 100%),
    url("/assets/images/bg-mist.jpg");
  --brand-ring: color-mix(in srgb, #c4cec4 50%, #849488);
  --shadow-card: 0 24px 56px rgba(8, 12, 10, 0.45);
  --neu-field: #1c2420;
  --neu-inset-dark: #0c100e;
  --neu-inset-light: #303834;
  --neu-raise-dark: #141a17;
  --neu-raise-light: #323a36;
  --cinema-filter: saturate(0.55) contrast(0.95) brightness(0.95) blur(0.2px);
  --cinema-grade:
    radial-gradient(1000px 600px at 50% 40%, rgba(180, 190, 180, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(40, 48, 44, 0.35), transparent 40%, rgba(12, 16, 14, 0.5));
  --cinema-vignette: radial-gradient(ellipse at center, transparent 35%, rgba(12, 16, 14, 0.55) 100%);
  --bokeh-color: color-mix(in srgb, #c4cec4 70%, #849488);
  --bokeh-opacity: 0.12;
  --foliage-color: color-mix(in srgb, #849488 70%, #a8a080 15%);
  --pollen-color: color-mix(in srgb, #c4cec4 50%, transparent);
  color-scheme: dark;
}

/* Festlich: Kerzenschein, Beerenrot, Blattgold – gartenfestlich, nicht Weihnachtsklischee */
html[data-theme="festival"] {
  --bg: #120e0c;
  --bg-elevated: #1e1612;
  --surface: rgba(32, 22, 18, 0.78);
  --card: rgba(38, 26, 22, 0.86);
  --card-solid: #241812;
  --text: #f6eee4;
  --muted: #b09888;
  --primary: #b84a3e;
  --highlight: #e89880;
  --gold: #e6c46a;
  --accent: #c86a50;
  --glow: rgba(184, 74, 62, 0.3);
  --glow-gold: rgba(230, 196, 106, 0.28);
  --overlay:
    linear-gradient(135deg, rgba(16, 12, 10, 0.94) 0%, rgba(60, 28, 22, 0.45) 40%, rgba(40, 28, 14, 0.4) 65%, rgba(14, 10, 8, 0.92) 100%),
    radial-gradient(500px 400px at 25% 70%, rgba(230, 196, 106, 0.18), transparent 55%);
  --btn-grad: linear-gradient(145deg, #e6c46a 0%, #b84a3e 48%, #7a2e28 100%);
  --atmosphere-image:
    radial-gradient(ellipse 35% 40% at 22% 70%, rgba(230, 180, 80, 0.28), transparent 55%),
    radial-gradient(ellipse 40% 35% at 75% 25%, rgba(160, 50, 40, 0.18), transparent 55%),
    linear-gradient(158deg, rgba(18, 14, 12, 0.55) 0%, rgba(42, 24, 20, 0.3) 45%, rgba(26, 16, 12, 0.55) 100%),
    url("/assets/images/bg-festival.jpg");
  --brand-ring: color-mix(in srgb, #e6c46a 65%, #b84a3e 25%);
  --neu-field: #1e1612;
  --neu-inset-dark: #0c0806;
  --neu-inset-light: #382820;
  --neu-raise-dark: #120e0a;
  --neu-raise-light: #3a2a22;
  --cinema-filter: saturate(1.18) contrast(1.1) brightness(0.88);
  --cinema-grade:
    radial-gradient(500px 400px at 22% 72%, rgba(230, 196, 106, 0.4), transparent 48%),
    radial-gradient(600px 400px at 78% 20%, rgba(184, 74, 62, 0.22), transparent 52%),
    linear-gradient(190deg, rgba(0, 0, 0, 0.45), transparent 35%, rgba(12, 6, 4, 0.6));
  --cinema-vignette: radial-gradient(ellipse at 40% 55%, transparent 28%, rgba(6, 2, 0, 0.75) 100%);
  --bokeh-color: color-mix(in srgb, #e6c46a 70%, #e89880);
  --bokeh-opacity: 0.34;
  --foliage-color: color-mix(in srgb, #b84a3e 40%, #e6c46a 35%);
  --pollen-color: color-mix(in srgb, #e6c46a 80%, white);
  color-scheme: dark;
}

/* Porzellan: kühles Mineralweiß, Seladon, feines Messing – Pavillon-Ästhetik */
html[data-theme="porcelain"] {
  --bg: #eef2ef;
  --bg-elevated: #f9fbf9;
  --surface: rgba(255, 255, 255, 0.78);
  --card: rgba(255, 255, 255, 0.94);
  --card-solid: #ffffff;
  --text: #1a2820;
  --muted: #647870;
  --primary: #4e7260;
  --highlight: #355848;
  --gold: #9a8650;
  --accent: #5e8270;
  --danger: #b84848;
  --glow: rgba(78, 114, 96, 0.1);
  --glow-gold: rgba(154, 134, 80, 0.12);
  --overlay:
    linear-gradient(160deg, rgba(255, 255, 255, 0.7) 0%, rgba(236, 242, 238, 0.35) 50%, rgba(210, 224, 218, 0.4) 100%);
  --btn-grad: linear-gradient(145deg, #d0dcc8 0%, #5e8270 48%, #4e7260 100%);
  --atmosphere-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 35%),
    linear-gradient(165deg, rgba(244, 247, 245, 0.35) 0%, rgba(226, 235, 230, 0.2) 48%, rgba(208, 221, 214, 0.3) 100%),
    url("/assets/images/bg-porcelain.jpg");
  --brand-ring: color-mix(in srgb, #4e7260 45%, #9a8650 35%);
  --shadow-card: 0 14px 36px rgba(30, 50, 40, 0.08);
  --border-soft: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  --neu-field: #e2eae4;
  --neu-inset-dark: #c0cec6;
  --neu-inset-light: #ffffff;
  --neu-raise-dark: #d0dcd4;
  --neu-raise-light: #ffffff;
  --cinema-filter: saturate(0.85) contrast(1.02) brightness(1.1);
  --cinema-grade:
    radial-gradient(900px 500px at 50% 0%, rgba(255, 255, 255, 0.65), transparent 50%),
    linear-gradient(180deg, transparent 60%, rgba(180, 200, 190, 0.15));
  --cinema-vignette: radial-gradient(ellipse at center, transparent 58%, rgba(150, 170, 160, 0.15) 100%);
  --bokeh-color: color-mix(in srgb, #9a8650 35%, white);
  --bokeh-opacity: 0.06;
  --foliage-color: color-mix(in srgb, #4e7260 75%, #9a8650 15%);
  --pollen-color: color-mix(in srgb, #4e7260 25%, white);
  color-scheme: light;
}