/* =======================================================================
   Farben der Rabattaktion (Betreiber, 2026-10-06) — je Vorlage EINE Klasse
   .aktion-thema-<schluessel> mit denselben Variablen:

     --akt-farbe      Hauptfarbe (dieselbe wie `farbe` in aktion-vorlagen.js —
                      ein Test vergleicht)
     --akt-auf        Schrift AUF der Hauptfarbe (mindestens 4,5:1)
     --akt-text       farbige Schrift auf Weiß (mindestens 4,5:1)
     --akt-dim        zarte Fläche (Block der Karte)
     --akt-rand       Rand zur zarten Fläche
     --akt-hell       helle Variante für dunklen Grund
     --akt-schleier-a / -b   Verlauf des Schleiers hinter dem Pop-up

   Die Datei wird von der Kundenkarte UND von der Team-App geladen — sie
   benutzt deshalb nur ihre eigenen Variablen (keine aus card.css oder
   styles.css) und keine Bilder (kein url). Der Block der Karte steht in
   card.css (.aktion-karte), die Teile der Team-App in styles.css (.akt-…);
   beide lesen nur diese Variablen. Unten steht das Pop-up mit Animation
   (.feier.aktion, dunkle Fassung .feier.aktion.dunkel).

   Der Schleier trägt die Motive: dunkel für Rot, Gold, Weiß und Schnee
   (Weinrot statt Rot bei Super Sale, Mondneujahr und Weihnachten), hell für
   Valentinstag, Muttertag und Herbst (rote Blätter, dunkle Kastanien),
   Himmelblau im Sommer, Abenddämmerung mit Mond zu Halloween.
   ======================================================================= */

/* Super Sale — Rot & Weiß */
.aktion-thema-sale {
  --akt-farbe: #d81f26;
  --akt-auf: #ffffff;
  --akt-text: #b3141b;
  --akt-dim: #fdecec;
  --akt-rand: #f2b8bb;
  --akt-hell: #ff9aa0;
  --akt-schleier-a: #2e0406;
  --akt-schleier-b: #6b0b12;
}

/* Blitz-Aktion — Violett & Gelb */
.aktion-thema-blitz {
  --akt-farbe: #6c2bd9;
  --akt-auf: #ffffff;
  --akt-text: #5a1fc0;
  --akt-dim: #f1eafd;
  --akt-rand: #cdb8f5;
  --akt-hell: #c3a6ff;
  --akt-schleier-a: #1d0a4a;
  --akt-schleier-b: #4a1ba0;
}

/* Willkommens-Drink — Türkis */
.aktion-thema-getraenk {
  --akt-farbe: #0a7a84;
  --akt-auf: #ffffff;
  --akt-text: #0a6f79;
  --akt-dim: #e4f6f7;
  --akt-rand: #a9dde1;
  --akt-hell: #8fe3ea;
  --akt-schleier-a: #053b41;
  --akt-schleier-b: #0c7f8a;
}

/* Wir feiern Geburtstag — Pink & Gold */
.aktion-thema-geburtstag {
  --akt-farbe: #d02a7f;
  --akt-auf: #ffffff;
  --akt-text: #b81f6c;
  --akt-dim: #fdeaf4;
  --akt-rand: #f3b3d3;
  --akt-hell: #ff9ccb;
  --akt-schleier-a: #2c0b2a;
  --akt-schleier-b: #6a1650;
}

/* Sonderaktion — Gold & Creme */
.aktion-thema-stern {
  --akt-farbe: #b8860b;
  --akt-auf: #2e2100;
  --akt-text: #856613;
  --akt-dim: #fbf4e0;
  --akt-rand: #e6cf8f;
  --akt-hell: #f1d57a;
  --akt-schleier-a: #1e1604;
  --akt-schleier-b: #4a380a;
}

