/* ═══════════════════════════════════════════════════════════════════════
   ToxicHeroBanner — Artwork-Slide           Handoff „Toxic Startseite v2"
   ───────────────────────────────────────────────────────────────────────
   Alle Zahlen sind gemessen, nicht aus dem Handoff uebernommen. Wo unser
   Wert abweicht, steht der Grund daneben.

   Namensraum tx-hbn__* fuer alle Kinder: solange ToxicHeroSlide noch
   installiert ist, wird dessen CSS mitgeladen und greift auf
   .tx-hero-slide .tx-kicker / .tx-hero__title zu. Eigene Namen sind
   billiger als ein Wettlauf um Spezifitaet.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* EINE Quelle fuer die Buehnenhoehe. Der Container braucht denselben Wert,
     um Pfeile und Tabs an der Buehne auszurichten statt am Slide — der ist
     mit der Systemleiste darunter deutlich hoeher. */
  --tx-hbn-stage-h: clamp(430px, 100vw / 3.55, 640px);
}

.tx-hero-slide.tx-hero-banner {
  position: relative;
  /* KEINE feste Hoehe mehr am Slide: er traegt Buehne UND Systemleiste.
     Frueher stand hier die Hero-Hoehe — mit overflow:hidden haette das die
     Karten abgeschnitten. */
  height: auto;
  min-height: 0;
  padding: 0;
  background: var(--tx-bg, #0B0C0D);
  isolation: isolate;
}

/* Buehne: traegt Artwork, Scrim, Text und die Anzeigen-Plakette. */
.tx-hero-slide.tx-hero-banner .tx-hbn__stage {
  position: relative;
  /* `height`, nicht `min-height`: bei unbestimmter Hoehe faellt height:100%
     am Bild auf auto zurueck, das Bild sizet sich nach Seitenverhaeltnis und
     treibt die Zeile auf. */
  height: var(--tx-hbn-stage-h);
  overflow: hidden;
}

/* Bild ───────────────────────────────────────────────────────────────── */
.tx-hero-slide.tx-hero-banner .tx-hbn__pic {
  position: absolute; inset: 0;
  display: block;
  z-index: 1;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__bg {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Mittig, nicht 25 % wie beim alten Partner-Banner: die Focus Area des
     neuen Formats liegt mittig, der Bleed links und rechts. */
  object-position: center center;
  display: block;
}

/* Scrim ──────────────────────────────────────────────────────────────── */
/* Zwei Bahnen: die waagerechte traegt den Text, die senkrechte sichert die
   Tab-Zeile unten ab. Ohne die zweite steht ein inaktives Tab-Label ueber
   unbekannt hellem Artwork ohne garantierten Kontrast. */
.tx-hero-slide.tx-hero-banner .tx-hbn__scrim {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(4, 7, 10, .72) 0, transparent 92px),
    linear-gradient(90deg,
      rgba(4, 7, 10, .85) 0%,
      rgba(4, 7, 10, .40) 46%,
      transparent 72%);
}

/* Textblock ──────────────────────────────────────────────────────────── */
.tx-hero-slide.tx-hero-banner .tx-hbn__content {
  position: absolute; inset: 0; z-index: 3;
  display: flex;
  align-items: center;
  /* Der Handoff verschiebt den Block stufenweise nach oben (-62 %/-56 %),
     um Platz fuer die Tab-Zeile zu schaffen. Als Polsterung ausgedrueckt
     ist das stetig statt in drei Spruengen. */
  padding-block-end: clamp(24px, 4vw, 56px);
  pointer-events: none;        /* der Stretched Link liegt darunter */
}
.tx-hero-slide.tx-hero-banner .tx-hbn__box { width: 100%; }
.tx-hero-slide.tx-hero-banner .tx-hbn__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Handoff: fix 620px. Wir binden zusaetzlich an die Breite — bei 1100px
     ueberlappt die 620er-Zone die Produktzone des Handoffs (52 % = 572px)
     um 132px, der PC im Artwork staende dann unter der Headline. */
  max-width: min(620px, 46vw);
  min-width: 0;                /* Flex-Kind mit breitem Inhalt waechst sonst
                                  auf dessen Breite (min-width:auto) */
}

