/* =========================================================
   Die zehn Themes

   Jedes Theme überschreibt ausschliesslich Tokens aus base.css.
   Kein Theme definiert eigene Bausteine, eigene Abstände oder
   eigene Schriftgrössen — Layout, Hierarchie und Bedienung
   bleiben überall identisch. Nur die Atmosphäre wechselt.

   Reihenfolge der Tokens je Theme:
   Flächen · Linien · Schrift · Akzent · Behandlung · Atmosphäre
   ========================================================= */

/* ---------------------------------------------------------
   1 · PURE — heller Standard, zeitlos und teuer
   --------------------------------------------------------- */
[data-theme="pure"]{
  --bg:#faf9f7; --bg2:#ffffff; --bg3:#f2f1ee; --bg4:#e8e6e2;
  --line:rgba(23,23,25,.07); --line2:rgba(23,23,25,.14);
  --txt:#17171a; --txt2:#45454a; --muted:#707077; --muted2:#8e8e95;
  --accent:#17171a; --accent2:#8a8a92; --accent-soft:#45454a; --on-accent:#faf9f7;
  --ok:#3f7a4d; --warn:#8a6a2f; --err:#a63a32;
  --ok-bg:rgba(63,122,77,.1); --err-bg:rgba(166,58,50,.08);
  --glass:rgba(23,23,25,.035); --glass-strong:rgba(255,255,255,.82);
  --scrim:rgba(250,249,247,.92); --scrim-soft:rgba(250,249,247,.75);
  --on-scrim:#17171a; --header-bg:rgba(250,249,247,.78);
  --overlay:rgba(23,23,25,.4);
  --skel1:#f2f1ee; --skel2:#e8e6e2; --scroll-thumb:#d5d3ce;
  --shadow:0 1px 2px rgba(23,23,25,.05), 0 18px 50px rgba(23,23,25,.09);
  --shadow-sm:0 1px 2px rgba(23,23,25,.04), 0 6px 18px rgba(23,23,25,.05);
  --card-ring:0 0 0 1px rgba(23,23,25,.08);
  /* Pure bleibt das ruhigste Theme — aber nicht tot: ein sehr
     helles Lichtfeld wandert langsam durch den Hintergrund. */
  --bg-layer:
    radial-gradient(760px 460px at 78% 6%, rgba(23,23,25,.045), transparent 64%),
    radial-gradient(620px 380px at 14% 46%, rgba(23,23,25,.03), transparent 62%);
  --bg-drift:bgDrift ease-in-out infinite; --bg-drift-dur:44s;
  --fx-layer:linear-gradient(102deg, transparent 38%, rgba(23,23,25,.022) 50%, transparent 62%);
  --fx-anim:fxShimmer ease-in-out infinite alternate; --fx-dur:28s;
  color-scheme:light;
}

/* ---------------------------------------------------------
   2 · OBSIDIAN — dunkle Lounge, Graphit und Silber
   --------------------------------------------------------- */
[data-theme="obsidian"]{
  --bg:#08080a; --bg2:#121215; --bg3:#191a1e; --bg4:#232429;
  --line:rgba(226,228,233,.07); --line2:rgba(226,228,233,.14);
  --txt:#e9ebef; --txt2:#b7bac1; --muted:#7d818a; --muted2:#5f636b;
  --accent:#e9ebef; --accent2:#9aa2ae; --accent-soft:#c9ced6; --on-accent:#08080a;
  --glass:rgba(226,228,233,.045); --glass-strong:rgba(226,228,233,.11);
  --scrim:rgba(8,8,10,.92); --header-bg:rgba(8,8,10,.7);
  --skel1:#17181c; --skel2:#232429; --scroll-thumb:#2b2d33;
  --shadow:0 1px 2px rgba(0,0,0,.55), 0 28px 80px rgba(0,0,0,.55);
  /* Kontrollierte Reflexion statt Leuchten */
  --card-ring:0 0 0 1px rgba(226,228,233,.09), inset 0 1px 0 rgba(226,228,233,.06);
  --bg-layer:
    radial-gradient(1200px 700px at 78% -10%, rgba(154,162,174,.07), transparent 62%),
    linear-gradient(180deg, rgba(226,228,233,.018), transparent 40%);
  --bg-drift:bgDrift linear infinite; --bg-drift-dur:58s;
  /* Kontrollierter Reflex, der langsam durchs Bild wandert */
  --fx-layer:linear-gradient(104deg, transparent 42%, rgba(226,228,233,.028) 50%, transparent 58%);
  --fx-anim:fxShimmer ease-in-out infinite alternate; --fx-dur:26s;
}

