/* FOURACTION Aktion „Black Weeks“ (06.11.2026). Wird nur geladen, solange die Aktion läuft.
   Jan 06.11.: alter Preis durchgestrichen, neuer rot, sonst nichts: keine Prozente, kein farbiger Grund. Auf Blau, Orange und Grün wäre Rot nicht lesbar, dort gilt die Schriftfarbe der Fläche.
   Die Regeln stehen hier zweimal gesichert (#fx und #fx.fx-26), weil shop.css, seiten.css und die Startseite eigene Stile für .fa-alt und .fa-neu haben. */
#fx .fa-sr, #fx.fx-26 .fa-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#fx .fa-alt, #fx.fx-26 .fa-alt { color: #555 !important; font-weight: 500 !important; text-decoration: line-through !important; text-decoration-thickness: 1.5px !important; white-space: nowrap; }
#fx .fa-neu, #fx.fx-26 .fa-neu { background: none !important; color: #D4002A !important; font-weight: 800 !important; padding: 0 !important; margin-left: 0 !important; white-space: nowrap; }
/* Hält die unsichtbaren Hilfstexte in ihrem Preis: Sonst sprengen sie aus den Wischreihen heraus die Seitenbreite */
#fx .fa-alt, #fx.fx-26 .fa-alt, #fx .fa-neu, #fx.fx-26 .fa-neu { position: relative; }
#fx.fx-26 .s1-schild .fa-alt, #fx.fx-26 .s1-schild .fa-neu,
#fx.fx-26 .wz-sockel-unter .fa-alt, #fx.fx-26 .wz-sockel-unter .fa-neu,
#fx.fx-26 .wz-tafel-unter .fa-alt, #fx.fx-26 .wz-tafel-unter .fa-neu { color: inherit !important; }

/* Startseite: Simons Foto mit Wachsmal (ein Bildsatz). Oben bleibt der Wunsch sichtbar, schmale Breiten zeigen die rechte Seite mit dem Spruch */
#fx.fx-26 .wz-hero .hb-foto .hb-bild, #fx.fx-26 .wz-hero .hb-foto picture img.hb-bild { object-position: 100% 5% !important; }
#fx#fx#fx#fx.fx-26 .wz-hero #wz-h1.fa-bw-h1 { margin: 0 0 8px !important; font: 700 15px/1.2 Gabarito, system-ui, sans-serif !important; color: #111 !important; letter-spacing: 0 !important; max-width: none !important; }
#fx .fa-bw-satz { margin: 10px 0 0 !important; font: 800 clamp(21px, 2.3vw, 30px)/1.25 Gabarito, system-ui, sans-serif !important; letter-spacing: -.015em !important; color: #111 !important; }

/* Hero B (Jan + Simon 06.11.): ruhiger wie vivimari.com. Foto genau in der Breite des Kopfinhalts (gemessen: Rand 16/28/40 px, höchstens 1.360 px, ab 1.680 px höchstens 1.520 px), Text direkt auf dem Foto, beide Knöpfe bleiben.
   „Klettergerüste vom Hersteller“ bleibt als H1 im Code, die Kontaktkarte entfällt. Das Modul setzt .fa-bw-hero nur während der Black Weeks; fehlt die Klasse, greift die alte Darstellung darüber.
   Der weiche Schatten hängt am Text, nicht an der Fotoecke, damit der Kontrast auf jedem Gerät gleich bleibt. Vier Anordnungen je Fensterform, gemessen mit werkzeug/hero_kontrast.mjs. */
#fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero #wz-h1.fa-bw-h1 { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hl6-wir { display: none !important; }
@media (max-width: 699px) {
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .fa-bw-gross { margin-top: 0 !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-tun { margin-top: 20px !important; }
}
/* Kleine Handys: Foto etwas flacher, damit beide Knöpfe in den ersten Bildschirm passen */
@media (max-width: 699px) and (max-height: 700px) {
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hn-bild, #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hn-bild img, #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-bild { height: 236px !important; max-height: 236px !important; }
}
/* Standard ab 700 px: flache Fenster, Überschrift einzeilig, sonst läge sie auf dem Gesicht des Jungen links */
@media (min-width: 700px) {
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero { --k: 40px; --max: 1360px; --h: clamp(220px, calc(100svh - var(--oben, 137px) - 40px), 900px); }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-foto { display: block !important; position: relative; width: min(calc(100% - 2 * var(--k)), var(--max)) !important; height: var(--h) !important; min-height: 0 !important; margin: 16px auto 0 !important; padding: 0 !important; border-radius: 20px; overflow: hidden; }
  /* Genau bei 700 px gilt in start.css noch die Handy-Regel fürs Bild (max-width: 700px, aspect-ratio 4/5), deshalb Lage und Größe hier fest (Codex 06.11.) */
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-foto .hb-bild { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-position: 100% 22% !important; border-radius: 20px; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-block { position: absolute !important; left: 32px; bottom: 26px; z-index: 2; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; background: none; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .4); }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-block::before { content: ""; position: absolute; z-index: -1; inset: -40px -56px -44px -56px; background: rgba(8, 14, 6, .62); border-radius: 44px; filter: blur(24px); pointer-events: none; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .fa-bw-gross { margin: 0 !important; line-height: 1 !important; color: #fff !important; font-size: clamp(30px, 2.6vw, 46px) !important; white-space: nowrap; text-shadow: inherit; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .fa-bw-satz { margin-top: 10px !important; font-size: clamp(19px, 1.6vw, 26px) !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-p { width: 0; min-width: 100%; max-width: none !important; margin: 10px 0 0 !important; color: #fff !important; font-size: clamp(16px, 1.12vw, 18px) !important; line-height: 1.4 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 1px 12px rgba(0, 0, 0, .6); text-wrap: pretty; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-tun { margin: 14px 0 0 !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hl6-knoepfe { flex-wrap: nowrap; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hl6-k { min-height: 50px; padding: 0 22px; font-size: 16px !important; white-space: nowrap; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hl6-k1 { background: #fff; color: #111; border-color: #fff; text-shadow: none; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hl6-k1:hover { background: #f2f2f2; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hl6-k2 { background: rgba(0, 0, 0, .28); color: #fff; border-color: #fff; text-shadow: none; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hl6-k2:hover { background: rgba(0, 0, 0, .5); }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hl6-k:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
}
@media (min-width: 700px) and (max-width: 1023px) { #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero { --k: 16px; } }
@media (min-width: 1024px) and (max-width: 1279px) { #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero { --k: 28px; } }
@media (min-width: 1680px) { #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero { --max: 1520px; } }
/* Hohe Fenster im Querformat: Überschrift groß und zweizeilig */
@media (min-width: 700px) and (min-height: 900px) and (orientation: landscape) {
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-block { left: 40px; bottom: 30px; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .fa-bw-gross { font-size: clamp(40px, 3.7vw, 58px) !important; white-space: normal; max-width: 8.6em !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .fa-bw-satz { margin-top: 12px !important; font-size: clamp(20px, 1.8vw, 28px) !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-p { margin-top: 12px !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-tun { margin-top: 16px !important; }
}
/* Hochformat: Unten im Foto liegt Wiese, also breit und flach */
@media (min-width: 700px) and (orientation: portrait) {
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-block { left: 24px; bottom: 24px; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .fa-bw-gross { font-size: clamp(34px, 5.4vw, 50px) !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .fa-bw-satz { font-size: clamp(20px, 3vw, 26px) !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-p { min-width: min(600px, calc(100vw - 2 * var(--k) - 48px)); }
}
/* Sehr flache Fenster (Handy quer, starker Zoom): ohne Satz, wie am Handy */
@media (min-width: 700px) and (max-height: 559px) {
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero { --h: clamp(200px, calc(100svh - var(--oben, 137px) - 20px), 420px); }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-foto { margin-top: 8px !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-block { left: 20px; bottom: 14px; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .fa-bw-gross { font-size: 27px !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .fa-bw-satz { margin-top: 6px !important; font-size: 17px !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-p { display: none !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hb-tun { margin-top: 10px !important; }
  #fx#fx#fx#fx.fx-26 .wz-hero.fa-bw-hero .hl6-k { min-height: 44px; padding: 0 16px; font-size: 14px !important; }
}

/* Produktseite: neuer Preis rot mit rotem Wachsmal-Strich, der alte durchgestrichen dahinter */
#fa-price.fa-bw-preis { color: #D4002A !important; background: var(--wpr-bg-3232fbb6-c1ce-41a9-9d7d-bd1b13b7e38b) 0 100% / 100% .36em no-repeat !important; padding-bottom: .26em !important; }
#fa-price.fa-bw-preis + .fa-aktion-alt { font-size: 20px !important; color: #555 !important; margin: 0 0 0 12px !important; align-self: center; }

/* Ab hier die Regeln der Aktion Halloween; die Klassen kommen in den Black Weeks nicht vor, die .fa-alt-Regeln oben haben Vorrang durch !important */

/* 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-b7f049dd-f493-4f7c-9466-9208986301ad) 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; }

/* Produktseite: Prozent-Plakette hinter dem Streichpreis (Simon 06.11.2026: „kannst du hier noch die % ergänzen? Also -15% dazuschreiben?“).
   Nur sichtbar, wenn die Einstellung preis_prozent an ist (Vorgabe aus, Jan 06.11.: „keine Prozente“ – Entscheidung offen). */
.fa-aktion-prozent {
  display: inline-block !important; margin: 0 0 0 10px !important; padding: 3px 9px !important; background: #D4002A !important; color: #fff !important;
  font-size: 16px !important; font-weight: 800 !important; line-height: 1.35 !important; border-radius: 6px !important; white-space: nowrap !important;
  align-self: center; letter-spacing: .01em !important; font-variant-numeric: tabular-nums;
}
.fa-aktion-prozent[hidden] { display: none !important; }
@media (max-width: 760px) {
  .fa-aktion-prozent { font-size: 14px !important; padding: 2px 7px !important; margin-left: 8px !important; }
}