/* =====================================================================
   Fixecke — Design 2026: Dark Premium.
   Liegt ALS EBENE ueber fixecke.css (wird danach geladen). Loeschen oder
   Enqueue entfernen = alter Stand. Farben/Abstaende der Basis werden hier
   ueberschrieben, die Struktur bleibt unangetastet.

   Warum dunkel: Der Neon-Ring ist das staerkste Marken-Motiv (Instagram,
   Hero-Foto, Produktbilder) — Neon leuchtet nur auf Dunkel. Dazu sitzt die
   Zielgruppe in dunklen Interfaces (PS5-Menue, Steam, Discord).
   ===================================================================== */

:root {
  /* Markenverlauf auf Violett -> Blau gezogen: exakt die Farben aus dem
     Neon-Ring und den Produktbannern. Vorher Violett -> Rosa. */
  --fx-violet: #8B45FF;
  --fx-violet-2: #2E86FF;
  --fx-grad: linear-gradient(100deg, #8B45FF, #2E86FF);

  /* Flaechen */
  --fx-bg: #08070F;
  --fx-surface: #12111C;
  --fx-surface-2: #191725;
  --fx-line: rgba(255, 255, 255, .09);
  --fx-line-strong: rgba(255, 255, 255, .16);

  /* Schrift — bewusst ueber die Basis-Variablen, damit `body{color:var(--fx-ink)}`
     und alle .fx-* Regeln automatisch mitziehen. */
  --fx-ink: #ECEAF5;
  /* Fliesstext zweiter Ordnung (Kartentexte, Unterzeilen) — bewusst HELLER als ein
     klassisches Grau. Auf grossen dunklen Flaechen wirkt Text optisch matter, als
     die reine Kontrastzahl vermuten laesst; #CFCADD liest sich ruhig und klar
     (~12:1), bleibt aber deutlich unter den weissen Ueberschriften. */
  --fx-ink-2: #CFCADD;
  /* Nur noch fuer Beiwerk: Fusszeile, Preis-Zusaetze, Hilfstexte. */
  --fx-muted: #B3AEC6;

  --fx-glow: 0 10px 30px rgba(139, 69, 255, .30);
  --fx-glow-strong: 0 14px 44px rgba(139, 69, 255, .45);
}

/* ---------- Grundflaeche + Neon-Dunst ---------- */
body { background-color: var(--fx-bg) !important; color: var(--fx-ink); }

body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(720px 460px at 10% -10%, rgba(139, 69, 255, .22), transparent 70%),
    radial-gradient(640px 420px at 92% 2%,  rgba(46, 134, 255, .16), transparent 72%),
    radial-gradient(700px 500px at 50% 105%, rgba(139, 69, 255, .10), transparent 70%);
}
.wp-site-blocks { position: relative; z-index: 1; }

::selection { background: rgba(139, 69, 255, .38); color: #fff; }

h1, h2, h3, h4, h5,
.wp-block-heading, .wp-block-post-title { color: var(--fx-ink); }
p, li, dd, dt, td, th, label, figcaption { color: var(--fx-ink); }
hr, .wp-block-separator { border-color: var(--fx-line) !important; opacity: 1; }

/* Auf der Startseite ist der Seitentitel "Start" ueberfluessig — die Hero-H1
   uebernimmt. Auf allen anderen Seiten bleibt er stehen. */
body.home .wp-block-post-title { display: none; }

/* ---------- Kopfleiste: klebt mit, damit der CTA immer erreichbar ist ---------- */
header.wp-block-template-part {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 7, 15, .74);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1px solid var(--fx-line);
}
.wp-block-site-title a { background-image: url("fixecke-logo-dark.svg") !important; }
.fx-nav a { color: #B9B4CE; }
.fx-nav a:hover { color: #fff; }
.fx-nav .fx-nav-cta { box-shadow: var(--fx-glow); }
.fx-nav .fx-nav-cta:hover { box-shadow: var(--fx-glow-strong); }

/* ---------- Knoepfe: Verlauf + Glimmen + Licht-Wisch ---------- */
.wp-block-button__link, .wc-block-components-button, button.button, a.button, .button,
.single_add_to_cart_button, .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button, .wp-element-button {
  position: relative; overflow: hidden;
  box-shadow: var(--fx-glow) !important;
}
.wp-block-button__link:hover, .wc-block-components-button:hover, button.button:hover,
a.button:hover, .wp-element-button:hover, .single_add_to_cart_button:hover {
  box-shadow: var(--fx-glow-strong) !important;
  transform: translateY(-2px);
}
.wp-element-button::after, a.button::after, button.button::after,
.wc-block-components-button::after {
  content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .30), transparent);
  transform: skewX(-18deg); transition: left .55s ease;
}
.wp-element-button:hover::after, a.button:hover::after, button.button:hover::after,
.wc-block-components-button:hover::after { left: 130%; }