/* ---------------------------------------------------------
   3 · SAKURA — warmes Elfenbein, gedämpftes Rosé
   --------------------------------------------------------- */
[data-theme="sakura"]{
  --bg:#fbf7f5; --bg2:#ffffff; --bg3:#f6efec; --bg4:#efe3df;
  --line:rgba(74,49,48,.08); --line2:rgba(74,49,48,.16);
  --txt:#2e2223; --txt2:#5c4a4a; --muted:#7d6c6a; --muted2:#988886;
  --accent:#2e2223; --accent2:#b8737f; --accent-soft:#c98f99; --on-accent:#fbf7f5;
  --ok:#5c7f5e; --warn:#9c7a3c; --err:#b0524c;
  --ok-bg:rgba(92,127,94,.1); --err-bg:rgba(176,82,76,.08);
  --glass:rgba(184,115,127,.05); --glass-strong:rgba(255,255,255,.84);
  --scrim:rgba(251,247,245,.92); --scrim-soft:rgba(251,247,245,.75);
  --on-scrim:#2e2223; --header-bg:rgba(251,247,245,.8);
  --overlay:rgba(46,34,35,.38);
  --skel1:#f6efec; --skel2:#efe3df; --scroll-thumb:#e0cdc9;
  --shadow:0 1px 2px rgba(74,49,48,.05), 0 18px 50px rgba(74,49,48,.1);
  --shadow-sm:0 1px 2px rgba(74,49,48,.04), 0 6px 18px rgba(74,49,48,.06);
  --card-ring:0 0 0 1px rgba(74,49,48,.09);
  /* Abstrakte Blütenschatten, keine gezeichneten Blumen */
  --bg-layer:
    radial-gradient(520px 320px at 12% 8%, rgba(200,143,153,.13), transparent 66%),
    radial-gradient(420px 260px at 88% 26%, rgba(214,178,168,.11), transparent 64%),
    radial-gradient(600px 380px at 60% 96%, rgba(200,143,153,.07), transparent 68%);
  color-scheme:light;
  --bg-drift:bgDrift ease-in-out infinite; --bg-drift-dur:52s;
  /* Blütenblätter als weiche Punkte unterschiedlicher Grösse — keine Zeichnung */
  --fx-layer:
    radial-gradient(7px 4px at 12% 14%, rgba(198,132,145,.20), transparent 70%),
    radial-gradient(5px 3px at 34% 42%, rgba(206,150,160,.16), transparent 70%),
    radial-gradient(8px 5px at 58% 8%,  rgba(198,132,145,.14), transparent 70%),
    radial-gradient(4px 3px at 76% 56%, rgba(214,168,172,.18), transparent 70%),
    radial-gradient(6px 4px at 88% 24%, rgba(198,132,145,.13), transparent 70%),
    radial-gradient(5px 3px at 22% 74%, rgba(206,150,160,.15), transparent 70%),
    radial-gradient(7px 4px at 66% 88%, rgba(198,132,145,.11), transparent 70%);
  --fx-size:900px 700px;
  --fx-anim:fxFall linear infinite; --fx-dur:34s;
}

/* ---------------------------------------------------------
   4 · TOKYO NIGHT — Marine, gedämpftes Violett, wenig Neon
   --------------------------------------------------------- */
