/* FOURACTION Aktion „Halloween“ (29.10.2026): Hinweis im Startseiten-Hero und Streifen unter dem Shop-Kopfband. Wird nur geladen, solange
   die Aktion läuft; die Streichpreise selbst stehen in start.css / shop.css (.fa-alt, .fa-neu) und bleiben ohne Aktion unsichtbar. */

/* Startseite: eine Zeile unter dem Einleitungssatz, Marker wie „ohne Beton“ in der Überschrift */
#fx .fa-aktion-zeile { margin: 18px 0 0; font-size: 18px; line-height: 1.45; font-weight: 500; color: #111; }
#fx .fa-aktion-mark { background: #F49517; color: #111; font-weight: 800; padding: 1px 7px; margin-right: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 699px) { #fx .fa-aktion-zeile { font-size: 16px; margin-top: 14px; } }

/* Shop: Streifen unter dem blauen Kopfband */
#fx .s-aktion { position: relative; z-index: 1; color: #fff; background: #1b1b1f; }
#fx .s-aktion-innen { display: flex; align-items: center; gap: 14px; min-height: 58px; padding-top: 6px; padding-bottom: 6px; }
#fx .s-aktion-bild { flex: none; width: 54px; height: auto; margin: -16px 0 -12px; }
#fx .s-aktion p { margin: 0; font-size: 17px; line-height: 1.4; }
#fx .s-aktion .fa-aktion-mark { margin-right: 8px; }
#fx .s-aktion-klein { color: #d7d7d7; }
@media (max-width: 699px) {
  #fx .s-aktion-innen { gap: 10px; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  #fx .s-aktion-bild { width: 42px; margin: -10px 0 -8px; }
  #fx .s-aktion p { font-size: 16px; }
  #fx .s-aktion-klein { display: block; }
}

/* Startseite (Jan 29.10.: „auf der Startseite kann man es kaum erkennen“): derselbe Streifen wie im Shop, eine Stufe größer, direkt unter
   dem Kopf – und im Hero ein großes „−20 % auf alle Klettergerüste“ statt der kleinen Zeile */
#fx .s-aktion-start .s-aktion-innen { min-height: 70px; gap: 16px; padding-left: var(--seite, 20px); padding-right: var(--seite, 20px); }
#fx .s-aktion-start .s-aktion-bild { width: 68px; margin: -8px 0 -14px; }
#fx .s-aktion-start p { font-size: 20px; }
#fx .fa-aktion-gross { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; color: #111; }
#fx .fa-aktion-zahl { background: #F49517; font-weight: 900; font-size: 56px; line-height: 1; padding: 4px 10px 7px; letter-spacing: -.02em; white-space: nowrap; }
#fx .fa-aktion-wort { font-size: 25px; font-weight: 800; line-height: 1.15; }
#fx .fa-aktion-wort small { display: block; margin-top: 5px; font-size: 15px; font-weight: 500; }
@media (max-width: 699px) {
  #fx .s-aktion-start .s-aktion-bild { width: 50px; margin: -6px 0 -10px; }
  #fx .s-aktion-start p { font-size: 16px; }
  #fx .fa-aktion-gross { gap: 12px; margin-top: 18px; }
  #fx .fa-aktion-zahl { font-size: 44px; }
  #fx .fa-aktion-wort { font-size: 20px; }
  #fx .fa-aktion-wort small { font-size: 16px; }
}
/* Stempel: orange Wachsmal-Scheibe an der Kante zwischen Block und Foto, Schrift als echter Text */
#fx .hb-block { position: relative; }
#fx .fa-stempel { position: absolute; z-index: 3; right: -88px; top: -66px; width: 178px; height: 178px; display: grid; place-content: center; text-align: center;
  color: #111; transform: rotate(-9deg); background: var(--wpr-bg-960dfa24-7cc9-44b6-add2-77de4553e02c) center / contain no-repeat; pointer-events: none; }
#fx .fa-stempel b { display: block; font-size: 52px; font-weight: 900; line-height: .95; letter-spacing: -.02em; }
#fx .fa-stempel span { display: block; margin-top: 2px; font-size: 18px; font-weight: 800; line-height: 1.1; }
@media (max-width: 1199px) { #fx .fa-stempel { right: -78px; top: -66px; width: 166px; height: 166px; } #fx .fa-stempel b { font-size: 44px; } #fx .fa-stempel span { font-size: 16px; } }
@media (max-width: 699px) { #fx .fa-stempel { right: 10px; top: -170px; width: 158px; height: 158px; } #fx .fa-stempel b { font-size: 38px; } #fx .fa-stempel span { font-size: 16px; } }

/* Startseite: Streichpreise an den 78 Preisstellen (fa_start_preis_html). Nur hier, der Shop hat eigene Regeln in shop.css. */
#fx.fx-26 .fa-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#fx.fx-26 .fa-alt { color: #5c5c5c; font-weight: 500; font-size: .72em; text-decoration-thickness: 2px; margin-right: .3em; white-space: nowrap; }
#fx.fx-26 .fa-neu { background: #F49517; color: #111; padding: 0 .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap; }
#fx.fx-26 .wz-ding-preis .fa-alt, #fx.fx-26 .wz-top-preis .fa-alt { display: block; width: fit-content; margin: 0 0 3px; }
#fx.fx-26 .wz-gruppe-unter .fa-neu, #fx.fx-26 .wz-serie-unter .fa-neu, #fx.fx-26 .wz-tafel-unter .fa-neu, #fx.fx-26 .wz-sockel-unter .fa-neu { padding: 0 .12em; }

/* Produktseiten: alter Preis vor #fa-price, kleines Etikett dahinter (vom Aktionsmodul eingesetzt). Die Produktseite setzt Spannen in der
   Preiszeile selbst zurück ⇒ hier mit !important (nur diese drei Klassen der Aktion) */
.fa-aktion-alt { display: inline !important; color: #5c5c5c !important; font-size: 17px !important; font-weight: 500 !important; margin: 0 .4em 0 0 !important;
  text-decoration: line-through !important; text-decoration-thickness: 2px !important; white-space: nowrap !important; background: none !important; }
.fa-aktion-alt[hidden], .fa-aktion-etikett[hidden] { display: none !important; }
.fa-aktion-etikett { display: inline-block !important; margin: 0 0 0 8px !important; padding: 2px 8px !important; background: #F49517 !important; color: #111 !important;
  font-size: 13px !important; font-weight: 800 !important; line-height: 1.4 !important; border-radius: 999px !important; white-space: nowrap !important; vertical-align: middle !important; }
.fa-aktion-alt .fa-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }