/* Designvorlagen. Jede Vorlage setzt dieselben Variablen; neue Vorlage = neuer Block hier + Eintrag in w_vorlagen()
   (lib/kern.php) + Vorschaubild (python3 tools/vorschaubilder.py). Kontraste: Fließtext ≥ 7:1, Akzenttext ≥ 4.5:1. */

/* ---------------------------------------------------------------- Tannengrün (Standard) */
:root, [data-vorlage="tanne"] {
  --banner-knopf: #e9c37a; --banner-knopf-text: #1c2822;
  --farbschema: light;
  --grund: #f5f0e6; --flaeche: #fffdf8; --flaeche-2: #efe8da; --text: #1c2822; --leise: #56645c; --linie: #e2d9c7;
  --haupt: #1f4d3a; --haupt-hover: #163a2c; --haupt-text: #ffffff;
  --akzent: #c9973f; --akzent-text: #865f1c; --link: #1f4d3a; --fokus: #c9973f;
  --ok: #2c7a4b; --fehler: #a8323e; --eingabe-grund: #fffefb; --eingabe-rand: #d6ccb8;
  --kopf-grund: rgb(255 253 248 / .86); --kopf-text: #1c2822; --kopf-leise: #56645c; --kopf-linie: #e2d9c7;
  --marke-grund: #1f4d3a; --marke-box: #a8323e; --marke-deckel: #c23a47; --marke-band: #e9c37a;
  --banner-grund: #163a2c; --banner-text: #fbf6ea; --banner-leise: #cfdccf; --banner-akzent: #e9c37a;
  --banner-muster: radial-gradient(circle at 88% 12%, rgb(233 195 122 / .28), transparent 38%),
                   radial-gradient(circle at 0% 100%, rgb(255 255 255 / .07), transparent 40%);
  --schnee-farbe: #ffffff; --schnee-deckkraft: .9;
}