[data-theme="tokyo"]{
  --bg:#0a0c14; --bg2:#12151f; --bg3:#181c29; --bg4:#222636;
  --line:rgba(196,205,229,.08); --line2:rgba(196,205,229,.16);
  --txt:#e6e9f2; --txt2:#b0b6c9; --muted:#7a819a; --muted2:#5c6379;
  --accent:#e6e9f2; --accent2:#8f7ad6; --accent-soft:#a99ae0; --on-accent:#0a0c14;
  --glass:rgba(143,122,214,.06); --glass-strong:rgba(230,233,242,.11);
  --scrim:rgba(10,12,20,.92); --header-bg:rgba(10,12,20,.72);
  --skel1:#161a26; --skel2:#222636; --scroll-thumb:#2c3145;
  --card-ring:0 0 0 1px rgba(196,205,229,.09);
  /* Unscharfe Architektur und Stadtlicht — kein Neon, kein Raster */
  --bg-layer:
    radial-gradient(760px 420px at 82% 4%, rgba(143,122,214,.14), transparent 64%),
    radial-gradient(560px 300px at 14% 22%, rgba(74,124,196,.11), transparent 62%),
    radial-gradient(420px 240px at 46% 98%, rgba(214,122,168,.07), transparent 62%),
    linear-gradient(180deg, rgba(143,122,214,.035), transparent 34%);
  --bg-drift:bgBreathe ease-in-out infinite; --bg-drift-dur:19s;
  /* Ferne, unscharfe Fensterlichter — kein Neon, kein Raster */
  --fx-layer:
    radial-gradient(2px 2px at 16% 62%, rgba(168,150,240,.30), transparent 100%),
    radial-gradient(2px 2px at 28% 78%, rgba(120,180,240,.22), transparent 100%),
    radial-gradient(2px 2px at 44% 68%, rgba(214,140,190,.20), transparent 100%),
    radial-gradient(2px 2px at 62% 84%, rgba(168,150,240,.26), transparent 100%),
    radial-gradient(2px 2px at 78% 72%, rgba(120,180,240,.18), transparent 100%),
    radial-gradient(2px 2px at 92% 88%, rgba(168,150,240,.22), transparent 100%);
  --fx-size:1100px 900px;
  --fx-anim:fxShimmer ease-in-out infinite alternate; --fx-dur:30s;
}

/* ---------------------------------------------------------
   5 · COSMOS — Tiefraum, Indigo, sehr feine Sterne
   --------------------------------------------------------- */
[data-theme="cosmos"]{
  --bg:#07080f; --bg2:#101423; --bg3:#161b2e; --bg4:#20263d;
  --line:rgba(198,206,235,.08); --line2:rgba(198,206,235,.15);
  --txt:#e7eaf4; --txt2:#b2b8cc; --muted:#7b8199; --muted2:#5c6279;
  --accent:#e7eaf4; --accent2:#7f6fd1; --accent-soft:#9d90de; --on-accent:#07080f;
  --glass:rgba(127,111,209,.06); --glass-strong:rgba(231,234,244,.1);
  --scrim:rgba(7,8,15,.93); --header-bg:rgba(7,8,15,.72);
  --skel1:#141930; --skel2:#20263d; --scroll-thumb:#2a3050;
  --card-ring:0 0 0 1px rgba(198,206,235,.09);
  /* Nebel plus zwei feine Sternenebenen aus Punktverläufen */
  --bg-layer:
    radial-gradient(1px 1px at 18% 22%, rgba(231,234,244,.55), transparent 100%),
    radial-gradient(1px 1px at 62% 12%, rgba(231,234,244,.4), transparent 100%),
    radial-gradient(1px 1px at 84% 46%, rgba(231,234,244,.5), transparent 100%),
    radial-gradient(1px 1px at 32% 68%, rgba(231,234,244,.35), transparent 100%),
    radial-gradient(1px 1px at 72% 82%, rgba(231,234,244,.45), transparent 100%),
    radial-gradient(1px 1px at 8% 88%, rgba(231,234,244,.3), transparent 100%),
    radial-gradient(900px 520px at 74% 10%, rgba(127,111,209,.15), transparent 64%),
    radial-gradient(700px 420px at 16% 78%, rgba(70,96,180,.11), transparent 62%);
  --bg-drift:bgDrift linear infinite; --bg-drift-dur:56s;
  /* Zweite, dichtere Sternenebene — zieht schneller als die erste (Parallaxe) */
  --fx-layer:
    radial-gradient(1px 1px at 9% 34%,  rgba(231,234,244,.60), transparent 100%),
    radial-gradient(1px 1px at 24% 58%, rgba(231,234,244,.42), transparent 100%),
    radial-gradient(1px 1px at 41% 18%, rgba(231,234,244,.52), transparent 100%),
    radial-gradient(1px 1px at 53% 74%, rgba(200,206,255,.38), transparent 100%),
    radial-gradient(1px 1px at 67% 30%, rgba(231,234,244,.55), transparent 100%),
    radial-gradient(1px 1px at 81% 62%, rgba(231,234,244,.35), transparent 100%),
    radial-gradient(1px 1px at 94% 20%, rgba(200,206,255,.48), transparent 100%),
    radial-gradient(1px 1px at 15% 88%, rgba(231,234,244,.40), transparent 100%);
  --fx-size:760px 620px;
  --fx-anim:fxPan linear infinite; --fx-dur:44s;
}

/* ---------------------------------------------------------
   6 · OCEAN — Marine, Meerblau, Türkis als Akzent
   --------------------------------------------------------- */