/* Neujahrs-Aktion — Nachtblau & Gold */
.aktion-thema-neujahr {
  --akt-farbe: #1b2a55;
  --akt-auf: #ffffff;
  --akt-text: #1b2a55;
  --akt-dim: #e9ecf6;
  --akt-rand: #b5bfdd;
  --akt-hell: #f1d57a;
  --akt-schleier-a: #070c1f;
  --akt-schleier-b: #1b2a55;
}

/* Mondneujahr — Rot & Gold */
.aktion-thema-tet {
  --akt-farbe: #c81e1e;
  --akt-auf: #ffffff;
  --akt-text: #a81616;
  --akt-dim: #fdeceb;
  --akt-rand: #f1b6b3;
  --akt-hell: #ffd76e;
  --akt-schleier-a: #2a0404;
  --akt-schleier-b: #5c0a0a;
}

/* Valentinstag — Rot & Rosa */
.aktion-thema-valentin {
  --akt-farbe: #e0245e;
  --akt-auf: #ffffff;
  --akt-text: #b81348;
  --akt-dim: #fdeaf0;
  --akt-rand: #f4b3c7;
  --akt-hell: #ff9dbb;
  --akt-schleier-a: #fff5f7;
  --akt-schleier-b: #f8d4dd;
}

/* Frauentag — Lila */
.aktion-thema-frauentag {
  --akt-farbe: #8e44ad;
  --akt-auf: #ffffff;
  --akt-text: #7a3597;
  --akt-dim: #f5ecf9;
  --akt-rand: #d9bde6;
  --akt-hell: #d7b8e8;
  --akt-schleier-a: #2a1035;
  --akt-schleier-b: #522268;
}

/* Frühlingsaktion — Grün & Rosa */
.aktion-thema-fruehling {
  --akt-farbe: #3d7f20;
  --akt-auf: #ffffff;
  --akt-text: #356e1c;
  --akt-dim: #edf6e8;
  --akt-rand: #bcdcab;
  --akt-hell: #bfe8a8;
  --akt-schleier-a: #d4ecf9;
  --akt-schleier-b: #b5dd9a;
}

/* Oster-Aktion — Pastell-Mint */
.aktion-thema-ostern {
  --akt-farbe: #3fae8f;
  --akt-auf: #0c3b30;
  --akt-text: #1f7a62;
  --akt-dim: #e8f7f2;
  --akt-rand: #aee0d1;
  --akt-hell: #bfe9dc;
  --akt-schleier-a: #12483a;
  --akt-schleier-b: #2c8a70;
}

/* Muttertag — Rosa & Pfirsich */
.aktion-thema-muttertag {
  --akt-farbe: #e8749a;
  --akt-auf: #4a1228;
  --akt-text: #b8446b;
  --akt-dim: #fdeef3;
  --akt-rand: #f5c2d3;
  --akt-hell: #ffc9da;
  --akt-schleier-a: #fff4ee;
  --akt-schleier-b: #fbd8cb;
}

/* Sommerfest — Gelb */
.aktion-thema-sommer {
  --akt-farbe: #f2b705;
  --akt-auf: #3a2a00;
  --akt-text: #8a6200;
  --akt-dim: #fff7dc;
  --akt-rand: #f4dc8a;
  --akt-hell: #ffe27a;
  --akt-schleier-a: #0e6aa6;
  --akt-schleier-b: #2a92cc;
}

/* Herbstanfang — Orange & Braun */
.aktion-thema-herbst {
  --akt-farbe: #b3560f;
  --akt-auf: #ffffff;
  --akt-text: #9a4a0c;
  --akt-dim: #fbeee3;
  --akt-rand: #ecc7a6;
  --akt-hell: #f4c08a;
  --akt-schleier-a: #fbf2e4;
  --akt-schleier-b: #f1d8b5;
}

