/* Saisonale Varianten der Startseite (18.10.2026). Greift nur, wenn <html data-saison="…"> gesetzt ist; die normale Seite bleibt unberührt.
   Jede Saison setzt die Farbtokens von site.css neu, färbt den Nebel im Kopfbild um (--mist = R,G,B) und bekommt Schmuck:
   Weihnachten Schnee (Canvas, Schneehauben auf Knöpfen und Karten, Kerzen, Zuckerstange) · Herbst fallende Blätter · Frühling Blütenblätter und Zweig
   Muttertag Herzen und Blüten, Strauß · Valentinstag Herzen · Sommeranfang Sonne und Funkeln. Varianten baut entwuerfe/saison/bauen.py nach public/saison/. */

/* ---------- Gemeinsames ---------- */
html[data-saison] .sx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
/* Laub (18.10.2026 abends): Leinwand liegt in der Seite und scrollt mit (saison.js setzt Höhe und translate3d), siehe Kommentar dort */
html[data-saison] .sx-canvas.sx-seite { position: absolute; inset: auto; top: 0; left: 0; will-change: transform; }
html[data-saison] .sx-label { position: fixed; left: 12px; bottom: 12px; z-index: 70; pointer-events: none; font: 700 11px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(43,56,44,.72); padding: 8px 11px; border-radius: 999px; backdrop-filter: blur(4px); }
html[data-saison] .sx-tabdeko { position: absolute; pointer-events: none; z-index: 4; }
html[data-saison] .sx-tabdeko svg { display: block; width: 100%; height: 100%; overflow: visible; }
html[data-saison] .sx-kontaktdeko { display: flex; justify-content: center; margin: 0 0 10px; pointer-events: none; }
html[data-saison] .sx-kontaktdeko svg { height: 58px; width: auto; overflow: visible; }
html[data-saison] .eyebrow::after { content: ""; display: block; width: 44px; height: 4px; margin: 9px auto 0; border-radius: 2px; background: var(--sx-strich, var(--gold)); }
@media (max-width: 759px) { html[data-saison] .hero-img { position: relative; } }   /* am Desktop ist .hero-img schon absolut */
html[data-saison] .hero-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--sx-tint, transparent); mix-blend-mode: multiply; }

/* Nebel im Kopfbild in der Saisonfarbe (gleiche Verläufe wie site.css, Farbe aus --mist) */
html[data-saison] .hero-img {
  background: linear-gradient(rgba(var(--mist), 0) 56%, rgba(var(--mist), .25) 68%, rgba(var(--mist), .55) 80%, rgba(var(--mist), .88) 92%, var(--photo-green) 100%),
    url("/img/hero-handy.jpg") 50% 0 / 100% auto no-repeat; }
@media (min-width: 760px) {
  html[data-saison] .hero-img {
    background: linear-gradient(to top, var(--photo-green) 0%, rgba(var(--mist), .8) 12%, rgba(var(--mist), .45) 34%, rgba(var(--mist), 0) 58%),
      radial-gradient(135% 125% at 100% 100%, rgba(var(--mist), .99) 0%, rgba(var(--mist), .86) 22%, rgba(var(--mist), .62) 42%, rgba(var(--mist), .3) 58%, rgba(var(--mist), 0) 74%),
      url("/img/hero.jpg") center 36% / cover no-repeat; }
}
@media (min-width: 900px) {   /* Nase immer unter dem Rand, wie site.css (20.10.2026) */
  html[data-saison] .hero-img { background-position: 0 0, 0 0, 50% max(600px - 66.7vw, min(0px, 80px - 13.15vw)); }
}