[data-theme="ocean"]{
  --bg:#f6f9fb; --bg2:#ffffff; --bg3:#eaf1f6; --bg4:#dae6ee;
  --line:rgba(16,45,66,.08); --line2:rgba(16,45,66,.16);
  --txt:#0f2536; --txt2:#3c5567; --muted:#5e7382; --muted2:#7f8e9a;
  --accent:#0f2536; --accent2:#2b7f9e; --accent-soft:#4e9cb8; --on-accent:#f6f9fb;
  --ok:#2f7a63; --warn:#8a6a2f; --err:#a8443e;
  --ok-bg:rgba(47,122,99,.1); --err-bg:rgba(168,68,62,.08);
  --glass:rgba(43,127,158,.055); --glass-strong:rgba(255,255,255,.84);
  --scrim:rgba(246,249,251,.92); --scrim-soft:rgba(246,249,251,.75);
  --on-scrim:#0f2536; --header-bg:rgba(246,249,251,.8);
  --overlay:rgba(15,37,54,.4);
  --skel1:#eaf1f6; --skel2:#dae6ee; --scroll-thumb:#c3d6e2;
  --shadow:0 1px 2px rgba(16,45,66,.05), 0 18px 50px rgba(16,45,66,.1);
  --shadow-sm:0 1px 2px rgba(16,45,66,.04), 0 6px 18px rgba(16,45,66,.06);
  --card-ring:0 0 0 1px rgba(16,45,66,.09);
  /* Lichtbrechung statt Wellen */
  --bg-layer:
    radial-gradient(720px 420px at 84% 6%, rgba(43,127,158,.13), transparent 64%),
    radial-gradient(560px 340px at 10% 34%, rgba(96,178,190,.1), transparent 62%),
    radial-gradient(640px 400px at 52% 100%, rgba(43,127,158,.08), transparent 66%);
  color-scheme:light;
  --bg-drift:bgDrift ease-in-out infinite; --bg-drift-dur:48s;
  /* Kaustik: weiche, schräge Lichtbänder wie unter der Wasseroberfläche */
  --fx-layer:
    repeating-linear-gradient(74deg,
      transparent 0 44px, rgba(96,178,205,.055) 44px 60px, transparent 60px 118px),
    repeating-linear-gradient(108deg,
      transparent 0 70px, rgba(43,127,158,.035) 70px 88px, transparent 88px 170px);
  --fx-anim:fxShimmer ease-in-out infinite alternate; --fx-dur:22s;
}

/* ---------------------------------------------------------
   7 · FOREST — Tannengrün, Salbei, warmes Elfenbein
   --------------------------------------------------------- */
[data-theme="forest"]{
  --bg:#0d1210; --bg2:#151b18; --bg3:#1c2320; --bg4:#26302b;
  --line:rgba(225,232,224,.08); --line2:rgba(225,232,224,.15);
  --txt:#e9ede8; --txt2:#b6c0b5; --muted:#7e8a7e; --muted2:#616b61;
  --accent:#e9ede8; --accent2:#7d9c7f; --accent-soft:#9bb59c; --on-accent:#0d1210;
  --ok:#6f9d78; --warn:#a08b52; --err:#bd6058;
  --glass:rgba(125,156,127,.06); --glass-strong:rgba(233,237,232,.11);
  --scrim:rgba(13,18,16,.92); --header-bg:rgba(13,18,16,.72);
  --skel1:#1a211d; --skel2:#26302b; --scroll-thumb:#2e3a33;
  --card-ring:0 0 0 1px rgba(225,232,224,.09);
  /* Blattschatten als weiche, unregelmässige Flächen */
  --bg-layer:
    radial-gradient(680px 400px at 12% 6%, rgba(125,156,127,.11), transparent 62%),
    radial-gradient(520px 320px at 88% 40%, rgba(96,120,98,.09), transparent 62%),
    radial-gradient(760px 420px at 44% 100%, rgba(125,156,127,.07), transparent 66%);
  --bg-drift:bgDrift ease-in-out infinite; --bg-drift-dur:54s;
  /* Weiche Schattenflecken wie Licht, das durch Blätter fällt */
  --fx-layer:
    radial-gradient(120px 70px at 18% 22%, rgba(10,16,12,.20), transparent 72%),
    radial-gradient(90px 55px at 44% 8%,   rgba(10,16,12,.15), transparent 72%),
    radial-gradient(140px 80px at 72% 34%, rgba(10,16,12,.17), transparent 72%),
    radial-gradient(100px 60px at 30% 66%, rgba(10,16,12,.13), transparent 72%),
    radial-gradient(130px 75px at 86% 78%, rgba(10,16,12,.16), transparent 72%);
  --fx-size:820px 640px;
  --fx-anim:fxSway ease-in-out infinite; --fx-dur:17s;
}