/* Halloween — Lila & Orange */
.aktion-thema-halloween {
  --akt-farbe: #7a3fb3;
  --akt-auf: #ffffff;
  --akt-text: #66309c;
  --akt-dim: #f2eafa;
  --akt-rand: #d1bbe8;
  --akt-hell: #ffb066;
  --akt-schleier-a: #241040;
  --akt-schleier-b: #b8501a;
}

/* Black Friday — Schwarz & Gold */
.aktion-thema-blackfriday {
  --akt-farbe: #11100e;
  --akt-auf: #f1d57a;
  --akt-text: #11100e;
  --akt-dim: #f3f1ec;
  --akt-rand: #cfc8b8;
  --akt-hell: #f1d57a;
  --akt-schleier-a: #000000;
  --akt-schleier-b: #2a2413;
}

/* Weihnachtsaktion — Rot & Weiß */
.aktion-thema-weihnachten {
  --akt-farbe: #c8102e;
  --akt-auf: #ffffff;
  --akt-text: #a40d26;
  --akt-dim: #fdebee;
  --akt-rand: #f1b1bb;
  --akt-hell: #ffb3bf;
  --akt-schleier-a: #22030a;
  --akt-schleier-b: #4f0814;
}

/* Winter-Aktion — Eisblau */
.aktion-thema-winter {
  --akt-farbe: #236fa8;
  --akt-auf: #ffffff;
  --akt-text: #1c6398;
  --akt-dim: #e8f2fa;
  --akt-rand: #b3d2ea;
  --akt-hell: #a9d6ff;
  --akt-schleier-a: #0c2b45;
  --akt-schleier-b: #1f5f91;
}


/* =======================================================================
   Das Fenster der Aktion auf der Web-Karte (und als Vorschau in der
   Team-App): feier.js baut es wie jede Belohnungs-Feier, die Szene aus
   aktionsfeier.js gibt ihm die Klassen `aktion aktion-thema-<schluessel>`
   (dazu `dunkel` bei Black Friday und Neujahr). Hier werden nur die
   Variablen der Feier aus denen des Themas gesetzt und die Teile, die
   feier.css hell annimmt, für die dunkle Fassung umgestellt.
   ======================================================================= */
.feier.aktion {
  --feier-akzent: var(--akt-farbe);
  --feier-akzent-text: var(--akt-text);
  --feier-akzent-dim: var(--akt-dim);
  --feier-akzent-rand: var(--akt-rand);
  --feier-akzent-hell: var(--akt-hell);
}

/* Schleier: der Verlauf des Themas, fast deckend — die Karte dahinter tritt
   zurück, die Motive heben sich ab. Er liegt auf ::before, weil feier.css
   den Schleier selbst einblendet (Deckkraft über die Animation). */