/* ---------------------------------------------------------------- Winternacht */
[data-vorlage="winternacht"] {
  --banner-knopf: #f2d27a; --banner-knopf-text: #0c1324;
  --farbschema: dark;
  --grund: #0c1324; --flaeche: #141e37; --flaeche-2: #1b2745; --text: #eaeefa; --leise: #a5b0cc; --linie: #263355;
  --haupt: #d7e0f7; --haupt-hover: #f1f5ff; --haupt-text: #0c1324;
  --akzent: #f2d27a; --akzent-text: #f2d27a; --link: #b9c9f5; --fokus: #f2d27a;
  --ok: #79d4a0; --fehler: #ff8a95; --eingabe-grund: #0f1830; --eingabe-rand: #2c3a60;
  --kopf-grund: rgb(12 19 36 / .82); --kopf-text: #eaeefa; --kopf-leise: #a5b0cc; --kopf-linie: #1e2a48;
  --marke-grund: #24345e; --marke-box: #d7e0f7; --marke-deckel: #ffffff; --marke-band: #f2d27a;
  --banner-grund: linear-gradient(180deg, #070c19, #121d3a); --banner-text: #f2f5ff; --banner-leise: #b6c1dc; --banner-akzent: #f2d27a;
  --banner-muster: radial-gradient(circle at 82% 22%, rgb(242 210 122 / .22) 0 46px, rgb(242 210 122 / .08) 47px, transparent 140px),
                   radial-gradient(1.2px 1.2px at 30px 40px, #fff 50%, transparent 55%) 0 0 / 180px 150px,
                   radial-gradient(1px 1px at 120px 90px, #fff 50%, transparent 55%) 0 0 / 180px 150px,
                   radial-gradient(1.6px 1.6px at 70px 130px, #fff8d8 50%, transparent 55%) 0 0 / 230px 170px,
                   radial-gradient(1px 1px at 160px 20px, #c9d6ff 50%, transparent 55%) 0 0 / 210px 190px;
  --schatten: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -14px rgb(0 0 0 / .7);
  --schnee-farbe: #ffffff; --schnee-deckkraft: .9;
}

/* ---------------------------------------------------------------- Zuckerstange */
[data-vorlage="zuckerstange"] {
  --banner-knopf: #ffffff; --banner-knopf-text: #9c1118;
  --farbschema: light;
  --grund: #fff6f4; --flaeche: #ffffff; --flaeche-2: #fdeceb; --text: #2a1719; --leise: #6c5356; --linie: #f2d7d6;
  --haupt: #b8141c; --haupt-hover: #970f16; --haupt-text: #ffffff;
  --akzent: #e3343c; --akzent-text: #b01a22; --link: #b01a22; --fokus: #e3343c;
  --ok: #1f7a4d; --fehler: #b8141c; --eingabe-grund: #ffffff; --eingabe-rand: #ebc9c8;
  --kopf-grund: rgb(255 255 255 / .9); --kopf-text: #2a1719; --kopf-leise: #6c5356; --kopf-linie: #f2d7d6;
  --marke-grund: #b8141c; --marke-box: #ffffff; --marke-deckel: #ffe3e3; --marke-band: #1f7a4d;
  --banner-grund: #b8141c; --banner-text: #ffffff; --banner-leise: #ffe0e0; --banner-akzent: #ffffff;
  --banner-muster: repeating-linear-gradient(-45deg, rgb(255 255 255 / .11) 0 22px, transparent 22px 44px),
                   radial-gradient(circle at 90% 0%, rgb(255 255 255 / .18), transparent 45%);
  --schnee-farbe: #ffd4d6; --schnee-deckkraft: .9;
}

/* ---------------------------------------------------------------- Lebkuchen */
[data-vorlage="lebkuchen"] {
  --banner-knopf: #ffd9a3; --banner-knopf-text: #33200f;
  --farbschema: light;
  --grund: #f3e5d0; --flaeche: #fffaf1; --flaeche-2: #f0e0c8; --text: #33200f; --leise: #6e5440; --linie: #e3cdb0;
  --haupt: #7a4421; --haupt-hover: #5f331a; --haupt-text: #fff8ee;
  --akzent: #c46d26; --akzent-text: #95501a; --link: #7a4421; --fokus: #c46d26;
  --ok: #3f7a35; --fehler: #a83226; --eingabe-grund: #fffdf8; --eingabe-rand: #d9bf9d;
  --kopf-grund: rgb(255 250 241 / .88); --kopf-text: #33200f; --kopf-leise: #6e5440; --kopf-linie: #e3cdb0;
  --marke-grund: #7a4421; --marke-box: #c46d26; --marke-deckel: #d88a46; --marke-band: #fff4e2;
  --banner-grund: linear-gradient(180deg, #6a3a1d, #7d4724); --banner-text: #fff6e9; --banner-leise: #f0d9bf; --banner-akzent: #ffd9a3;
  --banner-muster: radial-gradient(circle at 50% 100%, #f3e5d0 0 10px, transparent 10.5px) 0 100% / 30px 14px repeat-x,
                   radial-gradient(circle at 88% 10%, rgb(255 217 163 / .22), transparent 42%);
  --schnee-farbe: #ffffff; --schnee-deckkraft: .9;
}

/* ---------------------------------------------------------------- Schneeweiß */
[data-vorlage="schneeweiss"] {
  --banner-knopf: #23506f; --banner-knopf-text: #ffffff;
  --farbschema: light;
  --grund: #f3f6f9; --flaeche: #ffffff; --flaeche-2: #eaf0f5; --text: #15212b; --leise: #586876; --linie: #dbe3ea;
  --haupt: #23506f; --haupt-hover: #1a3d56; --haupt-text: #ffffff;
  --akzent: #4b8fbd; --akzent-text: #2e6d98; --link: #23506f; --fokus: #4b8fbd;
  --ok: #2b7a52; --fehler: #b03a3a; --eingabe-grund: #ffffff; --eingabe-rand: #cfd9e2;
  --kopf-grund: rgb(255 255 255 / .85); --kopf-text: #15212b; --kopf-leise: #586876; --kopf-linie: #dbe3ea;
  --marke-grund: #e3eef6; --marke-box: #23506f; --marke-deckel: #2e6d98; --marke-band: #ffffff;
  --banner-grund: linear-gradient(180deg, #e6eff6, #f3f7fa); --banner-text: #15212b; --banner-leise: #4f6170; --banner-akzent: #2e6d98;
  --banner-muster: radial-gradient(circle at 85% 30%, rgb(75 143 189 / .16), transparent 42%),
                   radial-gradient(circle at 0% 100%, rgb(255 255 255 / .8), transparent 45%);
  --schnee-farbe: #8fb6d3; --schnee-deckkraft: .9;
}
[data-vorlage="schneeweiss"] .banner .chip, [data-vorlage="schneeweiss"] .held .chip { background: rgb(255 255 255 / .7); border-color: #d2dee8; }
[data-vorlage="schneeweiss"] .knopf-hell { --k-grund: #ffffff; --k-rand: #cfd9e2; }
[data-vorlage="schneeweiss"] .banner-hinweis { background: rgb(255 255 255 / .6); }

/* ---------------------------------------------------------------- Goldglanz */
[data-vorlage="goldglanz"] {
  --banner-knopf: #ecc874; --banner-knopf-text: #16130d;
  --farbschema: dark;
  --grund: #0f0e0c; --flaeche: #191714; --flaeche-2: #221f1a; --text: #f4eee1; --leise: #b8ad97; --linie: #322d24;
  --haupt: #d9b45e; --haupt-hover: #ecc874; --haupt-text: #16130d;
  --akzent: #e3c27a; --akzent-text: #e3c27a; --link: #ecc874; --fokus: #e3c27a;
  --ok: #8fd19e; --fehler: #ff8f84; --eingabe-grund: #13110e; --eingabe-rand: #3a3328;
  --kopf-grund: rgb(15 14 12 / .82); --kopf-text: #f4eee1; --kopf-leise: #b8ad97; --kopf-linie: #26221b;
  --marke-grund: #26221b; --marke-box: #d9b45e; --marke-deckel: #ecc874; --marke-band: #16130d;
  --banner-grund: radial-gradient(120% 140% at 85% 0%, #2a2216 0%, #0b0a08 60%); --banner-text: #fbf5e7; --banner-leise: #c9bea6; --banner-akzent: #ecc874;
  --banner-muster: linear-gradient(115deg, transparent 0 62%, rgb(236 200 116 / .22) 62% 62.25%, transparent 62.5%),
                   linear-gradient(115deg, transparent 0 70%, rgb(236 200 116 / .14) 70% 70.2%, transparent 70.4%),
                   radial-gradient(circle at 85% 0%, rgb(236 200 116 / .12), transparent 50%);
  --schatten: 0 1px 2px rgb(0 0 0 / .4), 0 12px 30px -14px rgb(0 0 0 / .8);
  --schnee-farbe: #ecc874; --schnee-deckkraft: .9;
}

/* ---------------------------------------------------------------- Muster für die Auswahl (Kacheln) */
.vk-muster[data-vorschau="tanne"] { background: radial-gradient(circle at 80% 25%, #e9c37a 0 7px, transparent 8px), linear-gradient(180deg, #163a2c 0 58%, #f5f0e6 58%); }
.vk-muster[data-vorschau="winternacht"] { background: radial-gradient(circle at 78% 28%, #f2d27a 0 7px, transparent 8px), radial-gradient(1.5px 1.5px at 20% 30%, #fff 60%, transparent), radial-gradient(1.5px 1.5px at 45% 18%, #fff 60%, transparent), radial-gradient(1.5px 1.5px at 30% 50%, #fff 60%, transparent), linear-gradient(180deg, #070c19 0 58%, #141e37 58%); }
.vk-muster[data-vorschau="zuckerstange"] { background: repeating-linear-gradient(-45deg, #b8141c 0 9px, #ffffff 9px 18px); }
.vk-muster[data-vorschau="lebkuchen"] { background: radial-gradient(circle at 50% 100%, #f3e5d0 0 6px, transparent 6.5px) 0 58% / 16px 8px repeat-x, linear-gradient(180deg, #6a3a1d 0 58%, #f3e5d0 58%); }
.vk-muster[data-vorschau="schneeweiss"] { background: radial-gradient(circle at 78% 28%, #4b8fbd 0 6px, transparent 7px), linear-gradient(180deg, #e6eff6 0 58%, #ffffff 58%); }
.vk-muster[data-vorschau="goldglanz"] { background: linear-gradient(115deg, transparent 0 60%, #ecc874 60% 62%, transparent 62%), linear-gradient(180deg, #0b0a08 0 58%, #191714 58%); }