/* ---------------------------------------------------------
   8 · HOLOGRAPHIC — Silber, Glas, feine Irisierung
   Der Lichtreflex folgt dem Zeiger (siehe js/core/theme.js)
   --------------------------------------------------------- */
[data-theme="holo"]{
  --bg:#f4f5f8; --bg2:#ffffff; --bg3:#edeff4; --bg4:#e2e5ee;
  --line:rgba(28,32,48,.08); --line2:rgba(28,32,48,.15);
  --txt:#1a1d29; --txt2:#454a5c; --muted:#6a6e7d; --muted2:#878b98;
  --accent:#1a1d29; --accent2:#6f7bd6; --accent-soft:#8b95e0; --on-accent:#f4f5f8;
  --ok:#3f7a5c; --warn:#8a6a2f; --err:#a63a4e;
  --glass:rgba(111,123,214,.05); --glass-strong:rgba(255,255,255,.82);
  --scrim:rgba(244,245,248,.92); --scrim-soft:rgba(244,245,248,.75);
  --on-scrim:#1a1d29; --header-bg:rgba(244,245,248,.78);
  --overlay:rgba(26,29,41,.4);
  --skel1:#edeff4; --skel2:#e2e5ee; --scroll-thumb:#cdd2df;
  --shadow:0 1px 2px rgba(28,32,48,.05), 0 18px 50px rgba(28,32,48,.1);
  --shadow-sm:0 1px 2px rgba(28,32,48,.04), 0 6px 18px rgba(28,32,48,.06);
  --card-ring:0 0 0 1px rgba(28,32,48,.08);
  --bg-layer:
    radial-gradient(680px 420px at 82% 4%, rgba(111,123,214,.09), transparent 62%),
    radial-gradient(520px 320px at 12% 30%, rgba(94,196,214,.07), transparent 62%),
    radial-gradient(600px 360px at 54% 100%, rgba(198,122,190,.06), transparent 64%);
  color-scheme:light;
  --bg-drift:bgDrift ease-in-out infinite; --bg-drift-dur:50s;
  /* Breites Spektralband — die Folie im Licht gedreht */
  --fx-layer:linear-gradient(100deg,
    transparent 30%, rgba(120,200,255,.05) 42%, rgba(168,120,255,.045) 50%,
    rgba(255,140,200,.04) 58%, transparent 70%);
  --fx-anim:fxShimmer ease-in-out infinite alternate; --fx-dur:20s;
}
/* Nur hier: der Reflex, der dem Zeiger folgt. --mx/--my setzt theme.js. */
[data-theme="holo"] .tile,
[data-theme="holo"] .setcard,
[data-theme="holo"] .stat,
[data-theme="holo"] .panel{position:relative;overflow:hidden}
[data-theme="holo"] .tile::after,
[data-theme="holo"] .setcard::after,
[data-theme="holo"] .stat::after,
[data-theme="holo"] .panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  transition:opacity var(--dur-3) var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(120,200,255,.16), rgba(168,120,255,.12) 26%,
    rgba(255,140,200,.09) 44%, transparent 66%);
}
[data-theme="holo"] .tile:hover::after,
[data-theme="holo"] .setcard:hover::after,
[data-theme="holo"] .stat:hover::after,
[data-theme="holo"] .panel:hover::after{opacity:1}

/* ---------------------------------------------------------
   9 · RETRO TCG — Creme, Papier, gedämpftes Rot und Blau
   --------------------------------------------------------- */