/* ---------- Weihnachten: Bordeaux, Gold, Schnee ---------- */
html[data-saison="weihnachten"] {
  --sage: #9c5b5f; --green: #7a3b40; --deep: #5a2a2f; --deeper: #44201f; --gold: #e9cf8e; --gold-d: #7a5a26;
  --cream: #f7ece2; --paper: #fdf6ef; --ink: #3a2a2a; --muted: #6b5555; --line: #e8d3bd; --photo-green: #5a2a2f; --mist: 90,42,47;
  --bar-bg: #f1e2d2; --bar-ink: #3a2a2a; --bar-lbl: #7a5a26; --bar-ic: #5a2a2f; --bar-div: #dcc3ad;
  --sx-strich: repeating-linear-gradient(135deg, #c8323a 0 6px, #fff 6px 12px); --sx-tint: rgba(150,70,70,.10); }
html[data-saison="weihnachten"] .btn, html[data-saison="weihnachten"] .fchip, html[data-saison="weihnachten"] .shelf .item, html[data-saison="weihnachten"] .kboxes li { position: relative; }
@media (max-width: 759px) { html[data-saison="weihnachten"] .facts { position: relative; } }   /* .tab und .facts am Desktop bleiben absolut */
/* Schneehaube: weiße Kappe mit weichem Rand auf der Oberkante */
html[data-saison="weihnachten"] .btn::before, html[data-saison="weihnachten"] .fchip::before, html[data-saison="weihnachten"] .facts::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: -6px; height: 13px; pointer-events: none; z-index: 2; background: #fff;
  border-radius: 55% 45% 50% 50% / 100% 100% 40% 60%; box-shadow: inset 0 -3px 3px rgba(190,170,170,.45), 0 1px 2px rgba(80,40,40,.18); }
html[data-saison="weihnachten"] .fchip::before { top: -5px; height: 10px; }
html[data-saison="weihnachten"] .facts::before { left: 4%; right: 4%; top: -8px; height: 18px; border-radius: 50% 50% 40% 60% / 100% 100% 30% 50%; }
html[data-saison="weihnachten"] .tab::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -9px; height: 16px; pointer-events: none; background: #fff;
  border-radius: 40% 60% 55% 45% / 0 0 100% 100%; box-shadow: inset 0 3px 3px rgba(190,170,170,.4), 0 2px 3px rgba(80,40,40,.15); }