/* Heller Umriss-Knopf */
.fx-btn-line {
  background: rgba(255, 255, 255, .04) !important;
  color: var(--fx-ink) !important;
  border-color: var(--fx-line-strong) !important;
}
.fx-btn-line:hover { border-color: var(--fx-violet) !important; color: #fff !important; }

/* ---------- Hero ---------- */
.fx-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(28, 25, 44, .92), rgba(16, 15, 26, .94)) !important;
  border: 1px solid var(--fx-line);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55) !important;
}
/* feine Lichtkante oben — laesst die Karte "gefertigt" statt flach wirken */
.fx-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 140, 255, .65), transparent);
}
.fx-hero h1 { color: #fff; }
.fx-hero p { color: var(--fx-ink-2) !important; }
.fx-hero-sub { color: var(--fx-muted) !important; }
.fx-badge {
  background: rgba(139, 69, 255, .14) !important;
  border: 1px solid rgba(139, 69, 255, .38);
  color: #CBB4FF !important;
}
/* Squad-Badge & Warenkorb-Zähler: auf Dunkel ein weicher Markenschein zum Abheben */
.fx-squad-badge { box-shadow: var(--fx-glow) !important; }
.fx-squad-badge:hover { box-shadow: var(--fx-glow-strong) !important; }
.fx-squad-badge__pct { background: rgba(255, 255, 255, .20); }
.fx-cart-count { box-shadow: 0 4px 14px rgba(139, 69, 255, .4); }
/* Dropdown-Puls in Markenviolett der Dark-Ebene */
@keyframes fx-book-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(139, 69, 255, .40); } 50% { box-shadow: 0 0 0 7px rgba(139, 69, 255, 0); } }
.fx-grad-text, .fx-step .n {
  background: linear-gradient(100deg, #A96BFF, #4FA0FF) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}
/* Hero-Bild: das Neonring-Foto bringt seinen eigenen dunklen Grund mit und soll in
   die Seite uebergehen statt als Karte draufzuliegen — deshalb kein Rahmen, kein
   Kasten-Schatten, nur ein weicher violetter Schein. */
.fx-hero-img {
  border: 0 !important;
  border-radius: 20px;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 20px 60px rgba(139, 69, 255, .28));
  /* Pflicht, sobald max-width angefasst wird: sonst schlaegt das height-Attribut
     aus dem HTML (height="1402") durch und das Foto wird auf volle Pixelhoehe
     gezogen. */
  height: auto !important;
}

/* Desktop: zweispaltiger Hero — Text links, Foto rechts.
   Das Foto ist hochkant (1122x1402); untereinander wuerde der Hero dadurch
   uebermaessig hoch. Nebeneinander bleibt der Kauf-Knopf ueber der Falz und die
   Produkte ruecken nach oben. Handy bleibt gestapelt wie bisher. */
@media (min-width: 900px) {
  .fx-hero {
    display: flex;
    align-items: center;
    gap: 48px;
    text-align: left;
    padding: 52px 48px;
  }
  .fx-hero-copy { flex: 1 1 0; min-width: 0; }
  .fx-hero-copy p { margin-left: 0; margin-right: 0; }
  .fx-hero-img { flex: 0 0 42%; max-width: 42%; margin: 0; }

  /* Die Ueberschrift hat in der halben Breite weniger Platz — etwas kleiner
     skalieren, damit "Meine Leidenschaft." auf einer Zeile bleibt. */
  .fx-hero h1 { font-size: clamp(34px, 3.9vw, 54px); }

  /* Buchungszeile in schmalerer Spalte: der Knopf darf nie umbrechen. Wird es zu
     eng, rutscht er stattdessen unter das Auswahlfeld — beide bleiben voll lesbar. */
  .fx-hero .fx-book { justify-content: flex-start; margin-left: 0; margin-right: 0; flex-wrap: wrap; }
  .fx-hero .fx-book select { flex: 1 1 240px; min-width: 0; }
  .fx-hero .fx-book select.fx-book__qty { flex: 0 0 96px; min-width: 0; }
  .fx-hero .fx-book button { flex: 0 0 auto; white-space: nowrap; }
  .fx-hero .fx-hero-sub { margin-top: 18px; }
}

/* Der Knopf soll nie mitten im Wort umbrechen — auch nicht in engen Spalten. */
@media (min-width: 561px) {
  .fx-book button { white-space: nowrap; }
}

/* ---------- Karten: Glas + Neon-Kante beim Drueberfahren ---------- */
.fx-tile, .fx-step, .fx-why-card,
ul.products li.product, li.wc-block-product, .wc-block-grid__product {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)) !important;
  border: 1px solid var(--fx-line);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .42) !important;
  transition: transform .22s cubic-bezier(.22, .61, .36, 1),
              box-shadow .22s ease, border-color .22s ease;
}
.fx-tile:hover, .fx-step:hover, .fx-why-card:hover,
ul.products li.product:hover, li.wc-block-product:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 69, 255, .55);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(139, 69, 255, .22),
              0 12px 40px rgba(139, 69, 255, .22) !important;
}
.fx-tile b, .fx-step b, .fx-why-card h3 { color: #fff; }
.fx-tile span, .fx-step span, .fx-why-card p, .fx-sub { color: var(--fx-ink-2) !important; }
.fx-tile svg { background: rgba(139, 69, 255, .16) !important; color: #C2A3FF !important; }
.fx-h2 { color: #fff; }

/* ---------- Produktbilder: bewusst als helle "Datenblatt"-Karten ---------- */
ul.products li.product img, li.wc-block-product img, .wc-block-grid__product-image img {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
ul.products li.product .woocommerce-loop-product__title,
li.wc-block-product .wc-block-components-product-name { color: #fff !important; }
.woocommerce-Price-amount, .wc-block-components-product-price, .price {
  color: #fff !important; font-weight: 700;
}
.fixecke-suffix { color: var(--fx-muted) !important; }

/* ---------- Abschluss-Band ---------- */
.fx-cta {
  box-shadow: 0 24px 70px rgba(139, 69, 255, .34) !important;
  border: 1px solid rgba(255, 255, 255, .14);
}

/* ---------- Formulare (auch Kasse!): dunkel, aber gut lesbar ---------- */
.fx-book select,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="password"], input[type="url"], select, textarea,
.wc-block-components-text-input input, .wc-block-components-textarea {
  background: #16141F !important;
  color: var(--fx-ink) !important;
  border: 1.5px solid var(--fx-line-strong) !important;
}
.fx-book select:focus,
input:focus, select:focus, textarea:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--fx-violet) !important;
  box-shadow: 0 0 0 4px rgba(139, 69, 255, .22) !important;
  outline: none !important;
}
/* Mengenfeld im Hero (24.08.2026): bleibt schmal statt wie das lange Auswahlfeld
   mitzuwachsen, und pulsiert nicht mit — das Pulsieren soll auf "Service waehlen"
   zeigen, nicht auf die Menge, die ohnehin schon auf 1 steht. */
.fx-book select.fx-book__qty { flex: 0 0 96px; min-width: 0; max-width: 96px; animation: none; }
::placeholder { color: #7C7791 !important; opacity: 1; }
.wc-block-components-text-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-title, .wc-block-components-totals-item__label,
.wc-block-components-product-metadata, .wc-block-components-checkbox__label {
  color: var(--fx-ink) !important;
}
.wc-block-components-checkout-step__description,
.wc-block-components-address-card address { color: var(--fx-muted) !important; }

/* Warenkorb-/Kassen-Flaechen */
.wc-block-components-panel, .wc-block-components-sidebar,
.wc-block-cart-items, .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary, .woocommerce-order-details, .woocommerce-customer-details,
table.shop_table, .cart_totals, .woocommerce-info, .woocommerce-message {
  background: var(--fx-surface) !important;
  color: var(--fx-ink) !important;
  border-color: var(--fx-line) !important;
  border-radius: 16px;
}
table.shop_table th, table.shop_table td,
.wc-block-cart-items__row, .wc-block-components-totals-item {
  border-color: var(--fx-line) !important; color: var(--fx-ink) !important;
}
.woocommerce-info, .woocommerce-message { border-top: 3px solid var(--fx-violet) !important; }

/* ---------- Fussleiste ---------- */
.fx-footbar { color: var(--fx-muted); border-top: 1px solid var(--fx-line); padding-top: 26px; }
.fx-footbar a { color: var(--fx-muted); }
.fx-footbar a:hover { color: #fff; }

/* ---------- Rechtstexte: langer Fliesstext muss ruhig lesbar bleiben ---------- */
.entry-content p, .entry-content li { color: #D5D1E4; }
.entry-content a { color: #A98BFF; }

/* ---------- Fortschrittsbalken "Auftrag verfolgen" ---------- */
.fx-track-step .bar { background: rgba(255, 255, 255, .12); }
.fx-track-step .lbl { color: #857FA0; }

/* =====================================================================
   Korrekturen gegen die Inline-Styles der Startseite.
   Die Seite bringt eigene <style>-Bloecke mit, die NACH dieser Datei im
   Dokument stehen — bei gleicher Spezifitaet gewinnen sie. Darum hier
   gezielt !important, nur wo noetig.
   ===================================================================== */
.fx-why-card h3 { color: #fff !important; }
.fx-why-card { border-color: var(--fx-line) !important; }
.fx-why-card p { color: var(--fx-ink-2) !important; }

/* ---------- Produkt-Raster: Grid statt Woo-Floats ----------
   WooCommerce legt die Kacheln mit float + clear nebeneinander. Sobald die
   Karten unterschiedlich hoch sind (unsere Titel sind es), verhaken sich die
   Floats und das Raster faellt auseinander — genau das passierte hier.
   Ein echtes Grid loest das dauerhaft und macht die Karten gleich hoch. */
/* Der Shortcode-Container haengt ausserhalb von .fx-wrap und wird vom Theme
   auf die schmale Standard-Breite (645px) gedeckelt, waehrend alle anderen
   Abschnitte 1140px nutzen. Gleiche Breite herstellen. */
.woocommerce, .woocommerce.columns-4 {
  max-width: 1140px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* WooCommerce setzt hier einen alten Clearfix per ::before/::after. Im Grid
   werden daraus zwei echte Zellen — dadurch rutschte die erste Reihe ein. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products::before, ul.products::after { display: none !important; }

.woocommerce ul.products, ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 1.5em !important;
  overflow: visible;
}
@media (min-width: 760px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1040px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
.woocommerce ul.products li.product, ul.products li.product {
  width: auto !important; float: none !important; clear: none !important;
  margin: 0 !important; padding: 14px !important;
  display: flex; flex-direction: column;
}
ul.products li.product a.woocommerce-loop-product__link {
  display: flex; flex-direction: column; flex: 1 1 auto;
}
ul.products li.product img { width: 100%; height: auto; margin: 0 0 10px !important; }
ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important; line-height: 1.3 !important; padding: 0 !important;
}
/* Preis nach unten druecken -> alle Knoepfe stehen auf einer Linie */
ul.products li.product .price { margin-top: auto; padding-top: 8px; font-size: 16px !important; }
ul.products li.product .button {
  margin-top: 10px !important; width: 100%; text-align: center;
  padding: .72em 1em !important; font-size: 14px !important;
}

/* ---------- Shop-Seite: neueres Block-Raster (li.wc-block-product) ----------
   Die Startseite nutzt den [products]-Shortcode (ul.products), die Shop-Seite
   das Produkt-Block-Template. Beide sollen identisch aussehen. */
li.wc-block-product { display: flex; flex-direction: column; padding: 16px !important; }
li.wc-block-product .wc-block-components-product-image img,
li.wc-block-product .wc-block-grid__product-image img {
  border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  width: 100%; height: auto;
}
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wc-block-components-product-title { color: #fff !important; font-size: 16px !important; }
li.wc-block-product .wc-block-components-product-price { margin-top: auto; padding-top: 8px; }
li.wc-block-product .wc-block-components-product-button { margin-top: 10px; }
li.wc-block-product .wc-block-components-product-button__button { width: 100%; }

/* Sortier-Auswahl: eigener Pfeil, damit das Feld auf Dunkel sauber wirkt */
.woocommerce-ordering select, .fx-book select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23A29DBA' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 40px !important;
}

/* ---------- Abschluss-Band: satter Verlauf statt grellem Violett-Rosa ---------- */
.fx-cta {
  background: linear-gradient(112deg, #5E22C8 0%, #8B45FF 46%, #2E86FF 100%) !important;
}
.fx-cta h2 { color: #fff !important; }
.fx-cta p { color: rgba(255, 255, 255, .88) !important; }
.fx-cta .wp-element-button, .fx-cta a.fx-white-btn {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35) !important;
}

/* ---------- Info-Kaesten (.fx-note) ----------
   Bewusst ANDERS als im hellen Modus: dort ist die ganze Flaeche gruen/rot
   eingefaerbt. Auf Dunkel wirkt das billig und frisst den Kontrast. Deshalb hier
   eine ruhige dunkle Flaeche, und der Zustand steckt allein in der farbigen
   Kante links (so machen es Apple, Stripe und Linear). */
.fx-note {
  background: var(--fx-surface-2) !important;
  color: var(--fx-ink) !important;
  border: 1px solid var(--fx-line) !important;
  border-left: 3px solid var(--fx-violet) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.fx-note a       { color: #B48CFF !important; }
.fx-note a:hover { color: #D3BCFF !important; }
.fx-note summary { color: #C4A6FF !important; }
.fx-note strong, .fx-note b { color: #fff; }
.fx-note--ok   { border-left-color: #3DDC84 !important; }
.fx-note--bad  { border-left-color: #FF6B5E !important; }
.fx-note--warn { border-left-color: #FFB020 !important; }
.fx-note--info { border-left-color: var(--fx-violet-2) !important; }

/* Marken-Kasten (soziale Einrichtungen): vorher ein voll gesaettigter Verlaufs-
   block — auf Dunkel schreit der lauter als der Kauf-Knopf. Jetzt getoent statt
   gefuellt: faellt auf, ordnet sich aber dem eigentlichen Ziel unter. */
.fx-note--marke {
  background: linear-gradient(100deg, rgba(139, 69, 255, .20), rgba(46, 134, 255, .13)) !important;
  border: 1px solid rgba(139, 69, 255, .42) !important;
  border-left: 3px solid var(--fx-violet) !important;
}
.fx-note--marke strong { color: #fff; font-size: 16px; }
.fx-note--marke p { color: var(--fx-ink-2) !important; }

/* FAQ-Fragen: dezente Kante statt 2px-Rahmen — zehn Vollrahmen untereinander
   wirken auf Dunkel unruhig. */
.fx-faq-q {
  background: var(--fx-surface-2) !important;
  color: #fff !important;
  border: 1px solid var(--fx-line) !important;
  border-left: 3px solid var(--fx-violet) !important;
  /* Die Frage muss groesser lesen als die Antwort — sonst kippt die Hierarchie. */
  font-size: 19px !important;
  font-weight: 700;
  padding: 12px 18px;
}

/* Storno: bewusst kein Verlaufs-Knopf — Abbrechen darf nicht wie Kaufen aussehen */
.fx-btn-storno {
  background: transparent !important;
  color: #FF8C82 !important;
  border: 1.5px solid rgba(255, 107, 94, .55) !important;
  border-radius: 999px; padding: 9px 20px;
  font-weight: 600; cursor: pointer; box-shadow: none !important;
}
.fx-btn-storno:hover { border-color: #FF6B5E !important; color: #FFB3AC !important; }

/* ---------- Fusszeile (eigenes Template im Child-Theme) ---------- */
footer.wp-block-template-part {
  border-top: 1px solid var(--fx-line);
  margin-top: 46px;
}
.fx-nav-foot a { font-size: 14px; }

/* ---------- Barrierefreiheit ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-tile, .fx-step, .fx-why-card, ul.products li.product, li.wc-block-product,
  .wp-element-button, a.button, button.button { transition: none !important; }
  .wp-element-button::after, a.button::after, button.button::after,
  .wc-block-components-button::after { display: none; }
}

/* Mobil: die Nav-CTA bekommt eine eigene volle Zeile mit Luft nach oben, sonst
   klemmt sie unter der umgebrochenen Navigation. box-sizing:border-box ist Pflicht:
   flex-basis:100% setzt die Breite auf die volle Zeile, und ohne border-box legt sich
   das seitliche Padding oben drauf, die CTA ragt dann rechts ueber den Bildschirmrand
   hinaus (gefunden 24.08.2026, unabhaengig vom Text). */
@media (max-width: 640px){
  .fx-nav { row-gap: 12px; }
  .fx-nav .fx-nav-cta { flex: 1 0 100%; text-align: center; margin-top: 4px; padding: 12px 22px; box-sizing: border-box; }
}

/* Shop nach Konsole gruppiert: Abschnitts-Überschriften */
.fx-shopgroup{max-width:1180px;margin:38px auto 6px;padding:0 16px}
.fx-shopgroup h3{font-size:19px;font-weight:800;letter-spacing:.01em;margin:0;color:var(--fx-ink)}
.fx-shopgroup + .wc-block-grid,.fx-shopgroup + .woocommerce{margin-top:8px}

/* Footer: Fragen-Aufruf */
.fx-foot-help{text-align:center;margin:22px auto 12px;font-size:14px;color:var(--fx-ink-2)}
.fx-foot-help__btn{color:#B48CFF;font-weight:700;text-decoration:none;white-space:nowrap}
.fx-foot-help__btn:hover{text-decoration:underline}
/* Footer: Zahlungs-Icons */
.fx-paybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 auto 16px;max-width:900px;padding:0 16px}
.fx-paybar__label{font-size:12px;color:var(--fx-muted);margin-right:4px}
.fx-pay{display:inline-flex;align-items:center;justify-content:center;height:26px;min-width:46px;padding:0 9px;background:#fff;border-radius:5px;font-weight:800;font-size:12px;letter-spacing:.02em;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.fx-pay--visa{color:#1a1f71;font-style:italic}
.fx-pay--klarna{background:#ffb3c7;color:#0a0a0a;font-weight:700}
.fx-pay--bank{background:#e8e8ef;color:#333;font-weight:600;font-size:11px}
.fx-pay--mc{gap:0;padding:0 12px}
.fx-pay--mc i{width:15px;height:15px;border-radius:50%;display:block}
.fx-pay--mc i:first-child{background:#eb001b}
.fx-pay--mc i:last-child{background:#f79e1b;margin-left:-6px;mix-blend-mode:multiply}

/* ---------- Warenkorb-Angebote: schwarzes Bottom-Sheet (fixecke-upsell-ps5.php) ---------- */
.fx-cartsheet{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:linear-gradient(180deg,#0d0c14,#08070d);
  border-top:3px solid #8B45FF;
  border-image:linear-gradient(100deg,#8B45FF,#2E86FF) 1;
  box-shadow:0 -14px 40px rgba(0,0,0,.55);
  animation:fxSheetUp .34s cubic-bezier(.2,.8,.2,1) both;
}
.fx-cartsheet[hidden]{ display:none; }
@keyframes fxSheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.fx-cartsheet__inner{ position:relative; max-width:1140px; margin:0 auto; padding:14px 48px 14px 20px; }
.fx-cartsheet__rows{ display:flex; flex-direction:column; gap:10px; }
.fx-cartsheet__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.fx-cartsheet__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fx-cartsheet__txt strong{ color:var(--fx-ink,#ECEAF5); font-size:15px; font-weight:800; }
.fx-cartsheet__txt span{ color:var(--fx-ink-2,#CFCADD); font-size:13px; line-height:1.4; }
.fx-cartsheet__txt b{ color:#B48CFF; }
.fx-cartsheet__btn{
  flex:0 0 auto; white-space:nowrap; cursor:pointer;
  background:var(--fx-grad,linear-gradient(100deg,#8B45FF,#2E86FF)); color:#fff;
  border:0; border-radius:11px; padding:11px 20px; font-weight:700; font-size:14px;
  box-shadow:0 4px 16px rgba(139,69,255,.35);
}
.fx-cartsheet__btn:hover{ filter:brightness(1.07); }
.fx-cartsheet__btn:disabled{ opacity:.6; cursor:default; }
.fx-cartsheet__btn--ghost{ background:transparent; color:#C9BEFF; border:1.5px solid rgba(139,69,255,.5); box-shadow:none; }
.fx-cartsheet__btn--ghost:hover{ border-color:#8B45FF; color:#E7DEFF; }
.fx-cartsheet__x{
  position:absolute; top:8px; right:10px; width:30px; height:30px; line-height:28px; text-align:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.08); color:#CFCADD; font-size:20px; cursor:pointer;
}
.fx-cartsheet__x:hover{ background:rgba(255,255,255,.16); color:#fff; }
body.fx-sheet-open{ padding-bottom:160px; }
@media (max-width:640px){
  .fx-cartsheet__inner{ padding:12px 40px 14px 14px; }
  .fx-cartsheet__row{ flex-direction:column; align-items:stretch; gap:8px; }
  .fx-cartsheet__btn{ width:100%; text-align:center; padding:12px 18px; }
  body.fx-sheet-open{ padding-bottom:220px; }
}
@media (prefers-reduced-motion:reduce){ .fx-cartsheet{ animation:none; } }

/* ===== Warenkorb-Karussell: alle Produkte (fx-cc) ===== */
.wp-block-woocommerce-cart-cross-sells-block{display:none!important;} /* native (engl.) "You may be interested in" aus, alte Markup-Klasse */
.wp-block-woocommerce-cart-items-block .wp-block-woocommerce-product-collection{display:none!important;} /* dieselbe Reihe, seit einem WooCommerce-Update neue Klasse */

.fx-cc{max-width:1140px;margin:26px auto 10px;padding:0 4px;}
.fx-cc__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 14px;}
.fx-cc__title{font-size:clamp(1.05rem,2.4vw,1.4rem);font-weight:800;letter-spacing:.2px;margin:0;color:var(--fx-ink,#ECEAF5);}
.fx-cc__nav{display:flex;gap:8px;flex:0 0 auto;}
.fx-cc__arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--fx-line,#2a2740);background:var(--fx-surface-2,#191725);color:var(--fx-ink,#ECEAF5);font-size:1.35rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s,transform .1s;}
.fx-cc__arrow:hover{border-color:var(--fx-violet,#8B45FF);background:#211d33;}
.fx-cc__arrow:active{transform:scale(.92);}
.fx-cc__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}
.fx-cc__track::-webkit-scrollbar{height:8px;}
.fx-cc__track::-webkit-scrollbar-thumb{background:var(--fx-line,#2a2740);border-radius:8px;}
.fx-cc__track::-webkit-scrollbar-track{background:transparent;}
.fx-cc__card{flex:0 0 clamp(158px,44vw,196px);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--fx-surface-2,#191725);border:1px solid var(--fx-line,#2a2740);border-radius:16px;overflow:hidden;transition:border-color .16s,transform .16s,box-shadow .16s;}
.fx-cc__link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit;}
.fx-cc__card:hover{border-color:var(--fx-violet,#8B45FF);transform:translateY(-3px);box-shadow:0 10px 26px -12px rgba(139,69,255,.55);}
.fx-cc__imgwrap{display:block;background:#0d0c16;aspect-ratio:16/10;overflow:hidden;}
.fx-cc__imgwrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s;}
.fx-cc__card:hover .fx-cc__imgwrap img{transform:scale(1.05);}
.fx-cc__body{display:flex;flex-direction:column;gap:5px;padding:11px 13px 13px;flex:1;}
.fx-cc__name{font-weight:700;font-size:.9rem;line-height:1.25;color:var(--fx-ink,#ECEAF5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em;}
.fx-cc__price{font-weight:800;font-size:1.02rem;color:var(--fx-ink,#ECEAF5);}
.fx-cc__price .woocommerce-Price-amount{color:var(--fx-ink,#ECEAF5);}
.fx-cc__cta{margin:auto 11px 13px;width:auto;text-align:center;display:block;padding:.62em .8em !important;font-size:.82rem !important;}
@media (max-width:640px){.fx-cc__nav{display:none;}.fx-cc__card{flex-basis:44vw;}}

/* ---------- Ankersprünge ----------
   Die Kopfleiste klebt oben (header.wp-block-template-part). Ohne
   scroll-padding scrollt der Browser das Sprungziel exakt an den oberen
   Rand — und der Header legt sich davor. Auf dem Handy wird er 182 px hoch,
   weil der CTA-Knopf ab 640 px auf eine eigene Zeile umbricht; das Ziel
   verschwindet dann komplett dahinter.
   Auf html gesetzt, damit es für ALLE Anker gilt (#fx-buchen, #fx-ablauf …). */
html {
  scroll-padding-top: 84px;
  scroll-behavior: smooth;
}
@media (max-width: 640px) {
  html { scroll-padding-top: 196px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Kartenzahlung (Mollie) an den dunklen Checkout angleichen ----------
   Mollie liefert von Haus aus weisse Felder mit dunkler Schrift. Auf dem dunklen
   Checkout blendet das nicht nur, es macht die Beschriftungen (Standard #222)
   praktisch unlesbar. Die Farben IM Eingabefeld kommen aus den Mollie-Optionen
   (mollie_components_*), der Rahmen drumherum von hier. */
.mollie-components,
.mollie-component-wrapper{max-width:100%}
.mollie-component-label{
  display:block;margin:0 0 6px;
  color:#ECEAF5;font-size:14px;font-weight:500;
}
.mollie-components .mollie-component,
.mollie-component{
  background:#16141F;
  border:1.5px solid rgba(255,255,255,.16);
  border-radius:4px;
  padding:14px 12px;
  width:100%;max-width:100%;box-sizing:border-box;
}
.mollie-components .mollie-component.has-focus,
.mollie-components .mollie-component.is-focused,
.mollie-component.has-focus,
.mollie-component--has-focus,
.mollie-component.is-focused{border-color:#8B45FF;box-shadow:0 0 0 3px rgba(139,69,255,.22)}
.mollie-components .mollie-component.is-invalid,
.mollie-component.is-invalid,
.mollie-component--is-invalid{border-color:#FF5C6C;background:#1D1218}
.mollie-component-error,
.mollie-component-error-notice{color:#FF5C6C;font-size:13px;margin-top:4px}
.mollie-components-description{color:#B3AEC6;font-size:13px}

/* Zahlungs-Icons in der Fussleiste: echte Markenzeichen statt Textnachbau */
.fx-pay--img{padding:0 7px;min-width:44px}
.fx-pay--img img{display:block;height:18px;width:auto;max-width:46px}

/* Textlinks im Abschluss-Band. Ohne diese Regel erben sie das Violett der
   Seite und stehen damit Violett auf Violett, Kontrast 1,8 zu 1. Weiss mit
   Unterstrich liegt bei 4,8 zu 1 und ist auf dem Verlauf sicher lesbar.
   Gilt NICHT fuer die Knoepfe, die haben ihre eigene weisse Flaeche. */
.fx-cta p a:not(.wp-element-button):not(.fx-white-btn) {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 255, 255, .55);
}
.fx-cta p a:not(.wp-element-button):not(.fx-white-btn):hover,
.fx-cta p a:not(.wp-element-button):not(.fx-white-btn):focus-visible {
  text-decoration-color: #fff;
}
/* Der letzte Absatz im Band braucht keinen eigenen Rand mehr, das Band hat
   selbst schon 44px Polsterung. Sonst steht unten doppelt so viel Luft. */
.fx-cta > p:last-child { margin-bottom: 0 !important; }