[data-theme="retro"]{
  --bg:#f7f3e9; --bg2:#fffdf7; --bg3:#f0ead9; --bg4:#e5dcc6;
  --line:rgba(60,48,30,.1); --line2:rgba(60,48,30,.19);
  --txt:#2b2417; --txt2:#544733; --muted:#776c59; --muted2:#958871;
  --accent:#2b2417; --accent2:#b4443c; --accent-soft:#c96a62; --on-accent:#f7f3e9;
  --ok:#4d7a44; --warn:#9a7526; --err:#b4443c;
  --ok-bg:rgba(77,122,68,.11); --err-bg:rgba(180,68,60,.08);
  --glass:rgba(60,48,30,.04); --glass-strong:rgba(255,253,247,.85);
  --scrim:rgba(247,243,233,.92); --scrim-soft:rgba(247,243,233,.75);
  --on-scrim:#2b2417; --header-bg:rgba(247,243,233,.82);
  --overlay:rgba(43,36,23,.4);
  --skel1:#f0ead9; --skel2:#e5dcc6; --scroll-thumb:#d6c9a9;
  --shadow:0 1px 2px rgba(60,48,30,.06), 0 16px 44px rgba(60,48,30,.1);
  --shadow-sm:0 1px 2px rgba(60,48,30,.05), 0 6px 16px rgba(60,48,30,.06);
  /* Doppelte Fassung als Anspielung auf den Kartenrand */
  --card-ring:0 0 0 1px rgba(60,48,30,.14), 0 0 0 4px rgba(255,253,247,.9);
  /* Papierfaser: sehr feines, unaufdringliches Raster */
  --bg-layer:
    repeating-linear-gradient(0deg, rgba(60,48,30,.017) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(60,48,30,.013) 0 1px, transparent 1px 4px),
    radial-gradient(700px 420px at 84% 6%, rgba(180,68,60,.06), transparent 62%),
    radial-gradient(560px 340px at 10% 40%, rgba(46,86,140,.05), transparent 62%);
  color-scheme:light;
  --bg-drift:bgBreathe ease-in-out infinite; --bg-drift-dur:34s;
}

/* ---------------------------------------------------------
   10 · DRAGON — Schwarz, Burgunder, gedämpftes Champagner-Gold
   --------------------------------------------------------- */
[data-theme="dragon"]{
  --bg:#0a0708; --bg2:#141011; --bg3:#1b1618; --bg4:#251d20;
  --line:rgba(236,225,215,.08); --line2:rgba(236,225,215,.16);
  --txt:#efe7de; --txt2:#c0b3a6; --muted:#8a7d74; --muted2:#685e57;
  --accent:#efe7de; --accent2:#b8934e; --accent-soft:#d2b276; --on-accent:#0a0708;
  --ok:#7d9a6c; --warn:#b8934e; --err:#b4514c;
  --glass:rgba(184,147,78,.055); --glass-strong:rgba(239,231,222,.1);
  --scrim:rgba(10,7,8,.93); --header-bg:rgba(10,7,8,.74);
  --skel1:#191416; --skel2:#251d20; --scroll-thumb:#332629;
  --card-ring:0 0 0 1px rgba(184,147,78,.16);
  /* Schuppenraster, fast unsichtbar, plus Rauch und Goldschimmer */
  --bg-layer:
    repeating-conic-gradient(from 30deg at 50% 50%,
      rgba(236,225,215,.014) 0deg 15deg, transparent 15deg 30deg),
    radial-gradient(820px 460px at 82% 2%, rgba(122,26,34,.15), transparent 62%),
    radial-gradient(600px 360px at 12% 44%, rgba(184,147,78,.08), transparent 62%),
    radial-gradient(700px 400px at 54% 100%, rgba(122,26,34,.09), transparent 66%);
  --bg-layer-size:26px 26px, auto, auto, auto;
  --bg-drift:bgBreathe ease-in-out infinite; --bg-drift-dur:28s;
  /* Aufsteigende Goldfunken, sehr wenige und sehr leise */
  --fx-layer:
    radial-gradient(2px 2px at 14% 78%, rgba(210,178,118,.34), transparent 100%),
    radial-gradient(1px 1px at 29% 54%, rgba(210,178,118,.24), transparent 100%),
    radial-gradient(2px 2px at 46% 86%, rgba(232,206,150,.28), transparent 100%),
    radial-gradient(1px 1px at 61% 40%, rgba(210,178,118,.20), transparent 100%),
    radial-gradient(2px 2px at 77% 70%, rgba(210,178,118,.30), transparent 100%),
    radial-gradient(1px 1px at 90% 48%, rgba(232,206,150,.22), transparent 100%);
  --fx-size:680px 560px;
  --fx-anim:fxRise ease-in-out infinite; --fx-dur:24s;
}

/* =========================================================
   Bewegungsstufen — greifen in jedem Theme
   ========================================================= */
[data-motion="still"]{ --motion:0 }
[data-motion="subtle"]{ --motion:1 }
[data-motion="dynamic"]{ --motion:1.35 }
[data-motion="still"] body::before{ transition:none }
[data-motion="still"] .hero-bg{ transition:none }