/* Schnee liegt oben auf den Produktkarten (innen, die Karte schneidet ab) */
html[data-saison="weihnachten"] .shelf .item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 2; pointer-events: none;
  background: radial-gradient(18px 12px at 12% 0, #fff 98%, transparent), radial-gradient(26px 14px at 38% 0, #fff 98%, transparent),
    radial-gradient(20px 11px at 64% 0, #fff 98%, transparent), radial-gradient(24px 13px at 90% 0, #fff 98%, transparent), linear-gradient(#fff, #fff) 0 0 / 100% 6px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(60,30,30,.2)); }
html[data-saison="weihnachten"] .btn-gold { background: #e9cf8e; }
html[data-saison="weihnachten"] .btn-gold:hover { background: #f2dca2; }
html[data-saison="weihnachten"] .sx-tabdeko { right: -18px; top: -6px; width: 40px; height: 78px; transform: rotate(14deg); }
html[data-saison="weihnachten"] .sx-flamme { transform-origin: 50% 100%; animation: sx-flackern 1.6s ease-in-out infinite alternate; }
html[data-saison="weihnachten"] .sx-flamme:nth-child(2) { animation-duration: 1.3s; animation-delay: -.4s; }
@keyframes sx-flackern { from { transform: scaleY(.92) scaleX(1.04); opacity: .85; } to { transform: scaleY(1.08) scaleX(.96); opacity: 1; } }

/* ---------- Herbst: Bernstein, Rost, Laub ---------- */
html[data-saison="herbst"] {
  --sage: #b07d4e; --green: #8a5a2b; --deep: #5e3b1e; --deeper: #482c15; --gold: #ead29a; --gold-d: #7a5a26;
  --cream: #f7eddc; --paper: #fdf7eb; --ink: #3a2e22; --muted: #6b5a48; --line: #e8d6b4; --photo-green: #5e3b1e; --mist: 94,59,30;
  --bar-bg: #f0e2c8; --bar-ink: #3a2e22; --bar-lbl: #7a5a26; --bar-ic: #5e3b1e; --bar-div: #dcc8a4;
  --sx-strich: linear-gradient(90deg, #c9742b, #8a4b1c); --sx-tint: rgba(170,110,50,.10); }
html[data-saison="herbst"] .sx-tabdeko { right: -22px; bottom: -14px; width: 70px; height: 54px; }

/* ---------- Frühling: frisches Grün, Blütenrosa ---------- */
html[data-saison="fruehling"] {
  --sage: #8fbf8a; --green: #5c9a5f; --deep: #3f6d44; --deeper: #345a39; --gold: #f1d9a6; --gold-d: #7a6526;
  --cream: #f6f3e2; --paper: #fdfbf2; --ink: #2b382c; --muted: #5f6b58; --line: #e3e0b8; --photo-green: #4a7a4f; --mist: 74,122,79;
  --sx-strich: linear-gradient(90deg, #f3b8c8, #8fbf8a); --sx-tint: transparent; }
html[data-saison="fruehling"] .sx-tabdeko { right: -30px; top: -10px; width: 92px; height: 70px; }

/* ---------- Muttertag: Rosé, Mauve, Gold ---------- */
html[data-saison="muttertag"] {
  --sage: #c48d9d; --green: #a3566d; --deep: #7a3f55; --deeper: #5f3042; --gold: #ead7a3; --gold-d: #7a5a3a;
  --cream: #f9eef0; --paper: #fdf7f8; --ink: #3a2a30; --muted: #6b5560; --line: #ead3d8; --photo-green: #7a3f55; --mist: 122,63,85;
  --bar-bg: #f4e3e6; --bar-ink: #3a2a30; --bar-lbl: #7a5a3a; --bar-ic: #7a3f55; --bar-div: #e3c6cc;
  --sx-strich: linear-gradient(90deg, #e9a7b6, #ead7a3); --sx-tint: rgba(150,80,110,.06); }
html[data-saison="muttertag"] .sx-tabdeko { right: -26px; bottom: -16px; width: 64px; height: 72px; }

/* ---------- Valentinstag: tiefes Rosenrot ---------- */
html[data-saison="valentinstag"] {
  --sage: #c26a7b; --green: #a8485c; --deep: #7d2f42; --deeper: #5f2232; --gold: #f1cfd3; --gold-d: #8a3a4a;
  --cream: #faecef; --paper: #fdf5f6; --ink: #3a262b; --muted: #6b4f56; --line: #ecccd3; --photo-green: #7d2f42; --mist: 125,47,66;
  --bar-bg: #f6e1e5; --bar-ink: #3a262b; --bar-lbl: #8a3a4a; --bar-ic: #7d2f42; --bar-div: #e6c4cb;
  --sx-strich: linear-gradient(90deg, #c2334a, #f1a6b3); --sx-tint: rgba(170,60,80,.07); }
html[data-saison="valentinstag"] .btn-gold { background: #f1cfd3; color: #7d2f42; }
html[data-saison="valentinstag"] .btn-gold::before { content: "♥"; font-size: .95em; line-height: 1; color: #c2334a; }
html[data-saison="valentinstag"] .sx-tabdeko { right: -16px; top: -14px; width: 42px; height: 40px; animation: sx-pochen 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes sx-pochen { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(1); } 36% { transform: scale(1.08); } 48% { transform: scale(1); } }

/* ---------- Sommeranfang: Türkis, Sonnengelb ---------- */
html[data-saison="sommer"] {
  --sage: #7fb6a9; --green: #3f8f86; --deep: #2f6b66; --deeper: #26554f; --gold: #f3d978; --gold-d: #7a6526;
  --cream: #fbf5dc; --paper: #fefbee; --ink: #263835; --muted: #566b66; --line: #e8e2b4; --photo-green: #2f6b66; --mist: 47,107,102;
  --bar-bg: #ecf0dc; --bar-ink: #263835; --bar-lbl: #7a6526; --bar-ic: #2f6b66; --bar-div: #d6dcbc;
  --sx-strich: linear-gradient(90deg, #f3d978, #7fb6a9); --sx-tint: transparent; }
html[data-saison="sommer"] .sx-tabdeko { right: -30px; top: -30px; width: 76px; height: 76px; }
html[data-saison="sommer"] .sx-strahlen { transform-origin: 50% 50%; animation: sx-drehen 40s linear infinite; }
@keyframes sx-drehen { to { transform: rotate(360deg); } }

/* ---------- Variante „Logo im Originalgrün“: html[data-logo="original"] lässt die Kachel oben links wie auf der normalen Seite ---------- */
html[data-saison][data-logo="original"] .tab { background: #82a681; color: #ead793; }

@media (prefers-reduced-motion: reduce) {
  html[data-saison] .sx-canvas { display: none; }
  html[data-saison] .sx-flamme, html[data-saison] .sx-tabdeko, html[data-saison] .sx-strahlen { animation: none !important; }
}