/* Saison-Designs (lib/saison.js): Akzentfarbe, Leiste oben, Streifen unter der
   Kopfzeile und die eigene Startseiten-Folie. Aktiv über <html data-saison="…">.
   Die Animation (Schnee, Herzen …) zeichnet public/js/saison.js. */

/* ── Gemeinsam ── */
[data-saison] .topbar { transition: background .3s; }
.topbar-mitte, #topbar { position: relative; }
.topbar .topbar-saison, .topbar #topbarVersand { transition: opacity .35s; }
.topbar .topbar-aus { opacity: 0; position: absolute; left: 0; right: 0; pointer-events: none; }
.topbar-countdown { font-variant-numeric: tabular-nums; margin-left: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .14); white-space: nowrap; }
[data-saison] .header { border-bottom: none; }
[data-saison] .header::after { content: ''; display: block; height: 4px; background: var(--saison-streifen, var(--primary)); }

/* Eigene Folie im Startseiten-Slider: großes Motiv rechts */
.hero-slide.saison-slide { background: var(--saison-folie, #111); }
.hero-slide.saison-slide::after {
  content: var(--saison-motiv, ''); position: absolute; right: 7%; top: 50%; transform: translateY(-52%);
  z-index: 1; font-size: clamp(110px, 21vw, 290px); line-height: 1; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45));
  animation: saison-schweben 5s ease-in-out infinite;
}
@keyframes saison-schweben { 50% { transform: translateY(-46%) rotate(-3deg); } }
@media (max-width: 700px) {
  .hero-slide.saison-slide::after { right: 4%; top: 30%; font-size: 120px; opacity: .45; }
}