.feier.aktion .feier-schleier { background: transparent; }
.feier.aktion .feier-schleier::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.96;
  background:
    radial-gradient(70% 42% at 50% 16%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, var(--akt-schleier-a), var(--akt-schleier-b));
}
/* Halloween: Vollmond oben rechts — die Fledermäuse fliegen davor vorbei. */
.feier.aktion.aktion-thema-halloween .feier-schleier::before {
  background:
    radial-gradient(circle at 80% 13%, #fff3cf 0, #ffe7a8 30px, rgba(255, 204, 120, 0.4) 33px, rgba(255, 170, 90, 0) 115px),
    radial-gradient(70% 40% at 30% 10%, rgba(170, 120, 255, 0.22), rgba(170, 120, 255, 0) 70%),
    linear-gradient(180deg, var(--akt-schleier-a), var(--akt-schleier-b));
}
/* Sommer: die Sonne oben strahlt warm in den Himmel. */
.feier.aktion.aktion-thema-sommer .feier-schleier::before {
  background:
    radial-gradient(60% 34% at 50% 14%, rgba(255, 236, 150, 0.5), rgba(255, 236, 150, 0) 72%),
    linear-gradient(180deg, var(--akt-schleier-a), var(--akt-schleier-b));
}
/* Black Friday und Sonderaktion: goldener Schein auf dem dunklen Grund. */
.feier.aktion.aktion-thema-blackfriday .feier-schleier::before,
.feier.aktion.aktion-thema-stern .feier-schleier::before {
  background:
    radial-gradient(80% 48% at 50% 18%, rgba(212, 175, 55, 0.28), rgba(212, 175, 55, 0) 70%),
    linear-gradient(180deg, var(--akt-schleier-a), var(--akt-schleier-b));
}

/* Die Karte: weiß, oben zart in der Farbe des Themas. */
.feier.aktion .feier-karte {
  background: linear-gradient(180deg, var(--akt-dim), #ffffff 46%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}
/* Die Bedingungen tippt das Studio mit Zeilenumbrüchen — feier.js setzt sie
   als Text in einen Hinweis, erst pre-line zeigt die Umbrüche (wie der Block
   auf der Karte, card.css .aktion-bedingungen). */
.feier.aktion .feier-hinweis { white-space: pre-line; }
/* Titel, Kopfzeile (mit Studioname) und Bedingungen sind hier — anders als
   bei den übrigen Feiern — Freitext des Studios. Ein langes Wort
   („Sommerschlussverkauf" in 29 px Serifen) wäre breiter als die Karte: In
   der mittigen Flex-Spalte nimmt das Kind die Breite seines längsten Worts
   an und ragt nach BEIDEN Seiten über die weiße Karte auf den dunklen
   Schleier (Gegenprüfung 2026-10-06). `anywhere` senkt die Mindestbreite —
   mit bloßem `break-word` bliebe sie die ganze Wortbreite. Wie der Block
   auf der Karte (card.css .aktion-titel). */
.feier.aktion .feier-kicker,
.feier.aktion .feier-titel,
.feier.aktion .feier-hinweis {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Der Knopf in der Hauptfarbe mit der Schrift des Themas (≥ 4,5:1) — auch
   bei Gelb, Gold, Mint und Rosa, wo Weiß nicht lesbar wäre. */
.feier.aktion .feier-knopf {
  color: var(--akt-auf);
  background: var(--akt-farbe);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 24px rgba(0, 0, 0, 0.28);
}
.feier.aktion .feier-held.zeichen {
  color: var(--akt-auf);
  background:
    radial-gradient(80% 80% at 32% 26%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
    var(--akt-farbe);
}

/* ---- Dunkle Fassung (Black Friday, Neujahr): Karte in der Hauptfarbe,
   Schrift creme, Akzente golden (--akt-hell), Knopf golden mit dunkler
   Schrift. ---- */
.feier.aktion.dunkel {
  --feier-akzent: var(--akt-hell);
  --feier-akzent-text: var(--akt-hell);
  --feier-akzent-dim: rgba(241, 213, 122, 0.1);
  --feier-akzent-rand: rgba(241, 213, 122, 0.42);
  --feier-text: #faf5f1;
  --feier-text-2: #e3dccd;
  --feier-leise: #c9c1b1;
}
.feier.aktion.dunkel .feier-karte {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%),
    var(--akt-farbe);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(241, 213, 122, 0.45),
    0 0 46px rgba(212, 175, 55, 0.2);
}
.feier.aktion.dunkel .feier-knopf {
  color: var(--akt-farbe);
  background: var(--akt-hell);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 24px rgba(0, 0, 0, 0.45);
}
.feier.aktion.dunkel .feier-knopf:focus-visible { outline-color: var(--akt-hell); }
.feier.aktion.dunkel .feier-held.zeichen {
  color: var(--akt-farbe);
  background:
    radial-gradient(80% 80% at 32% 26%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%),
    var(--akt-hell);
  box-shadow:
    0 0 0 6px var(--akt-farbe),
    0 14px 30px rgba(0, 0, 0, 0.5);
}
.feier.aktion.dunkel .feier-held.bild img { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); }