/* Typo ───────────────────────────────────────────────────────────────── */
.tx-hero-slide.tx-hero-banner .tx-hbn__kicker {
  font-family: var(--tx-sub, 'Rajdhani', sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__headline {
  display: flex;
  flex-direction: column;
  font-family: var(--tx-h, 'Oxanium', sans-serif);
  font-weight: 700;
  /* 62px statt der 72px des Handoffs. Gemessen: Oxanium ist bei gleicher
     Versalhoehe 37,7 % breiter als Saira Condensed — „KEINE KONKURRENZ."
     misst 532px in Saira und 733px in Oxanium, die Textzone hat 620px.
     Bei 62px sind es 610px, alle Slides passen ohne Ausnahme. */
  font-size: clamp(38px, 3.9vw, 62px);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
  text-shadow: none;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__hl { display: block; }
.tx-hero-slide.tx-hero-banner .tx-hbn__sub {
  font-family: var(--tx-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tx-text-dim, #BEC5C7);
  margin: 0;
}

/* CTA + Meta ─────────────────────────────────────────────────────────── */
.tx-hero-slide.tx-hero-banner .tx-hbn__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  pointer-events: auto;        /* hebt das none des Content-Blocks auf */
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cta {
  position: relative;
  display: inline-block;
  font-family: var(--tx-h, 'Oxanium', sans-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  background: var(--tx-mint, #01DEC2);
  color: #03100D;              /* 11,28:1. Weiss waere 1,72:1 — genau der
                                  offene Blocker „Hero-Gruen-Button". */
  /* Unsere Markensignatur: ZWEI gekappte Ecken à 14px. Der Handoff hat nur
     eine unten rechts — dann waere es der einzige Button im Shop mit
     abweichender Silhouette. Auf so einer Kante wird ein echter border beim
     Rastern abrasiert, deshalb inset-Schatten. */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px,
                     100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: inset 0 0 0 1px var(--tx-mint, #01DEC2);
  transition: background .15s, color .15s, box-shadow .15s;
}
/* Stretched Link: macht den ganzen Slide klickbar, ohne ein zweites <a>.
   Der Fokusring bleibt am Button sichtbar statt an der unsichtbaren Flaeche. */
.tx-hero-slide.tx-hero-banner .tx-hbn__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cta:hover {
  background: #8CFCE6;
  box-shadow: inset 0 0 0 1px #8CFCE6;
  color: #03100D;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cta--ghost {
  background: transparent;
  color: var(--tx-mint, #01DEC2);
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cta--ghost:hover {
  background: var(--tx-mint, #01DEC2);
  color: #03100D;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cta--custom {
  background: var(--tx-hbn-cta-bg, #FF6A1F);
  color: var(--tx-hbn-cta-ink, #03100D);
  box-shadow: inset 0 0 0 1px var(--tx-hbn-cta-bg, #FF6A1F);
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cta--custom:hover { filter: brightness(1.12); }
/* clip-path beschneidet auch den Fokusring — er muss nach innen gezeichnet
   werden, sonst ist er unsichtbar. */
.tx-hero-slide.tx-hero-banner .tx-hbn__cta:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--tx-bg, #0B0C0D),
              inset 0 0 0 4px var(--tx-mint, #01DEC2);
}
.tx-hero-slide.tx-hero-banner .tx-hbn__meta {
  font-family: var(--tx-sub, 'Rajdhani', sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-text-mute, #ABB2B5);   /* 9,39:1 statt der 8,88:1 des Handoffs */
  white-space: nowrap;
}

/* „ANZEIGE" ──────────────────────────────────────────────────────────── */
/* Handoff: 10px ohne Grund. Beides zu wenig — 10px liegt unter der am
   02.08. festgelegten Lesbarkeitsgrenze von 11px, und eine gesetzlich
   vorgeschriebene Kennzeichnung darf nicht davon abhaengen, wie hell das
   Artwork an dieser Stelle zufaellig ist. */
.tx-hero-slide.tx-hero-banner .tx-hbn__ad {
  position: absolute; top: 18px; right: 20px; z-index: 5;
  font-family: var(--tx-sub, 'Rajdhani', sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tx-text, #ECEFEE);
  background: rgba(4, 7, 10, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  padding: 6px 11px;
  pointer-events: none;
}

/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width: 759px) {
  .tx-hero-slide.tx-hero-banner .tx-hbn__stage { height: 420px; }

  .tx-hero-slide.tx-hero-banner .tx-hbn__scrim {
    /* Letzter Stop ist unsere Seitenfarbe, nicht #04070A: diese Kante
       beruehrt die naechste Sektion. Der Unterschied ist unsichtbar
       (ΔE2000 1,25) — mit dem Token ist die Naht nachweisbar null. */
    background: linear-gradient(180deg,
      rgba(4, 7, 10, .13) 0%,
      rgba(4, 7, 10, .80) 55%,
      var(--tx-bg, #0B0C0D) 100%);
  }

  /* Unten verankert statt zentriert. Der Handoff setzt translateY(-56%),
     legt damit aber 72 % des Textes in die Motivzone der oberen 56 % —
     ein Widerspruch zur eigenen Zonenvorgabe. Unten verankert waechst eine
     dritte Headline-Zeile ausserdem nach OBEN ins Motiv statt nach unten
     in die Tab-Zeile. */
  .tx-hero-slide.tx-hero-banner .tx-hbn__content {
    align-items: flex-end;
    padding-block-end: 38px;
  }
  .tx-hero-slide.tx-hero-banner .tx-hbn__text {
    max-width: 100%;
    gap: 12px;
  }
  .tx-hero-slide.tx-hero-banner .tx-hbn__kicker { font-size: 10px; }
  .tx-hero-slide.tx-hero-banner .tx-hbn__sub    { display: none; }
  .tx-hero-slide.tx-hero-banner .tx-hbn__cta    { font-size: 16px; padding: 13px 22px; }
  .tx-hero-slide.tx-hero-banner .tx-hbn__ad     { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-hero-slide.tx-hero-banner,
  .tx-hero-slide.tx-hero-banner * { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Systemleiste unter dem Slide
   ───────────────────────────────────────────────────────────────────────
   Vier PCs aus einer Kategorie. Sie gehoert zum Slide und wechselt deshalb
   mit ihm — kein eigener Zustand, keine zweite Logik.
   Mobil eine wischbare Reihe statt gestapelter Karten: gestapelt waeren es
   vier volle Bildschirmhoehen, bevor der erste Inhalt darunter kommt.
   ═══════════════════════════════════════════════════════════════════════ */
.tx-hero-slide.tx-hero-banner .tx-hbn__systems {
  /* Ueber die Slider-Bedienelemente. Pfeile, Tabs und der Pause-Knopf sind
     absolut zur ganzen Slider-Sektion positioniert; ohne eigenen Stapelplatz
     ragt eines davon in die Kartenreihe. Statt jedes einzeln zu verschieben
     bekommt die Leiste eine hoehere Ebene — das haelt auch, wenn spaeter ein
     weiteres Bedienelement dazukommt. */
  position: relative;
  z-index: 6;
  /* ⚠️ Der HINTERGRUND dieser Leiste steht seit 2026-08-04 nicht mehr hier,
     sondern in custom.css im Block „SYSTEMLEISTE · HINTERGRUND".
     Grund ist nicht Geschmack, sondern Auslieferung: Portlet-CSS wird von JTL
     ohne Versionsangabe eingebunden (OPC\PortletStyles::getCssFile baut den
     Pfad ohne ?v=), und nginx liefert jede .css 30 Tage lang
     `public, immutable`. Eine Aenderung hier erreicht niemanden mehr, der die
     Datei schon einmal geladen hat — auch nicht bei Hard-Refresh. custom.css
     hat dagegen ein Cache-Token in header.tpl.
     Die Regel dort steht auf (0,4,0) und schlaegt damit auch eine alte, noch
     im Browsercache liegende Fassung dieser Datei. Hier bleibt nur die
     Grundfarbe: sie hat sich nie geaendert und schadet als Fallback nicht. */
  background-color: var(--tx-bg, #0B0C0D);
  box-shadow: inset 0 1px 0 var(--tx-line, #25282A);
  padding-block: clamp(20px, 2.2vw, 30px);
}
.tx-hero-slide.tx-hero-banner .tx-hbn__syshead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__systitle {
  font-family: var(--tx-h, 'Oxanium', sans-serif);
  font-weight: 700;
  font-size: clamp(17px, 1.4vw, 24px);
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--tx-text, #ECEFEE);
  margin: 0;
  min-width: 0;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__sysnote {
  font-family: var(--tx-sub, 'Rajdhani', sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-text-mute, #ABB2B5);
  white-space: nowrap;
  margin-left: auto;          /* schiebt sich neben den Alle-Link */
}
.tx-hero-slide.tx-hero-banner .tx-hbn__sysall {
  font-family: var(--tx-sub, 'Rajdhani', sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--tx-mint, #01DEC2);
}
.tx-hero-slide.tx-hero-banner .tx-hbn__sysall:hover { text-decoration: underline; }

.tx-hero-slide.tx-hero-banner .tx-hbn__sysgrid {
  display: grid;
  /* DREI statt vier Spalten: jede Karte wird ein Drittel breiter, den
     gewonnenen Platz bekommt der PC. Der Rest des Sortiments haengt an
     "Alle N Systeme". */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Karte ─────────────────────────────────────────────────────────────── */
.tx-hero-slide.tx-hero-banner .tx-hbn__card {
  display: grid;
  /* Bild links, Text rechts. Die Bildspalte ist deutlich groesser als vorher
     (84px) — die Karte darf etwas Raum haben, sonst wirkt sie wie eine
     Fusszeile statt wie ein Angebot. */
  /* PC groesser: er ist das, was der Kunde erkennt. Die Textspalte
     kommt mit dem Rest gut aus, weil der Fuss gestapelt ist. */
  /* Die gewonnene Breite geht groesstenteils an den PC — er ist das, was
     der Kunde erkennt, nicht die Spec-Zeile. */
  grid-template-columns: clamp(150px, 13vw, 210px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  /* Markensignatur: dieselbe gekappte Ecke wie unsere Buttons. Sie ist der
     Unterschied zwischen "unsere Karte" und "irgendeine Shop-Kachel" — und
     genau das war der Dubaro-Eindruck. Auf einer clip-path-Kante wird ein
     echter border abrasiert, deshalb steht der Rahmen als inset-Schatten. */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px,
                     100% 100%, 14px 100%, 0 calc(100% - 14px));
  min-width: 0;
  text-decoration: none;
  /* Rahmen als ZWEI FLAECHEN, nicht als 1px-Schatten.
     Gemessen: die Karte ist 246,359px hoch — keine ganze Pixelzahl. Ein
     `box-shadow: inset 0 0 0 1px` verliert dabei die unterste Zeile, weil
     die clip-path-Kante beim Rastern auf einen halben Pixel faellt. Der
     Rahmen fehlte deshalb unten, oben und links war er da.
     Loesung: ::before fuellt die geclippte Flaeche in Rahmenfarbe, ::after
     legt den Kartengrund 1px kleiner darueber. Die Differenz IST der
     Rahmen — eine Flaeche kann keine Zeile verlieren.
     (Verwandt mit der schon dokumentierten Regel „auf einer clip-path-Kante
     wird ein echter border abrasiert" — der inset-Schatten hilft nur bei
     ganzzahligen Hoehen.) */
  background: none;
  position: relative;
  transition: none;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__card::before,
.tx-hero-slide.tx-hero-banner .tx-hbn__card::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__card::before {
  inset: 0;
  background: var(--tx-line, #25282A);
  transition: background .15s;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__card::after {
  inset: 1px;
  background: var(--tx-card, #14171A);
  /* 13px statt 14: eine Stufe kleiner, damit die Fase parallel laeuft. */
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px,
                     100% 100%, 13px 100%, 0 calc(100% - 13px));
}
/* Inhalt ueber die beiden Flaechen heben. */
.tx-hero-slide.tx-hero-banner .tx-hbn__card > * {
  position: relative;
  z-index: 1;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__card--nopic {
  grid-template-columns: minmax(0, 1fr);
}
/* Hover faerbt die Rahmenflaeche, nicht mehr einen Schatten. */
.tx-hero-slide.tx-hero-banner .tx-hbn__card:hover::before {
  background: var(--tx-mint, #01DEC2);
}
.tx-hero-slide.tx-hero-banner .tx-hbn__card:focus-visible {
  outline: 2px solid var(--tx-mint, #01DEC2);
  outline-offset: 2px;
}

/* Bild: fuellt seine Spalte, KEIN eigener Rahmen und kein eigener Grund —
   ein Kasten im Kasten liest sich gedoppelt. */
.tx-hero-slide.tx-hero-banner .tx-hbn__cardpic {
  display: block;
  aspect-ratio: 1;
  min-width: 0;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cardpic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tx-hero-slide.tx-hero-banner .tx-hbn__cardbody {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;               /* sonst sprengt ein langer Name die Spalte */
}
/* Verfuegbarkeit als Plakette. Der Text kommt aus der Wawi
   (cEstimatedDelivery), nicht aus einer Annahme — wir behaupten keine
   Lieferzeit, die die Warenwirtschaft nicht deckt. */
.tx-hero-slide.tx-hero-banner .tx-hbn__cardbadge {
  align-self: flex-start;
  font-family: var(--tx-sub, 'Rajdhani', sans-serif);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tx-mint, #01DEC2);
  box-shadow: inset 0 0 0 1px rgba(1, 222, 194, .38);
  padding: 5px 8px;
  margin-bottom: 7px;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cardbadge--leer {
  visibility: hidden;   /* haelt die Hoehe, zeigt aber nichts */
  box-shadow: none;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cardname {
  font-family: var(--tx-h, 'Oxanium', sans-serif);
  font-weight: 700;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tx-text, #ECEFEE);
  /* Zwei Zeilen erlaubt statt „SCORPION X…" — abgeschnittene Produktnamen
     sind schlechter als eine zweite Zeile. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cardspec {
  font-family: var(--tx-body, 'Inter', sans-serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--tx-text-dim, #BEC5C7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* FPS mit Balken ─────────────────────────────────────────────────────── */
/* Der Balken ist die einzige Stelle, an der die Zahl greifbar wird — 55 FPS
   allein sagt niemandem etwas, 55 von 144 schon. Skala deshalb fest auf
   144 FPS; --tx-fps-pct setzt js/custom.js. Ohne Wert bleibt die ganze
   Zeile unsichtbar, statt einen leeren Balken zu zeigen. */
.tx-hero-slide.tx-hero-banner .tx-hbn__cardfps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  visibility: hidden;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cardfps[data-fps-quelle] { visibility: visible; }
.tx-hero-slide.tx-hero-banner .tx-hbn__fpsbar {
  position: relative;
  display: block;
  height: 4px;
  background: var(--tx-bg, #0B0C0D);
  box-shadow: inset 0 0 0 1px var(--tx-line, #25282A);
}
.tx-hero-slide.tx-hero-banner .tx-hbn__fpsbar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tx-fps-pct, 0%);
  background: var(--tx-mint, #01DEC2);
  transition: width .3s ease;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__fpsval {
  font-family: var(--tx-sub, 'Rajdhani', sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--tx-mint, #01DEC2);
  white-space: nowrap;
}

/* Fuss GESTAPELT, nicht nebeneinander: „Konfigurieren →" stand neben dem
   Preis und lief aus der Karte heraus. Untereinander passt es bei jeder
   Kartenbreite, und die Pflichtangaben bekommen ihren Platz. */
.tx-hero-slide.tx-hero-banner .tx-hbn__cardfoot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 10px;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cardnote,
.tx-hero-slide.tx-hero-banner .tx-hbn__cardrate {
  font-family: var(--tx-body, 'Inter', sans-serif);
  font-size: 11px;
  line-height: 1.35;
  color: var(--tx-text-mute, #ABB2B5);
  /* KEIN nowrap: bei schmaler Karte ragte „inkl. MwSt. · zzgl. Versand"
     sonst aus dem Kasten. Zwei Zeilen sind hier in Ordnung. */
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cardrate { color: var(--tx-text-dim, #BEC5C7); }
.tx-hero-slide.tx-hero-banner .tx-hbn__cardprice {
  font-family: var(--tx-h, 'Oxanium', sans-serif);
  font-weight: 800;
  font-size: clamp(21px, 1.5vw, 26px);
  line-height: 1;
  color: var(--tx-text, #ECEFEE);
  white-space: nowrap;
}
.tx-hero-slide.tx-hero-banner .tx-hbn__cardgo {
  font-family: var(--tx-sub, 'Rajdhani', sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tx-mint, #01DEC2);
  white-space: nowrap;
  margin-top: 8px;
}

@media (max-width: 1199px) {
  .tx-hero-slide.tx-hero-banner .tx-hbn__sysgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 759px) {
  /* Wischbare Reihe. Karten behalten eine feste Breite, damit die naechste
     angeschnitten sichtbar bleibt — das ist der Hinweis, dass es weitergeht. */
  .tx-hero-slide.tx-hero-banner .tx-hbn__sysgrid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* aus der Box heraus bis an die Bildschirmkante wischen */
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .tx-hero-slide.tx-hero-banner .tx-hbn__sysgrid::-webkit-scrollbar { display: none; }
  .tx-hero-slide.tx-hero-banner .tx-hbn__card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .tx-hero-slide.tx-hero-banner .tx-hbn__systitle { font-size: 17px; }
  .tx-hero-slide.tx-hero-banner .tx-hbn__sysnote  { margin-left: 0; order: 3; flex-basis: 100%; }
  /* Karte mobil: Bild kleiner, damit Name und Preis nicht gedraengt stehen */
  .tx-hero-slide.tx-hero-banner .tx-hbn__card { grid-template-columns: 92px minmax(0, 1fr); }
}