/* Vorschau-Hinweis (nur bei /?saison=…) */
.saison-vorschau {
  position: fixed; left: 50%; top: 6px; transform: translateX(-50%); z-index: 2600; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  background: #111; color: #fff; font-size: .82rem; font-weight: 600; padding: 10px 14px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.saison-vorschau a { color: #fbbf24; text-decoration: underline; }
@media (max-width: 600px) { .saison-vorschau { white-space: normal; width: max-content; max-width: calc(100vw - 16px); font-size: .74rem; padding: 8px 12px; text-align: center; } }

/* Animation liegt über dem Inhalt, aber unter Kopfzeile, Fenstern und Menüs */
.saison-deko { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
/* Effekt beim Laden liegt über allem (auch Kopfzeile), ist aber nach ~3 s weg */
.saison-intro { z-index: 2550; }

/* ── Black Friday: schwarz, knallige Akzente ── */
[data-saison="blackfriday"] {
  --primary: #e11d48; --primary-dark: #be123c; --primary-light: #fff1f2;
  --primary-strong: #e11d48; --primary-ink: #e11d48; --primary-border: #f3a5b6; --primary-text: #ffffff;
  --saison-streifen: repeating-linear-gradient(45deg, #facc15 0 14px, #0a0a0a 14px 28px);
  --saison-folie: radial-gradient(ellipse at 75% 40%, #3f0d1a 0%, #0a0a0a 65%);
  --saison-motiv: '%';
}
[data-saison="blackfriday"] .topbar { background: #000; color: #facc15; letter-spacing: .16em; }
[data-saison="blackfriday"] .topbar-countdown { background: #facc15; color: #000; }
[data-saison="blackfriday"] .hero-slide.saison-slide::after {
  font-family: var(--font-head, sans-serif); font-weight: 800; color: transparent; -webkit-text-stroke: 4px #e11d48;
  font-size: clamp(160px, 30vw, 420px); filter: none;
}
[data-saison="blackfriday"] .saison-slide .slide-badge { background: #facc15; color: #000; }

/* ── Weihnachten: Rot und Tannengrün ── */
[data-saison="weihnachten"] {
  --primary: #c62828; --primary-dark: #a11d1d; --primary-light: #fdecec;
  --primary-strong: #c62828; --primary-ink: #c62828; --primary-border: #e8a9a9; --primary-text: #ffffff;
  --saison-streifen: repeating-linear-gradient(-45deg, #c62828 0 12px, #ffffff 12px 24px);
  --saison-folie: radial-gradient(ellipse at 72% 38%, #14532d 0%, #062012 70%);
  --saison-motiv: '🎄';
}
[data-saison="weihnachten"] .topbar { background: linear-gradient(90deg, #7f1d1d, #b91c1c, #7f1d1d); color: #fff; }

/* ── Silvester & Neujahr: Schwarz und Gold ── */
[data-saison="neujahr"] {
  --primary: #b8860b; --primary-dark: #8a6508; --primary-light: #fdf6e3;
  --primary-strong: #b8860b; --primary-ink: #8f6808; --primary-border: #e3cf9d; --primary-text: #111111;
  --saison-streifen: linear-gradient(90deg, #8a6508, #f5d77a, #b8860b, #f5d77a, #8a6508);
  --saison-folie: radial-gradient(ellipse at 72% 35%, #2a2310 0%, #0a0a0a 70%);
  --saison-motiv: '🎆';
}
[data-saison="neujahr"] .topbar { background: #0a0a0a; color: #f5d77a; }

/* ── Valentinstag: Rosé ── */
[data-saison="valentinstag"] {
  --primary: #e11d48; --primary-dark: #be123c; --primary-light: #fff1f2;
  --primary-strong: #e11d48; --primary-ink: #e11d48; --primary-border: #f3a5b6; --primary-text: #ffffff;
  --saison-streifen: linear-gradient(90deg, #fda4af, #e11d48, #fda4af);
  --saison-folie: radial-gradient(ellipse at 72% 40%, #9f1239 0%, #2a0611 72%);
  --saison-motiv: '💝';
}
[data-saison="valentinstag"] .topbar { background: linear-gradient(90deg, #9f1239, #e11d48, #9f1239); color: #fff; }

/* ── Ostern: Frühlingsgrün, Pastell ── */
[data-saison="ostern"] {
  --primary: #16a34a; --primary-dark: #15803d; --primary-light: #effaf3;
  --primary-strong: #16a34a; --primary-ink: #117f3a; --primary-border: #a2dab7; --primary-text: #111111;
  --saison-streifen: linear-gradient(90deg, #fde68a, #bbf7d0, #bfdbfe, #fbcfe8, #fde68a);
  --saison-folie: radial-gradient(ellipse at 72% 40%, #3f6212 0%, #10260a 72%);
  --saison-motiv: '🐣';
}
[data-saison="ostern"] .topbar { background: linear-gradient(90deg, #15803d, #65a30d, #15803d); color: #fff; }

/* ── Sommer: Meer und Sonne ── */
[data-saison="sommer"] {
  --primary: #0891b2; --primary-dark: #0e7490; --primary-light: #ecfeff;
  --primary-strong: #0891b2; --primary-ink: #067a97; --primary-border: #9cd3e0; --primary-text: #111111;
  --saison-streifen: linear-gradient(90deg, #06b6d4, #fbbf24, #06b6d4);
  --saison-folie: linear-gradient(160deg, #0e7490 0%, #155e75 45%, #b45309 100%);
  --saison-motiv: '🏖️';
}
[data-saison="sommer"] .topbar { background: linear-gradient(90deg, #0e7490, #0891b2, #0e7490); color: #fff; }

/* ── Halloween: Kürbis-Orange und Violett ── */
[data-saison="halloween"] {
  --primary: #ea580c; --primary-dark: #c2410c; --primary-light: #fff7ed;
  --primary-strong: #ea580c; --primary-ink: #c64b0a; --primary-border: #f7bc9e; --primary-text: #111111;
  --saison-streifen: repeating-linear-gradient(90deg, #ea580c 0 22px, #4c1d95 22px 44px);
  --saison-folie: radial-gradient(ellipse at 72% 40%, #3b0764 0%, #0a0a0a 70%);
  --saison-motiv: '🎃';
}
[data-saison="halloween"] .topbar { background: #1e1b4b; color: #fdba74; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.saison-slide::after { animation: none; }
  .topbar .topbar-saison, .topbar #topbarVersand { transition: none; }
}